:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-deep:#1a0f4d;--bg-mid:#3b1d8f;--bg-glow:#7a3fe0;--glass:#ffffff14;--glass-strong:#ffffff24;--glass-border:#ffffff29;--gold-1:#fff4c2;--gold-2:#e9bb55;--gold-3:#a8701c;--text:#fff;--text-dim:#ebe1ffb8;--accent:#ffcf4d;--pink:#ff4fa0;--radius:18px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box}html,body{touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%;color:var(--text);font-family:var(--font);margin:0;overflow:hidden}body{background:radial-gradient(120% 60% at 50% 0%, #a05aff8c, transparent 60%), radial-gradient(90% 50% at 100% 100%, #ff50b440, transparent 60%), radial-gradient(80% 50% at 0% 80%, #3c78ff40, transparent 60%), linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);background-color:var(--bg-deep)}body:before,body:after{content:"";pointer-events:none;opacity:.35;background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fffc,#0000),radial-gradient(1px 1px at 90px 120px,#fff9,#0000),radial-gradient(2px 2px at 160px 60px,#ffe6a0b3,#0000),radial-gradient(1px 1px at 230px 180px,#ffffff80,#0000);background-size:260px 220px;animation:90s linear infinite drift;position:fixed;inset:-50%}body:after{opacity:.25;background-size:380px 320px;animation-duration:140s;animation-direction:reverse}@keyframes drift{to{transform:translate(260px,220px)}}@media (prefers-reduced-motion:reduce){body:before,body:after{animation:none}}#app{z-index:1;max-width:560px;height:100dvh;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr) auto;gap:8px;margin:0 auto;display:grid;position:relative;overflow:hidden}.hud-label{letter-spacing:.14em;color:var(--text-dim);font-size:.62rem;font-weight:800;display:block}.hud-top{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.level-badge{background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;justify-self:start;min-width:84px;padding:6px 10px 7px}.level-badge strong{font-size:1.15rem;font-weight:900;line-height:1.1;display:inline-block}.level-bar{background:#00000059;border-radius:99px;height:5px;margin-top:4px;overflow:hidden}.level-bar i{transform-origin:0;background:linear-gradient(90deg,#7af0ff,#b36bff,#ff5fb0);height:100%;transition:transform .35s ease-out;display:block;transform:scaleX(0)}.score-box{text-align:center}.score-box strong{font-variant-numeric:tabular-nums;background:linear-gradient(#fffbe6 10%,#ffd24d 60%,#ff9d2e);color:#0000;filter:drop-shadow(0 2px #3c146ee6);-webkit-background-clip:text;background-clip:text;font-size:clamp(1.6rem,7vw,2.1rem);font-weight:900;line-height:1;display:inline-block}.icon-btn{border:1px solid var(--glass-border);background:var(--glass);width:44px;height:44px;color:var(--text);touch-action:manipulation;cursor:pointer;border-radius:14px;justify-self:end;place-items:center;display:grid}.icon-btn svg{fill:currentColor;width:20px;height:20px}.tick{animation:.25s ease-out tick}@keyframes tick{40%{transform:scale(1.08)}}.pop{animation:.45s cubic-bezier(.2,1.6,.4,1) pop}@keyframes pop{30%{transform:scale(1.35)}}.play-area{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.play-inner{align-items:flex-start;gap:8px;display:flex}.board-frame{background:linear-gradient(145deg,#ffffff59,#ffffff0a 40%,#00000040),linear-gradient(160deg,#6b4fd8,#2a1a78);border-radius:20px;padding:6px;box-shadow:0 0 0 1px #ffffff1f,0 18px 40px #0a002899,0 0 50px #8c5aff59}#board-canvas{touch-action:none;will-change:transform;background:linear-gradient(#120a3ceb,#1e1056eb);border-radius:14px;display:block;box-shadow:inset 0 2px 12px #0009}.side{flex-direction:column;gap:8px;width:72px;display:flex}.side-panel{background:var(--glass);border:1px solid var(--glass-border);text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:8px 6px}.side-panel strong{font-variant-numeric:tabular-nums;text-overflow:ellipsis;font-size:.9rem;font-weight:900;display:block;overflow:hidden}.side-panel canvas{width:56px;height:56px;margin:4px auto 0;display:block}.combo-panel{opacity:.45;transition:opacity .2s,background .2s,box-shadow .2s}.combo-panel.active{opacity:1;background:linear-gradient(160deg,#ff963c73,#ff3c8c59);box-shadow:0 0 24px #ff785080}.combo-panel.active strong{color:#fff3c4;font-size:1.3rem}.controls{justify-content:space-between;align-items:center;gap:10px;display:flex}.pad{align-items:center;gap:10px;display:flex}.ctl{--size:clamp(52px, 15vw, 66px);width:var(--size);height:var(--size);color:#fff;touch-action:none;cursor:pointer;background:radial-gradient(circle at 35% 25%,#ffffff73,#0000 45%),linear-gradient(160deg,#7b5cf0,#3a1f9e);border:none;border-radius:50%;place-items:center;transition:transform 60ms ease-out,filter 60ms;display:grid;box-shadow:inset 0 -4px #0000004d,inset 0 0 0 2px #ffffff26,0 6px 14px #0a002880}.ctl svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:46%;height:46%}.ctl.pressed{filter:brightness(1.25);transform:scale(.9)translateY(2px)}.ctl-rotate{--size:clamp(60px, 18vw, 76px);color:#5a2a00;background:radial-gradient(circle at 35% 25%,#ffffff8c,#0000 45%),linear-gradient(160deg,#ffd24d,#f08a12)}.ctl-drop{background:radial-gradient(circle at 35% 25%,#ffffff73,#0000 45%),linear-gradient(160deg,#ff6fae,#c21e6a)}.screen{z-index:10;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:radial-gradient(120% 70% at 50% 0%, #a05aff80, transparent 60%), linear-gradient(180deg, var(--bg-mid), var(--bg-deep));justify-content:center;align-items:center;animation:.25s ease-out fade-in;display:flex;position:fixed;inset:0}.screen.dim{-webkit-backdrop-filter:blur(10px);background:#0f062d99}.screen[hidden]{display:none}@keyframes fade-in{0%{opacity:0}}.card{border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(14px);touch-action:pan-y;background:linear-gradient(170deg,#ffffff24,#ffffff0d);border-radius:26px;flex-direction:column;gap:12px;width:min(92vw,380px);max-height:100%;padding:24px 20px;animation:.35s cubic-bezier(.2,1.3,.4,1) card-in;display:flex;overflow-y:auto;box-shadow:0 24px 60px #0a00288c}@keyframes card-in{0%{opacity:0;transform:translateY(24px)scale(.96)}}.card h2{text-align:center;letter-spacing:.02em;margin:0 0 4px;font-size:1.7rem;font-weight:900}.btn{touch-action:manipulation;border:1px solid var(--glass-border);background:var(--glass-strong);width:100%;color:var(--text);font:800 1rem var(--font);letter-spacing:.02em;cursor:pointer;border-radius:16px;padding:14px 16px;transition:transform 80ms,filter 80ms}.btn:active{filter:brightness(1.15);transform:scale(.97)}.btn-primary{color:#4a1d00;background:linear-gradient(#ffe680,#ffb21e 60%,#f08a12);border:none;box-shadow:inset 0 -4px #963c0059,0 8px 20px #ffa01e59}.btn-ghost{background:0 0}.btn-play{padding:18px;font-size:1.25rem}.btn-row{gap:10px;display:flex}.logo{justify-content:center;gap:6px;margin-bottom:2px;display:flex}.logo-gem{border:3px solid var(--gold-2);border-radius:7px;width:26px;height:26px;animation:2.4s ease-in-out infinite bob;box-shadow:inset 0 0 0 3px #ffffff40,0 4px 10px #00000059}.logo-gem:nth-child(2){animation-delay:.15s}.logo-gem:nth-child(3){animation-delay:.3s}.logo-gem:nth-child(4){animation-delay:.45s}.logo-gem:nth-child(5){animation-delay:.6s}@keyframes bob{50%{transform:translateY(-6px)}}.g-red{background:linear-gradient(135deg,#ff9aae,#f2244f 55%,#8f0a2b)}.g-blue{background:linear-gradient(135deg,#9cc2ff,#3a63f2 55%,#1a2596)}.g-green{background:linear-gradient(135deg,#a4ffa8,#22c45a 55%,#0b6a2b)}.g-yellow{background:linear-gradient(135deg,#fff1a0,#f9b61c 55%,#b06205)}.g-purple{background:linear-gradient(135deg,#f2b0ff,#b53ff0 55%,#5f139c)}.game-title{text-align:center;margin:0 0 6px;font-weight:900;line-height:.95}.game-title span{display:block}.game-title span:first-child{letter-spacing:.35em;color:var(--text-dim);font-size:1.1rem}.game-title span:last-child{background:linear-gradient(#fffbe6 10%,#ffd24d 55%,#ff8a2e);color:#0000;filter:drop-shadow(0 3px #3c146ee6);-webkit-background-clip:text;background-clip:text;font-size:2.8rem}.name-field{color:var(--text-dim);flex-direction:column;gap:6px;font-size:.75rem;font-weight:700;display:flex}.name-field input{font:700 1rem var(--font);color:var(--text);border:1px solid var(--glass-border);-webkit-user-select:text;user-select:text;background:#00000040;border-radius:14px;outline:none;padding:12px 14px}.name-field input:focus{border-color:var(--accent)}.new-highscore{color:#4a1d00;background:linear-gradient(90deg,#ffe680,#ffb21e);border-radius:99px;align-self:center;padding:6px 14px;font-weight:900;animation:.6s cubic-bezier(.2,1.6,.4,1) .2s both pop,1.2s ease-in-out infinite alternate glow}@keyframes glow{to{box-shadow:0 0 24px #ffc83ccc}}.final-score{text-align:center}.final-score strong{background:linear-gradient(#fffbe6 10%,#ffd24d 60%,#ff9d2e);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2.6rem;font-weight:900}.stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;display:grid}.stat-grid>div{text-align:center;background:#0003;border-radius:14px;padding:10px 4px}.stat-grid strong{font-size:1.1rem;font-weight:900}.score-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.score-list li{background:#0003;border-radius:14px;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:10px 12px;display:grid}.score-list .rank{text-align:center;color:var(--text-dim);font-weight:900}.score-list .who{text-overflow:ellipsis;white-space:nowrap;font-weight:800;overflow:hidden}.score-list .who small{color:var(--text-dim);font-size:.7rem;font-weight:600;display:block}.score-list .pts{font-variant-numeric:tabular-nums;font-weight:900}.score-list .rank-1{background:linear-gradient(90deg,#ffd24d59,#00000026)}.score-list .rank-1 .rank{color:#ffd24d}.score-list .rank-2 .rank{color:#dfe6f5}.score-list .rank-3 .rank{color:#e9a36b}.score-list .empty{text-align:center;color:var(--text-dim);display:block}.toggle{cursor:pointer;background:#0003;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.toggle b{display:block}.toggle small{color:var(--text-dim);font-size:.75rem}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{background:#fff3;border-radius:99px;flex:none;width:48px;height:28px;transition:background .2s;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s cubic-bezier(.3,1.4,.5,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #0000004d}.toggle input:checked+i{background:linear-gradient(90deg,#ffb21e,#ff6f3c)}.toggle input:checked+i:after{transform:translate(20px)}.toggle input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}.howto{flex-direction:column;gap:8px;margin:0;padding:0;font-size:.92rem;line-height:1.35;list-style:none;display:flex}.howto li{background:#0003;border-radius:14px;padding:10px 12px}.hint{color:var(--text-dim);text-align:center;margin:0;font-size:.75rem}@media (height<=600px){.ctl{--size:48px}.ctl-rotate{--size:54px}.side-panel canvas{width:44px;height:44px}}