/* ===== cassette mini kit styles (shared) ===== */
:root{--bg:#0b0b1a;--a:#ff3d81;--b:#27e0ff;--ink:#fff;--muted:rgba(255,255,255,.66);--panel:rgba(10,10,28,.58);
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
  --font:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hidden{opacity:0!important;pointer-events:none!important;visibility:hidden!important}
.screen,.overlay{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vmin,16px);
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);text-align:center;
  transition:opacity .28s ease,visibility 0s linear 0s}
.screen.hidden,.overlay.hidden{transition:opacity .28s ease,visibility 0s linear .28s}
.screen{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.05),rgba(4,4,16,.62) 80%)}
.overlay{background:rgba(5,5,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9;font-weight:800;font-size:clamp(22px,5vmin,40px);cursor:pointer}
.overlay small{display:block;font-weight:600;font-size:.5em;color:var(--muted);margin-top:.4em}
.title{margin:0;font-size:clamp(44px,12vmin,104px);font-weight:900;letter-spacing:-.025em;line-height:.92;text-transform:uppercase;
  background:linear-gradient(95deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45));animation:floaty 4s ease-in-out infinite}
.title.sm{font-size:clamp(34px,8.5vmin,70px);animation:none}
.tag{margin:0;color:var(--muted);font-weight:600;font-size:clamp(14px,2.6vmin,21px);letter-spacing:.02em}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(17px,3vmin,25px);
  padding:.85em 2.3em;margin-top:clamp(4px,1.5vmin,14px);border-radius:999px;color:#0c0c1c;background:linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 10px 34px -8px var(--a),inset 0 -4px 0 rgba(0,0,0,.18);transition:transform .12s ease,filter .12s;touch-action:manipulation}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08)}
.btn:active{transform:scale(.95)}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);font-size:clamp(13px,2.2vmin,18px);padding:.7em 1.6em}
.btn:focus-visible,.icon-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--panel);font-weight:700;font-size:clamp(12px,2.2vmin,17px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--b);box-shadow:0 0 10px var(--b)}
.kv{color:var(--muted);font-weight:700;letter-spacing:.14em;font-size:clamp(12px,2.2vmin,17px);text-transform:uppercase}
.kv b{color:var(--ink);font-size:1.4em;letter-spacing:0;margin-left:.3em}
.big{font-size:clamp(64px,19vmin,160px);font-weight:900;line-height:1;text-shadow:0 8px 40px rgba(0,0,0,.5)}
.hint{margin:0;color:var(--muted);font-weight:600;font-size:clamp(12px,2.1vmin,16px)}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:900;font-size:clamp(11px,2vmin,15px);letter-spacing:.12em;color:#0c0c1c;
  background:linear-gradient(90deg,#ffe14d,#ff9d2e);animation:wob 1s ease-in-out infinite}
#hud{position:fixed;z-index:3;top:calc(var(--sat) + 10px);left:0;right:0;display:flex;justify-content:center;pointer-events:none}
#score{font-size:clamp(34px,8vmin,64px);font-weight:900;text-shadow:0 4px 18px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.icon-btn{position:fixed;z-index:10;top:calc(var(--sat) + 10px);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:manipulation}
#mute{right:calc(var(--sar) + 10px)}
#pausebtn{left:calc(var(--sal) + 10px)}
.pop{animation:pop .28s ease-out}
.hl{color:var(--b)}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wob{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.title,.badge{animation:none}}
:root{--bg:#04040d;--a:#27e0ff;--b:#ff3d81}
#demo{position:fixed;bottom:calc(var(--sab) + 14px);left:50%;transform:translateX(-50%);z-index:4;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:#ffe14d;
  display:inline-flex;padding:6px 14px;border-radius:999px;background:var(--panel);font-weight:800;font-size:clamp(12px,2.2vmin,16px);box-shadow:inset 0 0 0 1px rgba(255,225,77,.45)}
.btn:disabled{opacity:.6;pointer-events:none}
#buy .btn:not(.ghost){background:linear-gradient(135deg,#ffe14d,#ff9d2e);box-shadow:0 10px 34px -8px #ff9d2e,inset 0 -4px 0 rgba(0,0,0,.18)}
#buy .tag{max-width:30em}
#buyerr{min-height:1.4em;color:#ff7a6a}
#pausebtn{left:calc(var(--sal) + 10px);top:auto;bottom:calc(var(--sab) + 10px)}
.hint b{color:var(--ink)}
.badge{margin-right:8px}