:root { --bg:#14101f; --panel:#1d1633; --line:#3a2d57; --ink:#ece8ff; --muted:#a89ccf; --accent:#ff4fa3; --blue:#5ad1ff; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
#app { max-width:1360px; margin:0 auto; padding:14px; }
h1 { font-size:28px; margin:8px 0 4px; } h1 small { font-size:14px; color:var(--muted); font-weight:400; margin-left:8px; }
h2 { font-size:18px; margin:22px 0 8px; } h3 { margin:0 0 6px; font-size:15px; } h3 small { color:var(--muted); font-weight:400; }
.lead { color:var(--muted); max-width:760px; }
.menu { max-width:980px; margin:0 auto; }
.row { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin:12px 0; }
.teams { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0; }
fieldset.team { border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:10px 14px 12px; }
fieldset.team legend { padding:0 8px; color:var(--muted); }
.slot { display:flex; gap:12px; align-items:center; margin:6px 0; }
select, input[type=text], input:not([type]) { background:#0f0b1c; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; }
select { min-width:150px; }
.err { color:#ffb36b; font-size:13px; min-height:18px; }
button { font:inherit; border:1px solid var(--line); background:#2a1f4d; color:var(--ink); border-radius:10px; padding:8px 16px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--blue); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
button.ghost { background:transparent; }
table.chars { width:100%; border-collapse:collapse; font-size:14px; }
table.chars th, table.chars td { border-top:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
table.chars th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.note { color:var(--muted); font-size:13px; }
code { background:#0f0b1c; border-radius:5px; padding:1px 5px; }
.rulesbox { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 18px; max-width:860px; }
.rulesbox li { margin:6px 0; }

.game { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.stagewrap { position:relative; background:#1a1330; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
svg.board { display:block; width:100%; height:auto; user-select:none; touch-action:none; }
svg.board text { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.side { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; }
.log { height:480px; overflow:auto; font-size:13px; line-height:1.45; background:#0f0b1c; border:1px solid var(--line); border-radius:8px; padding:8px; }
.log div { margin:2px 0; color:#d7d0f2; } .log div.head { color:var(--blue); margin-top:8px; font-weight:700; }
.sidebtns { margin-top:10px; display:flex; gap:8px; }
.overlay { position:absolute; inset:0; background:rgba(10,7,22,.86); display:flex; align-items:center; justify-content:center; padding:14px; overflow:auto; }
.overlay[hidden] { display:none; }
.overlay .card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 26px; max-width:520px; text-align:center; }
.overlay .card.wide { max-width:760px; text-align:left; }
.overlay .row { justify-content:center; }
pre.fulllog { max-height:240px; overflow:auto; background:#0f0b1c; padding:8px; border-radius:8px; font-size:12px; white-space:pre-wrap; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.pop { animation: pop 1.6s ease-out forwards; }
@keyframes pop { 0% { transform:translateY(8px); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(-14px); opacity:1; } }
g.fig { transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s; }
fieldset.online { margin:14px 0; }
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing:.15em; color:var(--blue); }
.warn { color:#ffb36b; } .ok { color:#5fe08f; }
.netbox { background:#0f0b1c; border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:10px; font-size:13px; }
#sharelink { word-break:break-all; }
@media (max-width:980px) { .game { grid-template-columns:1fr; } .teams { grid-template-columns:1fr; } .log { height:200px; } }
@media (prefers-reduced-motion: reduce) { g.fig { transition:none; } .pulse, .pop { animation:none; } }