/* =======================================================================
   PUNMANTOU — styles.css   (THE "LOOK" FILE)
   -----------------------------------------------------------------------
   SHELL: a flex column, height:100dvh
     header    flex:0 0 auto   — fixed, never scrolls, never shrinks
     stage     flex:1 1 auto; overflow-y:auto — fills space; scrolls ONLY
               when content can't fit (the safety net)
     keyboard  flex:0 0 auto   — fixed, never scrolls, never shrinks
   Overlap is structurally impossible: the keyboard can't be pushed and the
   stage is bounded. The banner never scrolls.

   The RESPONSIVE LADDER does the shaping (tighten spacing, shorten banner,
   coins up, cut guesses) so the maximum useful game stays on screen.

   LAYOUT RULE: the board never changes position during play. Elements
   reserve their space whether or not they are showing. Only the responsive
   ladder moves anything, and only as the screen height shrinks.

   Board: clamp() width + aspect-ratio. No runtime tile sizing in game.js.
   ======================================================================= */

:root{
  --page-bg:#F5F7FA;
  --panel-bg:#FFFFFF;
  --ink:#1C222B;
  --dim:#697586;
  --line:#CBD4DE;
  --accent:#7B3B4E;
  --lock:#3D8361;           /* locked / correct tile */
  --lock-ink:#FFFFFF;
  --found-tile:#FFC933;     /* Easy: a found letter on the board */
  --found-ink:#1C222B;
  --key-found:#FFC933;      /* a marked key: a letter FOUND but not placed (M6). Its own name so it can diverge from the found tile. */
  --key-found-ink:#1C222B;
  --win-green:#2FAE68;
  --radius:6px;

  /* Board: 10 tiles must fit one row at 360px. Breaks out of stage padding. */
  --tile-gap:4px;
  --tile-size:clamp(27px, 8.2vw, 33px);

  --banner-pad:16px;
  --block-gap:12px;
  --board-space:26px;
  --button-space:22px;
  --guesses-gap:20px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  margin:0;padding:0;height:100%;overflow:hidden;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button:focus:not(:focus-visible){outline:none;}

/* =======================================================================
   APP SHELL
   ======================================================================= */
.app{
  position:fixed;inset:0;
  max-width:430px;margin:0 auto;
  height:100dvh;                 /* dynamic viewport: survives browser bars */
  display:flex;flex-direction:column;
  background:var(--page-bg);
  overflow:hidden;               /* app box never scrolls; only .stage does */
}

/* ---- HEADER — fixed, never scrolls ------------------------------------ */
header{
  flex:0 0 auto;
  padding:var(--banner-pad) 16px;
  background:var(--ink);
  border-bottom:1px solid var(--ink);
  display:flex;align-items:center;gap:8px;
}
.banner-title{
  font-family:"Yatra One",system-ui,cursive;
  font-size:24px;font-weight:700;font-style:italic;
  letter-spacing:-.01em;color:var(--panel-bg);margin:0;
}
.banner-title .colon{color:var(--panel-bg);}
header .tag{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:17px;font-style:italic;color:var(--panel-bg);opacity:.8;
  white-space:nowrap;overflow:hidden;
}
header .hdr-icons{margin-left:auto;display:flex;align-items:center;gap:14px;}
header .icon-btn{
  background:none;border:none;padding:0;cursor:pointer;color:var(--panel-bg);
  display:flex;align-items:center;justify-content:center;
}
header .mode-indicator{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--panel-bg);font-size:18px;font-weight:700;line-height:1;
}
header .icon-btn svg{display:block;width:22px;height:22px;}
header .icon-btn.info svg{width:20px;height:20px;}

/* =======================================================================
   STAGE — fills remaining space; scrolls ONLY when content can't fit.
   ======================================================================= */
.stage{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:0 18px;
}

.game-block{
  display:flex;flex-direction:column;
  gap:var(--block-gap);
  padding:12px 0;
  flex:0 0 auto;
}

