/* =======================================================================
   PUNMANTOU — styles.css   (THE "LOOK" FILE)
   All visual styling lives here: colors, spacing, sizes, fonts, layout.
   To change how the game LOOKS, edit this file only.
   ======================================================================= */
  :root{
    --ink:#141b22;
    --paper:#f5efe3;
    --panel:#faf6ec;
    --slot:#ffffff;
    --lock:#2f6b4f;          /* locked / correct = green */
    --lock-ink:#ffffff;
    --purch:#c98a3b;         /* purchased-letter amber */
    --purch-bg:#f0e2c7;
    --purch-ink:#6b4a12;
    --found:#3a5a8c;         /* found-letter blue */
    --found-bg:#dfe7f2;
    --found-ink:#26405f;
    --accent:#7b2d26;        /* oxblood accent */
    --hint-blue:#aebfe0;     /* free-hint fill (from mockup) */
    --hint-blue-ink:#22315a;
    --line:#cdbfa6;
    --coin:#2f6b4f;
    --coin-edge:#9a8e73;
    --dim:#8a7d66;
    --key:#e9e0cf;
    --key-edge:#c9bda2;
    --radius:6px;

    --slot-size:30px;
    --slot-gap:5px;
    --slot-count-max:10;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
  }

  /* ---- App shell: fixed header + keyboard, flex middle ------------------ */
  .app{
    position:fixed;inset:0;
    max-width:430px;margin:0 auto;
    display:flex;flex-direction:column;
    background:var(--paper);
    border-left:1px solid var(--line);border-right:1px solid var(--line);
  }

  header{
    flex:0 0 auto;
    padding:9px 16px;
    background:#2c3038;
    border-bottom:1px solid #1c2026;
    display:flex;align-items:center;gap:8px;
  }
  header h1{font-size:18px;font-weight:700;margin:0;font-style:italic;letter-spacing:-.01em;color:var(--paper);}
  header h1 .colon{color:var(--paper);}
  header .tag{font-size:13px;font-style:italic;color:var(--paper);opacity:.8;}
  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(--paper);
    display:flex;align-items:center;justify-content:center;
  }
  header .icon-btn svg{display:block;width:22px;height:22px;}
  header .icon-btn.info svg{width:20px;height:20px;}

  /* Middle column — everything above the keyboard. Does NOT scroll. */
  .stage{
    flex:1 1 auto;
    min-height:0;               /* allow children to shrink, not overflow */
    display:flex;flex-direction:column;
    padding:12px 18px 8px;
    gap:2px;
  }

  .clue-label,.section-label{
    font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);margin:0;
  }
  .clue-label{color:var(--accent);margin-bottom:2px;}
  .clue{
    font-size:19px;line-height:1.28;font-style:italic;font-weight:600;
    margin:0 0 18px;color:#2c3038;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;                 /* clue clamps so board never gets pushed off */
    min-height:calc(19px*1.28*2);    /* reserve 2 lines so layout doesn't jump */
  }

  /* ---- Attempts / coins ------------------------------------------------- */
  /* Coins live inside the board zone (decoupled from clue wrap) but stay
     left-aligned with spacing to the board similar to the piles' gap. */
  .coins{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 22px;}
  .coin{width:11px;height:11px;border-radius:50%;background:var(--coin);border:1px solid var(--coin);}
  .coin.spent{background:var(--paper);border:1px solid #2c3038;}

  /* ---- Board ------------------------------------------------------------ */
  /* Board zone grows and centers its content (coins + tiles), so slack
     becomes whitespace above AND below the tile cluster. Coins sit inside
     the zone so they never move with clue wrap. */
  .board-zone{
    flex:1.2 1 auto;min-height:0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .board{
    display:flex;justify-content:center;flex-wrap:nowrap;
    gap:var(--slot-gap);margin:0 -13px;
  }
  .cell{
    width:var(--slot-size);height:calc(var(--slot-size)*1.22);
    border:1.5px solid var(--ink);border-radius:var(--radius);
    background:var(--slot);
    display:flex;align-items:center;justify-content:center;
    font-size:19px;text-transform:uppercase;font-weight:600;color:var(--ink);
    user-select:none;
  }
  .cell.cursor{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,45,38,.18);}
  .cell.locked{background:var(--lock);color:var(--lock-ink);border-color:var(--lock);}

  /* ---- Purchased / Found piles (side by side) --------------------------- */
  /* Purchased is narrow (few letters, used fast); Found takes the rest of
     the row so it fits many tiles. One row reserved; tiles appear as found. */
  .piles{display:flex;gap:18px;margin:0 0 8px;align-items:flex-start;}
  .pile-col.purch-col{flex:0 0 auto;min-width:92px;}
  .pile-col.found-col{flex:1 1 0;min-width:0;}
  .pile{display:flex;gap:4px;margin-top:5px;min-height:28px;align-content:flex-start;flex-wrap:wrap;}
  /* Found: one row, no wrap, scrolls horizontally. Fade + scroll affordance
     appear only when tiles overflow one row (.overflowing, set at runtime
     once count exceeds the row +1). Until then it looks like a plain row. */
  .pile.found-pile{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pile.found-pile.overflowing{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .pile.found-pile::-webkit-scrollbar{display:none;}
  .pile.found-pile .tile{flex:0 0 auto;}
  .tile{
    width:20px;height:24px;display:flex;align-items:center;justify-content:center;
    border-radius:4px;font-size:12px;text-transform:uppercase;font-weight:600;
  }
  .tile.purch{background:var(--slot);border:1px solid var(--purch);color:#2c3038;}
  .tile.found{background:var(--slot);border:1px solid var(--lock);color:#2c3038;}
  .pile-empty{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--dim);font-style:italic;}

  /* ---- Hint row --------------------------------------------------------- */
  .hint-row{display:flex;gap:10px;margin:4px 0 8px;}
  /* Both hint buttons share one look. Active = Option 5 pale amber.
     Inactive (disabled) = flat greige, hairline, muted — obviously "off". */
  .hint-row button{
    flex:1;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:13px;letter-spacing:.02em;padding:11px 8px;border-radius:var(--radius);
    cursor:pointer;min-height:44px;
    background:var(--purch-bg);color:var(--accent);
    border:1.5px solid var(--accent);
  }
  .hint-row button:disabled{
    background:#f2ede2;color:#d8cdb8;
    border:1.5px solid #d8cdb8;cursor:not-allowed;
  }

  /* ---- Guesses (paginated grid) ----------------------------------------- */
  /* Guesses: fixed 2-row cap, clustered high with the dots. It no longer
     grows; the board zone above absorbs slack, and a spacer below drops
     any remainder toward the keyboard. */
  .guesses{
    flex:0 0 auto;
    display:flex;flex-direction:column;margin-top:2px;
  }
  .guesses-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
  .guesses-head .count{font-style:italic;font-size:14px;color:var(--accent);}
  .guesses-head .swipe-hint{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
    letter-spacing:.12em;color:var(--dim);text-transform:uppercase;
  }
  /* one page = 3 cols × 2 rows = 6, fixed. Rows sized to content. */
  .guess-page{
    display:grid;grid-template-columns:repeat(3,1fr);
    grid-auto-rows:min-content;gap:1px 10px;align-content:start;
  }
  .guess-chip{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:13px;letter-spacing:.06em;text-transform:lowercase;
    color:#2c3038;padding:0 2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .dots{display:flex;justify-content:center;gap:6px;padding:5px 0 2px;}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--line);}
  .dot.active{background:var(--accent);}
  /* absorbs remaining height between the guesses cluster and the keyboard */
  .stage-spacer{flex:1 1 auto;min-height:4px;}

  /* ---- Keyboard (pinned bottom, dark tray to separate from play area) --- */
  .keyboard{
    flex:0 0 auto;
    background:#2c3038;border-top:1px solid #1c2026;
    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:44px;max-width:34px;
    background:#e7e2d6;border:1px solid #cfc7b5;border-radius:5px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:15px;font-weight:600;color:#20242b;text-transform:uppercase;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .key:active{background:#cfc7b5;}
  .key.wide{flex:1.6 1 0;max-width:52px;font-size:12px;letter-spacing:.04em;}
  .key.enter{background:var(--lock);color:var(--lock-ink);border-color:#255a41;}
  .kb-spacer{flex:.5 1 0;max-width:17px;}

  /* ---- End card (overlay) ----------------------------------------------- */
  .endcard{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(86%,340px);padding:22px;border:1px solid var(--line);
    border-radius:10px;background:var(--panel);
    box-shadow:0 12px 40px rgba(20,27,34,.28);display:none;text-align:center;z-index:5;
  }
  .endcard.show{display:block;}
  .endcard h2{margin:0 0 8px;font-size:22px;}
  .endcard.win h2{color:var(--lock);}
  .endcard .answer{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:8px 0 12px;
  }
  .endcard .stats{font-size:14px;font-style:italic;margin:0 0 16px;}
  .endcard button{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
    border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
    padding:11px 20px;border-radius:var(--radius);cursor:pointer;
  }

  /* ---- Solved state: congrats block fills the freed piles+hints space --- */
  .solved-block{
    flex:0 0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:6px 0;gap:6px;
  }
  .solved-block h2{
    margin:0;font-size:24px;font-weight:700;color:var(--lock);letter-spacing:-.01em;
  }
  .solved-block .answer{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:22px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);
  }
  .solved-block .stats{font-size:15px;font-style:italic;color:var(--ink);margin:0;}

  /* (debug stub outlines removed) */

  /* ---- Modal overlay (Info / Gear boxes) -------------------------------- */
  .overlay{
    position:absolute;inset:0;z-index:10;
    background:rgba(20,27,34,.44);
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .overlay[hidden]{display:none;}
  .modal{
    width:min(90%,340px);background:var(--panel);
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 44px rgba(20,27,34,.32);
    padding:20px 20px 22px;position:relative;
  }
  .modal h2{
    margin:0 0 12px;font-size:19px;font-weight:700;color:var(--ink);
    padding-right:28px;
  }
  .modal p{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);}
  .modal .close{
    position:absolute;top:12px;right:12px;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-actions{display:flex;gap:10px;margin-top:16px;}
  .modal-actions button{
    flex:1;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    padding:11px 8px;border-radius:var(--radius);cursor:pointer;min-height:44px;
    border:2px solid var(--found);background:var(--found-bg);color:var(--found-ink);
  }

  /* ---- Splash / opening screen (overlay) -------------------------------- */
  #splash{
    position:fixed;inset:0;z-index:50;
    max-width:430px;margin:0 auto;
    background:var(--paper);
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    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;}