/* ============================================================
   Prime - bomber.css
   Boxed In, the DCAT game. Standalone like climb.css, whose
   tokens, shipping label screens, title cards and leaderboard it
   shares (copied, not imported, so either game can change alone).
   What is new: the score and kit chips, the pest counter, the
   floating points, and the Bomb button.
   ============================================================ */

@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Lilita One'; src:url('../assets/fonts/LilitaOne-400.woff2') format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Allerta Stencil'; src:url('../assets/fonts/AllertaStencil-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --blue:#0052FF; --blue-deep:#003ECC; --blue-hi:#3D7DFF;
  --nav:#0A1024; --nav-2:#111A33;
  --ink:#0F1111; --ink-2:#4A4E4E;
  --label:#FFFDF8; --label-line:#0F1111;
  --kraft:#C9A374; --kraft-2:#B78D5F; --kraft-ink:#4E3418; --tape:#F6E9CF;
  --btn-y:#FFD814; --btn-y-hover:#F7CA00; --btn-y-line:#FCD200;
  --good:#2EE59D; --bad:#FF3B4E; --warn:#FFB703;
  --chip:rgba(10,16,36,.72); --chip-line:rgba(255,255,255,.14);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display:'Bricolage Grotesque', 'Inter', sans-serif;
  --stencil:'Allerta Stencil', 'Inter', sans-serif;
  --mono:'Fragment Mono', 'SF Mono', Menlo, monospace;

  --safe-t:max(14px, env(safe-area-inset-top));
  --safe-r:max(14px, env(safe-area-inset-right));
  --safe-b:max(14px, env(safe-area-inset-bottom));
  --safe-l:max(14px, env(safe-area-inset-left));
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-drop:cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body.game {
  background:#0A1024; color:var(--ink); font:500 15px/1.45 var(--sans);
  overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; }
kbd {
  display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; padding:0 .4em; margin:0 .1em;
  font:400 .78em/1 var(--mono); color:var(--ink); background:#fff;
  border:1.5px solid var(--ink); border-bottom-width:3px; border-radius:6px;
}
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.stencil { font:400 11px/1.2 var(--stencil); letter-spacing:.14em; text-transform:uppercase; }

#stage { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; touch-action:none; outline:none; }

/* ---------- loader ---------- */
.loader { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; background:linear-gradient(#0A1024, #1B3A8C); color:#fff; font-weight:600; transition:opacity .5s var(--ease-out), visibility .5s; z-index:30; }
.loader .ring { width:38px; height:38px; border-radius:50%; border:4px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .9s linear infinite; }
body.ready .loader { opacity:0; visibility:hidden; }
@keyframes spin { to { transform:rotate(1turn); } }

/* ---------- HUD ---------- */
.hud { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:0; transition:opacity .4s var(--ease-out); }
body.playing .hud { opacity:1; }
.hud-l, .hud-r { position:absolute; top:var(--safe-t); display:flex; flex-direction:column; gap:8px; }
.hud-l { left:var(--safe-l); align-items:flex-start; }
.hud-r { right:calc(var(--safe-r) + 104px); align-items:flex-end; flex-direction:row; }
.chip {
  display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:12px;
  background:var(--chip); border:1px solid var(--chip-line); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(10,16,36,.18);
}
.chip small { font:400 10px/1 var(--stencil); letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.corner { position:fixed; top:var(--safe-t); right:var(--safe-r); display:flex; gap:8px; z-index:12; }
.hud-btn {
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  background:var(--chip); border:1px solid var(--chip-line); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hud-btn svg { width:22px; height:22px; }
.hud-btn .cross { display:none; }
.hud-btn.off .cross { display:block; } .hud-btn.off .wave { display:none; }
@media (hover:hover) { .hud-btn:hover { background:rgba(10,16,36,.9); } }
.hud-btn:focus-visible, .btn:focus-visible, .tabs button:focus-visible, .x:focus-visible, .back:focus-visible { outline:3px solid var(--blue-hi); outline-offset:2px; }

.toast {
  position:fixed; left:50%; top:66%; transform:translate(-50%, 10px) scale(.92); z-index:6; pointer-events:none;
  font:800 clamp(24px, 4.2vw, 44px)/1 var(--display); letter-spacing:-.02em; color:#fff; text-align:center; white-space:nowrap;
  text-shadow:0 3px 0 rgba(10,16,36,.55), 0 10px 30px rgba(10,16,36,.35); opacity:0;
  transition:opacity .25s, transform .35s var(--ease-drop);
}
.toast.show { opacity:1; transform:translate(-50%, 0) scale(1); }
.toast.egg { color:#9FD0FF; } .toast.bad { color:#FFD0D5; } .toast.good { color:#C6FFE6; } .toast.combo { color:var(--btn-y); } .toast.warn { color:#FFE7A8; } .toast.power { color:#D6E4FF; }

/* ---------- screens: shipping labels ---------- */
.screen { position:fixed; inset:0; z-index:10; display:flex; align-items:center; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); pointer-events:none; }
.screen[hidden] { display:none; }
.screen > * { pointer-events:auto; }
#paused, #over { justify-content:center; background:rgba(10,16,36,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:auto; }
.screen-title { justify-content:flex-start; padding-left:max(var(--safe-l), 5vw); }

.label {
  position:relative; width:min(440px, 100%); max-height:calc(100dvh - 28px); overflow:auto;
  background:var(--label); color:var(--ink); border:2px solid var(--label-line); border-radius:6px;
  padding:18px 22px 16px; box-shadow:0 2px 0 rgba(0,0,0,.06), 0 28px 60px -12px rgba(10,16,36,.45);
  animation:land .7s var(--ease-drop) both; -webkit-user-select:text; user-select:text;
}
@keyframes land { from { transform:translateY(-40px) rotate(-2deg); opacity:0; } }
.label-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:3px solid var(--label-line); }
.label-logo { height:26px; width:auto; --logo-w:var(--nav); --logo-s:var(--blue); }
.title-logo { display:block; margin:2px 0 14px; }
.label h1, .label h2 { font:800 clamp(52px, 7vw, 82px)/.92 var(--display); letter-spacing:-.035em; margin:0 0 10px; outline:none; }
/* the game's name is its logo */
.chip-egg img { display:block; height:17px; width:auto; }
.label h2 { font-size:clamp(40px, 5vw, 58px); margin-top:12px; }
.lede { margin:0 0 14px; font-size:15px; color:#2B2F2F; -webkit-user-select:text; }
.keys { display:grid; gap:0; margin:0 0 16px; border-top:1px solid var(--label-line); }
.keys > div { display:grid; grid-template-columns:72px 1fr; align-items:center; padding:7px 0; border-bottom:1px solid var(--label-line); }
.keys dt { color:var(--ink-2); } .keys dd { margin:0; font-weight:600; }
.k-touch { display:none; }
@media (pointer:coarse) { .k-key { display:none; } .k-touch { display:inline; } }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; border-radius:100px; cursor:pointer;
  font:700 16px/1 var(--sans); border:1.5px solid transparent; transition:transform .15s var(--ease-out), background .15s;
}
.btn svg { width:19px; height:19px; }
.btn:active { transform:scale(.97); }
.btn-y { background:var(--btn-y); border-color:var(--btn-y-line); color:var(--ink); flex:1; box-shadow:0 3px 0 #C9A400; }
.btn-blue { background:var(--blue); color:#fff; flex:1; box-shadow:0 3px 0 var(--blue-deep); }
.btn-ghost { background:transparent; border-color:var(--ink); color:var(--ink); }
@media (hover:hover) {
  .btn-y:hover { background:var(--btn-y-hover); }
  .btn-blue:hover { background:var(--blue-deep); }
  .btn-ghost:hover { background:rgba(15,17,17,.06); }
}
.btn:disabled { opacity:.55; cursor:default; }
.label-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:16px; padding-top:12px; border-top:3px solid var(--label-line); }
.barcode { display:flex; align-items:stretch; height:38px; gap:0; flex:1; max-width:210px; }
.barcode i { display:block; background:var(--ink); }
.best { text-align:right; display:grid; gap:2px; }
.best small { color:var(--ink-2); }
.best b { font:400 20px/1 var(--mono); }
.back {
  position:fixed; left:var(--safe-l); bottom:var(--safe-b); display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:100px; background:var(--chip); color:#fff; text-decoration:none; font-weight:600; font-size:13px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.back svg { width:16px; height:16px; }

.label-sm { width:min(340px, 100%); }
.label-over { width:min(460px, 100%); }
.stamp {
  font:800 15px/1 var(--display); text-transform:uppercase; letter-spacing:.04em; color:var(--bad);
  border:3px solid var(--bad); border-radius:6px; padding:6px 10px; transform:rotate(-6deg); animation:stamp .5s var(--ease-drop) .3s both;
}
@keyframes stamp { from { transform:rotate(-6deg) scale(2.2); opacity:0; } }
.why { margin:0 0 12px; color:#2B2F2F; }
.big { display:flex; align-items:baseline; justify-content:space-between; padding:10px 0; border-top:3px solid var(--label-line); border-bottom:1px solid var(--label-line); }
.big small { color:var(--ink-2); }
.big b { font:800 52px/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); margin:0 0 14px; }
.stats > div { padding:9px 0 8px; border-bottom:1px solid var(--label-line); }
.stats > div:not(:nth-child(3n+1)) { padding-left:12px; border-left:1px solid var(--label-line); }
.stats dt { font:400 10px/1.2 var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.stats dd { margin:3px 0 0; font:400 17px/1.1 var(--mono); }
.save { margin:0 0 4px; }
.save label { display:block; margin-bottom:7px; color:var(--ink-2); }
.save-row { display:flex; gap:8px; }
.save-row input {
  flex:1; min-width:0; height:50px; padding:0 14px; border:2px solid var(--ink); border-radius:10px; background:#fff;
  font:600 17px/1 var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none; -webkit-user-select:text; user-select:text;
}
.save-row input:focus { outline:3px solid var(--blue-hi); outline-offset:1px; }
.save-row .btn { flex:0 0 auto; }
.save-msg { min-height:1.4em; margin:6px 0 4px; font-size:14px; font-weight:600; }
.save-msg.ok { color:#067D62; } .save-msg.bad { color:#B12704; }
.rank-hint { margin:0 0 12px; font-size:13px; color:var(--ink-2); }
.rank-hint:empty { display:none; }

/* ---------- leaderboard ---------- */
.board { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); background:rgba(10,16,36,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.board[hidden] { display:none; }
.board-card {
  width:min(520px, 100%); max-height:calc(100dvh - 28px); display:flex; flex-direction:column;
  background:var(--nav); color:#fff; border-radius:18px; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; animation:land .5s var(--ease-drop) both;
}
.board-top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 10px; }
.board-top h2 { margin:0; font:800 34px/1 var(--display); letter-spacing:-.03em; outline:none; }
.x { width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:none; font-size:26px; line-height:1; cursor:pointer; color:#fff; }
.tabs { display:flex; gap:6px; padding:0 20px 12px; }
.tabs button { flex:1; height:40px; border-radius:100px; border:1px solid rgba(255,255,255,.22); background:none; color:#fff; font-weight:700; cursor:pointer; }
.tabs button[aria-selected="true"] { background:#fff; color:var(--nav); border-color:#fff; }
.board-cols, .board-rows li { display:grid; grid-template-columns:40px 1fr 80px 96px; align-items:center; gap:8px; }
.board-cols { padding:8px 20px; font:400 10px/1 var(--stencil); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.board-cols span:nth-child(3), .board-cols span:nth-child(4) { text-align:right; }
.board-list { overflow:auto; flex:1; min-height:160px; -webkit-user-select:text; user-select:text; }
.board-rows { list-style:none; margin:0; padding:6px 10px 10px; }
.board-rows li { padding:10px; border-radius:10px; }
.board-rows li:nth-child(even) { background:rgba(255,255,255,.04); }
.board-rows .rk { font:400 14px/1 var(--mono); color:rgba(255,255,255,.7); text-align:center; }
.board-rows .nm { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-rows .dl { font:400 13px/1 var(--mono); color:rgba(255,255,255,.7); text-align:right; }
.board-rows .sc { font:800 19px/1 var(--display); text-align:right; font-variant-numeric:tabular-nums; }
.board-rows .top .rk { display:grid; place-items:center; width:28px; height:28px; margin:0 auto; border-radius:50%; color:var(--nav); font-weight:700; }
.board-rows .top1 .rk { background:#FFD814; } .board-rows .top2 .rk { background:#D9DEE8; } .board-rows .top3 .rk { background:#E2A06A; }
.board-rows li.me { background:rgba(0,82,255,.45); outline:2px solid var(--blue-hi); }
.board-note { margin:0; padding:28px 24px; text-align:center; color:rgba(255,255,255,.8); }
.board-fine { margin:0; padding:10px 20px 16px; font-size:12px; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.1); }

@media (prefers-reduced-motion:reduce) {
  .label, .board-card, .stamp { animation:none; }
  .card.show { animation:none; }
}

/* ---------- the game's own HUD ---------- */
.hud-l .chip svg, .hud-r .chip svg { width:20px; height:20px; flex:none; }
.chip b { font:800 20px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.chip-time b { font-size:28px; min-width:4.6em; }
.chip-zone { flex-direction:column; align-items:flex-start; gap:3px; }
.chip-zone small { opacity:.75; font-size:10px; }
.chip-zone b { font-size:16px; }
.hud-r { right:calc(var(--safe-r) + 162px); gap:8px; }
.corner .hud-btn { display:none; }
body.playing .corner .hud-btn, .corner .mute { display:grid; }

/* stop title cards: big, brief, centred */
.card { position:fixed; left:50%; top:24%; z-index:6; pointer-events:none; text-align:center; transform:translate(-50%, 0); opacity:0; width:min(92vw, 760px); color:#fff; }
.card small { display:block; margin-bottom:8px; opacity:.85; text-shadow:0 2px 10px rgba(10,16,36,.5); }
.card h2 { margin:0; font:800 clamp(44px, 8vw, 96px)/.9 var(--display); letter-spacing:-.035em; text-shadow:0 4px 0 rgba(10,16,36,.45), 0 16px 40px rgba(10,16,36,.4); }
.card p { margin:12px 0 0; font:400 clamp(20px, 2.6vw, 28px)/1.1 'Caveat', 'Marker Felt', 'Bradley Hand', 'Segoe Print', cursive; text-shadow:0 2px 10px rgba(10,16,36,.6); }
.card.show { animation:card 3.6s var(--ease-out) both; }
@keyframes card { 0% { opacity:0; transform:translate(-50%, 18px) scale(.96); } 12% { opacity:1; transform:translate(-50%, 0) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -8px); } }

/* touch: a stick bottom left, Bomb bottom right */
.touch { position:fixed; inset:0; z-index:5; pointer-events:none; display:none; }
body.playing.touchy .touch { display:block; }
.stick { position:absolute; left:calc(var(--safe-l) + 18px); bottom:calc(var(--safe-b) + 18px); width:132px; height:132px; border-radius:50%; background:rgba(10,16,36,.28); border:2px solid rgba(255,255,255,.35); }
.stick i { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(10,16,36,.3); }
.stick.dyn { transition:none; }
.tbtn { position:absolute; pointer-events:auto; border:none; border-radius:50%; color:var(--ink); font:800 15px/1 var(--display); letter-spacing:.01em; touch-action:none; -webkit-user-select:none; user-select:none; }
.tbtn-bomb { right:calc(var(--safe-r) + 16px); bottom:calc(var(--safe-b) + 26px); width:96px; height:96px; background:var(--btn-y); box-shadow:0 4px 0 #C9A400, 0 10px 24px rgba(10,16,36,.3); font-size:17px; }
.tbtn-det { right:calc(var(--safe-r) + 124px); bottom:calc(var(--safe-b) + 18px); width:70px; height:70px; background:var(--good); box-shadow:0 3px 0 #1B9E6C, 0 8px 20px rgba(10,16,36,.3); font-size:13px; }
.tbtn[hidden] { display:none; }
.tbtn.on { transform:scale(.94); filter:brightness(.92); }

@media (max-width:720px), (max-height:520px) and (orientation:landscape) {
  .chip { padding:6px 10px; }
  .chip-time b { font-size:22px; }
  .chip-zone { display:none; }
  .hud-r { right:auto; left:var(--safe-l); top:calc(var(--safe-t) + 50px); flex-direction:row; }
  .hud-r .chip b { font-size:16px; }
  .hud-btn { width:42px; height:42px; }
  .card { top:18%; }
  .toast { top:68%; }
}
@media (max-width:720px) {
  .screen-title { align-items:flex-end; justify-content:center; padding-left:var(--safe-l); padding-bottom:calc(var(--safe-b) + 46px); }
  .label { padding:14px 16px 14px; max-height:calc(100dvh - 120px); }
  .label h1 { font-size:50px; }
  .lede { font-size:14px; }
  .keys { display:none; }
  .label-foot { margin-top:12px; }
  .back { bottom:var(--safe-b); left:50%; transform:translateX(-50%); }
  .big b { font-size:44px; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .stats > div:not(:nth-child(3n+1)) { padding-left:0; border-left:0; }
  .stats > div:nth-child(even) { padding-left:12px; border-left:1px solid var(--label-line); }
  .save-row { flex-wrap:wrap; }
  .save-row input { flex:1 1 100%; }
  .save-row .btn { flex:1; }
  .board-cols, .board-rows li { grid-template-columns:34px 1fr 54px 92px; }
  .board-top h2 { font-size:28px; }
}
@media (max-height:520px) and (orientation:landscape) {
  .label { max-height:calc(100dvh - 20px); padding:12px 16px; }
  .label h1 { font-size:42px; } .keys { display:none; }
}

/* the signing form: name, then the optional private wallet */
.save { display:grid; gap:7px; }
.save label { margin:4px 0 0; }
.save input {
  width:100%; height:48px; padding:0 14px; border:2px solid var(--ink); border-radius:10px; background:#fff;
  font:600 16px/1 var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none; -webkit-user-select:text; user-select:text;
}
.save input#walletIn { font:400 14px/1 var(--mono); }
.save input:focus { outline:3px solid var(--blue-hi); outline-offset:1px; }
.save input[aria-invalid="true"] { border-color:var(--bad); }
.wallet-note { margin:0 0 4px; font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.save .btn { width:100%; margin-top:2px; }
.board-rows .ht { font:400 13px/1 var(--mono); color:rgba(255,255,255,.8); text-align:right; }
.board-rows .done { font-style:normal; font:400 9px/1 var(--stencil); letter-spacing:.1em; text-transform:uppercase; color:var(--nav); background:var(--good); padding:2px 5px; border-radius:4px; margin-left:6px; vertical-align:2px; }

/* ---------- Boxed In ---------- */
.hud-c { position:absolute; top:var(--safe-t); left:50%; transform:translateX(-50%); }
.chip-score { flex-direction:column; align-items:center; gap:3px; padding:6px 18px 7px; }
.chip-score b { font-size:26px; min-width:3.5em; text-align:center; }
.hud-r { top:calc(var(--safe-t) + 58px); right:var(--safe-r); flex-direction:column; align-items:flex-end; gap:6px; }
.kit { padding:5px 10px; gap:6px; }
.kit svg { width:18px !important; height:18px !important; }
.kit b { font-size:17px; min-width:1.1em; }
.kit-flag b { font:400 10px/1 var(--stencil); letter-spacing:.12em; text-transform:uppercase; color:var(--good); }
.kit-flag[hidden] { display:none; }
.kit.bump { animation:bump .5s var(--ease-drop); }
@keyframes bump { 40% { transform:scale(1.25); background:rgba(0,82,255,.85); } }
.chip-time.low b { color:#FFB3BB; }
.chip-time.low { animation:low 1s steps(2) infinite; }
@keyframes low { 50% { background:rgba(177,39,4,.75); } }

/* how many pests are left: a row of dots under the score */
.pests { position:absolute; top:calc(var(--safe-t) + 66px); left:50%; transform:translateX(-50%); display:flex; gap:5px; }
.pests i { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(10,16,36,.5); transition:transform .3s var(--ease-drop), opacity .3s; }
.pests i.gone { transform:scale(.4); opacity:.25; }
.pests.open i { background:var(--good); }

/* points that float up from where a pest was caught */
.pops { position:fixed; inset:0; pointer-events:none; z-index:6; overflow:hidden; }
.pop { position:absolute; transform:translate(-50%, -50%); font:800 24px/1 var(--display); color:#fff; letter-spacing:-.01em;
  text-shadow:0 2px 0 rgba(10,16,36,.6), 0 6px 18px rgba(10,16,36,.4); animation:pop 1.1s var(--ease-out) forwards; white-space:nowrap; }
.pop.chain { color:var(--btn-y); font-size:30px; }
.pop.item { color:#C6FFE6; font-size:20px; }
@keyframes pop { 0% { opacity:0; transform:translate(-50%, -30%) scale(.6); } 15% { opacity:1; transform:translate(-50%, -60%) scale(1.1); } 100% { opacity:0; transform:translate(-50%, -190%) scale(1); } }

@media (max-width:720px), (max-height:520px) and (orientation:landscape) {
  .hud-l { flex-direction:row; }
  .hud-r { top:calc(var(--safe-t) + 52px); }
  .hud-c { top:auto; bottom:calc(var(--safe-b) + 8px); }
  .touchy.playing .hud-c { bottom:auto; top:calc(var(--safe-t) + 52px); left:var(--safe-l); transform:none; }
  .chip-score { flex-direction:row; padding:6px 10px; }
  .chip-score b { font-size:18px; min-width:0; }
  .pests { top:calc(var(--safe-t) + 96px); left:var(--safe-l); transform:none; }
  .kit { padding:4px 8px; }
  .kit b { font-size:15px; }
}

/* ---------- the intro: "A DCAT game" ----------
   DCAT's own type (Lilita One, cream with the kraft stacked shadow from
   catwifbox.delivery) on black with a warm glow, then the whole card
   fades to show the camera pulling back from the cat's eyes. */
.intro { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:radial-gradient(ellipse 55% 60% at 50% 50%, #3a2212 0%, #160c06 55%, #000 100%); transition:opacity .55s ease, visibility .55s; }
.intro[hidden] { display:none; }
.intro.out { opacity:0; visibility:hidden; transform:scale(1.05); transform-origin:50% 62%; transition:opacity .55s ease, transform .7s ease-out, visibility .7s; }
.intro-in { display:grid; justify-items:center; gap:22px; transition:transform .65s cubic-bezier(.2,.9,.25,1); }
.intro.cat .intro-in { transform:translateY(-30vh) scale(.6); }
.intro-coin { width:min(150px, 30vw); height:auto; border-radius:50%; opacity:0; transform:translateY(-40px) scale(.6) rotate(-25deg); box-shadow:0 0 70px rgba(240,137,47,.35); }
.intro-line { margin:0; font:400 clamp(44px, 7.6vw, 112px)/1 'Lilita One', var(--display); color:#FFF8EC; letter-spacing:.01em; white-space:nowrap; }
.intro-line span { display:inline-block; opacity:0; transform:translateY(40px) scale(.9); text-shadow:0 0 0 #FFF8EC, .05em .05em 0 #F0892F, .1em .1em 0 #A8773F; }
.intro-line span:nth-child(2) { color:#F0892F; text-shadow:0 0 0 #FFF8EC, .05em .05em 0 #FFF8EC, .1em .1em 0 #A8773F; }
.intro-skip { position:absolute; bottom:var(--safe-b); left:50%; transform:translateX(-50%); font:400 11px/1 var(--stencil); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,248,236,.4); opacity:0; white-space:nowrap; }
.intro.go .intro-coin { animation:introCoin .9s cubic-bezier(.34,1.56,.64,1) .15s forwards; }
.intro.go .intro-line span { animation:introWord .7s cubic-bezier(.34,1.56,.64,1) forwards; }
.intro.go .intro-line span:nth-child(1) { animation-delay:.55s; }
.intro.go .intro-line span:nth-child(2) { animation-delay:.68s; }
.intro.go .intro-line span:nth-child(3) { animation-delay:.81s; }
.intro.go .intro-skip { animation:introFade .6s ease 1.2s forwards; }
@keyframes introCoin { to { opacity:1; transform:none; } }
@keyframes introWord { to { opacity:1; transform:none; } }
@keyframes introFade { to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .intro.go .intro-coin, .intro.go .intro-line span { animation:introFade .4s ease forwards; transform:none; }
}

/* then DCAT pops in under the words: a stretch up, a squash on landing,
   a ring and a burst of packing peanuts, before the card zooms into the
   cat and dissolves onto the 3D cat standing in the same place */
.intro-cat { position:absolute; left:50%; bottom:6vh; height:62vh; aspect-ratio:415 / 900; transform:translateX(-50%); pointer-events:none; }
.intro-cat img { position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 100%; opacity:0; transform:translateY(25%) scale(.3, .1); filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.intro-glow { position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1; transform:translate(-50%, -50%) scale(.4); border-radius:50%; background:radial-gradient(closest-side, rgba(240,137,47,.45), rgba(240,137,47,0)); opacity:0; }
.intro-ring { position:absolute; left:50%; top:58%; width:70%; aspect-ratio:1; border:5px solid #F0892F; border-radius:50%; transform:translate(-50%, -50%) scale(.2); opacity:0; }
.intro-bits { position:absolute; left:50%; top:52%; }
.intro-bits i { position:absolute; left:0; top:0; opacity:0; }
.intro-bits .nut { width:1.3vh; height:2.1vh; margin:-1vh 0 0 -.65vh; border-radius:1vh; background:#FFF8EC; box-shadow:inset -.25vh -.3vh 0 rgba(168,119,63,.35); }
.intro-bits .box { width:1.9vh; height:1.9vh; margin:-.95vh 0 0 -.95vh; border-radius:.3vh; background:#C9975C; box-shadow:inset 0 0 0 .25vh rgba(43,26,15,.25); }
.intro.cat .intro-cat img { animation:catPop .85s cubic-bezier(.3,.7,.4,1) .12s forwards; }
.intro.cat .intro-glow { animation:catGlow 1.1s ease-out .2s forwards; }
.intro.cat .intro-ring { animation:catRing .7s ease-out .38s forwards; }
.intro.cat .intro-bits i { animation:catBit .95s cubic-bezier(.15,.7,.35,1) calc(.38s + var(--d)) forwards; }
@keyframes catPop {
  0% { opacity:0; transform:translateY(25%) scale(.3, .1); }
  30% { opacity:1; transform:translateY(-9%) scale(.88, 1.16); }
  50% { transform:translateY(0) scale(1.14, .86); }
  66% { transform:translateY(-2%) scale(.95, 1.06); }
  82% { transform:translateY(0) scale(1.03, .97); }
  100% { opacity:1; transform:none; }
}
@keyframes catGlow { 0% { opacity:0; transform:translate(-50%, -50%) scale(.4); } 40% { opacity:1; } 100% { opacity:.7; transform:translate(-50%, -50%) scale(1); } }
@keyframes catRing { 0% { opacity:.9; transform:translate(-50%, -50%) scale(.25); } 100% { opacity:0; transform:translate(-50%, -50%) scale(1.6); } }
@keyframes catBit {
  0% { opacity:1; transform:translate(0, 0) rotate(0) scale(.4); }
  70% { opacity:1; }
  100% { opacity:0; transform:translate(var(--x), calc(var(--y) + 9vh)) rotate(var(--r)) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .intro.cat .intro-cat img { animation:introFade .4s ease forwards; transform:none; }
  .intro.cat .intro-ring, .intro.cat .intro-bits i { animation:none; }
  .intro.out { transform:none; }
}