body.play{min-height:100dvh}.play-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:56px;box-sizing:border-box;padding:env(safe-area-inset-top,0px) max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));background:var(--red);border-bottom:3px solid var(--fg)}.play-bar h1{margin:0;font-family:var(--display);font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-bar .hud{margin-left:auto;font-family:var(--display);font-weight:700;font-size:18px;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}.play-back,.play-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border-radius:var(--radius-pill);border:0;background:var(--scrim);color:var(--fg);text-decoration:none;font-weight:800;font-size:13px;padding:0 10px}.play-back svg,.play-btn svg{width:20px;height:20px}.play-btn[aria-pressed=true]{background:var(--gold);color:var(--ink)}@media(max-width:420px){.play-btn span{display:none}}.stage{position:relative;height:calc(100dvh - 56px);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#0b1e3f;outline:none}.play-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.play-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:#050c1f8c}.play-card{width:min(100%,440px);box-sizing:border-box;background:var(--ink);border:2px solid var(--gold);border-radius:var(--radius-xl);padding:20px;text-align:center;display:grid;gap:10px;max-height:100%;overflow:auto}.play-card h2{margin:0;font-family:var(--display);font-size:30px;color:var(--gold)}.play-card .how{margin:0;font-weight:700;color:#dfe6f2;line-height:1.45}.play-card .banner{margin:0;background:var(--panel);border:1px solid var(--gold);border-radius:var(--radius-m);padding:8px 10px;font-weight:800}.play-card .banner.ch{border-color:var(--green)}.play-card .best{margin:0;color:var(--muted);font-weight:700;font-size:13px}.play-card .score{margin:0;font-family:var(--display)}.play-card .score b{font-size:56px;color:var(--gold)}.play-card .score span{font-size:20px;color:var(--muted)}.play-card .notes{list-style:none;margin:0;padding:0;font-weight:700;display:grid;gap:4px}.play-card .name{display:grid;gap:4px;font-size:13px;font-weight:800;color:var(--muted)}.play-card .name input{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--panel-edge);border-radius:var(--radius-s);min-height:44px;padding:0 10px;text-align:center}.play-card .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.btn.big{min-height:56px;font-size:20px;padding:0 36px}.play-about{padding-top:24px}.tools{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;gap:6px;overflow-x:auto;padding:8px max(8px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));background:#08122ee6;border-top:1px solid var(--panel-edge);scrollbar-width:none}.tools button{flex:0 0 auto;min-width:48px;min-height:48px;border-radius:var(--radius-m);border:2px solid transparent;background:var(--panel);color:var(--fg);font-weight:800;font-size:12px;display:grid;place-items:center;padding:4px 8px}.tools button[aria-pressed=true]{border-color:var(--gold);background:#13284f}.tools .sep{flex:0 0 1px;background:var(--panel-edge);margin:4px 2px}.tools .swatch{width:36px;min-width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;border:3px solid rgba(255,255,255,.25)}.side-actions{position:absolute;z-index:4;right:10px;top:10px;display:flex;flex-direction:column;gap:8px}@media(max-width:520px){.play-bar:has(.hud:not(:empty)) h1{display:none}}.tools-stack{position:absolute;z-index:4;left:0;right:0;bottom:0}.tools-stack .tools{position:static}.tools-stack .tools.cats{padding-bottom:4px;border-top:1px solid var(--panel-edge)}.tools-stack .tools.cats button{min-height:36px;font-size:12px}.tools-stack .tools.choices{border-top:0}.visit-form{display:flex;gap:6px;align-items:center}.visit-form input{width:110px;min-height:40px;border-radius:var(--radius-m);border:1px solid var(--panel-edge);background:var(--panel);color:var(--fg);padding:0 10px;font:inherit}.sketch-actions{position:absolute;z-index:4;top:8px;left:8px;right:8px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.paper{position:absolute;inset:60px 8px 132px;display:grid;place-items:center}.sheet{position:relative;box-shadow:0 8px 30px #00000073;border-radius:6px;overflow:hidden;background:#fff}.sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.tools .size{width:48px;display:grid;place-items:center}.tools .size i{display:block;border-radius:50%;background:var(--fg)}.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:60dvh;overflow:auto;margin:12px 0}.pick-grid button{background:#fff;border:3px solid transparent;border-radius:var(--radius-m);padding:6px;color:#1c1c22;font-weight:800;font-size:13px}.pick-grid button:hover,.pick-grid button:focus-visible{border-color:var(--gold)}.pick-grid canvas,.pick-grid img{width:100%;height:auto;display:block}.fridge{background:linear-gradient(#dfe7f2,#c9d4e6);border-radius:var(--radius-l);padding:12px}.fridge figure{position:relative;margin:0;background:#fff;padding:6px;box-shadow:0 3px 8px #00000040;transform:rotate(var(--tilt, 0deg))}.fridge figure:before{content:"";position:absolute;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--magnet, #d7263d);box-shadow:0 2px 3px #0000004d}.fridge figure button.x{position:absolute;top:4px;right:4px;min-width:32px;min-height:32px;border-radius:50%;background:#1c1c22bf;color:#fff;border:0;padding:0}.play-card{animation:card-in .45s cubic-bezier(.3,1.5,.5,1) both;box-shadow:0 20px 60px #00000080}@keyframes card-in{0%{transform:translateY(24px) scale(.92);opacity:0}}.how-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.how-row figure{margin:0;display:grid;gap:4px}.how-row canvas{width:100%;height:auto;aspect-ratio:4 / 3;border-radius:12px;background:#13284f;border:2px solid rgba(255,255,255,.12)}.how-row figcaption{font-size:12px;font-weight:800;line-height:1.25;color:#dfe6f2}#playBtn{animation:breathe 1.6s ease-in-out infinite}@keyframes breathe{50%{box-shadow:0 0 0 10px #ffd56b38,0 0 30px #ffd56b59}}.countdown{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none;font-family:var(--display);font-size:min(34vw,220px);color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 10px 40px rgba(0,0,0,.5)}.countdown.pop{animation:count-pop .6s cubic-bezier(.3,1.6,.5,1) both}@keyframes count-pop{0%{transform:scale(2.2);opacity:0}35%{transform:scale(.9);opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}.play-card .score b{display:inline-block;font-variant-numeric:tabular-nums}.play-card .score b.land{animation:land .4s cubic-bezier(.3,1.8,.5,1)}@keyframes land{40%{transform:scale(1.25)}}.stars{margin:0;display:flex;justify-content:center;gap:10px;min-height:52px}.stars span{width:48px;height:48px;background:#ffffff24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:star-in .5s cubic-bezier(.3,1.8,.5,1) both}.stars span.on{background:linear-gradient(160deg,#fff3b0,#ffd56b 45%,#f2a51a)}@keyframes star-in{0%{transform:scale(0) rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.play-card,#playBtn,.countdown.pop,.stars span,.play-card .score b.land{animation:none}}@media(max-width:420px){#nextSongBtn{min-width:40px;padding:0 8px}}