:root{color-scheme:dark;--panel: rgba(6, 18, 37, .78);--panel-strong: rgba(6, 18, 37, .92);--border: rgba(112, 235, 255, .38);--text: #ffffff;--muted: #c7dded;--cyan: #23e6dd;--gold: #ffc857;--danger: #ff4aa8}*{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 50% 20%,#277cc2,#122d63 35%,#08142a);touch-action:none;-webkit-user-select:none;user-select:none}button,input{font:inherit}#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:1.1rem;border:1px solid var(--border);border-radius:26px;background:linear-gradient(180deg,rgba(11,35,70,.88),var(--panel-strong));box-shadow:0 24px 70px #00000061,inset 0 0 38px #23e6dd14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.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 5px 0 #0b3f66,0 0 28px rgba(35,230,221,.75)}.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)}.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:48px;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,#51627c,#24334c);box-shadow:0 7px #050a16cc}.btn.danger{background:linear-gradient(180deg,#ff73b6,#cf236f);box-shadow:0 7px #58042ccc}.btn.small{min-height:42px;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:#06122575;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pause{pointer-events:auto;width:46px;height:46px;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(84vw,390px);text-align:center;padding:.75rem 1rem;border-radius:22px;background:#0612258c;border:1px solid rgba(255,255,255,.16);font-weight:900;color:#eaffff}.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:.7rem;background:#ffffff12}.skin-card.selected{outline:2px solid var(--gold)}.setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;color:var(--muted)}.setting input[type=range]{width:160px}.hidden{display:none!important}.high-contrast{--cyan:#72ff62;--danger:#ffb000;--panel:rgba(0,0,0,.84)}@media(orientation:landscape)and (max-height:540px){.title{font-size:3.2rem}.panel{width:min(86vw,620px);padding:.85rem}.stats{margin:.45rem 0}.hint{display:none}.score{font-size:2.4rem}.progress{top:62px}}.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:#0612259e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}