[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111; color: #eee; font: 14px system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1c1c1c; border-bottom: 1px solid #333; flex-wrap: wrap; }
.brand { font-weight: 600; }
.players { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.status { color: #9a9a9a; font-size: 13px; }
.muted { color: #888; }
button { background: #2a2a2a; color: #eee; border: 1px solid #444; border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; }
button:hover { background: #353535; }
button.player { display: inline-flex; align-items: center; gap: 6px; }
button.player.active { background: #2f6f3e; border-color: #3fa055; }
header form { margin: 0; }
main { flex: 1; position: relative; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; image-rendering: auto; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #888; font-size: 16px; background: rgba(0,0,0,.55); pointer-events: none; }
body.login { display: grid; place-items: center; }
.card { background: #1c1c1c; border: 1px solid #333; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 12px; width: 300px; }
.card h1 { margin: 0 0 6px; font-size: 20px; text-align: center; }
.card input { padding: 10px; border-radius: 6px; border: 1px solid #444; background: #111; color: #eee; font: inherit; }
.err { color: #f66; margin: 0; text-align: center; }