/* ============================================================================
   Social Turing Arena — "forensic dossier" theme
   Deep teal-ink ground · warm parchment ink · honey-amber accent
   Emerald = real signal · ember-clay = fake. No black-on-white, no purple.
   Display: Fraunces (serif) · Body: Hanken Grotesk
   ========================================================================== */

@font-face { font-family:"Hanken Grotesk"; font-weight:400; font-display:swap;
  src:url("/static/fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-weight:600; font-display:swap;
  src:url("/static/fonts/hanken-600.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-weight:800; font-display:swap;
  src:url("/static/fonts/hanken-800.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-weight:400; font-display:swap;
  src:url("/static/fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-weight:600; font-display:swap;
  src:url("/static/fonts/fraunces-600.woff2") format("woff2"); }

:root {
  --bg:        #0d1b1e;
  --bg-2:      #0a1416;
  --panel:     #122a2c;
  --panel-2:   #163335;
  --line:      #244a4d;
  --line-soft: #1b3a3d;
  --text:      #f1ece0;
  --text-dim:  #cdc6b6;
  --muted:     #8ba39f;
  --amber:     #f0b429;
  --amber-soft:#f6c659;
  --apricot:   #ef9d4e;
  --emerald:   #2dd4a7;
  --emerald-d: #1d9e7c;
  --ember:     #e57a5c;
  --gold:      #f6c659;
  --radius:    16px;
  --shadow:    0 18px 50px rgba(0,0,0,.5);
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-disp: "Fraunces", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[x-cloak] { display: none !important; }
body {
  font-family: var(--font-body);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  background:
    radial-gradient(900px 520px at 88% 112%, rgba(45,212,167,.07), transparent 60%),
    radial-gradient(1200px 680px at 50% -18%, #17403f, var(--bg) 62%),
    var(--bg);
  background-attachment: fixed;
}
/* subtle film grain so dark voids read as deliberate depth, not flat gradient */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-soft); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 18px 22px 24px; }

/* header */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 14px; border-bottom: 1px solid var(--line-soft); }
.brand { font-family: var(--font-disp); font-weight: 600; font-size: 22px; letter-spacing: -.015em; color: var(--text); }
.brand .dot { color: var(--amber); }
.nav a { color: var(--muted); margin-left: 20px; font-size: 14px; font-weight: 600; }
.nav a:hover { color: var(--text); }

/* hero / landing */
/* poster layout: stat near top, headline/CTA centered, research line at the bottom */
.hero { position: relative; text-align: center; min-height: calc(100dvh - 96px);
  display: flex; flex-direction: column; align-items: center; padding: 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(480px 300px at 50% 44%, rgba(246,180,41,.10), transparent 70%); }
.kicker { margin: 7vh 0 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-soft); }
.hero-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero h1 { font-family: var(--font-disp); font-weight: 600; font-size: clamp(52px, 6.4vw, 80px);
  line-height: 1.02; margin: 0 0 22px; letter-spacing: -.03em; text-wrap: balance;
  font-feature-settings: "kern","liga"; font-optical-sizing: auto; }
.grad { background: linear-gradient(96deg, var(--emerald) 6%, var(--amber-soft) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic;
  display: inline-block; padding: 0 .16em; margin: 0 -.12em; }   /* italic overhang room so it isn't clipped */
.hero p.lede { color: var(--text-dim); font-size: clamp(17px, 1.5vw, 19px); max-width: 46ch; margin: 0 auto 36px; line-height: 1.5; text-wrap: balance; }
.btn .arr { font-weight: 400; display: inline-block; transition: transform .14s ease; }
.btn:hover .arr { transform: translateX(3px); }
.trust { margin: 0 0 5vh; font-size: 13px; color: var(--muted); letter-spacing: .01em; }

.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: none; border-radius: 999px; padding: 15px 32px; font-family: var(--font-body);
  font-size: 15px; font-weight: 700; letter-spacing: .015em;
  color: #0d1b1e; background: linear-gradient(100deg, var(--amber-soft), var(--apricot));
  box-shadow: 0 8px 22px rgba(240,180,41,.22), 0 1px 0 rgba(255,255,255,.25) inset;
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(240,180,41,.34), 0 1px 0 rgba(255,255,255,.3) inset; color: #0d1b1e; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--amber); color: var(--amber-soft); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---- game shell: fills the viewport but GROWS so posts are never clipped ---- */
.round { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 92px); }
.gamebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.dots { display: flex; gap: 8px; flex-wrap: wrap; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; transition: background .2s, box-shadow .2s; }
.dots i.done { background: var(--emerald); }
.dots i.cur { background: var(--amber); box-shadow: 0 0 0 4px rgba(240,180,41,.18); }
.chips { display: flex; gap: 10px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: 16px; color: var(--amber-soft); }
.chip .lab { color: var(--muted); font-weight: 700; margin-right: 8px; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.chip.streak.hot { border-color: var(--amber); color: var(--amber-soft); }

/* two-column stage: vertical timeline | play area */
.stage { flex: 1 1 auto; display: grid; grid-template-columns: minmax(290px, 350px) 1fr; gap: 20px; align-items: start; }

/* vertical post-history timeline — every post shown IN FULL, never truncated */
.timeline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 16px 18px; display: flex; flex-direction: column; }
.timeline .panel-title, .timeline h3 { margin: 0 0 14px; font-family: var(--font-disp); font-style: italic; font-weight: 400; font-size: 15px; color: var(--muted); flex: 0 0 auto; }
.feed { display: flex; flex-direction: column; gap: 10px; }

/* ---- Bluesky-style post (dark mode) ---- */
.bpost {
  display: flex; align-items: flex-start; gap: 12px;
  background: #18232f; border: 1px solid #2a3a48; border-radius: 14px;
  padding: 14px 16px; text-align: left; color: #dce3e8; font-family: var(--font-body);
}
.bav { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 15px;
  background: linear-gradient(140deg, hsl(var(--h),62%,56%), hsl(var(--h2),60%,44%)); }
.bpost-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.bpost-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 1.2; }
.bpost-name { font-weight: 700; color: #f1f3f5; }
.bpost-handle { color: #8b98a5; }
.bsky { width: 13px; height: 13px; color: #208bfe; flex: 0 0 auto; }
.bpost-text { font-size: 15px; line-height: 1.55; color: #dce3e8; white-space: pre-wrap; word-break: break-word; }
.bpost-text .lnk, .bpost-text .mention { color: #208bfe; }
.bpost-actions { display: flex; gap: 30px; margin-top: 7px; color: #5d6e7c; }
.bpost-actions .ba svg { width: 17px; height: 17px; }
.bpost-badge { margin-left: auto; align-self: flex-start; background: var(--amber); color: #0d1b1e;
  font-weight: 800; border-radius: 9px; width: 28px; height: 26px; display: grid; place-items: center;
  font-size: 15px; box-shadow: 0 3px 10px rgba(240,180,41,.3); }
.bpost-verdict { margin-left: auto; align-self: flex-start; font-weight: 800; font-size: 12px; letter-spacing: .04em; }

.bpost.compact { padding: 11px 13px; gap: 10px; }
.bpost.compact .bav { width: 34px; height: 34px; font-size: 13px; }
.bpost.compact .bpost-text { font-size: 14px; }

/* play area — question + the two focal cards, vertically centered */
.play { display: flex; flex-direction: column; justify-content: center; }
.question { font-family: var(--font-disp); font-style: italic; font-weight: 400; font-size: 23px; text-align: center; margin: 0 0 18px; flex: 0 0 auto; color: var(--text); }
#guessform { width: 100%; }
.squares { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; width: 100%; }
@media (max-width: 560px) { .squares { grid-template-columns: 1fr; } }

/* candidate choice = a clickable Bluesky post */
.choice { cursor: pointer; border-width: 1.5px; min-height: 240px; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.choice:hover { transform: translateY(-3px); border-color: var(--amber); box-shadow: var(--shadow); }
.choice .bpost-main { flex: 1; }
.choice .bpost-text { font-size: 17px; line-height: 1.6; }
.choice .bpost-actions { margin-top: auto; }       /* pin actions to the bottom -> equal, full cards */

/* reveal */
.reveal { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - 92px); justify-content: center; align-items: center; text-align: center; padding: 16px 0; }
.reveal .headline { font-family: var(--font-disp); font-size: 30px; font-weight: 600; }
.reveal .headline.good { color: var(--emerald); }
.reveal .headline.bad { color: var(--ember); }
.reveal .sub { color: var(--text-dim); max-width: 620px; }
.reveal .model { color: var(--amber-soft); font-weight: 700; }
.reveal .squares { width: 100%; max-width: 820px; }
.vc.real { border-color: var(--emerald); background: #15292b; box-shadow: 0 0 0 2px rgba(45,212,167,.18); }
.vc.fake { border-color: var(--ember); background: #241d1f; }
.bpost-verdict { border-radius: 999px; padding: 3px 11px; font-size: 11px; }
.vc.real .bpost-verdict { background: var(--emerald); color: #06231b; }
.vc.fake .bpost-verdict { background: rgba(229,122,92,.18); color: var(--ember); }
.vc .bpost-text { font-size: 16px; }

/* results */
.scorebig { text-align: center; padding: 14px 0 6px; }
.scorebig .n { font-family: var(--font-disp); font-size: 76px; font-weight: 600; letter-spacing: -.02em; }
.scorebig .n .accent { background: linear-gradient(95deg, var(--emerald), var(--amber-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scorebig .cap { color: var(--muted); }

/* leaderboard */
.page-head { text-align: center; padding: 30px 0 10px; }
.page-head h1 { font-family: var(--font-disp); font-weight: 600; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.02em; margin: 0 0 12px; }
.page-head p { color: var(--text-dim); font-size: 16px; max-width: 42em; margin: 0 auto; line-height: 1.5; }
.page-head .count { margin-top: 10px; font-size: 13px; color: var(--amber-soft); font-weight: 700; }
.scorebig .vs { margin-top: 10px; font-size: 15px; color: var(--text-dim); }
.board { margin-top: 16px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin-bottom: 22px; }
@media (max-width: 680px) { .podium { grid-template-columns: 1fr; } }
.pod { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }
.pod.p1 { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(246,198,89,.22); }
.pod.p2 { border-color: #c2ccd2; }
.pod.p3 { border-color: #cd8e5e; }
.pod .rank { font-weight: 800; font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.pod .medal { font-size: 28px; }
.pod .m { font-family: var(--font-disp); font-weight: 600; margin: 8px 0 2px; font-size: 17px; word-break: break-word; }
.pod .pct { font-size: 30px; font-weight: 800; color: var(--amber-soft); }
.pod .meta { color: var(--muted); font-size: 12px; }

.lbtable { width: 100%; border-collapse: collapse; }
.lbtable th, .lbtable td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.lbtable th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .07em; }
.lbtable td.r { text-align: right; }
.bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; min-width: 120px; }
.bar > span { display: block; height: 100%; background: var(--amber); }
.rankcell { font-weight: 800; color: var(--muted); }
.rankcell.top { color: var(--gold); }

/* panel (used by results / prolific completion box) */
.persona { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

/* modal (GDPR) */
.modal-bg { position: fixed; inset: 0; background: rgba(5,11,12,.84); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; padding: 30px; box-shadow: var(--shadow); }
.modal h2 { font-family: var(--font-disp); font-weight: 600; margin: 0 0 12px; }
.modal p { color: var(--text-dim); font-size: 14px; }
.modal .actions { margin-top: 22px; display: flex; gap: 12px; justify-content: flex-end; }

.center { text-align: center; }
.muted { color: var(--muted); }
.mt { margin-top: 22px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
.htmx-swapping { opacity: 0; transition: opacity .15s; }

/* phones: single column, natural page flow (still no clipping) */
@media (max-width: 760px) {
  .stage { grid-template-columns: 1fr; }
  .round, .reveal { height: auto; min-height: 0; }
}
@media (max-width: 480px) {
  .wrap { padding: 14px 14px 28px; }
  .brand { font-size: 17px; white-space: nowrap; }
  .nav a { margin-left: 12px; }
  .hero h1 { font-size: 34px; }
  .question { font-size: 20px; }
  .choice { min-height: 0; }          /* let stacked cards size to content on phones */
  .gamebar { flex-wrap: wrap; gap: 8px; }
}

/* ---- polish/a11y layer (critique pass) ---- */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.chip .lab { font-size: 12px; }                  /* micro-label floor */
.lbtable th { font-size: 12px; }
.pod .meta { font-size: 13px; }

/* in-flight: disable + dim choices while a guess is submitting */
#guessform:has(.htmx-request) .choice, .choice[disabled] { opacity: .55; pointer-events: none; }
#guessform:has(.htmx-request)::after { content: "checking…"; display: block; text-align: center;
  color: var(--muted); font-size: 13px; margin-top: 10px; }

/* error toast (htmx network failures) */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--ember);
  border-radius: 12px; padding: 12px 18px; font-size: 14px; box-shadow: var(--shadow); }

/* reveal: mark the player's own pick */
.vc.picked { position: relative; }
.vc.picked::after { content: "your pick"; position: absolute; bottom: -11px; left: 18px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; border-radius: 999px; padding: 2px 10px; }

/* results: title tier + always-on comparison */
.tier { font-family: var(--font-disp); font-style: italic; font-size: 22px; color: var(--amber-soft); margin-top: 2px; }
.youboard { margin: 8px 0 2px; color: var(--text-dim); font-size: 14px; text-align: center; }

/* mobile: decision first, history below */
@media (max-width: 760px) {
  .stage { display: flex; flex-direction: column; }
  .play { order: -1; }
  .timeline { margin-top: 4px; }
}

/* profile header: the left panel is one user's PROFILE, not a feed */
.profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.profile-head .pav { width: 48px; height: 48px; font-size: 18px; }
.pmeta { min-width: 0; }
.pname { font-weight: 800; font-size: 16px; color: var(--text); line-height: 1.2; }
.phandle { font-size: 13px; color: var(--muted); word-break: break-all; }
.plabel { font-family: var(--font-disp); font-style: italic; font-size: 13px; color: var(--amber-soft); margin-bottom: 1px; }
/* history posts drop the per-post identity chrome — the header carries it */
.bpost.compact.noav .bav, .bpost.compact.noav .bpost-head { display: none; }

/* candidate pick affordance: replaces decorative bsky icons on the two choices */
.choice { flex-wrap: wrap; }
.pickbar { flex-basis: 100%; margin-top: 12px; padding-top: 11px; text-align: center;
  border-top: 1px dashed #2a3a48; color: #5d6e7c; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; transition: color .12s ease, border-color .12s ease; }
.pickbar .pk { font-weight: 400; opacity: .75; }
.choice:hover .pickbar { color: var(--amber-soft); border-top-color: var(--amber); }
@media (hover: none) { .pickbar .pk { display: none; } }   /* no key hints on touch */
.bpost-verdict { white-space: nowrap; }

/* sanity-control decoy: a human post, so neutral slate — not the AI ember */
.vc.decoy { border-color: #5d7a9c; background: #16222e; }
.vc.decoy .bpost-verdict { background: rgba(93,122,156,.25); color: #9fc0e0; }

/* human-baseline rows: slate (control), distinct from the amber model bars */
.basehead { margin: 26px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #9fc0e0; }
.basehead span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.bar.base > span { background: #5d7a9c; }