.stage-wrap{margin:1rem auto}
#stage{position:relative;width:min(100%,calc((100vh - 80px) * 16 / 9));min-width:min(100%,640px);aspect-ratio:16/9;margin:0 auto;background:#050a18;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(56,240,255,.08);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;container-type:size;--u:min(1cqh,1cqw)}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;overflow:hidden}
.screen[hidden],[hidden]{display:none!important}
.screen .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.screen .bg.dim{filter:brightness(.35) blur(3px);transform:scale(1.05)}
.kenburns{animation:ken 28s ease-in-out infinite alternate}@keyframes ken{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,1%)}}
#loading .bg{filter:brightness(.55) saturate(1.2)}
.vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(5,10,24,.1) 20%,rgba(5,10,24,.8) 100%),linear-gradient(180deg,rgba(5,10,24,.2),rgba(5,10,24,.65))}
.fx-sparks{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#7af4ff,transparent),radial-gradient(2px 2px at 70% 20%,#ffd23a,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),radial-gradient(2px 2px at 85% 65%,#7af4ff,transparent),radial-gradient(1.5px 1.5px at 10% 75%,#ffd23a,transparent);background-size:300px 300px;animation:sparks 9s linear infinite;opacity:.8}
@keyframes sparks{from{background-position:0 0}to{background-position:-300px -300px}}
.center{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,calc(var(--u)*1.6),16px);width:min(92%,520px);max-height:100%;padding:clamp(6px,calc(var(--u)*2),20px) 0;overflow:auto}
.logo{width:min(70%,clamp(150px,calc(var(--u)*40),380px));height:auto;mix-blend-mode:screen;filter:drop-shadow(0 0 18px rgba(42,123,255,.7))}
.menu-list{display:flex;flex-direction:column;gap:clamp(5px,calc(var(--u)*1.2),10px);width:min(100%,320px)}
.btn{font:700 clamp(.85rem,calc(var(--u)*2.4),1.1rem)/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:.14em;color:var(--ink);background:linear-gradient(180deg,rgba(42,123,255,.55),rgba(14,40,100,.8));border:2px solid rgba(120,190,255,.55);border-radius:10px;padding:clamp(8px,calc(var(--u)*1.7),14px) 18px;cursor:pointer;min-height:44px;transition:transform .12s,box-shadow .12s,border-color .12s;text-shadow:0 1px 2px #000}
.btn:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(56,240,255,.45);transform:translateY(-1px)}
.btn:active,.btn.pressed{transform:translateY(1px) scale(.98);box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-color:var(--gold)}
.btn.primary{background:linear-gradient(180deg,#ffd45a,#e08a00);color:#1a1000;border-color:#fff1b0;text-shadow:none}
.btn.danger{background:linear-gradient(180deg,#a02a2a,#5a1010);border-color:#ff8a7a}.btn.small{font-size:.8rem;padding:8px 12px}
.best{margin:0;color:var(--mute);font-size:.85rem;text-shadow:0 1px 3px #000}
.bar{width:100%;height:14px;border-radius:8px;background:rgba(0,0,0,.55);border:1px solid rgba(120,190,255,.5);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--gold));transition:width .15s}
.bar.small{height:9px}
.load-line{margin:0;color:var(--ink);text-shadow:0 1px 3px #000;font-size:.95rem}.load-line b{color:var(--gold)}
.error{color:#ffb4a0;background:rgba(80,10,10,.7);padding:8px 12px;border-radius:8px;margin:0;font-size:.9rem}
.panel-screen{background:rgba(0,0,0,.2)}
.panel{position:relative;z-index:5;width:min(94%,640px);max-height:94%;overflow:auto;background:linear-gradient(180deg,rgba(14,28,64,.94),rgba(6,12,30,.96));border:1px solid rgba(120,190,255,.5);border-radius:14px;padding:clamp(12px,calc(var(--u)*3),26px);box-shadow:0 12px 50px rgba(0,0,0,.7)}
.panel.small{width:min(92%,400px)}.panel h2{margin:0 0 .6rem;color:var(--gold);letter-spacing:.12em;text-align:center;font-size:clamp(1.1rem,calc(var(--u)*3.4),1.7rem)}
.panel p,.panel li{color:#d4e2ff;font-size:clamp(.82rem,calc(var(--u)*2.1),1rem)}
.tips{padding-left:1.1rem;margin:.4rem 0}.tips li{margin:.3rem 0}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{position:relative;border:2px solid rgba(120,190,255,.45);border-radius:12px;overflow:hidden;background:#0a1430;text-align:left;color:var(--ink);cursor:pointer;padding:0;font:inherit}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.card .meta{padding:8px 10px}.card h3{margin:0;font-size:1rem;letter-spacing:.06em}.card small{color:var(--mute);display:block}
.card:hover{border-color:var(--cyan)}.card:focus-visible{outline:3px solid var(--gold)}
.card[disabled]{cursor:not-allowed;filter:grayscale(.9) brightness(.6)}.card .lock{position:absolute;top:8px;right:8px;background:#000a;padding:2px 8px;border-radius:6px;font-size:.75rem;letter-spacing:.1em}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:center}.form label{color:#d4e2ff;font-size:.92rem}.form output{color:var(--gold);margin-left:6px}
.form input[type=range]{width:100%;accent-color:var(--cyan);min-height:28px}.form select{background:#0a1430;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}
.form .check{grid-column:1/-1;display:flex;gap:8px;align-items:center}.form input[type=checkbox]{width:20px;height:20px;accent-color:var(--cyan)}
.overlay{background:rgba(3,6,18,.7);backdrop-filter:blur(3px)}
.result{text-align:center;margin:.2rem 0;font-size:1.1rem}.result b{color:var(--gold);font-size:1.4em}.result.sub{font-size:.9rem;color:var(--mute)}.result.sub b{font-size:1.1em}
.newbest{text-align:center;color:var(--em);font-weight:800;letter-spacing:.2em;margin:.2rem}
.ad-slot.in-game{margin:8px auto;max-width:336px}
@media (prefers-reduced-motion:reduce){.kenburns,.fx-sparks{animation:none}.btn{transition:none}}
.reduce-motion .kenburns,.reduce-motion .fx-sparks{animation:none}
@media (max-width:520px){.form{grid-template-columns:1fr}}