/* ---- CLUE ------------------------------------------------------------- */
.clue-label,.section-label{
  font-family:system-ui,-apple-system,sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.16em;color:var(--accent);margin:0;
}
.clue{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:22px;line-height:1.28;font-style:italic;font-weight:600;
  margin:2px 0 0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(22px*1.28*2);
}
/* S70: reserves two lines from the start, blank until bought. Nothing moves
   when the second clue arrives. */
.clue2{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.25;color:#5b5346;margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(16px*1.25*2);
}
/* Every character is inserted at once so the line never reflows mid-reveal;
   only opacity is staggered. */
.clue2 .c2ch{opacity:0;transition:opacity 90ms linear;}
.clue2 .c2ch.in{opacity:1;}

/* ---- ATTEMPTS + COINS ------------------------------------------------- */
.attempts-block{display:flex;flex-direction:column;gap:6px;}
.coins{display:flex;flex-wrap:wrap;gap:5px;}
.coin{
  width:11px;height:11px;border-radius:50%;
  background:var(--lock);border:1px solid var(--lock);
}
.coin.spent{background:var(--page-bg);border:1px solid var(--ink);}

/* ---- BOARD (emphasis space; full-width breakout for 10 tiles at 360) --- */
.game-block .board-zone{
  margin:var(--board-space) -18px;
  display:flex;align-items:center;justify-content:center;
}
.board{
  display:flex;justify-content:center;flex-wrap:nowrap;
  gap:var(--tile-gap);
}
.cell{
  width:var(--tile-size);
  aspect-ratio:1 / 1.22;
  border:1.5px solid var(--ink);border-radius:var(--radius);
  background:var(--panel-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:calc(var(--tile-size)*0.62);
  text-transform:uppercase;font-weight:700;color:var(--ink);
  user-select:none;
}
/* The highlighted tile — a glow around it, never a fill. */
.cell.cursor{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,59,78,.18);}
.cell.locked{background:var(--lock);color:var(--lock-ink);border-color:var(--ink);}
.cell.found{background:var(--found-tile);border-color:var(--ink);color:var(--found-ink);}

/* ---- HINT ROW (focus element, extra space above) ---------------------- */
.game-block .hint-row{
  display:flex;gap:10px;
  margin-top:calc(var(--button-space) - var(--block-gap));
}
.btn-outline{
  flex:1;font-family:system-ui,-apple-system,sans-serif;font-weight:600;
  font-size:16px;letter-spacing:.02em;padding:11px 8px;border-radius:var(--radius);
  cursor:pointer;min-height:44px;
  background:var(--panel-bg);color:var(--accent);border:2px solid var(--accent);
  white-space:nowrap;
}
.btn-outline:disabled{
  background:var(--panel-bg);color:var(--line);
  border:2px solid var(--line);cursor:not-allowed;
}
/* An <a> wearing the button look (the feedback link). */
.btn-link{
  text-decoration:none;display:flex;align-items:center;justify-content:center;
}

