*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}html,body,#app{height:100%;width:100%;overflow:hidden;position:fixed;inset:0}body{background:#0a0e1a;color:#f0f3ff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none}.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#2a2860,#0a0e1a 65%);z-index:100}.splash-inner{text-align:center;padding:24px;max-width:360px}.logo{font-size:64px;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,#ff9bd2,#a4d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.tagline{opacity:.85;margin-bottom:36px;font-size:18px}.reason{opacity:.65;margin-bottom:36px;font-size:14px;line-height:1.55}.cta{background:linear-gradient(135deg,#ff9bd2,#a4d4ff);color:#0a0e1a;font-weight:700;font-size:18px;border:none;border-radius:999px;padding:16px 36px;cursor:pointer;box-shadow:0 8px 24px #ff9bd259;transition:transform .15s ease,box-shadow .2s ease}.cta:active{transform:scale(.95);box-shadow:0 4px 12px #ff9bd266}.error{margin-top:18px;color:#ff7b7b;font-size:14px;line-height:1.5}.stage{position:fixed;inset:0;background:#0a0e1a}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:2;background:transparent}#game-3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}.game-title{position:absolute;top:0;left:0;right:0;text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;opacity:0;pointer-events:none;z-index:5;padding:36px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.6);transition:opacity .4s ease}.game-title.show{opacity:.9}.game-label{position:absolute;right:16px;bottom:16px;z-index:6;font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:#0a0e1a8c;padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}.hud{position:absolute;top:60px;left:50%;transform:translate(-50%);z-index:5;pointer-events:none;text-align:center;display:flex;gap:18px;align-items:center;font-weight:700;font-size:22px;text-shadow:0 2px 10px rgba(0,0,0,.7)}.hud .pill{background:#0a0e1a8c;padding:6px 14px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;gap:6px;align-items:baseline}.hud .pill .label{font-size:11px;opacity:.65;font-weight:600;letter-spacing:1px;text-transform:uppercase}.nav-arrow{position:absolute;top:8px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .25s ease;z-index:10;background:transparent;border:none;padding:0;cursor:pointer}.nav-arrow.nav-left{left:4px}.nav-arrow.nav-right{right:4px}.nav-arrow svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));z-index:2}.nav-arrow .charge{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,#a4d4ff00 35% 70%);pointer-events:none;transition:background .1s linear}.nav-arrow.charging .charge{box-shadow:0 0 24px #a4d4ffb3;background:radial-gradient(circle,#a4d4ff8c,#a4d4ff00 70%)}.nav-arrow.charging{opacity:1}.nav-arrow.cooldown{opacity:.2;pointer-events:none}.preview-wrap{position:absolute;bottom:18px;left:18px;width:28vw;max-width:160px;min-width:96px;aspect-ratio:4 / 3;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 8px 28px #0000008c;z-index:8;opacity:.92;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2);transform:translateY(0) scale(1)}.preview-wrap.hidden{opacity:0;transform:translateY(120%) scale(.85);pointer-events:none}#preview-canvas{width:100%;height:100%;display:block;transform:scaleX(-1);background:#000}.preview-toggle-zone{position:absolute;bottom:0;left:0;width:42vw;max-width:220px;height:32vh;max-height:240px;z-index:9}.preview-toggle-zone:after{content:"";position:absolute;bottom:6px;left:6px;width:5px;height:5px;border-radius:50%;background:#ffffff1f}.settings-zone{position:absolute;top:0;left:50%;transform:translate(-50%);width:96px;height:22px;z-index:9}.settings-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:stretch;justify-content:center}.settings-backdrop{position:absolute;inset:0;background:#050810b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.settings-card{position:relative;width:min(560px,96vw);max-height:96vh;margin:auto;background:#131829;border:1px solid rgba(255,255,255,.12);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px #000000b3}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.settings-header h2{font-size:18px;font-weight:700;letter-spacing:.5px}.settings-close-btn{background:#ffffff0f;color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}.settings-preview-wrap{padding:12px 18px 4px;display:flex;flex-direction:column;gap:6px}.settings-preview{width:100%;aspect-ratio:4 / 3;background:#000;border-radius:12px;display:block;border:1px solid rgba(255,255,255,.1)}.settings-preview-hint{font-size:11px;opacity:.7;text-align:center}.settings-sections{overflow-y:auto;padding:0 18px 12px}.settings-section{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.settings-section:last-child{border-bottom:none}.settings-section h3{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;opacity:.5;margin-bottom:10px}.settings-row{margin-bottom:14px}.settings-row:last-child{margin-bottom:0}.settings-row .row-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.settings-row .row-head .value{font-family:ui-monospace,monospace;font-size:12px;opacity:.85;background:#ffffff0f;padding:2px 8px;border-radius:4px;min-width:44px;text-align:center}.settings-row input[type=range]{width:100%;accent-color:#7bf0c8}.settings-row .help{font-size:11px;opacity:.55;margin-top:4px;line-height:1.4}.settings-row .bool-row{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}.settings-row .bool-row input{accent-color:#7bf0c8;width:18px;height:18px}.settings-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid rgba(255,255,255,.08)}.settings-hint{font-size:11px;opacity:.55}.settings-hint kbd{background:#ffffff1a;padding:1px 6px;border-radius:4px;font-family:ui-monospace,monospace}.settings-reset-btn{background:#ff646426;color:#ffb0b0;border:1px solid rgba(255,100,100,.3);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer}.settings-reset-btn:hover{background:#ff646440}#game-canvas.slide-in-right{animation:slideInRight .35s ease-out}#game-canvas.slide-in-left{animation:slideInLeft .35s ease-out}@keyframes slideInRight{0%{transform:translate(15%);opacity:.2}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-15%);opacity:.2}to{transform:translate(0);opacity:1}}