/* ===========================================================================
   Daily Word — the layout on top of corner.css. Oversized tiles, a big
   on-screen keyboard, and status SYMBOLS on every evaluated tile/key so color
   is never the only cue (✓ right spot · ◆ right letter, wrong spot · ✕ not in
   the word). Tuned for iPad-first touch and older eyes.
   =========================================================================== */
/* JS (fit() in word.js) sets --tile and --key-h so the board + keyboard always
   fit the viewport together without scrolling; these are just sane fallbacks. */
.word-main { --tile: 56px; --key-h: 56px; --board-gap: 6px;
  max-width: 520px; margin: 0 auto; padding: 6px clamp(10px, 3vw, 20px) 24px;
  display: flex; flex-direction: column; align-items: center; }

/* ---- title + controls ---- */
.word-head { width: 100%; text-align: center; margin: 2px 0 6px; }
.word-head h1 { font-size: clamp(1.4rem, 5.2vw, 2rem); }
.word-head .word-sub { color: var(--ink-soft); font-weight: 700; font-size: .92rem; margin-top: 1px; }
.word-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 2px; width: 100%; }
.word-controls .qc-iconbtn { min-height: 44px; min-width: 0; padding: 0 10px; font-size: .84rem; gap: .32em; box-shadow: var(--shadow-soft); }
.word-controls .qc-iconbtn .cnt { font-size: .82em; opacity: .8; }
/* on phones, collapse the control labels to icons so all five hold one row —
   frees vertical space for bigger letter tiles. */
@media (max-width: 460px) {
  .word-controls { gap: 8px; }
  .word-controls .lbl { display: none; }
  .word-controls .qc-iconbtn { padding: 0 14px; font-size: 1.2rem; }
}

.practice-banner {
  display: none; align-items: center; gap: .5em; justify-content: center;
  width: 100%; margin: 6px 0 0; padding: 8px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
}
body.word.is-practice .practice-banner { display: flex; }

/* ---- message line ---- */
.word-msg {
  min-height: 1.6em; margin: 6px 0 2px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.word-msg.toast {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow);
}

/* ---- board ---- */
.word-board { display: grid; grid-template-rows: repeat(6, var(--tile)); gap: var(--board-gap);
  margin: 4px auto 0; width: auto; }
.word-row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--board-gap); }
.tile {
  position: relative; width: var(--tile); height: var(--tile);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--tile-border-empty); border-radius: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--tile) * 0.5); line-height: 1;
  text-transform: uppercase; user-select: none;
}
.tile[data-state="tbd"] { border-color: var(--tile-border-filled); }
.tile[data-state="correct"], .tile[data-state="present"], .tile[data-state="absent"] {
  color: var(--on-tile); border-color: transparent;
}
.tile[data-state="correct"] { background: var(--tile-correct); }
.tile[data-state="present"] { background: var(--tile-present); }
.tile[data-state="absent"]  { background: var(--tile-absent); }

/* always-on status symbol (colorblind safety, in ADDITION to color) */
.tile::after {
  position: absolute; bottom: 3px; right: 6px; font-size: .78rem; line-height: 1;
  font-weight: 700; opacity: .92;
}
.tile[data-state="correct"]::after { content: "\2713"; }  /* ✓ */
.tile[data-state="present"]::after { content: "\25C6"; }  /* ◆ */
.tile[data-state="absent"]::after  { content: "\2715"; }  /* ✕ */

/* gentle motion (all disabled under prefers-reduced-motion via corner.css) */
.tile.pop { animation: tilePop .12s ease; }
@keyframes tilePop { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 100% { transform: scale(1); } }
.tile.reveal { animation: tileFlip .5s ease forwards; }
@keyframes tileFlip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}
.word-row.shake { animation: rowShake .5s ease; }
@keyframes rowShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
.word-row.bounce .tile { animation: tileBounce .9s ease; }
@keyframes tileBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-16px); } 50% { transform: translateY(4px); } }

