:root {
  --cabinet: #17121f;      /* deep ink-violet cabinet */
  --panel:   #211a2e;      /* raised panel */
  --panel-2: #2b2340;
  --line:    #3a3050;
  --ink:     #efe9f7;      /* warm off-white text */
  --muted:   #9a8fb5;
  --marquee: #ffb703;      /* amber cabinet-marquee accent */
  --marquee-dim: #7a5a12;
  --danger:  #ff5470;
  --arena-bg: #0e0a16;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
html { touch-action: pan-y; }
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #241a33 0%, var(--cabinet) 55%) fixed;
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100%;
}
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }

/* --- marquee header --- */
header { text-align: center; margin: 4px 0 20px; }
.marquee {
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", monospace;
  font-weight: 700; letter-spacing: 0.14em; font-size: clamp(26px, 5vw, 44px);
  color: var(--marquee);
  text-shadow: 0 0 18px rgba(255,183,3,0.35), 0 2px 0 #6b4d07;
}
.marquee .dot { color: var(--ink); }

/* --- layout --- */
.stage { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 820px) { .stage { flex-direction: column; align-items: stretch; } }

.arena-box { position: relative; flex: 1 1 auto; min-width: 0; }
.arena-frame {
  position: relative; border: 1px solid var(--line); border-radius: 12px;
  background: var(--arena-bg); overflow: hidden;
  box-shadow: 0 0 0 1px #000 inset, 0 18px 60px -30px #000;
}
canvas { display: block; width: 100%; height: auto; }
/* faint CRT scanlines over the arena */
.arena-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}

/* --- overlay --- */
.overlay {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: rgba(14,10,22,0.72); backdrop-filter: blur(2px); border-radius: 12px; padding: 24px;
}
.overlay.show { display: flex; }
.overlay h2 { margin: 0; font-size: 20px; letter-spacing: 0.02em; }
.countdown { font-family: ui-monospace, monospace; font-size: clamp(60px, 14vw, 120px); font-weight: 700; color: var(--marquee); text-shadow: 0 0 30px rgba(255,183,3,0.4); }
.subtle { color: var(--muted); font-size: 14px; }

/* ov-body is the sole flex child of .overlay, so .overlay's own gap never
   applies between the content inside it — give it real layout of its own. */
#ov-body { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 340px; }

/* --- pre-room: create vs. join --- */
.room-option { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.room-option .subtle { max-width: 220px; }
.or-divider { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.or-divider::before, .or-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 8px; align-items: center; justify-content: center; }

input[type=text] {
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 10px 12px; font-size: 15px; width: 220px; max-width: 70vw;
}
input[type=text]:focus { outline: 2px solid var(--marquee); outline-offset: 1px; }
button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
  padding: 10px 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
button:hover { border-color: var(--marquee-dim); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--marquee); outline-offset: 2px; }
button.primary { background: var(--marquee); color: #241a02; border-color: transparent; }
button.primary:hover { filter: brightness(1.05); }
button.ready-on { background: #1c3b2a; border-color: #2e6c4b; color: #b9f5cf; }

/* Ready-up CTA: shown over the arena itself, bigger and bolder than a normal
   button, and (when not yet ready) pulses to pull the eye. */
button.ready-btn {
  padding: 18px 40px; margin-top: 4px;
  font-size: 17px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 10px;
}
button.ready-btn.primary { animation: ready-pulse 1.8s ease-in-out infinite; }
button.ready-btn.ready-on { animation: none; }
@keyframes ready-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,183,3,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,183,3,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,183,3,0); }
}
@media (prefers-reduced-motion: reduce) {
  button.ready-btn { animation: none; }
}

/* --- sidebar --- */
.side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px) { .side { flex-basis: auto; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.roster li { display: flex; align-items: center; gap: 10px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.pname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname.dead { color: var(--muted); text-decoration: line-through; }
.score { font-family: ui-monospace, monospace; font-weight: 700; }
.tickmark { color: #6ee7a8; font-size: 12px; }
.empty { color: var(--muted); font-size: 13px; }
.keys { display: flex; gap: 8px; margin-top: 6px; }
.key { border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 4px 9px; font-family: ui-monospace, monospace; font-size: 13px; background: var(--panel-2); }
.hint { color: var(--muted); font-size: 13px; }
footer { margin-top: 22px; text-align: center; color: var(--muted); font-size: 12px; }
.conn { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 6px; vertical-align: middle; }
.conn.up { background: #46d38a; }
.room-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 26px; letter-spacing: 0.2em; color: var(--marquee); text-shadow: 0 0 14px rgba(255,183,3,0.3); }
.link-btn { background: none; border: none; border-radius: 0; padding: 0; color: var(--marquee); font: 13px/1 inherit; font-weight: 400; text-decoration: underline; cursor: pointer; transition: none; }
.link-btn:hover { filter: brightness(1.2); }
.code-input { width: 88px; text-align: center; font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 0.18em; }

/* --- touch controls --- */
/* Sits below the arena in normal flow, not overlaid on top of the play area. */
.touch-controls {
  display: none; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 14px; padding-bottom: env(safe-area-inset-bottom);
}
.touch-controls.show { display: flex; }
.touch-btn {
  width: 25vw; height: 25vw; max-width: 84px; max-height: 84px; min-width: 56px; min-height: 56px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.touch-btn.active { background: rgba(255,183,3,0.35); border-color: var(--marquee); }