:root{color-scheme:dark;--panel: rgba(6, 18, 37, .82);--panel-strong: rgba(6, 18, 37, .94);--border: rgba(112, 235, 255, .46);--text: #ffffff;--muted: #c7dded;--cyan: #23e6dd;--gold: #ffc857;--danger: #ff4aa8}@media not all and (prefers-color-scheme:light){:root{--panel: rgba(255, 255, 255, .78);--panel-strong: rgba(248, 251, 255, .94);--border: rgba(21, 124, 173, .38);--text: #05213f;--muted: #365473;--cyan: #047fa5;--gold: #b86d00;--danger: #c01f75}body{background:radial-gradient(circle at 12% 10%,rgba(73,190,230,.24),transparent 30%),radial-gradient(circle at 86% 82%,rgba(255,200,87,.18),transparent 32%),linear-gradient(145deg,#f8fbff,#dceeff 58%,#f5e6ff)}}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at 12% 10%,rgba(35,230,221,.32),transparent 30%),radial-gradient(circle at 86% 82%,rgba(255,200,87,.22),transparent 32%),radial-gradient(circle at 50% 20%,#277cc2,#122d63 35%,#08142a);touch-action:none;-webkit-user-select:none;user-select:none}button,input{font:inherit}button:disabled{cursor:not-allowed;filter:grayscale(.45);opacity:.65}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}#app{position:relative}canvas{display:block;width:100%;height:100%}.ui-root{position:absolute;inset:0;pointer-events:none;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))}.panel{pointer-events:auto;width:min(92vw,430px);margin:0 auto;padding:clamp(1rem,2.5vw,1.25rem);border:1px solid var(--border);border-radius:30px;background:linear-gradient(180deg,rgba(11,35,70,.92),var(--panel-strong));box-shadow:0 28px 82px #00000070,inset 0 0 42px #23e6dd1a,inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.menu-panel{width:min(94vw,480px)}.compact-panel{text-align:center}.eyebrow{margin:0 0 .45rem;text-align:center;color:var(--cyan);font-size:.74rem;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}.center-screen{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.title{margin:0 0 .35rem;text-align:center;font-size:clamp(3rem,13vw,5.8rem);line-height:.82;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 6px 0 #0b3f66,0 0 34px rgba(35,230,221,.82)}.title span{display:block;color:var(--gold);text-shadow:0 5px 0 #6a3000,0 0 28px rgba(255,200,87,.7)}.subtitle{margin:.5rem 0 1rem;text-align:center;color:var(--muted)}.quick-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:-.2rem 0 .9rem}.quick-tips span{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.35rem .6rem;background:#ffffff14;color:#eaffff;font-size:.78rem;font-weight:900}.row{display:flex;align-items:center;justify-content:space-between;gap:.65rem}.stack{display:grid;gap:.72rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:.9rem 0}.stat{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:.7rem .55rem;background:#ffffff12;text-align:center}.stat b{display:block;font-size:1.25rem}.stat small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}.btn{min-height:52px;border:0;border-radius:999px;color:#fff;font-weight:900;letter-spacing:.03em;padding:.75rem 1rem;background:linear-gradient(180deg,#35f0e4,#0b8fb5);box-shadow:0 8px #004460cc,0 0 22px #23e6dd47;cursor:pointer}.btn:active{transform:translateY(3px);box-shadow:0 5px #004460cc}.btn.secondary{background:linear-gradient(180deg,#60748f,#26364f);box-shadow:0 7px #050a16cc}.btn.danger{background:linear-gradient(180deg,#ff73b6,#cf236f);box-shadow:0 7px #58042ccc}.btn.small{min-height:44px;flex:1;padding:.55rem .85rem;font-size:.88rem}.hud{position:absolute;inset:0;pointer-events:none}.score{position:absolute;top:14px;left:50%;transform:translate(-50%);text-align:center;font-weight:1000;font-size:clamp(2.4rem,10vw,4.5rem);text-shadow:0 4px 12px rgba(0,0,0,.45)}.score small{display:block;margin-top:-.4rem;color:#def8ff;font-size:.75rem;font-weight:800}.top-left,.top-right{position:absolute;top:16px;display:grid;gap:.45rem;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.45)}.top-left{left:14px}.top-right{right:14px;align-items:end}.pill{display:inline-flex;align-items:center;gap:.3rem;min-height:34px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.35rem .65rem;background:#06122594;box-shadow:inset 0 0 16px #23e6dd14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pause{pointer-events:auto;width:50px;height:50px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#061225a8;color:#fff;font-size:1.2rem;font-weight:900}.progress{position:absolute;top:82px;left:50%;transform:translate(-50%);width:min(68vw,390px);display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:center;font-weight:900}.bar{height:16px;border-radius:999px;overflow:hidden;background:#050e1f99;border:1px solid rgba(255,255,255,.2)}.fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 16px #23e6ddb3}.combo{position:absolute;top:42%;right:6%;transform:rotate(-7deg);font-size:clamp(1.6rem,7vw,3.4rem);font-weight:1000;color:var(--gold);text-shadow:0 4px 0 #823405,0 0 16px rgba(255,116,38,.85);opacity:0;transition:opacity .16s,transform .16s}.combo.show{opacity:1;transform:rotate(-7deg) scale(1.05)}.hint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:min(88vw,430px);display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .9rem;text-align:center;padding:.75rem 1rem;border-radius:22px;background:#061225a8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);font-weight:900;color:#eaffff;animation:hintFade 4.8s ease 1.6s forwards}@keyframes hintFade{to{opacity:.36;transform:translate(-50%) translateY(10px)}}.grid-skins{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;max-height:48vh;overflow:auto;padding:.2rem}.skin-card{border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:.75rem;background:#ffffff12;color:var(--text);text-align:left;cursor:pointer}.skin-card b,.skin-card small,.skin-card span{display:block}.skin-card small{margin:.3rem 0;color:var(--muted)}.skin-card span{color:var(--gold);font-weight:900}.skin-card.selected{outline:2px solid var(--gold)}.setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;color:var(--muted);padding:.35rem 0}.setting span b{color:var(--text)}.setting input[type=checkbox]{width:1.45rem;height:1.45rem;accent-color:var(--cyan)}.setting input[type=range]{width:min(42vw,180px);accent-color:var(--cyan)}.hidden{display:none!important}.high-contrast{--cyan:#72ff62;--danger:#ffb000;--panel:rgba(0,0,0,.84)}body:has(#app.state-playing) .arcade-home{opacity:.24;transform:translateY(-8px)}body:has(#app.state-playing) .arcade-home:is(:hover,:focus-visible){opacity:1;transform:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.hint{animation:none}}@media(orientation:landscape)and (max-height:540px){.title{font-size:3.2rem}.panel{width:min(86vw,620px);padding:.85rem}.stats{margin:.45rem 0}.quick-tips,.hint{display:none}.score{font-size:2.4rem}.progress{top:62px}}@media(max-width:520px){.top-left{top:72px;left:10px}.score{top:12px}.progress{top:92px;width:min(64vw,320px)}.combo{right:4%}}.arcade-home{position:fixed;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));z-index:20;pointer-events:auto;color:#eaffff;text-decoration:none;font-weight:900;border:1px solid rgba(112,235,255,.45);border-radius:999px;padding:.45rem .75rem;background:#061225b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .18s ease,transform .18s ease}