/* HUD only — the table itself is drawn in WebGL underneath. Every panel here
   floats over the 3D scene, so backgrounds stay translucent and dark. */

:root {
  --ink:      #090c14;
  --panel:    rgba(10, 16, 14, 0.62);
  --line:     rgba(243, 236, 222, 0.14);
  --bone:     #f3ecde;
  --text:     #eae6dc;
  --muted:    #93a09a;
  --blue:     #1f6feb;
  --blue-lit: #4c93ff;
  --coral:    #ff5b69;
  --mint:     #4fd6a0;

  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body:    'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font: 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button, input, select { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; border-radius: 4px; }

/* ── primitives ─────────────────────────────────────────────────────────── */

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.035em;
}
.wordmark.sm { font-size: 17px; }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .count { margin-left: 8px; letter-spacing: .06em; text-transform: none; opacity: .72; }

.btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px -8px var(--blue); }
.btn-primary:hover:not(:disabled) { background: var(--blue-lit); }
.btn-primary:disabled {
  background: rgba(243,236,222,.10); color: var(--muted);
  box-shadow: none; cursor: not-allowed;
}

.btn-ghost { background: rgba(0,0,0,.28); border-color: var(--line); color: var(--muted); font-weight: 500; }
.btn-ghost:hover { border-color: var(--blue-lit); color: var(--text); }

.switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); cursor: pointer; user-select: none;
}
.switch input { accent-color: var(--blue); width: 15px; height: 15px; }
.switch:hover { color: var(--text); }

.select select {
  appearance: none;
  padding: 7px 26px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a09a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px; cursor: pointer;
}

.hint { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ── gate ───────────────────────────────────────────────────────────────── */

.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(80% 60% at 50% 0%, #16382a 0%, #070c09 72%);
}

.gate-card {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 18, 14, .78);
  backdrop-filter: blur(14px);
  text-align: center;
}

.gate-card h1 {
  margin: 14px 0 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.field { display: block; margin-bottom: 14px; text-align: left; }
.field span {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(0,0,0,.42);
}
.field input:focus { outline: none; border-color: var(--blue-lit); }

.gate-card .btn { width: 100%; margin-top: 8px; }
.gate-note { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

/* ── hud layout ─────────────────────────────────────────────────────────── */

.app { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.app > * { pointer-events: auto; }

.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(6,10,8,.82) 0%, transparent 100%);
}

.slug {
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.story-wrap {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 340px)); text-align: center;
}

.story-input {
  width: 100%; padding: 2px 8px 8px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  transition: border-color .15s;
}
.story-input::placeholder { color: rgba(243,236,222,.28); }
.story-input:focus { outline: none; border-bottom-color: var(--blue-lit); }

/* right-hand panel */
.side {
  position: absolute; top: 64px; right: 16px; width: 208px;
  max-height: calc(100vh - 190px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(12px);
  font-family: var(--mono); font-size: 11px;
}

.people, .history { margin: 0; padding: 0; list-style: none; }
.people li {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; color: var(--muted);
}
.people li b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people li.you b { color: var(--blue-lit); }
.people li.off { opacity: .42; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(243,236,222,.22); flex: 0 0 auto; }
.dot.voted { background: var(--mint); }
.dot.obs { background: transparent; border: 1px solid var(--line); }

.history li { padding: 7px 0; border-bottom: 1px solid rgba(243,236,222,.08); }
.history li:last-child { border-bottom: 0; }
.h-title {
  font-family: var(--body); font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h-meta { margin-top: 2px; color: var(--muted); }
.h-meta b { color: var(--text); font-weight: 500; }
.h-meta .apart { color: var(--coral); }
.h-meta .agree { color: var(--mint); }
.empty { color: var(--muted); }

/* reveal readout */
.verdict {
  position: absolute; right: 16px; bottom: 20px;
  display: flex; gap: clamp(16px, 2.4vw, 30px); align-items: baseline;
  padding: 12px 24px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(12px);
  white-space: nowrap;
}
.stat span {
  display: block;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.stat b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -0.04em; line-height: 1.1;
}
.stat.agree b { color: var(--mint); }
.stat.apart b { color: var(--coral); }

/* action row sits just above the hand */
.actions {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); backdrop-filter: blur(12px);
  white-space: nowrap;
}

/* status */
.conn, .toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  padding: 8px 15px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; z-index: 40;
}
.conn { top: 58px; border: 1px solid var(--coral); background: rgba(8,14,12,.9); color: var(--coral); }
.toast { bottom: 74px; background: var(--bone); color: #1a1212; font-weight: 500; }

@media (max-width: 900px) {
  .side { display: none; }
  .story-wrap { width: calc(100vw - 32px); top: 58px; }
  .actions { gap: 10px; padding: 8px 12px; left: 12px; bottom: 12px; }
  .actions .switch span { display: none; }
  .verdict { right: 12px; bottom: 62px; padding: 10px 16px; }
}

/* Narrow last: it has to win over the 900px block above. */
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topbar-right { width: 100%; margin-left: 0; gap: 10px; }
  .wordmark.sm { font-size: 15px; }
  .story-wrap { top: 126px; width: calc(100vw - 24px); }
}