*, *::before, *::after {
  box-sizing: border-box;
}

/* Cloudflare brand palette (cloudflare.com/brand/color).
   Tangerine is the lead colour and appears in every layout. Secondary colours
   are only used for small details, never as primary graphics. Per the brand
   guidelines, black is used for type but never as a background. */
:root {
  --cf-tangerine: #F6821F;
  --cf-ruby: #FF6633;
  --cf-mango: #FBAD41;
  --cf-blueberry: #3E74FF;
  --cf-ink: #000000;
  --cf-body: #3c3c43;
  --cf-muted: #6e6e77;
  --cf-hairline: #e3e3e8;
  --cf-surface: #ffffff;
  --cf-surface-alt: #faf9f7;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1a2e;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  touch-action: none;
}

:root {
  --sidebar-width: 96px;
}

@media (min-width: 768px) {
  :root {
    --sidebar-width: 180px;
  }
}

#game-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.with-sidebar #game-container {
  inset: 0 0 0 var(--sidebar-width);
}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.25rem 1.25rem;
  background: #14141f;
  border-right: 1px solid #2c2c3d;
  pointer-events: auto;
  user-select: none;
}

#sidebar.hidden {
  display: none;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: #f5f5f7;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #F6821F, #FBAD41);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

.sidebar-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa0ac;
}

#joystick {
  position: relative;
  width: clamp(72px, 80%, 140px);
  aspect-ratio: 1 / 1;
  touch-action: none;
}

.joystick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  will-change: transform;
}

#ui {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#ui > * {
  pointer-events: auto;
}

#lobby {
  background: var(--cf-surface);
  color: var(--cf-body);
  border-radius: 14px;
  overflow: hidden;
  /* Fluid rather than a fixed 620px: phones get the full width they have,
     desktop is capped. Widened further once the two-column layout kicks in. */
  width: min(94vw, 620px);
  max-height: 94vh;
  /* dvh accounts for mobile browser chrome; vh above is the fallback. */
  max-height: 94dvh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  /* body sets touch-action: none for the game; the lobby must still scroll */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Dawn gradient (Ruby -> Tangerine -> Mango) as the brand accent. */
.cf-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--cf-ruby), var(--cf-tangerine), var(--cf-mango));
}

/* ---------------------------------------------------------------------------
   Attract screen: characters wandering above the title.

   A band inside the card rather than a full-viewport backdrop behind it. The
   card is min(94vw, 620px) and covers nearly the whole screen on a phone, so a
   backdrop would be desktop-only decoration; a band reads identically at every
   width. Populated by lobby-sprites.js.
   --------------------------------------------------------------------------- */
#lobbyStage {
  position: relative;
  height: 88px;
  overflow: hidden;
  /* Dusk-to-floor gradient so the sprites stand on something. */
  background: linear-gradient(180deg, #20203a 0%, #2b2b48 60%, #35354f 100%);
  border-bottom: 1px solid var(--cf-hairline);
  /* Never intercept input: the card behind this is the interactive surface. */
  pointer-events: none;
  user-select: none;
}

@media (min-width: 660px) {
  #lobbyStage {
    height: 104px;
  }
}

/* Ground line the actors read as standing on. */
#lobbyStage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cf-ruby), var(--cf-tangerine), var(--cf-mango));
  opacity: 0.55;
}

.lobby-actor {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 48px;  /* 16px source * 3 */
  height: 72px; /* 24px source * 3 */
  /* Integer upscale + pixelated: keeps the source pixels square and crisp. */
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  will-change: transform;
}

.lobby-inner {
  /* Fluid padding: tight on a phone, roomy on desktop. */
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1.1rem, 3.2vw, 1.9rem)
    clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
  align-items: start;
}

/* Actions come first in the DOM so a single-column phone shows Create Room and
   the open-rooms list before the descriptive copy. */
.lobby-actions,
.lobby-about {
  min-width: 0;
}

.lobby-header {
  grid-column: 1 / -1;
}

.lobby-header {
  margin-bottom: 1.4rem;
}

/* Brand type styles: eyebrow is all caps / semibold / 5% tracking. */
.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--cf-tangerine);
}

/* Game title. Press Start 2P only ships weight 400, and the -3% tracking used
   elsewhere in the brand type scale collapses pixel glyphs into each other --
   so both are overridden here rather than inherited.

   The font is ~1em per glyph, so "Ludicrous Ludus" is ~15em wide. The clamp is
   sized so that resolves inside the card at every width: it wraps to two lines
   on a narrow phone, which reads fine for a title. Falls back to Inter if
   Google Fonts is unreachable (the service worker can't cache cross-origin
   opaque responses, so an offline first paint gets the fallback). */
