*, *::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;
}

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

#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));
}

.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);
}

/* Headline: sentence case, semibold, -3% tracking, 100% leading. */
#lobby h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.3rem, 3.4vw + 0.5rem, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cf-ink);
}

/* 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;
}

#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 .kd {
  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;
}