body { margin: 0; background: #111; color: #ddd; font: 14px system-ui, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; padding: 4px 12px; cursor: pointer; }
button:disabled { cursor: default; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 20px 0 6px; }

.card { max-width: 320px; margin: 15vh auto 0; padding: 24px; background: #1c1c1c; border-radius: 8px; }
.card label { display: block; margin-bottom: 12px; }
.card input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px; font: inherit; }
.error { color: #f77; min-height: 1em; }

main { display: flex; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 12px; align-items: flex-start; }
.stage { flex: 1; min-width: 0; }
.room { width: 260px; flex-shrink: 0; }
@media (max-width: 800px) { main { flex-direction: column; } .room { width: auto; } }

video { display: block; width: 100%; aspect-ratio: 256 / 240; background: #000; image-rendering: pixelated; }
.bar { display: flex; gap: 16px; align-items: center; margin: 8px 0; }
.keys { color: #aaa; }
.controls { margin: 8px 0 16px; color: #aaa; }
.controls summary { cursor: pointer; }
.bindings { list-style: none; padding: 0; margin: 8px 0; columns: 3 140px; }
.bindings li { display: flex; justify-content: space-between; gap: 8px; align-items: center; break-inside: avoid; padding-right: 16px; }
.pads { white-space: pre-line; }
button.small { padding: 1px 8px; }
.key { min-width: 90px; }
kbd { border: 1px solid #555; border-radius: 3px; padding: 0 4px; }
.mono { font-family: ui-monospace, monospace; white-space: pre; margin: 8px 0; }

.you { font-size: 16px; margin: 0 0 8px; }
.actions { display: flex; gap: 8px; }
ol, ul { margin: 0; padding-left: 22px; }
li { padding: 2px 0; }
.seats { list-style: none; padding: 0; }
.seats .port { display: inline-block; width: 28px; color: #999; }
.seats li { display: flex; gap: 6px; align-items: center; }
.seats .turn-left { margin-left: auto; font-variant-numeric: tabular-nums; }
.seats button { margin-left: auto; }
.seats .turn-left + button { margin-left: 0; }
.kick-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 0; }
.free { color: #777; font-style: italic; }
.me { color: #fd6; font-weight: 600; }
.offline { color: #777; }
.offline::after { content: " (away)"; }
.count, .empty { color: #777; font-weight: normal; }

.now-playing { font-size: 16px; margin: 0 0 8px; }
.badge { background: #a63; color: #fff; border-radius: 3px; padding: 1px 6px; font-size: 12px; vertical-align: middle; }

.library input[type=search] { width: 100%; box-sizing: border-box; padding: 6px; font: inherit; margin-bottom: 8px; }
.library h3 { font-size: 13px; color: #999; margin: 12px 0 4px; }
.games { list-style: none; padding: 0; margin: 0; columns: 2 220px; }
.games li { display: flex; justify-content: space-between; gap: 8px; align-items: center; break-inside: avoid; }
.games button { padding: 1px 8px; }
.current { color: #fd6; }

.vote { background: #1c1c1c; border-radius: 6px; padding: 4px 10px 10px; margin-top: 12px; }
.candidates { list-style: none; padding: 0; }
.candidates li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.candidates .mine { color: #fd6; font-weight: 600; }
.candidates button { padding: 1px 8px; }