#lobby h1 {
  margin: 0 0 0.6rem;
  font-family: "Press Start 2P", "Inter", system-ui, sans-serif;
  font-size: clamp(0.95rem, 3.6vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--cf-ink);
  /* Hard-edged offset shadow in the brand tangerine: the pixel-era drop shadow,
     which needs a sharp step rather than a blur. */
  text-shadow: 0.14em 0.14em 0 var(--cf-mango);
}

/* Sub headline: medium, -3% tracking, 110% leading. */
.lobby-sub {
  margin: 0;
  font-size: clamp(0.88rem, 1.1vw + 0.65rem, 1.02rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cf-body);
}

#lobby button {
  width: 100%;
  padding: 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border: none;
  border-radius: 8px;
  background: var(--cf-tangerine);
  color: #fff;
  cursor: pointer;
  margin-bottom: 0.6rem;
  transition: background 0.15s ease;
}

#lobby button:hover {
  background: #dd6f13;
}

#lobby button:disabled {
  background: #c9c9cf;
  cursor: not-allowed;
}

#lobby .btn-secondary {
  background: #fff;
  color: var(--cf-tangerine);
  box-shadow: inset 0 0 0 1.5px var(--cf-tangerine);
}

#lobby .btn-secondary:hover {
  background: #fff6ee;
}

/* Showcase / how-to panels and credits */
.panel {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cf-hairline);
}

/* Body copy: regular, -2% tracking, 120% leading. */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--cf-body);
}

.feature-list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.5rem;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cf-tangerine);
}

.feature-list.compact li {
  margin-bottom: 0.35rem;
}

.feature-list strong {
  font-weight: 600;
  color: var(--cf-ink);
}

.credits {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cf-hairline);
}

.credits ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--cf-muted);
}

.credits a {
  color: var(--cf-body);
  text-decoration: underline;
  text-decoration-color: var(--cf-hairline);
  text-underline-offset: 2px;
}

.credits a:hover {
  color: var(--cf-tangerine);
  text-decoration-color: var(--cf-tangerine);
}

#hud {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  background: rgba(26, 26, 46, 0.9);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 160px;
  pointer-events: none;
}

/* ?debug=1 performance overlay -- only ever created by debug.js when that
   query param is present, so this rule is dormant otherwise. Right side,
   more transparent than #hud since it's a diagnostic readout, not something
   meant to compete with the HUD for attention. pointer-events: none since
   it's read-only and must never block clicks on whatever's underneath. */
#debugPanel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  background: rgba(10, 10, 20, 0.7);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  min-width: 190px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  pointer-events: none;
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: #ddd;
}

.debug-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1rem 0;
  white-space: nowrap;
}

.debug-row span:first-child {
  color: #888;
}

.debug-divider {
  border-top: 1px solid #333;
  margin: 0.4rem 0;
}

.debug-header {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  margin-bottom: 0.2rem;
}

body.with-sidebar #hud {
  left: calc(var(--sidebar-width) + 1rem);
}

#hudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hud-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}

#hudToggle {
  pointer-events: auto;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #333;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

#hudToggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

#hudBody {
  margin-top: 0.6rem;
}

#hud.collapsed {
  min-width: 0;
}

#hud.collapsed #hudBody {
  display: none;
}

.hud-section {
  margin-bottom: 0.75rem;
}

.hud-section:last-child {
  margin-bottom: 0;
}

.hud-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 0.25rem;
}

.hud-value {
  font-size: 1rem;
  font-weight: 600;
}

#hudPlayerList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

#hudPlayerList li {
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#hudPlayerList .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

#hudPlayerList .you {
  color: #a5b4fc;
}

#hudPlayerList .score {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #c9c9ce;
  font-size: 0.8rem;
}

#status {
  margin-top: 0.9rem;
  min-height: 1.25rem;
  color: var(--cf-muted);
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}

.hidden {
  display: none !important;
}

/* Lobby: open rooms list */
#roomList {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cf-hairline);
  text-align: left;
}

.roomList-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.link-btn {
  background: none !important;
  border: none;
  color: var(--cf-tangerine) !important;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
  margin: 0 !important;
  width: auto !important;
  box-shadow: none !important;
}

.link-btn:hover {
  text-decoration: underline;
}

#roomListItems {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: clamp(120px, 26vh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#roomListItems li {
  display: flex;
  align-items: center;
  /* Never wrap: both actions stay on the room's own line. */
  flex-wrap: nowrap;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  border: 1px solid var(--cf-hairline);
  border-radius: 8px;
  margin-bottom: 0.3rem;
  background: var(--cf-surface-alt);
}

