/* ═══════════════════════════════════════════════════════════════════════════
   THE OPENING — full-screen beats, staged reveals, generous type.
   ═══════════════════════════════════════════════════════════════════════════ */

.stage {
  height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center; align-items: safe center; justify-content: center;
  position: relative; padding: 32px 24px;
}
/* `safe center`: content taller than the viewport scrolls from its top instead
   of centring and losing its head above the fold. The plain `center` before it
   is the fallback for a browser that does not know the keyword. */
.stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../assets/img/title_bg.jpg');
  background-size: cover; background-position: center;
  opacity: 0.26;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 45%, black 15%, transparent 82%);
}
.stage-inner { width: 100%; max-width: 760px; text-align: center; position: relative; }

/* ── Staged text ─────────────────────────────────────────────────────────── */
.tw-line {
  opacity: 0; transform: translateY(9px); filter: blur(5px);
  transition: opacity 1.0s cubic-bezier(.16,1,.3,1), transform 1.0s cubic-bezier(.16,1,.3,1), filter 1.0s;
  margin-bottom: 22px;
}
.tw-line.shown { opacity: 1; transform: none; filter: none; }
.typing::after {
  content: '▍'; margin-left: 1px; color: var(--green);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.reveal.shown { opacity: 1; transform: none; }

/* ── Cold open ───────────────────────────────────────────────────────────── */
.cold {
  font-size: clamp(15px, 2.1vw, 19px); line-height: 1.85; color: var(--ink-2);
  max-width: 640px; margin: 0 auto; text-align: left;
  transition: opacity .7s ease;
}
.cold.fading { opacity: 0; }
.cold .tw-line:first-child {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em;
  color: var(--green); text-transform: uppercase;
}
.skip-hint {
  position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
  animation: fadeIn 2.5s ease backwards; animation-delay: 3s;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.title-block { opacity: 1; transition: opacity .8s ease; }
.title-block.hidden-until { opacity: 0; pointer-events: none; position: absolute; inset: 0; }
.title-block.in { animation: titleIn 1.2s cubic-bezier(.16,1,.3,1); }
@keyframes titleIn { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); } to { opacity: 1; } }
.title-kicker {
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 18px;
}
.title-word {
  font-size: clamp(40px, 7.5vw, 72px); font-weight: 780; letter-spacing: -0.045em; line-height: 0.94;
  background: linear-gradient(112deg, #ffffff 0%, #7ff5cf 26%, #00e5a0 48%, #4dd0e1 68%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title-sub {
  font-size: clamp(14px, 1.7vw, 16px); color: var(--ink-2); line-height: 1.7;
  max-width: 520px; margin: 22px auto 0;
}
.title-sub.dim2 { color: var(--ink-3); margin-top: 14px; }
.title-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.title-legacy {
  display: flex; gap: 20px; justify-content: center; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}
.title-foot { margin-top: 26px; font-size: 10.5px; color: var(--ink-4); line-height: 1.7; }

/* ── Beats ───────────────────────────────────────────────────────────────── */
.beat {
  width: 100%; max-width: 1040px; margin: 0 auto;
  animation: beatIn .55s cubic-bezier(.16,1,.3,1);
}
.beat.leaving { animation: beatOut .24s ease forwards; }
@keyframes beatIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; } }
@keyframes beatOut { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }

.beat-chrome {
  display: flex; align-items: center; gap: 16px; margin-bottom: 46px;
}
.beat-back {
  width: 32px; height: 32px; border-radius: 8px; color: var(--ink-3);
  border: 1px solid var(--line); background: var(--panel); font-size: 14px;
  transition: all .15s;
}
.beat-back:hover { background: var(--panel-2); color: var(--ink); transform: translateX(-2px); }
.beat-dots { display: flex; gap: 7px; flex: 1; }
.beat-dot {
  height: 2px; flex: 1; max-width: 64px; border-radius: 2px;
  background: rgba(255,255,255,0.10); transition: background .4s, box-shadow .4s;
}
.beat-dot.done { background: rgba(0,229,160,0.42); }
.beat-dot.on { background: var(--green); box-shadow: 0 0 12px -2px var(--green); }
.beat-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.beat-body { text-align: left; }
.beat-body.narrow { max-width: 560px; margin: 0 auto; }
.beat-q {
  font-size: clamp(26px, 4.2vw, 42px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.12; min-height: 1.2em; color: var(--ink);
}
.beat-sub { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.6; }
.beat-note { font-size: 12px; color: var(--ink-4); margin-top: 18px; }
.beat-next { margin-top: 30px; }

/* ── Bare-line fields ────────────────────────────────────────────────────── */
.beat-fields { display: flex; flex-direction: column; gap: 30px; margin-top: 42px; }
.line-field { display: block; }
.line-label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); margin-bottom: 8px; font-weight: 650;
}
.line-with-btn { display: flex; align-items: flex-end; gap: 10px; }
.line-input {
  width: 100%; background: none; border: none; outline: none;
  border-bottom: 1px solid var(--line-2); padding: 6px 2px 10px;
  font-size: clamp(20px, 3vw, 27px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.line-input:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.line-input::placeholder { color: var(--ink-4); }
.roll-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; margin-bottom: 4px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-3); font-size: 15px;
  transition: all .15s;
}
.roll-btn:hover { background: var(--panel-2); color: var(--ink); transform: rotate(90deg); }

/* ── Choice cards ────────────────────────────────────────────────────────── */
.choice-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px; margin-top: 38px;
}
.choice-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 18px; border-radius: 14px; position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s, box-shadow .18s, opacity .3s;
}
.choice-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .18s;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cc) 12%, transparent), transparent 62%);
}
.choice-card:hover:not(.locked):not(.dimmed) {
  transform: translateY(-4px); border-color: color-mix(in srgb, var(--cc) 55%, transparent);
  box-shadow: 0 14px 44px -22px var(--cc), inset 0 1px 0 rgba(255,255,255,0.06);
}
.choice-card:hover:not(.locked)::before { opacity: 1; }
.choice-card.locked { opacity: 0.30; cursor: not-allowed; }
.choice-card.dimmed { opacity: 0.16; transform: scale(.985); }
.choice-card.chosen {
  border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 16px 50px -20px var(--cc);
  transform: translateY(-4px) scale(1.015);
}
.choice-card.chosen::before { opacity: 1; }
.cc-icon { font-size: 22px; position: relative; }
.cc-name { font-size: 16px; font-weight: 670; letter-spacing: -0.015em; position: relative; }
.cc-tag { font-size: 12px; color: var(--ink-3); font-style: italic; position: relative; }
.cc-desc { font-size: 12px; color: var(--ink-3); line-height: 1.55; position: relative; margin-top: 2px; }
/* The one mechanic this founder has that the others do not. It is a rule, so
   it prints as one: mono, small caps, in the card's own colour. */
.cc-perk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cc); line-height: 1.5; position: relative; margin-top: 6px; opacity: 0.9;
}
.cc-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; position: relative; }
.cc-stat {
  font-family: var(--mono); font-size: 9.5px; padding: 2px 7px; border-radius: 5px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--line); color: var(--ink-3);
}
.cc-stat.up { color: var(--green); border-color: rgba(0,229,160,0.24); }
.cc-stat.down { color: var(--red); border-color: rgba(255,77,94,0.24); }
.cc-stat.warn { color: var(--amber); border-color: rgba(245,166,35,0.26); }

/* ── Threshold ───────────────────────────────────────────────────────────── */
.threshold-lines {
  font-size: clamp(19px, 2.8vw, 26px); font-weight: 620; letter-spacing: -0.025em;
  line-height: 1.35; color: var(--ink);
}
.threshold-lines .tw-line:last-child { color: var(--ink-3); font-weight: 500; font-size: 0.82em; }
.threshold-card {
  display: flex; flex-direction: column; gap: 12px; margin-top: 34px;
  padding: 20px 22px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,0.035), transparent);
  border: 1px solid var(--line-2);
}
.tc-row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
/* What each choice does to the run, under the row that names it: the same
   chips the beats showed, indented past the icon so they read as its detail. */
.tc-mods { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 32px; margin-top: -6px; }
.tc-mods:empty { display: none; }
.threshold-beat .locked-strip { margin-top: 18px; }
.tc-row b { color: var(--ink); font-weight: 650; }
.tc-icon { width: 20px; text-align: center; font-size: 16px; }

.adv-toggle {
  display: block; margin: 20px 0 0;   /* its own line, whichever blocks follow it */
  font-size: 12px; color: var(--ink-3);
  border-bottom: 1px dashed var(--line-2); padding-bottom: 2px; transition: color .15s;
}
.adv-toggle:hover { color: var(--ink); }
.adv-panel {
  margin-top: 18px; padding: 18px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line);
}
.adv-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); font-weight: 700; margin-bottom: 9px;
}
.adv-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.adv-chip {
  font-size: 11.5px; padding: 6px 11px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  transition: all .15s; white-space: nowrap;
}
.adv-chip:hover:not(.locked) { background: var(--panel-2); border-color: var(--line-2); }
.adv-chip.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--ink); }
.adv-chip.locked { opacity: .35; cursor: not-allowed; }
.adv-mult { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }
.adv-chip.on .adv-mult { color: var(--ac); }
.adv-note { font-size: 10.5px; color: var(--ink-4); margin-top: -8px; }

@media (max-width: 700px) {
  .stage { padding: 20px 14px; }
  .beat-chrome { margin-bottom: 30px; }
  .choice-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .beat-fields { gap: 22px; margin-top: 30px; }
  .cold { font-size: 15px; }
}

/* First run: one open archetype, the rest previewed rather than greyed out. */
.choice-grid.single { grid-template-columns: minmax(0, 1fr); }
.locked-strip { margin-top: 30px; }
.locked-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 700; margin-bottom: 10px;
}
.locked-row { display: flex; flex-wrap: wrap; gap: 7px; }
.locked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 5px 11px; border-radius: 20px;
  background: rgba(255,255,255,0.022); border: 1px dashed var(--line-2);
  color: var(--ink-4); cursor: help; transition: all .15s;
}
.locked-chip:hover { color: var(--ink-3); border-color: rgba(255,255,255,0.2); }
.beat.narrow { max-width: 620px; }

/* ── The curtain ─────────────────────────────────────────────────────────── */
.curtain {
  position: fixed; inset: 0; z-index: 600;
  background: #04050a;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .55s ease;
  padding: 24px;
}
.curtain.in { opacity: 1; }
.curtain.out { opacity: 0; transition: opacity .75s ease; }
.curtain-lines {
  max-width: 520px; text-align: center;
  font-size: clamp(17px, 2.4vw, 22px); line-height: 1.6; color: var(--ink-2);
}
.curtain-lines .tw-line { margin-bottom: 18px; }
.curtain-mono {
  font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--green);
}

/* ── The world, on the title ──────────────────────────────────────────────
   The headline feature, first screen. Reads as an instrument panel rather
   than a marketing card: a violet rail, mono labels, the tools as chips. */
.title-webmcp {
  position: relative; margin: 26px auto 0; max-width: 640px; text-align: left;
  padding: 16px 18px 15px 20px;
  border: 1px solid var(--edge); border-left: 2px solid var(--violet); border-radius: 0;
  background: linear-gradient(180deg, rgba(139,92,246,0.09), rgba(139,92,246,0.03));
}
.title-webmcp::after {
  content: ''; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px;
  border-top: 1px solid var(--edge-hot); border-right: 1px solid var(--edge-hot);
}
.wm-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--violet);
}
.wm-mark { font-size: 12px; }
/* §D6. The plain sentence, above the standard's name. It is the first thing a
   new reader meets in this panel, so it is the largest thing in it — and the
   kicker under it drops to the register of a byline. */
