From 8854e1367158bea764a53b9cbbf7b8a5e18f3ba7 Mon Sep 17 00:00:00 2001
From: KeshavAnandCode <keshavanand.dev@gmail.com>
Date: Fri, 20 Mar 2026 18:22:15 -0500
Subject: [PATCH] vibe coding is the best

---
 src/public/index.html | 1974 ++---------------------------------------
 src/public/script.js  |  625 +++++++++++++
 src/public/styles.css | 1215 +++++++++++++++++++++++++
 src/rooms.ts          |   39 +-
 src/server.ts         |    7 +-
 src/ws-handler.ts     |   88 +-
 6 files changed, 1988 insertions(+), 1960 deletions(-)
 create mode 100644 src/public/script.js
 create mode 100644 src/public/styles.css

diff --git a/src/public/index.html b/src/public/index.html
index fc58a38..ae6398c 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -9,1199 +9,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap"
     rel="stylesheet" />
-  <style>
-    /* ── RESET & BASE ─────────────────────────────────────────────── */
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    html {
-      font-size: 16px;
-    }
-
-    body {
-      font-family: 'JetBrains Mono', monospace;
-      background: #060906;
-      color: #c8ffcc;
-      min-height: 100dvh;
-      overflow-x: hidden;
-    }
-
-    ::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: #0a0f0a;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: #1a4a1a;
-      border-radius: 2px;
-    }
-
-    /* ── TOKENS ───────────────────────────────────────────────────── */
-    :root {
-      --g: #00ff41;
-      --g2: #00cc34;
-      --g3: #007a1f;
-      --gdark: #001a07;
-      --bg: #060906;
-      --bg2: #0a0f0a;
-      --bg3: #0f160f;
-      --panel: #0c140c;
-      --border: #1a3a1a;
-      --bhi: #00ff41;
-      --text: #c8ffcc;
-      --dim: #4a8a54;
-      --mid: #7abf84;
-      --red: #ff4444;
-      --yellow: #ffe141;
-      --cyan: #41ffe4;
-      --r: 4px;
-    }
-
-    /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
-    .mono {
-      font-family: 'JetBrains Mono', monospace;
-    }
-
-    .glow {
-      text-shadow: 0 0 12px var(--g), 0 0 24px rgba(0, 255, 65, .3);
-    }
-
-    /* ── LAYOUT ───────────────────────────────────────────────────── */
-    #app {
-      min-height: 100dvh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 0 20px;
-      height: 52px;
-      min-height: 52px;
-      background: var(--bg2);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 200;
-    }
-
-    .logo {
-      font-size: 18px;
-      font-weight: 800;
-      letter-spacing: 6px;
-      color: var(--g);
-      text-shadow: 0 0 10px var(--g);
-    }
-
-    .logo-sub {
-      font-size: 9px;
-      color: var(--dim);
-      letter-spacing: 2px;
-      margin-top: -2px;
-    }
-
-    .hdr-r {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      gap: 14px;
-    }
-
-    .room-chip {
-      font-size: 11px;
-      letter-spacing: 3px;
-      color: var(--g2);
-      display: none;
-    }
-
-    .conn-pill {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      font-size: 10px;
-      color: var(--dim);
-      letter-spacing: 1px;
-    }
-
-    .conn-dot {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: var(--red);
-      flex-shrink: 0;
-      transition: background .3s, box-shadow .3s;
-    }
-
-    .conn-dot.on {
-      background: var(--g);
-      box-shadow: 0 0 6px var(--g);
-    }
-
-    /* ── SCREENS ──────────────────────────────────────────────────── */
-    .scr {
-      display: none;
-      flex: 1;
-    }
-
-    .scr.on {
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* ════════════════════════════════════════════════════════════════
-   LANDING
-   ════════════════════════════════════════════════════════════════ */
-    #s-land {
-      align-items: center;
-      justify-content: center;
-      padding: 40px 20px;
-      gap: 40px;
-    }
-
-    .hero {
-      text-align: center;
-    }
-
-    .hero h1 {
-      font-size: clamp(40px, 10vw, 80px);
-      font-weight: 800;
-      letter-spacing: 10px;
-      color: var(--g);
-      text-shadow: 0 0 30px var(--g), 0 0 60px rgba(0, 255, 65, .25);
-      line-height: 1;
-    }
-
-    .hero p {
-      font-size: 11px;
-      color: var(--dim);
-      letter-spacing: 4px;
-      margin-top: 10px;
-    }
-
-    .land-cards {
-      display: flex;
-      gap: 16px;
-      flex-wrap: wrap;
-      justify-content: center;
-      width: 100%;
-      max-width: 700px;
-    }
-
-    .land-card {
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-      padding: 28px 24px;
-      flex: 1;
-      min-width: 260px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      transition: border-color .2s;
-    }
-
-    .land-card:hover {
-      border-color: var(--g3);
-    }
-
-    .land-card h2 {
-      font-size: 11px;
-      letter-spacing: 3px;
-      color: var(--g);
-    }
-
-    .land-card p {
-      font-size: 12px;
-      color: var(--dim);
-      line-height: 1.7;
-    }
-
-    .rejoin-bar {
-      font-size: 11px;
-      color: var(--dim);
-    }
-
-    .rejoin-bar a {
-      color: var(--g2);
-      text-decoration: none;
-      letter-spacing: 1px;
-    }
-
-    .rejoin-bar a:hover {
-      color: var(--g);
-    }
-
-    /* ════════════════════════════════════════════════════════════════
-   MOD SETUP (pre-game lobby)
-   ════════════════════════════════════════════════════════════════ */
-    #s-setup {
-      align-items: center;
-      padding: 32px 20px;
-      gap: 0;
-      overflow-y: auto;
-    }
-
-    .setup-wrap {
-      width: 100%;
-      max-width: 600px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }
-
-    .setup-title {
-      font-size: 12px;
-      letter-spacing: 4px;
-      color: var(--g);
-      margin-bottom: 4px;
-    }
-
-    .setup-sub {
-      font-size: 11px;
-      color: var(--dim);
-      letter-spacing: 1px;
-    }
-
-    /* ════════════════════════════════════════════════════════════════
-   FORM ATOMS
-   ════════════════════════════════════════════════════════════════ */
-    .field {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    label,
-    .lbl {
-      font-size: 10px;
-      letter-spacing: 1.5px;
-      color: var(--dim);
-    }
-
-    input[type=text],
-    input[type=number],
-    select {
-      background: var(--bg3);
-      border: 1px solid var(--border);
-      color: var(--text);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 15px;
-      padding: 10px 12px;
-      border-radius: var(--r);
-      width: 100%;
-      outline: none;
-      transition: border-color .15s;
-    }
-
-    input:focus,
-    select:focus {
-      border-color: var(--g2);
-    }
-
-    input::placeholder {
-      color: var(--dim);
-      font-size: 13px;
-    }
-
-    select option {
-      background: var(--bg3);
-    }
-
-    /* segmented control */
-    .seg {
-      display: flex;
-      gap: 0;
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-      overflow: hidden;
-    }
-
-    .seg-opt {
-      flex: 1;
-      padding: 10px;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 12px;
-      letter-spacing: 1px;
-      text-align: center;
-      cursor: pointer;
-      color: var(--dim);
-      background: var(--bg3);
-      border: none;
-      transition: all .15s;
-    }
-
-    .seg-opt.active {
-      background: var(--gdark);
-      color: var(--g);
-      border-color: var(--g2);
-    }
-
-    .seg-opt:hover:not(.active) {
-      color: var(--text);
-    }
-
-    /* toggle */
-    .tog-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 0;
-      border-bottom: 1px solid var(--border);
-      gap: 12px;
-    }
-
-    .tog-row:last-child {
-      border-bottom: none;
-    }
-
-    .tog-row .lbl {
-      font-size: 12px;
-      color: var(--text);
-      letter-spacing: 0;
-      line-height: 1.4;
-    }
-
-    .tog-row .lbl-sub {
-      font-size: 10px;
-      color: var(--dim);
-      margin-top: 2px;
-    }
-
-    .tog {
-      position: relative;
-      width: 40px;
-      height: 22px;
-      flex-shrink: 0;
-    }
-
-    .tog input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-      position: absolute;
-    }
-
-    .tog-track {
-      position: absolute;
-      inset: 0;
-      background: var(--bg3);
-      border: 1px solid var(--border);
-      border-radius: 11px;
-      cursor: pointer;
-      transition: background .2s, border-color .2s;
-    }
-
-    .tog input:checked~.tog-track {
-      background: var(--gdark);
-      border-color: var(--g2);
-    }
-
-    .tog-track::after {
-      content: '';
-      position: absolute;
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      background: var(--dim);
-      top: 3px;
-      left: 3px;
-      transition: all .2s;
-    }
-
-    .tog input:checked~.tog-track::after {
-      background: var(--g);
-      left: 21px;
-    }
-
-    /* ── BUTTONS ──────────────────────────────────────────────────── */
-    .btn {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 12px;
-      letter-spacing: 2px;
-      padding: 11px 20px;
-      border: 1px solid;
-      border-radius: var(--r);
-      cursor: pointer;
-      transition: all .15s;
-      text-transform: uppercase;
-      white-space: nowrap;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-
-    .btn-g {
-      border-color: var(--g);
-      color: var(--g);
-      background: transparent;
-    }
-
-    .btn-g:hover {
-      background: var(--g);
-      color: var(--bg);
-    }
-
-    .btn-ghost {
-      border-color: var(--border);
-      color: var(--dim);
-      background: transparent;
-    }
-
-    .btn-ghost:hover {
-      border-color: var(--mid);
-      color: var(--text);
-    }
-
-    .btn-red {
-      border-color: var(--red);
-      color: var(--red);
-      background: transparent;
-    }
-
-    .btn-red:hover {
-      background: var(--red);
-      color: var(--bg);
-    }
-
-    .btn-yellow {
-      border-color: var(--yellow);
-      color: var(--yellow);
-      background: transparent;
-    }
-
-    .btn-yellow:hover {
-      background: var(--yellow);
-      color: var(--bg);
-    }
-
-    .btn-sm {
-      padding: 7px 12px;
-      font-size: 10px;
-      letter-spacing: 1px;
-    }
-
-    .btn-full {
-      width: 100%;
-    }
-
-    .btn:disabled {
-      opacity: .4;
-      cursor: not-allowed;
-    }
-
-    /* ── PANEL / CARD ─────────────────────────────────────────────── */
-    .panel {
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-      padding: 20px;
-    }
-
-    .panel-title {
-      font-size: 10px;
-      letter-spacing: 3px;
-      color: var(--g);
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .divider {
-      border: none;
-      border-top: 1px solid var(--border);
-      margin: 2px 0;
-    }
-
-    /* ── TAG / BADGE ──────────────────────────────────────────────── */
-    .tag {
-      display: inline-block;
-      padding: 2px 8px;
-      font-size: 9px;
-      letter-spacing: 1px;
-      border: 1px solid;
-      border-radius: 2px;
-      font-family: 'JetBrains Mono', monospace;
-    }
-
-    .tag-g {
-      border-color: var(--g2);
-      color: var(--g2);
-    }
-
-    .tag-red {
-      border-color: var(--red);
-      color: var(--red);
-    }
-
-    .tag-y {
-      border-color: var(--yellow);
-      color: var(--yellow);
-    }
-
-    .tag-dim {
-      border-color: var(--border);
-      color: var(--dim);
-    }
-
-    /* ════════════════════════════════════════════════════════════════
-   MOD GAME SCREEN
-   ════════════════════════════════════════════════════════════════ */
-    #s-mod {
-      flex-direction: row;
-      overflow: hidden;
-      height: calc(100dvh - 52px);
-    }
-
-    .mod-side {
-      width: 260px;
-      min-width: 260px;
-      background: var(--bg2);
-      border-right: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      overflow-y: auto;
-    }
-
-    .mod-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .side-sec {
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .side-sec h3 {
-      font-size: 9px;
-      letter-spacing: 3px;
-      color: var(--dim);
-      margin-bottom: 10px;
-    }
-
-    .side-room-code {
-      font-size: 26px;
-      font-weight: 700;
-      letter-spacing: 8px;
-      color: var(--g);
-      line-height: 1;
-    }
-
-    .side-btn-group {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-top: 8px;
-    }
-
-    /* timer strip */
-    .timer-strip {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .timer-display {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--g);
-      min-width: 64px;
-    }
-
-    .timer-display.warn {
-      color: var(--yellow);
-      text-shadow: 0 0 10px var(--yellow);
-    }
-
-    .timer-display.danger {
-      color: var(--red);
-      text-shadow: 0 0 10px var(--red);
-      animation: blink .5s step-end infinite;
-    }
-
-    @keyframes blink {
-      50% {
-        opacity: .3;
-      }
-    }
-
-    .timer-set {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: var(--dim);
-    }
-
-    .timer-set input {
-      width: 56px;
-      padding: 5px 8px;
-      font-size: 13px;
-    }
-
-    /* tabs */
-    .tab-bar {
-      display: flex;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .tab {
-      padding: 10px 16px;
-      font-size: 10px;
-      letter-spacing: 2px;
-      color: var(--dim);
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-      transition: all .15s;
-    }
-
-    .tab:hover {
-      color: var(--text);
-    }
-
-    .tab.on {
-      color: var(--g);
-      border-bottom-color: var(--g);
-    }
-
-    /* buzz list */
-    .buzz-list {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    .bz-entry {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 14px;
-      background: var(--bg3);
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-    }
-
-    .bz-rank {
-      font-size: 20px;
-      font-weight: 700;
-      color: var(--g2);
-      width: 28px;
-      text-align: center;
-      flex-shrink: 0;
-    }
-
-    .bz-rank.first {
-      color: var(--yellow);
-      text-shadow: 0 0 8px var(--yellow);
-    }
-
-    .bz-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .bz-name {
-      font-size: 15px;
-      font-weight: 600;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .bz-team {
-      font-size: 11px;
-      margin-top: 2px;
-    }
-
-    .bz-ms {
-      font-size: 10px;
-      color: var(--dim);
-      margin-top: 2px;
-    }
-
-    /* players table */
-    .player-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-    }
-
-    .pl-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 10px 0;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .pl-row:last-child {
-      border-bottom: none;
-    }
-
-    .pl-row.offline {
-      opacity: .4;
-    }
-
-    .pl-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .pl-name {
-      font-size: 14px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .pl-meta {
-      font-size: 10px;
-      color: var(--dim);
-      margin-top: 2px;
-    }
-
-    .pl-actions {
-      display: flex;
-      gap: 5px;
-      flex-shrink: 0;
-    }
-
-    /* team grid (mod) */
-    .team-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-      gap: 10px;
-    }
-
-    .team-card {
-      background: var(--bg3);
-      border: 1px solid;
-      border-radius: var(--r);
-      padding: 14px;
-      text-align: center;
-    }
-
-    .team-card .tc-n {
-      font-size: 10px;
-      letter-spacing: 2px;
-      margin-bottom: 6px;
-    }
-
-    .team-card .tc-c {
-      font-size: 24px;
-      font-weight: 700;
-    }
-
-    .team-card .tc-m {
-      font-size: 11px;
-      color: var(--dim);
-      margin-top: 4px;
-    }
-
-    /* settings in mod */
-    .setting-row {
-      padding: 10px 0;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-    }
-
-    .setting-row:last-child {
-      border-bottom: none;
-    }
-
-    .setting-row .sl {
-      font-size: 12px;
-    }
-
-    .setting-row .sd {
-      font-size: 10px;
-      color: var(--dim);
-      margin-top: 2px;
-    }
-
-    /* ════════════════════════════════════════════════════════════════
-   PLAYER GAME SCREEN
-   ════════════════════════════════════════════════════════════════ */
-    #s-player {
-      align-items: center;
-      padding: 24px 20px 32px;
-      gap: 24px;
-      overflow-y: auto;
-    }
-
-    .p-room {
-      text-align: center;
-    }
-
-    .p-room-code {
-      font-size: 30px;
-      font-weight: 700;
-      letter-spacing: 8px;
-      color: var(--g);
-    }
-
-    .p-room-lbl {
-      font-size: 9px;
-      letter-spacing: 2px;
-      color: var(--dim);
-      margin-top: 4px;
-    }
-
-    .p-name-lbl {
-      font-size: 13px;
-      color: var(--mid);
-      margin-top: 6px;
-    }
-
-    /* the big buzzer button */
-    .buzz-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 14px;
-    }
-
-    #buzz-btn {
-      width: clamp(200px, 50vw, 260px);
-      height: clamp(200px, 50vw, 260px);
-      border-radius: 50%;
-      border: 3px solid var(--g);
-      background: rgba(0, 255, 65, .04);
-      color: var(--g);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: clamp(15px, 3.5vw, 20px);
-      font-weight: 700;
-      letter-spacing: 4px;
-      cursor: pointer;
-      transition: all .12s;
-      box-shadow: 0 0 30px rgba(0, 255, 65, .1), inset 0 0 30px rgba(0, 255, 65, .03);
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    #buzz-btn:active:not(:disabled) {
-      transform: scale(.95);
-    }
-
-    #buzz-btn:disabled {
-      cursor: not-allowed;
-    }
-
-    #buzz-btn.s-open {
-      border-color: var(--g);
-      color: var(--g);
-      box-shadow: 0 0 40px rgba(0, 255, 65, .2), inset 0 0 30px rgba(0, 255, 65, .05);
-    }
-
-    #buzz-btn.s-first {
-      border-color: var(--yellow);
-      color: var(--yellow);
-      box-shadow: 0 0 50px rgba(255, 225, 65, .4);
-      animation: pulse-win .8s ease-in-out infinite alternate;
-    }
-
-    #buzz-btn.s-buzzed {
-      border-color: var(--g2);
-      color: var(--g2);
-      opacity: .7;
-    }
-
-    #buzz-btn.s-locked {
-      border-color: var(--red);
-      color: var(--red);
-      box-shadow: 0 0 20px rgba(255, 68, 68, .15);
-    }
-
-    #buzz-btn.s-closed {
-      border-color: var(--border);
-      color: var(--dim);
-    }
-
-    @keyframes pulse-win {
-      from {
-        box-shadow: 0 0 30px rgba(255, 225, 65, .3);
-      }
-
-      to {
-        box-shadow: 0 0 80px rgba(255, 225, 65, .7);
-      }
-    }
-
-    .buzz-status {
-      font-size: 12px;
-      letter-spacing: 2px;
-      color: var(--dim);
-      text-align: center;
-      min-height: 20px;
-    }
-
-    /* player timer display */
-    .p-timer {
-      font-size: 42px;
-      font-weight: 700;
-      color: var(--g);
-      letter-spacing: 2px;
-      text-align: center;
-    }
-
-    .p-timer.warn {
-      color: var(--yellow);
-    }
-
-    .p-timer.danger {
-      color: var(--red);
-      animation: blink .5s step-end infinite;
-    }
-
-    .p-timer.hidden {
-      display: none;
-    }
-
-    /* team picker */
-    .team-picker {
-      width: 100%;
-      max-width: 480px;
-    }
-
-    .team-picker-title {
-      font-size: 10px;
-      letter-spacing: 3px;
-      color: var(--dim);
-      margin-bottom: 12px;
-    }
-
-    .team-picker-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-      gap: 8px;
-    }
-
-    .team-btn {
-      padding: 14px 10px;
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-      background: var(--bg3);
-      color: var(--text);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 12px;
-      letter-spacing: 2px;
-      cursor: pointer;
-      text-align: center;
-      transition: all .15s;
-    }
-
-    .team-btn:hover {
-      border-color: var(--mid);
-    }
-
-    .team-btn.mine {
-      border-width: 2px;
-      font-weight: 700;
-    }
-
-    .team-btn .tb-count {
-      font-size: 10px;
-      color: var(--dim);
-      margin-top: 4px;
-    }
-
-    /* scoreboard / feed */
-    .p-panel {
-      width: 100%;
-      max-width: 480px;
-    }
-
-    .feed-entry {
-      padding: 9px 12px;
-      background: var(--bg2);
-      border-left: 3px solid var(--g);
-      margin-bottom: 6px;
-      font-size: 13px;
-      animation: slidein .2s ease;
-      border-radius: 0 var(--r) var(--r) 0;
-    }
-
-    .feed-entry.first {
-      border-color: var(--yellow);
-    }
-
-    @keyframes slidein {
-      from {
-        transform: translateX(-8px);
-        opacity: 0;
-      }
-
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-
-    /* roster */
-    .roster-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 7px 0;
-      border-bottom: 1px solid var(--border);
-      font-size: 13px;
-    }
-
-    .roster-row:last-child {
-      border-bottom: none;
-    }
-
-    .roster-me {
-      color: var(--g);
-    }
-
-    .roster-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-
-    /* ── MODALS ────────────────────────────────────────────────────── */
-    .modal-bg {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, .88);
-      z-index: 900;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
-
-    .modal-bg.on {
-      display: flex;
-    }
-
-    .modal {
-      background: var(--bg2);
-      border: 1px solid var(--g2);
-      border-radius: var(--r);
-      padding: 28px;
-      width: 100%;
-      max-width: 420px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .modal h2 {
-      font-size: 11px;
-      letter-spacing: 3px;
-      color: var(--g);
-    }
-
-    .modal-btns {
-      display: flex;
-      gap: 8px;
-      justify-content: flex-end;
-      margin-top: 4px;
-    }
-
-    /* ── TOAST ─────────────────────────────────────────────────────── */
-    #toasts {
-      position: fixed;
-      top: 60px;
-      right: 14px;
-      z-index: 999;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      pointer-events: none;
-    }
-
-    .toast {
-      padding: 10px 16px;
-      background: var(--bg2);
-      border: 1px solid var(--border);
-      font-size: 11px;
-      letter-spacing: 1px;
-      border-radius: var(--r);
-      max-width: 280px;
-      animation: toastin .2s ease;
-    }
-
-    .toast.ok {
-      border-color: var(--g);
-      color: var(--g);
-    }
-
-    .toast.err {
-      border-color: var(--red);
-      color: var(--red);
-    }
-
-    .toast.warn {
-      border-color: var(--yellow);
-      color: var(--yellow);
-    }
-
-    @keyframes toastin {
-      from {
-        transform: translateX(14px);
-        opacity: 0;
-      }
-
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-
-    /* ── EMPTY ─────────────────────────────────────────────────────── */
-    .empty {
-      font-size: 11px;
-      color: var(--dim);
-      letter-spacing: 1px;
-      text-align: center;
-      padding: 24px;
-    }
-
-    /* ── RESPONSIVE ────────────────────────────────────────────────── */
-    @media (max-width: 640px) {
-      #s-mod {
-        flex-direction: column;
-        height: auto;
-        overflow: visible;
-      }
-
-      .mod-side {
-        width: 100%;
-        min-width: unset;
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-      }
-
-      .mod-body {
-        padding: 14px;
-      }
-    }
-  </style>
+  <link rel="stylesheet" href="/styles.css" />
 </head>
 
 <body>
