/* ============================================================
   agnostos.net — Y2K × killer7
   flat arterial color, chrome bevels, diagonal cuts, grain.
   ============================================================ */

:root {
  --void:    #08080b;
  --void-2:  #101016;
  --ink:     #000000;
  --bone:    #e8e4d8;
  --bone-2:  #d6d1c2;
  --blood:   #d0021b;
  --blood-d: #7a0110;
  --acid:    #e8ff00;
  --cyan:    #00e5ff;
  --steel:   #6b7280;
  --cut:     14px;

  --chrome: linear-gradient(180deg, #fdfdfd 0%, #d8d8de 45%, #a8a8b2 52%, #e6e6ec 100%);
  --chrome-hot: linear-gradient(180deg, #ff5f74 0%, #d0021b 48%, #7a0110 54%, #e8324a 100%);

  --font-display: 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --font-body: Verdana, Tahoma, Geneva, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  padding: 10px;
  background:
    radial-gradient(circle at 50% -10%, #17171f 0%, var(--void) 60%),
    var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  padding: 10px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ---------- full-screen grain + scanlines ---------- */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9998;
}
body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.055;
  animation: grain 0.7s steps(4) infinite;
}
body::after {
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.26) 0px,
    rgba(0, 0, 0, 0.26) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.5;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}

.hidden { display: none !important; }
.muted { color: var(--steel); font-style: italic; }
::selection { background: var(--acid); color: var(--ink); }

/* diagonal-cut surface — the killer7 menu card */
.panel, .channel, .intro-box, .modal-box, .ad-slot,
.trivia-result, .bluff-claim, .lobby-rail, .endgame {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

/* ============================================================
   INTRO GATE
   ============================================================ */
.intro {
  position: fixed; inset: 0;
  background: rgba(8, 8, 11, 0.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  padding: 16px;
}
.intro-box {
  background: var(--bone);
  color: var(--ink);
  border: 0;
  padding: 34px 32px 28px;
  max-width: 460px;
  text-align: center;
  box-shadow: 10px 10px 0 var(--blood);
}
.intro-box h2 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.intro-box p { font-size: 12px; line-height: 1.7; margin: 0 0 20px; }
.intro-name { margin-bottom: 20px; }
.intro-name label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blood);
  margin-bottom: 6px;
}
.intro-name input {
  width: 220px;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
  outline: none;
}
.intro-name input:focus { border-color: var(--blood); background: #fffbe8; }

.start {
  background: var(--chrome-hot);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 12px 42px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 5px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.start:hover { background: var(--chrome); color: var(--ink); text-shadow: none; }
.start:active { transform: translateY(1px); }
.intro-box .small {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--steel);
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--blood);
  padding-bottom: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.logo {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 0.9;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: var(--bone);
  text-shadow:
    -2px 0 0 rgba(208, 2, 27, 0.85),
     2px 0 0 rgba(0, 229, 255, 0.7);
}
.logo .dot { color: var(--blood); }
.logo .tv {
  font-size: 15px;
  letter-spacing: 6px;
  vertical-align: super;
  color: var(--acid);
  text-shadow: none;
}
.tagline {
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  color: var(--bone-2);
  max-width: 340px;
}
.tagline strong { color: var(--acid); }
.mode {
  display: inline-block;
  margin-top: 5px;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 9px;
}
.mode.bot { background: var(--steel); color: var(--void); }

.tagline-cycle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  height: 1.5em;
  overflow: hidden;
  position: relative;
  margin-top: 3px;
}
.tagline-cycle .line {
  position: absolute; right: 0;
  white-space: nowrap;
  animation: cycle-in 0.35s steps(4);
}
@keyframes cycle-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   AD SLOTS
   ============================================================ */
.ad-slot {
  background: var(--void-2);
  border: 1px solid #23232c;
  margin-bottom: 10px;
  position: relative;
}
.ad-slot .ad-label {
  position: absolute; top: 0; left: 0;
  background: var(--blood);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 2px 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 2;
}
.ad-slot .ad-content {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #131319 0 8px, #0d0d12 8px 16px);
  color: #3f3f4b;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}
.ad-slot .ad-placeholder { padding: 10px; line-height: 1.8; }
.ad-leaderboard { width: 100%; max-width: 728px; margin-left: auto; margin-right: auto; }
.ad-leaderboard .ad-content { height: 90px; }
.ad-rectangle { width: 100%; max-width: 300px; }
.ad-rectangle .ad-content { height: 250px; }

/* ============================================================
   PICKER
   ============================================================ */
.picker h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 12px;
  border-left: 5px solid var(--blood);
  padding-left: 10px;
}
.picker-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--steel);
  text-transform: lowercase;
}
.picker-hint kbd, kbd {
  background: var(--chrome);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  margin: 0 1px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 10px;
}
.channel {
  background: var(--bone);
  color: var(--ink);
  padding: 13px 15px 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.08s steps(2), color 0.08s steps(2);
}
.channel::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.05) 2px 3px);
  pointer-events: none;
  opacity: 0;
}
.channel:hover { background: var(--blood); color: #fff; }
.channel:hover::after { opacity: 1; }
.channel:hover .ch-num { background: var(--acid); color: var(--ink); }
.channel:hover .ch-type,
.channel:hover .ch-tagline,
.channel:hover .ch-meta { color: rgba(255,255,255,0.85); }

.ch-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ch-num {
  background: var(--ink);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 2px 8px;
}
.ch-type {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--steel);
}
.ch-name {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.ch-tagline { font-size: 11px; font-style: italic; color: #4a4a52; margin-bottom: 7px; }
.ch-meta {
  font-size: 10px;
  line-height: 1.5;
  color: #55555d;
  border-top: 1px solid rgba(0,0,0,0.18);
  padding-top: 6px;
  margin-top: 7px;
}

.ch-status { display: flex; gap: 5px; flex-wrap: wrap; }
.ch-status .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.ch-status .badge.waiting { background: var(--acid); }
.ch-status .badge.in-play { background: var(--blood); color: #fff; border-color: var(--blood); }
.ch-status .badge.empty { color: var(--steel); border-color: var(--steel); }
.channel:hover .ch-status .badge { border-color: #fff; color: #fff; }
.channel:hover .ch-status .badge.waiting { background: var(--acid); color: var(--ink); border-color: var(--ink); }
.channel:hover .ch-status .badge.in-play { background: #fff; color: var(--blood); }

/* ============================================================
   GAME VIEW SHELL
   ============================================================ */
.chat-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--blood);
  color: #fff;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.chat-topbar button {
  margin-left: auto;
  background: var(--chrome);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.chat-topbar button:hover { background: var(--acid); }

.main { display: flex; gap: 10px; flex: 1; min-height: 0; margin-top: 10px; }
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--void-2);
  border: 1px solid #23232c;
}
.side { width: 240px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

.panel { background: var(--bone); color: var(--ink); }
.panel h3 {
  background: var(--ink);
  color: var(--acid);
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.panel .body { padding: 9px 11px; font-size: 11px; }
.stats-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 0;
}
.stats-row .v { font-weight: bold; color: var(--blood); }

.score-row {
  position: relative;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.score-row .bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--blood);
  transition: width 0.25s steps(6);
}
.score-row.win .bar { background: var(--acid); }
.score-row .leader-mark {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--acid);
  border: 1px solid var(--ink);
  margin-right: 5px;
}

/* ---------- status bar ---------- */
.status-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink);
  color: var(--bone);
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid #23232c;
}
.status-bar.searching { color: var(--acid); }
.status-bar.connected { color: var(--cyan); }
.dot-blink {
  display: inline-block;
  width: 7px; height: 7px;
  background: currentColor;
  margin-right: 6px;
  animation: blink 0.9s steps(2) infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

/* ---------- message log ---------- */
.log { flex: 1; overflow-y: auto; padding: 11px 13px; font-size: 12.5px; min-height: 0; }
.log::-webkit-scrollbar, .gc-log::-webkit-scrollbar,
.lobby-log::-webkit-scrollbar, .asc-chain::-webkit-scrollbar,
.bluff-feed::-webkit-scrollbar { width: 10px; }
.log::-webkit-scrollbar-track, .gc-log::-webkit-scrollbar-track,
.lobby-log::-webkit-scrollbar-track { background: var(--void); }
.log::-webkit-scrollbar-thumb, .gc-log::-webkit-scrollbar-thumb,
.lobby-log::-webkit-scrollbar-thumb { background: var(--blood); }

.msg { margin-bottom: 5px; word-wrap: break-word; }
.msg .who {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.msg.self .who   { color: var(--cyan); }
.msg.peer1 .who  { color: var(--blood); }
.msg.peer2 .who  { color: var(--acid); }
.msg.system {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 3px 0;
}

/* ---------- composer ---------- */
.composer, .lobby-composer { display: flex; border-top: 1px solid #23232c; }
.composer textarea, .lobby-composer textarea {
  flex: 1;
  background: var(--void);
  color: var(--bone);
  border: 0;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  resize: none;
  outline: none;
  min-height: 38px;
}
.composer textarea:disabled, .lobby-composer textarea:disabled { color: #3a3a44; }
.send {
  background: var(--chrome-hot);
  color: #fff;
  border: 0;
  border-left: 1px solid var(--ink);
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.send:hover:not(:disabled) { background: var(--chrome); color: var(--ink); }
.send:disabled { background: #1c1c24; color: #3a3a44; cursor: not-allowed; }

/* ============================================================
   VOICE MESH
   ============================================================ */
.voice-mesh {
  display: flex; align-items: center; gap: 11px;
  background: var(--ink);
  border-bottom: 1px solid var(--blood);
  padding: 5px 11px;
  font-size: 11px;
}
.vm-join {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone);
  padding: 3px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.vm-join:hover { background: var(--blood); border-color: var(--blood); color: #fff; }
.vm-join[data-state="on"] { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.vm-ptt-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: #3f3f4b; }
.vm-ptt-hint.active { color: var(--acid); }
.vm-ptt-hint kbd { background: transparent; color: inherit; border-color: currentColor; }
.vm-peers { display: flex; gap: 14px; margin-left: auto; }
.vm-peer { display: flex; align-items: center; gap: 5px; }
.vm-dot { width: 8px; height: 8px; background: #23232c; border: 1px solid #3f3f4b; }
.vm-dot.speaking { background: var(--cyan); border-color: var(--cyan); }
.vm-dot.ptt-on { background: var(--acid); border-color: var(--acid); }
.vm-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--bone-2); }

/* ============================================================
   GAME CHAT
   ============================================================ */
.game-chat { border-top: 1px solid var(--blood); background: var(--void); display: flex; flex-direction: column; }
.gc-header {
  display: flex; align-items: center; gap: 8px;
  background: #14141a;
  color: var(--bone-2);
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  user-select: none;
}
.gc-header:hover { color: var(--acid); }
.gc-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  width: 20px; height: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.gc-unread {
  background: var(--blood);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  padding: 1px 6px;
}
.game-chat.collapsed .gc-body { display: none; }
.gc-log { height: 110px; overflow-y: auto; padding: 8px 11px; font-size: 12px; }
.gc-input-row { display: flex; border-top: 1px solid #23232c; }
.gc-input {
  flex: 1;
  background: var(--void);
  color: var(--bone);
  border: 0;
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  min-height: 44px;
}
.gc-send {
  border: 0;
  background: var(--blood);
  color: #fff;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.gc-send:hover { background: var(--acid); color: var(--ink); }

/* ============================================================
   THE LOBBY
   ============================================================ */
.lobby-body { flex: 1; display: grid; grid-template-columns: 1fr 210px; grid-template-rows: 1fr auto; min-height: 0; }
.lobby-log { overflow-y: auto; padding: 12px 14px; font-size: 12.5px; min-height: 0; }
.lobby-composer { grid-column: 1; }
.lobby-rail {
  grid-row: 1 / span 2;
  grid-column: 2;
  background: var(--bone);
  color: var(--ink);
  border-left: 2px solid var(--blood);
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}
.lobby-rail-head {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blood);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 5px;
}
.lobby-games { display: flex; flex-direction: column; gap: 5px; }
.lobby-game-btn {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 6px 9px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lobby-game-btn:hover:not(:disabled) { background: var(--ink); color: var(--acid); }
.lobby-game-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lobby-game-btn.proposed { background: var(--blood); color: #fff; border-color: var(--blood); }
.lg-name { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 2px; }
.lg-blurb { font-family: var(--font-mono); font-size: 9px; opacity: 0.7; }

.lobby-vote { border-top: 2px solid var(--ink); padding-top: 9px; margin-top: auto; }
.lv-head { font-size: 11px; line-height: 1.4; margin-bottom: 5px; }
.lv-count { font-family: var(--font-mono); font-size: 10px; color: var(--blood); letter-spacing: 1px; margin-bottom: 7px; }
.lv-buttons { display: flex; gap: 5px; }
.lv-buttons button {
  flex: 1;
  border: 1px solid var(--ink);
  padding: 6px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.lv-yes { background: var(--acid); color: var(--ink); }
.lv-yes:hover:not(:disabled) { background: var(--ink); color: var(--acid); }
.lv-yes:disabled { opacity: 0.5; cursor: default; }
.lv-no { background: transparent; color: var(--ink); }
.lv-no:hover { background: var(--blood); color: #fff; border-color: var(--blood); }

/* ============================================================
   ENDGAME — stay / next / out
   ============================================================ */
.endgame {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  align-items: center;
  background: var(--ink);
  border: 2px solid var(--blood);
  padding: 13px;
  margin: 14px auto 0;
  max-width: 460px;
}
.endgame button {
  border: 1px solid var(--bone);
  background: transparent;
  color: var(--bone);
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.endgame .eg-stay { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.endgame .eg-stay:hover:not(:disabled) { background: #fff; }
.endgame .eg-stay:disabled { background: transparent; color: var(--steel); border-color: var(--steel); cursor: default; }
.endgame .eg-next { background: var(--chrome-hot); color: #fff; border-color: var(--blood); }
.endgame .eg-next:hover { background: var(--chrome); color: var(--ink); }
.endgame .eg-out:hover { background: var(--bone); color: var(--ink); }
.eg-status {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--acid);
  min-height: 1.2em;
}

/* ============================================================
   TRIVIA
   ============================================================ */
.trivia-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--ink);
  min-height: 0;
}
.trivia-cat {
  background: var(--blood);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 7px 4px;
  line-height: 1.15;
}
.trivia-cell {
  background: #0d0d4a;
  color: var(--acid);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.06s steps(2);
}
.trivia-cell:hover { background: var(--acid); color: var(--ink); }
.trivia-cell.taken { background: #08082a; color: #1c1c4a; cursor: default; }
.trivia-cell.taken:hover { background: #08082a; color: #1c1c4a; }

.trivia-question {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #0d0d4a;
  padding: 26px;
  text-align: center;
  gap: 18px;
}
.q-value { font-family: var(--font-mono); font-size: 13px; color: var(--acid); letter-spacing: 3px; }
.q-text {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  max-width: 640px;
}
.trivia-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; max-width: 640px; }
.trivia-choice {
  background: transparent;
  border: 1px solid var(--acid);
  color: var(--bone);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.trivia-choice:hover:not(:disabled) { background: var(--acid); color: var(--ink); }
.trivia-choice:disabled { opacity: 0.4; cursor: not-allowed; }

.trivia-result {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 26px;
  text-align: center;
  background: var(--ink);
  gap: 6px;
}
.trivia-result .big {
  font-family: var(--font-display);
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--blood);
}
.trivia-result.correct .big { color: var(--acid); }

/* ============================================================
   ETCH
   ============================================================ */
.etch-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.etch-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink);
  color: var(--bone);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--blood);
}
.etch-header .word { font-family: var(--font-display); font-size: 19px; letter-spacing: 4px; color: var(--acid); }
.etch-canvas-wrap { position: relative; flex: 1; min-height: 190px; background: #fff; }
.etch-canvas-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.etch-canvas-wrap canvas.guesser { cursor: default; }
.etch-canvas-wrap canvas.drawer { cursor: crosshair; }
.etch-canvas-wrap::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.etch-tools {
  position: absolute; bottom: 8px; left: 8px;
  display: flex; gap: 4px; align-items: center;
  background: rgba(8,8,11,0.85);
  padding: 5px 7px;
  z-index: 3;
}
.etch-tools .swatch { width: 19px; height: 19px; border: 2px solid transparent; cursor: pointer; }
.etch-tools .swatch.selected { border-color: var(--acid); }
.etch-tools button {
  background: var(--chrome);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  text-transform: uppercase;
}
.etch-tools button:hover { background: var(--blood); color: #fff; }

/* ============================================================
   TELL
   ============================================================ */
.tell-stage {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 13px;
  padding: 22px;
  overflow-y: auto;
  min-height: 0;
}
.tell-prompt {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  color: var(--bone);
}
.tell-sub { font-size: 11.5px; color: var(--steel); text-align: center; }
.tell-statement-input {
  width: 100%; max-width: 520px;
  background: var(--void);
  color: var(--bone);
  border: 1px solid #2b2b36;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
}
.tell-statement-input:focus { border-color: var(--acid); }
.tell-statement-card {
  width: 100%; max-width: 520px;
  background: var(--bone);
  color: var(--ink);
  border-left: 5px solid var(--blood);
  padding: 13px 16px;
  font-size: 13.5px;
  cursor: pointer;
}
.tell-statement-card:hover { background: var(--acid); border-left-color: var(--ink); }
.tell-statement-card.correct { background: var(--acid); border-left-color: var(--ink); }
.tell-statement-card.tell-lie-pick { background: var(--blood); color: #fff; border-left-color: var(--ink); }
.tell-submit {
  background: var(--chrome-hot);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 10px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.tell-submit:hover:not(:disabled) { background: var(--chrome); color: var(--ink); }
.tell-submit:disabled { background: #1c1c24; color: #3a3a44; cursor: not-allowed; }

/* ============================================================
   BLUFF
   ============================================================ */
.bluff-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bluff-header {
  background: var(--ink);
  color: var(--bone);
  padding: 7px 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--blood);
}
.bluff-header .turn { color: var(--acid); font-weight: bold; }
.bluff-table {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 16px;
  gap: 14px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a0507 0%, #0d0305 100%);
  min-height: 0;
}
.bluff-claim { background: var(--ink); border: 1px solid var(--acid); padding: 14px 18px; text-align: center; }
.bluff-claim .by {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.bluff-claim .text {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: bold;
  color: var(--acid);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.bluff-claim .text.none { color: var(--steel); font-style: italic; font-size: 14px; letter-spacing: 1px; }

.bluff-hand-area { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.bluff-hand-area .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 3px;
}
.bluff-hand { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.card {
  width: 56px; height: 80px;
  background: var(--bone);
  border: 2px solid var(--ink);
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: bold;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
}
.card .rank { font-size: 22px; color: var(--ink); }
.card .suit { font-size: 20px; line-height: 1; color: var(--ink); }
.card.red .suit, .card.red .rank { color: var(--blood); }
.card .corner-tl, .card .corner-br { position: absolute; font-size: 9px; line-height: 1; }
.card .corner-tl { top: 3px; left: 3px; }
.card .corner-br { bottom: 3px; right: 3px; transform: rotate(180deg); }
.card.back { background: repeating-linear-gradient(45deg, var(--blood) 0 6px, var(--blood-d) 6px 12px); }
.card.back::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(232, 255, 0, 0.35); }
.card.small { width: 32px; height: 46px; }
.card.small .rank { font-size: 14px; }
.card.small .suit { font-size: 12px; }

.bluff-opponents { display: flex; gap: 26px; justify-content: center; padding: 4px 0; }
.bluff-opp { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bluff-opp .name { font-family: var(--font-mono); font-size: 11px; color: var(--bone-2); letter-spacing: 1px; }
.bluff-opp .count { font-family: var(--font-mono); font-size: 9px; color: var(--steel); }
.bluff-opp .cards-row { display: flex; }
.bluff-opp.active .name { color: var(--acid); font-weight: bold; }

.bluff-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 8px; }
.bluff-actions button {
  background: var(--chrome);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.bluff-actions button:hover:not(:disabled) { background: var(--acid); }
.bluff-actions button.danger { background: var(--chrome-hot); color: #fff; }
.bluff-actions button.danger:hover { background: var(--blood); }
.bluff-actions button:disabled { background: #1c1c24; color: #3a3a44; cursor: not-allowed; }

.bluff-claim-builder {
  background: rgba(0,0,0,0.5);
  border: 1px solid #3a1014;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.bluff-claim-builder .row { display: flex; gap: 8px; align-items: center; }
.bluff-claim-builder label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bluff-claim-builder select,
.bluff-claim-builder input[type=number] {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
}
.bluff-claim-builder input[type=number] { width: 62px; text-align: center; }

.bluff-feed {
  background: var(--ink);
  padding: 9px 11px;
  max-height: 110px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  border-top: 1px solid #3a1014;
}
.bluff-feed .entry { padding: 1px 0; }
.bluff-feed .entry.system { color: var(--steel); font-style: italic; }
.bluff-feed .entry.action { color: var(--acid); }
.bluff-feed .entry.reveal { color: var(--blood); font-weight: bold; }

/* ============================================================
   ASSOCIATE
   ============================================================ */
.asc-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.asc-chain {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-wrap: wrap;
  align-items: center; align-content: flex-start;
  gap: 7px;
  min-height: 110px;
}
.asc-word {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.asc-word.seed { background: var(--ink); color: var(--acid); border-color: var(--acid); }
.asc-word.rejected {
  background: var(--blood); color: #fff; border-color: var(--blood);
  text-decoration: line-through;
}
.asc-arrow { color: var(--blood); font-size: 17px; }
.asc-break {
  width: 100%;
  text-align: center;
  color: var(--blood);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 5px 0;
}
.asc-action {
  border-top: 1px solid var(--blood);
  background: var(--ink);
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 128px;
  justify-content: center;
}
.asc-prompt { font-size: 15px; color: var(--bone); }
.asc-prompt strong { color: var(--acid); }
.asc-pending-word { color: var(--blood) !important; }
.asc-sub { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 1px; }
.asc-waiting { font-size: 13px; color: var(--steel); font-style: italic; text-align: center; }
.asc-progress { color: var(--acid); font-family: var(--font-mono); }
.asc-input-row { display: flex; gap: 8px; }
.asc-input-row input {
  flex: 1; max-width: 320px;
  background: var(--void);
  color: var(--bone);
  border: 1px solid #2b2b36;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 2px;
  outline: none;
}
.asc-input-row input:focus { border-color: var(--acid); }
.asc-input-row button, .asc-vote-row button {
  background: var(--chrome);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 9px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.asc-input-row button:hover:not(:disabled) { background: var(--acid); }
.asc-input-row button:disabled, .asc-vote-row button:disabled:not(.cast) {
  background: #1c1c24; color: #3a3a44; border-color: #23232c; cursor: not-allowed;
}
.asc-vote-row { display: flex; gap: 10px; }
.asc-vote-row .asc-valid { background: var(--acid); }
.asc-vote-row .asc-stretch { background: var(--chrome-hot); color: #fff; }
.asc-vote-row .asc-stretch:hover:not(:disabled) { background: var(--blood); }
.asc-vote-row button.cast { outline: 3px solid var(--cyan); outline-offset: 1px; }

.asc-verdict { text-align: center; padding: 8px; }
.asc-verdict-word { font-family: var(--font-display); font-size: 34px; text-transform: uppercase; letter-spacing: 4px; }
.asc-verdict-text { font-family: var(--font-mono); font-size: 11px; margin-top: 6px; color: var(--bone-2); }
.asc-verdict.good .asc-verdict-word { color: var(--acid); }
.asc-verdict.mid  .asc-verdict-word { color: var(--cyan); }
.asc-verdict.bad  .asc-verdict-word { color: var(--blood); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border: 1px solid #23232c;
  background: var(--ink);
  color: var(--bone);
  display: flex; align-items: center;
  margin-top: 10px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
}
.ticker-label {
  background: var(--blood);
  color: #fff;
  padding: 5px 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 9px;
  flex-shrink: 0;
}
.ticker-track { flex: 1; overflow: hidden; position: relative; height: 24px; }
.ticker-content {
  position: absolute;
  white-space: nowrap;
  animation: ticker-scroll 58s linear infinite;
  padding: 4px 0;
  letter-spacing: 1px;
  color: var(--bone-2);
}
.ticker-content .sep { color: var(--acid); margin: 0 18px; }
@keyframes ticker-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ============================================================
   FOOTER / MODAL / SOUND
   ============================================================ */
.footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--blood);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  flex-wrap: wrap;
  letter-spacing: 1px;
}
.footer .footer-main strong { color: var(--bone); }
.footer .footer-meta { text-align: right; }
.footer .warning { color: var(--blood); font-weight: bold; }
.footer a { color: var(--cyan); }
.footer a:hover { color: var(--acid); }

.modal {
  position: fixed; inset: 0;
  background: rgba(8,8,11,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 600;
  padding: 16px;
}
.modal-box {
  background: var(--bone);
  color: var(--ink);
  padding: 26px;
  max-width: 500px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 10px 10px 0 var(--blood);
}
.modal-box h3 {
  background: var(--ink);
  color: var(--acid);
  padding: 6px 12px;
  margin: -26px -26px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.modal-box p { margin-bottom: 10px; }
.modal-box button {
  background: var(--chrome-hot);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
  cursor: pointer;
}
.modal-box button:hover { background: var(--chrome); color: var(--ink); }

.sound-toggle {
  position: fixed;
  bottom: 8px; right: 10px;
  background: var(--chrome);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 9px;
  cursor: pointer;
  z-index: 9999;
}
.sound-toggle:hover { background: var(--blood); color: #fff; }
.sound-toggle.on { background: var(--acid); }

/* ============================================================
   VOICE CONTROLS — mic button, works for mouse and touch
   ============================================================ */
.vm-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chrome);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  min-height: 40px;
  /* a long press must not select text or pop the iOS callout */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.vm-mic-icon {
  width: 10px;
  height: 14px;
  border-radius: 5px 5px 3px 3px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
}
.vm-mic-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 3px;
  transform: translateX(-50%);
  background: currentColor;
}
.vm-mic.live {
  background: var(--blood);
  color: #fff;
  border-color: var(--acid);
  animation: mic-pulse 1s steps(2) infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 255, 0, 0.9); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 255, 0, 0); }
}
.vm-lock {
  background: transparent;
  border: 1px solid var(--steel);
  color: var(--steel);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
}
.vm-lock:hover { border-color: var(--bone); color: var(--bone); }
.vm-lock.on { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.vm-ptt-hint.error { color: var(--blood); }
.vm-name.voiced { color: var(--acid); }

/* ---------- fill countdown ---------- */
.fill-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--acid);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--blood);
}
.fill-countdown .fc-bar {
  flex: 1;
  height: 3px;
  background: #23232c;
  position: relative;
  overflow: hidden;
}
.fill-countdown .fc-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--acid);
  transition: width 0.25s linear;
}
.fill-countdown .fc-skip {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 9px;
  cursor: pointer;
}
.fill-countdown .fc-skip:hover { background: var(--acid); color: var(--ink); }

/* ============================================================
   REPORTING
   ============================================================ */
.report-btn {
  margin-left: auto;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
}
.report-btn:hover {
  background: var(--ink) !important;
  color: var(--blood) !important;
  border-color: var(--ink) !important;
}
.chat-topbar #backBtn { margin-left: 0; }

.report-box { max-width: 520px; }
.rp-intro { font-size: 11px; color: #55555d; line-height: 1.6; }
.rp-field { margin-bottom: 14px; }
.rp-field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blood);
  margin-bottom: 6px;
}
.rp-targets, .rp-reasons { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-chip {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}
.rp-chip:hover { background: var(--ink); color: var(--acid); }
.rp-chip.on { background: var(--blood); color: #fff; border-color: var(--blood); }
.report-box textarea {
  width: 100%;
  border: 1px solid var(--ink);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  resize: vertical;
  outline: none;
  background: #fff;
}
.report-box textarea:focus { border-color: var(--blood); }
.rp-actions { display: flex; gap: 7px; margin-top: 4px; }
.rp-actions button {
  border: 1px solid var(--ink);
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  margin-top: 0;
}
.rp-actions .rp-send { background: var(--chrome-hot); color: #fff; }
.rp-actions .rp-send:hover:not(:disabled) { background: var(--blood); }
.rp-actions .rp-send:disabled { background: #cfcbc0; color: #8a8a90; cursor: not-allowed; }
.rp-actions button:hover:not(:disabled) { background: var(--ink); color: var(--acid); }
.rp-status {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  min-height: 1.3em;
}
.rp-status.ok { color: #1e8a3a; }
.rp-status.bad { color: var(--blood); }
.rp-leave {
  margin-top: 8px;
  background: var(--ink);
  color: var(--acid);
  border: 0;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}
.rp-leave:hover { background: var(--blood); color: #fff; }

/* ============================================================
   RESPONSIVE — real mobile layout, not just narrower columns
   ============================================================ */

/* Tablet and below: sidebar stops being a sidebar. */
@media (max-width: 900px) {
  /* Block flow, not flex. The flex version let the panels paint over the
     game stage — the clip-path corner cuts were showing the board through
     them. Block layout makes overlap structurally impossible. */
  .main { display: block; }
  .stage { width: 100%; }
  .side {
    width: 100%;
    display: block;
    margin-top: 10px;
  }
  .side .panel { margin-bottom: 8px; }
  .ad-rectangle { max-width: none; }

  .lobby-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
  .lobby-rail {
    grid-row: auto;
    grid-column: 1;
    border-left: 0;
    border-top: 2px solid var(--blood);
    max-height: 190px;
  }
  .lobby-games { flex-direction: row; flex-wrap: wrap; }
  .lobby-game-btn { flex: 1 1 130px; }
}

/* Phones. */
@media (max-width: 720px) {
  body { padding: 6px; font-size: 14px; }

  .ad-leaderboard { display: none; }

  /* Diagonal cuts look great on a desktop card and cause nothing but
     stacking artifacts at phone size. Square everything off. */
  .panel, .channel, .intro-box, .modal-box, .ad-slot,
  .trivia-result, .bluff-claim, .lobby-rail, .endgame {
    clip-path: none;
  }

  /* ---- header ---- */
  .header {
    display: block;
    border-bottom: 2px solid var(--blood);
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .logo {
    font-size: 27px;
    letter-spacing: 0;
    /* the chromatic-aberration shadow needs room or it clips */
    padding-right: 3px;
    text-shadow: -1px 0 0 rgba(208,2,27,0.85), 1px 0 0 rgba(0,229,255,0.7);
  }
  .logo .tv { font-size: 9px; letter-spacing: 2px; }
  .tagline {
    text-align: left;
    font-size: 10px;
    max-width: none;
    margin-top: 2px;
    line-height: 1.4;
  }
  .tagline br { display: none; }
  .tagline-cycle { display: none; }
  .mode { margin-top: 3px; }

  /* ---- picker ---- */
  .picker h2 { font-size: 15px; letter-spacing: 2px; }
  .picker-hint { display: none; }
  .channel-grid { grid-template-columns: 1fr; gap: 7px; }
  .channel { padding: 10px 12px 12px; }
  .ch-name { font-size: 21px; }
  .ch-meta { display: none; }

  /* ---- game view ---- */
  .chat-view { min-height: 0; }

  .chat-topbar {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 7px;
    gap: 5px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* keep the channel name on one line instead of stacking three deep */
  #chatChannelLabel {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-topbar #memberStatus { display: none; }
  .chat-topbar button {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 7px 9px;
    min-height: 34px;
    font-size: 9px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .main { margin-top: 7px; }

  /* Fixed height + internal scrolling, so the stage can never grow into
     whatever comes after it. */
  .stage {
    height: 62dvh;
    min-height: 320px;
    overflow: hidden;
  }

  /* compact side panels */
  .side { margin-top: 8px; }
  .side .panel .body { padding: 7px 9px; }
  .side .panel h3 { font-size: 9px; padding: 3px 9px; }
  .score-row { padding: 4px 8px; }
  /* peers/session is the least useful thing on a small screen */
  #onlinePanel { display: none; }

  /* ---- voice ---- */
  .voice-mesh { flex-wrap: wrap; gap: 7px; padding: 6px 8px; }
  .vm-join { min-height: 38px; padding: 6px 11px; order: 2; }
  .vm-lock { order: 3; min-height: 38px; }
  .vm-mic {
    order: 1;
    flex: 1 1 100%;
    justify-content: center;
    min-height: 50px;
    font-size: 13px;
    padding: 11px;
  }
  .vm-ptt-hint { display: none; }
  .vm-peers { order: 4; margin-left: 0; width: 100%; justify-content: space-between; gap: 5px; }
  .vm-name { font-size: 9px; }

  /* ---- trivia ---- */
  .trivia-board-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Fit all five columns on screen rather than making people scroll a
     game board sideways. ~72px per column at 390px wide. */
  .trivia-board {
    min-width: 0;
    gap: 2px;
    padding: 2px;
    grid-auto-rows: minmax(42px, 1fr);
  }
  .trivia-cat {
    font-size: 7.5px;
    padding: 4px 1px;
    letter-spacing: 0;
    line-height: 1.05;
    word-break: break-word;
    hyphens: auto;
  }
  .trivia-cell { font-size: 13px; letter-spacing: 0; }
  .trivia-question { padding: 14px 11px; gap: 11px; overflow-y: auto; }
  .q-text { font-size: 17px; line-height: 1.25; }
  .trivia-choices { grid-template-columns: 1fr; }
  .trivia-choice { padding: 12px; min-height: 46px; font-size: 14px; }
  .trivia-result { padding: 16px; }
  .trivia-result .big { font-size: 25px; letter-spacing: 1px; }

  /* ---- etch ---- */
  .etch-canvas-wrap { min-height: 190px; }
  .etch-tools { bottom: 5px; left: 5px; gap: 5px; padding: 5px; }
  .etch-tools .swatch { width: 24px; height: 24px; }
  .etch-tools button { padding: 5px 9px; min-height: 30px; }
  .etch-header { font-size: 9px; letter-spacing: 0; padding: 5px 8px; }
  .etch-header .word { font-size: 14px; letter-spacing: 2px; }
  .etch-stage .log { max-height: 80px; min-height: 60px; }

  /* ---- tell ---- */
  .tell-stage { padding: 12px; gap: 9px; }
  .tell-prompt { font-size: 16px; letter-spacing: 1px; }
  .tell-statement-card { padding: 12px; font-size: 14px; }
  .tell-statement-input { font-size: 16px; }
  .tell-submit { width: 100%; min-height: 46px; }

  /* ---- bluff ---- */
  .bluff-table { padding: 10px; gap: 9px; }
  .bluff-header { font-size: 9px; letter-spacing: 0; padding: 6px 8px; }
  .card { width: 40px; height: 57px; }
  .card .rank { font-size: 15px; }
  .card .suit { font-size: 13px; }
  .card .corner-tl, .card .corner-br { font-size: 7px; }
  .card.small { width: 25px; height: 36px; }
  .card.small .rank { font-size: 10px; }
  .card.small .suit { font-size: 9px; }
  .bluff-claim { padding: 11px; }
  .bluff-claim .text { font-size: 17px; letter-spacing: 1px; }
  .bluff-opponents { gap: 12px; }
  .bluff-actions button { flex: 1 1 120px; min-height: 46px; }
  .bluff-claim-builder .row { flex-wrap: wrap; justify-content: center; }
  .bluff-claim-builder select,
  .bluff-claim-builder input[type=number] { font-size: 16px; min-height: 42px; }
  .bluff-feed { max-height: 80px; }

  /* ---- associate ---- */
  .asc-chain { padding: 11px; gap: 5px; }
  .asc-word { font-size: 13px; padding: 5px 8px; letter-spacing: 1px; }
  .asc-action { padding: 11px; min-height: 0; }
  .asc-prompt { font-size: 13px; }
  .asc-input-row { flex-wrap: wrap; }
  .asc-input-row input { max-width: none; flex: 1 1 100%; font-size: 16px; min-height: 46px; }
  .asc-input-row button { flex: 1 1 100%; min-height: 46px; }
  .asc-vote-row button { flex: 1; min-height: 50px; font-size: 13px; }
  .asc-verdict-word { font-size: 24px; letter-spacing: 1px; }

  /* ---- lobby ---- */
  .lobby-rail { max-height: 160px; padding: 8px; }
  .lobby-game-btn { min-height: 44px; }
  .lg-name { font-size: 12px; }
  .lv-buttons button { min-height: 42px; }

  /* ---- chat ---- */
  .gc-log { height: 80px; }
  .gc-header { min-height: 36px; }
  .gc-send, .send { min-width: 58px; }

  /* ---- endgame ---- */
  .endgame { padding: 10px; gap: 6px; margin-top: 10px; }
  .endgame button { flex: 1 1 100%; min-height: 46px; }

  /* ---- modals ---- */
  .modal { padding: 8px; align-items: flex-start; padding-top: 14px; }
  .modal-box {
    padding: 18px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 5px 5px 0 var(--blood);
  }
  .modal-box h3 { margin: -18px -18px 12px; font-size: 14px; letter-spacing: 2px; }
  .rp-chip { min-height: 40px; flex: 1 1 calc(50% - 3px); justify-content: center; }
  .rp-actions { flex-direction: column; }
  .rp-actions button { width: 100%; min-height: 46px; }
  .report-box textarea { font-size: 16px; }

  /* ---- intro ---- */
  .intro-box { padding: 22px 16px 18px; }
  .intro-box h2 { font-size: 25px; letter-spacing: 2px; }
  .intro-name input { width: 100%; font-size: 16px; min-height: 44px; }
  .start { width: 100%; min-height: 50px; letter-spacing: 2px; }

  /* ---- footer + ticker ---- */
  .footer {
    flex-direction: column;
    gap: 5px;
    font-size: 9px;
    /* clear the fixed sound button so it stops covering the about link */
    padding-bottom: 40px;
  }
  .footer .footer-meta { text-align: left; }
  /* a 250px-tall placeholder is a lot of dead scroll on a phone */
  .ad-rectangle .ad-content { height: 160px; }
  .ticker { margin-top: 8px; }
  .ticker-label { padding: 5px 7px; letter-spacing: 1px; font-size: 8px; }
  .sound-toggle { bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* Very small phones. */
@media (max-width: 400px) {
  .logo { font-size: 25px; }
  .tagline { display: none; }
  .bluff-hand { gap: 3px; }
  .card { width: 36px; height: 52px; }
  .rp-chip { flex-basis: 100%; }
}

/* Landscape phones: vertical space is the scarce resource. */
@media (max-height: 500px) and (orientation: landscape) {
  .header, .ticker, .footer { display: none; }
  .chat-view { min-height: 100dvh; }
  .stage { min-height: 0; }
  .voice-mesh { padding: 4px 8px; }
  .vm-mic { min-height: 40px; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before { animation: none; }
  .ticker-content { animation: none; position: static; white-space: normal; }
}