/* Beat Lab · a phone-shaped trainer. Dark violet inside, bright Beatland page around it. */
:root { --cream:#fff6e2; --ink:#2b1b5e; --ink2:#5b4a99; --o:#34107f; --os:#2a0f6b; --lime:#4efa50; --sun:#ffd84a; --pink:#ff5fae; --c1:#ff7a45; --s1:#b8431a; --c2:#e0a800; --s2:#8a6500; --c3:#ec4899; --s3:#9d1a5c; --cx:#8b5cf6; --sx:#4c1d95; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { background:var(--cream); color:var(--ink); font:400 1rem/1.5 Rubik,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100svh; display:flex; flex-direction:column; }
a { color:inherit; } button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; } img { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--lime); outline-offset:2px; border-radius:10px; }
.top { display:flex; align-items:center; gap:14px; padding:14px clamp(14px,3vw,32px); }
.top .wm { font-size:1.6rem; } .top .back { margin-left:auto; font:600 .95rem/1 Fredoka,sans-serif; text-decoration:none; color:var(--ink2); padding:10px 14px; border-radius:999px; background:#fff; box-shadow:0 3px 0 rgba(43,27,94,.15); }
.coinchip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px 8px 10px; border-radius:999px; background:linear-gradient(180deg,#fff2b8,#ffd84a); border:3px solid var(--o); box-shadow:0 4px 0 var(--os); font:700 1rem/1 Fredoka,sans-serif; color:#4a3100; text-decoration:none; }
.ci { display:inline-block; width:1.2em; height:1.2em; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b0 0 12%,#ffd84a 13% 62%,#f6b73c 63% 100%); border:2px solid #c98a12; position:relative; flex:none; } .ci::after { content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); border-left:.25em solid transparent; border-right:.25em solid transparent; border-bottom:.4em solid #c98a12; }

.lab { flex:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px,5vw,80px); max-width:1100px; width:100%; margin:0 auto; padding:10px clamp(14px,3vw,32px) 30px; }
.labtx h1 { font:700 clamp(2.6rem,5vw,4rem)/1 Fredoka,sans-serif; } .labtx .sub { margin:16px 0 0; font-size:1.1rem; color:var(--ink2); max-width:460px; } .labtx .sub b { color:var(--ink); }
.how { margin:22px 0 0; padding-left:20px; color:var(--ink2); display:grid; gap:8px; } .how b { color:var(--ink); font-family:Fredoka,sans-serif; }
.note { margin:22px 0 0; font-size:.92rem; color:var(--ink2); max-width:460px; }
.credits { text-align:center; font-size:.78rem; color:var(--ink2); padding:0 20px 24px; max-width:720px; margin:0 auto; }

/* phone */
.phone { --ph:clamp(660px,calc(100svh - 120px),780px); position:relative; display:flex; flex-direction:column; gap:8px; width:calc(var(--ph) * .54); height:var(--ph); padding:14px 12px; border-radius:46px; background:linear-gradient(180deg,#4a2aa8 0%,#2a1670 45%,#1a0c45 100%); border:3px solid var(--o); box-shadow:0 8px 0 var(--os),0 30px 56px rgba(8,0,40,.35),inset 0 3px 0 rgba(255,255,255,.25); overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; color:#fff; contain:layout paint; }
.pbar { display:flex; align-items:center; gap:8px; flex:none; } .pbar b { flex:1; font:700 1.1rem/1 Fredoka,sans-serif; letter-spacing:.06em; color:#caff6a; text-shadow:0 2px 0 var(--os); }
.pcoins { display:inline-flex; align-items:center; gap:5px; font:700 .9rem/1 Fredoka,sans-serif; color:#ffd84a; background:rgba(0,0,0,.25); padding:6px 10px 6px 7px; border-radius:999px; } .pcoins em { font-style:normal; }
.mini { width:40px; height:40px; border-radius:50%; border:3px solid var(--o); background:radial-gradient(120% 120% at 30% 18%,#e6c6ff 0%,#a45cff 42%,#6428d6 100%); box-shadow:0 4px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.6); display:grid; place-content:center; flex:none; padding:0; } .mini:active { transform:translateY(3px); box-shadow:0 1px 0 var(--os); }
#bSnd .x, #bFull .out { display:none; } #bSnd.off .x { display:block; } #bSnd.off .w1 { display:none; } #bFull.on .in { display:none; } #bFull.on .out { display:block; }
.pcount { display:flex; align-items:center; gap:8px; flex:none; padding:7px 12px; border-radius:99px; background:rgba(14,6,44,.65); border:1px solid rgba(255,255,255,.18); white-space:nowrap; overflow:hidden; }
.pcount .cl { font:600 .58rem/1 Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#d9ceff; } .pcount b { font:700 1.1rem/1 Fredoka,sans-serif; color:var(--lime); font-variant-numeric:tabular-nums; }
.pcount .cs { display:flex; gap:7px; font:600 .64rem/1 Fredoka,sans-serif; color:#cfc4ff; } .pcount .cs i { font-style:normal; } .pcount .cs em { font-style:normal; color:#fff; }
.cells { display:flex; gap:4px; margin-left:auto; } .cells i { width:12px; height:9px; border-radius:99px; background:rgba(255,255,255,.16); transition:.3s; } .cells i.on { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.pcount.bump { animation:cb .18s; } @keyframes cb { 50% { transform:scale(1.04); } }

/* stage: face + chain + score */
.stage { position:relative; flex:none; height:clamp(90px,16%,130px); border-radius:22px; background:radial-gradient(120% 100% at 50% 100%,#1b0c4a,#0d0630); border:2px solid rgba(255,255,255,.12); overflow:hidden; }
.sdots { position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px) 0 0/12px 12px; opacity:.5; }
.stage .idle { position:absolute; left:10px; top:50%; height:84%; width:auto; transform:translateY(-50%); transition:opacity .2s; } .stage .idle.off { opacity:0; }
.stage .burst { position:absolute; left:4px; top:50%; height:96%; width:auto; transform:translateY(-50%) scale(.4); opacity:0; will-change:transform,opacity; } .stage .burst.on { opacity:1; transform:translateY(-50%) scale(1); }
.ring { position:absolute; left:22%; top:50%; width:64px; aspect-ratio:1; border-radius:50%; border:3px solid var(--lime); opacity:0; transform:translate(-50%,-50%) scale(.3); pointer-events:none; } .ring.r2 { border-color:#ff5fae; }
.chain { position:absolute; left:34%; right:8px; top:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; align-content:center; }
.cch { width:30px; height:36px; border-radius:10px; display:grid; place-items:center; font:700 .72rem/1 Fredoka,sans-serif; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.3); opacity:.85; transition:transform .1s,opacity .1s,background .15s; background:var(--cx); }
.chain.long .cch { width:24px; height:32px; border-radius:8px; font-size:.6rem; }
.cch.PU { background:var(--c1); } .cch.TS { background:var(--c2); color:#2a1a00; } .cch.KE { background:var(--c3); }
.cch.now { transform:translateY(-4px) scale(1.14); opacity:1; outline:3px solid var(--lime); } .cch.done { opacity:.5; }
.cch.hit { outline:3px solid var(--lime); opacity:1; } .cch.good { outline:3px solid var(--sun); opacity:1; } .cch.miss { outline:3px solid #ff4d4d; opacity:.6; filter:saturate(.4); }
.stage.haschain .idle { opacity:0; }
.score { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:4px; background:rgba(13,6,48,.9); z-index:3; } .score[hidden] { display:none; } .score b { font:700 2rem/1 Fredoka,sans-serif; color:var(--sun); letter-spacing:.1em; text-shadow:0 3px 0 #7a4d00; } .score span { font:600 .78rem/1.3 Fredoka,sans-serif; color:#d9ceff; padding:0 10px; }

/* modes, patterns, speed */
.modes { flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; border-radius:16px; background:rgba(0,0,0,.3); }
.md { padding:9px 4px; border-radius:12px; font:700 .76rem/1 Fredoka,sans-serif; letter-spacing:.05em; color:#cfc4ff; } .md.on { background:linear-gradient(180deg,#f0ff9a,#42e22b); color:#1b0a55; box-shadow:0 3px 0 var(--os); }
.pat { flex:none; display:flex; flex-direction:column; gap:6px; } .pat[hidden] { display:none; }
.pats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.pt { padding:7px 4px 6px; border-radius:12px; background:rgba(255,255,255,.1); border:2px solid transparent; display:grid; gap:2px; text-align:center; } .pt b { font:700 .74rem/1 Fredoka,sans-serif; } .pt span { font:600 .58rem/1 Fredoka,sans-serif; letter-spacing:.08em; color:#cfc4ff; }
.pt.on { border-color:var(--lime); background:rgba(78,250,80,.14); } .pt.choco { --k:#ff5a36; } .pt.cookie { --k:#8e4dff; } .pt.coco { --k:#2d9bff; } .pt b { color:#fff; } .pt::before { content:''; width:100%; height:4px; border-radius:4px; background:var(--k); margin-bottom:2px; }
.speed { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .speed button { padding:6px; border-radius:10px; font:600 .66rem/1 Fredoka,sans-serif; letter-spacing:.06em; color:#cfc4ff; background:rgba(255,255,255,.08); } .speed button.on { background:rgba(255,255,255,.22); color:#fff; }

.seqrow { flex:none; height:32px; padding:0 10px; display:flex; align-items:center; gap:5px; overflow:hidden; justify-content:flex-end; border-radius:99px; background:rgba(0,0,0,.25); position:relative; }
.phone.lesson .seqrow { display:none; }
.seqrow:empty::before { content:'your taps'; position:absolute; left:0; right:0; text-align:center; font:600 .66rem/32px Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#8d7dd8; }
.chip { flex:none; min-width:32px; height:24px; padding:0 8px; border-radius:99px; display:grid; place-items:center; font:700 .72rem/1 Fredoka,sans-serif; letter-spacing:.04em; background:var(--cx); } .chip.PU { background:var(--c1); } .chip.TS { background:var(--c2); color:#2a1a00; } .chip.KE { background:var(--c3); }
.msg { flex:none; text-align:center; font:600 .9rem/1.2 Fredoka,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em; }

/* pads */
.pads { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:8px; }
.pad { position:relative; display:grid; place-content:center; justify-items:center; gap:2px; border-radius:18px; color:#fff; font:700 clamp(1.2rem,calc(var(--ph) * .034),1.8rem)/1 Fredoka,sans-serif; letter-spacing:.04em; background:var(--c); box-shadow:0 5px 0 var(--sh); transition:transform .06s; touch-action:none; will-change:transform; -webkit-touch-callout:none; min-height:0; overflow:hidden; }
.pad img { height:clamp(30px,calc(var(--ph) * .075),56px); width:auto; pointer-events:none; -webkit-user-drag:none; filter:drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.pad kbd { position:absolute; top:6px; right:8px; font:600 .6rem/1 Fredoka,sans-serif; background:rgba(0,0,0,.22); border-radius:7px; padding:3px 6px; }
.pad.PU { --c:var(--c1); --sh:var(--s1); } .pad.TS { --c:var(--c2); --sh:var(--s2); color:#2a1a00; } .pad.KE { --c:var(--c3); --sh:var(--s3); } .pad.X { --c:var(--cx); --sh:var(--sx); font-size:clamp(1rem,calc(var(--ph) * .03),1.5rem); } .pad.X small { font:600 .55rem/1 Fredoka,sans-serif; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.pad.hit, .pad:active { transform:translateY(5px); box-shadow:0 0 0 var(--sh); } .pad.hit::after { content:''; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.22); pointer-events:none; }
.pad.lk { --c:#3a2a80; --sh:#1c1050; background:linear-gradient(180deg,#43308f,#2a1a66); color:#8d7dd8; border:2px dashed rgba(255,255,255,.22); touch-action:manipulation; }
.pad.lk i { font:700 1.5rem/1 Fredoka,sans-serif; font-style:normal; color:#b5a3ff; } .pad.lk span { font:700 .5rem/1.2 Fredoka,sans-serif; letter-spacing:.1em; color:#8d7dd8; text-align:center; padding:0 4px; text-transform:uppercase; }
.pad.shake { animation:shk .32s; } @keyframes shk { 20% { transform:translateX(-5px); } 45% { transform:translateX(5px); } 70% { transform:translateX(-3px); } }
.pad.cue { outline:4px solid var(--lime); outline-offset:-4px; }

.ctrl { flex:none; display:flex; gap:6px; }
.pill { flex:1; min-width:0; padding:11px 6px; border-radius:999px; border:3px solid var(--o); font:700 .7rem/1 Fredoka,sans-serif; letter-spacing:.04em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.7); transition:transform .1s; }
.pill.g { background:linear-gradient(180deg,#f0ff9a 0%,#a6ff4a 36%,#42e22b 100%); color:#1b0a55; } .pill.w { background:linear-gradient(180deg,#fff,#e8deff 60%,#cfc0f5); color:#2a1a66; } .pill.k { background:linear-gradient(180deg,#dcb1ff 0%,#9d52ff 44%,#6a2bd9 100%); color:#fff; text-shadow:0 2px 0 var(--os); }
.pill.r { background:linear-gradient(180deg,#ffb3c7 0%,#ff5fae 44%,#d11f7a 100%); color:#fff; text-shadow:0 2px 0 #7a0f45; }
.pill:active { transform:translateY(3px); box-shadow:0 1px 0 var(--os); } .pill[hidden] { display:none; }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; } .confetti span { position:absolute; top:-20px; border-radius:3px; animation:fall linear forwards; } @keyframes fall { to { transform:translateY(110%) rotate(720deg); } }

/* full screen */
html.labfull, html.labfull body { overflow:hidden !important; }
.phone.full { position:fixed; inset:0; z-index:300; width:100%; height:100dvh; --ph:100dvh; max-width:none; border-radius:0; border:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); align-items:center; touch-action:none; box-shadow:none; }
.phone.full > * { width:min(100%,560px); }
@media (max-width:1000px) { .lab { grid-template-columns:1fr; justify-items:center; gap:14px; padding-top:0; } .labtx { text-align:center; } .labtx .sub, .labtx .note { margin-left:auto; margin-right:auto; } .how { display:none; } .labtx h1 { font-size:2.2rem; } .labtx .sub { font-size:1rem; } .note { display:none; } .phone { --ph:clamp(600px,calc(100svh - 150px),780px); width:min(100%,calc(var(--ph) * .56)); } }
@media (max-width:520px) { .labtx { display:none; } .phone { width:100%; --ph:clamp(560px,calc(100svh - 86px),800px); height:var(--ph); padding:12px 10px; border-radius:34px; } .pad kbd { display:none; } .top { padding:10px 12px; } .top .wm { font-size:1.35rem; } .top .back { padding:9px 11px; font-size:.86rem; } .credits { padding-bottom:16px; } }
@media (prefers-reduced-motion:reduce) { .pad.shake, .pcount.bump { animation:none; } }