/* ---- hint text (Hint button now lives in the controls row) ---- */
.word-hint-text { width: 100%; text-align: center; margin: 8px 0 0;
  color: var(--accent-ink); font-weight: 700; font-size: 1rem; }
.word-hint-text:empty { display: none; margin: 0; }
.word-hint-text .hk { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; }

/* ---- result banner (after the daily/practice game ends) ---- */
.word-result {
  display: none; width: 100%; margin: 12px 0 2px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); text-align: center;
}
body.word.is-done .word-result { display: block; }
/* once the game is over the keyboard isn't needed — hide it (and any hint text)
   so the result banner fits without pushing anything below the fold. */
body.word.is-done .keyboard, body.word.is-done .word-hint-text { display: none; }
.word-result h2 { font-size: 1.3rem; margin-bottom: .2em; }
.word-result .answer { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-ink); font-size: 1.15rem; }
.word-result .streakline { color: var(--ink-soft); font-weight: 700; margin-top: 4px; }
.word-result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* ---- keyboard ---- */
.keyboard { width: 100%; max-width: 520px; margin: 10px auto 0; display: flex;
  flex-direction: column; gap: 6px; }
.kb-row { display: flex; gap: 5px; justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; height: var(--key-h); min-height: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, calc(var(--key-h) * 0.42), 1.25rem);
  text-transform: uppercase; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, filter .1s ease;
}
.key:hover { filter: brightness(.97); }
.key:active { transform: translateY(2px); }
.key.wide { flex: 1.6 1 0; font-size: .92rem; }
.key[data-state="correct"], .key[data-state="present"], .key[data-state="absent"] {
  color: var(--on-tile); border-color: transparent;
}
.key[data-state="correct"] { background: var(--tile-correct); }
.key[data-state="present"] { background: var(--tile-present); }
.key[data-state="absent"]  { background: var(--tile-absent); opacity: .82; }
/* tiny status glyph on keys too (colorblind safety) */
.key[data-state="correct"]::after, .key[data-state="present"]::after {
  position: absolute; top: 3px; right: 5px; font-size: .6rem; line-height: 1; font-weight: 700; opacity: .95;
}
.key[data-state="correct"]::after { content: "\2713"; }
.key[data-state="present"]::after { content: "\25C6"; }

/* ---- how-to-play legend ---- */
.legend { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.legend-row { display: flex; align-items: center; gap: 12px; }
.legend-tile {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--on-tile);
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
}
.legend-tile::after { position: absolute; bottom: 2px; right: 4px; font-size: .62rem; font-weight: 700; }
.legend-tile.correct { background: var(--tile-correct); } .legend-tile.correct::after { content: "\2713"; }
.legend-tile.present { background: var(--tile-present); } .legend-tile.present::after { content: "\25C6"; }
.legend-tile.absent  { background: var(--tile-absent); }  .legend-tile.absent::after  { content: "\2715"; }
.legend-row span b { color: var(--ink); }

/* ---- stats ---- */
.stats-nums { display: flex; justify-content: space-around; text-align: center; margin: 4px 0 16px; }
.stats-nums .n { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; }
.stats-nums .l { color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.dist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.dist-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.dist-row .g { width: 1ch; color: var(--ink-soft); }
.dist-bar { background: var(--accent); color: var(--on-accent); text-align: right;
  padding: 2px 8px; border-radius: 6px; min-width: 1.6em; font-size: .95rem; }
.dist-bar.zero { background: var(--surface-2); color: var(--ink-soft); }
.dist-row.here .dist-bar { background: var(--accent-ink); }

/* ---- settings ---- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .s-label { font-weight: 700; }
.setting-row .s-desc { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.switch { position: relative; flex: 0 0 auto; width: 60px; height: 34px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--surface-2); border: 2px solid var(--line);
  border-radius: 999px; transition: background .15s ease, border-color .15s ease; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(26px); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }