/* Bot Bot Goose — ported verbatim from the prototype's dark-pond palette.
   Tuned for mobile-first; the .app container caps width at 520px so desktop
   reads like a focused single column rather than a stretched page. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --pond:#14232b;
  --pond-deep:#0e1a20;
  --surface:#1d3540;
  --surface-2:#244553;
  --ink:#f4efe3;
  --muted:#8fa6ae;
  --honk:#f4a23b;
  --reed:#6fb36a;
  --miss:#e0604f;
  --line:rgba(244,239,227,.10);
  --display:'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* overflow-x: hidden on the root + body prevents any element (typically
   the modal overlay or an aggressively-styled form) from causing the page
   to scroll horizontally on iOS Safari when the keyboard opens.

   background on html (not just body) covers the iOS Safari overscroll
   bounce region and the area painted around the home-indicator / status
   bar safe areas. Without it those zones show the browser default
   (effectively white) and frame the page in unwanted light bands. */
html,body{height:100%;overflow-x:hidden;}
html{background:var(--pond-deep);}
body{
  font-family:var(--body);
  background:
    radial-gradient(120% 80% at 50% -10%, #1c3340 0%, var(--pond) 45%, var(--pond-deep) 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100%;
  display:flex;
  justify-content:center;
}

.app{
  width:100%;
  max-width:520px;
  /* Bottom padding gives the footer breathing room above the home indicator
     AND above Safari's transient bottom toolbar. 40px wasn't enough — the
     tagline read as crammed against the chrome on iPhone. 64px feels
     intentional. env() adds the home-indicator zone on top. */
  padding:18px 18px calc(64px + env(safe-area-inset-bottom));
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;}
.brand .mark{font-size:26px;line-height:1;transform:translateY(-1px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.brand h1{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;}
.brand h1 span{color:var(--honk);}
.meta{display:flex;align-items:center;gap:14px;}
.puzzle-no{font-family:var(--mono);font-size:12px;color:var(--muted);}
.streak{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--honk);}
.streak[hidden]{display:none;}

/* Nav links in the header-meta slot. Visually matches .puzzle-no, but the
   semantic intent is "back / sideways link", not "this is the puzzle number". */
.nav-link{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;}
.nav-link:hover{color:var(--ink);}

.progress{display:flex;gap:10px;justify-content:center;padding:20px 0 6px;}
.feather{width:44px;height:8px;border-radius:99px;background:var(--line);transition:background .35s ease;}
.feather.green{background:var(--reed);}
.feather.yellow{background:var(--honk);}
.feather.red{background:var(--miss);}
.feather.active{box-shadow:0 0 0 2px rgba(244,162,59,.25);}

.stage{flex:1;display:flex;flex-direction:column;justify-content:center;}

.round-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px;}
.round-label .hunt{color:var(--honk);font-weight:700;}
.prompt{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.22;letter-spacing:-.02em;text-align:center;margin-bottom:18px;}

.answers{display:flex;flex-direction:column;gap:14px;}
.answer{
  text-align:left;width:100%;
  background:var(--surface);
  border:1.5px solid var(--line);
  color:var(--ink);
  border-radius:14px;
  padding:15px 16px;
  min-height:56px;
  font-size:15px;line-height:1.4;
  font-family:var(--body);
  cursor:pointer;
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
  position:relative;
}
.answer:hover:not(:disabled){background:var(--surface-2);border-color:rgba(244,239,227,.22);}
.answer:active:not(:disabled){transform:scale(.99);}
.answer:disabled{cursor:default;}
.answer.dimmed{opacity:.4;}
.answer.removed{opacity:.25;text-decoration:line-through;text-decoration-color:var(--muted);}

.answer.goose{border-color:var(--honk);background:linear-gradient(180deg, rgba(244,162,59,.16), rgba(244,162,59,.05));}
.answer.you-right{border-color:var(--reed);background:rgba(111,179,106,.12);}
.answer.you-wrong{border-color:var(--miss);background:rgba(224,96,79,.12);}

/* Post-reveal "felt most human?" vote affordance. The 3 human cards become
   tappable again; the chosen one picks up a subtle ink border + tint. The
   bot card never gets .votable, so the visual hierarchy stays: GOOSE first,
   YOU-RIGHT/YOU-WRONG second, vote third. */
.answer.votable{cursor:pointer;}
.answer.votable:hover{border-color:rgba(244,162,59,.32);background:var(--surface-2);}
.answer.voted{border-color:var(--honk);background:rgba(244,162,59,.10);}
/* Vote prompt is the second beat of the round: the player just learned the
   bot, now they get to weigh in on who read most human. It needs to read as
   a fresh ask, not a footnote. Display type, honk accent, top rule to mark
   the phase change. */
.vote-hint{
  font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;
  color:var(--ink);text-align:center;
  padding:14px 8px 10px;margin-top:6px;
  border-top:1px solid var(--line);
  position:relative;
  animation:voteHintFade .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vote-hint::before{
  content:"▲ now you pick";
  display:block;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--honk);
  margin-bottom:6px;
}
@keyframes voteHintFade{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .vote-hint{animation:none;}
}

.tag{
  position:absolute;top:-9px;right:12px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
}
.tag.goose{background:var(--honk);color:#241400;}
.tag.right{background:var(--reed);color:#0c1b0b;}
.tag.wrong{background:var(--miss);color:#2a0c08;}
.tag.human{background:var(--ink);color:#241400;}

.honk-pop{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--honk);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:honk .5s cubic-bezier(.2,1.4,.4,1) both;
  pointer-events:none;
}
@keyframes honk{
  0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.6) rotate(-6deg);}
  60%{opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.15) rotate(3deg);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0);}
}

.controls{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.btn{
  font-family:var(--display);font-weight:700;font-size:16px;
  border:none;border-radius:13px;padding:14px;cursor:pointer;
  transition:transform .12s ease, filter .2s ease;letter-spacing:-.01em;
  min-height:52px;
}
.btn:active{transform:scale(.985);}
.btn-primary{background:var(--honk);color:#241400;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:.45;cursor:default;filter:none;}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);font-family:var(--body);font-weight:600;font-size:14px;padding:13px;min-height:48px;}
.btn-ghost:hover{border-color:rgba(244,239,227,.3);}
.btn-ghost:disabled{opacity:.35;cursor:default;}

.result{text-align:center;animation:fade .4s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* .big-goose is the climactic emoji on /result only — the verdict moment
   earns its size. Other pages use .page-mark (smaller) to avoid the
   "giant emoji on every page" tic. */
.result .big-goose{font-size:54px;margin-bottom:4px;}
.page-mark{font-size:26px;line-height:1;margin-bottom:6px;opacity:.85;}
.result h2{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;margin-bottom:4px;}
.result h2 .strike{color:var(--muted);text-decoration-thickness:2px;font-weight:600;}
/* Base .verdict treatment — a muted subtitle. Used on the result page,
   /me, /leaderboard/*, and /d/<short>. .me-header-tight overrides size. */
.verdict{color:var(--muted);font-size:14px;line-height:1.45;margin-bottom:20px;}

.scorecard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;}
/* Result-page vertical rhythm: 22px between top-level sections
   (scorecard → controls → signin → decoy), 10px intra-group inside
   .controls. Matches the DESIGN.md "22px between sections" rule and
   keeps the page from drifting back to ad-hoc per-element margins. */
.result > .controls,
.result > .signin-cta,
.result > .decoy{margin-top:22px;}
.grid-rows{font-family:var(--mono);font-size:26px;letter-spacing:6px;line-height:1.5;}
.botdar{display:flex;justify-content:center;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.stat .n{font-family:var(--display);font-weight:800;font-size:22px;}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.stat .n.honk{color:var(--honk);}

.decoy{background:transparent;border:1px solid var(--line);border-top:2px solid var(--honk);border-radius:16px;padding:18px;margin-top:6px;text-align:left;}
.decoy h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px;}
.decoy-target{font-family:var(--body);font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:14px;text-transform:none;letter-spacing:normal;}
.decoy-target .nextprompt{color:var(--ink);font-style:italic;font-weight:500;}
.decoy-body{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
/* font-size:16px is the iOS-Safari threshold below which the browser
   auto-zooms into the input on focus — that zoom shoves the layout
   sideways and produces the horizontal-scroll bug the user hit on
   iPhone 15. 16px is the minimum where iOS leaves the page alone. */
textarea{width:100%;background:var(--pond-deep);border:1.5px solid var(--line);border-radius:11px;color:var(--ink);font-family:var(--body);font-size:16px;padding:11px;resize:vertical;min-height:66px;margin-bottom:10px;}
textarea:focus{outline:none;border-color:var(--honk);}
textarea#decoyText{min-height:88px;}
.decoy-hint{display:block;color:var(--muted);font-family:var(--mono);font-size:11px;margin-top:10px;}
.ok{color:var(--reed);font-size:13px;font-weight:600;}

footer{margin-top:22px;padding:14px 0 4px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;}
footer small{color:var(--muted);font-family:var(--mono);font-size:11px;}
.footer-link{color:var(--muted);font-family:var(--mono);font-size:11px;text-decoration:none;letter-spacing:.04em;}
.footer-link:hover{color:var(--ink);}

/* The toast chip is self-dismissing via a CSS animation that owns its
   full lifecycle: fade-in, hold, fade-out. JS adds the `.show` class to
   trigger the animation; it does NOT need to remove the class to make
   the chip disappear. `animation-fill-mode: forwards` parks the toast
   on its final invisible frame even if JS never gets a chance to clean
   up. This is the third take at the "welcome back chip won't dismiss"
   bug — moving the dismissal off the JS timer fixes it for good. */
.toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--pond-deep);font-weight:600;font-size:13px;
  padding:10px 18px;border-radius:99px;
  opacity:0;pointer-events:none;font-family:var(--body);
}
.toast.show{
  animation:toastShow 2500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes toastShow{
  0%   {opacity:0;transform:translateX(-50%) translateY(20px);}
  12%  {opacity:1;transform:translateX(-50%) translateY(0);}
  88%  {opacity:1;transform:translateX(-50%) translateY(0);}
  100% {opacity:0;transform:translateX(-50%) translateY(20px);}
}
/* Reduced-motion fallback: the global `*{animation:none}` rule below
   would otherwise leave the toast permanently invisible. Snap it to
   shown so the JS cleanup-timeout still dismisses it (instantly, no fade). */
@media (prefers-reduced-motion: reduce){
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
}

/* ---------- /me + leaderboards ---------- */
.me-stage{align-items:stretch;}
.me-header{text-align:center;margin:18px 0 24px;}
.me-header-tight{margin:14px 0 14px;}
.me-header-tight .page-mark{font-size:32px;margin-bottom:6px;}
.me-header-tight .verdict{font-size:13px;}
.scorecard .kicker{display:block;text-align:center;margin:0 0 12px;}
.me-header h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;}
.section-h{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:22px 0 8px;}

/* /me standings — one card per leaderboard (spotter, forger). The card
   IS the link to the full leaderboard, so the whole rectangle is
   tappable. Reuses the editorial honk-stripe-on-top pattern from .payoff
   and .decoy; .standing-pending demotes the stripe to a dim line when
   the user hasn't crossed the eligibility gate. */
.standing-card{
  display:block;text-decoration:none;
  background:transparent;
  border:1px solid var(--line);border-top:2px solid var(--honk);
  border-radius:14px;padding:14px 16px;
  margin-bottom:10px;
  transition:border-color .2s ease, background .2s ease;
}
.standing-card:hover{background:rgba(244,162,59,.04);border-color:rgba(244,162,59,.32);}
.standing-card.standing-pending{border-top-color:var(--line);}
.standing-card.standing-pending:hover{background:rgba(244,239,227,.03);border-color:rgba(244,239,227,.22);}
.standing-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.standing-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);line-height:1.3;}
.standing-label b{color:var(--ink);font-weight:700;}
.standing-stat{font-family:var(--display);font-weight:800;font-size:24px;color:var(--honk);letter-spacing:-.02em;line-height:1;}
.standing-card.standing-pending .standing-stat{color:var(--muted);}
.standing-note{font-size:13px;color:var(--muted);line-height:1.4;margin-top:6px;}

.payoff{
  background:transparent;
  border:1px solid var(--line);border-top:2px solid var(--honk);
  border-radius:16px;padding:18px;margin-top:6px;
}
.payoff-headline{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.35;}
.payoff-stats{display:flex;gap:18px;justify-content:flex-start;margin:14px 0 12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.payoff-stats > div{display:flex;flex-direction:column;align-items:flex-start;}
.payoff-stats .n{font-family:var(--display);font-weight:800;font-size:22px;color:var(--honk);}
.payoff-stats .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.payoff-tier{font-size:13px;color:var(--ink);}
.payoff-tier b{color:var(--honk);}
.payoff-links{display:flex;gap:14px;margin-top:10px;}
.payoff-links a{color:var(--honk);text-decoration:none;font-size:12px;font-family:var(--mono);}
.payoff-links a:hover{text-decoration:underline;}

/* ---- result-page secondary actions (side-by-side ghost buttons) ---- */
.result-secondary{display:flex;gap:10px;}
.btn-half{
  flex:1;text-align:center;text-decoration:none;display:block;
}

/* ---- /prelaunch (Phase-0 collection deck) ----
   Layout: fixed 3-column × 7-row grid of face-down cards (21 total) on
   every viewport — phones and desktops alike. The narrow column matches
   the rest of the app's 520px max-width feel, and a constant column
   count means the rendered grid looks the same on a poster screenshot
   regardless of device. Tapping a card opens a centered overlay above
   the grid; the grid doesn't reflow. */
.prelaunch-stage{align-items:stretch;}
.prelaunch-lede,
.prelaunch-done{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 18px;margin-top:14px;
}
.prelaunch-sub{font-size:14px;line-height:1.45;color:var(--ink);margin:10px 0 6px;}
.prelaunch-counter{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  margin:14px 0 0;
}
.prelaunch-counter #counter{color:var(--honk);font-weight:700;}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;margin-top:18px;
  counter-reset:prelaunchCard;
}

/* Each card. counter-increment paints "01", "02"… into .card-num via CSS. */
.prelaunch-stage .card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:0;
  counter-increment:prelaunchCard;
  transition:opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
             transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             background 200ms ease;
}
.prelaunch-stage .card:hover{background:var(--surface-2);}

.card-face{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;aspect-ratio:3/4;
  background:transparent;border:none;color:var(--ink);cursor:pointer;
  padding:10px;font-family:var(--display);
}
.card-mark{font-size:24px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));}
/* The face-down state is intentionally identical across cards. Numbering
   was distracting noise — the user picks by mood, not by ordinal. The
   element stays in the DOM so the planted "card-answer" can replace its
   sibling cleanly without layout shift. */
.card-num{display:none;}

/* "Active" — the source card while the overlay is open. Subtle honk
   accent on the still-face-down card so the user knows which one
   they're working on. The grid is otherwise untouched. */
.prelaunch-stage .card.active{
  border-color:rgba(244,162,59,.30);
  background:rgba(244,162,59,.04);
}

/* The centered overlay that floats on top of the grid. The grid does
   NOT reflow — the card the user picked stays in its slot below, lit
   by .active above. Tapping the scrim, the × button, or pressing
   Escape closes. */
.card-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.card-overlay[hidden]{display:none;}
.overlay-scrim{
  position:absolute;inset:0;
  background:rgba(14,26,32,.78);
}
.overlay-card{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 18px;
  width:100%;max-width:460px;max-height:84vh;overflow:auto;
  animation:overlayIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes overlayIn{
  from{opacity:0;transform:scale(.96) translateY(10px);}
  to{opacity:1;transform:none;}
}
.card-close{
  position:absolute;top:10px;right:12px;
  background:transparent;border:none;color:var(--muted);
  font-family:var(--display);font-size:24px;line-height:1;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
}
.card-close:hover{color:var(--ink);background:rgba(255,255,255,.06);}
.card-prompt{
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);margin:4px 0 14px;
  padding-right:36px;
}
.overlay-card textarea{
  background:var(--pond-deep);border:1.5px solid var(--line);border-radius:11px;
  color:var(--ink);font-family:var(--body);font-size:16px;padding:11px;
  width:100%;min-height:84px;resize:vertical;margin-bottom:10px;
}
.overlay-card textarea:focus{outline:none;border-color:var(--honk);}
.card-actions{display:flex;gap:10px;align-items:center;}
.card-actions .btn{flex:1;}
.overlay-card .hint{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;}
.overlay-card .hint.warn{color:var(--miss);}

@media (prefers-reduced-motion: reduce){
  .overlay-card{animation:none;}
}

/* First-visit "How to play" modal. Reveal/dismiss is driven by play.js
   (localStorage key bbg_seen_intro_v1). Scrim fades, card eases in
   from a small offset. Reuses the editorial honk-stripe-on-top so the
   surface reads as part of the system, not a foreign popup. */
.intro-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.intro-overlay[hidden]{display:none;}
.intro-scrim{
  position:absolute;inset:0;
  background:rgba(14,26,32,.78);
  animation:introFade 240ms ease-out both;
}
.intro-card{
  position:relative;z-index:1;
  background:var(--surface);
  border:1px solid var(--line);border-top:2px solid var(--honk);
  border-radius:16px;
  padding:24px 22px 20px;
  width:100%;max-width:440px;
  text-align:left;
  animation:introIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.intro-mark{font-size:34px;line-height:1;text-align:center;margin-bottom:10px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));}
.intro-title{
  font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--ink);text-align:center;margin-bottom:14px;
}
.intro-body{
  font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink);
  margin-bottom:10px;
}
.intro-aside{
  font-family:var(--body);font-size:13px;line-height:1.5;color:var(--muted);
  margin-top:6px;
}
.intro-card .controls{margin-top:18px;}
@keyframes introFade{from{opacity:0;}to{opacity:1;}}
@keyframes introIn{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .intro-scrim,.intro-card{animation:none;}
}

/* Planted: the persistent post-submit state. The card stays in its grid
   position (no reflow), keeps its size, and displays the user's own
   answer as the editorial content of the card. The brand's display
   family (Bricolage) and tightened letter-spacing match how prompts +
   headlines are set elsewhere — the user's words get the same
   typographic respect, not body-input echo.

   Reed-tinted border marks the card done; the existence of writing
   where the feather used to be is itself the "filled in" signal. */
.prelaunch-stage .card.planted{
  background:rgba(111,179,106,.05);
  border-color:rgba(111,179,106,.30);
  cursor:default;
}
.prelaunch-stage .card.planted:hover{background:rgba(111,179,106,.05);}
.prelaunch-stage .card.planted .card-face{
  /* Anchor the writing top-left like real text in a column, not centered
     like the face-down feather. Generous padding so short answers still
     have room to breathe. */
  justify-content:flex-start;align-items:stretch;
  padding:14px;cursor:default;
}
.card-answer{
  font-family:var(--display);font-weight:500;font-size:14px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);text-align:left;
  /* Truncate long answers with an ellipsis at the line clamp so the card
     keeps the deck's grid uniformity (aspect-ratio:3/4). Four lines is
     the sweet spot at 14px/500 inside a ~110px-wide cell — short
     answers fit whole; long ones get a clear "more here" cue. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
  -webkit-hyphens:auto;hyphens:auto;
}

@media (prefers-reduced-motion: reduce){
  .prelaunch-stage .card{transition:none;}
}

/* ---- result-page sign-in nudge ---- */
.signin-cta{
  background:rgba(244,162,59,.08);border:1px solid rgba(244,162,59,.20);
  border-radius:12px;padding:11px 14px;margin-top:14px;
  font-size:13px;line-height:1.45;color:var(--ink);
}
.signin-cta a{color:var(--honk);text-decoration:none;font-weight:600;margin-left:6px;}
.signin-cta a:hover{text-decoration:underline;}

/* ---- /me account section ---- */
.account{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:14px 0 4px;
}
.account.signin{}
.account-row{display:flex;flex-direction:column;gap:14px;}
.account-row.signin{gap:8px;}
.account-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;display:block;
}
.account-value{font-family:var(--body);font-size:14px;color:var(--ink);}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.inline-form[hidden]{display:none;}
.inline-form input[type=text],.inline-form input[type=email]{
  background:var(--pond-deep);border:1.5px solid var(--line);border-radius:10px;
  /* 16px to dodge iOS Safari's auto-zoom on focus (see textarea above). */
  color:var(--ink);font-family:var(--body);font-size:16px;padding:8px 11px;
  flex:1;min-width:160px;
}
.inline-form input:focus{outline:none;border-color:var(--honk);}
.btn-tiny{
  background:var(--honk);color:#241400;border:none;border-radius:10px;padding:8px 14px;
  font-family:var(--display);font-weight:700;font-size:13px;cursor:pointer;
}
.btn-tiny:hover{filter:brightness(1.06);}
.btn-tiny:disabled{opacity:.5;cursor:default;}
.muted.warn{color:var(--miss);}

/* Handle display row — the "@yourhandle  edit" version shown when the user
   has already picked one. Switches to the inline-form on edit. */
.handle-display{display:flex;align-items:baseline;gap:14px;padding:4px 0;}
.handle-display .handle-value{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);}
.handle-display[hidden]{display:none;}

.account-logout{margin-top:6px;font-size:12px;}
.btn-link{
  background:transparent;border:none;padding:0;
  color:var(--muted);font-family:var(--mono);font-size:12px;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);
}
.btn-link:hover{color:var(--ink);text-decoration-color:var(--ink);}
.btn-link.danger:hover{color:var(--miss);text-decoration-color:var(--miss);}

.decoy-list{display:flex;flex-direction:column;gap:10px;}
.decoy-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.decoy-prompt{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.decoy-text{font-size:14px;line-height:1.4;margin-bottom:8px;color:var(--ink);}
.decoy-stats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;}
.decoy-stats .muted{color:var(--muted);}
.decoy-actions{display:flex;justify-content:flex-end;margin-top:8px;}
.btn-share{
  background:transparent;border:1px solid var(--line);color:var(--honk);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:7px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.btn-share:hover{border-color:var(--honk);background:rgba(244,162,59,.08);}
.btn-share:active{transform:scale(.985);}

.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.pill.pending{background:rgba(244,162,59,.18);color:var(--honk);}
.pill.live{background:rgba(111,179,106,.18);color:var(--reed);}
.pill.rejected{background:rgba(224,96,79,.18);color:var(--miss);}
.pill.retired{background:rgba(143,166,174,.18);color:var(--muted);}

.lb-list{display:flex;flex-direction:column;gap:6px;}
.lb-row{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;}
a.lb-row{text-decoration:none;color:var(--ink);transition:border-color .2s ease, background .2s ease;}
a.lb-row:hover{border-color:rgba(244,162,59,.32);background:var(--surface-2);}
.lb-row.lb-teaser{background:transparent;border-style:dashed;}
.section-h .see-more{color:var(--honk);text-decoration:none;}
.section-h .see-more:hover{text-decoration:underline;text-decoration-color:rgba(244,162,59,.5);}
.lb-rank{font-family:var(--display);font-weight:800;font-size:20px;color:var(--honk);}
.lb-handle{font-family:var(--display);font-weight:700;font-size:15px;}
.lb-sub{font-size:11px;font-family:var(--mono);}
.lb-stat{display:flex;flex-direction:column;align-items:flex-end;}
.lb-stat .n{font-family:var(--display);font-weight:800;font-size:18px;}
.lb-stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

.decoy-report{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
}

/* Editorial header inside the report panel. The page also has a top-level
   feather/Decoy Report block; on /d/<short> we drop that in favor of this
   inline kicker so the prompt can be the H1 of the panel itself. */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--honk);
  display:block;margin-bottom:10px;
}

/* The prompt as headline — sentence-case Bricolage, not the mono uppercase
   micro-label used inside the /me decoy list. Same string, different
   register: list-row metadata vs poster headline. */