/* ---- GUESSES (lowest priority; removed under squeeze) ----------------- */
.game-block .guesses{
  display:flex;flex-direction:column;gap:4px;
  margin-top:calc(var(--guesses-gap) - var(--block-gap));
}
.guesses .count{
  font-family:system-ui,-apple-system,sans-serif;
  font-weight:600;font-size:14px;color:var(--accent);
}
.guess-page{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:min-content;gap:2px 10px;align-content:start;
}
.guess-chip{
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:13px;letter-spacing:.02em;text-transform:uppercase;font-weight:400;
  color:var(--ink);padding:0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* =======================================================================
   KEYBOARD — fixed, never scrolls, never shrinks (except squeeze floor).
   ======================================================================= */
.keyboard{
  flex:0 0 auto;
  background:var(--ink);border-top:1px solid var(--ink);
  padding:20px 6px calc(20px + env(safe-area-inset-bottom,0px));
  user-select:none;
}
.kb-row{display:flex;justify-content:center;gap:5px;margin-bottom:6px;}
.kb-row:last-child{margin-bottom:0;}
.key{
  flex:1 1 0;min-width:0;height:56px;max-width:38px;
  background:var(--panel-bg);border:1px solid var(--line);border-radius:5px;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:22px;font-weight:700;color:var(--ink);text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.key:active{background:var(--line);}
.key.wide{flex:1.6 1 0;max-width:58px;font-size:19px;letter-spacing:.02em;}
.key.enter{background:var(--lock);color:var(--lock-ink);border-color:var(--lock);}
.key.wide.enter{font-size:12px;}
/* A letter the player has FOUND but not placed (D4, M6). Same yellow as a
   found tile. v404 fix: the class is written by paintKeyboard as "found";
   this rule was named ".key.known", so it never matched and marked keys
   never painted in either mode. "known" is also the wrong word under M6 —
   known means letter AND place settled, which is a green tile. */
.key.found{background:var(--key-found);border-color:var(--key-found);color:var(--key-found-ink);}
.kb-spacer{flex:.5 1 0;max-width:17px;}

/* =======================================================================
   MODALS — Info, Settings, End screen.
   ======================================================================= */
.overlay{
  position:absolute;inset:0;z-index:10;
  background:rgba(28,34,43,.44);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  width:min(90%,340px);background:var(--panel-bg);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 44px rgba(28,34,43,.32);
  padding:20px 20px 22px;position:relative;
  max-height:85dvh;display:flex;flex-direction:column;
}
/* Info scrolls whenever its text is taller than the card — including when
   the phone's accessibility zoom makes it taller. */
.modal-scroll{overflow-y:auto;padding-right:4px;margin-right:-4px;}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 12px;
}
.modal-header .modal-title{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:19px;font-weight:700;color:var(--ink);margin:0;
}
.modal-header .close{
  position:static;flex:0 0 auto;width:26px;height:26px;
  border:none;background:none;cursor:pointer;color:var(--dim);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  padding:0;font-family:inherit;
}
.modal p{
  font-family:system-ui,-apple-system,sans-serif;
  margin:0 0 12px;font-size:15px;line-height:1.4;color:var(--ink);
}
.modal p:last-child{margin-bottom:0;}
.modal .quote{font-style:italic;color:var(--accent);text-align:center;}
.modal .modal-copyright{font-size:11px;color:var(--dim);margin-top:14px;}
.modal-divider{border:none;border-top:1px solid var(--line);margin:18px 0 14px;}
.modal-actions{display:flex;gap:10px;margin-top:16px;}

/* ---- Settings: difficulty toggle -------------------------------------- */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.setting-label{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:15px;font-weight:600;color:var(--ink);
}
.toggle{
  display:inline-flex;border:2px solid var(--accent);
  border-radius:var(--radius);overflow:hidden;
}
.toggle-opt{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:12px;letter-spacing:.04em;
  padding:9px 14px;min-height:44px;cursor:pointer;border:none;
  background:var(--panel-bg);color:var(--accent);
}
.toggle-opt.is-on{background:var(--accent);color:#fff;}

/* ---- End screen ------------------------------------------------------- */
.end-modal{text-align:center;}
/* Header carries the X only — no title — so it hugs the right edge. */
.end-header{justify-content:flex-end;margin:0;}
.end-badge{
  font-family:"Yatra One",system-ui,sans-serif;
  font-size:38px;line-height:1.15;color:var(--ink);
  margin:0 0 14px;
}
/* One fixed tile size for every answer, measured so ten letters fit. Set at
   runtime by sizeEndTiles(); the fallback keeps it sane if that never runs. */
.end-word{display:flex;justify-content:center;flex-wrap:nowrap;gap:4px;margin:0 0 14px;}
.end-cell{
  width:var(--end-slot,34px);height:calc(var(--end-slot,34px)*1.22);
  flex:0 0 auto;
  border:1.5px solid var(--ink);border-radius:var(--radius);
  background:var(--panel-bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:calc(var(--end-slot,34px)*.6);
  text-transform:uppercase;font-weight:700;user-select:none;
}
.end-stat{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.4;color:var(--ink);margin:0;
}
/* Bullets sit left-aligned but centred as a group under the stat line.
   Empty on a loss and on Clueless, where it collapses to nothing. */
.end-list{
  list-style:none;margin:8px 0 0;padding:0;
  align-self:center;text-align:left;
}
.end-list li{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.65;color:var(--ink);
  position:relative;padding-left:24px;
}
.end-list li::before{
  content:"\2713";position:absolute;left:0;top:0;
  color:var(--lock);font-weight:700;
}

/* =======================================================================
   "ALREADY GUESSED" POPUP (P20-P25)
   Button-sized, wearing the hint buttons' look. No dimmed backdrop — it is
   a passing notice, not a card. The transparent sheet still catches the tap
   that dismisses it, so that tap never reaches the board.
   ======================================================================= */
.popup-overlay{
  position:absolute;inset:0;z-index:20;
  background:transparent;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.popup{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--panel-bg);color:var(--accent);
  border:2px solid var(--accent);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(28,34,43,.28);
  padding:10px 18px;min-height:44px;justify-content:center;
  max-width:100%;
}
.popup-label{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.04em;
}
.popup-word{
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* =======================================================================
   SPLASH — unchanged from v3.
   ======================================================================= */
#splash{
  position:fixed;inset:0;z-index:50;
  max-width:430px;margin:0 auto;
  background:var(--page-bg);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(6vh + env(safe-area-inset-top,0px)) 28px calc(5vh + env(safe-area-inset-bottom,0px));
  transition:opacity .28s ease;
}
#splash.hidden{opacity:0;pointer-events:none;}
#splash .splash-title{
  font-family:"Yatra One",system-ui,cursive;
  font-style:italic;
  font-size:40px;line-height:1;letter-spacing:.01em;
  color:#5b5346;
  margin:0 0 22px;text-align:center;
}
#splash .splash-tagline{
  font-family:"Yatra One",system-ui,cursive;
  font-style:italic;font-weight:400;
  font-size:18px;line-height:1.15;
  color:#5b5346;
  margin:0;text-align:center;
}
#splash .splash-guru{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:18px 0;
}
#splash .splash-guru img{
  max-height:100%;max-width:74%;height:auto;width:auto;
  object-fit:contain;display:block;
}
#splash .splash-begin{
  font-family:"Yatra One",system-ui,cursive;
  font-size:34px;letter-spacing:.02em;
  color:#5b5346;
  background:none;border:none;cursor:pointer;padding:6px 10px;margin:0;
}
#splash .splash-begin:active{opacity:.7;}
#splash .splash-copyright{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:10px;letter-spacing:.08em;color:#8a8069;
  margin:10px 0 0;text-align:center;
}

