:root{color-scheme:dark;--bg:#0c141b;--panel:#15242e;--line:#334953;--ink:#edf3ed;--muted:#a4b9bc;--olive:#b5c779;--blue:#64c6f2;--red:#f18b83;--gold:#ffcf66}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#243742,var(--bg) 65%);color:var(--ink);font:15px system-ui,sans-serif;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);gap:12px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--olive)}h1{font-size:23px;margin:3px 0}h1 small{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}h2{font-size:19px;margin:0 0 10px}h3{font-size:14px;margin:4px 0}p{line-height:1.5;color:var(--muted)}main{max-width:1120px;margin:18px auto;padding:0 18px}.panel{background:linear-gradient(130deg,#1b2e38,var(--panel));border:1px solid var(--line);border-radius:14px;padding:18px}.welcome{max-width:650px;margin:36px auto}.welcome h2{font-size:28px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.spread{justify-content:space-between}.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.selection{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.champion{display:flex;align-items:center;text-align:left;gap:8px;min-height:65px}.champion img{width:42px;height:42px;object-fit:cover;border-radius:50%;border:1px solid var(--line)}.champion small{display:block;color:var(--muted);font-size:10px}.chosen{outline:2px solid var(--olive);background:#31432d!important}.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}.skills label{display:flex;gap:8px;align-items:center;background:#0e1b23;padding:11px;border-radius:8px;min-height:44px}input[type=checkbox]{accent-color:var(--olive);width:17px;height:17px}button,input,select{font:inherit}button{border:1px solid #4a6268;background:#20343f;color:var(--ink);border-radius:8px;padding:10px 14px;cursor:pointer;min-height:42px;touch-action:manipulation}button:hover{border-color:var(--olive)}button.primary{background:var(--olive);color:#142017;font-weight:700;border-color:var(--olive)}button:disabled{opacity:.4;cursor:default}.subtle{background:transparent}.danger{border-color:var(--red)}input[type=text],select{background:#0a1921;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:11px;min-width:0}.join-form{display:flex;gap:8px;margin-top:10px}.join-form input{flex:1}.tag{display:inline-block;font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}.connection{font-size:12px;color:var(--olive)}.offline{color:var(--red)}.room-bar{margin-bottom:12px}.room-link{font-size:12px;color:var(--muted);overflow-wrap:anywhere;user-select:all}.teams{display:grid;gap:8px}.unit-card{padding:10px;border-left:3px solid var(--blue);background:#0d1c24;border-radius:6px}.unit-card.enemy{border-color:var(--red)}.unit-card.active{outline:1px solid var(--gold)}.unit-card p{font-size:12px;margin:4px 0}.unit-card img{width:32px;height:32px;object-fit:cover;border-radius:50%}.phase-text{font-size:12px;color:var(--muted)}.board-shell{padding:8px;background:radial-gradient(ellipse at center,#293d41,#101c26);border-radius:12px;border:1px solid var(--line)}svg{display:block;width:100%;max-height:53vh;user-select:none;touch-action:manipulation}.tile{fill:#43554e;stroke:#243835;stroke-width:.8;cursor:pointer}.tile:nth-child(odd){fill:#3b4e48}.tile.obstacle{fill:#6f7773;stroke:#c7cebf}.tile.zone{fill:#436b72;stroke:var(--blue)}.tile.reachable{fill:#4e7370;stroke:#89cac4}.tile.route{fill:#a99548;stroke:var(--gold);stroke-width:1.6}.tile.destination{fill:#d5b45b;stroke:#fff0bc;stroke-width:2}.trail{fill:none;stroke:var(--gold);stroke-width:3;stroke-linejoin:round;pointer-events:none}.champion-piece{pointer-events:none}.marker{fill:none;stroke-width:2;pointer-events:none}.board-note{min-height:38px;margin:9px 0;font-size:13px;color:var(--gold)}.timer{font-size:30px;font-variant-numeric:tabular-nums;color:var(--gold)}.turn{margin-top:12px}.toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);background:#263841;color:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:10px;max-width:90%;box-shadow:0 4px 20px #0008;z-index:10;display:none}footer{text-align:center;font-size:10px;color:var(--muted);padding:14px}#rotate{display:none;text-align:center;color:var(--gold);padding:6px;font-size:11px}.link-field{width:100%;font-size:11px!important;margin:8px 0}@media(max-width:800px){header{padding:8px 14px}h1{font-size:19px}main{margin:10px auto;padding:0 10px}.grid{grid-template-columns:minmax(0,1fr) 215px;gap:8px}.panel{padding:12px}.champion{padding:6px;font-size:12px}.champion img{width:30px;height:30px}.champion small{display:none}.skills label{font-size:12px;padding:8px}svg{max-height:58vh}.room-bar{font-size:12px}.welcome{margin:20px auto}.timer{font-size:25px}.unit-card{padding:7px}.board-note{font-size:11px}footer{padding:7px}}@media(orientation:portrait){#rotate{display:block}.grid{grid-template-columns:1fr}.teams{grid-template-columns:repeat(2,1fr)}svg{max-height:46vh}.selection{grid-template-columns:repeat(2,1fr)}}
#social{max-width:1100px;margin:12px auto;padding:0 14px} .social-panel{margin-top:12px} .social-panel form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:14px 0}.social-panel label{display:flex;flex-direction:column;gap:6px}.social-panel input{max-width:100%;min-width:180px}.social-row{padding:12px 0;border-bottom:1px solid #40545c;display:flex;gap:12px;align-items:center;flex-wrap:wrap}body.in-arena #social{display:none}


/* Notices stay above the arena and never intercept controls. */
.toast{top:env(safe-area-inset-top,0px);bottom:auto;pointer-events:none;max-width:min(90%,560px);font-size:13px;padding:6px 12px;}

.controller-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.controller-layout label{display:flex;flex-direction:column;gap:6px}.controller-layout select{width:100%;min-height:44px}
@media(max-width:480px){.controller-layout{grid-template-columns:1fr}}

body.in-arena .toast{top:30%;bottom:auto;z-index:1000;pointer-events:none;padding:8px 14px;background:#071d30e8;border-color:#d5b66d;font-size:14px;max-width:min(80vw,420px)}
.collapse-damage-preview{fill:#fff3bb;stroke:#10212c;stroke-width:2.5;paint-order:stroke;font-size:15px;font-weight:800;pointer-events:none}.timer.urgent{color:#ff8b79}