:root{--bg: #14142a;--panel: rgba(20, 20, 42, .92);--text: #f2f2fa;--muted: #b8b8d0;--accent: #ffd76a;--focus: #7ec8e3}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0d0d1c;display:grid;place-items:center;font-family:system-ui,sans-serif}#app{position:relative;width:min(960px,100vw);aspect-ratio:960 / 640;overflow:hidden;border-radius:10px}#app canvas{display:block;width:100%;height:100%}.stats{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}.stats b{color:var(--text)}.badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid color-mix(in srgb,var(--c) 40%,#555);color:#666;font-size:12px;font-weight:700}.badge.lit{background:var(--c);color:#fff;border-color:var(--c)}.linkbtn{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:12px;padding:0}.linkbtn:hover{color:var(--text)}#toast{position:absolute;left:50%;bottom:60px;transform:translate(-50%);z-index:30;background:#14142af2;color:var(--text);padding:10px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.2);max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#touchui{position:absolute;inset:0;z-index:6;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}#joyzone{position:absolute;left:0;top:35%;width:45%;height:65%;pointer-events:auto}#joybase{position:fixed;width:100px;height:100px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.25);opacity:0;transition:opacity .15s}#joybase.active{opacity:1}#joystick{position:absolute;left:25px;top:25px;width:50px;height:50px;border-radius:50%;background:#ffffff59}.touch-btns{position:absolute;right:14px;bottom:14px;display:grid;grid-template-columns:64px 64px;gap:10px;pointer-events:auto}.tbtn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#14142a8c;color:var(--text);font-size:24px;cursor:pointer;touch-action:none}.tbtn.big{grid-column:span 2;width:100%;height:72px;font-size:30px;background:#e23b2e8c}.tbtn.ready{border-color:var(--accent);box-shadow:0 0 14px var(--accent)}.tbtn:active{transform:scale(.94);background:#ffffff40}.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--panel);color:var(--text);text-align:center;padding:24px}.hidden{display:none!important}h1{margin:0;font-size:40px;letter-spacing:1px}h2{margin:0;font-size:44px}.sub{margin:0;color:var(--muted);font-size:16px}.hint{color:var(--muted);font-size:13px;max-width:560px}.cards{display:flex;gap:14px}.card{display:flex;flex-direction:column;align-items:center;gap:8px;width:150px;padding:16px 10px;border-radius:14px;background:#ffffff0f;color:var(--text);border:2px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;font:inherit}.card:hover,.card:focus-visible{transform:translateY(-4px);background:#ffffff1f}.card[aria-checked=true]{border-color:var(--accent);background:#ffffff24}.card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.cap{width:54px;height:76px;border-radius:27px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,white) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 65%,black) 100%);position:relative}.cap:before,.cap:after{content:"";position:absolute;top:22px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:inset -2px 0 0 2px #1a1a24}.cap:before{left:14px}.cap:after{right:14px}.card .name{font-size:19px;font-weight:600}.card .stats{font-size:12px;color:var(--muted);line-height:1.35}.enemy-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.enemy-row .label{color:var(--muted)}.chip{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--text);cursor:pointer;font:inherit;font-size:13px}.chip:hover,.chip:focus-visible{background:#ffffff1a}.chip.sel{background:var(--accent);color:#1a1a24;border-color:var(--accent);font-weight:600}.chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button.primary{padding:12px 40px;font-size:20px;font-weight:700;font-family:inherit;border:none;border-radius:12px;background:var(--accent);color:#1a1a24;cursor:pointer}button.primary:disabled{opacity:.4;cursor:not-allowed}button.primary:not(:disabled):hover{filter:brightness(1.08)}button.primary:focus-visible,#change:focus-visible{outline:3px solid var(--focus);outline-offset:2px}#change{padding:12px 28px;font-size:18px;font-family:inherit;border-radius:12px;background:#ffffff1a;color:var(--text);border:1px solid rgba(255,255,255,.3);cursor:pointer}#change:hover{background:#ffffff2e}.btn-row{display:flex;gap:14px}#hud{position:absolute;inset:0;z-index:5;pointer-events:none;color:var(--text)}.panel{position:absolute;display:flex;flex-direction:column;gap:4px;min-width:240px}.panel.me{left:16px;bottom:14px}.panel.enemy{right:16px;top:14px;align-items:flex-end}.pname{font-size:14px;font-weight:600;text-shadow:0 1px 2px #000}.bar{width:240px;height:12px;border-radius:6px;background:#0000008c;overflow:hidden}.fill{height:100%;width:100%;background:#58d06a;transition:width .15s}.enemy-fill{background:#e2574c}.bar.chi{height:7px;width:240px}.chi-fill{height:100%;width:0;background:#ffd76a;transition:width .2s}.chi-fill.full{animation:blink .4s infinite alternate}.spec{color:#1a1a24;background:var(--accent);padding:2px 10px;border-radius:999px;font-weight:700;animation:blink .4s infinite alternate}.rounds{font-size:12px;color:var(--muted);text-shadow:0 1px 2px #000;letter-spacing:1px}.panel.enemy .rounds{order:-1}#round-banner{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;color:var(--text)}#round-banner span{font-size:34px;font-weight:800;text-shadow:0 2px 8px #000;background:#14142abf;padding:14px 36px;border-radius:14px;animation:roundin .3s ease-out}@keyframes roundin{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.row{display:flex;align-items:center;gap:10px;font-size:12px;text-shadow:0 1px 2px #000}.pips{color:var(--accent);letter-spacing:2px}.pips.empty{color:#77778f}.cd{color:var(--muted);display:inline-flex;align-items:center;gap:4px}.cdbar{display:inline-block;width:46px;height:6px;border-radius:3px;background:#0000008c;overflow:hidden}.cdbar span{display:block;height:100%;width:0;background:var(--accent)}.catch{color:#fff;background:var(--accent);padding:2px 10px;border-radius:999px;font-weight:700;animation:blink .4s infinite alternate}@keyframes blink{0%{opacity:.6}to{opacity:1}}