@@ -1222,20 +30,18 @@
       </div>
     </header>
 
-    <!-- ══════════════════════ LANDING ══════════════════════ -->
+    <!-- ══════════ LANDING ══════════ -->
     <div class="scr" id="s-land">
       <div class="hero">
         <h1 class="glow">BUZZ</h1>
         <p>REAL-TIME QUIZ BUZZER SYSTEM</p>
       </div>
       <div class="land-cards">
-
         <div class="land-card">
           <h2>// HOST A SESSION</h2>
           <p>Create a room, configure teams and rules, then control the buzzer live.</p>
           <button class="btn btn-g" onclick="goSetup()">CREATE ROOM →</button>
         </div>
-
         <div class="land-card">
           <h2>// JOIN A SESSION</h2>
           <p>Enter a room code and your name to join an existing session.</p>
@@ -1250,22 +56,20 @@
           </div>
           <button class="btn btn-g btn-full" onclick="joinRoom()">JOIN ROOM →</button>
         </div>
-
       </div>
       <div class="rejoin-bar" id="rejoin-bar" style="display:none">
         <a href="#" onclick="openRejoin();return false">↩ REJOIN PREVIOUS MOD SESSION</a>
       </div>
     </div>
 
-    <!-- ══════════════════════ SETUP ══════════════════════ -->
-    <div class="scr" id="s-setup" style="display:none;flex-direction:column">
-      <div class="setup-wrap" style="margin:auto">
+    <!-- ══════════ SETUP ══════════ -->
+    <div class="scr" id="s-setup">
+      <div class="setup-wrap">
         <div>
           <div class="setup-title">// NEW ROOM SETUP</div>
-          <div class="setup-sub">Configure before creating — settings can still be changed in-game.</div>
+          <div class="setup-sub">Configure before creating — all settings are adjustable in-game too.</div>
         </div>
 
-        <!-- MODE -->
         <div class="panel">
           <div class="panel-title">GAME MODE</div>
           <div class="field">
@@ -1276,29 +80,23 @@
               <button class="seg-opt" data-v="teams" onclick="segSelect('seg-mode',this)">TEAMS</button>
             </div>
           </div>
-
-          <!-- teams sub-options -->
-          <div id="team-opts" style="display:none;margin-top:16px;display:none;flex-direction:column;gap:14px;">
-            <div class="field">
+          <div id="team-opts">
+            <div class="field" style="margin-top:16px;">
               <label>NUMBER OF TEAMS</label>
-              <div class="seg" id="seg-nteams">
-                <button class="seg-opt active" data-v="2"
-                  onclick="segSelect('seg-nteams',this);renderSetupTeamNames()">2</button>
-                <button class="seg-opt" data-v="3"
-                  onclick="segSelect('seg-nteams',this);renderSetupTeamNames()">3</button>
-                <button class="seg-opt" data-v="4"
-                  onclick="segSelect('seg-nteams',this);renderSetupTeamNames()">4</button>
-                <button class="seg-opt" data-v="5"
-                  onclick="segSelect('seg-nteams',this);renderSetupTeamNames()">5</button>
-                <button class="seg-opt" data-v="6"
-                  onclick="segSelect('seg-nteams',this);renderSetupTeamNames()">6</button>
+              <div style="display:flex;align-items:center;gap:12px;">
+                <input type="number" id="st-numteams" value="2" min="2" max="64" style="width:90px;"
+                  oninput="renderSetupTeamNames()" />
+                <span style="font-size:12px;color:var(--dim);">2 – 64</span>
               </div>
             </div>
-            <div class="field">
-              <label>TEAM NAMES</label>
-              <div id="setup-team-names" style="display:flex;flex-direction:column;gap:8px;"></div>
+            <div class="field" style="margin-top:12px;">
+              <label>TEAM NAMES <span style="color:var(--dim);font-size:9px;">(AUTO-FILLED WITH GREEK
+                  ALPHABET)</span></label>
+              <div id="setup-team-names"
+                style="display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding-right:4px;">
+              </div>
             </div>
-            <div class="tog-row">
+            <div class="tog-row" style="margin-top:12px;">
               <div>
                 <div class="lbl">PLAYERS PICK OWN TEAM</div>
                 <div class="lbl-sub">If off, moderator assigns teams manually</div>
@@ -1309,12 +107,11 @@
           </div>
         </div>
 
-        <!-- BUZZER RULES -->
         <div class="panel">
           <div class="panel-title">BUZZER RULES</div>
           <div class="tog-row">
             <div>
-              <div class="lbl">LOCK BUZZER AFTER FIRST BUZZ</div>
+              <div class="lbl">LOCK AFTER FIRST BUZZ</div>
               <div class="lbl-sub">Others cannot buzz until moderator resets</div>
             </div>
             <label class="tog"><input type="checkbox" id="st-lockout" checked /><span class="tog-track"></span></label>
@@ -1329,75 +126,75 @@
           </div>
         </div>
 
-        <!-- TIMER -->
         <div class="panel">
           <div class="panel-title">TIMER</div>
           <div class="tog-row">
             <div>
               <div class="lbl">ENABLE COUNTDOWN TIMER</div>
-              <div class="lbl-sub">Auto-closes round when timer hits zero</div>
+              <div class="lbl-sub">Auto-closes round when it hits zero</div>
             </div>
             <label class="tog"><input type="checkbox" id="st-usetimer" onchange="toggleTimerField()" /><span
                 class="tog-track"></span></label>
           </div>
-          <div id="timer-field" style="display:none;margin-top:12px;">
+          <div id="timer-field" style="display:none;margin-top:14px;">
             <div class="field">
               <label>SECONDS PER ROUND</label>
-              <input type="number" id="st-timersec" value="30" min="5" max="300" style="max-width:160px;" />
+              <input type="number" id="st-timersec" value="30" min="5" max="600" style="max-width:160px;" />
             </div>
           </div>
         </div>
 
-        <div style="display:flex;gap:10px;justify-content:flex-end;">
+        <div style="display:flex;gap:10px;justify-content:flex-end;padding-bottom:32px;">
           <button class="btn btn-ghost" onclick="showScr('s-land')">← BACK</button>
           <button class="btn btn-g" onclick="createRoom()">CREATE ROOM →</button>
         </div>
       </div>
     </div>
 
-    <!-- ══════════════════════ MOD GAME ══════════════════════ -->
-    <div class="scr" id="s-mod" style="display:none;flex-direction:row">
-
-      <!-- SIDEBAR -->
+    <!-- ══════════ MOD GAME ══════════ -->
+    <div class="scr" id="s-mod">
       <div class="mod-side">
         <div class="side-sec">
-          <h3>ROOM</h3>
+          <div class="side-label">ROOM</div>
           <div class="side-room-code glow" id="mod-code">──────</div>
-          <div style="font-size:10px;color:var(--dim);margin-top:4px;margin-bottom:12px;">SHARE WITH PLAYERS</div>
-          <div style="display:flex;gap:6px;flex-wrap:wrap;">
+          <div class="side-hint">SHARE WITH PLAYERS</div>
+          <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;">
             <button class="btn btn-ghost btn-sm" onclick="copyCode()">COPY</button>
-            <button class="btn btn-red btn-sm" onclick="openModal('m-end')">END</button>
+            <button class="btn btn-red btn-sm" onclick="openModal('m-end')">END ROOM</button>
           </div>
         </div>
 
+        <!-- TIMER BLOCK -->
         <div class="side-sec">
-          <h3>TIMER</h3>
-          <div class="timer-strip">
-            <div class="timer-display" id="mod-timer-disp">–:––</div>
-            <div style="flex:1"></div>
-            <button class="btn btn-ghost btn-sm" id="btn-timer-startstop" onclick="modTimerToggle()">START</button>
-          </div>
-          <div class="timer-set" style="margin-top:8px;">
-            <span>SET</span>
-            <input type="number" id="mod-timer-set" value="30" min="5" max="300"
-              style="width:60px;padding:4px 8px;font-size:13px;" onchange="modTimerLoad()" />
-            <span>SEC</span>
-            <button class="btn btn-ghost btn-sm" onclick="modTimerReset()">↺</button>
+          <div class="side-label">TIMER</div>
+          <div class="timer-block">
+            <div class="timer-digits" id="mod-timer-disp">0:30</div>
+            <div class="timer-controls">
+              <button class="btn btn-g btn-sm" id="btn-timer-ss" onclick="modTimerToggle()">START</button>
+              <button class="btn btn-ghost btn-sm" onclick="modTimerReset()">↺</button>
+            </div>
+            <div class="timer-set-row">
+              <span class="side-hint">SET</span>
+              <input type="number" id="mod-timer-set" value="30" min="5" max="600" onchange="modTimerLoad()"
+                onclick="this.select()" />
+              <span class="side-hint">SEC</span>
+            </div>
           </div>
         </div>
 
+        <!-- BUZZER CONTROLS -->
         <div class="side-sec">
-          <h3>BUZZER</h3>
+          <div class="side-label">BUZZER</div>
           <div class="side-btn-group">
-            <button class="btn btn-g btn-full" id="btn-open" onclick="ws_send({type:'open_round'})">▶ OPEN
-              ROUND</button>
+            <button class="btn btn-g btn-full" onclick="ws_send({type:'open_round'})">▶ OPEN ROUND</button>
             <button class="btn btn-ghost btn-full" onclick="ws_send({type:'close_round'})">■ CLOSE ROUND</button>
             <button class="btn btn-yellow btn-full" onclick="ws_send({type:'reset_buzzer'})">↺ RESET BUZZER</button>
           </div>
         </div>
 
+        <!-- ROOM CONTROLS -->
         <div class="side-sec">
-          <h3>CONTROLS</h3>
+          <div class="side-label">CONTROLS</div>
           <div class="tog-row">
             <div class="lbl">LOCK ROOM</div>
             <label class="tog"><input type="checkbox" id="lock-room-tog"
@@ -1409,18 +206,19 @@
                 onchange="ws_send({type:'lock_teams',locked:this.checked})" /><span class="tog-track"></span></label>
           </div>
           <div style="margin-top:10px;display:flex;flex-direction:column;gap:5px;">
