/* Bendwords web game. Layout: one narrow column (phone first): header, day line, shape tabs, board, words, promo. */
:root {
  --yellow: #f2b705;      /* brand yellow (profile picture, reels) */
  --ink: #22301e;         /* brand ink */
  --bg: #fbf4dc;          /* page: pale yellow paper */
  --surface: #ffffff;
  --cell: #ffffff;
  --cell-line: #22301e;
  --blocked: #c9c3ad;
  --letter: #22301e;
  --muted: #6b6a55;
  --soft: #f3e7b8;
  --sel: #f2b705;
  --mcell: #ffffff;       /* unpainted mosaic cells: kept light so the black outline shows */
  --unpainted: #d9d4c0;   /* found mosaic words waiting for paint */
  --hint: #f2b705;        /* hinted cells: solid brand yellow, ink letter, in both themes */
  --bad: #d9534f;
  --w1: #f5b5c8; --w2: #b5dba6; --w3: #a9d4f5; --w4: #ffc79e; --w5: #d4c2f2; --w6: #f7dd7a;
  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 0 rgba(34, 48, 30, .12), 0 6px 18px rgba(34, 48, 30, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161d14; --surface: #1f291c; --cell: #26321f; --cell-line: #6f7f60; --blocked: #3a4532;
    --letter: #f4f0dc; --muted: #a8ad94; --soft: #2c3826; --ink: #22301e; --mcell: #55634b; --unpainted: #8c9580;
    --w1: #a2476e; --w2: #4d7d3c; --w3: #2f6f9e; --w4: #b0602b; --w5: #6b56a3; --w6: #9a7a12;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161d14; --surface: #1f291c; --cell: #26321f; --cell-line: #6f7f60; --blocked: #3a4532;
  --letter: #f4f0dc; --muted: #a8ad94; --soft: #2c3826; --ink: #22301e; --mcell: #55634b; --unpainted: #8c9580;
  --w1: #a2476e; --w2: #4d7d3c; --w3: #2f6f9e; --w4: #b0602b; --w5: #6b56a3; --w6: #9a7a12;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--letter); font-family: var(--body); font-size: 15px; line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--yellow); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; }

.top { background: var(--yellow); color: var(--ink); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.top-in, .wrap {
  max-width: 560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top-in { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; color: inherit; }
.brand img { width: 38px; height: 38px; flex: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--ink); }
.brand b { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: .06em; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: transparent;
  display: grid; place-items: center; font-weight: 800; color: var(--ink);
}
.iconbtn svg { width: 20px; height: 20px; }

.wrap { padding-block: 14px 40px; display: grid; gap: 14px; }

.day { display: flex; align-items: center; gap: 8px; }
.day .nav { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--soft); font-size: 18px; line-height: 1; }
.day .nav:disabled { opacity: .3; cursor: default; }
.day-text { flex: 1; min-width: 0; text-align: center; }
.day-text .theme { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -.01em; text-wrap: balance; }
.day-text .meta { color: var(--muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tab {
  border: 2px solid transparent; background: var(--surface); border-radius: 12px; padding: 7px 2px 6px;
  display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow);
  position: relative;
}
.tab svg { width: 26px; height: 26px; }
.tab[aria-selected="true"] { border-color: var(--letter); }
.tab .done {
  position: absolute; top: -6px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--w2); color: var(--ink); font-size: 12px; display: grid; place-items: center; border: 2px solid var(--bg);
}

.board-card { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 12px; display: grid; gap: 10px; position: relative; }
.bar { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.bar .timer { font-weight: 800; font-size: 16px; min-width: 52px; }
.bar .count { color: var(--muted); font-size: 13px; margin-right: auto; }
.pill {
  border: 2px solid var(--letter); background: transparent; border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: 13px;
}
.pill.solid { background: var(--letter); color: var(--bg); }
.pill:disabled { opacity: .35; cursor: default; }

.board { width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; max-height: 62vh; }
.board .cell { fill: var(--cell); stroke: var(--cell-line); }
.board .cell.blocked { fill: var(--blocked); }
.board .cell.mcell { fill: var(--mcell); }
.board .cell.hint { fill: var(--hint); }
.board .cell.unpainted { fill: var(--unpainted); }
.palette { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.paint {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cell-line); padding: 0;
  box-shadow: 0 0 0 0 var(--letter); transition: box-shadow .12s;
}
.paint[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--letter); }
.paint-name { font-weight: 800; font-size: 13px; min-width: 56px; }
button.word { border: 0; background: none; padding: 0; cursor: pointer; }
.word.unpainted .box { background: var(--unpainted); }
.board .letter.hint, .board .letter.on-light { fill: #22301e; }
.board .letter.on-dark { fill: #ffffff; }
.board .letter { fill: var(--letter); font-family: var(--display); font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.board .trail { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.board .sel { opacity: .8; }
.board .seldot { opacity: .8; pointer-events: none; }
.board.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

.status { min-height: 1.45em; text-align: center; font-weight: 700; letter-spacing: .08em; font-size: 15px; }
.status.msg { letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: 14px; }

.words-head { display: flex; justify-content: center; }
.pill.small { padding: 3px 11px; font-size: 12px; }
.words { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; }
.word { display: flex; gap: 2px; }
.word .box {
  width: 22px; height: 26px; border: 1.5px solid var(--cell-line); border-radius: 4px; background: var(--cell);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--letter);
}
.word.found .box { color: var(--ink); border-color: transparent; }
.words.grouped { display: grid; gap: 10px; justify-content: stretch; }
.group { display: grid; gap: 6px; }
.group-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--cell-line); }
.group-words { display: flex; flex-wrap: wrap; gap: 6px 12px; }

.solved {
  border-top: 2px dashed var(--soft); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 14px 4px 4px;
}
.solved h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -.01em; }
.solved p { margin: 0; color: var(--muted); }
.solved .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.promo { background: var(--ink); color: #f4f0dc; border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.promo h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 18px; }
.promo p { margin: 0; color: #c9ccb5; font-size: 14px; }
.promo .row { display: flex; gap: 8px; flex-wrap: wrap; }
.promo a, .promo span.soon {
  border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 13px; text-decoration: none;
  background: var(--yellow); color: var(--ink);
}
.promo span.soon { background: transparent; border: 2px solid #5d6b52; color: #c9ccb5; }

.foot { color: var(--muted); font-size: 12px; text-align: center; }

dialog {
  border: 0; border-radius: 18px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--letter);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
dialog::backdrop { background: rgba(22, 29, 20, .55); }
.dlg { padding: 20px; display: grid; gap: 12px; }
.dlg h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; }
.dlg ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.dlg .demo { width: 100%; max-width: 260px; justify-self: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stats b { display: block; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stats span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--letter); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-weight: 700; z-index: 20;
}
@media (prefers-reduced-motion: reduce) { .board.shake { animation: none; } }