:root { --bg:#111214; --card:#1b1d21; --line:#2a2d33; --fg:#e6e6e6; --dim:#8b9099; --acc:#e0a526; --red:#e5484d; --blue:#3e8ef7; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; display: flex; flex-direction: column; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; }
.logo { background: var(--acc); color: #000; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; }
.me { display: flex; align-items: center; gap: 8px; }
.me label { color: var(--dim); }
input { background: #0c0d0f; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; }
input:focus { outline: none; border-color: var(--acc); }
.btn { background: var(--acc); color: #000; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
main { flex: 1; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr); gap: 16px; padding: 16px 20px; min-height: 0; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
h2 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
h2 small { color: var(--dim); font-weight: 400; }
h3 { margin: 0 0 4px; font-size: 13px; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #2b6b3a; }
.pill.off { background: #5a2626; }
dl { display: grid; grid-template-columns: 80px 1fr; margin: 0 0 12px; row-gap: 4px; }
dt { color: var(--dim); } dd { margin: 0; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team { background: #15171a; border-radius: 8px; padding: 8px 10px; }
.team.red h3 { color: var(--red); } .team.blue h3 { color: var(--blue); }
.team ol { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.team li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.team li span:last-child { color: var(--dim); }
.team.hidden { display: none; }
#log { flex: 1; overflow-y: auto; min-height: 240px; padding-right: 4px; }
.line { padding: 2px 0; word-wrap: break-word; }
.line time { color: var(--dim); font-size: 11px; margin-right: 6px; }
.line .from { font-weight: 600; margin-right: 4px; }
.line.game .from::before { content: "🎮 "; }
.line.sys { color: var(--dim); font-style: italic; }
#say { display: flex; gap: 8px; margin-top: 10px; }
#say input { flex: 1; }
footer { color: var(--dim); font-size: 12px; padding: 8px 20px; border-top: 1px solid var(--line); }
footer a { color: var(--dim); }