:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--bg:#1a1430d1;--bg2:#2c224eeb;--fg:#f6f0ff;--muted:#c2b6dc;--accent:#ff8fc8;--good:#7dffb0;--bad:#ff6b6b;--gold:#ffd76a;--line:#ffffff24}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:#1a1430;height:100%;margin:0;overflow:hidden}body{color:var(--fg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#game{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0;overflow:hidden}#ui button,#ui textarea,#ui input,#ui label,.sheet,.panel-box,.modal,.screen{pointer-events:auto}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.lbl{color:var(--muted);margin-right:4px;font-size:12px}button{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:10px;min-height:40px;padding:8px 12px}button:hover:not(:disabled){border-color:#ffffff59}button:disabled{opacity:.45;cursor:default}button.primary{color:#2a0b1c;background:linear-gradient(#ff9fd0,#e2609f);border-color:#ffc1e0;font-weight:700}button.danger{background:#5a2234;border-color:#a04060}button.on,.seg.on{background:#6a52b8;border-color:#b7a2ff}button.big{width:100%;min-height:48px;font-size:16px}.icon-btn{min-width:40px;padding:6px 10px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.game-ui,.hud{pointer-events:none;position:absolute;inset:0}.top{top:calc(var(--sat) + 6px);left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);flex-wrap:wrap;align-items:center;gap:8px;display:flex;position:absolute}.stat{background:var(--bg);border:1px solid var(--line);pointer-events:auto;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;padding:6px 10px;display:flex}.stat .val{font-variant-numeric:tabular-nums;font-weight:700}.icon{color:var(--gold)}.meter{pointer-events:auto;flex:160px;min-width:140px}.bar{background:var(--bg);border:1px solid var(--line);border-radius:10px;height:26px;position:relative;overflow:hidden}.bar .fill{width:0;transition:width .2s;position:absolute;inset:0 auto 0 0}.power .fill{background:linear-gradient(90deg,#ff9fd0,#ffd1ec)}.grip .fill{background:linear-gradient(90deg,#8a7ac0,#c0a0ff)}.grip.danger .fill{background:linear-gradient(90deg,#ff5a5a,#ff9a6a)}.grip.danger .bar{animation:.8s infinite pulse}@keyframes pulse{50%{border-color:var(--bad);box-shadow:0 0 12px var(--bad)}}.bar-label.short{display:none}.bar-label{text-align:center;text-shadow:0 1px 2px #000;white-space:nowrap;font-size:12px;font-weight:700;line-height:24px;display:block;position:relative}.bottom{bottom:calc(var(--sab) + 8px);left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute}.actions{pointer-events:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.actions>*{pointer-events:auto}.act{--sz:64px;--ic:28px;width:var(--sz);height:var(--sz);color:#fff;background:#2b2745;border:none;border-radius:50%;place-items:center;min-height:0;padding:0;display:inline-grid;position:relative;box-shadow:0 4px 12px #00000059}.act svg{width:var(--ic);height:var(--ic)}.act:hover:not(:disabled){filter:brightness(1.15)}.act:active:not(:disabled){transform:scale(.94)}.act.on{background:#2b2745;box-shadow:0 0 0 3px #f29bc8,0 4px 12px #00000059}.act-start{--sz:80px;--ic:36px;color:#3a1630;background:#f29bc8}.act-speed{letter-spacing:-.02em;border-radius:18px;width:68px;height:68px;font-size:24px;font-weight:800}.act .badge{color:#3b2a00;background:#f6c945;border:2px solid #1a1430;border-radius:999px;padding:1px 6px;font-size:12px;font-weight:700;line-height:16px;position:absolute;top:-6px;right:-8px}.menu-btn{place-items:center;display:inline-grid}.menu-btn svg{width:20px;height:20px}@media (max-width:389px),(max-height:460px) and (orientation:landscape){.actions{gap:12px}.act{--sz:52px;--ic:24px}.act-start{--sz:60px;--ic:28px}.act-speed{border-radius:14px;width:54px;height:54px;font-size:20px}}.timer{background:var(--bg);border:1px solid var(--line);pointer-events:auto;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;max-width:100%;padding:6px 10px;display:flex}.round-tile{white-space:normal;flex-wrap:wrap;row-gap:4px;min-width:0;max-width:100%}.round-count{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.preview{border-left:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;padding-left:10px;display:flex}.chip{white-space:nowrap;cursor:help;align-items:center;gap:4px;display:inline-flex}.chip i{border-radius:50%;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 1px #ffffff80}.ability{background:conic-gradient(#0000008c var(--cd,0deg), transparent 0) , #2f5a8a;border-color:#7fb4ff;min-width:110px;font-weight:700;position:relative}.hero-hp{background:var(--bg);border:1px solid var(--line);border-radius:10px;align-items:center;gap:6px;padding:4px 8px;display:flex}.hero-hp .bar{width:90px;height:12px}.hero-hp .fill{background:var(--good)}.hero-hp.down .fill{background:var(--bad)}.toasts{top:calc(var(--sat) + 76px);flex-direction:column;align-items:center;gap:4px;width:min(92vw,520px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.toasts.global{z-index:30;top:calc(var(--sat) + 12px);position:fixed}.toast{background:var(--bg2);border:1px solid var(--line);text-align:center;border-radius:10px;padding:6px 12px;animation:2.6s forwards fadeout}.toast.bad{border-color:var(--bad)}@keyframes fadeout{0%,80%{opacity:1}to{opacity:0}}.sheet{top:calc(var(--sat) + 56px);right:calc(var(--sar) + 8px);width:min(380px,46vw);max-height:calc(100% - var(--sat) - var(--sab) - 150px);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px;position:absolute;overflow-y:auto}.sheet-head{align-items:center;gap:8px;margin-bottom:8px;display:flex}.sheet-head b{font-size:16px}.sheet-head>:last-child{margin-left:auto}.cards{grid-template-columns:1fr;gap:6px;display:grid}.card,.level-card{text-align:left;flex-direction:column;gap:2px;width:100%;padding:8px 10px;display:flex}.card-top{justify-content:space-between;gap:8px;width:100%;display:flex}.card-line{color:var(--muted);font-size:12px}.card-desc{opacity:.85;font-size:12px}.cost{color:var(--gold);font-weight:700}.stats{margin:0 0 8px;padding-left:18px}.diff{background:#7dffb014;border:1px solid #7dffb04d;border-radius:8px;margin:8px 0;padding:6px 8px;font-size:13px}.modes{margin:6px 0}.seg{text-transform:capitalize;min-height:34px;padding:4px 10px}.numbers{pointer-events:none;position:absolute;inset:0}.num{text-align:center;opacity:0;text-shadow:0 1px 2px #000,0 0 3px #000;will-change:transform, opacity;width:2em;margin:-.6em 0 0 -1em;font-size:13px;font-weight:800;position:absolute;top:0;left:0}.num.magic{color:#d0a8ff}.num.gold{color:var(--gold);font-size:12px}.build-tag{z-index:40;left:calc(var(--sal) + 6px);bottom:calc(var(--sab) + 2px);opacity:.6;pointer-events:auto;font:10px/1 ui-monospace,monospace;position:fixed}.debug{z-index:35;left:calc(var(--sal) + 6px);top:calc(var(--sat) + 100px);pointer-events:none;white-space:pre;background:#000000b3;border-radius:6px;margin:0;padding:6px 8px;font:11px/1.3 ui-monospace,monospace;position:fixed}.screen{z-index:20;padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);background:radial-gradient(circle at 50% 40%,#3b2c6e,#1a1430) 50%/cover;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.screen.transparent{background:linear-gradient(#1a14301a,#1a1430bf)}.screen.results-screen{background:#0a06188c}.bg-video{object-fit:cover;z-index:-1;width:100%;height:100%;position:absolute;inset:0}.title-box{text-align:center;width:min(360px,100%);margin-top:auto;margin-bottom:4vh}.screen.title.transparent .logo-text{white-space:nowrap;font-size:clamp(34px,8vw,52px)}.screen.title.transparent .tagline{margin:4px 0 14px}@media (orientation:landscape) and (max-height:500px){.screen.title.transparent{justify-content:flex-end}.screen.title.transparent .title-box{width:min(340px,48vw);margin:auto 4vw auto 0}}.logo{max-width:100%;max-height:30vh}.logo-text{letter-spacing:.02em;color:#ffd1ec;text-shadow:0 3px #b0407a,0 6px 20px #00000080;margin:0;font-size:clamp(36px,9vw,64px);font-weight:900}.tagline{text-shadow:0 1px 4px #000;margin:8px 0 18px;font-size:18px}.menu{flex-direction:column;gap:8px;width:100%;display:flex}.menu.row{flex-flow:wrap;justify-content:center}.menu.row button{flex:120px}.consent-slot{position:fixed;bottom:0;left:0;right:0}.panel-box{background:var(--bg2);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:100%;padding:16px;overflow-y:auto}.levels{flex-direction:column;gap:8px;display:flex}.level-card.locked{opacity:.5}.results h2{margin:0 0 4px}.results.win h2{color:var(--good)}.results.lose h2{color:var(--bad)}.kv{border-bottom:1px solid var(--line);justify-content:space-between;padding:6px 0;display:flex}.results .menu{margin-top:14px}.loading{text-align:center;width:min(360px,100%)}.load-bar{background:#ffffff1f;border-radius:6px;height:10px;margin:18px 0 8px;overflow:hidden}.load-fill{background:var(--accent);width:3%;height:100%;transition:width .2s}.modal{z-index:50;padding:calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg2);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:10px;width:min(420px,100%);max-height:100%;padding:16px;display:flex;overflow-y:auto}.modal-box h2{margin:0}.modal-box>*{flex-shrink:0}.rating{justify-content:space-between;gap:6px;display:flex}.face{flex:1;padding:4px;font-size:26px}textarea{width:100%;font:inherit;color:var(--fg);border:1px solid var(--line);resize:vertical;-webkit-user-select:text;user-select:text;background:#0000004d;border-radius:10px;padding:8px}.shot{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.shot img{object-fit:contain;border:1px solid var(--line);border-radius:8px;width:100%;max-height:28vh}@media (orientation:portrait),(max-height:500px){.top{grid-template-columns:auto auto minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"gold round power grip pause""prev prev prev prev prev";align-items:stretch;gap:6px;display:grid}.top .stat{padding:4px 8px}.gold-stat{grid-area:gold}.round-tile{display:contents}.round-count{background:var(--bg);border:1px solid var(--line);pointer-events:auto;border-radius:10px;grid-area:round;padding:4px 8px}.round-count .lbl{display:none}.meter{min-width:0}.meter.power{grid-area:power}.meter.grip{grid-area:grip}.meter .bar{justify-content:center;align-items:center;height:100%;min-height:30px;display:flex}.bar-label.long{display:none}.bar-label.short{font-size:13px;line-height:1;display:block}.top .icon-btn{grid-area:pause}.preview{background:var(--bg);border-left:none;border:1px solid var(--line);pointer-events:auto;border-radius:10px;grid-area:prev;justify-content:center;justify-self:center;max-width:100%;padding:3px 10px;font-size:12px}@media (max-width:389px){.top{gap:4px}.top .stat,.round-count{padding:4px 6px;font-size:13px}.bar-label.short{letter-spacing:-.3px;font-size:11px}.top .icon-btn{padding:4px 8px}}}@media (orientation:portrait){.toasts{top:calc(var(--sat) + 116px)}.sheet{top:auto;left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);bottom:calc(var(--sab) + 8px);z-index:5;width:auto;max-height:55%}.bottom{bottom:calc(var(--sab) + 16px)}.debug{top:calc(var(--sat) + 90px)}}@media (max-height:460px) and (orientation:landscape){button{min-height:34px;padding:5px 10px}.bar{height:22px}.bar-label{line-height:20px}.toasts{top:calc(var(--sat) + 80px)}.sheet{top:calc(var(--sat) + 80px);max-height:calc(100% - var(--sat) - var(--sab) - 136px)}}
