/* Base : variables, reinitialisation, page, boutons, fenetres. */
:root { --bg:#15171f; --panel:#1f2230; --panel2:#181a24; --line:#2c3042; --line2:#3a3f55; --text:#e9ebf5; --muted:#8e93ab;
        --accent:#ff5a5f; --gold:#ffcf6b; --goldBg:rgba(255,207,107,.10); --mint:#5fd6a8; --shadow:0 10px 30px rgba(0,0,0,.35); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, sans-serif; }
#app { display:flex; flex-direction:column; gap:12px; padding:12px 18px 20px; max-width:1580px; margin:auto; }
#workspace { display:flex; gap:16px; align-items:stretch; width:100%; }
#main { flex:1; min-width:0; display:flex; flex-direction:column; }
#stage { position:relative; width:100%; }
#side { width:310px; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
#game { display:block; width:100%; aspect-ratio:5/3; border-radius:10px; background:#262b40; box-shadow:var(--shadow); }
.box { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.box h2 { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
#roster { list-style:none; margin:0; padding:0; max-height:170px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
#roster li { display:flex; gap:8px; align-items:center; padding:4px 6px; border-radius:8px; transition:background .15s; }
#roster li:nth-child(odd) { background:rgba(255,255,255,.025); }
#roster li.me { background:rgba(255,90,95,.09); border:1px solid rgba(255,90,95,.15); }
#roster .sw { width:16px; height:16px; flex:none; border-radius:3px; }
#roster .nm { flex:1; min-width:0; line-height:1.25; }
#roster .nm b { display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#roster .nm b em { margin-left:6px; padding:1px 6px; border-radius:99px; background:rgba(255,90,95,.18); color:#ff8e92; font-size:10px; font-style:normal; font-weight:800; }
#roster .nm small { display:block; font-size:10.5px; color:var(--gold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#roster .st { color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.roster-stats { display:inline-flex; align-items:center; gap:4px; flex:none; font-variant-numeric:tabular-nums; }
.roster-badge { display:inline-flex; align-items:center; justify-content:center; gap:3px; height:19px; padding:0 5px; border-radius:5px; font-size:10.5px; font-weight:700; line-height:1; white-space:nowrap; user-select:none; border:1px solid transparent; box-sizing:border-box; }
.roster-badge-rank { min-width:21px; padding:0 4px; font-size:10.5px; font-weight:800; }
.roster-badge-rank.rank-1 { background:rgba(255,207,107,.18); color:#ffcf6b; border-color:rgba(255,207,107,.45); box-shadow:0 0 6px rgba(255,207,107,.15); }
.roster-badge-rank.rank-2 { background:rgba(201,206,221,.18); color:#d5d9e8; border-color:rgba(201,206,221,.45); }
.roster-badge-rank.rank-3 { background:rgba(217,138,82,.18); color:#e59a68; border-color:rgba(217,138,82,.45); }
.roster-badge-rank.rank-other { background:rgba(255,255,255,.05); color:#a0a6bd; border-color:rgba(255,255,255,.10); }
.roster-badge-rank.rank-none { background:transparent; color:rgba(142,147,171,.35); border-color:rgba(255,255,255,.06); border-style:dashed; }
.roster-badge-level { background:rgba(255,207,107,.09); color:var(--gold); border-color:rgba(255,207,107,.22); }
.roster-badge-level .roster-lbl { font-size:8.5px; font-weight:700; opacity:.8; text-transform:uppercase; margin-right:-1px; letter-spacing:.02em; }
.roster-badge-deaths { background:rgba(255,90,95,.09); color:#ff7075; border-color:rgba(255,90,95,.22); }
.roster-badge-deaths .roster-skull-icon { width:9.5px; height:9.5px; flex:none; stroke:currentColor; }
.boards ol { max-height:none !important; overflow:visible !important; }
.bMine { display:flex; justify-content:space-between; gap:8px; margin-top:6px; padding:7px 2px 0; border-top:1px dashed var(--line2); font-size:13px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); }
.bMine[hidden] { display:none; }
.bMine.none { color:var(--muted); font-weight:600; }
.bMine span:last-child { color:inherit; }
.boards { display:block; }
.boards ol { margin:0; padding:0 0 0 18px; font-size:13px; font-variant-numeric:tabular-nums; max-height:130px; overflow-y:auto; }
.boards li { padding:2px 0; }
.boards li span { color:var(--muted); float:right; }
.boards li.me { color:var(--accent); font-weight:700; }
.boards .empty { color:var(--muted); font-size:12px; list-style:none; margin-left:-18px; }