:root { color-scheme: dark; --bg: #0b0b10; --fg: #eee; --accent: #ffe600; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); color: var(--fg); font-family: monospace;
}
main { text-align: center; }
#join { width: min(420px, 92vw); }
canvas { display: block; margin: 0 auto; background: #000; touch-action: none; } /* touch-action: el dedo dibuja en Garabatos de Temmie y no mueve la página */
.hud, #status { margin: 6px 0 0; font-size: 13px; }
#status:empty { display: none; }
#playerList { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 6px 0 0; font-size: 13px; }

input, button { font: inherit; padding: 8px 12px; border: 2px solid var(--fg); background: #000; color: var(--fg); }
button { color: var(--accent); border-color: var(--accent); cursor: pointer; }

ul { list-style: none; padding: 0; }
li.me { color: var(--accent); }
.muted { color: #888; }