-            <button class="btn btn-ghost btn-sm btn-full" onclick="ws_send({type:'reset_teams'})">CLEAR TEAMS</button>
+            <button class="btn btn-ghost btn-sm btn-full" onclick="ws_send({type:'reset_teams'})">CLEAR ALL
+              TEAMS</button>
           </div>
         </div>
 
         <div style="flex:1"></div>
-        <div class="side-sec" style="font-size:10px;color:var(--dim);line-height:1.8;">
+        <div class="side-sec side-status">
           <div id="mod-pcount">0 PLAYERS</div>
           <div id="mod-rstatus">ROUND: CLOSED</div>
         </div>
       </div>
 
-      <!-- BODY -->
+      <!-- MOD BODY -->
       <div class="mod-body">
         <div class="tab-bar">
           <div class="tab on" onclick="setTab('buzzer',this)">BUZZER</div>
@@ -1429,7 +227,6 @@
           <div class="tab" onclick="setTab('settings',this)">SETTINGS</div>
         </div>
 
-        <!-- BUZZER TAB -->
         <div id="tab-buzzer">
           <div class="panel">
             <div class="panel-title">BUZZ ORDER</div>
@@ -1438,7 +235,6 @@
           </div>
         </div>
 
-        <!-- PLAYERS TAB -->
         <div id="tab-players" style="display:none">
           <div class="panel">
             <div class="panel-title">
@@ -1451,19 +247,16 @@
           </div>
         </div>
 
-        <!-- TEAMS TAB -->
         <div id="tab-teams" style="display:none">
-          <div class="panel" id="mod-team-panel">
+          <div class="panel">
             <div class="panel-title">TEAM OVERVIEW</div>
             <div class="team-grid" id="mod-team-grid"></div>
           </div>
         </div>
 
-        <!-- SETTINGS TAB -->
         <div id="tab-settings" style="display:none">
           <div class="panel">
             <div class="panel-title">LIVE SETTINGS</div>
-
             <div class="setting-row">
               <div>
                 <div class="sl">BUZZER LOCKOUT</div>
@@ -1483,7 +276,7 @@
             <div class="setting-row">
               <div>
                 <div class="sl">PLAYERS PICK TEAM</div>
-                <div class="sd">Self-assign team on join</div>
+                <div class="sd">Self-assign on join</div>
               </div>
               <label class="tog"><input type="checkbox" id="ls-playerpick"
                   onchange="pushSetting('playerPickTeam',this.checked)" /><span class="tog-track"></span></label>
@@ -1492,7 +285,7 @@
               <div>
                 <div class="sl">GAME MODE</div>
               </div>
-              <div class="seg" id="ls-seg-mode" style="max-width:220px;">
+              <div class="seg" id="ls-seg-mode">
                 <button class="seg-opt" data-v="individual"
                   onclick="segSelect('ls-seg-mode',this);pushSetting('mode','individual')">INDIVIDUAL</button>
                 <button class="seg-opt" data-v="teams"
@@ -1503,666 +296,83 @@
               <div>
                 <div class="sl">NUMBER OF TEAMS</div>
               </div>
-              <div class="seg" id="ls-seg-nteams" style="max-width:280px;">
-                <button class="seg-opt" data-v="2"
-                  onclick="segSelect('ls-seg-nteams',this);pushSetting('numTeams',2)">2</button>
-                <button class="seg-opt" data-v="3"
-                  onclick="segSelect('ls-seg-nteams',this);pushSetting('numTeams',3)">3</button>
-                <button class="seg-opt" data-v="4"
-                  onclick="segSelect('ls-seg-nteams',this);pushSetting('numTeams',4)">4</button>
-                <button class="seg-opt" data-v="5"
-                  onclick="segSelect('ls-seg-nteams',this);pushSetting('numTeams',5)">5</button>
-                <button class="seg-opt" data-v="6"
-                  onclick="segSelect('ls-seg-nteams',this);pushSetting('numTeams',6)">6</button>
+              <div style="display:flex;align-items:center;gap:8px;">
+                <input type="number" id="ls-numteams" min="2" max="64" style="width:80px;"
+                  onchange="pushSetting('numTeams',+this.value)" />
+                <button class="btn btn-ghost btn-sm"
+                  onclick="pushSetting('numTeams',+document.getElementById('ls-numteams').value)">APPLY</button>
               </div>
             </div>
-
-            <div style="margin-top:16px;">
+            <div style="margin-top:18px;">
               <div class="lbl" style="margin-bottom:10px;">TEAM NAMES</div>
-              <div id="ls-team-names" style="display:flex;flex-direction:column;gap:8px;"></div>
+              <div id="ls-team-names"
+                style="display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-right:4px;">
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- ══════════════════════ PLAYER GAME ══════════════════════ -->
-    <div class="scr" id="s-player" style="display:none;flex-direction:column">
+    <!-- ══════════ PLAYER GAME ══════════ -->
+    <div class="scr" id="s-player">
       <div class="p-room">
         <div class="p-room-lbl">ROOM CODE</div>
         <div class="p-room-code glow" id="p-code">──────</div>
         <div class="p-name-lbl" id="p-namelbl"></div>
       </div>
 
-      <!-- timer (player sees it too) -->
-      <div class="p-timer hidden" id="p-timer">–:––</div>
+      <div class="p-timer hidden" id="p-timer">0:30</div>
 
-      <!-- team picker -->
       <div class="team-picker" id="p-team-picker" style="display:none">
         <div class="team-picker-title">// SELECT YOUR TEAM</div>
         <div class="team-picker-grid" id="p-team-grid"></div>
       </div>
 
-      <!-- buzzer -->
       <div class="buzz-wrap">
         <button id="buzz-btn" class="s-closed" disabled onclick="doBuzz()">BUZZ</button>
         <div class="buzz-status" id="buzz-status">WAITING FOR ROUND</div>
       </div>
 
-      <!-- feed -->
       <div class="p-panel">
-        <div class="panel-title" style="font-size:10px;letter-spacing:3px;color:var(--dim);margin-bottom:10px;">// BUZZ
-          FEED</div>
+        <div class="p-panel-title">// BUZZ FEED</div>
         <div id="p-feed"></div>
       </div>
 
-      <!-- roster -->
       <div class="p-panel">
-        <div class="panel-title" style="font-size:10px;letter-spacing:3px;color:var(--dim);margin-bottom:10px;">//
-          PLAYERS</div>
+        <div class="p-panel-title">// PLAYERS IN ROOM</div>
         <div id="p-roster"></div>
       </div>
     </div>
 
-    <!-- ══════════════════════ MODALS ══════════════════════ -->
-    <div class="modal-bg" id="m-rejoin">
-      <div class="modal">
-        <h2>// REJOIN SESSION</h2>
-        <p style="font-size:12px;color:var(--dim);">You have a saved mod session. Rejoin it?</p>
-        <div style="font-size:22px;letter-spacing:6px;color:var(--g);font-weight:700;" id="m-rejoin-code"></div>
-        <div class="modal-btns">
-          <button class="btn btn-ghost btn-sm" onclick="clearMod();closeModal('m-rejoin')">DISCARD</button>
-          <button class="btn btn-g btn-sm" onclick="doRejoin()">REJOIN →</button>
-        </div>
+  </div><!-- #app -->
+
+  <!-- MODALS -->
+  <div class="modal-bg" id="m-rejoin">
+    <div class="modal">
+      <h2>// REJOIN SESSION</h2>
+      <p style="font-size:13px;color:var(--dim);">You have a saved mod session. Rejoin it?</p>
+      <div style="font-size:24px;letter-spacing:6px;color:var(--g);font-weight:700;" id="m-rejoin-code"></div>
+      <div class="modal-btns">
+        <button class="btn btn-ghost btn-sm" onclick="clearMod();closeModal('m-rejoin')">DISCARD</button>
+        <button class="btn btn-g btn-sm" onclick="doRejoin()">REJOIN →</button>
       </div>
     </div>
+  </div>
 
-    <div class="modal-bg" id="m-end">
-      <div class="modal">
-        <h2>// END ROOM</h2>
-        <p style="font-size:12px;color:var(--dim);">All players will be disconnected and the room deleted.</p>
-        <div class="modal-btns">
-          <button class="btn btn-ghost btn-sm" onclick="closeModal('m-end')">CANCEL</button>
-          <button class="btn btn-red btn-sm" onclick="ws_send({type:'end_room'});closeModal('m-end')">END ROOM</button>
-        </div>
+  <div class="modal-bg" id="m-end">
+    <div class="modal">
+      <h2>// END ROOM</h2>
+      <p style="font-size:13px;color:var(--dim);">All players will be disconnected and the room deleted.</p>
+      <div class="modal-btns">
+        <button class="btn btn-ghost btn-sm" onclick="closeModal('m-end')">CANCEL</button>
+        <button class="btn btn-red btn-sm" onclick="ws_send({type:'end_room'});closeModal('m-end')">END ROOM</button>
       </div>
     </div>
+  </div>
 