/* =======================================================================
   RESPONSIVE LADDER — keeps the max useful game on screen and looking
   right. Scroll is the floor beneath it; these breakpoints are about LOOKS,
   not preventing overlap.
   Order as height shrinks:
     1 (auto) float slack collapses first
     2  760  board/button/guesses emphasis tightens
     3  720  banner shortens
     4  680  coins onto label row, "Attempts" drops; guesses removed
     5  600  everything to floor spacing
     6  560  keyboard rows shrink (below device scope)
   ======================================================================= */
@media (max-height:760px){
  :root{--board-space:16px;--button-space:14px;--guesses-gap:12px;}
}
@media (max-height:720px){
  :root{--banner-pad:10px;}
}
@media (max-height:680px){
  .attempts-block{flex-direction:row;align-items:center;gap:12px;}
  .attempts-block .coins{margin:0;}
  .attempts-word{display:none;}          /* drop "Attempts", keep "Remaining" */
  .game-block .guesses{display:none;}
}
@media (max-height:600px){
  :root{--block-gap:6px;--banner-pad:8px;--board-space:8px;--button-space:8px;}
  .game-block{padding:8px 0;}
}
@media (max-height:560px){
  .key{height:46px;}
  .keyboard{padding:12px 6px calc(12px + env(safe-area-inset-bottom,0px));}
  .kb-row{margin-bottom:4px;}
}

/* TAGLINE DROP — width-based: title always stays. */
@media (max-width:380px){
  header .tag{display:none;}
}