#roomListItems .room-id {
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--cf-ink);
  font-size: 0.85rem;
  /* Truncate rather than push the buttons off the row. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#roomListItems .room-count {
  margin-left: auto;
  color: var(--cf-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* `#lobby button` sets width:100% for the big Create Room button. These list
   actions must opt out of that, or Join fills the row and wraps to its own
   line. Specificity here (id + class) already beats `#lobby button`, so no
   !important is needed for the layout properties. */
#roomListItems .room-join,
#roomListItems .room-spectate {
  flex: none;
  width: auto;
  margin: 0;
  min-height: 0;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1.2;
}

#roomListItems .room-join {
  padding: 0.32rem 0.7rem;
}

.empty-note {
  color: var(--cf-muted);
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}

/* HUD infobar: capacity + QR */
.hud-capacity {
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.hud-qr {
  margin-top: 0.5rem;
  background: #fff;
  padding: 4px;
  border-radius: 6px;
  width: fit-content;
}

.hud-qr img {
  display: block;
}

.hud-full {
  margin-top: 0.5rem;
  color: #ff7b72;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Leave room button */
.leave-room {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  border: 1px solid #ff7b72;
  border-radius: 8px;
  background: rgba(255, 123, 114, 0.15);
  color: #ff7b72;
  cursor: pointer;
  pointer-events: auto;
}

.leave-room:hover {
  background: rgba(255, 123, 114, 0.3);
}

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.modal-content {
  position: relative;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 1.75rem;
  width: 360px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.modal-content h2 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
}

.modal-content p {
  margin: 0 0 1.25rem;
  color: #c9c9ce;
}

.class-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.class-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  background: #252540;
  color: #fff;
  cursor: pointer;
  margin: 0;
}

.class-btn:hover:not(:disabled) {
  background: #303055;
  border-color: #666;
}

.class-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.class-slots {
  font-size: 0.8rem;
  color: #aaa;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
}

.modal-actions button {
  flex: 1;
  margin: 0;
}

button.danger {
  background: #dc2626;
}

button.danger:hover {
  background: #b91c1c;
}

button.secondary {
  background: #333;
}

button.secondary:hover {
  background: #444;
}

.modal-status {
  margin-top: 0.75rem;
  min-height: 1.25rem;
  color: #ff7b72;
  font-size: 0.875rem;
}

/* Two columns as soon as there's width for them. This is the main fix for
   landscape phones: actions and description are visible together instead of
   ~900px of content stacked into ~360px of height. Also catches tablets and
   desktop, where the card simply gets wider. */
@media (min-width: 660px) {
  #lobby {
    width: min(94vw, 960px);
  }

  .lobby-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(1.4rem, 3vw, 2.2rem);
  }

  /* Each column starts its own content, so the leading separator that reads as
     a divider in one column would read as a stray rule at the top of two. */
  .lobby-actions > #roomList,
  .lobby-about > .panel:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* Short viewports -- overwhelmingly landscape phones. Tighten everything
   vertically so the card needs as little scrolling as possible. */
@media (max-height: 560px) {
  .lobby-header {
    margin-bottom: 0.5rem;
  }

  #lobby h1 {
    font-size: clamp(1.15rem, 2.6vw + 0.5rem, 1.4rem);
  }

  .lobby-sub {
    font-size: 0.85rem;
  }

  .feature-list {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .feature-list li {
    margin-bottom: 0.3rem;
  }

  .panel {
    margin-top: 1rem;
    padding-top: 0.85rem;
  }

  .credits {
    margin-top: 1rem;
    padding-top: 0.8rem;
  }

  #roomListItems {
    max-height: clamp(96px, 22vh, 160px);
  }
}

@media (max-width: 480px) {
  /* Comfortable tap targets on a phone. */
  #lobby button {
    min-height: 44px;
  }

  #roomListItems .room-join,
  #roomListItems .room-spectate {
    min-height: 30px;
  }

  .leave-room,
  .share-room {
    top: 0.5rem;
    padding: 0.4rem 0.7rem;
  }

  .share-room {
    right: 5.4rem;
  }

  .leave-room {
    right: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Audio controls
   The same markup is rendered twice: on the light lobby card and in the dark
   in-game HUD. Shared layout here, per-context colours below.
   --------------------------------------------------------------------------- */
.audio-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audio-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.audio-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.audio-toggle input {
  margin: 0;
  cursor: pointer;
}

.audio-row input[type="range"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

/* Lobby (light surface) */
#lobby .audio-controls {
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  color: var(--cf-body);
}

#lobby .audio-toggle {
  min-width: 8.5rem;
}