.wm-plain {
  font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 10px;
  font-weight: 520; max-width: 62ch;
}
.wm-lead { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); margin: 10px 0 0; }
.wm-lead.dim { color: var(--ink-3); font-size: 12.5px; margin-top: 8px; }
.wm-lead b { color: var(--ink); font-weight: 600; }
.wm-status {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--etch);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.wm-dot { width: 7px; height: 7px; background: var(--ink-5); flex: 0 0 7px; }
.wm-dot.on { background: var(--green); box-shadow: 0 0 9px var(--green); }
.wm-dot.on + .wm-state { color: var(--green); }
.wm-tier { margin-left: auto; color: var(--ink-4); }
.wm-reason { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-top: 6px; }
.wm-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 12px;
}
.wm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wm-tool {
  font-family: var(--mono); font-size: 11px; color: var(--cyan); padding: 3px 7px;
  border: 1px solid rgba(77,208,225,0.28); background: rgba(77,208,225,0.06); cursor: default;
}
/* The rest of the hand, named in its note rather than given a chip each. */
.wm-tool-more { color: var(--ink-4); border-color: var(--line-2); background: rgba(255,255,255,0.04); }
.wm-laters { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.wm-later b { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.wm-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.wm-say { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.wm-say b { color: var(--green); font-weight: 600; }
@media (max-width: 520px) {
  .title-webmcp { padding: 14px 14px 13px 16px; }
  .wm-tier { display: none; }
}
/* A 900px-tall desktop is the common one, and the panel must not push Begin
   below the fold there. Under this height the panel tightens and the "earned
   by play" line steps aside — the How-it-works dialog still carries it. */
@media (max-height: 960px) {
  .title-sub { margin-top: 14px; }
  .title-sub.dim2 { margin-top: 8px; }
  .title-webmcp { margin-top: 16px; padding: 12px 16px 12px 18px; }
  .wm-plain { font-size: 13px; margin-bottom: 8px; line-height: 1.5; }
  .wm-lead { font-size: 12.5px; margin-top: 7px; line-height: 1.55; }
  .wm-lead.dim { margin-top: 5px; }
  .wm-status { margin-top: 10px; padding-top: 9px; }
  .wm-label { margin-top: 8px; }
  .wm-tools { margin-top: 5px; }
  .wm-laters, .wm-label-later { display: none; }
  .wm-cta { margin-top: 10px; }
  .title-actions { margin-top: 18px; }
  .title-legacy { margin-top: 16px; }
  .title-foot { margin-top: 14px; }
}

/* ── The question at the threshold ────────────────────────────────────────
   Two answers, both real, only in a browser with site tools. The recommended
   one is lit; the other is a plain plate. Square, like everything else. */
.assistant-pick { margin-top: 22px; text-align: left; }
.ap-kicker {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet);
}
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-opt {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--edge); border-radius: 0;
  background: rgba(255,255,255,0.02); color: var(--ink-3); cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
.ap-opt b { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.ap-opt span { font-size: 11.5px; line-height: 1.5; }
.ap-opt span i { color: var(--ink-2); font-style: italic; }
.ap-opt:hover { border-color: var(--line-2, var(--edge)); background: rgba(255,255,255,0.04); color: var(--ink-2); }
.ap-opt.on {
  border-color: var(--violet); background: rgba(139,92,246,0.12); color: var(--ink-2);
  box-shadow: inset 2px 0 0 var(--violet);
}
.ap-opt.on b { color: var(--ink); }
.ap-handoff {
  margin-top: 8px; padding: 11px 13px 10px; border: 1px solid rgba(139,92,246,0.32);
  background: linear-gradient(100deg, rgba(139,92,246,0.11), rgba(77,208,225,0.035));
  box-shadow: inset 2px 0 0 var(--violet);
}
.aph-k {
  margin-bottom: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--violet); font-weight: 700;
}
.aph-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 7px; }
.aph-flow span { font-size: 10.5px; line-height: 1.42; color: var(--ink-3); }
.aph-flow span b {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px;
  border: 1px solid rgba(139,92,246,.45); color: var(--violet); font: 700 8.5px var(--mono);
}
.aph-flow span em { color: var(--ink); font-style: normal; }
.aph-flow > i { color: var(--ink-5); font-size: 10px; }
.aph-note { margin-top: 7px; font-size: 9.75px; line-height: 1.45; color: var(--ink-4); }
@media (max-width: 560px) {
  .ap-row { grid-template-columns: 1fr; }
  .aph-flow { grid-template-columns: 1fr; gap: 5px; }
  .aph-flow > i { display: none; }
}

/* ── Seen it: the panel steps back ──────────────────────────────────────── */
.title-webmcp.brief { padding-top: 12px; padding-bottom: 12px; }
.title-webmcp.brief .wm-status { margin-top: 10px; padding-top: 0; border-top: 0; }
.wm-say.dim { flex-basis: 100%; font-size: 11.5px; color: var(--ink-4); }

/* ── One line to yourself ───────────────────────────────────────────────────
   The only field at the threshold that is not a decision about the run, so it
   is quieter than the two rows under it: the shared `.line-input` rule at its
   smallest size, no label weight, and a hint that says it is optional rather
   than an asterisk that says it is not. Blank is a real answer. */
.self-letter { margin-top: 18px; text-align: left; }
.self-letter-field {
  font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  resize: none; font-family: inherit; padding-top: 4px;
}

/* ── Where the run starts ───────────────────────────────────────────────────
   This is a real product choice, not an unexplained title-screen shortcut.
   Both doors say what the player will actually see on the other side. */
.start-pick { margin-top: 18px; text-align: left; }
.start-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.start-opt {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 12px;
  text-align: left; border: 1px solid var(--edge); border-radius: 0;
  background: rgba(255,255,255,0.02); color: var(--ink-3);
  transition: border-color .16s, background .16s, color .16s;
}
.start-opt b { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.start-opt span { font-size: 10.75px; line-height: 1.45; }
.start-opt span i { color: var(--violet); font-style: normal; white-space: nowrap; }
.start-opt:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); color: var(--ink-2); }
.start-opt.on {
  border-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent);
  color: var(--ink-2); box-shadow: inset 2px 0 0 var(--ac);
}
.start-opt.on b { color: var(--ink); }
@media (max-width: 560px) { .start-row { grid-template-columns: 1fr; } }

