:root {
  --bg: #111827;
  --panel: #1f2937;
  --panel-2: #0f172a;
  --text: #f9fafb;
  --muted: #cbd5e1;
  --left: #2563eb;
  --right: #dc2626;
  --accent: #facc15;
  --good: #16a34a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: linear-gradient(180deg, #0b1020, #111827);
  color: var(--text);
}
.app { max-width: 1400px; margin: 0 auto; padding: 24px; }
.hero, .layout, .phones { display: grid; gap: 20px; }
.hero { grid-template-columns: 1.8fr 1fr; align-items: start; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
h1, h2, h3, p { margin-top: 0; }
.subtitle { color: var(--muted); max-width: 60ch; }
.status-card, .side, .question-card, .phone-card { background: rgba(31,41,55,.92); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.layout { grid-template-columns: 220px 1fr 220px; align-items: stretch; }
.side { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.side-left { border-top: 6px solid var(--left); }
.side-right { border-top: 6px solid var(--right); }
.score { font-size: 72px; font-weight: 800; margin: 20px 0; }
.buzz-state { color: var(--muted); }
.question-meta { display: flex; justify-content: space-between; color: var(--accent); font-weight: 700; }
.question-card h3 { font-size: 32px; min-height: 88px; }
.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.answer { background: var(--panel-2); border: 1px solid rgba(255,255,255,.08); padding: 16px; border-radius: 14px; color: var(--text); }
.rope-wrap { position: relative; height: 140px; margin: 24px 0; background: rgba(255,255,255,.04); border-radius: 999px; overflow: hidden; }
.lane { position: absolute; top: 0; bottom: 0; width: 50%; }
.lane.left { left: 0; background: linear-gradient(90deg, rgba(37,99,235,.30), transparent); }
.lane.right { right: 0; background: linear-gradient(270deg, rgba(220,38,38,.30), transparent); }
.rope { position: absolute; left: 50%; top: 50%; width: 60%; height: 12px; background: linear-gradient(90deg, #d4a373, #f2cc8f, #d4a373); transform: translate(-50%, -50%); border-radius: 999px; transition: left .45s ease; }
.flag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 40px; background: var(--accent); border-radius: 6px; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; }
button { border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 700; cursor: pointer; background: var(--accent); color: #111827; }
button.secondary { background: #334155; color: white; }
button:disabled { opacity: .5; cursor: not-allowed; }
.phones { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.buzzer { width: 100%; padding: 30px 16px; font-size: 28px; background: var(--good); color: white; }
.phone-card p { color: var(--muted); margin-bottom: 0; }
@media (max-width: 980px) {
  .hero, .layout, .phones, .answers { grid-template-columns: 1fr; }
  .score { font-size: 52px; }
  .question-card h3 { font-size: 24px; }
}