@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Bungee&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg-deep: #0c0505;
  --bg-mid: #170808;
  --bg-top: #3a1418;
  --accent-gold: #e8b64a;
  --accent-gold-dim: #a9776b;
  --ink-cream: #f3e3c8;
  --ink-bright: #fff2d6;
  --card-bg: #241010;
  --card-bg-2: #170a0a;
  --card-border: #5c2a2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% -10%, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  font-family: 'Space Mono', monospace;
  color: var(--ink-cream);
  padding: 24px 20px 40px;
}

.marquee-title {
  font-family: 'Bungee Shade', cursive;
  color: var(--accent-gold);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(232, 182, 74, 0.4);
  margin: 0 0 4px;
}

.marquee-sub {
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent-gold-dim);
  text-transform: uppercase;
  margin: 0 0 20px;
}

.subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--ink-cream);
  margin: 8px 0;
}

.entity-header {
  text-align: center;
  font-family: 'Bungee', cursive;
  font-size: 13px;
  color: var(--ink-bright);
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-border);
}

.panel {
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* --- tier badges, escalating WEAK -> DEEP --- */
.tier-badge {
  display: inline-block;
  font-family: 'Bungee', cursive;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
}
.tier-weak { background: #241515; color: #6b5450; border: 1px dashed #3d2b2b; }
.tier-common { background: #4a3020; color: #cba876; }
.tier-core { background: linear-gradient(135deg, #c7c9cf, #8b8d94); color: #1a1a1c; }
.tier-solid { background: linear-gradient(135deg, #f3d98a, #c9932f); color: #3a2408; box-shadow: 0 0 10px rgba(232, 182, 74, 0.5); }
.tier-deep {
  background: linear-gradient(135deg, #a33, #5c1414);
  color: #ffd9a0;
  box-shadow: 0 0 14px rgba(200, 50, 50, 0.6);
  border: 1px solid #d4787a;
}

/* --- buttons --- */
.btn-marquee, .btn-yes, .btn-no {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Bungee', cursive;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 12px;
  min-height: 44px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}
.btn-marquee {
  background: linear-gradient(135deg, #f3d98a, #c9932f);
  color: #3a2408;
  box-shadow: 0 0 10px rgba(232, 182, 74, 0.35);
}
.btn-yes { background: linear-gradient(135deg, #5fa86a, #2e6a38); color: #eaffec; }
.btn-no { background: linear-gradient(135deg, #a85f5f, #6a2e2e); color: #ffeaea; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn-yes, .btn-row .btn-no { margin-top: 0; }

/* --- inputs --- */
.ticket-input {
  display: block;
  width: 100%;
  background: #241313;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 10px 12px;
  min-height: 44px;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  color: var(--ink-bright);
  margin-bottom: 8px;
}
.ticket-input::placeholder { color: #7a5a48; }

/* --- vote tally + countdown ring --- */
.vote-row { display: flex; align-items: center; gap: 16px; }
.vote-body { flex: 1; }
.vote-text { font-family: 'Bungee', cursive; font-size: 15px; color: var(--ink-bright); margin-bottom: 8px; }
.vote-tally { display: flex; gap: 8px; align-items: center; font-size: 10px; }
.vote-tally-bar { flex: 1; height: 8px; border-radius: 4px; background: #3d1f1f; overflow: hidden; display: flex; }
.vote-tally-yes { background: #3f8a4a; }
.vote-tally-no { background: #8a3f3f; }
.vote-tally-label { color: #c9a98f; white-space: nowrap; }


/* --- TV collecting board --- */
.collect-board { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.collect-column { width: 140px; min-height: 30px; }
.collect-name {
  font-family: 'Bungee', cursive;
  font-size: 11px;
  color: var(--accent-gold-dim);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collect-slot {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 11px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collect-slot-empty { border: 1px dashed #3d2b2b; background: transparent; }
.collect-slot-blurred {
  background: linear-gradient(135deg, #3a2020, #241010);
  border: 1px solid var(--card-border);
  color: var(--ink-cream);
  filter: blur(3px);
}
.collect-slot-filled {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--ink-cream);
}

/* --- connection state ------------------------------------------------- */
/* Only ever on screen when the socket is down. Fixed to the top so it's
   visible whatever the page has scrolled to — a frozen page with no
   explanation was the single most confusing thing in the first playtest. */
.conn-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #6a2e2e;
  color: #ffeaea;
  font-family: 'Bungee', cursive;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px;
}

/* --- phase countdown --------------------------------------------------- */
.phase-timer { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }

/* --- submitted confirmation (phone) ------------------------------------ */
.submitted-mark {
  font-family: 'Bungee', cursive;
  font-size: 20px;
  color: #7fc98a;
  text-align: center;
  margin: 18px 0 6px;
}
.submitted-answer {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink-cream);
}
.you-score {
  text-align: center;
  font-family: 'Bungee', cursive;
  font-size: 15px;
  color: var(--accent-gold);
  margin: 16px 0;
}
.watch-tv {
  text-align: center;
  font-size: 12px;
  color: var(--accent-gold-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 14px 0;
}

/* --- TV: the movie is the headline ------------------------------------- */
/* The entity used to render at 16px under a giant static "RELATEDNESS", so
   the one thing players are actually answering about was the least visible
   thing on the screen. */
.tv-wordmark {
  font-family: 'Bungee', cursive;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--accent-gold-dim);
  text-align: center;
  opacity: 0.7;
}
.tv-entity {
  font-family: 'Bungee', cursive;
  font-size: 40px;
  line-height: 1.1;
  color: var(--ink-bright);
  text-align: center;
  margin: 6px 0 2px;
  text-shadow: 0 0 24px rgba(232, 182, 74, 0.25);
}
.tv-standings-rail {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0 20px;
}
.tv-standing {
  background: rgba(255,255,255,0.03);
  border: 1px solid #3d1f1f;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
}
.tv-standing.leader { border-color: var(--accent-gold); box-shadow: 0 0 12px rgba(232,182,74,0.25); }
.tv-standing.disconnected { opacity: 0.4; }
.tv-standing .pts { color: var(--accent-gold); font-weight: 700; margin-left: 8px; }

/* A non-blocking error notice. Replaces alert(), which froze the phone until
   dismissed — a bad trade for races the player can't avoid and doesn't care
   about (a double-tapped host button, a submit that landed a moment late). */
.toast {
  background: #6a2e2e;
  border: 1px solid #a85f5f;
  border-radius: 4px;
  color: #ffeaea;
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: center;
}

/* --- result cards -------------------------------------------------------
   The scored version of the collecting board: same vertical per-player
   columns, but each slot becomes a card carrying everything about the answer
   — tier, what it matched, and what it paid. Replaces the old host-paced
   reveal arena, which players found confusing because it showed one answer
   group at a time with no sense of the whole board.                       */
.result-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  text-align: center;
  /* Cards start invisible and are dealt in by resultIn; the delay is set
     per-card inline, from the answer's collision group. */
  opacity: 0;
  animation: resultIn 0.45s cubic-bezier(.2,.8,.2,1) forwards;
}
.result-card .raw {
  font-size: 11px;
  color: var(--accent-gold-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-card .what {
  font-family: 'Bungee', cursive;
  font-size: 13px;
  color: var(--ink-bright);
  margin: 3px 0 5px;
  line-height: 1.2;
}
.result-card .pts { font-weight: 700; font-size: 20px; color: var(--accent-gold); }
.result-card .pts .was {
  font-size: 12px;
  font-weight: 400;
  color: #8a5f5f;
  text-decoration: line-through;
  margin-right: 6px;
}
.result-card .verdict {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-gold-dim);
  margin-top: 4px;
}
.result-card.miss { border-style: dashed; opacity: 0; }
.result-card.miss .what { color: #8a6a6a; }

/* A shared answer. Both cards carry this, and because their animation-delay
   comes from the collision group rather than their position, they flash at
   the same instant in different columns — which is the point: you see who
   you collided with, and watch it cost you. */
.result-card.shared { border-color: var(--accent-gold); }
.result-card.shared .verdict { color: var(--accent-gold); }
.result-card.shared { animation: resultIn 0.45s cubic-bezier(.2,.8,.2,1) forwards, sharedFlash 0.9s ease-out forwards; }

@keyframes resultIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}

/* Runs on the same delay as the card's entrance, so the flash reads as a
   consequence of the card landing. */
@keyframes sharedFlash {
  0%, 40%  { box-shadow: 0 0 0 rgba(232,182,74,0); }
  55%      { box-shadow: 0 0 26px rgba(232,182,74,0.85); }
  100%     { box-shadow: 0 0 10px rgba(232,182,74,0.28); }
}

.results-legend {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-gold-dim);
  margin: 4px 0 12px;
}