/* ── The actual handoff ────────────────────────────────────────────────────
   It follows First Light when the AI world was chosen. This is deliberately a
   proper dialog rather than another toast: the page can publish tools, but a
   player has to originate the chat turn that uses them. */
.assistant-handoff-modal { --kind-color: var(--violet); }
.assistant-handoff { display: flex; flex-direction: column; gap: 16px; }
.ah-hero { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 18px; }
.ah-signal {
  width: 72px; height: 72px; display: grid; place-items: center; position: relative;
  border: 1px solid rgba(139,92,246,.42); background: rgba(139,92,246,.08);
  color: var(--violet); box-shadow: inset 0 0 28px rgba(139,92,246,.10), 0 0 30px rgba(139,92,246,.08);
}
.ah-signal::before, .ah-signal::after {
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(139,92,246,.26);
  animation: ahOrbit 7s linear infinite;
}
.ah-signal::after { inset: 16px; border-color: rgba(77,208,225,.25); animation-direction: reverse; animation-duration: 4.5s; }
.ah-signal span { font-size: 24px; filter: drop-shadow(0 0 9px currentColor); }
@keyframes ahOrbit { to { transform: rotate(360deg); } }
.ah-kicker { font: 700 9.5px var(--mono); letter-spacing: .2em; color: var(--violet); }
.ah-title { margin-top: 5px; font-size: 24px; font-weight: 680; letter-spacing: -.025em; color: var(--ink); }
.ah-copy { margin-top: 7px; max-width: 650px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ah-copy b { color: var(--ink-2); font-weight: 650; }
.ah-copy code { font: 11px var(--mono); color: var(--cyan); }
.ah-instruction {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 18px;
  padding: 14px 16px; border: 1px solid rgba(0,229,160,.34);
  background: linear-gradient(100deg, rgba(0,229,160,.09), rgba(139,92,246,.06));
  box-shadow: inset 3px 0 0 var(--green);
}
.ah-label { grid-column: 1 / -1; font: 700 8.5px var(--mono); letter-spacing: .19em; color: var(--green); }
.ah-instruction strong { font: 600 22px var(--mono); letter-spacing: -.02em; color: var(--ink); }
.ah-hint { align-self: center; font-size: 10.5px; color: var(--ink-4); }
.ah-route {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px;
}
.ah-route > span {
  min-width: 0; padding: 10px 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.018); color: var(--ink-3); font-size: 10.5px; line-height: 1.4;
}
.ah-route > span b {
  float: left; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 8px 3px 0;
  border: 1px solid rgba(139,92,246,.4); color: var(--violet); font: 700 9px var(--mono);
}
.ah-route small { display: block; margin-bottom: 2px; font: 700 8px var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.ah-route > i { align-self: center; color: var(--ink-5); font-size: 10px; }
.ah-route .done { border-color: rgba(0,229,160,.25); color: var(--ink-2); }
.ah-route .done b { border-color: rgba(0,229,160,.35); color: var(--green); }
.ah-route .live { border-color: rgba(77,208,225,.35); background: rgba(77,208,225,.055); color: var(--ink-2); }
.ah-route .live b { border-color: rgba(77,208,225,.4); color: var(--cyan); }
.ah-live {
  display: flex; align-items: center; gap: 8px; min-height: 20px;
  font: 650 8.5px var(--mono); letter-spacing: .14em; color: var(--ink-4);
}
.ah-live i { width: 6px; height: 6px; flex: 0 0 6px; background: var(--violet); box-shadow: 0 0 8px var(--violet); animation: ahPulse 1.3s ease-in-out infinite; }
.ah-live.on { color: var(--green); }
.ah-live.on i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.ah-live.off i { background: var(--ink-4); box-shadow: none; animation: none; }
@keyframes ahPulse { 50% { opacity: .28; transform: scale(.72); } }
.assistant-handoff.connected .ah-signal { border-color: rgba(0,229,160,.5); color: var(--green); background: rgba(0,229,160,.08); }
.assistant-handoff.connected .ah-kicker { color: var(--green); }
.assistant-handoff.unavailable .ah-signal { color: var(--ink-4); border-color: var(--line-2); background: rgba(255,255,255,.025); box-shadow: none; }
.assistant-handoff.unavailable .ah-kicker { color: var(--ink-4); }
.ah-reason { padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 11px; line-height: 1.5; color: var(--ink-3); }
html.reduced-motion .ah-signal::before, html.reduced-motion .ah-signal::after, html.reduced-motion .ah-live i { animation: none; }
@media (max-width: 620px) {
  .ah-hero { grid-template-columns: 48px 1fr; gap: 12px; }
  .ah-signal { width: 48px; height: 48px; }
  .ah-signal::after { display: none; }
  .ah-title { font-size: 19px; }
  .ah-copy { font-size: 12px; }
  .ah-instruction { grid-template-columns: 1fr; }
  .ah-instruction strong { font-size: 18px; }
  .ah-hint { display: none; }
  .ah-route { grid-template-columns: 1fr; gap: 5px; }
  .ah-route > i { display: none; }
  .ah-route > span { padding: 8px 10px; }
}
@media (max-height: 620px) {
  .assistant-handoff { gap: 10px; }
  .ah-signal { width: 52px; height: 52px; }
  .ah-hero { grid-template-columns: 54px 1fr; gap: 12px; }
  .ah-title { font-size: 20px; }
  .ah-copy { margin-top: 4px; line-height: 1.45; }
  .ah-instruction { padding: 10px 12px; }
  .ah-route > span { padding: 7px 9px; }
}

/* The threshold has four real decisions on it. At the in-app browser's common
   720px height, keep the primary action on the first glass without shrinking
   any of the earlier, simpler beats. */
@media (max-height: 760px) {
  .threshold-beat .beat-chrome { margin-bottom: 18px; }
  .threshold-beat .threshold-lines { font-size: 20px; line-height: 1.22; }
  .threshold-beat .threshold-lines .tw-line { margin-bottom: 9px; }
  .threshold-beat .threshold-card { margin-top: 15px; padding: 11px 14px; gap: 7px; }
  .threshold-beat .tc-row { font-size: 12.5px; gap: 8px; }
  .threshold-beat .tc-icon { font-size: 13px; }
  .threshold-beat .assistant-pick { margin-top: 12px; }
  .threshold-beat .ap-kicker { margin-bottom: 5px; }
  .threshold-beat .ap-opt { padding: 8px 11px; gap: 3px; }
  .threshold-beat .ap-opt b { font-size: 12.25px; }
  .threshold-beat .ap-opt span { font-size: 10.25px; line-height: 1.35; }
  .threshold-beat .ap-handoff { padding: 8px 10px 7px; }
  .threshold-beat .aph-k { margin-bottom: 5px; }
  .threshold-beat .aph-flow span { font-size: 9.5px; line-height: 1.3; }
  .threshold-beat .aph-note { margin-top: 5px; font-size: 8.75px; }
  .threshold-beat .start-pick { margin-top: 10px; }
  .threshold-beat .adv-label { margin-bottom: 5px; }
  .threshold-beat .start-opt { padding: 7px 10px; gap: 3px; }
  .threshold-beat .start-opt b { font-size: 11.5px; }
  .threshold-beat .start-opt span { font-size: 9.75px; line-height: 1.32; }
  .threshold-beat .beat-next { margin-top: 12px; }
  .threshold-beat .beat-note { margin-top: 7px; font-size: 10.5px; }
}

/* ── The stage overflows ─────────────────────────────────────────────────────
   Eight choice cards do not fit a 900px laptop. `stageCue()` in
   src/ui/intro.js pins this to the bottom of #app — *outside* the scroller, or
   it would scroll away with the content it is describing — and toggles `.on`
   only when something is below, `.at-end` once you have reached it.

   The veil is `pointer-events: none` and the glyph alone takes the click: a
   108px band of dead pixels over the last row of cards is the same bug in a
   nicer coat. Both beats and the title screen use it. */
.stage-cue {
  position: absolute; left: 0; right: 0; bottom: 0; height: 112px;
  z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  background: linear-gradient(to top, rgb(5 6 10 / .94) 0%, rgb(5 6 10 / .82) 34%, rgb(5 6 10 / 0) 100%);
  opacity: 0; transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.stage-cue.on { opacity: 1; }
.stage-cue.on.at-end { opacity: 0; }
.stage-cue-btn {
  pointer-events: auto; cursor: pointer; background: none; border: 0;
  padding: 6px 22px; line-height: 1; font-size: 17px;
  color: var(--ink-3); text-shadow: 0 0 14px rgb(0 229 160 / .18); opacity: .8;
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}
/* Three bobs, then it holds still. The dock's attention rule, for the same
   reason: a cue that keeps waving is a cue people stop reading — and a control
   that never settles is one no automated hand can ever click. The animation is
   scoped to `.on`, so it re-arms by itself every time a new beat needs it. */
.stage-cue.on .stage-cue-btn { animation: cueBob 1.9s cubic-bezier(.4,0,.6,1) 3 both; }
.stage-cue-btn:hover { color: var(--green); text-shadow: 0 0 16px rgb(0 229 160 / .5); opacity: 1; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .72; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-cue.on .stage-cue-btn { animation: none; opacity: .9; }
  .stage-cue { transition: none; }
}