styles.css

/* ── the deck's own fonts, lifted from the Canva design ─────────────────
   Lazydog is the fat marker on the buttons, Bobby Jones Soft Condensed the
   hand-printed city/continent names and Providence Sans everything else —
   body copy, labels and the slogan. The alias-to-file mapping came out of
   Canva's own @font-face rules. All three are commercial faces served by
   Canva — fine for this prototype, check their licences before shipping. */
@font-face{font-family:'Bobby Jones Soft';src:url('assets/fonts/BobbyJonesSoft-Condensed.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Lazydog';src:url('assets/fonts/Lazydog.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Providence Sans';src:url('assets/fonts/ProvidenceSansPro.woff2') format('woff2');font-display:swap;}

:root{
  --bg:#bbc0c9;--panel:#ffffff;--navy:#3a5070;--navy2:#2a3a55;
  --bbg:#6a7d95;--bborder:#5a6d85;
  --cbg:#d8e0ea;--cborder:#b8c8d8;
  --or:#f5a820;--or2:#c07810;
  --gr:#5ab855;--gr2:#3a8030;
  --co:#e05040;--pk:#e040a0;
  --ye:#f5c200;--re:#d04545;
  --tx:#1a1a2a;--mu:#7a8090;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;}
body{
  font-family:'Nunito',sans-serif;
  background-color:#bbc0c9;
  background-size:60px 60px;
  color:var(--tx);
}
body::before{display:none;}

/* ── screens ── */
.scr{display:none;width:100%;height:100vh;z-index:1;position:relative;}
.scr.on{display:flex;}

/* ════════ LOADING ════════ */
@keyframes bounce{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.1);}
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* same floor as the title screen so boot → menu doesn't flash a different room */
#s-loading{background:#53535f url('assets/ui/bg-floor.png') center/cover no-repeat;}
.loading-card{background:#fff;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;border-radius:16px;padding:32px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}

/* ════════ TITLE (legacy — kept for shared classes) ════════ */
.t-em{width:84px;height:84px;background:#3a5070;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:46px;border:3px solid #1a1a2a;box-shadow:3px 4px 0 #1a1a2a;}
.t-nm{font-family:'Fredoka One',cursive;font-size:50px;color:#1a1a2a;}
.t-nm-fit{color:#f5c200;-webkit-text-stroke:2px #1a1a2a;text-shadow:none;}
.t-tg{font-size:12px;color:rgba(255,255,255,.75);font-weight:700;letter-spacing:1px;}
.btn-play{width:100%;padding:13px;border:3px solid #1a1a2a;cursor:pointer;background:#5a85d5;color:#fff;font-family:'Fredoka One',cursive;font-size:20px;letter-spacing:1px;border-radius:16px;box-shadow:0 5px 0 #2a4090;transition:all .12s;}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 7px 0 #2a4090;}
.btn-play:active{transform:translateY(2px);box-shadow:0 2px 0 #2a4090;}
.btn-cont{background:#5a85d5;color:#fff;border:3px solid #1a1a2a;box-shadow:0 5px 0 #2a4090;}
.btn-cont:hover{transform:translateY(-2px);box-shadow:0 7px 0 #2a4090!important;}
.btn-cont:active{transform:translateY(2px);box-shadow:0 2px 0 #2a4090!important;}

/* ════════ GAME ════════ */
#s-game{flex-direction:column;height:100vh;overflow:hidden;}
#g-topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;height:44px;flex-shrink:0;background:rgba(0,0,0,.12);border-bottom:2px solid rgba(0,0,0,.15);}
.gtb-left{display:flex;align-items:center;gap:6px;}
.gtb-center{display:flex;align-items:center;}
.gtb-right{display:flex;align-items:center;justify-content:flex-end;}
.gtb-round-pill{background:#5ab855;border:2px solid #1a1a2a;border-radius:50px;padding:3px 14px;color:#fff;font-family:'Fredoka One',cursive;font-size:13px;font-weight:normal;letter-spacing:.5px;}
.gtb-score-pill{background:#f57c35;border:2px solid #1a1a2a;border-radius:50px;padding:3px 12px;color:#fff;font-family:'Fredoka One',cursive;font-size:13px;font-weight:normal;box-shadow:0 3px 0 #c05010;}
.gtb-mod-pill{display:flex;align-items:center;gap:5px;background:var(--re);border:2px solid #1a1a2a;border-radius:50px;padding:3px 12px;color:#fff;font-family:'Fredoka One',cursive;font-size:12px;box-shadow:0 3px 0 #8a2c2c;cursor:help;}
.gtb-title{font-family:'Fredoka One',cursive;color:rgba(255,255,255,.7);font-size:14px;letter-spacing:3px;}
.gtb-cash{display:flex;align-items:center;gap:5px;background:#f5a820;border:2px solid #1a1a2a;border-radius:50px;padding:3px 12px 3px 6px;box-shadow:0 3px 0 #c07810;font-family:'Fredoka One',cursive;font-size:14px;color:#1a1a2a;}
.gtb-coin{width:20px;height:20px;background:#f8d040;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;border:1.5px solid #c07810;}
#g-main{flex:1;display:flex;flex-direction:row;align-items:stretch;padding:10px 12px;gap:10px;overflow:hidden;position:relative;}

/* LEFT */
.lc{display:flex;flex-direction:column;gap:6px;width:280px;flex-shrink:0;}
.tline{font-size:10px;color:rgba(255,255,255,.75);font-weight:700;font-style:italic;text-align:center;}
#s-game .tline{display:none;}
.card{background:#fff;border-radius:12px;padding:8px 13px;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;}
.card .lb{font-family:'Fredoka One',cursive;font-size:9px;color:#7a8090;letter-spacing:1px;text-transform:uppercase;}
.card .bv{font-family:'Fredoka One',cursive;font-size:29px;color:var(--tx);line-height:1.05;}
.card .bv.or{color:#e05040;}
.card .bv.co{color:var(--co);}
/* Live purrfect (board-fill) per-cell bonus — small gold notepad chip under the target */
.pf-rate{font-family:'Fredoka One',cursive;font-size:10px;color:#c07810;background:#fff4d8;border:1.5px solid #f0c060;border-radius:7px;padding:2px 7px;margin-top:4px;display:inline-block;letter-spacing:.3px;}
.earn-b{display:inline-flex;align-items:center;gap:6px;background:#f5a820;color:#1a1a2a;font-family:'Fredoka One',cursive;font-size:16px;border-radius:8px;padding:3px 10px;border:2px solid #1a1a2a;box-shadow:0 3px 0 #c07810;margin-top:3px;}
.pr{display:flex;gap:6px;margin-top:3px;}
.pl{flex:1;border-radius:8px;padding:4px 6px;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.22);}
.pl .pt{font-family:'Fredoka One',cursive;font-size:8px;letter-spacing:1px;}
.pl .pv{font-family:'Fredoka One',cursive;font-size:18px;line-height:1;}
.pl-or{background:#f5a820;color:#1a1a2a;}.pl-or .pt{color:rgba(26,26,42,.65);}
.pl-gr{background:#5ab855;color:#fff;}.pl-gr .pt{color:rgba(255,255,255,.75);}
.drow{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 3px 0 rgba(0,0,0,.14);}
.dlb{font-family:'Fredoka One',cursive;font-size:10px;color:#7a8090;}
.dpips{display:flex;gap:4px;}
.dp{width:10px;height:10px;border-radius:50%;background:var(--re);transition:opacity .2s;}
.dp.used{opacity:.2;}
.btn-disc{padding:4px 10px;border:2px solid #1a1a2a;cursor:pointer;background:#e05040;color:#fff;font-family:'Fredoka One',cursive;font-size:11px;border-radius:8px;box-shadow:0 3px 0 #902020;}
.btn-disc:disabled{opacity:.35;cursor:not-allowed;}
.pfbox{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:40px;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.2));}

/* CENTER */
.cc{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;}
.bwrap{flex:1;display:flex;align-items:center;justify-content:center;max-height:calc(100vh - 212px);}
.board{position:relative;display:grid;gap:4px;background:#6a7d95;padding:20px;border-radius:12px;border:3px solid #1a1a2a;box-shadow:4px 4px 0 #1a1a2a;}
/* Cat art: a single illustration spanning a whole shape (see js/catart.js). */
.cat-art-wrap,.cat-art-board{display:flex;align-items:center;justify-content:center;pointer-events:none;}
.cat-art-board{position:absolute;z-index:3;}
.cat-art-img{object-fit:fill;display:block;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.25));}
.cell{background:#d8e0ea;border-radius:6px;border:2px solid #b8c8d8;cursor:pointer;transition:background .07s,border-color .07s;display:flex;align-items:center;justify-content:center;font-size:22px;}
.cell.ok{background:#c0e8c0!important;border-color:#5ab855!important;}
.cell.bad{background:rgba(220,72,72,.2)!important;border-color:#d04545!important;}
.cell.filled{border-color:rgba(255,255,255,.2);}
.cell.filled:hover{filter:brightness(1.1);}
.cell.pop{animation:pop .32s ease;}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.14);filter:brightness(1.45)}}
@keyframes scoreFlash{0%,100%{transform:scale(1)}40%{transform:scale(1.08);filter:brightness(1.3);}}
.score-card-lit{animation:scoreFlash .4s ease;outline:3px solid #f5c200;outline-offset:2px;border-radius:12px;}
.bbtns{display:flex;gap:8px;align-items:center;}
/* ── Feature 2a: live projected score readout — DEV_MODE only ──
   Hidden for normal play (the player reads the board, not a number) and
   revealed by the dev toggle. Same CSS-only gate the Auto-fit pill uses:
   applyDevModeUI() puts .active on #btn-dev-float, so no extra JS hook is
   needed to keep this in sync with the toggle. */
.fit-proj{
  display:none;
  font-family:'Fredoka One',cursive;font-size:13px;color:#5a6472;
  background:rgba(255,255,255,.55);border:2px solid rgba(0,0,0,.15);
  border-radius:50px;padding:5px 12px;white-space:nowrap;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
body:has(#btn-dev-float.active) .fit-proj{display:block;}
.fit-proj.fit-proj-ready{color:#1a1a2a;background:#c0e8c0;border-color:#5ab855;}
.board-treats{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center;}
.bt-pill{display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.15);border-radius:8px;padding:2px 8px 2px 4px;font-size:10px;font-weight:800;color:#fff;border:1.5px solid rgba(0,0,0,.2);cursor:default;position:relative;}
.bt-pill.req-fail{border-color:#d04545;outline:2px solid #d04545;outline-offset:1px;}
.bt-pill-em{font-size:14px;}
.bt-pill-nm{font-size:9px;font-family:'Fredoka One',cursive;letter-spacing:.3px;}
.btn-reload-cfg{padding:7px 18px;border:2px solid rgba(58,80,112,.3);cursor:pointer;background:transparent;color:rgba(58,80,112,.6);font-family:'Fredoka One',cursive;font-size:13px;border-radius:50px;transition:all .15s;width:100%;margin-top:4px;}
.btn-reload-cfg:hover{border-color:rgba(58,80,112,.6);color:rgba(58,80,112,.9);}
.btn-dev-toggle{padding:5px 14px;border:1px solid rgba(255,255,255,.25);cursor:pointer;background:transparent;color:rgba(255,255,255,.4);font-family:'Fredoka One',cursive;font-size:11px;border-radius:50px;transition:all .15s;letter-spacing:.5px;}
.btn-dev-toggle:hover{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.7);}
.btn-dev-toggle.active{border-color:rgba(245,194,0,.6);color:rgba(245,194,0,.9);background:rgba(245,194,0,.08);}
.dev-panel{display:none;flex-direction:column;gap:6px;width:100%;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.15);margin-top:4px;}
.dev-panel.on{display:flex;}

/* ── the global floating dev pill: fixed to the viewport, above everything, so
   it rides along on every screen (loading, HQ, calendar, shop, game).
   Keep it position:fixed — the screens are 100vh blocks in normal flow, so a
   static pill scrolls straight out of an overflow:hidden body and vanishes.
   The title screen is the one exception; it has its own labelled toggle in the
   same corner (see body:has(#s-menu.on) further down). ── */
.btn-dev-float{
  position:fixed;bottom:12px;right:12px;z-index:10000;
  padding:5px 12px;border:1px solid rgba(255,255,255,.28);cursor:pointer;
  background:rgba(23,21,28,.55);color:rgba(255,255,255,.5);
  font-family:'Fredoka One',cursive;font-size:11px;border-radius:50px;
  transition:all .15s;letter-spacing:.5px;backdrop-filter:blur(4px);
}
.btn-dev-float:hover{border-color:rgba(255,255,255,.55);color:rgba(255,255,255,.8);}
.btn-dev-float.active{border-color:rgba(245,194,0,.65);color:rgba(245,194,0,.95);background:rgba(36,29,14,.65);}

/* floating Config Sheet shortcut — second slot of the bottom-right pill stack.
   Always available (it only opens the sheet in a new tab, it changes nothing),
   so config edits are one click away from HQ, schedule, shop and board alike. */
.btn-cfg-float{bottom:48px;}
.btn-cfg-float:hover{border-color:rgba(255,255,255,.55);color:rgba(255,255,255,.8);}

/* floating dev-mode Auto-fit button — third slot, game screen only,
   DEV_MODE only */
.btn-dev-autofit{
  display:none;bottom:84px;
  border-color:rgba(245,194,0,.5);color:rgba(245,194,0,.85);background:rgba(36,29,14,.65);
}
.btn-dev-autofit:hover{border-color:rgba(245,194,0,.75);color:rgba(245,194,0,1);}
.btn-dev-autofit.devfit-err{border-color:rgba(208,69,69,.7);color:#ffb0b0;background:rgba(58,22,22,.75);}
body:has(#s-game.on) #btn-dev-float.active ~ #btn-dev-autofit{display:inline-flex;align-items:center;gap:4px;}
.btn-menu-exit{padding:7px 14px;border:2px solid rgba(255,255,255,.3);cursor:pointer;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);font-family:'Fredoka One',cursive;font-size:12px;border-radius:50px;transition:all .12s;width:100%;margin-top:auto;}
.btn-menu-exit:hover{background:rgba(255,255,255,.2);color:#fff;}
.btn-clr{padding:8px 14px;border:3px solid #1a1a2a;cursor:pointer;background:#5ab855;color:#fff;font-family:'Fredoka One',cursive;font-size:13px;border-radius:14px;box-shadow:0 4px 0 #3a8030;transition:all .12s;}
.btn-clr:hover{transform:translateY(-2px);box-shadow:0 6px 0 #3a8030;}
.btn-clr:active{transform:translateY(2px);box-shadow:0 1px 0 #3a8030;}
.btn-fit{padding:11px 34px;border:3px solid #1a1a2a;cursor:pointer;background:#f5c200;color:#1a1a2a;font-family:'Fredoka One',cursive;font-size:23px;letter-spacing:2px;border-radius:18px;box-shadow:0 6px 0 #a08000;transition:all .12s;}
.btn-fit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 #a08000;}
.btn-fit:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #a08000;}
.btn-fit:disabled{opacity:.45;cursor:not-allowed;}
@keyframes pulse-glow{0%,100%{transform:scale(1);box-shadow:0 6px 0 #a08000}50%{transform:scale(1.02);box-shadow:0 8px 0 #a08000,0 0 12px rgba(245,194,0,.4)}}
.btn-fit:not(:disabled){animation:pulse-glow 2s ease-in-out infinite;}
.hand{display:flex;gap:20px;align-items:flex-end;width:100%;justify-content:center;}
.deck-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:2px;margin-bottom: 80px;}
.discard-inline{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);border-radius:20px;padding:3px 6px 3px 10px;}
.dinfo-s{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.2);border-radius:12px;padding:3px 10px;border:2px solid rgba(0,0,0,.25);}
.dlb2{font-family:'Fredoka One',cursive;font-size:9px;color:rgba(255,255,255,.75);letter-spacing:1px;text-transform:uppercase;}
.bv2{font-family:'Fredoka One',cursive;font-size:16px;color:#fff;margin-left:4px;}
.bv2.co{color:var(--co);}
.cslot{position:relative;width:150px;height:150px;background:#ffffff36;border-radius:10px;border:2.5px solid #1a1a2a;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:3px 3px 0 #1a1a2a;padding:5px;gap:2px;}
.cslot:hover{border-color:#f5c200;transform:translateY(-3px);}
.cslot.held{border-color:#f5c200;opacity:.45;transform:translateY(-3px);}
.cslot.held::after{content:"R to rotate";display:block;position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:8px;color:rgba(255,255,255,.7);white-space:nowrap;font-weight:800;}
.csn{font-size:8px;font-weight:800;color:#7a8090;text-align:center;line-height:1.1;}
.eslot{width:150px;height:150px;background:rgba(0,0,0,.12);border-radius:10px;border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;}
.eslot::after{content:"—";color:rgba(255,255,255,.3);font-size:12px;font-family:'Fredoka One',cursive;}

/* RIGHT */
.rc{display:flex;flex-direction:column;gap:6px;width:345px;flex-shrink:0;justify-content:center;}
.bpcard{background:#3a5070;border-radius:14px;border:3px solid #1a1a2a;box-shadow:4px 4px 0 #1a1a2a;overflow:hidden;}
.bphdr{background:#8090cc;margin:0;padding:7px 10px;text-align:center;font-family:'Fredoka One',cursive;font-size:13px;color:#fff;border-bottom:2.5px solid #1a1a2a;}
.bpgw{padding:5px;}
.bpg{display:grid;gap:3px;background:rgba(0,0,0,.2);padding:4px;border-radius:7px;}
.bpc{background:rgba(255,255,255,.1);border-radius:4px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .09s;display:flex;align-items:center;justify-content:center;font-size:16px;}
.bpc.ft{border-color:rgba(255,255,255,.25);}
.bpc.ok{background:rgba(90,184,85,.25)!important;border-color:#5ab855!important;}
.bpc.bad{background:rgba(208,69,69,.2)!important;border-color:#d04545!important;}
.bpc.sel-t{outline:2px solid #f5c200;outline-offset:1px;}
.bpcap{font-size:9px;color:rgba(255,255,255,.45);font-style:italic;text-align:center;padding:2px 6px 5px;}

/* treat tooltip */
.ttp{background:#fff;border-radius:12px;padding:9px 11px;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;display:none;}
.ttp.on{display:block;}
.ttn{font-family:'Fredoka One',cursive;font-size:14px;color:#e040a0;letter-spacing:.5px;}
.tte{font-size:10px;font-weight:800;color:#1a1a2a;margin-top:2px;line-height:1.5;}
.tte span{color:#e040a0;}
.ttae{font-size:9px;font-weight:800;color:#7a5ec7;margin-top:3px;line-height:1.4;display:none;}
.ttae span{color:#e040a0;}
.ttr{background:#d04545;color:#fff;border-radius:6px;padding:3px 7px;font-size:9px;font-weight:800;margin-top:4px;line-height:1.4;display:none;}
.ttf{font-size:9px;color:#7a8090;font-style:italic;margin-top:4px;text-align:center;}
.ttsell{margin-top:5px;display:flex;gap:6px;align-items:center;}
.btn-sell{padding:3px 10px;border:2px solid #1a1a2a;cursor:pointer;background:#c07810;color:#fff;font-family:'Fredoka One',cursive;font-size:10px;border-radius:8px;box-shadow:0 2px 0 #805008;}
.btn-place{padding:3px 10px;border:2px solid #1a1a2a;cursor:pointer;background:#5a85d5;color:#fff;font-family:'Fredoka One',cursive;font-size:10px;border-radius:8px;box-shadow:0 2px 0 #2a4090;}

.dinfo{background:#fff;border-radius:12px;padding:8px;text-align:center;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;}
.dinfo .lb{font-family:'Fredoka One',cursive;font-size:11px;color:#7a8090;}
.dinfo .bv{font-family:'Fredoka One',cursive;font-size:22px;color:#f5a820;}
.rinfo{background:#fff;border-radius:12px;padding:8px 12px;text-align:center;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;}
.rinfo .lb{font-family:'Fredoka One',cursive;font-size:8px;color:#7a8090;letter-spacing:1px;text-transform:uppercase;}
.rinfo .bv{font-family:'Fredoka One',cursive;font-size:26px;color:#e05040;line-height:1;}
.rinfo .sub{font-size:9px;color:#7a8090;}

/* ── Feature 2b: treat spot-rating (paw tooltip + affected-cell pulse) ── */
#paw-tip{
  position:fixed;display:none;z-index:9991;pointer-events:none;
  transform:translate(-50%,-100%);
  background:rgba(45,27,105,.94);color:#fff;border-radius:10px;
  padding:5px 11px;text-align:center;white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(45,27,105,.4);
}
.paw-tip-paws{font-size:14px;letter-spacing:2px;}
.paw-tip-paws.zero{font-size:10px;letter-spacing:0;color:rgba(255,255,255,.55);font-weight:800;}
.paw-tip-delta{font-family:'Nunito',sans-serif;font-size:9px;font-weight:800;color:#c8d0e8;margin-top:2px;}
@keyframes cell-affect-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,64,168,.5);}
  50%{box-shadow:0 0 0 5px rgba(224,64,168,0);}
}
.cell.treat-affect-preview{animation:cell-affect-pulse 1.1s ease-in-out infinite;}

/* ── TREAT PIECE SILHOUETTE (js/piece.js) ──
   A treat's cells bleed across the grid gap into each other so the piece reads
   as one tetromino instead of a cluster of tiles. Painted INSIDE the real cell,
   so the board's pop / glow / affect-pulse animations still carry it. */
.pc-skin{position:absolute;box-sizing:border-box;pointer-events:none;z-index:0;}
.pc-em{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  z-index:2;line-height:1;white-space:nowrap;}
.pc-box{position:relative;}
.pc-cell{position:absolute;}
/* a drop preview lands ON a piece sometimes — keep the red/green readable */
.cell.ok .pc-skin,.cell.bad .pc-skin,.bpc.ok .pc-skin,.bpc.bad .pc-skin,
.sp-bpc.ok .pc-skin,.sp-bpc.bad .pc-skin{opacity:.22;}

/* ── GHOST (follows cursor) ── */
#ghost{position:fixed;pointer-events:none;z-index:9999;display:none;transform:translate(-50%,-50%);transition:none;}
.gh-grid{display:grid;gap:3px;}
.gh-cell{border-radius:5px;border:2px solid rgba(255,255,255,.5);}

/* ── INSTRUCTION HUD ── */
#ihud{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:rgba(26,26,42,.88);color:#fff;border-radius:12px;
  padding:7px 16px;display:none;flex-direction:row;gap:12px;align-items:center;
  font-size:10px;font-weight:700;z-index:9998;
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
#ihud.on{display:flex;}
.ik{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:5px;padding:2px 7px;font-family:'Fredoka One',cursive;font-size:11px;}
.isep{color:rgba(255,255,255,.3);}

/* ── OVERLAYS ── */
.ov{position:fixed;inset:0;background:rgba(26,26,42,.78);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(5px);}
.ov.off{display:none;}
.ob{background:#fff;border-radius:18px;padding:32px 40px;text-align:center;max-width:390px;width:90%;border:3px solid #1a1a2a;box-shadow:5px 5px 0 #1a1a2a;animation:pIn .28s cubic-bezier(.175,.885,.32,1.275);}
@keyframes pIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.ob h1{font-family:'Fredoka One',cursive;font-size:34px;color:#1a1a2a;margin-bottom:4px;}
.ob .sub{color:#7a8090;margin-bottom:10px;font-size:12px;font-weight:700;}
.ob .big{font-family:'Fredoka One',cursive;font-size:52px;line-height:1;color:#1a1a2a;}
.ob .brk{font-size:10px;color:#7a8090;margin-top:7px;line-height:2.1;}

/* ── REMAINING DECK popup (DECK pill → openDeckPopup, and the branch preview) ──
   Same paperwork the schedule and the pet shop are made of: a periwinkle slab,
   a light sheet laid on it, a tab pinned across the slab's top edge and a
   sticker button to close. Sizing is px rather than the stages' cqw — this is a
   body-level layer with no stage container to measure itself against. */
.dk-pop{
  position:relative;width:min(92vw,560px);max-height:82vh;display:flex;flex-direction:column;
  background:#575f7e;border:3px solid #1b1a24;border-radius:18px;padding:20px 18px 18px;
  box-shadow:0 0 0 3px #fdfcff, 8px 10px 0 rgba(20,18,28,.45);
  animation:pIn .28s cubic-bezier(.175,.885,.32,1.275);
}
.dk-tab{
  position:absolute;left:18px;top:-15px;padding:2px 14px 4px;
  background:#5b608c;border:3px solid #1b1a24;border-radius:10px;
  box-shadow:0 0 0 3px #fdfcff;
  font-family:'Lazydog',cursive;font-size:19px;line-height:1.25;letter-spacing:.02em;
  color:#fdfcff;white-space:nowrap;
}
.dk-sheet{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  background:#e9e8f2;border:3px solid #1b1a24;border-radius:12px;padding:14px 14px 16px;
}
.dk-sub{
  font-family:'Bobby Jones Soft',cursive;font-size:13px;letter-spacing:.03em;
  color:#4b4757;text-transform:uppercase;
}
/* the cards scroll, the tab and CLOSE stay put */
.dk-grid{
  width:100%;flex:1;min-height:0;overflow-y:auto;margin-top:12px;padding-right:2px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;align-content:start;
}
.dk-empty{grid-column:1/-1;text-align:center;padding:14px;
  font-family:'Bobby Jones Soft',cursive;font-size:13px;color:#4b4757;}
/* one cat per card; its colour is the ink underline, set inline by deckPopTile */
.dk-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:#fcfafa;border:2px solid #1b1a24;border-bottom-width:4px;
  border-radius:9px;padding:7px 4px 5px;
}
.dk-card-lbl{font-family:'Bobby Jones Soft',cursive;font-size:9px;line-height:1.25;
  letter-spacing:.02em;color:#6a6678;text-align:center;}
.dk-card-lbl span{color:#1b1a24;}
/* the deck's sticker button, at popup scale — the shape WORK and SHIP wear */
.dk-close{
  margin-top:14px;padding:3px 26px 5px;cursor:pointer;
  background:#d2f886;border:3px solid #17151c;border-radius:12px;
  box-shadow:0 0 0 3px #fdfcff, 0 7px 0 #262229;
  font-family:'Lazydog',cursive;font-size:21px;line-height:1.3;color:#17151c;
  transition:transform .09s ease-out, box-shadow .09s ease-out;
}
.dk-close:hover {transform:translateY(-2px);box-shadow:0 0 0 3px #fdfcff, 0 9px 0 #262229;}
.dk-close:active{transform:translateY(5px);box-shadow:0 0 0 3px #fdfcff, 0 2px 0 #262229;}

/* ── INLINE WIN TRANSITION ──
   #win-inline is a child of #s-game, so without these it falls back to
   static/z-index:auto and the game's positioned layers paint straight over it —
   the round is won but the only way out (Visit Pet Store) is invisible and
   unclickable. Card styling deliberately mirrors .ob but skips its pIn
   animation, which would fight the scale-in transition below. */
.win-inline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;opacity:0;background:rgba(26,26,42,.78);backdrop-filter:blur(5px);transition:opacity .4s .35s ease-out;}
.win-inline.visible{opacity:1;pointer-events:auto;}
.win-inline-card{background:#fff;border-radius:18px;padding:32px 40px;text-align:center;max-width:390px;width:90%;border:3px solid #1a1a2a;box-shadow:5px 5px 0 #1a1a2a;transform:scale(.92);transition:transform .4s .35s ease-out;}
.win-inline.visible .win-inline-card{transform:scale(1);}
.win-inline-card h1{font-family:'Fredoka One',cursive;font-size:34px;color:#1a1a2a;margin-bottom:4px;}
.win-inline-card .sub{color:#7a8090;margin-bottom:10px;font-size:12px;font-weight:700;}
/* score sequence overlay */
#ov-score-seq{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden;}
#ov-score-seq.active{pointer-events:auto;}
.score-board-overlay{position:absolute;pointer-events:none;}
.score-cell-label{
  position:absolute;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:13px;color:#fff;
  background:rgba(0,0,0,.55);border-radius:6px;pointer-events:none;
  transition:all .3s ease;opacity:0;transform:scale(.6);
  border:2px solid rgba(255,255,255,.3);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.score-cell-label.show{opacity:1;transform:scale(1);}
.score-cell-label.boosted{background:rgba(245,194,0,.88);border-color:#fff;transform:scale(1.15);}
.score-treat-flash{
  position:absolute;border-radius:8px;pointer-events:none;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 0 16px 4px rgba(255,255,255,.5);
  opacity:0;transition:opacity .25s;
}
.score-treat-flash.on{opacity:1;}
/* ── Type A add: cyan per-cat pulse ── */
@keyframes cat-pulse-cyan{
  0%,100%{box-shadow:none;transform:scale(1);}
  40%{box-shadow:0 0 0 4px #38c0c0,0 0 18px 4px rgba(56,192,192,.65);transform:scale(1.16);}
}
/* ── Type A mul: gold per-cat pulse ── */
@keyframes cat-pulse-gold{
  0%,100%{box-shadow:none;transform:scale(1);}
  40%{box-shadow:0 0 0 4px #f5c200,0 0 18px 4px rgba(245,194,0,.65);transform:scale(1.16);}
}
.cat-pulse-add{animation:cat-pulse-cyan .6s ease-out forwards;}
.cat-pulse-mul{animation:cat-pulse-gold .6s ease-out forwards;}
/* ── Per-cat bonus badge ── */
.cat-bonus-badge{
  position:fixed;pointer-events:none;z-index:405;
  font-family:'Fredoka One',cursive;font-size:11px;font-weight:900;
  border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  opacity:0;transform:scale(.5);
  transition:opacity .15s,transform .15s;
}
.cat-bonus-badge.show{opacity:1;transform:scale(1);}
.cat-bonus-badge.add{background:#38c0c0;color:#fff;}
.cat-bonus-badge.mul{background:#f5c200;color:#1a1a2e;}
/* ── Type B add: floating score badge ── */
@keyframes score-badge-float{
  0%{opacity:0;transform:translate(-50%,-4px) scale(.7);}
  30%{opacity:1;transform:translate(-50%,-20px) scale(1.05);}
  65%{opacity:1;transform:translate(-50%,-24px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-40px) scale(.85);}
}
.score-float-badge{
  position:fixed;pointer-events:none;z-index:405;
  font-family:'Fredoka One',cursive;font-size:15px;
  background:#38c0c0;color:#fff;border-radius:20px;padding:3px 12px;
  white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.35);
  animation:score-badge-float .9s ease-out forwards;
}
/* ── Type B mul: score slam ── */
@keyframes score-slam-out{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.6);}
}
@keyframes score-slam-in{
  0%{opacity:0;transform:scale(1.5);color:#f5c200;filter:drop-shadow(0 0 14px #f5c200);}
  55%{opacity:1;transform:scale(.95);color:#f5c200;}
  100%{opacity:1;transform:scale(1);color:#fff;filter:none;}
}
.score-slam-out{animation:score-slam-out .22s ease-in forwards;}
.score-slam-in{animation:score-slam-in .38s ease-out forwards;}
.score-counter-wrap{position:fixed;top:32%;left:50%;transform:translateX(-50%);z-index:401;text-align:center;}
.seq-score-counter{
  font-family:'Fredoka One',cursive;font-size:64px;color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.4),0 0 30px rgba(255,255,255,.2);
  letter-spacing:2px;line-height:1;
}
.score-total-banner{
  position:fixed;bottom:20%;left:50%;transform:translateX(-50%) scale(.5);
  background:#f5c200;color:#1a1a2a;
  font-family:'Fredoka One',cursive;font-size:48px;
  border-radius:18px;padding:16px 40px;
  border:3px solid #1a1a2a;box-shadow:0 6px 0 #a08000,4px 4px 0 #1a1a2a;
  opacity:0;transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  white-space:nowrap;z-index:401;
}
.score-total-banner.show{opacity:1;transform:translateX(-50%) scale(1);}
.score-continue-btn{
  position:fixed;bottom:12%;left:50%;transform:translateX(-50%);
  padding:12px 32px;cursor:pointer;
  background:#5ab855;color:#fff;font-family:'Fredoka One',cursive;font-size:16px;
  border-radius:14px;border:3px solid #1a1a2a;box-shadow:0 4px 0 #3a8030;
  opacity:0;transition:opacity .3s;z-index:402;
}
.score-continue-btn.show{opacity:1;}
/* The running log of what each piece did. It occupies the band between the step
   controls and the bottom edge — runScoreSequence() sets `top` from the controls'
   measured bottom — and the lines sit at the FOOT of that band, so a long line
   wrapping to two rows eats space downwards-out rather than climbing over the
   buttons. Sized to be read from across the desk, not squinted at. */
.seq-log{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;z-index:401;
  max-width:640px;width:90%;pointer-events:none;overflow:hidden;
}
.seq-log-line{
  background:rgba(26,26,42,.9);color:#fff;border-radius:18px;
  padding:10px 28px;font-family:'Fredoka One',cursive;font-size:24px;
  opacity:0;transform:translateY(8px);transition:all .25s;text-align:center;
}
.seq-log-line.show{opacity:1;transform:translateY(0);}
/* Oldest lines fade up and out so the log stays a compact bottom-margin strip. */
.seq-log-line.seq-log-retire{opacity:0;transform:translateY(-6px);}
/* ── Step-through scan: the player advances the scoring one piece at a time ──
   runScoreSequence() re-anchors the explain chip, the control row and the log
   onto SHIP's vacated slot under the board; the values here are the fallback for
   a board it can't measure. */
.seq-step-explain{
  position:fixed;bottom:calc(12% + 64px);left:50%;transform:translateX(-50%);
  z-index:403;max-width:340px;width:90%;text-align:center;
  background:rgba(26,26,42,.9);color:#fff;border-radius:14px;padding:9px 18px;
  font-family:'Fredoka One',cursive;font-size:14px;
}
/* Next and Auto ride together in SHIP's vacated slot, so the row is what gets
   positioned and the buttons themselves lay out inside it. */
.seq-step-controls{
  position:fixed;left:50%;top:88%;transform:translate(-50%,-50%);
  z-index:404;display:flex;align-items:center;gap:12px;
}
/* Carries SHIP's lime: it is the button standing in SHIP's place mid-scan. */
.seq-step-btn{
  padding:11px 34px;cursor:pointer;white-space:nowrap;
  background:#d2f886;color:#1a1a2a;font-family:'Fredoka One',cursive;font-size:17px;
  border-radius:14px;border:3px solid #1a1a2a;box-shadow:0 5px 0 #7fa844;
  transition:transform .09s ease-out,box-shadow .09s ease-out;
}
.seq-step-btn:hover {transform:translateY(-2px);box-shadow:0 7px 0 #7fa844;}
.seq-step-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #7fa844;}
/* Auto sits beside Next in the overlay's slate, and lights up in the same gold
   the multiplier badges use while it is the one driving the scan. */
.seq-auto-btn{
  padding:11px 22px;cursor:pointer;white-space:nowrap;
  background:#3a4a68;color:#fff;font-family:'Fredoka One',cursive;font-size:17px;
  border-radius:14px;border:3px solid #1a1a2a;box-shadow:0 5px 0 #1a2436;
  transition:transform .09s ease-out,box-shadow .09s ease-out,background .12s,color .12s;
}
.seq-auto-btn:hover {transform:translateY(-2px);box-shadow:0 7px 0 #1a2436;}
.seq-auto-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #1a2436;}
.seq-auto-btn.on{background:#f5c200;color:#1a1a2a;box-shadow:0 5px 0 #a08000;}
.seq-auto-btn.on:hover {box-shadow:0 7px 0 #a08000;}
.seq-auto-btn.on:active{box-shadow:0 1px 0 #a08000;}
/* ── Feature 3: purrfect streak + near-miss callouts ── */
@keyframes streak-callout-in{
  0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-6deg);}
  60%{opacity:1;transform:translateX(-50%) scale(1.08) rotate(-3deg);}
  100%{opacity:1;transform:translateX(-50%) scale(1) rotate(-3deg);}
}
@keyframes streak-callout-shimmer{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.3);}
}
.streak-callout{
  position:fixed;top:20%;left:50%;transform:translateX(-50%) scale(.4) rotate(-6deg);
  font-family:'Fredoka One',cursive;font-size:30px;color:#fff;letter-spacing:1px;
  background:linear-gradient(135deg,#f5c200,#f57c35);
  border:3px solid #1a1a2a;border-radius:16px;padding:10px 26px;
  box-shadow:0 6px 0 #a05010,4px 4px 0 #1a1a2a;
  opacity:0;z-index:406;white-space:nowrap;pointer-events:none;
}
.streak-callout.show{animation:streak-callout-in .4s cubic-bezier(.175,.885,.32,1.275) forwards,streak-callout-shimmer .9s ease-in-out .4s infinite;}
.near-miss-callout{
  position:fixed;top:22%;left:50%;transform:translateX(-50%) scale(.5);
  font-family:'Fredoka One',cursive;font-size:19px;color:#fff;
  background:#3a4a68;border:3px solid #1a1a2a;border-radius:14px;padding:9px 22px;
  box-shadow:0 5px 0 #1a2436,4px 4px 0 #1a1a2a;
  opacity:0;z-index:406;white-space:nowrap;pointer-events:none;
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s ease;
}
.near-miss-callout.show{opacity:1;transform:translateX(-50%) scale(1);}
/* ── Treat loss ceremony toasts (js/treat-loss.js) ──
   Same marker-on-card language as the streak/near-miss callouts above:
   Fredoka One, thick ink border, hard offset shadow, slight sticker tilt.
   Container never blocks input; each toast re-enables clicks for itself. */
#treat-loss-toasts{
  position:fixed;top:14px;right:14px;z-index:9600;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  pointer-events:none;
}
.treat-loss-toast{
  display:flex;align-items:center;gap:10px;max-width:300px;
  background:#3a4a68;color:#fff;
  font-family:'Fredoka One',cursive;font-size:13px;letter-spacing:.3px;line-height:1.3;
  border:3px solid #1a1a2a;border-radius:14px;padding:9px 15px 9px 11px;
  box-shadow:0 5px 0 #1a2436,4px 4px 0 #1a1a2a;
  opacity:0;transform:translateX(30px) rotate(2deg) scale(.85);
  transition:transform .32s cubic-bezier(.175,.885,.32,1.275),opacity .28s ease;
  pointer-events:auto;cursor:pointer;
}
.treat-loss-toast.show{opacity:1;transform:translateX(0) rotate(-1.2deg) scale(1);}
.treat-loss-toast:nth-child(even).show{transform:translateX(0) rotate(.8deg) scale(1);}
#treat-loss-toasts .treat-loss-toast.tl-hide{opacity:0;transform:translateX(30px) scale(.85);}
.treat-loss-toast.tl-destroyed{background:#a8443c;box-shadow:0 5px 0 #571d18,4px 4px 0 #1a1a2a;}
.treat-loss-toast.tl-no-room{background:#b5892f;box-shadow:0 5px 0 #63480f,4px 4px 0 #1a1a2a;}
.treat-loss-toast .tl-icon{font-size:22px;line-height:1;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.28));}
.treat-loss-toast .tl-text{flex:1;}

/* ── PURRFECT FIT celebration ── */
.purrfect-fit-overlay{position:fixed;inset:0;z-index:500;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.purrfect-fit-text{
  font-family:'Fredoka One',cursive;font-size:clamp(36px,10vw,64px);
  color:#fff;text-align:center;
  text-shadow:0 0 20px rgba(245,194,0,.9),0 0 60px rgba(245,120,40,.6),0 4px 0 #c07810,0 6px 0 rgba(0,0,0,.3);
  letter-spacing:3px;
  opacity:0;transform:scale(.3) translateY(40px);
  animation:purrfect-pop .6s cubic-bezier(.175,.885,.32,1.275) forwards,purrfect-float 1.8s ease-out .5s forwards,purrfect-shimmer 1.2s ease-in-out .2s infinite;
}
@keyframes purrfect-pop{to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes purrfect-float{to{opacity:0;transform:scale(1.1) translateY(-60px);}}
@keyframes purrfect-shimmer{
  0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(245,194,0,.5));}
  50%{filter:brightness(1.3) drop-shadow(0 0 20px rgba(245,194,0,.9));}
}
.cell.board-full-glow{
  animation:cell-glow .5s ease-out forwards;
}
@keyframes cell-glow{
  0%{box-shadow:inset 0 0 0 0 rgba(245,194,0,0);}
  50%{box-shadow:inset 0 0 14px 4px rgba(245,194,0,.6),0 0 12px 2px rgba(245,194,0,.4);}
  100%{box-shadow:inset 0 0 6px 1px rgba(245,194,0,.15),0 0 4px 1px rgba(245,194,0,.1);}
}
.purrfect-sparkle{
  position:fixed;pointer-events:none;z-index:501;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#f5c200 60%,transparent 100%);
  opacity:0;animation:sparkle-fly 1s ease-out forwards;
}
@keyframes sparkle-fly{
  0%{opacity:1;transform:scale(0);}
  30%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(0) translateY(-80px);}
}
.ost{display:flex;justify-content:center;gap:20px;margin-bottom:14px;}
.os .v{font-family:'Fredoka One',cursive;font-size:24px;color:var(--tx);}
.os .l{font-size:9px;color:var(--mu);text-transform:uppercase;font-weight:800;}
.bok{margin-top:12px;display:inline-block;padding:10px 28px;cursor:pointer;background:#5a85d5;color:#fff;font-family:'Fredoka One',cursive;font-size:15px;border-radius:14px;border:3px solid #1a1a2a;box-shadow:0 4px 0 #2a4090;transition:all .12s;}
.bok:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2a4090;}
.bok:active{transform:translateY(2px);box-shadow:0 1px 0 #2a4090;}
.bok.re{background:#d04545;color:#fff;box-shadow:0 4px 0 #902020;border-color:#1a1a2a;}
.bok.or{background:#f5a820;color:#1a1a2a;box-shadow:0 4px 0 #c07810;border-color:#1a1a2a;}

/* ════ ROUNDS SCREEN ════ */
#s-rounds{flex-direction:column;align-items:stretch;position:relative;overflow:hidden;background:#6a7d95;}
.sp-body{display:flex;flex-direction:row;flex:1;overflow:hidden;justify-content:center;gap:20px;padding:0 24px 24px;}
.rds-bg{position:absolute;inset:0;background:linear-gradient(135deg,#6a7d95 0%,#bbc0c9 50%,#5a6d80 100%);}
.rds-bg::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.012) 40px,rgba(255,255,255,.012) 41px);}
.rds-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:860px;padding:32px 24px;}
.rds-topbar{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;}
.rds-title{font-family:'Fredoka One',cursive;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:4px;text-transform:uppercase;}
.rds-btn-exit{padding:7px 16px;border:2.5px solid rgba(255,255,255,.4);cursor:pointer;background:rgba(255,255,255,.15);color:#fff;font-family:'Fredoka One',cursive;font-size:12px;border-radius:50px;transition:all .12s;letter-spacing:.5px;}
.rds-btn-exit:hover{background:rgba(255,255,255,.25);color:#fff;transform:translateY(-1px);}
.rds-cash-badge{display:flex;align-items:center;gap:8px;background:#f5a820;color:#1a1a2a;
  border-radius:12px;padding:7px 18px;font-family:'Fredoka One',cursive;font-size:20px;
  border:2.5px solid #1a1a2a;box-shadow:0 4px 0 #c07810;}
.rds-coin{font-size:20px;}
.rds-rounds-track{display:flex;align-items:center;gap:0;width:100%;justify-content:center;}
.rds-round-item{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;}
.rds-connector{width:32px;height:3px;background:rgba(255,255,255,.2);flex-shrink:0;margin-top:-20px;}
.rds-connector.done{background:#5ab855;}
.rr-bubble{
  width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border:3px solid rgba(255,255,255,.2);
  font-family:'Fredoka One',cursive;transition:all .2s;
}
.rr-bubble.past{background:rgba(255,255,255,.15);border-color:#5ab855;opacity:.7;}
.rr-bubble.current{
  width:88px;height:88px;background:#f5c200;border-color:#1a1a2a;border-width:3px;
  box-shadow:0 0 0 5px rgba(245,194,0,.3),3px 3px 0 #1a1a2a;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(245,194,0,.3),3px 3px 0 #1a1a2a}50%{box-shadow:0 0 0 10px rgba(245,194,0,.15),3px 3px 0 #1a1a2a}}
.rr-bubble.future{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);opacity:.55;}
.rr-num{font-family:'Fredoka One',cursive;font-size:22px;color:#1a1a2a;line-height:1;}
.rr-cat{font-size:18px;line-height:1;}
.rr-lbl{font-size:9px;font-weight:800;color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase;}
.rr-tgt{font-size:9px;color:rgba(255,255,255,.5);margin-top:2px;}
.rr-lbl.current-lbl{color:#f5c200;font-size:11px;}
.rds-actions{display:flex;gap:16px;align-items:center;}
.rds-pip-row{display:flex;gap:8px;align-items:center;justify-content:center;}
.rds-pip{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .2s;cursor:default;}
.rds-pip.done{background:#5ab855;}
.rds-pip.cur{width:20px;height:20px;background:#f5c200;box-shadow:0 0 0 4px rgba(245,194,0,.3);}
.rds-round-card{background:#fff;border-radius:20px;padding:32px 48px;text-align:center;border:3px solid #1a1a2a;box-shadow:5px 5px 0 #1a1a2a;}
.rds-rc-label{font-family:'Fredoka One',cursive;font-size:11px;color:#7a8090;letter-spacing:4px;text-transform:uppercase;margin-bottom:2px;}
.rds-rc-num{font-family:'Fredoka One',cursive;font-size:72px;line-height:1;color:#1a1a2a;text-shadow:3px 3px 0 rgba(0,0,0,.1);}
.rds-rc-stats{display:flex;align-items:center;justify-content:center;gap:0;margin-top:16px;}
.rds-rc-stat{padding:0 20px;text-align:center;}
.rds-rc-div{width:1px;height:32px;background:rgba(0,0,0,.12);}
.rds-rc-sv{font-family:'Fredoka One',cursive;font-size:22px;color:#f5a820;}
.rds-rc-sl{font-size:10px;color:#7a8090;text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
/* Live purrfect (board-fill) per-cell bonus chip under the round stats */
.rds-purrfect{font-family:'Fredoka One',cursive;font-size:12px;color:#c07810;background:#fff4d8;border:2px solid #f0c060;border-radius:10px;padding:4px 12px;margin-top:14px;display:inline-block;letter-spacing:.4px;}
.rds-mod-card{display:flex;align-items:center;gap:10px;background:#2d1b69;border-radius:16px;padding:10px 16px;border:2.5px solid #1a1a2a;box-shadow:3px 3px 0 #1a1a2a;max-width:280px;}
.rds-mod-em{font-size:28px;line-height:1;flex-shrink:0;}
.rds-mod-body{display:flex;flex-direction:column;gap:2px;text-align:left;}
.rds-mod-name{font-family:'Fredoka One',cursive;font-size:13px;color:#fff;letter-spacing:.5px;}
.rds-mod-desc{font-size:10px;color:rgba(255,255,255,.75);font-style:italic;line-height:1.3;}
.rds-shop-col{display:flex;flex-direction:column;align-items:center;gap:6px;}
.rds-btn-shop{
  padding:12px 26px;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;
  font-family:'Fredoka One',cursive;font-size:15px;border-radius:14px;
  border:2.5px solid rgba(255,255,255,.5);transition:all .12s;letter-spacing:.5px;
}
.rds-btn-shop:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);}
.rds-btn-play{
  padding:14px 36px;border:3px solid #1a1a2a;cursor:pointer;
  background:#5ab855;color:#fff;
  font-family:'Fredoka One',cursive;font-size:20px;border-radius:16px;
  box-shadow:0 5px 0 #3a8030;
  transition:all .12s;letter-spacing:1px;
}
.rds-btn-play:hover{transform:translateY(-2px);box-shadow:0 7px 0 #3a8030;}
.rds-btn-play:active{transform:translateY(2px);box-shadow:0 2px 0 #3a8030;}
.rds-hint{font-size:11px;color:rgba(255,255,255,.5);font-style:italic;text-align:center;}
.shop-warn-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#f5a820;color:#1a1a2a;border-radius:12px;padding:7px 16px;
  font-family:'Fredoka One',cursive;font-size:13px;letter-spacing:.5px;
  border:2px solid #1a1a2a;box-shadow:0 3px 0 #c07810;
  opacity:0;transition:opacity .2s,transform .2s;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
}
.shop-warn-tip.show{opacity:1;transform:translateX(-50%) translateY(0);}
.rr-info-block{display:flex;flex-direction:row;align-items:stretch;gap:10px;margin-top:12px;}
.rr-stat{display:flex;flex-direction:column;align-items:center;gap:3px;}
.rr-info-tgt{
  font-family:'Fredoka One',cursive;font-size:22px;color:#1a1a2a;
  background:rgba(255,255,255,.88);border-radius:12px;padding:8px 20px;
  border:2px solid rgba(0,0,0,.2);letter-spacing:.5px;line-height:1.1;
}
.rr-info-tgt-lbl{font-size:8px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.6);text-transform:uppercase;}
.rr-info-earn{
  font-family:'Fredoka One',cursive;font-size:22px;color:#1a1a2a;
  background:#f5c200;border-radius:12px;padding:8px 20px;
  border:2px solid #1a1a2a;box-shadow:0 3px 0 #a08000;line-height:1.1;
}
.rr-info-earn-lbl{font-size:8px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.5);text-transform:uppercase;}
.rr-stat-row{display:flex;gap:10px;align-items:stretch;}

/* left panel */
.sp-left{
  flex:0 0 auto;width:280px;display:flex;flex-direction:column;
  align-items:center;gap:14px;padding:10px 0;
}

/* ════════ PET SHOP / round prep (deck page 6) ════════
   Same furniture as the board screen — branch tab, day tag, paw, navy plate —
   with the inventory in the middle and the treat shelf down the right. The
   treat cards, backpack grid and sell list are still rendered by js/shop.js
   into #treats-row, #shop-bpg and #shop-bp-list. */
#s-rounds{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;overflow:hidden;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;
}
#s-rounds::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
}
.ps-stage>*{position:absolute;}
.ps-hidden{display:none;}

.ps-branch{left:4.1%;top:-1.4%;width:11.5%;height:5.6%;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:.4cqw;background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:0 0 1cqw 1cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.8cqw;color:#8f6d59;}
.ps-day{left:14.9%;top:-2.2%;width:6.4%;height:9.6%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:.5cqw;gap:.1cqw;
  background:#f6e379;border:0.17cqw solid #1b1a24;border-radius:0 0 1cqw 1cqw;
  font-family:'Bobby Jones Soft',cursive;color:#1b1a24;line-height:1;}
.ps-day-d{font-size:1.05cqw;}
.ps-day-n{font-family:'Lazydog',cursive;font-size:2.2cqw;}
.ps-day-n small{font-family:'Bobby Jones Soft',cursive;font-size:1.05cqw;}
.ps-cash{right:3.5%;top:3.2%;height:5.2%;display:flex;align-items:center;gap:.4cqw;padding:0 1.4cqw 0 .35cqw;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:99px;
  font-family:'Lazydog',cursive;font-size:1.9cqw;color:#1b1a24;}
.ps-cash img{height:150%;margin-left:-1.1cqw;}

.ps-paw{left:2.4%;top:11.2%;width:4.1%;height:6.7%;padding:0;cursor:inherit;
  background:#f6e379;border:0.17cqw solid #17151c;border-radius:.9cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .6cqw 0 #262229;overflow:hidden;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.ps-paw:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .8cqw 0 #262229;}
.ps-paw:active{transform:translateY(0.4cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.ps-paw img{position:absolute;left:50%;top:48%;width:52%;transform:translate(-50%,-50%) rotate(-31.8deg);}
.ps-plate{left:4.4%;top:13.5%;width:18.5%;height:22.5%;background:#404461;
  border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.ps-plate-card{left:6.9%;top:12.0%;width:21.3%;height:13.7%;background:#fcfafa;
  border:0.17cqw solid #1b1a24;border-radius:1.2cqw;box-shadow:0 0 0 0.17cqw #fdfcff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bobby Jones Soft',cursive;font-size:3.4cqw;color:#1b1a24;}
.ps-plate-flav{left:6.2%;top:31.0%;width:15.5%;line-height:1.15;
  font-family:'Providence Sans',cursive;font-size:1.1cqw;color:rgba(255,255,255,.62);}

.ps-invtab{left:34.2%;top:12.45%;width:14.35%;height:5.37%;display:flex;align-items:center;justify-content:center;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:.9cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.5cqw;color:#1b1a24;letter-spacing:.03em;}
.ps-inv{left:32.9%;top:13.43%;width:30.29%;height:63.49%;background:rgba(26,22,46,.15);
  border:0.17cqw solid rgba(255,255,255,.20);border-radius:1.4cqw;}
.ps-invcard{position:absolute;left:4.3%;top:6.5%;width:92.1%;height:70%;
  background:#d1d0d8;border:0.17cqw solid rgba(255,255,255,.55);border-radius:1cqw;
  display:flex;align-items:center;justify-content:center;padding:.55cqw;}
/* ── INVENTORY GRID — shared by the pet shop and the game scene ────────────
   The two screens show the SAME bag, so they must render identically. Cell
   size comes from bpFitCellSize() (js/backpack.js), measured off the card, so
   the grid fills its card on both screens; everything below is chrome and is
   deliberately written once for both. Keep them together — the game scene used
   to carry its own copy of these rules and quietly drifted (hairline 1px
   borders, white rims on filled cells, washed-out drop previews). */
.ps-stage .sp-bpg,.gm-stage .bpg{width:100%;height:100%;display:grid!important;gap:.6cqw;
  background:transparent;padding:0;border-radius:0;place-content:center;}
.ps-stage .sp-bpc,.gm-stage .bpc{min-width:0;min-height:0;cursor:inherit;
  display:flex;align-items:center;justify-content:center;font-size:1.6cqw;line-height:1;
  background:rgba(255,255,255,.62);border:0.12cqw solid rgba(255,255,255,.85);border-radius:.5cqw;
  transition:background .08s, border-color .08s;}
.ps-stage .sp-bpc.ft,.gm-stage .bpc.ft{border-color:rgba(20,18,28,.28);}
/* placement preview while a treat is in hand — !important because the renderer
   writes an inline background on filled cells. */
.ps-stage .sp-bpc.ok ,.gm-stage .bpc.ok {background:rgba(122,196,96,.92)!important;border-color:#4f8f3f!important;}
.ps-stage .sp-bpc.bad,.gm-stage .bpc.bad{background:rgba(216,104,100,.92)!important;border-color:#a8443f!important;}
.ps-stage .sp-bpc.sel-t,.gm-stage .bpc.sel-t{outline:0.28cqw solid #f5c200;outline-offset:0.12cqw;}
.ps-deck{left:50.2%;top:10.4%;display:flex;align-items:flex-end;gap:.2cqw;}
.ps-deck img{height:3.4cqw;}
.ps-deck-col{display:flex;flex-direction:column;align-items:center;margin-left:-1.2cqw;}
.ps-deck-lbl{font-family:'Bobby Jones Soft',cursive;font-size:1.05cqw;color:#f0eef4;}
.ps-deck-n{padding:.1cqw 1.1cqw;background:#eeb84b;border:0.17cqw solid #1b1a24;
  border-radius:.7cqw;font-family:'Lazydog',cursive;font-size:1.9cqw;color:#1b1a24;}
.ps-sell{left:39.5%;top:66.8%;width:17%;height:5.6%;cursor:inherit;
  display:flex;align-items:center;justify-content:center;
  background:#e3695e;border:0.17cqw solid #17151c;border-radius:.9cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .7cqw 0 #262229;
  font-family:'Lazydog',cursive;font-size:1.9cqw;color:#1b1a24;
  transition:transform .09s ease-out, box-shadow .09s ease-out, background .12s;}
/* lights up while a treat is in hand, so the drop target is obvious */
.ps-sell #ps-sell-lbl{display:flex;align-items:center;gap:.3cqw;}
.ps-sell img{height:2.6cqw;margin:-.6cqw 0;}
.ps-sell.armed{background:#d2f886;transform:translateY(-0.25cqw);
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .95cqw 0 #262229;}
/* hovering the plate with a treat in hand: the drop is live, say so loudly */
.ps-sell.armed.over{background:#b6f24e;transform:translateY(-0.55cqw) scale(1.05);
  box-shadow:0 0 0 0.3cqw #fdfcff, 0 1.25cqw 0 #262229;}
.ps-sell.armed.over::after{content:'DROP TO SELL';position:absolute;left:0;right:0;bottom:-2.4cqw;
  text-align:center;font-family:'Bobby Jones Soft',cursive;font-size:1.15cqw;color:#d2f886;}

.ps-shelf-lbl{left:69%;top:10.5%;width:24%;text-align:center;
  font-family:'Bobby Jones Soft',cursive;font-size:1.5cqw;color:#f0eef4;}
.ps-shelf{left:69%;top:17%;width:22%;height:64%;display:flex;flex-direction:column;gap:3.6cqw;}
.ps-bplist{display:none;}

.ps-work{left:6.6%;top:83.0%;width:10.4%;height:7.6%;cursor:inherit;padding:0;
  background:#d2f886;border:0.17cqw solid #17151c;border-radius:1cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .9cqw 0 #262229;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.ps-work:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 1.1cqw 0 #262229;}
.ps-work:active{transform:translateY(0.7cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.ps-work span{font-family:'Lazydog',cursive;font-size:2.7cqw;color:#17151c;
  -webkit-text-stroke:.1em #fdfcff;paint-order:stroke fill;
  filter:drop-shadow(.05em .09em 0 rgba(20,18,28,.35));display:inline-block;}
.ps-restock{left:78.2%;top:91.7%;height:4.3%;padding:0 .8cqw;cursor:inherit;
  display:flex;align-items:center;gap:.4cqw;
  background:#e3695e;border:0.17cqw solid #17151c;border-radius:.8cqw;box-shadow:0 .5cqw 0 #262229;
  font-family:'Bobby Jones Soft',cursive;font-size:1.4cqw;color:#1b1a24;}
.ps-restock span{font-family:'Lazydog',cursive;font-size:1.8cqw;}
.ps-restock img{height:2.4cqw;}
.ps-restock:active{transform:translateY(.35cqw);box-shadow:0 .15cqw 0 #262229;}

/* treat cards on the shelf — js/shop.js renders .tc cards into .ps-shelf */
.ps-stage .tc{position:relative;width:100%;flex:1 1 0;min-height:0;background:#fcfafa;
  border:0.17cqw solid #1b1a24;border-radius:1.1cqw;box-shadow:0 0 0 0.17cqw #fdfcff;
  display:flex;align-items:center;justify-content:center;cursor:inherit;padding:1cqw;gap:.4cqw;
  transition:transform .1s ease-out;}
.ps-stage .tc:hover{transform:translateY(-0.3cqw);}
.ps-stage .tc-em{display:none;}
.ps-stage .tc-info{position:static;display:contents;}
.ps-stage .tc-nm{position:absolute;left:.8cqw;top:-1.1cqw;background:#5b608c;
  border:0.17cqw solid #1b1a24;border-radius:.6cqw;padding:.1cqw .6cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.15cqw;color:#fdfcff;white-space:nowrap;z-index:2;}
/* the deck's card shows only the shape, a name tab and a cost tag */
.ps-stage .tc-info>*{display:none;}
.ps-stage .tc-info>.tc-nm{display:block;}
/* The shape art is one silhouette painted by js/piece.js (paintShapePreview).
   It keeps this block's old cqw sizing — the constants moved into shop.js
   (SHOP_SHAPE_CELL / SHOP_SHAPE_GAP) because the painter positions each cell
   itself; what went away is the grid of separate tiles it used to draw. */
.ps-stage .tc-shape{display:flex;align-items:center;justify-content:center;}
.ps-stage .tc-price{position:absolute;right:-2.4cqw;top:1.2cqw;min-width:4.4cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#d2f886;border:0.17cqw solid #1b1a24;border-radius:.8cqw;padding:.25cqw .5cqw;
  box-shadow:0 .45cqw 0 #262229;
  font-family:'Lazydog',cursive;font-size:2cqw;color:#1b1a24;z-index:2;line-height:1;}
.ps-stage .tc-price::after{content:'COST';font-family:'Bobby Jones Soft',cursive;font-size:.95cqw;margin-top:.1cqw;}
.ps-stage .tc-price.sold{background:#e3695e;}

/* the shelf card's fine print — js/shop.js hangs this strip off the bottom edge
   whenever the sheet gives a treat a Requirement or an Additional Effect. It is
   the hover card's chip language shrunk to the shelf: amber + ⚠ for the gate
   the fit has to clear (LAST HAND only, PURRFECT FIT!), pale grey for the
   mechanic footnote (TRIGGERS after 3 use, 1 in 2 chance REAPPEAR).

   Deliberately ONE nowrap row. There is no room inside the card — a 3-cell
   shape already fills it top to bottom — so the strip lives in the shelf's
   3.6cqw gap, and a second row would reach the next card's name tab. Space is
   rationed the way the words matter: the REQUIREMENT never gives up a pixel
   (flex-shrink:0, capped at the strip width so it ellipses instead of
   overflowing), and the footnote shrinks — to nothing if it has to — out of
   the way. Both read in full in the hover card either way. A treat with
   neither field gets no element at all, so its card is untouched. */
.ps-stage .tc-tags{
  position:absolute;left:.7cqw;right:.7cqw;bottom:-1.05cqw;z-index:2;
  display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;
  gap:.35cqw;overflow:hidden;pointer-events:none;}
.ps-stage .tc-tag{
  min-width:0;padding:.05cqw .5cqw .2cqw;
  background:#eeb84b;border:0.17cqw solid #1b1a24;border-radius:.6cqw;
  box-shadow:0 .3cqw 0 #262229;
  font-family:'Bobby Jones Soft',cursive;font-size:.9cqw;line-height:1.35;
  letter-spacing:.02em;text-transform:uppercase;color:#1b1a24;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-stage .tc-tag.req{flex:0 0 auto;max-width:100%;}
.ps-stage .tc-tag.req::before{content:'⚠ ';}
.ps-stage .tc-tag.note{flex:0 1 auto;background:#efedf3;color:#57525f;
  border-color:rgba(27,26,36,.6);text-transform:none;}
.ps-stage .tc-tag .tl-mul{color:#8f3c02;}
.ps-stage .tc-tag .tl-add{color:#1e357a;}

/* ── hover card (#board-tip) ────────────────────────────────────────────
   The deck's own card language shrunk to something that follows the cursor:
   a periwinkle name tab tucked behind a white effect pill, with the yellow
   modifier tags (the same chip the calendar stamps a deadline with) hung off
   the bottom-right for the requirement and any additional effect.

   Operators carry the meaning, so the card reads before the words do:
   ORANGE multiplies, BLUE adds. Everything scales off --tls; .tip-lg is the
   shop shelf's larger read, since that stage is sized in cqw and sits far
   from the cursor. One builder in js/render.js fills all of it — board,
   backpack, shop backpack and shop shelf. */
#board-tip{
  --tls:1;
  position:fixed;display:none;z-index:9990;pointer-events:none;
  color:#1b1a24;font-family:'Providence Sans','Nunito',sans-serif;
  padding:0 calc(16px * var(--tls)) calc(8px * var(--tls)) 0;
  filter:drop-shadow(0 5px 12px rgba(26,26,42,.3));
}
#board-tip.tip-lg{--tls:1.32;}

/* name tab — sits behind the pill, its bottom edge covered by it */
.tl-nm{
  position:relative;z-index:1;display:inline-block;
  margin:0 0 calc(-7px * var(--tls)) calc(13px * var(--tls));
  padding:calc(3px * var(--tls)) calc(11px * var(--tls)) calc(9px * var(--tls));
  background:#7779a6;border:calc(2.5px * var(--tls)) solid #1b1a24;
  border-radius:calc(9px * var(--tls)) calc(9px * var(--tls)) 0 0;
  font-family:'Bobby Jones Soft',cursive;font-size:calc(14px * var(--tls));
  line-height:1.1;letter-spacing:.03em;color:#fdfcff;white-space:nowrap;
}
.tl-nm.cat{background:#5a85d5;}

/* the effect pill */
.tl-body{
  position:relative;z-index:2;
  max-width:calc(272px * var(--tls));
  padding:calc(9px * var(--tls)) calc(14px * var(--tls));
  background:#fdfcff;border:calc(2.5px * var(--tls)) solid #1b1a24;
  border-radius:calc(13px * var(--tls));box-shadow:0 calc(4px * var(--tls)) 0 #1b1a24;
}
/* leave a gutter for the chips to sit in, so they overlap the pill rather
   than dangle off the bottom of it */
.tl-body.has-tags{padding-bottom:calc(18px * var(--tls));}
.tl-ef{font-family:'Lazydog',cursive;font-size:calc(16px * var(--tls));line-height:1.3;}
.tl-sub{
  font-family:'Bobby Jones Soft',cursive;font-size:calc(11px * var(--tls));
  line-height:1.2;letter-spacing:.02em;color:#7a7480;margin-top:calc(4px * var(--tls));
}
/* live running value ("NOW ×1.7") for treats that grow as they trigger */
.tl-now{
  display:flex;align-items:baseline;gap:calc(5px * var(--tls));
  margin-top:calc(5px * var(--tls));padding-top:calc(5px * var(--tls));
  border-top:calc(2px * var(--tls)) dashed #ddd8e2;
  font-family:'Lazydog',cursive;font-size:calc(15px * var(--tls));line-height:1.1;
}
.tl-now b{font-family:'Bobby Jones Soft',cursive;font-size:calc(10.5px * var(--tls));
  letter-spacing:.08em;color:#7a7480;font-weight:normal;}

/* requirement + additional-effect chips, overhanging the pill */
.tl-tags{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:flex-end;align-items:flex-start;gap:calc(5px * var(--tls));
  max-width:calc(258px * var(--tls));
  margin:calc(-18px * var(--tls)) calc(-16px * var(--tls)) 0 auto;
}
.tl-tag{
  padding:calc(4px * var(--tls)) calc(9px * var(--tls)) calc(5px * var(--tls));
  background:#eeb84b;border:calc(2.5px * var(--tls)) solid #1b1a24;
  border-radius:calc(10px * var(--tls));box-shadow:0 calc(4px * var(--tls)) 0 #1b1a24;
  font-family:'Bobby Jones Soft',cursive;font-size:calc(11.5px * var(--tls));
  line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:#1b1a24;
}
/* The two chips are not the same kind of thing, so they no longer look alike.
   `.req` is a GATE — a condition the fit has to meet or the treat pays nothing;
   it keeps the loud amber and gets a ⚠. `.note` is a mechanic footnote (a
   REAPPEAR flip, a charge-up, a decay) — same chip, drained of colour, so the
   eye lands on the requirement first. Order matters below: .bad's ✗ has the
   same specificity as .req's ⚠ and has to come after it to win. */
.tl-tag.req::before{content:'⚠ ';}
.tl-tag.note{background:#efedf3;color:#57525f;text-transform:none;}
/* a requirement the board can't currently satisfy */
.tl-tag.bad{background:#e3695e;color:#fdfcff;}
.tl-tag.bad::before{content:'✗ ';}

/* × multiplies, + adds — the one colour rule the whole card runs on */
.tl-mul{color:#ee7420;}
.tl-add{color:#2f5ecb;}
.tl-tag .tl-mul{color:#8f3c02;}
.tl-tag .tl-add{color:#1e357a;}
.tl-tag.bad .tl-mul,.tl-tag.bad .tl-add{color:#fff4d8;}
.ps-stage .tc-dis{opacity:.92;}
/* A bought treat keeps its card on the shelf, stamped SOLD, instead of
   vanishing — the shelf never reflows under the player's cursor mid-visit.
   The card goes flat and grey so the two treats still for sale keep the eye. */
.ps-stage .tc-bought{background:#e8e5e8;}
.ps-stage .tc-bought:hover{transform:none;}
.ps-stage .tc-bought .tc-shape,
.ps-stage .tc-bought .tc-nm,
.ps-stage .tc-bought .tc-tags,
.ps-stage .tc-bought .tc-price{filter:grayscale(1);opacity:.42;}
.ps-stage .tc-stamp{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-11deg);padding:.1cqw 1.4cqw .35cqw;
  background:rgba(252,250,250,.82);border:.3cqw solid #e3695e;border-radius:.8cqw;
  box-shadow:0 0 0 .17cqw rgba(252,250,250,.95);
  font-family:'Lazydog',cursive;font-size:2.9cqw;line-height:1.1;color:#e3695e;
  letter-spacing:.12cqw;white-space:nowrap;}
/* ════════ MENU SCREEN (title) ════════
   The concrete floor, the torn note and the strewn cat toys are the Canva UI
   deck's page 1, re-cut into layers. Every layer is positioned by its CENTRE
   (%, rotation-invariant) inside a 16:9 stage, so the whole composition scales
   as one piece and never reflows. Do not swap these for a flexbox layout — the
   overlaps (mouse over paper, words over grid) only read right at fixed ratios.
   Geometry + colours were measured off the design; see assets/ui/. */
#s-menu{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;overflow:hidden;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;
  --px:0px;--py:0px;   /* pointer drift, written by initTitleParallax() */
}
/* the floor gets its own layer, bled 3% past every edge, so counter-drifting it
   against the pointer can never uncover a bare corner */
#s-menu::before{
  content:'';position:absolute;inset:-3%;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
  transform:translate(calc(var(--px) * -.3), calc(var(--py) * -.3));
}
.tt-stage{position:relative;width:min(100%,calc(100vh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;}

/* Every art layer: parallax-drifted, then centred on (left,top), then posed.
   --d is depth (how hard it tracks the pointer), --sx is the mirror flag.
   The paper, all five words and the cat doodle MUST share one --d — give them
   different depths and the handwriting slides off the page. */
.tt-l{
  position:absolute;pointer-events:none;user-select:none;
  transform:translate(calc(var(--px) * var(--d,1)), calc(var(--py) * var(--d,1)))
            translate(-50%,-50%) rotate(var(--r,0deg)) scaleX(var(--sx,1));
}
.tt-note   {left:45.82%;top:45.26%;width:32.56%;height:51.32%;--d:.8;}
/* feather + bell are MIRRORED in the design, not rotated — a 180° spin puts the
   feathers below the rope and drags both toys up the floor. */
.tt-feather{left:19.76%;top:64.06%;width:69.04%;height:66.95%;--sx:-1;--d:.6;}
.tt-mouse  {left:80.19%;top:38.23%;width:63.98%;height:62.04%;--d:1.2;}
.tt-bell   {left:26.50%;top:47.12%;width:69.04%;height:66.95%;--sx:-1;--d:.45;}

@media (prefers-reduced-motion:reduce){#s-menu{--px:0px !important;--py:0px !important;}}

/* ── the manager's note, as one reusable block ─────────────────────────────
   Children are placed in % of THIS box, not of the screen, so the whole note
   can be dropped anywhere at any size and the handwriting stays on the paper.
   The box is the paper's axis-aligned bounding box (the paper itself sits
   rotated inside it). Used by the title screen and the intro.
   NOTE: .tt-note is CENTRED on its left/top (the .tt-l transform does that);
   .io-note has no such transform, so its left/top is the corner. */
.pf-note{position:absolute;}
.pf-note img{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));pointer-events:none;user-select:none;}
.pfn-paper {left:50.00%;top:50.00%;width:74.32%;height:99.65%;--r:-100.1deg;filter:drop-shadow(0.5cqw 0.7cqw 0.5cqw rgba(20,18,28,.32));}
.pfn-cat   {left:66.55%;top:71.26%;width:13.82%;height:13.56%;--r: -10.1deg;}
.pfn-fitinc{left:47.30%;top:49.96%;width:43.83%;height:14.54%;--r: -16.4deg;}
.pfn-purr  {left:42.32%;top:35.77%;width:54.27%;height:18.84%;--r: -16.3deg;}
.pfn-welc  {left:34.77%;top:20.79%;width:38.30%;height:10.33%;--r: -11.6deg;}
.pfn-sinc  {left:34.22%;top:71.98%;width:25.89%;height: 6.08%;--r: -16.4deg;}
.pfn-mgr   {left:41.62%;top:76.46%;width:31.91%;height: 6.55%;--r: -16.4deg;}

/* ════════ INTRO (new-run onboarding — deck pages 2-3) ════════ */
#s-intro{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;overflow:hidden;
  --px:0px;--py:0px;   /* pointer drift, written by initParallax() */
}
/* floor bled 3% past every edge so the counter-drift can't uncover a corner */
#s-intro::before{
  content:'';position:absolute;inset:-3%;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
  transform:translate(calc(var(--px) * -.3), calc(var(--py) * -.3));
}
/* each panel swaps the art on the slab — data-art is set by introShow().
   --d is parallax depth; the slab, pill and letter deliberately have none, so
   only the scene art drifts and the panel you are reading stays still. */
.io-toy{position:absolute;pointer-events:none;user-select:none;
        transform:translate(calc(var(--px) * var(--d,1)), calc(var(--py) * var(--d,1)))
                  translate(-50%,-50%) scaleX(-1);}
.io-bell   {left:15.54%;top:67.32%;width:62.14%;height:60.26%;--d:.45;}
.io-feather{left:16.40%;top:66.13%;width:62.14%;height:60.26%;--d:.6;}
/* the three job-step notepads, pre-composited from their 27 source layers into
   one flat overlay (assets/ui/intro-steps.png) — see the intro commit */
.io-steps{position:absolute;left:17.08%;top:23.61%;width:39.27%;height:61.94%;pointer-events:none;--d:.8;
          transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}
/* the order box leans in from off-page, top-right, behind the letter */
.io-box{position:absolute;left:75.25%;top:-15.42%;width:87.38%;height:84.73%;pointer-events:none;--d:1.15;
        transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)))
                  translate(-50%,-50%) rotate(26.4deg);}
.io-toy,.io-note,.io-steps,.io-box{display:none;}
#s-intro[data-art="note"]  .io-toy,
#s-intro[data-art="note"]  .io-note {display:block;}
#s-intro[data-art="steps"] .io-steps,
#s-intro[data-art="steps"] .io-box  {display:block;}

/* the presentation slab the note is pinned to — two cards, back one offset right */
.io-cards{position:absolute;left:22.11%;top:31.50%;width:54.81%;height:33.46%;}
.io-cards i{position:absolute;inset:0;border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.io-card-back {transform:translateX(5.9%);background:#404461;}
.io-card-front{background:radial-gradient(120% 130% at 42% 46%,#565d88 0%,#4b5177 45%,#414664 100%);}

.io-note{left:21.22%;top:25.64%;width:30.08%;height:47.37%;--d:.8;
         transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}

.io-pill{
  position:absolute;left:21.90%;top:16.00%;height:5.90%;
  display:flex;align-items:center;padding:0 1.5cqw;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:99px;
  box-shadow:-0.3cqw 0.4cqw 0 rgba(20,18,28,.55);
  font-family:'Bobby Jones Soft',cursive;font-size:2.1cqw;letter-spacing:.03em;color:#1b1a24;
  white-space:nowrap;
}

/* letter: white sheet, lavender backing peeking out below, OKAY straddling the edge */
.io-letter{position:absolute;right:25.0%;top:25.6%;width:18.6%;display:flex;flex-direction:column;align-items:center;}
.io-letter::before{
  content:'';position:absolute;left:-1.2cqw;right:-1.2cqw;top:1.0cqw;bottom:-1.0cqw;
  background:#bdbdd2;border:0.17cqw solid #1b1a24;border-radius:1.2cqw;
}
.io-sheet{
  position:relative;width:100%;background:#fcfafa;
  border:0.17cqw solid #1b1a24;border-radius:1.1cqw;padding:1.4cqw 1.3cqw 3.4cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.55cqw;line-height:1.22;letter-spacing:.012em;
  color:#1b1a24;text-transform:uppercase;
}
.io-sheet p+p{margin-top:.7em;}
.io-r{color:#e07270;}
.io-b{color:#8294f6;}
/* OKAY sits on the lavender lip, overlapping the sheet's bottom edge */
/* .ttb is declared further down, so this needs the extra class to win */
.ttb.io-okay{position:relative;top:-1.3cqw;left:auto;width:12.2cqw;height:4cqw;background:#d2f886;}
.io-okay .ttb-lbl{font-size:3.1cqw;-webkit-text-stroke:.1em #fdfcff;transform:translateY(-0.55cqw);}

/* ── chunky sticker buttons: black keyline, white ring, hard drop slab ── */
/* die-cut sticker: white cut-line sits OUTSIDE the black keyline (not inside),
   with a hard slab dropped behind it. Reversing those two reads as a cheap
   web button instead of a sticker. */
.ttb{
  position:absolute;top:77.4%;height:11.3%;
  border:0.17cqw solid #17151c;border-radius:1.05cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 1.35cqw 0 #262229;
  background:#829af8;cursor:inherit;padding:0;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  transition:transform .09s ease-out, box-shadow .09s ease-out;
}
.ttb:hover{transform:translateY(-0.25cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 1.6cqw 0 #262229;}
.ttb:active{transform:translateY(1.15cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.2cqw 0 #262229;}
.ttb-play{left:39.97%;width:19.78%;}
/* Decorative twin of the PLAY sticker: it is a prop, not a control, so it takes
   no pointer events at all — no cursor change, no hover lift, no press. */
.ttb-paw {left:61.95%;width: 5.63%;background:#f6e379;overflow:hidden;pointer-events:none;}
/* the paw is taller than its button on purpose — the wrist runs off the bottom edge */
.ttb-paw img{position:absolute;left:50.7%;top:51.2%;width:49.7%;height:93.6%;transform:translate(-50%,-50%) rotate(-31.8deg);pointer-events:none;}

.ttb-lbl{
  font-family:'Lazydog','Fredoka One',cursive;font-size:5.34cqw;line-height:.86;
  letter-spacing:-.09em;color:#17151c;
  -webkit-text-stroke:.124em #fdfcff;paint-order:stroke fill;
  filter:drop-shadow(.065em .107em 0 rgba(20,18,28,.4));
  transform:translateY(-0.85cqw);
}
/* Lazydog carries its own hand-drawn wobble, so no per-letter tilt here */
.ttb-lbl i{display:inline-block;font-style:normal;}

/* dev tools live in the corner so they stay out of the picture */
/* column-reverse: the toggle stays pinned in the corner and the panel opens
   upward, so turning dev mode on never pushes the toggle off-screen. */
.tt-dev{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:6px;z-index:2;width:180px;}
.tt-dev .dev-panel{border-top:0;border-bottom:1px solid rgba(255,255,255,.15);margin-top:0;margin-bottom:4px;padding:0 0 8px;}
.tt-dev .btn-reload-cfg{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);}
.tt-dev .btn-reload-cfg:hover{border-color:rgba(255,255,255,.55);color:#fff;}
/* the global floating dev pill lands in this exact corner — the title screen
   has its own labelled toggle (and its own Config Sheet button inside the dev
   panel), so suppress both duplicates here. */
body:has(#s-menu.on) #btn-dev-float,
body:has(#s-menu.on) #btn-cfg-float{display:none;}

/* ════════ BRANCHES — PF INC. HEADQUARTERS (deck page 4) ════════
   The map, the taped note and the title plate are flattened art (each was a
   dozen-plus layers in the deck); only the continent labels, the red ring and
   the branch rail are live, because those come from the Branches sheet.
   Geometry is % of the same 16:9 stage the other screens use. */
#s-branches{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;overflow:hidden;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;
  --px:0px;--py:0px;
}
#s-branches::before{
  content:'';position:absolute;inset:-3%;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
  transform:translate(calc(var(--px) * -.3), calc(var(--py) * -.3));
}
.hq-stage>*{position:absolute;}
.hq-map {left:34.43%;top: 3.24%;width:65.57%;height:66.48%;pointer-events:none;--d:.35;
         transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}
.hq-note{left:29.79%;top:10.00%;width:14.27%;height:27.59%;pointer-events:none;--d:.75;
         transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}

/* ── title plate: navy slab, white card overhanging it, flavour underneath ── */
.hq-plate{left:2.60%;top:7.56%;width:19.0%;height:31.5%;--d:.75;
          transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}
.hq-plate-navy{position:absolute;inset:0;background:#404461;border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.hq-plate-card{position:absolute;left:14%;top:16%;width:110%;height:52%;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:1.2cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff;display:flex;align-items:center;justify-content:center;}
.hq-plate-card img{width:86%;}
.hq-plate-flav{position:absolute;left:8%;right:8%;bottom:7%;text-align:left;
  font-family:'Providence Sans',cursive;font-size:1.35cqw;color:rgba(255,255,255,.62);}

.hq-paw{left:1.90%;top:3.70%;width:4.3%;height:7.6%;padding:0;cursor:inherit;
  background:#f6e379;border:0.17cqw solid #17151c;border-radius:1.0cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.7cqw 0 #262229;overflow:hidden;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.hq-paw:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.9cqw 0 #262229;}
.hq-paw:active{transform:translateY(0.5cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.2cqw 0 #262229;}
.hq-paw img{position:absolute;left:50%;top:48%;width:52%;transform:translate(-50%,-50%) rotate(-31.8deg);}


/* ── continent labels pinned onto the map ── */
.hq-conts{inset:0;pointer-events:none;--d:.35;
          transform:translate(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)));}
.hq-cont{position:absolute;transform:translate(-50%,-50%) rotate(var(--cr,0deg));
  font-family:'Bobby Jones Soft',cursive;font-size:2.1cqw;letter-spacing:.02em;
  color:#241d16;white-space:nowrap;cursor:inherit;pointer-events:auto;-webkit-text-stroke:.028em #241d16;
  background:none;border:0;padding:.3cqw .5cqw;transition:transform .12s;}
.hq-cont:hover{transform:translate(-50%,-50%) rotate(var(--cr,0deg)) scale(1.08);}
.hq-cont.off{opacity:.68;font-size:1.95cqw;}
.hq-ring{position:absolute;width:11.63%;height:10.03%;transform:translate(-50%,-50%);
  pointer-events:none;transition:left .22s cubic-bezier(.2,.7,.3,1),top .22s cubic-bezier(.2,.7,.3,1);}

/* ── branch rail along the desk edge ── */
/* full-bleed: anchored to the screen, not the 16:9 stage, or it stops short
   of the edges on wide viewports */
.hq-desk{position:absolute;left:0;right:0;bottom:0;height:9.5%;z-index:3;
  background:linear-gradient(#464b6d,#3d4260);border-top:2px solid #2a2b3d;}
.hq-rail{left:2%;right:2%;bottom:0;height:47%;display:flex;align-items:flex-end;
  justify-content:space-evenly;gap:1.6cqw;padding:0 1cqw;}

.hq-card{position:relative;flex:0 0 auto;width:18.5cqw;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:1.2cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff;padding:0.9cqw 1cqw 7cqw;text-align:center;
  cursor:inherit;transition:transform .14s cubic-bezier(.2,.7,.3,1);}
.hq-card-nm{font-family:'Bobby Jones Soft',cursive;font-size:2.95cqw;line-height:1.1;color:var(--cty,#5f7fd8);}
.hq-card-flav{font-family:'Bobby Jones Soft',cursive;font-size:1.3cqw;color:#7a7480;margin-top:1.1cqw;}
.hq-card.peek{width:13cqw;padding-bottom:5.6cqw;}
.hq-card.peek .hq-card-nm{font-size:2.45cqw;}
.hq-card.peek:hover{transform:translateY(-0.5cqw);}
.hq-card.hero{margin-left:auto;margin-right:auto;}
.hq-faces{position:absolute;left:8%;right:8%;top:-3.2cqw;height:3.4cqw;
  display:flex;gap:.35cqw;justify-content:center;
  background:#6b6fa0;border:0.17cqw solid #1b1a24;border-radius:.8cqw .8cqw 0 0;padding:.3cqw;}
.hq-faces img{height:100%;width:auto;border-radius:.3cqw;}
.hq-mod{position:absolute;right:-7cqw;top:1.4cqw;background:#eeb84b;
  border:0.17cqw solid #1b1a24;border-radius:.7cqw;box-shadow:0 0.45cqw 0 #262229;
  font-family:'Bobby Jones Soft',cursive;font-size:1.25cqw;color:#1b1a24;padding:.35cqw .8cqw;white-space:nowrap;}
.hq-tag{position:absolute;font-family:'Bobby Jones Soft',cursive;font-size:1.15cqw;color:#1b1a24;
  background:#c9cde8;border:0.17cqw solid #1b1a24;border-radius:.55cqw;padding:.15cqw .6cqw;white-space:nowrap;}
.hq-tag-prev{left:8%;top:-1.9cqw;}
.hq-day{position:absolute;left:-5.4cqw;top:1.2cqw;background:#e8676a;
  border:0.17cqw solid #1b1a24;border-radius:.7cqw;padding:.3cqw .7cqw;text-align:center;
  font-family:'Bobby Jones Soft',cursive;color:#1b1a24;line-height:1;}
.hq-day-d{font-size:1.1cqw;display:block;}
.hq-day-n{font-size:2.2cqw;font-family:'Lazydog',cursive;}
.hq-day-n small{font-size:1.1cqw;font-family:'Bobby Jones Soft',cursive;}

.hq-go{width:100%;margin-top:.55cqw;padding:.35cqw 0;cursor:inherit;
  border:0.17cqw solid #17151c;border-radius:.9cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.85cqw 0 #262229;background:#d2f886;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.hq-go:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 1.05cqw 0 #262229;}
.hq-go:active{transform:translateY(0.65cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 0.2cqw 0 #262229;}
.hq-go span{font-family:'Lazydog',cursive;font-size:2.1cqw;line-height:1;color:#17151c;
  -webkit-text-stroke:.11em #fdfcff;paint-order:stroke fill;
  filter:drop-shadow(.05em .09em 0 rgba(20,18,28,.35));display:inline-block;}
.hq-go-cont{background:#f6e379;}
.hq-go-cont span{font-size:1.7cqw;}
.hq-empty{position:absolute;left:0;right:0;top:46%;text-align:center;color:#fff;font-family:'Fredoka One',cursive;}

@media (prefers-reduced-motion:reduce){#s-branches{--px:0px !important;--py:0px !important;}}


/* ── Branches: Theme Map toggle ── */
.btn-theme-toggle{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;}
.btn-theme-toggle:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);}
#s-branches.theme-map .btn-theme-toggle{background:rgba(245,194,0,.15);border-color:rgba(245,194,0,.5);}
#s-branches.theme-map{background:linear-gradient(160deg,#5a6d80 0%,#7a8d9f 40%,#6a7d95 100%);}
#s-branches.theme-map .br-continent{background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);border-color:rgba(255,255,255,.18);backdrop-filter:blur(6px);}
#s-branches.theme-map .br-card{box-shadow:0 4px 16px rgba(0,0,0,.2),3px 3px 0 #1a1a2a;}
#s-branches.theme-map .br-cont-em{font-size:36px;opacity:.6;}


/* ════════ SCHEDULE (between-rounds hub — deck page 7) ════════
   One card per round of the current day. WORK continues to the pet shop; SKIP
   forfeits the round for a bonus drawn from the Breaks sheet (js/breaks.js) and
   is not offered on deadline rounds. */
#s-calendar{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;overflow:hidden;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;
  --px:0px;--py:0px;   /* pointer drift, written by initParallax() */
}
/* floor bled 3% past every edge so the counter-drift can't uncover a corner */
#s-calendar::before{
  content:'';position:absolute;inset:-3%;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
  transform:translate(calc(var(--px) * -.3), calc(var(--py) * -.3));
}
.sc-stage>*{position:absolute;}
/* the desk props are the only things on this screen that drift with the
   pointer — the schedule itself has no --d, so the cards you are reading and
   the buttons you are aiming at stay exactly where they are. */
.sc-decor{pointer-events:none;user-select:none;
  transform:translate(calc(var(--px) * var(--d,1)), calc(var(--py) * var(--d,1)));}
/* the parcels lie nearest the camera, bleeding off the bottom-left corner at
   the deck's scale, so they track the pointer hardest */
.sc-parcels{left:-26.3%;top:42.2%;width:70.25%;--d:1.1;}
/* the tools art is a narrow vertical strip in a wide canvas; the deck also
   rotates it. Sized so the props read at the design's scale rather than
   reverse-engineering that rotation for a background prop. */
.sc-tools  {left:22.1%;top:38.8%;width:78%;--d:.8;}
@media (prefers-reduced-motion:reduce){#s-calendar{--px:0px !important;--py:0px !important;}}

.sc-paw{left:2.4%;top:11.4%;width:4.1%;height:6.7%;padding:0;cursor:inherit;
  background:#f6e379;border:0.17cqw solid #17151c;border-radius:.9cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .6cqw 0 #262229;overflow:hidden;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.sc-paw:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .8cqw 0 #262229;}
.sc-paw:active{transform:translateY(0.4cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.sc-paw img{position:absolute;left:50%;top:48%;width:52%;transform:translate(-50%,-50%) rotate(-31.8deg);}
.sc-cash{left:7.4%;top:12.1%;height:5.2%;display:flex;align-items:center;gap:.4cqw;padding:0 1.4cqw 0 .35cqw;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:99px;
  font-family:'Lazydog',cursive;font-size:1.9cqw;color:#1b1a24;}
.sc-cash img{height:150%;margin-left:-1.1cqw;}

.sc-plate{left:4.4%;top:18.5%;width:18.5%;height:24.5%;background:#404461;
  border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.sc-plate-card{left:7.3%;top:21.5%;width:21.8%;height:15%;background:#fcfafa;
  border:0.17cqw solid #1b1a24;border-radius:1.2cqw;box-shadow:0 0 0 0.17cqw #fdfcff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bobby Jones Soft',cursive;font-size:4.2cqw;color:#1b1a24;letter-spacing:.01em;}
.sc-plate-flav{left:6.2%;top:38.5%;width:16%;
  font-family:'Providence Sans',cursive;font-size:1.3cqw;color:rgba(255,255,255,.62);}

.sc-paper{left:55.8%;top:19.3%;width:13.5%;transform:rotate(6deg);pointer-events:none;}
.sc-branch{left:34.7%;top:15.0%;height:5.6%;padding:0 1.4cqw;display:flex;align-items:center;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:1cqw 1cqw 0 0;
  font-family:'Bobby Jones Soft',cursive;font-size:2.4cqw;color:#8f6d59;}
.sc-daytab{left:47.0%;top:16.0%;height:4.6%;padding:0 1.2cqw;display:flex;align-items:center;
  background:#f6e379;border:0.17cqw solid #1b1a24;border-radius:.9cqw .9cqw 0 0;
  font-family:'Bobby Jones Soft',cursive;font-size:1.6cqw;color:#1b1a24;}

/* the slab the day's orders are laid out on. The branch tab, the day tab and
   the grid sheet tuck in BEHIND its top edge (DOM order does the z-stacking),
   and the cards themselves hang past its bottom — the deck's look of a folder
   with paperwork spilling off it. */
.sc-board{left:37%;top:21%;width:54.7%;height:33.9%;background:#575f7e;
  border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.sc-cards{left:33.7%;top:22.0%;width:61.3%;height:47%;display:flex;align-items:flex-start;
  justify-content:center;gap:0;}
.sc-card{position:relative;flex:0 0 auto;width:18.4cqw;margin:0 -0.3cqw;border-radius:1.2cqw;
  border:0.17cqw solid #1b1a24;padding:2.4cqw 1cqw 1.1cqw;text-align:center;}
.sc-past  {background:#3f4363;color:rgba(255,255,255,.42);margin-top:1.3cqw;width:16.8cqw;min-height:20.2cqw;}
.sc-future{background:#3f4363;color:rgba(255,255,255,.42);margin-top:1.3cqw;width:16.8cqw;min-height:20.2cqw;}
.sc-now   {background:#e9e8f2;color:#1b1a24;box-shadow:0 0 0 0.17cqw #fdfcff;z-index:2;}
.sc-tab{position:absolute;left:-.3cqw;top:-.9cqw;display:flex;align-items:center;gap:.5cqw;
  background:#5b608c;border:0.17cqw solid #1b1a24;border-radius:.8cqw;padding:.2cqw .8cqw;
  font-family:'Lazydog',cursive;font-size:2cqw;color:#fdfcff;white-space:nowrap;}
.sc-tab span{font-family:'Bobby Jones Soft',cursive;font-size:1.1cqw;}
.sc-tab-now{background:#fcfafa;color:#1b1a24;box-shadow:0 0 0 0.17cqw #fdfcff;}
.sc-body{display:flex;flex-direction:column;align-items:center;gap:.25cqw;}
.sc-sub{font-family:'Bobby Jones Soft',cursive;font-size:1.25cqw;letter-spacing:.02em;}
.sc-target{font-family:'Lazydog',cursive;font-size:3.6cqw;line-height:1;}
.sc-red{color:#e3695e;}
.sc-verdict{font-family:'Bobby Jones Soft',cursive;font-size:2.6cqw;line-height:1.1;}
.sc-score{font-family:'Lazydog',cursive;font-size:2.8cqw;line-height:1;}
.sc-score small{font-size:1.6cqw;opacity:.7;}
.sc-mini{display:flex;gap:1cqw;margin-top:.4cqw;}
.sc-mini div{display:flex;flex-direction:column;align-items:center;}
.sc-mini span{font-family:'Bobby Jones Soft',cursive;font-size:.95cqw;}
.sc-mini b{font-family:'Lazydog',cursive;font-size:1.6cqw;font-weight:400;}
.sc-pills{display:flex;gap:.5cqw;margin-top:.5cqw;}
.sc-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:3.9cqw;padding:0 .3cqw;height:3.4cqw;background:#5b608c;border:0.17cqw solid #1b1a24;border-radius:.7cqw;color:#fdfcff;}
.sc-now .sc-pill{background:#e2e1ee;color:#1b1a24;}
.sc-pill b{font-family:'Lazydog',cursive;font-size:1.7cqw;font-weight:400;line-height:1;display:flex;align-items:center;}
.sc-pill b img{height:2.2cqw;margin:-.6cqw -.9cqw -.6cqw .1cqw;}
.sc-pill span{font-family:'Bobby Jones Soft',cursive;font-size:.8cqw;}
/* Purrfect (board-fill) rate for the round being played (js/calendar.js) — what
   a full box pays per cell, which steps up once per work-week day. Sunny yellow
   rather than the deadline's mustard so a bonus never reads as a condition; the
   pills' type, one line, tucked under them and clear of the WORK/SKIP fork. */
.sc-purrfect{margin-top:.45cqw;display:inline-flex;align-items:baseline;gap:.25cqw;
  background:#f6e379;border:0.17cqw solid #1b1a24;border-radius:.6cqw;padding:.1cqw .55cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:.85cqw;color:#1b1a24;
  line-height:1.2;white-space:nowrap;}
.sc-purrfect b{font-family:'Lazydog',cursive;font-size:1.3cqw;font-weight:400;}
/* Deadline detail (js/calendar.js) — the schedule spells a deadline out rather
   than only labelling it: every deadline on the day, the one you're standing
   on and the ones still ahead, names the exact condition it lands with.
   (.sc-dl-note / .sc-dl-chip are the no-schedule fallback preview.) */
.sc-boss{border-color:#eeb84b;}
.sc-dl{width:100%;margin-top:.55cqw;background:#eeb84b;border:0.17cqw solid #1b1a24;
  border-radius:.7cqw;padding:.3cqw .5cqw .4cqw;color:#1b1a24;text-align:center;}
.sc-dl-hd{font-family:'Bobby Jones Soft',cursive;font-size:1.05cqw;letter-spacing:.02em;line-height:1.1;}
.sc-dl-name{font-family:'Lazydog',cursive;font-size:1.55cqw;line-height:1.1;margin-top:.1cqw;}
.sc-dl-desc{font-family:'Bobby Jones Soft',cursive;font-size:.85cqw;line-height:1.2;margin-top:.15cqw;}
.sc-dl-note{font-family:'Bobby Jones Soft',cursive;font-size:.8cqw;line-height:1.2;margin-top:.15cqw;}
.sc-dl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.2cqw;margin-top:.3cqw;}
.sc-dl-chip{width:1.6cqw;height:1.6cqw;display:flex;align-items:center;justify-content:center;
  background:#fcfafa;border:0.14cqw solid #1b1a24;border-radius:.4cqw;font-size:.95cqw;}
.sc-dl-done{margin-top:.5cqw;display:flex;flex-direction:column;align-items:center;
  background:#eeb84b;border:0.17cqw solid #1b1a24;border-radius:.7cqw;padding:.2cqw .6cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:.95cqw;color:#1b1a24;line-height:1.15;}
.sc-dl-done small{font-family:'Bobby Jones Soft',cursive;font-size:.8cqw;opacity:.75;}
.sc-noskip{padding:.55cqw 1cqw;border:0.17cqw dashed #a5a2b2;border-radius:.85cqw;
  font-family:'Lazydog',cursive;font-size:1.5cqw;line-height:1;color:#8d8a99;white-space:nowrap;}

.sc-fork{display:flex;gap:.9cqw;margin-top:.9cqw;align-items:flex-start;}
.sc-fork-col{display:flex;flex-direction:column;align-items:center;gap:.25cqw;}
.sc-fork-lbl{font-family:'Bobby Jones Soft',cursive;font-size:.95cqw;color:#4b4757;}
.sc-work,.sc-skip{cursor:inherit;padding:.25cqw 1.1cqw;border:0.17cqw solid #17151c;border-radius:.85cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .75cqw 0 #262229;
  font-family:'Lazydog',cursive;font-size:2.1cqw;color:#17151c;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.sc-work{background:#d2f886;}
.sc-skip{background:#f6e379;}
.sc-work:hover,.sc-skip:hover  {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .95cqw 0 #262229;}
.sc-work:active,.sc-skip:active{transform:translateY(0.55cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.sc-skip.armed{background:#e3695e;color:#fdfcff;}
.sc-bonus{margin-top:.35cqw;background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:.6cqw;
  padding:.25cqw .55cqw;max-width:8.5cqw;line-height:1.15;
  font-family:'Bobby Jones Soft',cursive;font-size:.95cqw;color:#1b1a24;}
/* ════════ GAME BOARD (deck page 5) ════════
   Chrome only — the board, hand and inventory grids are still rendered by
   board.js / backpack.js into #board, #hand and #bpg, so every id the game
   writes to is preserved. Geometry is % of the shared 16:9 stage. */
#s-game{
  flex-direction:row;align-items:center;justify-content:center;padding:0;
  background:#53535f;overflow:hidden;
  cursor:url('assets/ui/cursor-arrow.svg') 2 2, auto;
}
#s-game::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/ui/bg-floor.png') center/cover no-repeat;
}
.gm-stage>*{position:absolute;}
.gm-hidden{display:none;}

/* the branch tab + day tag slipping in from the screen above */
.gm-branch{left:4.1%;top:-1.4%;width:11.5%;height:5.6%;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:.4cqw;background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:0 0 1cqw 1cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.8cqw;color:#8f6d59;}
.gm-day{left:14.9%;top:-2.2%;width:6.4%;height:9.6%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:.5cqw;gap:.1cqw;
  background:#f6e379;border:0.17cqw solid #1b1a24;border-radius:0 0 1cqw 1cqw;
  font-family:'Bobby Jones Soft',cursive;color:#1b1a24;line-height:1;}
.gm-day-d{font-size:1.05cqw;}
.gm-day-n{font-family:'Lazydog',cursive;font-size:2.2cqw;}
.gm-day-n small{font-family:'Bobby Jones Soft',cursive;font-size:1.05cqw;}

/* the deadline's condition, hung off the top edge beside the day tag in the
   schedule's mustard, so a boss round never stops naming what it is doing to
   you. It fills the gap between the day tag and the board, and is only in the
   DOM flow while G.roundModifier is set — renderTopbarModifier() flips the
   inline display, so a normal round shows nothing here at all. */
.gm-mod{left:21.7%;top:-2.2%;width:12.9%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:.08cqw;padding:1.55cqw .55cqw .5cqw;
  background:#eeb84b;border:0.17cqw solid #1b1a24;border-radius:0 0 1cqw 1cqw;
  color:#1b1a24;text-align:center;}
.gm-mod-hd{font-family:'Bobby Jones Soft',cursive;font-size:.9cqw;letter-spacing:.06em;line-height:1;}
.gm-mod-name{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35cqw;
  font-family:'Lazydog',cursive;font-size:1.35cqw;line-height:1.15;}
.gm-mod-desc{font-family:'Bobby Jones Soft',cursive;font-size:.78cqw;line-height:1.2;color:rgba(27,26,36,.82);}

/* paw + coin + cash, the schedule's motif. The score slab (.gm-panel) is
   declared after them and shares their stacking level, so it used to paint
   straight over the bottom of both — the cluster now sits clear of the slab's
   top edge AND above it, so the whole pill reads. */
.gm-paw{left:2.4%;top:10.4%;width:4.1%;height:6.7%;padding:0;cursor:inherit;z-index:2;
  background:#f6e379;border:0.17cqw solid #17151c;border-radius:.9cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .6cqw 0 #262229;overflow:hidden;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.gm-paw:hover {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .8cqw 0 #262229;}
.gm-paw:active{transform:translateY(0.4cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.gm-paw img{position:absolute;left:50%;top:48%;width:52%;transform:translate(-50%,-50%) rotate(-31.8deg);}
.gm-cash{left:8.0%;top:11.9%;height:5.2%;display:flex;align-items:center;gap:.4cqw;
  padding:0 1.4cqw 0 .35cqw;z-index:2;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:99px;
  font-family:'Lazydog',cursive;font-size:1.9cqw;color:#1b1a24;}
.gm-cash img{height:150%;margin-left:-1.1cqw;}

.gm-panel{left:2.75%;top:18.1%;width:17.2%;height:38.7%;background:#323d62;
  border:0.17cqw solid #1b1a24;border-radius:1.4cqw;}
.gm-card{width:13.5%;left:6.7%;background:#f9fafa;border:0.17cqw solid #1b1a24;border-radius:1.1cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1cqw;}
.gm-card-reach{top:22.6%;height:13.1%;}
.gm-card-so   {top:37.9%;height:14.4%;}
/* the day's purrfect rate, on the empty band the slab leaves above REACH
   SCORE — the prize the fill is chasing, priced where the targets are read.
   Written by renderStats() (js/render.js). */
.gm-purrfect{left:4.5%;top:18.0%;width:13.9%;height:3.5%;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  background:#f6e379;border:0.17cqw solid #1b1a24;border-radius:99px;
  font-family:'Bobby Jones Soft',cursive;font-size:1cqw;color:#1b1a24;letter-spacing:.02em;}
.gm-card-lbl{font-family:'Bobby Jones Soft',cursive;font-size:1.25cqw;color:#1b1a24;letter-spacing:.02em;}
.gm-card-val{font-family:'Lazydog',cursive;font-size:3.4cqw;line-height:1;color:#1b1a24;}
.gm-red{color:#e3695e;}
.gm-hands{left:11.7%;top:50.3%;width:8.4%;height:4.9%;display:flex;align-items:center;gap:.4cqw;
  padding:0 .8cqw;background:#829af8;border:0.17cqw solid #1b1a24;border-radius:99px;
  font-family:'Bobby Jones Soft',cursive;font-size:1.15cqw;color:#1b1a24;}
.gm-hands b{font-family:'Lazydog',cursive;font-size:1.9cqw;font-weight:400;}

/* board frame — .board itself keeps its grid rules from the game CSS */
.gm-boardwrap{left:34.9%;top:12.2%;width:25.3%;height:55.9%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:0.17cqw solid rgba(255,255,255,.22);border-radius:1.6cqw;}
.gm-stage .board{background:transparent;border:0;box-shadow:none;padding:0;gap:.55cqw;}
.gm-clear{left:37.3%;top:65.1%;width:4.7%;height:4.8%;cursor:inherit;
  background:#e3695e;border:0.17cqw solid #17151c;border-radius:.8cqw;
  box-shadow:0 .5cqw 0 #262229;font-family:'Bobby Jones Soft',cursive;font-size:1.2cqw;color:#fdfcff;
  transition:transform .09s ease-out, box-shadow .09s ease-out;}
.gm-clear:active{transform:translateY(.35cqw);box-shadow:0 .15cqw 0 #262229;}
.gm-ship{left:42.9%;top:64.5%;width:9.2%;height:8.5%;cursor:inherit;padding:0;
  background:#d2f886;border:0.17cqw solid #17151c;border-radius:1cqw;
  box-shadow:0 0 0 0.17cqw #fdfcff, 0 .9cqw 0 #262229;
  transition:transform .09s ease-out, box-shadow .09s ease-out, filter .12s;}
.gm-ship:hover:not(:disabled) {transform:translateY(-0.2cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 1.1cqw 0 #262229;}
.gm-ship:active:not(:disabled){transform:translateY(0.7cqw);box-shadow:0 0 0 0.17cqw #fdfcff, 0 .2cqw 0 #262229;}
.gm-ship:disabled{filter:grayscale(.55) brightness(.92);cursor:inherit;}
.gm-ship span{font-family:'Lazydog',cursive;font-size:2.9cqw;color:#17151c;
  -webkit-text-stroke:.1em #fdfcff;paint-order:stroke fill;
  filter:drop-shadow(.05em .09em 0 rgba(20,18,28,.35));display:inline-block;}
.gm-stage .fit-proj{left:42.9%;top:74.2%;width:9.2%;text-align:center;
  font-family:'Bobby Jones Soft',cursive;font-size:1.3cqw;color:#f0eef4;}
/* Mid-scan the hand is already committed: SHIP, CLEAR and SHIP's projection chip
   fade off the stage so the scoring sequence has the board to itself. Class is
   toggled by setScoringChrome() in js/scoring.js. */
.gm-stage.gm-scoring .gm-clear,
.gm-stage.gm-scoring .gm-ship,
.gm-stage.gm-scoring .fit-proj{
  opacity:0;visibility:hidden;transition:opacity .18s ease-out,visibility 0s .18s;}
/* Round won: the win panel (a sibling of the stage, so unaffected) is up and its
   button is the only way out — the whole stage goes inert so a click behind the
   card can't CLEAR, re-pack or re-SHIP a finished round. SHIP is also `disabled`
   so it reads dead rather than lit. Class is toggled by updFit() in js/render.js
   off G.roundOver. */
.gm-stage.gm-roundover{pointer-events:none;}

.gm-invtab{left:68.7%;top:12.2%;width:14.6%;height:4.6%;display:flex;align-items:center;justify-content:center;
  background:#fcfafa;border:0.17cqw solid #1b1a24;border-radius:.9cqw;
  font-family:'Bobby Jones Soft',cursive;font-size:1.5cqw;color:#1b1a24;letter-spacing:.03em;}
.gm-inv{left:66.5%;top:15.6%;width:30.1%;height:48.8%;background:rgba(255,255,255,.13);
  border:0.17cqw solid rgba(255,255,255,.24);border-radius:1.4cqw;
  display:flex;align-items:center;justify-content:center;}
.gm-inv-cap{left:66.5%;top:59.5%;width:30.1%;text-align:center;
  font-family:'Providence Sans',cursive;font-size:1.3cqw;color:rgba(255,255,255,.62);}

.gm-disc{left:2.5%;top:69.6%;width:8.9%;display:flex;flex-direction:column;align-items:center;gap:.3cqw;}
.gm-deck{left:89.0%;top:69.6%;width:8.9%;display:flex;flex-direction:column;align-items:center;gap:.3cqw;cursor:inherit;}
.gm-pill-lbl{font-family:'Bobby Jones Soft',cursive;font-size:1.25cqw;color:#f0eef4;letter-spacing:.03em;}
.gm-deck-n{width:100%;height:3.1cqw;display:flex;align-items:center;justify-content:center;
  background:#eeb84b;border:0.17cqw solid #1b1a24;border-radius:.8cqw;box-shadow:0 .45cqw 0 #262229;
  font-family:'Lazydog',cursive;font-size:2.1cqw;color:#1b1a24;}
.gm-stage .trash-zone{position:relative;width:100%;height:3.1cqw;border-radius:.8cqw;background:#e3695e;
  border:0.17cqw solid #1b1a24;box-shadow:0 .45cqw 0 #262229;font-size:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .09s ease-out, box-shadow .09s ease-out, background .12s, opacity .12s;}
.gm-stage .trash-badge{position:static;font-family:'Lazydog',cursive;font-size:2.1cqw;color:#1b1a24;
  background:none;border:0;width:auto;height:auto;}
/* Lights up while a cat is in hand, so the drop target is obvious — the same
   idiom as the pet shop's SELL BACK plate, minus that plate's white ring: the
   DISCARDS label sits only .3cqw above the pill, and a ring that reads outwards
   (plus the hop) would print straight over the label's glyphs. The hop and the
   deepening drop shadow carry the lift instead, and both stay inside .3cqw. */
.gm-stage .trash-zone.armed{background:#d2f886;transform:translateY(-0.12cqw);
  box-shadow:0 .6cqw 0 #262229;}
/* hovering the pill with a cat in hand: the drop is live, say so loudly */
.gm-stage .trash-zone.armed.drag-active{background:#b6f24e;transform:translateY(-0.22cqw) scale(1.04);
  box-shadow:0 .8cqw 0 #262229;}
/* out of discards for this hand — reads as spent, and never lights up */
.gm-stage .trash-zone.no-disc{opacity:.45;filter:saturate(.55);}
/* The column label carries the wording, the way SELL BACK becomes SELL FOR $n.
   It goes above rather than below the pill because the hand tray starts right
   under it — there is no room down there for a caption. */
.gm-disc.disc-armed .gm-pill-lbl{color:#d2f886;}
.gm-disc.disc-live .gm-pill-lbl{font-size:0;}
.gm-disc.disc-live .gm-pill-lbl::after{content:'DROP HERE';font-size:1.25cqw;
  letter-spacing:.03em;color:#d2f886;}

.gm-tray{left:0;right:0;bottom:0;height:20%;background:#fdfbf9;
  border-top:0.17cqw solid #1b1a24;display:flex;align-items:center;justify-content:center;}

/* ── deck-page-5 corrections, measured off the design capture ───────────── */
.gm-panel     {left: 2.54%;top:17.09%;width:17.79%;height:40.17%;}
.gm-card-reach{left: 7.01%;top:22.59%;width:12.91%;height:12.58%;}
.gm-card-so   {left: 6.87%;top:37.97%;width:12.98%;height:15.02%;}
.gm-hands     {left:11.33%;top:50.79%;width: 8.86%;height: 3.79%;}

/* board cells read dark against the light frame, not pale */
.gm-stage .cell{background:#66656b;border:0;border-radius:.5cqw;}
.gm-stage .cell.ok  {background:#7fae6e!important;}
.gm-stage .cell.bad {background:#a5595a!important;}
.gm-stage .cell.occ {background:#55545c;}

/* inventory: a slightly sunken panel holding a light card of cells.
   The card mirrors the shop's .ps-invcard; the grid and cells inside it are
   styled by the shared INVENTORY GRID block above — do not re-declare them
   here, that is exactly how the two screens drifted apart. */
.gm-inv{background:rgba(26,22,46,.15);border:0.17cqw solid rgba(255,255,255,.20);}
.gm-stage .bpgw{position:absolute;left:7.7%;top:10.1%;width:88.1%;height:77.6%;
  background:#d1d0d8;border:0.17cqw solid rgba(255,255,255,.55);border-radius:1cqw;
  display:flex;align-items:center;justify-content:center;padding:.55cqw;}

/* hand tray: pieces spread across the counter, no card chrome under them.
   Slot boxes are sized in JS (handSlotMetrics) off the live tray, so the cats
   read at nearly board scale instead of a fixed 150px thumbnail. */
.gm-tray .hand{width:86.5%;justify-content:space-between;align-items:center;gap:0;}
.gm-stage .cslot{background:none;border:0;box-shadow:none;padding:0;min-width:0;}
.gm-stage .cslot .csn{display:none;}
/* a played slot leaves a faint outline on the counter, not a grey block */
.gm-stage .eslot{background:none;border:.17cqw dashed rgba(27,26,36,.16);border-radius:1cqw;}
.gm-stage .eslot::after{display:none;}

/* ════════ FIGURES IN DISPLAY TEXT ════════
   Bobby Jones Soft draws % tight enough that QA read the deadline chip "TARGET
   SCORE 15% HIGHER THIS ROUND" as "15× HIGHER". 'PF Figures' re-serves ONLY the
   digits and the arithmetic glyphs from Providence Sans — the deck's body face,
   where % and × are plainly different shapes — and leaves every letter to the
   marker face, so the wording still reads hand-printed. Put .pf-figs on any
   label whose numbers must not be misread.
   Keep this block LAST: .pf-figs is one class deep, so it wins over the
   font-family of the display rules it layers onto by source order alone. */
@font-face{
  font-family:'PF Figures';
  src:url('assets/fonts/ProvidenceSansPro.woff2') format('woff2');
  unicode-range:U+0025,U+002B,U+002D,U+002F,U+0030-0039,U+00B1,U+00D7;
  font-display:swap;
}
.pf-figs{font-family:'PF Figures','Bobby Jones Soft',cursive;}

/* ════════════════════════════════════════════════════════════════════════════
   TOUCH / MOBILE
   The stages needed no new geometry — every screen is one 16:9 .tt-stage laid
   out in container units, so it already scales to a handset. What it needed was
   a viewport that survives a mobile browser's disappearing toolbar, chrome that
   clears the notch, touch stand-ins for R / RMB / ESC, and a gate for portrait,
   where a 16:9 stage collapses to an unreadable strip. See js/touch.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* dvh, not vh: on iOS and Android the URL bar makes 100vh TALLER than what is
   actually on screen, which pushes the bottom of every stage under the chrome.
   The vh line stays first as the fallback for browsers without dvh. */
.scr{height:100vh;height:100dvh;}
#s-game{height:100vh;height:100dvh;}
.tt-stage{width:min(100%,calc(100vh * 16 / 9));width:min(100%,calc(100dvh * 16 / 9));}

html,body{
  overscroll-behavior:none;              /* no pull-to-refresh mid-drag */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;            /* long-press is ours; no iOS callout */
}
/* touch-action:none on <body> kills scrolling everywhere, which the deck popup
   is the one place that actually wants it back. */
.dk-grid{touch-action:pan-y;}

/* The notch/rounded corners: viewport-fit=cover lets the art bleed to the true
   screen edge, and the safe-area inset then centres the stage in the part of
   that screen a finger and an eye can actually reach. The #s-* rules set
   padding:0 with ID specificity, hence the !important. */
body.is-touch .scr{
  padding-left:env(safe-area-inset-left,0px)!important;
  padding-right:env(safe-area-inset-right,0px)!important;
}
/* The floating dev pills sit at bottom-right in fixed px, which on a landscape
   phone lands them ON the two rightmost hand slots — an accidental tap would
   open a Google Sheet mid-hand. They are dev affordances, and the title
   screen's .tt-dev panel already carries labelled versions of all of them, so
   on touch they simply go. */
body.is-touch .btn-dev-float{display:none!important;}

/* ── held-piece controls (↻ / ✕) ──────────────────────────────────────────
   Children of #ihud, so they are on screen exactly while something is held —
   the same rule the keyboard hints follow. On touch the two halves swap: the
   key legend goes, the buttons arrive, and the bar moves out of the hand tray
   to the right margin, which on any phone taller than 16:9 is letterbox. */
.thb{display:none;}
body.is-touch #ihud{
  background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;gap:10px;
}
/* WHERE the pair sits follows the letterbox, because the stage is a fixed 16:9
   and the leftover band is on a different side depending on the device:
     viewport WIDER than 16:9 (every tall phone in landscape) → the stage is
       height-limited, the spare band is left/right → stack it up the right edge;
     viewport at most 16:9 (a 4:3 or 16:10 tablet) → the stage is width-limited,
       the spare band is top/bottom → lay it along the bottom edge.
   Ordered so a device at exactly 16:9 — no spare band anywhere — takes the
   right-edge stack, which clips only the end of the hand tray rather than
   sitting across the middle of it. */
@media (max-aspect-ratio:16/9){
  body.is-touch #ihud{
    top:auto;left:50%;right:auto;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
    flex-direction:row;
  }
}
@media (min-aspect-ratio:16/9){
  body.is-touch #ihud{
    left:auto;bottom:auto;top:50%;
    right:calc(6px + env(safe-area-inset-right,0px));
    transform:translateY(-50%);
    flex-direction:column;
  }
}
body.is-touch #ihud>.ik,
body.is-touch #ihud>span,
body.is-touch #ihud>.isep{display:none;}
body.is-touch .thb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:56px;height:56px;padding:0;border-radius:16px;cursor:pointer;
  border:2.5px solid #1b1a24;box-shadow:0 4px 0 #262229;
  font-size:24px;line-height:1;
  -webkit-user-select:none;user-select:none;touch-action:none;
}
body.is-touch .thb i{
  font-family:'Bobby Jones Soft','Fredoka One',cursive;font-style:normal;
  font-size:7px;letter-spacing:.4px;
}
body.is-touch .thb-rot{background:#fcfafa;color:#1b1a24;}
body.is-touch .thb-cxl{background:#e3695e;color:#fcfafa;}
body.is-touch .thb:active{transform:translateY(4px);box-shadow:0 0 0 #262229;}

/* ── portrait gate ────────────────────────────────────────────────────────
   The card is styled unconditionally and hidden by default; the media query
   below only decides WHEN it is on screen. Keeping the look outside the query
   means the gate can be rendered and checked anywhere, not just on a handset.
   Turning the phone removes it — there is no button, because there is nothing
   to decide. */
#rot-gate{
  display:none;position:fixed;inset:0;z-index:100000;
  align-items:center;justify-content:center;padding:28px;
  background:#53535f url('assets/ui/bg-floor.png') center/cover no-repeat;
}
#rot-gate::before{content:'';position:absolute;inset:0;background:rgba(26,22,46,.45);}
.rg-card{
  position:relative;text-align:center;padding:34px 26px 28px;
  background:#fcfafa;border:3px solid #1b1a24;border-radius:20px;
  box-shadow:5px 6px 0 #1b1a24;max-width:320px;
}
.rg-phone{font-size:64px;line-height:1;animation:rg-turn 2.4s ease-in-out infinite;}
.rg-hd{
  margin-top:14px;font-family:'Lazydog','Fredoka One',cursive;
  font-size:24px;line-height:1.15;color:#1b1a24;letter-spacing:.5px;
}
.rg-sub{
  margin-top:10px;font-family:'Bobby Jones Soft','Nunito',cursive;
  font-size:12px;color:#5b608c;font-style:italic;
}
@keyframes rg-turn{
  0%,42%{transform:rotate(0deg);}
  62%,88%{transform:rotate(-90deg);}
  100%{transform:rotate(0deg);}
}
/* pointer:coarse AND a phone-sized viewport, so a portrait desktop window or a
   touchscreen laptop never sees it. */
@media (orientation:portrait) and (pointer:coarse) and (max-width:900px){
  #rot-gate{display:flex;}
  /* nothing but the gate — the chrome below it is fixed-position too */
  #ihud,#ghost,.btn-dev-float,#board-tip,#paw-tip{display:none!important;}
}