:root{--accent:#d93a30;--bg:#0f1020;--fg:#f4f4fb;--panel:rgba(18,18,36,.9);--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.16);--mut:#b4b6cf;color-scheme:dark light}@media(prefers-color-scheme:light){:root{--panel:rgba(255,255,255,.94);--fg:#1a1b2e;--card:rgba(20,20,60,.06);--line:rgba(20,20,60,.16);--mut:#505370}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#0f1020;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,system-ui,sans-serif;color:var(--fg);font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none}#root{height:100%}#app{position:fixed;inset:0;min-height:100dvh}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}.screen{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(transparent 20%,#0808148c)}.screen.on{display:flex}.screen.mid{align-items:center;background:#08081499}.panel{width:100%;max-width:480px;max-height:calc(100dvh - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 20px 50px #00000073,0 2px 6px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:rise .25s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}h1{font-size:36px;letter-spacing:-1.2px;line-height:1;margin:0 0 4px}h1 b{color:var(--accent)}h2{font-size:22px;letter-spacing:-.4px;margin:0 0 12px}p.sub{margin:0 0 16px;color:var(--mut);font-size:15px;line-height:1.4}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:650;font-size:16px;margin-top:8px;transition:transform .15s ease-out,background .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;pointer-events:none}.btn.primary{background:var(--accent);border-color:transparent;color:#fff}.btn.danger{color:#ff7b72}.row{display:flex;gap:8px}.row .btn{margin-top:8px}.back{min-height:44px;padding:0 8px;margin:-8px 0 4px -8px;color:var(--mut);font-weight:600}.lab{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:12px 0 8px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:420px){.cards{grid-template-columns:repeat(4,1fr)}}.card b{overflow-wrap:anywhere}.card{padding:10px 8px;border-radius:14px;border:2px solid var(--line);background:var(--card);text-align:left;min-height:96px;transition:transform .15s,border-color .15s}.card:active{transform:scale(.97)}.card.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.card .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}.card b{font-size:15px}.card small{display:block;color:var(--mut);font-size:12px;margin:2px 0 6px}.mb{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--mut);height:11px}.mb span{width:22px}.mb i{display:block;height:4px;border-radius:2px;background:var(--fg);opacity:.75}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--card);border-radius:14px;padding:4px;border:1px solid var(--line)}.seg button{min-height:44px;border-radius:10px;font-weight:650;font-size:15px;transition:background .15s}.seg button.on{background:var(--accent);color:#fff}.set{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:15px}.set input[type=range]{width:55%;accent-color:var(--accent);height:32px}.tog{width:52px;height:30px;border-radius:15px;background:var(--line);position:relative;transition:background .2s;flex:none}.tog:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}.tog.on{background:var(--accent)}.tog.on:after{transform:translate(22px)}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--mut);font-weight:600}kbd{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font:12px ui-monospace,monospace}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tile{background:var(--card);border-radius:16px;padding:14px;border:1px solid var(--line)}.tile b{display:block;font-size:30px;letter-spacing:-1px}.tile span{font-size:13px;color:var(--mut)}.empty{text-align:center;padding:16px 0}.empty .big{font-size:44px}.big-res{font-size:34px;letter-spacing:-1px;margin:0}#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 52%,rgba(0,0,0,.5) 100%)}#tint{position:absolute;inset:0;pointer-events:none;background:#ff6e141f;opacity:0;transition:opacity .15s}#flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}#dn{position:absolute;inset:0;pointer-events:none;overflow:hidden}.dn{position:absolute;left:0;top:0;display:none;font-weight:900;white-space:nowrap;text-shadow:0 0 3px #000,0 0 3px #000,0 2px 4px rgba(0,0,0,.7);will-change:transform}#hud{position:absolute;inset:0;pointer-events:none;display:none}body.fighting #hud{display:block}.hrow{display:flex;align-items:flex-start;gap:8px;max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 10px 0}.side{flex:1;min-width:0}.side.r{text-align:right}.nm{font-weight:800;font-size:14px;letter-spacing:.02em;text-shadow:0 1px 3px #000;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{position:relative;height:16px;border-radius:8px;background:#0000008c;border:2px solid rgba(255,255,255,.75);overflow:hidden;margin-top:3px}.side.r .bar{direction:rtl}.bar i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:6px}.bar .trail{background:#fff;opacity:.85;transition:width .7s ease-out .35s}.bar .fill{transition:width .12s linear}.sps{display:flex;flex-direction:column;gap:3px;margin-top:5px}.side.r .sps{align-items:flex-end}.sps em{max-width:100%;text-overflow:ellipsis;font-style:normal;position:relative;overflow:hidden;font-size:10px;font-weight:800;color:#fff;background:#0000008c;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:2px 7px;white-space:nowrap}.sps em:before{content:"";position:absolute;inset:0;width:var(--p);background:#ffffff40}.sps em>span{position:relative;display:block;overflow:hidden;text-overflow:ellipsis}.sps u{text-decoration:none;margin-left:3px}.sps em.rdy{border-color:#ffd23f;color:#ffd23f}.dots{display:flex;gap:5px;margin-top:5px}.side.r .dots{justify-content:flex-end}.dots b{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent}.dots b.w{background:#ffd23f;border-color:#ffd23f;box-shadow:0 0 8px #ffd23f}.hrow .mid{display:flex;flex-direction:column;align-items:center;gap:4px}#timer{font-size:30px;font-weight:900;color:#fff;text-shadow:0 2px 6px #000;min-width:54px;text-align:center;line-height:1}#pauseBtn{pointer-events:auto;position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 8px);z-index:5;width:40px;height:40px;border-radius:12px;background:#00000080;color:#fff;border:1px solid rgba(255,255,255,.4);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}.hrow{padding-right:58px!important;padding-top:8px!important}#fires{display:flex;gap:8px;max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6px) 58px 0 10px}.fb{pointer-events:auto;position:relative;flex:1;height:26px;border-radius:13px;overflow:hidden;background:#0000008c;border:2px solid rgba(255,255,255,.6);color:#fff;font-weight:800;font-size:12px;letter-spacing:.03em;transition:transform .15s}.fb:active{transform:scale(.97)}.fb:after{content:"";position:absolute;inset:-6px -4px -10px}.fb i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ff5a1a,#ffb52e,#ffe27a);transition:width .15s ease-out}.fb span{position:relative;display:block;line-height:22px;text-shadow:0 1px 3px #000}#fb1,#gb1{display:none}body.foe #fb1,body.foe #gb1{display:block}.fb.full{border-color:#ffd23f;box-shadow:0 0 14px #ff8a00;animation:fpulse .6s ease-in-out infinite alternate}@keyframes fpulse{to{box-shadow:0 0 26px #ffd23f;transform:scale(1.03)}}#banner{position:absolute;left:0;right:0;top:32%;text-align:center;color:#fff;font-weight:900;font-size:clamp(40px,11vw,84px);letter-spacing:-2px;text-shadow:0 4px 18px rgba(0,0,0,.7);opacity:0;transform:scale(.8);transition:opacity .2s,transform .25s}#banner.show{opacity:1;transform:scale(1)}#banner small{display:block;font-size:20px;letter-spacing:0;font-weight:700;margin-top:4px}#train{position:absolute;left:10px;top:calc(env(safe-area-inset-top) + 205px);display:none;pointer-events:auto;background:#0000008c;color:#fff;border-radius:16px;padding:10px 14px;min-width:150px;border:1px solid rgba(255,255,255,.3)}body.training #train{display:block}#train .cmb{font-size:30px;font-weight:900;line-height:1}#train small{display:block;font-size:13px;opacity:.9;margin-top:2px}#train button{margin-top:8px;min-height:44px;width:100%;border-radius:10px;background:#ffffff2e;font-weight:700;font-size:13px;color:#fff}#tut{position:absolute;right:10px;top:calc(env(safe-area-inset-top) + 205px);display:none;pointer-events:auto;background:#0009;color:#fff;border-radius:16px;padding:10px 12px;width:200px;max-width:calc(100% - 190px);border:1px solid rgba(255,255,255,.3)}body.tutorial #tut{display:block}#tut b{display:block;font-size:15px}#tut small{display:block;font-size:12px;margin:3px 0 6px;line-height:1.3}.tbar{height:5px;border-radius:3px;background:#ffffff40;overflow:hidden}.tbar i{display:block;height:100%;background:#ffd23f;transition:width .2s}#tut button{margin-top:8px;min-height:44px;width:100%;border-radius:10px;background:#ffffff2e;font-weight:700;font-size:13px;color:#fff}.rank{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:8px}.rank b{font-size:22px;letter-spacing:-.4px}.rank small{display:block;color:var(--mut);font-size:13px;margin-top:2px}.pb{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:10px}.pb i{display:block;height:100%;background:var(--accent);border-radius:4px}.chl{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:14px}.chl .n{width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}.chl.cur .n{background:var(--accent);color:#fff;border-color:transparent}.chl.lock{opacity:.5}.chl span{flex:1}.chl small{color:var(--mut)}#touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:0 14px calc(env(safe-area-inset-bottom) + 14px);pointer-events:none}body.fighting.touch #touch{display:flex}.tb{pointer-events:auto;touch-action:none;width:60px;height:60px;border-radius:50%;background:#ffffff2e;border:2px solid rgba(255,255,255,.55);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .1s,background .1s}.tb.act{transform:scale(.9);background:#fff6}.dpad{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(2,60px);gap:6px}.acts{display:grid;grid-template-columns:repeat(2,64px);gap:8px}.acts .tb{width:64px;height:64px}#fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;background:#0f1020;color:#fff;z-index:9}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}