:root{--bg:#f6f6f9;--fg:#16161d;--card:#fff;--mut:#6b6b7b;--acc:#7c5cff;--bd:#e2e2ea;--ok:#22a06b;--warn:#d9822b;--bad:#d64545}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0f14;--fg:#ececf3;--card:#181820;--mut:#9a9aae;--bd:#2a2a36}}
:root[data-theme=dark]{--bg:#0f0f14;--fg:#ececf3;--card:#181820;--mut:#9a9aae;--bd:#2a2a36}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,Segoe UI,sans-serif}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bd);background:var(--card);flex-wrap:wrap}
.logo{color:var(--acc);font-size:18px}.tag{color:var(--mut);font-size:12px}
nav{display:flex;gap:14px;margin-left:auto}nav a{color:var(--fg);text-decoration:none;padding:4px 2px}nav a:hover{color:var(--acc)}
main{padding:16px;max-width:1400px;margin:0 auto}
button,input,select{font:inherit;color:inherit}
button{background:var(--acc);color:#fff;border:0;border-radius:6px;padding:7px 12px;cursor:pointer}
button.sec{background:transparent;color:var(--fg);border:1px solid var(--bd)}
button.bad{background:var(--bad)}button:disabled{opacity:.5}
#theme{background:transparent;color:var(--fg);font-size:18px;padding:2px 8px}
input{background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:8px;width:100%}
label{display:block;margin:10px 0 4px;color:var(--mut);font-size:13px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:16px}
.narrow{max-width:380px;margin:8vh auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{cursor:pointer;display:flex;flex-direction:column;gap:6px}
.tile.off{opacity:.55;cursor:default}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mut);margin-right:6px}
.dot.live{background:var(--ok)}.dot.game_restarting,.dot.reconnecting{background:var(--warn)}
.mut{color:var(--mut);font-size:13px}
.badge{font-size:12px;background:var(--warn);color:#fff;border-radius:4px;padding:1px 6px}
.players{display:grid;gap:8px;height:calc(100vh - 140px)}
.players.n1{grid-template-columns:1fr}.players.n2{grid-template-columns:1fr 1fr}
.players.n3,.players.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.players.focus{grid-template-columns:4fr 1fr;grid-template-rows:repeat(3,1fr)}
.players.focus .player.big{grid-row:1/4}
.player{position:relative;background:#000;border-radius:8px;overflow:hidden;min-height:0}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player .bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;padding:6px 8px;background:linear-gradient(transparent,#000a);color:#fff;font-size:13px;opacity:0;transition:opacity .15s}
.player:hover .bar{opacity:1}
.player .bar input{width:90px;padding:0}
.player .stats{position:absolute;top:6px;left:6px;background:#000b;color:#9f9;font:12px/1.3 monospace;padding:4px 6px;border-radius:4px;white-space:pre;pointer-events:none}
.player .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#000c;text-align:center}
table{width:100%;border-collapse:collapse}td,th{padding:6px;border-bottom:1px solid var(--bd);text-align:left}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
pre,code{background:var(--bg);padding:2px 6px;border-radius:4px;word-break:break-all}
.err{color:var(--bad);min-height:1.2em}
@media(max-width:700px){.players.n2,.players.n3,.players.n4,.players.focus{grid-template-columns:1fr;grid-template-rows:none;height:auto}.player{aspect-ratio:16/9}.players.focus .player.big{grid-row:auto}}
[hidden]{display:none!important}

.rbadge{position:absolute;top:8px;right:8px;background:var(--warn);color:#fff;font-size:12px;padding:2px 8px;border-radius:4px;pointer-events:none}
.players.n1{height:auto;grid-template-columns:1fr}
.players.n1 .player{aspect-ratio:16/9;width:min(100%,calc((100vh - 150px)*16/9));margin:0 auto}