.prompt-headline{
  font-family:var(--display);font-weight:700;font-size:23px;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);
  margin:0 0 14px;
}

/* The answer itself — the artifact the reader is being asked to judge.
   It's the human's submission, not a citation we're quoting, so it gets
   typographic weight from size + family rather than decorative quote
   marks. (Wrapping it in "❝ ❞" also collided with users whose own answers
   contain their own punctuation, e.g. "people saying 'slow up'".) */
.decoy-answer{
  font-family:var(--display);font-weight:700;font-size:20px;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);
  margin:14px 0 6px;
}

.decoy-byline{color:var(--muted);font-size:13px;margin-top:6px;}
.decoy-byline b{color:var(--honk);font-weight:700;}

.empty{padding:20px;text-align:center;}
.muted{color:var(--muted);}

a.puzzle-no{text-decoration:none;}
a.puzzle-no:hover{color:var(--ink);}

/* ---- /privacy ---- */
.privacy{display:block;}
.privacy-header{margin:22px 0 28px;}
/* Pull the "Updated 2026-XX-XX" line tight under the H1 so it reads as
   the subtitle of the heading, not as a separate paragraph. The default
   .prompt-headline carries margin-bottom:14px which here would feel
   like a paragraph break. */
.privacy-header .prompt-headline{margin-bottom:2px;}
.privacy-updated{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  margin-top:0;
}
.privacy-section{margin:0 0 26px;}
.privacy-section h3{
  font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;
}
.privacy-section p{
  font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink);
  margin:0 0 10px;
}
.privacy-section p.muted{color:var(--muted);font-size:13px;}
.privacy-section ul{
  list-style:none;padding:0;margin:6px 0 12px;
}
.privacy-section li{
  font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink);
  padding:4px 0 4px 14px;position:relative;
}
.privacy-section li::before{
  content:"·";color:var(--honk);position:absolute;left:0;top:2px;
  font-weight:700;font-size:16px;
}
.privacy-section li b{font-weight:600;}
.privacy-section code{
  font-family:var(--mono);font-size:13px;color:var(--honk);
  background:rgba(244,162,59,.06);padding:1px 5px;border-radius:4px;
}
.privacy-section a.link{color:var(--honk);text-decoration:none;}
.privacy-section a.link:hover{text-decoration:underline;}

/* Account-ID copy row: keep the UUID and the copy button aligned on
   the baseline, with a little breathing room between them. The button
   reuses the existing .btn-share mono uppercase pill. */
.privacy-section .copy-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.privacy-section .copy-row code{
  word-break:break-all;
}

.privacy-table{margin:8px 0 12px;border-top:1px solid var(--line);}
.privacy-table-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.privacy-table-row .label{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.06em;
}
.privacy-table-row .value{
  font-family:var(--body);font-size:13px;color:var(--ink);text-align:right;
}

/* ---- /  in BBG_PRELAUNCH_MODE (coming-soon poster) -----------------------
   The placeholder shown at "/" and at any URL that isn't /prelaunch,
   /privacy, /healthz, or /static during the pre-launch campaign. Anyone
   who pokes around after seeing the campaign link should still feel
   they're on a finished site, just one that hasn't opened the doors yet.
   Layout is a vertically-centered single column with the brand kicker,
   a two-line display headline, a one-sentence pitch, the primary CTA
   that points back at /prelaunch, and a quiet "we launch when the deck
   is full" coda. The fade-in on the headline plays once on load. */
.coming-soon{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:60vh;
}
.coming-soon-lede{
  text-align:center;
  padding:32px 8px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:440px; margin:0 auto;
  animation:comingSoonFade .6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.coming-soon-headline{
  font-size:32px; line-height:1.1; letter-spacing:-.03em;
  margin:6px 0 4px;
}
.coming-soon-headline .honk{color:var(--honk);}
.coming-soon-sub{
  font-family:var(--body); font-size:15px; line-height:1.5; color:var(--ink);
  max-width:340px; margin:0;
}
.coming-soon-cta{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  margin-top:10px;
  padding:14px 28px;
}
.coming-soon-meta{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin:18px 0 0;
}
@keyframes comingSoonFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}