/* =======================================================================
   PUNMANTOU — styles_v4.7.css   (LAYOUT SKELETON — flex-column standard)
   -----------------------------------------------------------------------
   INDUSTRY-STANDARD SHELL (verified turn 47):
     display:flex; flex-direction: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 (0 0 auto)
   and the stage is bounded (overflow-y:auto). Banner never scrolls.

   The RESPONSIVE LADDER still does the intelligent shaping (drop tagline,
   coins up, cut guesses, tighten spacing) so the maximum useful game stays on
   screen and looks right. Scroll is only the floor beneath the ladder.

   Board: clamp() width + aspect-ratio. No runtime JS tile sizing.
   100dvh = dynamic viewport height, so mobile browser bars appearing/
   disappearing don't break the fit.
   ======================================================================= */

:root{
  --page-bg:#F5F7FA;
  --panel-bg:#FFFFFF;
  --ink:#1C222B;
  --dim:#697586;
  --line:#CBD4DE;
  --accent:#7B3B4E;
  --lock:#3D8361;
  --key-known:#FFC933;
  --key-known-ink:#1C222B;
  --lock-ink:#FFFFFF;
  --found-tile:#FFC933;
  --found-ink:#1C222B;
  --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;}
html,body{
  margin:0;padding:0;height:100%;
  -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;
}

/* =======================================================================
   APP SHELL — the standard flex column.
   ======================================================================= */
.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.
   This is the safety net. On normal phones it never scrolls.
   Inside, the game block floats centered when there's slack.
   ======================================================================= */
.stage{
  flex:1 1 auto;
  min-height:0;                  /* lets the flex item actually shrink */
  overflow-y:auto;               /* the ONE scroll region; banner/keyboard fixed */
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  justify-content:center;        /* float the block centered when slack exists */
  padding:0 18px;
}

/* THE GAME BLOCK — one solid unit; emphasis space around board & buttons. */
.game-block{
  display:flex;flex-direction:column;
  gap:var(--block-gap);
  padding:12px 0;
  flex:0 0 auto;                 /* keep natural height; stage scrolls if needed */
}

/* ---- 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);
}
.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);
}

/* ---- 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;
}
.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;
}

/* ---- 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;}
.key.known{background:var(--key-known);border-color:var(--key-known);color:var(--key-known-ink);}
.kb-spacer{flex:.5 1 0;max-width:17px;}

/* =======================================================================
   RESPONSIVE LADDER — intelligent shaping, keeps the max useful game on
   screen and looking right. Scroll (above) is the floor beneath it; these
   breakpoints are now about LOOKS, not preventing overlap.
   Order as height shrinks:
     1 (auto) float slack collapses first — justify-content:center yields it
     2  760  board/button/guesses emphasis tightens
     3  720  banner shortens
     4  680  coins onto label row, "Attempts" drops ("Remaining" stays)
     5  640  guesses removed
     6  600  everything to floor spacing
     7  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;}   /* removed here (was 640) to close the
                                           overflow band that briefly showed a
                                           scroll before the next step */
}
@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;}
}