:root{--bg:#14151c;--panel:#1e2029;--panel2:#2a2d3a;--text:#e8e9f0;--muted:#9a9db0;--accent:#6e7cff;--danger:#e5484d}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,Hiragino Sans,Yu Gothic UI,sans-serif;font-size:14px}h1,h2,h3{margin:0 0 8px}h3 small{color:var(--muted);margin-left:8px;font-weight:400}.muted{color:var(--muted);font-size:12px}.center{text-align:center;padding:48px;line-height:2}button{background:var(--panel2);color:var(--text);cursor:pointer;font:inherit;border:1px solid #3a3e50;border-radius:8px;padding:8px 12px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);font-weight:700}button.danger{color:var(--danger)}.panel{background:var(--panel);border-radius:12px;padding:14px}.select{max-width:1100px;margin:0 auto;padding:24px 16px 96px}.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:16px 0;display:grid}.chara{text-align:left;background:var(--panel);border:2px solid;flex-direction:column;gap:4px;padding:10px;display:flex;position:relative}.chara.picked{background:#2c3050}.chara .stats,.unit .stats{color:var(--muted);font-size:11px}.badge{background:var(--accent);border-radius:6px;padding:1px 6px;font-size:11px;position:absolute;top:6px;right:6px}.loadouts{gap:12px;display:grid}.moves{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;display:grid}.moves label{background:var(--panel2);cursor:pointer;border:1px solid #0000;border-radius:8px;grid-template-columns:auto 1fr;gap:0 8px;padding:6px 8px;display:grid}.moves label.on{border-color:var(--accent)}.moves label .muted{grid-column:2}.bar{text-align:center;background:#0d0e13;border-top:1px solid #2a2d3a;padding:12px;position:fixed;bottom:0;left:0;right:0}.battle{gap:12px;max-width:1100px;margin:0 auto;padding:12px 16px 48px;display:grid}.top{background:var(--panel);border-radius:12px;align-items:center;gap:16px;padding:8px 14px;display:flex}.top button{margin-left:auto}.field{background:radial-gradient(circle,#232640,#181a24);border-radius:16px;gap:14px;padding:14px;display:grid;position:relative}.row{justify-content:center;align-items:flex-end;gap:10px;display:flex}.side.foe .row{align-items:flex-start}.unit{background:var(--panel);border:2px solid;border-radius:12px;flex-direction:column;flex:1;gap:3px;max-width:240px;padding:8px 10px;display:flex}.unit.big{background:var(--panel2);max-width:300px;padding:12px;transform:scale(1.04)}.unit.dead{opacity:.35;filter:grayscale()}.unit.clickable{cursor:pointer;box-shadow:0 0 0 3px var(--accent)}.unit .pos{color:var(--muted);font-size:11px}.hpbar{background:#0d0e13;border-radius:4px;height:8px;overflow:hidden}.hpbar>div{height:100%;transition:width .4s}.hp{font-size:12px}.tags{flex-wrap:wrap;gap:3px;min-height:4px;display:flex}.tag{background:#3a3e50;border-radius:4px;padding:1px 5px;font-size:10px;font-style:normal}.tag.poison{background:#7a3fa3}.tag.conf{background:#b8770b}.tag.buff{background:#2f5d8a}.controls{gap:10px;display:grid}.hand{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}.card{text-align:left;background:#2a2540;border-color:#4a4470;flex-direction:column;gap:3px;width:190px;display:flex}.card .cost{color:#f3c969;font-size:12px}.skillrow{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 12px;display:flex}.movegrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:10px;display:grid}.move{text-align:left;flex-direction:column;gap:3px;display:flex}.rot{flex-wrap:wrap;gap:8px;display:flex}.hint{color:#f3c969}.error{color:#ffb3b6;background:#4a1d20;border-radius:8px;padding:8px 12px}.result{text-align:center;background:var(--panel);border-radius:12px;padding:16px}.log{max-height:260px;font-size:13px;line-height:1.7;overflow-y:auto}.log small{color:var(--muted);margin-right:6px}.line.foe{color:#ffb3b6}.line.me{color:#b9c4ff}.line.turn{color:var(--muted);border-top:1px solid #2a2d3a;margin-top:6px;padding-top:4px}.line.win{color:#f3c969;font-weight:700}@media (max-width:700px){.unit{padding:6px}.unit.big{transform:none}}.banner{z-index:5;text-align:center;pointer-events:none;background:#0a0b12e0;border:2px solid #4a4e66;border-radius:12px;max-width:92%;padding:10px 24px;font-size:22px;font-weight:700;animation:.25s ease-out pop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 30px #0009}.banner.me{border-color:#6e7cff}.banner.foe{border-color:#e5484d}.banner.move{font-size:26px}.banner.damage{color:#ffd0d2}.banner.faint{color:#ff8c91}.banner.heal{color:#9ff0c0}.banner.win{color:#f3c969;font-size:28px}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.unit.hit{box-shadow:0 0 0 3px var(--danger), 0 0 18px var(--danger);animation:.45s shake}.unit.heal{animation:.7s glow;box-shadow:0 0 0 3px #30a46c,0 0 18px #30a46c}@keyframes shake{0%,to{translate:0}15%{translate:-8px}30%{translate:8px}45%{translate:-6px}60%{translate:6px}80%{translate:-2px}}@keyframes glow{0%{filter:brightness(1.8)}to{filter:brightness()}}.banner .detail{color:#c9ccdd;margin-top:6px;font-size:14px;font-weight:400}.menu{align-content:center;justify-items:center;gap:14px;min-height:80vh;display:grid}.menu button{min-width:260px;padding:14px 20px;font-size:16px}.code{letter-spacing:8px;color:#f3c969;margin:8px 0;font-size:44px;font-weight:700}input.text{width:100%;color:var(--text);font:inherit;background:#0d0e13;border:1px solid #3a3e50;border-radius:8px;margin-top:4px;padding:9px 12px}.timer{color:#f3c969;font-variant-numeric:tabular-nums;margin-left:auto;margin-right:8px}.timer.low{color:var(--danger);font-weight:700}.top .timer+button{margin-left:0}
