: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:960px;height:640px;overflow:hidden;border-radius:10px}#app canvas{display:block}.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}.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}}