-    <div id="toasts"></div>
-
-    <script>
-      // ══════════════════════════════════════════════════════
-      // STATE
-      // ══════════════════════════════════════════════════════
-      let ws = null, role = null, room = null, myId = null;
-      let reconnTimer = null, reconnAttempts = 0;
-      let modTimerInterval = null, modTimerRemaining = 0, modTimerRunning = false;
-      let playerTimerInterval = null;
-      const COLORS = ['#00ff41', '#41ffe4', '#ffe141', '#ff4444', '#a041ff', '#ff8c41', '#41a8ff', '#ff41c8'];
-
-      // ══════════════════════════════════════════════════════
-      // STORAGE
-      // ══════════════════════════════════════════════════════
-      const saveMod = (id, s) => localStorage.setItem('mod', JSON.stringify({ id, s }));
-      const loadMod = () => { try { return JSON.parse(localStorage.getItem('mod') || 'null'); } catch { return null; } };
-      const clearMod = () => { localStorage.removeItem('mod'); document.getElementById('rejoin-bar').style.display = 'none'; };
-      const savePlay = (rid, pid, name) => localStorage.setItem('play', JSON.stringify({ rid, pid, name }));
-      const loadPlay = () => { try { return JSON.parse(localStorage.getItem('play') || 'null'); } catch { return null; } };
-
-      // ══════════════════════════════════════════════════════
-      // WEBSOCKET
-      // ══════════════════════════════════════════════════════
-      function connect(onOpen) {
-        if (ws && ws.readyState === WebSocket.OPEN) { onOpen?.(); return; }
-        const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-        ws = new WebSocket(`${proto}://${location.host}/ws`);
-        ws.onopen = () => { setConn(true); reconnAttempts = 0; onOpen?.(); };
-        ws.onmessage = e => { try { handle(JSON.parse(e.data)); } catch { } };
-        ws.onclose = () => { setConn(false); schedReconn(); };
-        ws.onerror = () => ws.close();
-      }
-      function ws_send(msg) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); }
-      function schedReconn() {
-        clearTimeout(reconnTimer);
-        const d = Math.min(8000, 500 * Math.pow(1.5, reconnAttempts++));
-        reconnTimer = setTimeout(() => {
-          if (role === 'mod') {
-            const m = loadMod(); if (m) connect(() => ws_send({ type: 'mod_rejoin', roomId: m.id, modSecret: m.s }));
-          } else if (role === 'player' && myId) {
-            const p = loadPlay(); if (p) connect(() => ws_send({ type: 'join_room', roomId: p.rid, playerName: p.name, playerId: p.pid }));
-          } else connect(null);
-        }, d);
-      }
-
-      // ══════════════════════════════════════════════════════
-      // MESSAGE HANDLER
-      // ══════════════════════════════════════════════════════
-      function handle(msg) {
-        switch (msg.type) {
-          case 'room_created':
-            saveMod(msg.roomId, msg.modSecret);
-            room = msg.room; role = 'mod';
-            showScr('s-mod'); renderMod(); renderModSettings();
-            toast('Room ' + msg.roomId + ' created', 'ok');
-            break;
-          case 'mod_joined':
-            room = msg.room; role = 'mod';
-            showScr('s-mod'); renderMod(); renderModSettings();
-            toast('Rejoined as moderator', 'ok');
-            break;
-          case 'joined':
-            myId = msg.playerId; room = msg.room; role = 'player';
-            const pName = document.getElementById('ji-name').value || loadPlay()?.name || '';
-            savePlay(room.id, myId, pName);
-            showScr('s-player'); renderPlayer();
-            break;
-          case 'room_update':
-            room = msg.room;
-            if (role === 'mod') renderMod(); else renderPlayer();
-            break;
-          case 'settings_updated':
-            room = msg.room;
-            if (role === 'mod') { renderMod(); renderModSettings(); } else renderPlayer();
-            break;
-          case 'round_open':
-            room = msg.room;
-            if (role === 'mod') renderMod(); else { renderPlayerBuzzer(); toast('ROUND OPEN', 'ok'); }
-            break;
-          case 'round_closed':
-            room = msg.room;
-            if (role === 'mod') renderMod(); else { renderPlayerBuzzer(); toast('ROUND CLOSED', 'warn'); }
-            break;
-          case 'buzzer_reset':
-            room = msg.room;
-            if (role === 'mod') renderMod(); else renderPlayerBuzzer();
-            break;
-          case 'buzz_event':
-            room = msg.room;
-            if (role === 'mod') renderModBuzz(msg); else { renderPlayerBuzzer(); addFeed(msg); }
-            break;
-          case 'buzz_rejected':
-            toast(msg.reason, 'warn'); break;
-          case 'kicked':
-            toast('Removed from room', 'err');
-            role = null; room = null; myId = null; localStorage.removeItem('play');
-            showScr('s-land'); break;
-          case 'room_ended':
-            toast('Room ended', 'warn');
-            role = null; room = null; myId = null;
-            clearMod(); localStorage.removeItem('play');
-            showScr('s-land'); break;
-          case 'mod_disconnected':
-            toast('Moderator disconnected', 'warn'); break;
-          case 'error':
-            toast(msg.message, 'err'); break;
-        }
-      }
-
-      // ══════════════════════════════════════════════════════
-      // SCREENS
-      // ══════════════════════════════════════════════════════
-      function showScr(id) {
-        document.querySelectorAll('.scr').forEach(s => { s.classList.remove('on'); s.style.display = 'none'; });
-        const el = document.getElementById(id);
-        el.style.display = 'flex';
-        el.classList.add('on');
-        const chip = document.getElementById('hdr-room');
-        if (room?.id) { chip.textContent = '[ ' + room.id + ' ]'; chip.style.display = 'block'; }
-        else chip.style.display = 'none';
-      }
-      function setConn(on) {
-        document.getElementById('cdot').className = 'conn-dot' + (on ? ' on' : '');
-        document.getElementById('clbl').textContent = on ? 'ONLINE' : 'OFFLINE';
-      }
-
-      // ══════════════════════════════════════════════════════
-      // LANDING
-      // ══════════════════════════════════════════════════════
-      function goSetup() {
-        renderSetupTeamNames();
-        showScr('s-setup');
-      }
-      function joinRoom() {
-        const code = document.getElementById('ji-code').value.trim().toUpperCase();
-        const name = document.getElementById('ji-name').value.trim();
-        if (!code) { toast('Enter room code', 'err'); return; }
-        if (!name) { toast('Enter your name', 'err'); return; }
-        connect(() => ws_send({ type: 'join_room', roomId: code, playerName: name }));
-      }
-      function openRejoin() {
-        const m = loadMod(); if (!m) return;
-        document.getElementById('m-rejoin-code').textContent = m.id;
-        openModal('m-rejoin');
-      }
-      function doRejoin() {
-        const m = loadMod(); if (!m) return;
-        closeModal('m-rejoin');
-        connect(() => ws_send({ type: 'mod_rejoin', roomId: m.id, modSecret: m.s }));
-      }
-
-      // ══════════════════════════════════════════════════════
-      // SETUP
-      // ══════════════════════════════════════════════════════
-      const DEFAULT_TEAM_NAMES = ['ALPHA', 'BETA', 'GAMMA', 'DELTA', 'EPSILON', 'ZETA', 'ETA', 'THETA'];
-
-      function segSelect(groupId, el) {
-        document.querySelectorAll('#' + groupId + ' .seg-opt').forEach(b => b.classList.remove('active'));
-        el.classList.add('active');
-        // show/hide team opts in setup
-        if (groupId === 'seg-mode') {
-          const isTeams = el.dataset.v === 'teams';
-          const to = document.getElementById('team-opts');
-          to.style.display = isTeams ? 'flex' : 'none';
-        }
-      }
-
-      function renderSetupTeamNames() {
-        const n = parseInt(document.querySelector('#seg-nteams .seg-opt.active')?.dataset.v || '2');
-        const container = document.getElementById('setup-team-names');
-        // preserve existing values
-        const existing = Array.from(container.querySelectorAll('input')).map(i => i.value);
-        container.innerHTML = '';
-        for (let i = 0; i < n; i++) {
-          const row = document.createElement('div');
-          row.style.cssText = 'display:flex;align-items:center;gap:8px;';
-          const dot = document.createElement('div');
-          dot.style.cssText = `width:10px;height:10px;border-radius:50%;background:${COLORS[i]};box-shadow:0 0 6px ${COLORS[i]};flex-shrink:0;`;
-          const inp = document.createElement('input');
-          inp.type = 'text'; inp.maxLength = 32;
-          inp.value = existing[i] || DEFAULT_TEAM_NAMES[i];
-          inp.style.cssText = 'flex:1;';
-          row.appendChild(dot); row.appendChild(inp);
-          container.appendChild(row);
-        }
-      }
-
-      function toggleTimerField() {
-        document.getElementById('timer-field').style.display = document.getElementById('st-usetimer').checked ? 'block' : 'none';
-      }
-
-      function createRoom() {
-        const mode = document.querySelector('#seg-mode .seg-opt.active')?.dataset.v || 'individual';
-        const numTeams = parseInt(document.querySelector('#seg-nteams .seg-opt.active')?.dataset.v || '2');
-        const teamNames = Array.from(document.querySelectorAll('#setup-team-names input')).map(i => i.value.trim() || 'Team');
-        const useTimer = document.getElementById('st-usetimer').checked;
-        const timerSec = parseInt(document.getElementById('st-timersec').value) || 30;
-        connect(() => ws_send({
-          type: 'create_room',
-          settings: {
-            mode, numTeams, teamNames,
-            playerPickTeam: document.getElementById('st-playerpick').checked,
-            buzzerLockout: document.getElementById('st-lockout').checked,
-            showBuzzOrder: document.getElementById('st-showorder').checked,
-            timerSeconds: useTimer ? timerSec : 0,
-          }
-        }));
-      }
-
-      // ══════════════════════════════════════════════════════
-      // MOD RENDER
-      // ══════════════════════════════════════════════════════
-      function renderMod() {
-        if (!room) return;
-        document.getElementById('mod-code').textContent = room.id;
-        document.getElementById('mod-pcount').textContent = room.players.length + ' PLAYER' + (room.players.length !== 1 ? 'S' : '');
-        document.getElementById('mod-rstatus').textContent = 'ROUND: ' + (room.buzzerState.roundOpen ? 'OPEN' : 'CLOSED');
-        document.getElementById('lock-room-tog').checked = room.locked;
-        document.getElementById('lock-teams-tog').checked = room.teamLocked;
-        document.getElementById('pcount-badge').textContent = room.players.length;
-        document.getElementById('lock-teams-row').style.display = room.settings.mode === 'teams' ? 'flex' : 'none';
-        document.getElementById('tab-teams-btn').style.display = room.settings.mode === 'teams' ? 'block' : 'none';
-        // timer seed from settings if not yet set
-        if (!modTimerRunning && room.settings.timerSeconds > 0 && modTimerRemaining === 0) {
-          modTimerRemaining = room.settings.timerSeconds;
-          document.getElementById('mod-timer-set').value = room.settings.timerSeconds;
-          renderModTimerDisplay();
-        }
-        renderModBuzz(null);
-        renderModPlayerList();
-        renderModTeams();
-      }
-
-      function renderModBuzz(evt) {
-        const order = room?.buzzerState?.buzzOrder ?? [];
-        const emptyEl = document.getElementById('mod-bz-empty');
-        const listEl = document.getElementById('mod-bz-list');
-        if (order.length === 0) {
-          emptyEl.style.display = 'block';
-          listEl.innerHTML = '';
-          return;
-        }
-        emptyEl.style.display = 'none';
-        listEl.innerHTML = '';
-        const times = evt?.buzzTimes ?? {};
-        const firstTime = times[order[0]];
-        order.forEach((pid, idx) => {
-          const p = room.players.find(x => x.id === pid);
-          if (!p) return;
-          const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : null;
-          const color = p.teamIndex !== null ? COLORS[p.teamIndex] : 'var(--g)';
-          const ms = times[pid] && firstTime ? '+' + (times[pid] - firstTime) + 'ms' : '';
-          const div = document.createElement('div');
-          div.className = 'bz-entry';
-          div.innerHTML = `
-      <div class="bz-rank ${idx === 0 ? 'first' : ''}">${idx + 1}</div>
-      <div class="bz-info">
-        <div class="bz-name">${esc(p.name)}</div>
-        ${teamName ? `<div class="bz-team" style="color:${color}">${esc(teamName)}</div>` : ''}
-        ${ms ? `<div class="bz-ms">${ms}</div>` : ''}
-      </div>
-    `;
-          listEl.appendChild(div);
-        });
-      }
-
-      function renderModPlayerList() {
-        if (!room) return;
-        const el = document.getElementById('mod-plist');
-        if (room.players.length === 0) { el.innerHTML = '<div class="empty">No players yet.</div>'; return; }
-        el.innerHTML = '';
-        room.players.forEach(p => {
-          const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : null;
-          const color = p.teamIndex !== null ? COLORS[p.teamIndex] : null;
-          let teamSel = '';
-          if (room.settings.mode === 'teams') {
-            let opts = `<option value="-1" ${p.teamIndex === null ? 'selected' : ''}>No team</option>`;
-            for (let i = 0; i < room.settings.numTeams; i++) {
-              const tn = room.settings.teamNames[i] ?? 'Team ' + (i + 1);
-              opts += `<option value="${i}" ${p.teamIndex === i ? 'selected' : ''}>${esc(tn)}</option>`;
-            }
-            teamSel = `<select style="margin-top:5px;font-size:11px;padding:4px 8px;" onchange="ws_send({type:'assign_team',playerId:'${p.id}',teamIndex:+this.value===-1?null:+this.value})">${opts}</select>`;
-          }
-          const row = document.createElement('div');
-          row.className = 'pl-row' + (p.isConnected ? '' : ' offline');
-          row.innerHTML = `
-      <div class="pl-info" style="flex:1;min-width:0;">
-        <div class="pl-name">${esc(p.name)} ${p.isConnected ? '' : '<span class="tag tag-red" style="font-size:8px;">OFFLINE</span>'}</div>
-        ${teamName ? `<div class="pl-meta" style="color:${color}">${esc(teamName)}</div>` : '<div class="pl-meta">No team</div>'}
-        ${teamSel}
-      </div>
-      <div class="pl-actions">
-        <button class="btn btn-red btn-sm" onclick="ws_send({type:'kick_player',playerId:'${p.id}'})">KICK</button>
-      </div>
-    `;
-          el.appendChild(row);
-        });
-      }
-
-      function renderModTeams() {
-        if (!room || room.settings.mode !== 'teams') return;
-        const grid = document.getElementById('mod-team-grid');
-        grid.innerHTML = '';
-        for (let i = 0; i < room.settings.numTeams; i++) {
-          const members = room.players.filter(p => p.teamIndex === i);
-          const color = COLORS[i];
-          const card = document.createElement('div');
-          card.className = 'team-card';
-          card.style.borderColor = color;
-          const name = room.settings.teamNames[i] ?? 'Team ' + (i + 1);
-          card.innerHTML = `
-      <div class="tc-n" style="color:${color}">${esc(name)}</div>
-      <div class="tc-c" style="color:${color}">${members.length}</div>
-      <div class="tc-m">${members.map(p => esc(p.name)).join(', ') || '—'}</div>
-    `;
-          grid.appendChild(card);
-        }
-      }
-
-      function renderModSettings() {
-        if (!room) return;
-        const s = room.settings;
-        document.getElementById('ls-lockout').checked = s.buzzerLockout;
-        document.getElementById('ls-showorder').checked = s.showBuzzOrder;
-        document.getElementById('ls-playerpick').checked = s.playerPickTeam;
-        segActivate('ls-seg-mode', s.mode);
-        segActivate('ls-seg-nteams', String(s.numTeams));
-        renderLiveTeamNames();
-      }
-
-      function segActivate(groupId, val) {
-        document.querySelectorAll('#' + groupId + ' .seg-opt').forEach(b => {
-          b.classList.toggle('active', b.dataset.v === val);
-        });
-      }
-
-      function renderLiveTeamNames() {
-        if (!room) return;
-        const container = document.getElementById('ls-team-names');
-        const existing = Array.from(container.querySelectorAll('input')).map(i => i.value);
-        container.innerHTML = '';
-        for (let i = 0; i < room.settings.numTeams; i++) {
-          const row = document.createElement('div');
-          row.style.cssText = 'display:flex;align-items:center;gap:8px;';
-          const dot = document.createElement('div');
-          dot.style.cssText = `width:10px;height:10px;border-radius:50%;background:${COLORS[i]};flex-shrink:0;`;
-          const inp = document.createElement('input');
-          inp.type = 'text'; inp.maxLength = 32;
-          inp.value = room.settings.teamNames[i] ?? DEFAULT_TEAM_NAMES[i];
-          inp.onchange = () => updateLiveTeamName(i, inp.value);
-          row.appendChild(dot); row.appendChild(inp);
-          container.appendChild(row);
-        }
-      }
-
-      function updateLiveTeamName(idx, val) {
-        if (!room) return;
-        const names = [...room.settings.teamNames];
-        names[idx] = val.trim() || 'Team ' + (idx + 1);
-        ws_send({ type: 'update_settings', settings: { teamNames: names } });
-      }
-
-      function pushSetting(key, val) {
-        ws_send({ type: 'update_settings', settings: { [key]: val } });
-      }
-
-      // ══════════════════════════════════════════════════════
-      // MOD TIMER
-      // ══════════════════════════════════════════════════════
-      function modTimerLoad() {
-        modTimerRemaining = parseInt(document.getElementById('mod-timer-set').value) || 30;
-        modTimerRunning = false;
-        clearInterval(modTimerInterval);
-        document.getElementById('btn-timer-startstop').textContent = 'START';
-        renderModTimerDisplay();
-      }
-      function modTimerReset() {
-        clearInterval(modTimerInterval);
-        modTimerRunning = false;
-        modTimerRemaining = parseInt(document.getElementById('mod-timer-set').value) || 30;
-        document.getElementById('btn-timer-startstop').textContent = 'START';
-        renderModTimerDisplay();
-        // also reset player timers via broadcast happens via room_update on open_round
-      }
-      function modTimerToggle() {
-        if (modTimerRunning) {
-          clearInterval(modTimerInterval); modTimerRunning = false;
-          document.getElementById('btn-timer-startstop').textContent = 'START';
-        } else {
-          if (modTimerRemaining <= 0) modTimerLoad();
-          modTimerRunning = true;
-          document.getElementById('btn-timer-startstop').textContent = 'PAUSE';
-          modTimerInterval = setInterval(() => {
-            modTimerRemaining--;
-            renderModTimerDisplay();
-            broadcastTimer(modTimerRemaining);
-            if (modTimerRemaining <= 0) {
-              clearInterval(modTimerInterval); modTimerRunning = false;
-              document.getElementById('btn-timer-startstop').textContent = 'START';
-              ws_send({ type: 'close_round' });
-              toast('TIME UP — round closed', 'warn');
-            }
-          }, 1000);
-        }
-      }
-      function renderModTimerDisplay() {
-        const el = document.getElementById('mod-timer-disp');
-        const s = modTimerRemaining;
-        el.textContent = Math.floor(s / 60) + ':' + (s % 60 < 10 ? '0' : '') + (s % 60);
-        el.className = 'timer-display' + (s <= 5 ? 'danger' : s <= 10 ? 'warn' : '');
-      }
-      // We broadcast timer state via a simple ws message for player display
-      function broadcastTimer(s) {
-        ws_send({ type: '__timer__', seconds: s }); // mod echoes to server — but we handle client-side only for now
-      }
-
-      // ══════════════════════════════════════════════════════
-      // PLAYER RENDER
-      // ══════════════════════════════════════════════════════
-      function renderPlayer() {
-        if (!room) return;
-        document.getElementById('p-code').textContent = room.id;
-        const me = room.players.find(p => p.id === myId);
-        document.getElementById('p-namelbl').textContent = me?.name ?? '';
-        renderTeamPicker();
-        renderPlayerBuzzer();
-        renderRoster();
-      }
-
-      function renderTeamPicker() {
-        if (!room) return;
-        const s = room.settings;
-        const picker = document.getElementById('p-team-picker');
-        if (s.mode !== 'teams' || !s.playerPickTeam || room.teamLocked) {
-          picker.style.display = 'none'; return;
-        }
-        picker.style.display = 'block';
-        const me = room.players.find(p => p.id === myId);
-        const grid = document.getElementById('p-team-grid');
-        grid.innerHTML = '';
-        for (let i = 0; i < s.numTeams; i++) {
-          const members = room.players.filter(p => p.teamIndex === i);
-          const color = COLORS[i];
-          const isMine = me?.teamIndex === i;
-          const btn = document.createElement('button');
-          btn.className = 'team-btn' + (isMine ? ' mine' : '');
-          btn.style.borderColor = isMine ? color : 'var(--border)';
-          btn.style.color = isMine ? color : 'var(--text)';
-          btn.innerHTML = `<div>${esc(s.teamNames[i] ?? 'Team ' + (i + 1))}</div><div class="tb-count">${members.length} player${members.length !== 1 ? 's' : ''}</div>`;
-          btn.onclick = () => ws_send({ type: 'pick_team', teamIndex: i });
-          grid.appendChild(btn);
-        }
-      }
-
-      function renderPlayerBuzzer() {
-        if (!room) return;
-        const btn = document.getElementById('buzz-btn');
-        const sts = document.getElementById('buzz-status');
-        const bz = room.buzzerState;
-        const already = bz.buzzOrder.includes(myId);
-        const isFirst = bz.buzzOrder[0] === myId;
-        if (!bz.roundOpen) {
-          btn.className = 's-closed'; btn.disabled = true; sts.textContent = 'WAITING FOR ROUND';
-        } else if (isFirst) {
-          btn.className = 's-first'; btn.disabled = false; sts.textContent = '⚡ YOU BUZZED FIRST!';
-        } else if (already) {
-          const pos = bz.buzzOrder.indexOf(myId) + 1;
-          btn.className = 's-buzzed'; btn.disabled = true; sts.textContent = 'BUZZED — #' + pos + ' IN ORDER';
-        } else if (room.settings.buzzerLockout && bz.buzzOrder.length > 0) {
-          btn.className = 's-locked'; btn.disabled = true; sts.textContent = 'BUZZER LOCKED OUT';
-        } else {
-          btn.className = 's-open'; btn.disabled = false; sts.textContent = 'ROUND OPEN — BUZZ!';
-        }
-      }
-
-      function renderRoster() {
-        if (!room) return;
-        const el = document.getElementById('p-roster');
-        if (room.players.length === 0) { el.innerHTML = '<div class="empty" style="padding:10px">No players yet.</div>'; return; }
-        el.innerHTML = '';
-        room.players.forEach(p => {
-          const isMe = p.id === myId;
-          const color = p.teamIndex !== null ? COLORS[p.teamIndex] : 'var(--g)';
-          const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : '';
-          const row = document.createElement('div');
-          row.className = 'roster-row' + (isMe ? ' roster-me' : '');
-          row.innerHTML = `
-      <div class="roster-dot" style="background:${p.isConnected ? (isMe ? 'var(--g)' : color) : 'var(--border)'}"></div>
-      <div style="flex:1">${esc(p.name)}${isMe ? ' <span style="font-size:10px;color:var(--dim)">(YOU)</span>' : ''}</div>
-      ${teamName ? `<div style="font-size:11px;color:${color}">${esc(teamName)}</div>` : ''}
-    `;
-          el.appendChild(row);
-        });
-      }
-
-      function addFeed(evt) {
-        const feed = document.getElementById('p-feed');
-        const isFirst = evt.buzzOrder?.[0] === evt.playerId;
-        const color = evt.teamIndex !== null ? COLORS[evt.teamIndex] : 'var(--g)';
-        const teamStr = (room?.settings.mode === 'teams' && evt.teamIndex !== null) ? ` [${esc(room.settings.teamNames[evt.teamIndex] ?? '')}]` : '';
-        const div = document.createElement('div');
-        div.className = 'feed-entry' + (isFirst ? ' first' : '');
-        div.style.borderColor = isFirst ? 'var(--yellow)' : color;
-        div.innerHTML = `<strong>${esc(evt.playerName)}</strong>${teamStr} buzzed${isFirst ? ' <span style="color:var(--yellow)">— FIRST!</span>' : ''}`;
-        feed.prepend(div);
-        while (feed.children.length > 20) feed.removeChild(feed.lastChild);
-      }
-
-      function doBuzz() { ws_send({ type: 'buzz' }); }
-
-      // ══════════════════════════════════════════════════════
-      // TABS
-      // ══════════════════════════════════════════════════════
-      function setTab(name, el) {
-        document.querySelectorAll('.tab').forEach(t => t.classList.remove('on'));
-        el.classList.add('on');
-        ['buzzer', 'players', 'teams', 'settings'].forEach(t => {
-          const te = document.getElementById('tab-' + t);
-          if (te) te.style.display = t === name ? 'block' : 'none';
-        });
-        if (name === 'players') renderModPlayerList();
-        if (name === 'teams') renderModTeams();
-      }
-
-      // ══════════════════════════════════════════════════════
-      // MODALS / TOAST / UTIL
-      // ══════════════════════════════════════════════════════
-      function openModal(id) { document.getElementById(id).classList.add('on'); }
-      function closeModal(id) { document.getElementById(id).classList.remove('on'); }
-      function copyCode() {
-        if (!room) return;
-        navigator.clipboard.writeText(room.id).then(() => toast('Code copied', 'ok'));
-      }
-      function toast(msg, type = '') {
-        const el = document.createElement('div');
-        el.className = 'toast ' + type; el.textContent = msg;
-        document.getElementById('toasts').appendChild(el);
-        setTimeout(() => { el.style.transition = 'opacity .3s'; el.style.opacity = '0'; setTimeout(() => el.remove(), 300); }, 2700);
-      }
-      function esc(s) {
-        return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-      }
-
-      // ══════════════════════════════════════════════════════
-      // KEYBOARD — SPACE TO BUZZ
-      // ══════════════════════════════════════════════════════
-      document.addEventListener('keydown', e => {
-        if (role !== 'player') return;
-        if (e.code === 'Space' || e.key === ' ') {
-          const tag = document.activeElement?.tagName;
-          if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
-          e.preventDefault();
-          const btn = document.getElementById('buzz-btn');
-          if (!btn.disabled) { btn.click(); btn.style.transform = 'scale(.93)'; setTimeout(() => btn.style.transform = '', 120); }
-        }
-      });
-
-      // close modals on backdrop click
-      document.querySelectorAll('.modal-bg').forEach(bg => {
-        bg.addEventListener('click', e => { if (e.target === bg) bg.classList.remove('on'); });
-      });
-
-      // ══════════════════════════════════════════════════════
-      // INIT
-      // ══════════════════════════════════════════════════════
-      window.addEventListener('DOMContentLoaded', () => {
-        const m = loadMod();
-        if (m) { document.getElementById('rejoin-bar').style.display = 'block'; document.getElementById('m-rejoin-code').textContent = m.id; }
-        showScr('s-land');
-        connect(null);
-        // init seg-mode display
-        segSelect('seg-mode', document.querySelector('#seg-mode .seg-opt.active'));
-      });
-    </script>
+  <div id="toasts"></div>
+  <script src="/script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/public/script.js b/src/public/script.js
new file mode 100644
index 0000000..69ca40e
--- /dev/null
+++ b/src/public/script.js
@@ -0,0 +1,625 @@
+// ══════════════════════════════════════════════════════
+// GREEK ALPHABET (mirrors server for display)
+// ══════════════════════════════════════════════════════
+const GREEK = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", "Theta", "Iota", "Kappa", "Lambda", "Mu", "Nu", "Xi", "Omicron", "Pi", "Rho", "Sigma", "Tau", "Upsilon", "Phi", "Chi", "Psi", "Omega"];
+function toRoman(n) {
+    const vals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+    const syms = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
+    let out = "";
+    for (let i = 0; i < vals.length; i++) while (n >= vals[i]) { out += syms[i]; n -= vals[i]; }
+    return out;
+}
+function greekName(i) {
+    const cycle = Math.floor(i / GREEK.length);
+    return cycle === 0 ? GREEK[i % GREEK.length] : `${GREEK[i % GREEK.length]} ${toRoman(cycle + 1)}`;
+}
+
+// ══════════════════════════════════════════════════════
+// COLORS — HSL wheel, infinite unique colors
+// ══════════════════════════════════════════════════════
+function teamColor(i) {
+    const hue = (i * 137.508) % 360; // golden angle spacing
+    return `hsl(${hue},90%,58%)`;
+}
+
+// ══════════════════════════════════════════════════════
+// STATE
+// ══════════════════════════════════════════════════════
+let ws = null, role = null, room = null, myId = null;
+let reconnTimer = null, reconnAttempts = 0;
+let modTimerInterval = null, modTimerRemaining = 0, modTimerRunning = false;
+let playerTimerRemaining = 0, playerTimerInterval = null;
+
+// ══════════════════════════════════════════════════════
+// STORAGE
+// ══════════════════════════════════════════════════════
+const saveMod = (id, s) => localStorage.setItem('mod', JSON.stringify({ id, s }));
+const loadMod = () => { try { return JSON.parse(localStorage.getItem('mod') || 'null'); } catch { return null; } };
+const clearMod = () => { localStorage.removeItem('mod'); document.getElementById('rejoin-bar').style.display = 'none'; };
+const savePlay = (rid, pid, name) => localStorage.setItem('play', JSON.stringify({ rid, pid, name }));
+const loadPlay = () => { try { return JSON.parse(localStorage.getItem('play') || 'null'); } catch { return null; } };
+
+// ══════════════════════════════════════════════════════
+// WEBSOCKET
+// ══════════════════════════════════════════════════════
+function connect(onOpen) {
+    if (ws && ws.readyState === WebSocket.OPEN) { onOpen?.(); return; }
+    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+    ws = new WebSocket(`${proto}://${location.host}/ws`);
+    ws.onopen = () => { setConn(true); reconnAttempts = 0; onOpen?.(); };
+    ws.onmessage = e => { try { handle(JSON.parse(e.data)); } catch { } };
+    ws.onclose = () => { setConn(false); schedReconn(); };
+    ws.onerror = () => ws.close();
+}
+function ws_send(msg) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg)); }
+function schedReconn() {
+    clearTimeout(reconnTimer);
+    const d = Math.min(8000, 500 * Math.pow(1.5, reconnAttempts++));
+    reconnTimer = setTimeout(() => {
+        if (role === 'mod') {
+            const m = loadMod(); if (m) connect(() => ws_send({ type: 'mod_rejoin', roomId: m.id, modSecret: m.s }));
+        } else if (role === 'player' && myId) {
+            const p = loadPlay(); if (p) connect(() => ws_send({ type: 'join_room', roomId: p.rid, playerName: p.name, playerId: p.pid }));
+        } else connect(null);
+    }, d);
+}
+
+// ══════════════════════════════════════════════════════
+// MESSAGES
+// ══════════════════════════════════════════════════════
+function handle(msg) {
+    switch (msg.type) {
+        case 'room_created':
+            saveMod(msg.roomId, msg.modSecret);
+            room = msg.room; role = 'mod';
+            showScr('s-mod'); renderMod(); renderModSettings();
+            toast('Room ' + msg.roomId + ' created', 'ok');
+            break;
+        case 'mod_joined':
+            room = msg.room; role = 'mod';
+            showScr('s-mod'); renderMod(); renderModSettings();
+            toast('Rejoined as moderator', 'ok');
+            break;
+        case 'joined':
+            myId = msg.playerId; room = msg.room; role = 'player';
+            savePlay(room.id, myId, document.getElementById('ji-name').value || loadPlay()?.name || '');
+            showScr('s-player'); renderPlayer();
+            break;
+        case 'room_update':
+            room = msg.room;
+            if (role === 'mod') renderMod(); else renderPlayer();
+            break;
+        case 'settings_updated':
+            room = msg.room;
+            if (role === 'mod') { renderMod(); renderModSettings(); } else renderPlayer();
+            break;
+        case 'round_open':
+            room = msg.room;
+            if (role === 'mod') renderMod();
+            else { renderPlayerBuzzer(); startPlayerTimer(); toast('ROUND OPEN', 'ok'); }
+            break;
+        case 'round_closed':
+            room = msg.room;
+            if (role === 'mod') renderMod();
+            else { renderPlayerBuzzer(); stopPlayerTimer(); toast('ROUND CLOSED', 'warn'); }
+            break;
+        case 'buzzer_reset':
+            room = msg.room;
+            if (role === 'mod') renderMod(); else renderPlayerBuzzer();
+            break;
+        case 'buzz_event':
+            room = msg.room;
+            if (role === 'mod') renderModBuzz(msg); else { renderPlayerBuzzer(); addFeed(msg); }
+            break;
+        case 'buzz_rejected':
+            toast(msg.reason, 'warn'); break;
+        case 'kicked':
+            toast('Removed from room', 'err');
+            role = null; room = null; myId = null; localStorage.removeItem('play');
+            showScr('s-land'); break;
+        case 'room_ended':
+            toast('Room ended', 'warn');
+            role = null; room = null; myId = null;
+            clearMod(); localStorage.removeItem('play');
+            showScr('s-land'); break;
+        case 'mod_disconnected':
+            toast('Moderator disconnected', 'warn'); break;
+        case 'error':
+            toast(msg.message, 'err'); break;
+    }
+}
+
+// ══════════════════════════════════════════════════════
+// SCREENS
+// ══════════════════════════════════════════════════════
+function showScr(id) {
+    document.querySelectorAll('.scr').forEach(s => { s.classList.remove('on'); s.style.display = 'none'; });
+    const el = document.getElementById(id);
+    el.style.display = 'flex'; el.classList.add('on');
+    const chip = document.getElementById('hdr-room');
+    if (room?.id) { chip.textContent = '[' + room.id + ']'; chip.style.display = 'block'; }
+    else chip.style.display = 'none';
+}
+function setConn(on) {
+    document.getElementById('cdot').className = 'conn-dot' + (on ? ' on' : '');
+    document.getElementById('clbl').textContent = on ? 'ONLINE' : 'OFFLINE';
+}
+
+// ══════════════════════════════════════════════════════
+// LANDING
+// ══════════════════════════════════════════════════════
+function goSetup() { renderSetupTeamNames(); showScr('s-setup'); }
+function joinRoom() {
+    const code = document.getElementById('ji-code').value.trim().toUpperCase();
+    const name = document.getElementById('ji-name').value.trim();
+    if (!code) { toast('Enter room code', 'err'); return; }
+    if (!name) { toast('Enter your name', 'err'); return; }
+    connect(() => ws_send({ type: 'join_room', roomId: code, playerName: name }));
+}
+function openRejoin() {
+    const m = loadMod(); if (!m) return;
+    document.getElementById('m-rejoin-code').textContent = m.id;
+    openModal('m-rejoin');
+}
+function doRejoin() {
+    const m = loadMod(); if (!m) return;
+    closeModal('m-rejoin');
+    connect(() => ws_send({ type: 'mod_rejoin', roomId: m.id, modSecret: m.s }));
+}
+
+// ══════════════════════════════════════════════════════
+// SETUP PAGE
+// ══════════════════════════════════════════════════════
+function segSelect(groupId, el) {
+    document.querySelectorAll('#' + groupId + ' .seg-opt').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    if (groupId === 'seg-mode') {
+        const isTeams = el.dataset.v === 'teams';
+        document.getElementById('team-opts').style.display = isTeams ? 'flex' : 'none';
+        document.getElementById('team-opts').style.flexDirection = 'column';
+    }
+}
+
+function renderSetupTeamNames() {
+    const n = Math.max(2, Math.min(64, parseInt(document.getElementById('st-numteams').value) || 2));
+    const container = document.getElementById('setup-team-names');
+    const existing = Array.from(container.querySelectorAll('input')).map(i => i.value);
+    container.innerHTML = '';
+    for (let i = 0; i < n; i++) {
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;align-items:center;gap:8px;';
+        const dot = document.createElement('div');
+        const c = teamColor(i);
+        dot.style.cssText = `width:11px;height:11px;border-radius:50%;background:${c};box-shadow:0 0 6px ${c};flex-shrink:0;`;
+        const inp = document.createElement('input');
+        inp.type = 'text'; inp.maxLength = 32;
+        inp.value = existing[i] || greekName(i);
+        inp.style.flex = '1';
+        row.appendChild(dot); row.appendChild(inp);
+        container.appendChild(row);
+    }
+}
+
+function toggleTimerField() {
+    document.getElementById('timer-field').style.display = document.getElementById('st-usetimer').checked ? 'block' : 'none';
+}
+
+function createRoom() {
+    const mode = document.querySelector('#seg-mode .seg-opt.active')?.dataset.v || 'individual';
+    const numTeams = Math.max(2, Math.min(64, parseInt(document.getElementById('st-numteams').value) || 2));
+    const teamNames = Array.from(document.querySelectorAll('#setup-team-names input')).map(i => i.value.trim() || greekName(0));
+    const useTimer = document.getElementById('st-usetimer').checked;
+    const timerSec = parseInt(document.getElementById('st-timersec').value) || 30;
+    connect(() => ws_send({
+        type: 'create_room',
+        settings: {
+            mode, numTeams, teamNames,
+            playerPickTeam: document.getElementById('st-playerpick').checked,
+            buzzerLockout: document.getElementById('st-lockout').checked,
+            showBuzzOrder: document.getElementById('st-showorder').checked,
+            timerSeconds: useTimer ? timerSec : 0,
+        }
+    }));
+}
+
+// ══════════════════════════════════════════════════════
+// MOD TIMER
+// ══════════════════════════════════════════════════════
+function fmtTime(s) { return Math.floor(s / 60) + ':' + (s % 60 < 10 ? '0' : '') + (s % 60); }
+
+function modTimerLoad() {
+    modTimerRemaining = Math.max(5, parseInt(document.getElementById('mod-timer-set').value) || 30);
+    modTimerRunning = false;
+    clearInterval(modTimerInterval);
+    document.getElementById('btn-timer-ss').textContent = 'START';
+    renderModTimerDisplay();
+}
+function modTimerReset() {
+    clearInterval(modTimerInterval);
+    modTimerRunning = false;
+    modTimerRemaining = Math.max(5, parseInt(document.getElementById('mod-timer-set').value) || 30);
+    document.getElementById('btn-timer-ss').textContent = 'START';
+    renderModTimerDisplay();
+    // broadcast reset to players
+    broadcastTimerToPlayers(modTimerRemaining, false);
+}
+function modTimerToggle() {
+    if (modTimerRunning) {
+        clearInterval(modTimerInterval); modTimerRunning = false;
+        document.getElementById('btn-timer-ss').textContent = 'START';
+        broadcastTimerToPlayers(modTimerRemaining, false);
+    } else {
+        if (modTimerRemaining <= 0) modTimerLoad();
+        modTimerRunning = true;
+        document.getElementById('btn-timer-ss').textContent = 'PAUSE';
+        broadcastTimerToPlayers(modTimerRemaining, true);
+        modTimerInterval = setInterval(() => {
+            modTimerRemaining--;
+            renderModTimerDisplay();
+            broadcastTimerToPlayers(modTimerRemaining, true);
+            if (modTimerRemaining <= 0) {
+                clearInterval(modTimerInterval); modTimerRunning = false;
+                document.getElementById('btn-timer-ss').textContent = 'START';
+                ws_send({ type: 'close_round' });
+                toast('TIME UP — round closed', 'warn');
+            }
+        }, 1000);
+    }
+}
+function renderModTimerDisplay() {
+    const el = document.getElementById('mod-timer-disp');
+    const s = modTimerRemaining;
+    el.textContent = fmtTime(s);
+    el.className = 'timer-digits' + (s <= 5 ? 'danger' : s <= 10 ? ' warn' : '');
+}
+
+// We sync timer to players via a side-channel: store in sessionStorage and poll
+// (pure client-side sync — no extra server message needed)
+function broadcastTimerToPlayers(sec, running) {
+    // encode into a BroadcastChannel so other tabs (players on same device) see it
+    try {
+        const bc = new BroadcastChannel('buzzer_timer');
+        bc.postMessage({ sec, running });
+        bc.close();
+    } catch { }
+}
+
+// ══════════════════════════════════════════════════════
+// MOD RENDER
+// ══════════════════════════════════════════════════════
+function renderMod() {
+    if (!room) return;
+    document.getElementById('mod-code').textContent = room.id;
+    document.getElementById('mod-pcount').textContent = room.players.length + ' PLAYER' + (room.players.length !== 1 ? 'S' : '');
+    document.getElementById('mod-rstatus').textContent = 'ROUND: ' + (room.buzzerState.roundOpen ? 'OPEN' : 'CLOSED');
+    document.getElementById('lock-room-tog').checked = room.locked;
+    document.getElementById('lock-teams-tog').checked = room.teamLocked;
+    document.getElementById('pcount-badge').textContent = room.players.length;
+    document.getElementById('lock-teams-row').style.display = room.settings.mode === 'teams' ? 'flex' : 'none';
+    document.getElementById('tab-teams-btn').style.display = room.settings.mode === 'teams' ? 'block' : 'none';
+    if (!modTimerRunning && room.settings.timerSeconds > 0 && modTimerRemaining === 0) {
+        modTimerRemaining = room.settings.timerSeconds;
+        document.getElementById('mod-timer-set').value = room.settings.timerSeconds;
+        renderModTimerDisplay();
+    }
+    renderModBuzz(null);
+    renderModPlayerList();
+    renderModTeams();
+}
+
+function renderModBuzz(evt) {
+    const order = room?.buzzerState?.buzzOrder ?? [];
+    const emptyEl = document.getElementById('mod-bz-empty');
+    const listEl = document.getElementById('mod-bz-list');
+    if (order.length === 0) { emptyEl.style.display = 'block'; listEl.innerHTML = ''; return; }
+    emptyEl.style.display = 'none';
+    listEl.innerHTML = '';
+    const times = evt?.buzzTimes ?? {};
+    const firstTime = times[order[0]];
+    order.forEach((pid, idx) => {
+        const p = room.players.find(x => x.id === pid); if (!p) return;
+        const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : null;
+        const color = p.teamIndex !== null ? teamColor(p.teamIndex) : 'var(--g)';
+        const ms = times[pid] && firstTime && idx > 0 ? '+' + (times[pid] - firstTime) + 'ms' : '';
+        const div = document.createElement('div');
+        div.className = 'bz-entry';
+        div.innerHTML = `
+      <div class="bz-rank ${idx === 0 ? 'first' : ''}">${idx + 1}</div>
+      <div class="bz-info">
+        <div class="bz-name">${esc(p.name)}</div>
+        ${teamName ? `<div class="bz-team" style="color:${color}">${esc(teamName)}</div>` : ''}
+        ${ms ? `<div class="bz-ms">${ms} after first</div>` : ''}
+      </div>
+    `;
+        listEl.appendChild(div);
+    });
+}
+
+function renderModPlayerList() {
+    if (!room) return;
+    const el = document.getElementById('mod-plist');
+    if (room.players.length === 0) { el.innerHTML = '<div class="empty">No players yet.</div>'; return; }
+    el.innerHTML = '';
+    room.players.forEach(p => {
+        const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : null;
+        const color = p.teamIndex !== null ? teamColor(p.teamIndex) : null;
+        let teamSel = '';
+        if (room.settings.mode === 'teams') {
+            let opts = `<option value="-1" ${p.teamIndex === null ? 'selected' : ''}>No team</option>`;
+            for (let i = 0; i < room.settings.numTeams; i++) {
+                const tn = room.settings.teamNames[i] ?? greekName(i);
+                opts += `<option value="${i}" ${p.teamIndex === i ? 'selected' : ''}>${esc(tn)}</option>`;
+            }
+            teamSel = `<select style="margin-top:6px;font-size:12px;padding:4px 8px;" onchange="ws_send({type:'assign_team',playerId:'${p.id}',teamIndex:+this.value===-1?null:+this.value})">${opts}</select>`;
+        }
+        const row = document.createElement('div');
+        row.className = 'pl-row' + (p.isConnected ? '' : ' offline');
+        row.innerHTML = `
+      <div class="pl-info" style="flex:1;min-width:0;">
+        <div class="pl-name">${esc(p.name)} ${p.isConnected ? '' : '<span class="tag tag-red" style="font-size:9px">OFFLINE</span>'}</div>
+        ${teamName ? `<div class="pl-meta" style="color:${color}">${esc(teamName)}</div>` : '<div class="pl-meta">No team</div>'}
+        ${teamSel}
+      </div>
+      <div class="pl-actions">
+        <button class="btn btn-red btn-sm" onclick="ws_send({type:'kick_player',playerId:'${p.id}'})">KICK</button>
+      </div>
+    `;
+        el.appendChild(row);
+    });
+}
+
+function renderModTeams() {
+    if (!room || room.settings.mode !== 'teams') return;
+    const grid = document.getElementById('mod-team-grid');
+    grid.innerHTML = '';
+    for (let i = 0; i < room.settings.numTeams; i++) {
+        const members = room.players.filter(p => p.teamIndex === i);
+        const color = teamColor(i);
+        const name = room.settings.teamNames[i] ?? greekName(i);
+        const card = document.createElement('div');
+        card.className = 'team-card';
+        card.style.borderColor = color;
+        card.innerHTML = `
+      <div class="tc-n" style="color:${color}">${esc(name)}</div>
+      <div class="tc-c" style="color:${color}">${members.length}</div>
+      <div class="tc-m">${members.map(p => esc(p.name)).join('<br>') || '—'}</div>
+    `;
+        grid.appendChild(card);
+    }
+}
+
+function renderModSettings() {
+    if (!room) return;
+    const s = room.settings;
+    document.getElementById('ls-lockout').checked = s.buzzerLockout;
+    document.getElementById('ls-showorder').checked = s.showBuzzOrder;
+    document.getElementById('ls-playerpick').checked = s.playerPickTeam;
+    document.getElementById('ls-numteams').value = s.numTeams;
+    segActivate('ls-seg-mode', s.mode);
+    renderLiveTeamNames();
+}
+
+function segActivate(groupId, val) {
+    document.querySelectorAll('#' + groupId + ' .seg-opt').forEach(b => b.classList.toggle('active', b.dataset.v === val));
+}
+
+function renderLiveTeamNames() {
+    if (!room) return;
+    const container = document.getElementById('ls-team-names');
+    container.innerHTML = '';
+    for (let i = 0; i < room.settings.numTeams; i++) {
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;align-items:center;gap:8px;';
+        const dot = document.createElement('div');
+        const c = teamColor(i);
+        dot.style.cssText = `width:11px;height:11px;border-radius:50%;background:${c};flex-shrink:0;`;
+        const inp = document.createElement('input');
+        inp.type = 'text'; inp.maxLength = 32;
+        inp.value = room.settings.teamNames[i] ?? greekName(i);
+        inp.onchange = () => updateLiveTeamName(i, inp.value);
+        row.appendChild(dot); row.appendChild(inp);
+        container.appendChild(row);
+    }
+}
+
+function updateLiveTeamName(idx, val) {
+    if (!room) return;
+    const names = [...room.settings.teamNames];
+    names[idx] = val.trim() || greekName(idx);
+    ws_send({ type: 'update_settings', settings: { teamNames: names } });
+}
+function pushSetting(key, val) { ws_send({ type: 'update_settings', settings: { [key]: val } }); }
+
+// ══════════════════════════════════════════════════════
+// PLAYER TIMER (receives from BroadcastChannel)
+// ══════════════════════════════════════════════════════
+let _bc = null;
+function initPlayerTimer() {
+    try {
+        _bc = new BroadcastChannel('buzzer_timer');
+        _bc.onmessage = e => {
+            const { sec, running } = e.data;
+            playerTimerRemaining = sec;
+            clearInterval(playerTimerInterval);
+            renderPlayerTimer();
+            if (running && sec > 0) {
+                playerTimerInterval = setInterval(() => {
+                    playerTimerRemaining--;
+                    renderPlayerTimer();
+                    if (playerTimerRemaining <= 0) clearInterval(playerTimerInterval);
+                }, 1000);
+            }
+        };
+    } catch { }
+}
+function stopPlayerTimer() { clearInterval(playerTimerInterval); }
+function startPlayerTimer() {
+    // timer already synced via BroadcastChannel
+}
+function renderPlayerTimer() {
+    const el = document.getElementById('p-timer');
+    const s = playerTimerRemaining;
+    if (s <= 0 || !room?.settings.timerSeconds) { el.className = 'p-timer hidden'; return; }
+    el.textContent = fmtTime(s);
+    el.className = 'p-timer' + (s <= 5 ? ' danger' : s <= 10 ? ' warn' : '');
+}
+
+// ══════════════════════════════════════════════════════
+// PLAYER RENDER
+// ══════════════════════════════════════════════════════
+function renderPlayer() {
+    if (!room) return;
+    document.getElementById('p-code').textContent = room.id;
+    const me = room.players.find(p => p.id === myId);
+    document.getElementById('p-namelbl').textContent = me?.name ?? '';
+    renderTeamPicker();
+    renderPlayerBuzzer();
+    renderRoster();
+}
+
+function renderTeamPicker() {
+    if (!room) return;
+    const s = room.settings;
+    const picker = document.getElementById('p-team-picker');
+    if (s.mode !== 'teams' || !s.playerPickTeam || room.teamLocked) { picker.style.display = 'none'; return; }
+    picker.style.display = 'block';
+    const me = room.players.find(p => p.id === myId);
+    const grid = document.getElementById('p-team-grid');
+    grid.innerHTML = '';
+    for (let i = 0; i < s.numTeams; i++) {
+        const members = room.players.filter(p => p.teamIndex === i);
+        const color = teamColor(i);
+        const isMine = me?.teamIndex === i;
+        const btn = document.createElement('button');
+        btn.className = 'team-btn' + (isMine ? ' mine' : '');
+        btn.style.borderColor = isMine ? color : 'var(--border)';
+        btn.style.color = isMine ? color : 'var(--text)';
+        btn.innerHTML = `<div>${esc(s.teamNames[i] ?? greekName(i))}</div><div class="tb-count">${members.length} player${members.length !== 1 ? 's' : ''}</div>`;
+        btn.onclick = () => ws_send({ type: 'pick_team', teamIndex: i });
+        grid.appendChild(btn);
+    }
+}
+
+function renderPlayerBuzzer() {
+    if (!room) return;
+    const btn = document.getElementById('buzz-btn');
+    const sts = document.getElementById('buzz-status');
+    const bz = room.buzzerState;
+    const already = bz.buzzOrder.includes(myId);
+    const isFirst = bz.buzzOrder[0] === myId;
+    if (!bz.roundOpen) {
+        btn.className = 's-closed'; btn.disabled = true; sts.textContent = 'WAITING FOR ROUND';
+    } else if (isFirst) {
+        btn.className = 's-first'; btn.disabled = false; sts.textContent = '⚡ YOU BUZZED FIRST!';
+    } else if (already) {
+        const pos = bz.buzzOrder.indexOf(myId) + 1;
+        btn.className = 's-buzzed'; btn.disabled = true; sts.textContent = 'BUZZED — #' + pos + ' IN ORDER';
+    } else if (room.settings.buzzerLockout && bz.buzzOrder.length > 0) {
+        btn.className = 's-locked'; btn.disabled = true; sts.textContent = 'BUZZER LOCKED OUT';
+    } else {
+        btn.className = 's-open'; btn.disabled = false; sts.textContent = 'ROUND OPEN — BUZZ!';
+    }
+}
+
+function renderRoster() {
+    if (!room) return;
+    const el = document.getElementById('p-roster');
+    if (room.players.length === 0) { el.innerHTML = '<div style="font-size:13px;color:var(--dim);padding:10px">No players yet.</div>'; return; }
+    el.innerHTML = '';
+    room.players.forEach(p => {
+        const isMe = p.id === myId;
+        const color = p.teamIndex !== null ? teamColor(p.teamIndex) : 'var(--g)';
+        const teamName = (room.settings.mode === 'teams' && p.teamIndex !== null) ? (room.settings.teamNames[p.teamIndex] ?? '') : '';
+        const row = document.createElement('div');
+        row.className = 'roster-row' + (isMe ? ' roster-me' : '');
+        row.innerHTML = `
+      <div class="roster-dot" style="background:${p.isConnected ? (isMe ? 'var(--g)' : color) : 'var(--border)'}"></div>
+      <div style="flex:1">${esc(p.name)}${isMe ? ' <span style="font-size:11px;color:var(--dim)">(YOU)</span>' : ''}</div>
+      ${teamName ? `<div style="font-size:12px;color:${color}">${esc(teamName)}</div>` : ''}
+    `;
+        el.appendChild(row);
+    });
+}
+
+function addFeed(evt) {
+    const feed = document.getElementById('p-feed');
+    const isFirst = evt.buzzOrder?.[0] === evt.playerId;
+    const color = evt.teamIndex !== null ? teamColor(evt.teamIndex) : 'var(--g)';
+    const teamStr = (room?.settings.mode === 'teams' && evt.teamIndex !== null) ? ` [${esc(room.settings.teamNames[evt.teamIndex] ?? '')}]` : '';
+    const div = document.createElement('div');
+    div.className = 'feed-entry' + (isFirst ? ' first' : '');
+    div.style.borderColor = isFirst ? 'var(--yellow)' : color;
+    div.innerHTML = `<strong>${esc(evt.playerName)}</strong>${teamStr} buzzed${isFirst ? ' <span style="color:var(--yellow)">— FIRST!</span>' : ''}`;
+    feed.prepend(div);
+    while (feed.children.length > 30) feed.removeChild(feed.lastChild);
+}
+
+function doBuzz() { ws_send({ type: 'buzz' }); }
+
+// ══════════════════════════════════════════════════════
+// TABS
+// ══════════════════════════════════════════════════════
+function setTab(name, el) {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('on'));
+    el.classList.add('on');
+    ['buzzer', 'players', 'teams', 'settings'].forEach(t => {
+        const te = document.getElementById('tab-' + t);
+        if (te) te.style.display = t === name ? 'block' : 'none';
+    });
+    if (name === 'players') renderModPlayerList();
+    if (name === 'teams') renderModTeams();
+    if (name === 'settings') renderModSettings();
+}
+
+// ══════════════════════════════════════════════════════
+// MODALS / TOAST / UTIL
+// ══════════════════════════════════════════════════════
+function openModal(id) { document.getElementById(id).classList.add('on'); }
+function closeModal(id) { document.getElementById(id).classList.remove('on'); }
+function copyCode() {
+    if (!room) return;
+    navigator.clipboard.writeText(room.id).then(() => toast('Code copied', 'ok'));
+}
+function toast(msg, type = '') {
+    const el = document.createElement('div');
+    el.className = 'toast ' + type; el.textContent = msg;
+    document.getElementById('toasts').appendChild(el);
+    setTimeout(() => { el.style.transition = 'opacity .3s'; el.style.opacity = '0'; setTimeout(() => el.remove(), 300); }, 2700);
+}
+function esc(s) {
+    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// ══════════════════════════════════════════════════════
+// KEYBOARD — SPACE TO BUZZ
+// ══════════════════════════════════════════════════════
+document.addEventListener('keydown', e => {
+    if (role !== 'player') return;
+    if (e.code === 'Space' || e.key === ' ') {
+        const tag = document.activeElement?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+        e.preventDefault();
+        const btn = document.getElementById('buzz-btn');
+        if (!btn.disabled) { btn.click(); btn.style.transform = 'scale(.93)'; setTimeout(() => btn.style.transform = '', 120); }
+    }
+});
+
+// close modals on backdrop click
+document.querySelectorAll('.modal-bg').forEach(bg => {
+    bg.addEventListener('click', e => { if (e.target === bg) bg.classList.remove('on'); });
+});
+
+// ══════════════════════════════════════════════════════
+// INIT
+// ══════════════════════════════════════════════════════
+window.addEventListener('DOMContentLoaded', () => {
+    const m = loadMod();
+    if (m) { document.getElementById('rejoin-bar').style.display = 'block'; document.getElementById('m-rejoin-code').textContent = m.id; }
+    showScr('s-land');
+    connect(null);
+    initPlayerTimer();
+    renderSetupTeamNames();
+    // init seg mode display
+    const modeBtn = document.querySelector('#seg-mode .seg-opt.active');
+    if (modeBtn) segSelect('seg-mode', modeBtn);
+});
diff --git a/src/public/styles.css b/src/public/styles.css
new file mode 100644
index 0000000..07a51ca
--- /dev/null
+++ b/src/public/styles.css
@@ -0,0 +1,1215 @@
+/* ── RESET ─────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html {
+    font-size: 17px;
+}
+
+body {
+    font-family: 'JetBrains Mono', monospace;
+    background: #060906;
+    color: #c8ffcc;
+    min-height: 100dvh;
+    overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: #0a0f0a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #1a4a1a;
+    border-radius: 2px;
+}
+
+/* ── TOKENS ────────────────────────────────────────── */
+:root {
+    --g: #00ff41;
+    --g2: #00cc34;
+    --g3: #007a1f;
+    --gdark: #001a07;
+    --bg: #060906;
+    --bg2: #0a0f0a;
+    --bg3: #0f160f;
+    --panel: #0c140c;
+    --border: #1a3a1a;
+    --text: #c8ffcc;
+    --dim: #4a8a54;
+    --mid: #7abf84;
+    --red: #ff4444;
+    --yellow: #ffe141;
+    --cyan: #41ffe4;
+    --r: 4px;
+}
+
+/* ── UTILS ─────────────────────────────────────────── */
+.glow {
+    text-shadow: 0 0 14px var(--g), 0 0 28px rgba(0, 255, 65, .3);
+}
+
+/* ── LAYOUT ────────────────────────────────────────── */
+#app {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ── HEADER ────────────────────────────────────────── */
+header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 20px;
+    height: 54px;
+    min-height: 54px;
+    background: var(--bg2);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 200;
+}
+
+.logo {
+    font-size: 20px;
+    font-weight: 800;
+    letter-spacing: 6px;
+    color: var(--g);
+    text-shadow: 0 0 10px var(--g);
+}
+
+.logo-sub {
+    font-size: 10px;
+    color: var(--dim);
+    letter-spacing: 2px;
+    margin-top: -2px;
+}
+
+.hdr-r {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.room-chip {
+    font-size: 12px;
+    letter-spacing: 3px;
+    color: var(--g2);
+    display: none;
+}
+
+.conn-pill {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    color: var(--dim);
+    letter-spacing: 1px;
+}
+
+.conn-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--red);
+    flex-shrink: 0;
+    transition: background .3s, box-shadow .3s;
+}
+
+.conn-dot.on {
+    background: var(--g);
+    box-shadow: 0 0 6px var(--g);
+}
+
+/* ── SCREENS ───────────────────────────────────────── */
+.scr {
+    display: none;
+    flex: 1;
+    flex-direction: column;
+}
+
+.scr.on {
+    display: flex;
+}
+
+/* ── LANDING ───────────────────────────────────────── */
+#s-land {
+    align-items: center;
+    justify-content: center;
+    padding: 48px 20px;
+    gap: 40px;
+}
+
+.hero {
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: clamp(48px, 12vw, 96px);
+    font-weight: 800;
+    letter-spacing: 12px;
+    color: var(--g);
+    line-height: 1;
+}
+
+.hero p {
+    font-size: 12px;
+    color: var(--dim);
+    letter-spacing: 4px;
+    margin-top: 12px;
+}
+
+.land-cards {
+    display: flex;
+    gap: 18px;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    max-width: 720px;
+}
+
+.land-card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    padding: 30px 26px;
+    flex: 1;
+    min-width: 270px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    transition: border-color .2s;
+}
+
+.land-card:hover {
+    border-color: var(--g3);
+}
+
+.land-card h2 {
+    font-size: 12px;
+    letter-spacing: 3px;
+    color: var(--g);
+}
+
+.land-card p {
+    font-size: 13px;
+    color: var(--dim);
+    line-height: 1.7;
+}
+
+.rejoin-bar {
+    font-size: 12px;
+    color: var(--dim);
+}
+
+.rejoin-bar a {
+    color: var(--g2);
+    text-decoration: none;
+    letter-spacing: 1px;
+}
+
+.rejoin-bar a:hover {
+    color: var(--g);
+}
+
+/* ── SETUP ─────────────────────────────────────────── */
+#s-setup {
+    align-items: center;
+    overflow-y: auto;
+    padding: 32px 20px;
+}
+
+.setup-wrap {
+    width: 100%;
+    max-width: 620px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.setup-title {
+    font-size: 13px;
+    letter-spacing: 4px;
+    color: var(--g);
+    margin-bottom: 4px;
+}
+
+.setup-sub {
+    font-size: 12px;
+    color: var(--dim);
+    letter-spacing: 1px;
+}
+
+/* ── FORM ATOMS ────────────────────────────────────── */
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+label,
+.lbl {
+    font-size: 11px;
+    letter-spacing: 1.5px;
+    color: var(--dim);
+}
+
+input[type=text],
+input[type=number],
+select {
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 16px;
+    padding: 11px 13px;
+    border-radius: var(--r);
+    width: 100%;
+    outline: none;
+    transition: border-color .15s;
+}
+
+input:focus,
+select:focus {
+    border-color: var(--g2);
+}
+
+input::placeholder {
+    color: var(--dim);
+    font-size: 14px;
+}
+
+select option {
+    background: var(--bg3);
+}
+
+/* seg */
+.seg {
+    display: flex;
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    overflow: hidden;
+}
+
+.seg-opt {
+    flex: 1;
+    padding: 11px 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    letter-spacing: 1px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--dim);
+    background: var(--bg3);
+    border: none;
+    transition: all .15s;
+}
+
+.seg-opt.active {
+    background: var(--gdark);
+    color: var(--g);
+}
+
+.seg-opt:hover:not(.active) {
+    color: var(--text);
+}
+
+/* toggle */
+.tog-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 0;
+    border-bottom: 1px solid var(--border);
+    gap: 12px;
+}
+
+.tog-row:last-child {
+    border-bottom: none;
+}
+
+.tog-row .lbl {
+    font-size: 13px;
+    color: var(--text);
+    letter-spacing: 0;
+    line-height: 1.4;
+}
+
+.lbl-sub {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 2px;
+}
+
+.tog {
+    position: relative;
+    width: 42px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.tog input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+}
+
+.tog-track {
+    position: absolute;
+    inset: 0;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background .2s, border-color .2s;
+}
+
+.tog input:checked~.tog-track {
+    background: var(--gdark);
+    border-color: var(--g2);
+}
+
+.tog-track::after {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--dim);
+    top: 3px;
+    left: 3px;
+    transition: all .2s;
+}
+
+.tog input:checked~.tog-track::after {
+    background: var(--g);
+    left: 21px;
+}
+
+/* ── BUTTONS ───────────────────────────────────────── */
+.btn {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    letter-spacing: 2px;
+    padding: 12px 22px;
+    border: 1px solid;
+    border-radius: var(--r);
+    cursor: pointer;
+    transition: all .15s;
+    text-transform: uppercase;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.btn-g {
+    border-color: var(--g);
+    color: var(--g);
+    background: transparent;
+}
+
+.btn-g:hover {
+    background: var(--g);
+    color: var(--bg);
+}
+
+.btn-ghost {
+    border-color: var(--border);
+    color: var(--dim);
+    background: transparent;
+}
+
+.btn-ghost:hover {
+    border-color: var(--mid);
+    color: var(--text);
+}
+
+.btn-red {
+    border-color: var(--red);
+    color: var(--red);
+    background: transparent;
+}
+
+.btn-red:hover {
+    background: var(--red);
+    color: var(--bg);
+}
+
+.btn-yellow {
+    border-color: var(--yellow);
+    color: var(--yellow);
+    background: transparent;
+}
+
+.btn-yellow:hover {
+    background: var(--yellow);
+    color: var(--bg);
+}
+
+.btn-sm {
+    padding: 8px 13px;
+    font-size: 11px;
+    letter-spacing: 1px;
+}
+
+.btn-full {
+    width: 100%;
+}
+
+.btn:disabled {
+    opacity: .4;
+    cursor: not-allowed;
+}
+
+/* ── PANEL ─────────────────────────────────────────── */
+.panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    padding: 22px;
+}
+
+.panel-title {
+    font-size: 11px;
+    letter-spacing: 3px;
+    color: var(--g);
+    margin-bottom: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* ── TAG ───────────────────────────────────────────── */
+.tag {
+    display: inline-block;
+    padding: 2px 9px;
+    font-size: 10px;
+    letter-spacing: 1px;
+    border: 1px solid;
+    border-radius: 2px;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.tag-g {
+    border-color: var(--g2);
+    color: var(--g2);
+}
+
+.tag-red {
+    border-color: var(--red);
+    color: var(--red);
+}
+
+.tag-y {
+    border-color: var(--yellow);
+    color: var(--yellow);
+}
+
+.tag-dim {
+    border-color: var(--border);
+    color: var(--dim);
+}
+
+/* ══════════════════════════════════════════════════════
+   MOD LAYOUT
+   ══════════════════════════════════════════════════════ */
+#s-mod {
+    flex-direction: row;
+    overflow: hidden;
+    height: calc(100dvh - 54px);
+}
+
+.mod-side {
+    width: 272px;
+    min-width: 272px;
+    background: var(--bg2);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.mod-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 22px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.side-sec {
+    padding: 16px 18px;
+    border-bottom: 1px solid var(--border);
+}
+
+.side-label {
+    font-size: 9px;
+    letter-spacing: 3px;
+    color: var(--dim);
+    margin-bottom: 10px;
+}
+
+.side-hint {
+    font-size: 10px;
+    color: var(--dim);
+    letter-spacing: 1px;
+}
+
+.side-room-code {
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: 8px;
+    color: var(--g);
+    line-height: 1;
+}
+
+.side-btn-group {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.side-status {
+    font-size: 11px;
+    color: var(--dim);
+    line-height: 1.9;
+}
+
+/* ── TIMER BLOCK ───────────────────────────────────── */
+.timer-block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.timer-digits {
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    color: var(--g);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    transition: color .3s;
+}
+
+.timer-digits.warn {
+    color: var(--yellow);
+    text-shadow: 0 0 12px rgba(255, 225, 65, .4);
+}
+
+.timer-digits.danger {
+    color: var(--red);
+    text-shadow: 0 0 12px rgba(255, 68, 68, .5);
+    animation: tblink .5s step-end infinite;
+}
+
+@keyframes tblink {
+    50% {
+        opacity: .25;
+    }
+}
+
+.timer-controls {
+    display: flex;
+    gap: 7px;
+}
+
+.timer-controls .btn {
+    flex: 1;
+}
+
+.timer-set-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    padding: 6px 10px;
+}
+
+.timer-set-row input {
+    width: 56px;
+    padding: 2px 4px;
+    font-size: 15px;
+    background: transparent;
+    border: none;
+    text-align: center;
+    color: var(--text);
+}
+
+.timer-set-row input:focus {
+    outline: none;
+}
+
+/* ── TABS ──────────────────────────────────────────── */
+.tab-bar {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+}
+
+.tab {
+    padding: 11px 18px;
+    font-size: 11px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all .15s;
+}
+
+.tab:hover {
+    color: var(--text);
+}
+
+.tab.on {
+    color: var(--g);
+    border-bottom-color: var(--g);
+}
+
+/* ── BUZZ LIST ─────────────────────────────────────── */
+.buzz-list {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.bz-entry {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 13px 16px;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+}
+
+.bz-rank {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--g2);
+    width: 30px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.bz-rank.first {
+    color: var(--yellow);
+    text-shadow: 0 0 8px var(--yellow);
+}
+
+.bz-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.bz-name {
+    font-size: 16px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.bz-team {
+    font-size: 12px;
+    margin-top: 3px;
+}
+
+.bz-ms {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 2px;
+}
+
+/* ── PLAYERS ───────────────────────────────────────── */
+.player-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.pl-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 11px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.pl-row:last-child {
+    border-bottom: none;
+}
+
+.pl-row.offline {
+    opacity: .4;
+}
+
+.pl-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.pl-name {
+    font-size: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pl-meta {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 3px;
+}
+
+.pl-actions {
+    display: flex;
+    gap: 5px;
+    flex-shrink: 0;
+}
+
+/* ── TEAM GRID (mod) ───────────────────────────────── */
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 10px;
+}
+
+.team-card {
+    background: var(--bg3);
+    border: 1px solid;
+    border-radius: var(--r);
+    padding: 16px;
+    text-align: center;
+}
+
+.team-card .tc-n {
+    font-size: 11px;
+    letter-spacing: 2px;
+    margin-bottom: 8px;
+}
+
+.team-card .tc-c {
+    font-size: 28px;
+    font-weight: 700;
+}
+
+.team-card .tc-m {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 6px;
+    line-height: 1.5;
+}
+
+/* ── SETTINGS ──────────────────────────────────────── */
+.setting-row {
+    padding: 11px 0;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.setting-row:last-child {
+    border-bottom: none;
+}
+
+.sl {
+    font-size: 13px;
+}
+
+.sd {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 3px;
+}
+
+/* ══════════════════════════════════════════════════════
+   PLAYER SCREEN
+   ══════════════════════════════════════════════════════ */
+#s-player {
+    align-items: center;
+    padding: 28px 20px 36px;
+    gap: 26px;
+    overflow-y: auto;
+}
+
+.p-room {
+    text-align: center;
+}
+
+.p-room-code {
+    font-size: 34px;
+    font-weight: 700;
+    letter-spacing: 8px;
+    color: var(--g);
+}
+
+.p-room-lbl {
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    margin-bottom: 4px;
+}
+
+.p-name-lbl {
+    font-size: 14px;
+    color: var(--mid);
+    margin-top: 8px;
+}
+
+/* player timer */
+.p-timer {
+    font-size: 52px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    color: var(--g);
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+}
+
+.p-timer.warn {
+    color: var(--yellow);
+}
+
+.p-timer.danger {
+    color: var(--red);
+    animation: tblink .5s step-end infinite;
+}
+
+.p-timer.hidden {
+    display: none;
+}
+
+/* team picker */
+.team-picker {
+    width: 100%;
+    max-width: 500px;
+}
+
+.team-picker-title {
+    font-size: 11px;
+    letter-spacing: 3px;
+    color: var(--dim);
+    margin-bottom: 14px;
+}
+
+.team-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 9px;
+}
+
+.team-btn {
+    padding: 15px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    background: var(--bg3);
+    color: var(--text);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 13px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    text-align: center;
+    transition: all .15s;
+}
+
+.team-btn:hover {
+    border-color: var(--mid);
+}
+
+.team-btn.mine {
+    border-width: 2px;
+    font-weight: 700;
+}
+
+.tb-count {
+    font-size: 11px;
+    color: var(--dim);
+    margin-top: 5px;
+}
+
+/* buzz button */
+.buzz-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+#buzz-btn {
+    width: clamp(210px, 52vw, 270px);
+    height: clamp(210px, 52vw, 270px);
+    border-radius: 50%;
+    border: 3px solid var(--g);
+    background: rgba(0, 255, 65, .04);
+    color: var(--g);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: clamp(16px, 4vw, 22px);
+    font-weight: 700;
+    letter-spacing: 4px;
+    cursor: pointer;
+    transition: all .12s;
+    box-shadow: 0 0 30px rgba(0, 255, 65, .1), inset 0 0 30px rgba(0, 255, 65, .03);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+#buzz-btn:active:not(:disabled) {
+    transform: scale(.95);
+}
+
+#buzz-btn:disabled {
+    cursor: not-allowed;
+}
+
+#buzz-btn.s-open {
+    border-color: var(--g);
+    color: var(--g);
+    box-shadow: 0 0 50px rgba(0, 255, 65, .25), inset 0 0 30px rgba(0, 255, 65, .06);
+}
+
+#buzz-btn.s-first {
+    border-color: var(--yellow);
+    color: var(--yellow);
+    box-shadow: 0 0 60px rgba(255, 225, 65, .45);
+    animation: pulse-win .8s ease-in-out infinite alternate;
+}
+
+#buzz-btn.s-buzzed {
+    border-color: var(--g2);
+    color: var(--g2);
+    opacity: .65;
+}
+
+#buzz-btn.s-locked {
+    border-color: var(--red);
+    color: var(--red);
+    box-shadow: 0 0 24px rgba(255, 68, 68, .18);
+}
+
+#buzz-btn.s-closed {
+    border-color: var(--border);
+    color: var(--dim);
+}
+
+@keyframes pulse-win {
+    from {
+        box-shadow: 0 0 30px rgba(255, 225, 65, .3);
+    }
+
+    to {
+        box-shadow: 0 0 90px rgba(255, 225, 65, .75);
+    }
+}
+
+.buzz-status {
+    font-size: 13px;
+    letter-spacing: 2px;
+    color: var(--dim);
+    text-align: center;
+    min-height: 22px;
+}
+
+/* feed & roster */
+.p-panel {
+    width: 100%;
+    max-width: 500px;
+}
+
+.p-panel-title {
+    font-size: 11px;
+    letter-spacing: 3px;
+    color: var(--dim);
+    margin-bottom: 12px;
+}
+
+.feed-entry {
+    padding: 10px 14px;
+    background: var(--bg2);
+    border-left: 3px solid var(--g);
+    margin-bottom: 7px;
+    font-size: 14px;
+    animation: slidein .2s ease;
+    border-radius: 0 var(--r) var(--r) 0;
+}
+
+.feed-entry.first {
+    border-color: var(--yellow);
+}
+
+@keyframes slidein {
+    from {
+        transform: translateX(-8px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.roster-row {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 14px;
+}
+
+.roster-row:last-child {
+    border-bottom: none;
+}
+
+.roster-me {
+    color: var(--g);
+}
+
+.roster-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* ── MODALS ────────────────────────────────────────── */
+.modal-bg {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, .88);
+    z-index: 900;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.modal-bg.on {
+    display: flex;
+}
+
+.modal {
+    background: var(--bg2);
+    border: 1px solid var(--g2);
+    border-radius: var(--r);
+    padding: 30px;
+    width: 100%;
+    max-width: 440px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.modal h2 {
+    font-size: 13px;
+    letter-spacing: 3px;
+    color: var(--g);
+}
+
+.modal-btns {
+    display: flex;
+    gap: 9px;
+    justify-content: flex-end;
+    margin-top: 4px;
+}
+
+/* ── TOAST ─────────────────────────────────────────── */
+#toasts {
+    position: fixed;
+    top: 64px;
+    right: 16px;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    pointer-events: none;
+}
+
+.toast {
+    padding: 11px 18px;
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    font-size: 12px;
+    letter-spacing: 1px;
+    border-radius: var(--r);
+    max-width: 300px;
+    animation: toastin .2s ease;
+}
+
+.toast.ok {
+    border-color: var(--g);
+    color: var(--g);
+}
+
+.toast.err {
+    border-color: var(--red);
+    color: var(--red);
+}
+
+.toast.warn {
+    border-color: var(--yellow);
+    color: var(--yellow);
+}
+
+@keyframes toastin {
+    from {
+        transform: translateX(14px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* ── EMPTY ─────────────────────────────────────────── */
+.empty {
+    font-size: 12px;
+    color: var(--dim);
+    letter-spacing: 1px;
+    text-align: center;
+    padding: 26px;
+}
+
+/* ── RESPONSIVE ────────────────────────────────────── */
+@media (max-width: 660px) {
+    #s-mod {
+        flex-direction: column;
+        height: auto;
+        overflow: visible;
+    }
+
+    .mod-side {
+        width: 100%;
+        min-width: unset;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .mod-body {
+        padding: 14px;
+    }
+
+    .timer-digits {
+        font-size: 38px;
+    }
+}
\ No newline at end of file
diff --git a/src/rooms.ts b/src/rooms.ts
index cab977b..46020df 100644
--- a/src/rooms.ts
+++ b/src/rooms.ts
@@ -4,10 +4,10 @@ export interface RoomSettings {
   mode: "individual" | "teams";
   numTeams: number;
   teamNames: string[];
-  playerPickTeam: boolean;   // players can self-assign teams
-  showBuzzOrder: boolean;    // show full order vs first only
-  buzzerLockout: boolean;    // lock after first buzz
-  timerSeconds: number;      // 0 = no timer
+  playerPickTeam: boolean;
+  showBuzzOrder: boolean;
+  buzzerLockout: boolean;
+  timerSeconds: number;
 }
 
 export interface Player {
@@ -31,13 +31,28 @@ export interface Room {
   settings: RoomSettings;
   players: Map<string, Player>;
   buzzerState: BuzzerState;
-  locked: boolean;          // room locked to new joins
-  teamLocked: boolean;      // team selection locked
+  locked: boolean;
+  teamLocked: boolean;
 }
 
-export const rooms    = new Map<string, Room>();
+export const rooms     = new Map<string, Room>();
 export const wsToPlayer = new Map<ServerWebSocket<unknown>, { roomId: string; playerId: string }>();
 
+// Infinite Greek alphabet: Alpha, Beta, ... Omega, Alpha II, Beta II, ...
+const GREEK = ["Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta","Theta","Iota","Kappa","Lambda","Mu","Nu","Xi","Omicron","Pi","Rho","Sigma","Tau","Upsilon","Phi","Chi","Psi","Omega"];
+export function greekName(i: number): string {
+  const cycle = Math.floor(i / GREEK.length);
+  const name   = GREEK[i % GREEK.length];
+  return cycle === 0 ? name : `${name} ${toRoman(cycle + 1)}`;
+}
+function toRoman(n: number): string {
+  const vals = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
+  const syms = ["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"];
+  let out = "";
+  for (let i = 0; i < vals.length; i++) while (n >= vals[i]) { out += syms[i]; n -= vals[i]; }
+  return out;
+}
+
 export function genId(len = 8): string {
   const c = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
   let s = "";
@@ -55,11 +70,11 @@ export function freshBuzzer(): BuzzerState {
 
 export function publicRoom(room: Room) {
   return {
-    id:         room.id,
-    settings:   room.settings,
-    locked:     room.locked,
-    teamLocked: room.teamLocked,
-    modOnline:  room.modWs !== null,
+    id:          room.id,
+    settings:    room.settings,
+    locked:      room.locked,
+    teamLocked:  room.teamLocked,
+    modOnline:   room.modWs !== null,
     buzzerState: {
       roundOpen: room.buzzerState.roundOpen,
       buzzOrder: room.buzzerState.buzzOrder,
diff --git a/src/server.ts b/src/server.ts
index 4fa2c1e..cb1941c 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -2,14 +2,19 @@ import { readFileSync } from "fs";
 import { handleMessage, handleClose } from "./ws-handler";
 
 const HTML = readFileSync("./src/public/index.html", "utf-8");
+const CSS  = readFileSync("./src/public/styles.css",  "utf-8");
+const JS   = readFileSync("./src/public/script.js",   "utf-8");
 
 const server = Bun.serve({
   port: 3000,
   fetch(req, server) {
-    if (new URL(req.url).pathname === "/ws") {
+    const url = new URL(req.url);
+    if (url.pathname === "/ws") {
       if (!server.upgrade(req)) return new Response("WS upgrade failed", { status: 400 });
       return undefined as any;
     }
+    if (url.pathname === "/styles.css") return new Response(CSS,  { headers: { "Content-Type": "text/css" } });
+    if (url.pathname === "/script.js")  return new Response(JS,   { headers: { "Content-Type": "text/javascript" } });
     return new Response(HTML, { headers: { "Content-Type": "text/html; charset=utf-8" } });
   },
   websocket: {
diff --git a/src/ws-handler.ts b/src/ws-handler.ts
index abe04f4..1c582d2 100644
--- a/src/ws-handler.ts
+++ b/src/ws-handler.ts
@@ -2,7 +2,7 @@ import type { ServerWebSocket } from "bun";
 import {
   rooms, wsToPlayer,
   Room, Player,
-  genId, sanitize, freshBuzzer, publicRoom, broadcast, toMod,
+  genId, greekName, sanitize, freshBuzzer, publicRoom, broadcast, toMod,
 } from "./rooms";
 
 type WS = ServerWebSocket<unknown>;
@@ -18,11 +18,10 @@ export function handleMessage(ws: WS, raw: string) {
   /* ── CREATE ROOM ── */
   if (type === "create_room") {
     const s = msg.settings ?? {};
-    const numTeams = Math.min(8, Math.max(2, (s.numTeams ?? 2) | 0));
-    const defaultNames = ["ALPHA","BETA","GAMMA","DELTA","EPSILON","ZETA","ETA","THETA"];
+    const numTeams = Math.max(2, Math.min(64, (s.numTeams ?? 2) | 0));
     const teamNames: string[] = [];
     for (let i = 0; i < numTeams; i++)
-      teamNames.push(sanitize(s.teamNames?.[i] ?? defaultNames[i], 32));
+      teamNames.push(s.teamNames?.[i] ? sanitize(s.teamNames[i], 32) : greekName(i));
 
     const room: Room = {
       id: genId(6),
@@ -35,7 +34,7 @@ export function handleMessage(ws: WS, raw: string) {
         playerPickTeam: s.playerPickTeam === true,
         showBuzzOrder:  s.showBuzzOrder  !== false,
         buzzerLockout:  s.buzzerLockout  !== false,
-        timerSeconds:   Math.min(300, Math.max(0, (s.timerSeconds ?? 0) | 0)),
+        timerSeconds:   Math.min(600, Math.max(0, (s.timerSeconds ?? 0) | 0)),
       },
       players:     new Map(),
       buzzerState: freshBuzzer(),
@@ -84,7 +83,7 @@ export function handleMessage(ws: WS, raw: string) {
     return;
   }
 
-  /* ── PICK TEAM (player) ── */
+  /* ── PICK TEAM ── */
   if (type === "pick_team") {
     const ctx = wsToPlayer.get(ws);
     if (!ctx) return;
@@ -109,15 +108,9 @@ export function handleMessage(ws: WS, raw: string) {
     if (!room) return;
     const bz = room.buzzerState;
 
-    if (!bz.roundOpen) {
-      tx(ws, { type: "buzz_rejected", reason: "Round not open" }); return;
-    }
-    if (bz.buzzOrder.includes(ctx.playerId)) {
-      tx(ws, { type: "buzz_rejected", reason: "Already buzzed" }); return;
-    }
-    if (room.settings.buzzerLockout && bz.buzzOrder.length > 0) {
-      tx(ws, { type: "buzz_rejected", reason: "Locked out" }); return;
-    }
+    if (!bz.roundOpen)                                           { tx(ws, { type: "buzz_rejected", reason: "Round not open" }); return; }
+    if (bz.buzzOrder.includes(ctx.playerId))                     { tx(ws, { type: "buzz_rejected", reason: "Already buzzed"  }); return; }
+    if (room.settings.buzzerLockout && bz.buzzOrder.length > 0) { tx(ws, { type: "buzz_rejected", reason: "Locked out"       }); return; }
 
     bz.buzzOrder.push(ctx.playerId);
     bz.buzzTimes.set(ctx.playerId, Date.now());
@@ -125,23 +118,8 @@ export function handleMessage(ws: WS, raw: string) {
     const p = room.players.get(ctx.playerId)!;
     const pubOrder = room.settings.showBuzzOrder ? bz.buzzOrder : [bz.buzzOrder[0]];
 
-    broadcast(room, {
-      type: "buzz_event",
-      playerId:   ctx.playerId,
-      playerName: p.name,
-      teamIndex:  p.teamIndex,
-      buzzOrder:  pubOrder,
-      room:       publicRoom(room),
-    });
-    toMod(room, {
-      type:       "buzz_event",
-      playerId:   ctx.playerId,
-      playerName: p.name,
-      teamIndex:  p.teamIndex,
-      buzzOrder:  bz.buzzOrder,
-      buzzTimes:  Object.fromEntries(bz.buzzTimes),
-      room:       publicRoom(room),
-    });
+    broadcast(room, { type: "buzz_event", playerId: ctx.playerId, playerName: p.name, teamIndex: p.teamIndex, buzzOrder: pubOrder, room: publicRoom(room) });
+    toMod(room,     { type: "buzz_event", playerId: ctx.playerId, playerName: p.name, teamIndex: p.teamIndex, buzzOrder: bz.buzzOrder, buzzTimes: Object.fromEntries(bz.buzzTimes), room: publicRoom(room) });
     return;
   }
 
@@ -155,71 +133,53 @@ export function handleMessage(ws: WS, raw: string) {
       room.buzzerState.roundOpen = true;
       broadcast(room, { type: "round_open", room: publicRoom(room) });
       break;
-
     case "close_round":
       room.buzzerState.roundOpen = false;
       broadcast(room, { type: "round_closed", room: publicRoom(room) });
       break;
-
     case "reset_buzzer":
       room.buzzerState = freshBuzzer();
       broadcast(room, { type: "buzzer_reset", room: publicRoom(room) });
       break;
-
     case "update_settings": {
       const s = msg.settings ?? {};
       const st = room.settings;
       if (s.mode === "individual" || s.mode === "teams") st.mode = s.mode;
-      if (typeof s.numTeams       === "number")  st.numTeams       = Math.min(8, Math.max(2, s.numTeams | 0));
-      if (Array.isArray(s.teamNames))            st.teamNames      = s.teamNames.slice(0, 8).map((n: unknown) => sanitize(n, 32));
+      if (typeof s.numTeams       === "number") {
+        const newN = Math.max(2, Math.min(64, s.numTeams | 0));
+        // grow team names with greek names if needed
+        while (st.teamNames.length < newN) st.teamNames.push(greekName(st.teamNames.length));
+        st.numTeams = newN;
+      }
+      if (Array.isArray(s.teamNames))            st.teamNames      = s.teamNames.slice(0, st.numTeams).map((n: unknown) => sanitize(n, 32));
       if (typeof s.playerPickTeam === "boolean") st.playerPickTeam = s.playerPickTeam;
       if (typeof s.showBuzzOrder  === "boolean") st.showBuzzOrder  = s.showBuzzOrder;
       if (typeof s.buzzerLockout  === "boolean") st.buzzerLockout  = s.buzzerLockout;
-      if (typeof s.timerSeconds   === "number")  st.timerSeconds   = Math.min(300, Math.max(0, s.timerSeconds | 0));
+      if (typeof s.timerSeconds   === "number")  st.timerSeconds   = Math.min(600, Math.max(0, s.timerSeconds | 0));
       broadcast(room, { type: "room_update", room: publicRoom(room) });
       tx(ws, { type: "settings_updated", room: publicRoom(room) });
       break;
     }
-
     case "assign_team": {
       const p = room.players.get(sanitize(msg.playerId, 12));
       if (p) {
-        p.teamIndex = typeof msg.teamIndex === "number"
-          ? Math.max(0, Math.min(7, msg.teamIndex | 0))
-          : null;
+        p.teamIndex = typeof msg.teamIndex === "number" ? Math.max(0, Math.min(room.settings.numTeams - 1, msg.teamIndex | 0)) : null;
         broadcast(room, { type: "room_update", room: publicRoom(room) });
       }
       break;
     }
-
     case "kick_player": {
       const p = room.players.get(sanitize(msg.playerId, 12));
       if (p) {
-        if (p.ws) {
-          try { p.ws.send(JSON.stringify({ type: "kicked" })); } catch {}
-          wsToPlayer.delete(p.ws);
-        }
+        if (p.ws) { try { p.ws.send(JSON.stringify({ type: "kicked" })); } catch {} wsToPlayer.delete(p.ws); }
         room.players.delete(p.id);
         broadcast(room, { type: "room_update", room: publicRoom(room) });
       }
       break;
     }
-
-    case "lock_room":
-      room.locked = msg.locked === true;
-      broadcast(room, { type: "room_update", room: publicRoom(room) });
-      break;
-
-    case "lock_teams":
-      room.teamLocked = msg.locked === true;
-      broadcast(room, { type: "room_update", room: publicRoom(room) });
-      break;
-
-    case "reset_teams":
-      for (const p of room.players.values()) p.teamIndex = null;
-      broadcast(room, { type: "room_update", room: publicRoom(room) });
-      break;
-
+    case "lock_room":   room.locked     = msg.locked === true; broadcast(room, { type: "room_update", room: publicRoom(room) }); break;
+    case "lock_teams":  room.teamLocked = msg.locked === true; broadcast(room, { type: "room_update", room: publicRoom(room) }); break;
+    case "reset_teams": for (const p of room.players.values()) p.teamIndex = null; broadcast(room, { type: "room_update", room: publicRoom(room) }); break;
     case "end_room":
       broadcast(room, { type: "room_ended" });
       for (const p of room.players.values()) if (p.ws) wsToPlayer.delete(p.ws);
@@ -230,7 +190,6 @@ export function handleMessage(ws: WS, raw: string) {
 }
 
 export function handleClose(ws: WS) {
-  // mod disconnect
   for (const room of rooms.values()) {
     if (room.modWs === ws) {
       room.modWs = null;
@@ -238,7 +197,6 @@ export function handleClose(ws: WS) {
       return;
     }
   }
-  // player disconnect
   const ctx = wsToPlayer.get(ws);
   if (ctx) {
     wsToPlayer.delete(ws);