#lobby .audio-row input[type="range"],
#lobby .audio-toggle input {
  accent-color: var(--cf-tangerine);
}

/* HUD (dark surface, overlaying the game). #hud sets pointer-events: none so
   the game stays clickable through it, so re-enable it just for these. */
#hud .audio-controls {
  pointer-events: auto;
  font-size: 0.75rem;
  color: #c9c9ce;
  gap: 0.3rem;
}

#hud .audio-toggle {
  min-width: 4.5rem;
}

#hud .audio-row input[type="range"] {
  height: 3px;
  max-width: 84px;
}

#hud .audio-row input[type="range"],
#hud .audio-toggle input {
  accent-color: #F6821F;
}

/* ---------------------------------------------------------------------------
   Spectator mode
   --------------------------------------------------------------------------- */
.spectator-bar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid #333;
  border-radius: 999px;
  background: rgba(26, 26, 46, 0.92);
  color: #f5f5f7;
  font-size: 0.85rem;
  white-space: nowrap;
}

.spectator-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #F6821F;
}

.spectator-bar button {
  width: 26px;
  height: 26px;
  padding: 0;
  flex: none;
  border: 1px solid #3a3a4d;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.spectator-bar button:hover:not(:disabled) {
  background: rgba(246, 130, 31, 0.25);
  border-color: #F6821F;
}

.spectator-bar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.spectator-name {
  min-width: 7rem;
  text-align: center;
  font-weight: 600;
}

.spectator-index {
  font-variant-numeric: tabular-nums;
  color: #9aa0ac;
  font-size: 0.75rem;
}

.spectator-waiting {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.spectator-waiting-inner {
  padding: 1.5rem 2rem;
  border: 1px solid #333;
  border-radius: 12px;
  background: rgba(26, 26, 46, 0.9);
  color: #f5f5f7;
  text-align: center;
}

.spectator-waiting-inner p {
  margin: 0.4rem 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.spectator-waiting-inner span {
  font-size: 0.85rem;
  color: #9aa0ac;
}

/* Lobby: spectate button sits next to Join */
/* Secondary action: plain text rather than a second outlined button, which is
   what made each row feel heavy with two competing pills. */
#roomListItems .room-spectate {
  padding: 0.32rem 0.3rem;
  background: transparent;
  color: var(--cf-tangerine);
  box-shadow: none;
}

#roomListItems .room-spectate:hover {
  background: transparent;
  color: #dd6f13;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Lobby audio block: sits directly under "Create Room" so volume is visible
   without scrolling. Wider labels than the HUD copy since there's room here.
   --------------------------------------------------------------------------- */
#lobby .lobby-audio {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cf-hairline);
}

/* ---------------------------------------------------------------------------
   Share button (touch only). Sits left of Leave, which is top-right.
   --------------------------------------------------------------------------- */
.share-room {
  position: fixed;
  top: 1rem;
  right: 6.2rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  border: 1px solid #F6821F;
  border-radius: 8px;
  background: rgba(246, 130, 31, 0.15);
  color: #F6821F;
  cursor: pointer;
  pointer-events: auto;
}

.share-room:hover {
  background: rgba(246, 130, 31, 0.3);
}

.share-room svg {
  display: block;
  flex: none;
}

/* ---------------------------------------------------------------------------
 * Pre-round lobby / countdown
 *
 * The single hard rule here: this overlay must NEVER hide the game world. It is
 * a fully transparent, non-interactive layer with a large centred number. The
 * container is pointer-events:none so clicks pass straight through to the
 * canvas; only the Start button opts back in. No background dimming, ever.
 * ------------------------------------------------------------------------- */
.countdown {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  background: transparent;
  text-align: center;
  /* Do not intercept the sidebar area on desktop. */
}

.countdown.hidden {
  display: none;
}

.countdown-label {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(12px, 2.2vw, 18px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.04em;
}

.countdown-number {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(72px, 18vw, 200px);
  line-height: 1;
  color: var(--cf-tangerine, #f6821f);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.95);
}

/* The lobby shows a "x/max" join count here instead of a single countdown
 * digit -- several characters wide, so it gets a much smaller size than the
 * single-digit `prepare` countdown to avoid spilling off screen. */
.countdown-number.countdown-number--compact {
  font-size: clamp(28px, 6vw, 56px);
}

.countdown-sub {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(10px, 1.8vw, 15px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}

.countdown-start {
  margin-top: 14px;
  pointer-events: auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  background: var(--cf-tangerine, #f6821f);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.countdown-start:hover {
  background: var(--cf-ruby, #bd2035);
}

.countdown-start.hidden {
  display: none;
}