/* pCRL mobile vision story - Bone & Signal */
:root {
  --font-display: "Syne", Georgia, serif;
  --font-ui: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg-deep: #e2ded2;
  --paper: #f3f0e7;
  --paper-2: #ece8dc;
  --surface: #faf8f1;
  --surface-2: #ffffff;
  --line: #cfcabb;
  --line-strong: #1a1a18;
  --ink: #050505;
  --ink-dim: #545350;
  --ink-mute: #8c8a83;
  --signal: #ff2d10;
  --signal-soft: #ffe7e1;
  --plume: rgba(255, 45, 16, 0.14);
  --col: 100%;
  --readable: min(100%, 560px);
  --pager-bottom-pad: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.pager-active,
body.pager-active,
html.operator-gate-active,
body.operator-gate-active,
html.twin-hold-active,
body.twin-hold-active {
  height: 100%;
  overflow: hidden;
}

.mobile-story {
  position: relative;
  width: var(--col);
  min-height: 100svh;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.fixed-col {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--col);
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.sim-layer {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(207, 202, 187, 0.18), rgba(207, 202, 187, 0) 28%),
    var(--paper);
  transform: translateX(-50%) translateY(var(--twin-rise, 100svh));
  transition:
    height 650ms cubic-bezier(.4, .1, .2, 1),
    transform 520ms cubic-bezier(.2, .8, .2, 1);
  will-change: height, transform;
}

.sim-layer.docked {
  z-index: 5;
  height: 66svh;
  box-shadow: inset 0 -1px 0 var(--line-strong);
}

.sim-layer.docked[data-deck-screen="brief"] {
  height: 46svh;
}

.sim-layer.docked[data-deck-screen="impact"] {
  height: 50svh;
}

.sim-layer.docked.is-cinematic,
.sim-layer.is-cinematic {
  z-index: 30;
  height: 100svh;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.sim-layer.is-cinematic::after {
  content: "DIGITAL TWIN · IMPACT COMPUTED";
  position: absolute;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 3;
  max-width: 190px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.twin-hold-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 3;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2, .8, .2, 1);
}

html.twin-hold-active .twin-hold-caption {
  opacity: 1;
  transform: translateY(0);
}

#mobileSim {
  display: block;
  width: 100%;
  height: 100%;
}

.dock-chrome,
.dock-state {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 360ms ease;
}

.sim-layer.docked .dock-chrome,
.sim-layer.docked .dock-state {
  opacity: 1;
}

.dock-chrome {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 10px 16px 0;
}

.dock-chrome .loop {
  display: inline-flex;
  gap: 5px;
  color: var(--ink);
}

.dock-chrome .loop span {
  color: var(--ink-mute);
}

.dock-state {
  display: flex;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 11px);
  max-width: 62%;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}

.sim-layer.docked .dock-state.is-empty {
  opacity: 0;
}

.status-shape {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--ink);
  transform: rotate(45deg);
}

.dock-state[data-pressure="critical"] .status-shape,
.dock-state[data-pressure="warning"] .status-shape {
  background: var(--signal);
}

.cabin-layer {
  z-index: 3;
}

.porthole {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 240px;
  height: 320px;
  overflow: hidden;
  border-radius: 120px / 150px;
  background: transparent;
  /* slightly deeper warm-grey cabin wall (still Bone family) so the bright
     white frame reads clearly, like a real window in a cabin wall */
  box-shadow: 0 0 0 2200px #e1dccd;
  transform: translate(-50%, -50%);
  will-change: width, height, border-radius;
}

/* white outer frame — a bright bevelled oval ring whose transparent centre
   reveals the grey lip + shade + digital twin. Fades on zoom via --bezel,
   exactly like the old flat bezel, so the opening choreography is unchanged.
   The ring is a gradient masked to its padding band; the soft drop-shadow
   lifts it off the cabin wall. */
.port-frame {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 19px;
  background:
    linear-gradient(156deg,
      #ffffff 0%, var(--surface) 20%, #f1eee5 46%,
      #e6e1d4 68%, #f6f3ec 87%, #ffffff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(60, 53, 38, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  filter:
    drop-shadow(0 5px 11px rgba(50, 44, 30, 0.22))
    drop-shadow(0 1px 2px rgba(50, 44, 30, 0.18));
  opacity: var(--bezel, 1);
  pointer-events: none;
}

/* specular light-sweep across the upper-left white rim (clipped to the ring) */
.port-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(143deg,
    rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, 0) 22%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* grey recessed inner lip — the channel that holds the glass, sitting below
   the white frame. A thick rounded border gives the grey ring (follows the
   oval perfectly); the inset shadows make it read as a sunken channel and
   draw the crisp dark line at the very edge of the opening. Fades via --bezel. */
.port-glass {
  position: absolute;
  inset: 19px;
  z-index: 5;
  border-radius: 101px / 131px;
  border: 13px solid #b8b4a8;
  border-color: #c2bdb1 #bbb6aa #aca89c #bbb6aa;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(40, 36, 26, 0.34),
    inset 0 6px 11px rgba(40, 36, 26, 0.34),
    inset 0 2px 5px rgba(40, 36, 26, 0.28),
    inset 0 -3px 6px rgba(40, 36, 26, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: var(--bezel, 1);
  pointer-events: none;
}

/* grey window shade that lifts to reveal the twin */
.shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(140, 138, 131, 0.18), rgba(140, 138, 131, 0) 44%),
    linear-gradient(180deg, #d6d2c6, #c5c1b5);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -16px 28px rgba(60, 53, 38, 0.14);
  will-change: transform;
}

/* clearly visible pill grip on the shade — a light pill that stands out
   against the grey shade, like the reference handle */
.shade::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 46px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(180deg, #efedE2 0%, #d3cfc3 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 0 -1px 2px rgba(60, 53, 38, 0.28),
    0 2px 4px rgba(60, 53, 38, 0.3);
  transform: translateX(-50%);
}

/* breather / bleed hole at the bottom of the glass — the small pressure-
   equalising hole real aircraft windows have. It sits behind the shade (low
   z-index) so it's hidden when the shade is closed and is revealed as the
   shade lifts. Fades with the frame via the JS-driven opacity. */
.window-pin {
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #6c665a 0%, #3a362d 52%, #211e17 100%);
  box-shadow:
    inset 0 1px 1.5px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}

.hero-layer {
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 26px calc(env(safe-area-inset-bottom, 0px) + 24px);
  text-align: center;
  will-change: opacity, transform;
}

.hero-top {
  width: 100%;
}

.mobile-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.brand-mark {
  width: 62px;
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
}

.brand-mark .bl {
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark .seed {
  fill: var(--signal);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: 0;
  text-align: left;
}

.brand-name span {
  display: block;
  margin-top: 6px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-bottom {
  width: 100%;
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.scroll-cue span {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ink), transparent);
  animation: cue 1900ms ease-in-out infinite;
  transform-origin: top;
}

@keyframes cue {
  0%, 100% { opacity: .4; transform: scaleY(.42); }
  50% { opacity: 1; transform: scaleY(1); }
}

.why-layer {
  z-index: 6;
  display: block;
  padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  opacity: 0;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}

.operator-intro {
  display: grid;
  grid-template-rows: 1fr auto;
  width: min(100%, 560px);
  max-width: 100%;
  height: 100%;
  gap: 22px;
  align-items: center;
  justify-self: center;
  margin: 0 auto;
}

.operator-copy {
  align-self: center;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(25px, 7.2vw, 36px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.operator-action {
  appearance: none;
  align-self: end;
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.94);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(.2, .8, .2, 1),
    background 180ms ease,
    color 180ms ease;
}

.why-layer.is-arming .operator-action {
  opacity: .35;
  pointer-events: none;
  transform: translateY(6px) scale(.97);
}

.why-layer.is-action-ready .operator-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.operator-action:active {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(1px) scale(.995);
}

.why-layer.is-launching {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-72px) !important;
}

.intro-scroll {
  height: 360svh;
}

.pager-active .intro-scroll,
.pager-active .story-section,
.pager-active .closing-section {
  display: none;
}

.pager-layer {
  position: fixed;
  left: 50%;
  top: 66svh;
  bottom: 0;
  z-index: 10;
  display: none;
  width: var(--col);
  padding: 10px 14px var(--pager-bottom-pad);
  border-top: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--paper) 92%, transparent), var(--paper) 22%),
    var(--paper);
  transform: translateX(-50%);
  touch-action: pan-y;
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    top 650ms cubic-bezier(.4, .1, .2, 1);
}

.pager-layer[data-deck-screen="brief"] {
  top: 46svh;
}

.pager-layer[data-deck-screen="impact"] {
  top: 50svh;
}

.pager-layer[data-deck-screen="close"] {
  top: 0;
  bottom: 0;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px calc(env(safe-area-inset-bottom, 0px) + 28px);
  border-top: 0;
  background: #050505;
}

.pager-layer[data-deck-screen="close"] .pager-controls {
  display: none;
}

.pager-layer.is-paused {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px);
}

.pager-active .pager-layer {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
}

.pager-card {
  min-height: 0;
  /* Content is auto-fitted by fitPagerCard() so it is always fully visible;
     hidden (never auto) guarantees the bottom card can never need scrolling. */
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  animation: deck-in 300ms cubic-bezier(.2, .8, .2, 1) both;
}

.pager-layer[data-deck-screen="close"] .pager-card {
  min-height: 0;
  overflow-y: auto;
  border: 0;
  background: #050505;
}

.pager-card.is-swipe-right {
  animation: deck-swipe 330ms cubic-bezier(.2, .8, .2, 1) both;
}

.pager-layer[data-deck-screen="brief"] .pager-card.is-swipe-right {
  animation: incident-card-in 520ms cubic-bezier(.16, .84, .24, 1) both;
}

.deck-panel.is-brief > .deck-kicker,
.deck-panel.is-brief > h2,
.deck-panel.is-brief > .deck-copy,
.deck-panel.is-brief > .flight-board {
  animation: incident-item-in 560ms cubic-bezier(.16, .84, .24, 1) both;
}

.deck-panel.is-brief > h2 {
  animation-delay: 70ms;
}

.deck-panel.is-brief > .deck-copy {
  animation-delay: 160ms;
}

.deck-panel.is-brief > .flight-board {
  animation-delay: 280ms;
}

@keyframes deck-in {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes deck-swipe {
  from { opacity: 0; transform: translateX(-44px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes incident-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes incident-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.deck-panel {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 100%;
  height: auto;
  padding: 14px;
  overflow: visible;
}

.deck-panel.is-resolving::after {
  content: "";
  position: absolute;
  left: -35%;
  right: -35%;
  top: 0;
  height: 2px;
  background: var(--signal);
  box-shadow: 0 0 24px var(--signal);
  animation: scanline 1100ms cubic-bezier(.6, 0, .2, 1) forwards;
  pointer-events: none;
}

.pager-layer .flight-board {
  margin-top: 0;
}

.deck-panel.is-brief .flight-board {
  align-self: start;
  width: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 7px;
}

.deck-panel.is-scrollable {
  overflow-y: auto;
}

.deck-panel.is-brief {
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 8px;
  overflow: visible;
  padding: 11px;
}

.deck-kicker,
.deck-meta,
.pager-controls,
.deck-status,
.deck-pill,
.deck-copy,
.deck-note {
  font-family: var(--font-mono);
}

.deck-kicker {
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.deck-panel h2,
.deck-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: 0;
}

.deck-panel h2 {
  font-size: 25px;
}

.deck-panel.is-brief h2 {
  /* No ch cap on phones — the 12ch cap forced 3-line wraps with dead space
     on the right. The panel padding already sets the measure; wide screens
     get a cap again in the media query below. */
  max-width: none;
  font-size: 25px;
  line-height: 1.02;
  text-wrap: balance;
}

.deck-panel h3 {
  font-size: 22px;
}

.deck-panel.is-story {
  align-content: start;
  gap: 34px;
  padding: 18px;
}

.deck-panel.is-story h2 {
  line-height: 1.1;
}

.deck-panel.is-story h2 .story-highlight {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 8px 4px;
  /* Ink-on-paper inverse — on the Bone & Signal palette (vermillion stays
     reserved for critical states; off-palette indigo read as a text-selection
     artifact in screenshots). */
  background: var(--ink);
  color: var(--paper);
}

.deck-copy {
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.55;
}

.deck-panel.is-story .deck-copy {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  max-width: none;
}

.deck-panel.is-brief .deck-copy {
  max-width: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.36;
}

.deck-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}

.deck-status span {
  min-height: 56px;
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.deck-status span:nth-child(2n) {
  border-right: 0;
}

.deck-status span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.deck-status b {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 13px;
}

.deck-pill {
  display: inline-flex;
  min-height: 34px;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.deck-proposal-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
}

.deck-count {
  display: inline-flex;
  min-width: 44px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.deck-approve {
  appearance: none;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

.deck-approve span,
.deck-approve b {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.deck-approve span {
  font-size: 13px;
  letter-spacing: .18em;
}

.deck-approve b {
  font-size: 21px;
  font-weight: 400;
}

.deck-approve:disabled {
  cursor: wait;
  opacity: .82;
}

.deck-note {
  color: var(--ink-dim);
  font-size: 9.5px;
  line-height: 1.45;
}

.deck-approved {
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
}

.deck-approved span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.deck-approved b {
  color: var(--signal);
  font-weight: 500;
}

.deck-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}

.deck-impact-grid span {
  min-height: 58px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.deck-impact-grid span:nth-child(2n) {
  border-right: 0;
}

.deck-impact-grid span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.deck-impact-grid b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: .95;
}

.deck-impact-grid em {
  display: block;
  margin-top: 6px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.deck-impact-lenses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-family: var(--font-mono);
}

.deck-impact-lenses span {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: 0 10px;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.deck-impact-lenses span::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink);
  transform: rotate(45deg);
}

.deck-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.deck-panel.is-final {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: clamp(14px, 2.4vh, 26px);
  padding: 4px 0 0;
  overflow: visible;
  background: #050505;
  color: var(--paper);
}

.final-lockup {
  display: inline-grid;
  grid-template-columns: 36px auto;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin: 4px auto 0;
  color: var(--paper);
}

/* phutur Bloom mark — light stroke for the dark final slide, vermillion seed */
.final-bloom {
  display: block;
  width: 36px;
  height: auto;
  overflow: visible;
}

.final-bloom .bl {
  stroke: var(--paper);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.final-bloom .seed {
  fill: var(--signal);
}

/* "phutur" is the brand wordmark: Syne extra-bold, lowercase */
.final-lockup b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: lowercase;
}

.final-lockup em {
  display: block;
  margin-top: 8px;
  color: rgba(243, 240, 231, .48);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .27em;
  line-height: 1.2;
}

.deck-panel.is-final .final-headline {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(34px, 10.8vw, 50px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.final-headline span {
  color: var(--signal);
}

.final-actions {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: auto;
}

.deck-contact,
.deck-replay {
  appearance: none;
  min-height: 48px;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.final-cta {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-color: var(--paper);
  font-size: 14px;
  letter-spacing: .18em;
}

.final-cta b {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.deck-contact {
  background: var(--ink);
  color: var(--paper);
}

.deck-contact.final-cta {
  background: var(--paper);
  color: var(--ink);
}

.deck-replay {
  background: var(--paper);
  color: var(--ink);
}

.deck-replay.final-cta {
  background: transparent;
  color: var(--paper);
}

.final-meta {
  margin: clamp(16px, 3vh, 28px) 0 0;
  color: rgba(243, 240, 231, .46);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.55;
}

@media (max-height: 900px) {
  .deck-panel.is-final .final-headline {
    font-size: clamp(32px, 10vw, 46px);
  }

  .final-meta {
    font-size: 11px;
  }
}

/* ---- Impact screen: score + reactive→assisted bars ---- */

.deck-panel.is-impact {
  align-content: start;
  gap: 10px;
}

.deck-panel.is-impact h2 {
  font-size: 21px;
}

.impact-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.impact-score b {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: 0;
}

.impact-score b i {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-mute);
}

.impact-score span {
  max-width: 24ch;
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.4;
}

.impact-scenario {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.impact-bars {
  display: grid;
  gap: 9px;
}

.impact-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
}

.impact-head em {
  color: var(--ink);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.impact-head span {
  color: var(--ink-mute);
  font-size: 8.5px;
}

.impact-head b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

/* Track = the reactive level (hatched); the solid bar settles down to the
   pCRL-assisted level when the screen plays. */
.impact-track {
  position: relative;
  height: 7px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  background: repeating-linear-gradient(135deg, rgba(26, 26, 24, .16) 0 3px, transparent 3px 6px);
}

.impact-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--ink);
  transition: width 1100ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--delay, 0ms);
}

.is-played .impact-track i {
  width: var(--to, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .impact-track i {
    transition: none;
  }
}

.impact-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}

.impact-lead b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.impact-lead span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* ---- Close screen: body copy, contact panel, replay ---- */

.final-copy {
  margin: 0;
  max-width: 36ch;
  color: rgba(243, 240, 231, .72);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}

a.final-cta {
  text-decoration: none;
  color: var(--paper);
}

.contact-panel {
  display: grid;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 460ms cubic-bezier(.2, .8, .2, 1), opacity 360ms ease;
}

.contact-panel.is-open {
  max-height: 320px;
  opacity: 1;
}

/* "Περισσότερα" panel holds two rows + the expandable desktop-demo note. */
#morePanel.is-open {
  max-height: 440px;
}

/* Desktop-only notice for the full-demo CTA: collapsed by default, revealed
   in place of navigation on touch-primary devices (see [data-demo-link]). */
.demo-note {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: rgba(243, 240, 231, .78);
  transition: max-height 460ms cubic-bezier(.2, .8, .2, 1), opacity 360ms ease;
}

.demo-note.is-open {
  max-height: 140px;
  opacity: 1;
}

.demo-note b {
  color: var(--paper);
  font-weight: 700;
  white-space: nowrap;
}

.demo-note i {
  font-style: normal;
  color: rgba(243, 240, 231, .55);
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 9px 14px;
  border: 1px solid rgba(243, 240, 231, .32);
  color: var(--paper);
  text-decoration: none;
}

.contact-row b {
  display: block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}

.contact-row em {
  display: block;
  margin-top: 4px;
  color: rgba(243, 240, 231, .52);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-row i {
  flex: none;
  color: rgba(243, 240, 231, .72);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .13em;
}

.contact-row:active {
  background: rgba(243, 240, 231, .08);
}

.replay-ghost {
  appearance: none;
  justify-self: center;
  margin: 0 auto;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  color: rgba(243, 240, 231, .55);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Crisper taps on all controls (kills double-tap-zoom delay). */
.operator-action,
.pager-next,
.deck-approve,
.approve-btn,
.final-cta,
.contact-row,
.replay-ghost {
  touch-action: manipulation;
}

.pager-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
}

.pager-next {
  appearance: none;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
}

.pager-next.is-hidden {
  display: none;
}

.pager-controls span {
  display: none;
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.story-section,
.closing-section {
  position: relative;
  z-index: 6;
  min-height: 92svh;
  padding: 28px 22px 76px;
  background: var(--paper);
  scroll-margin-top: 48svh;
}

.story-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}

.first-story {
  padding-top: 51svh;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.story-section h1,
.story-section h2,
.closing-section p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.story-section h1 {
  font-size: 32px;
}

.story-section h2,
.closing-section p {
  font-size: 29px;
}

.section-copy {
  margin: 18px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.65;
}

.flight-board {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: 13px;
  border: 1px solid #17150f;
  background:
    linear-gradient(180deg, rgba(255, 214, 37, 0.09), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px),
    #11110f;
  color: #f1eddd;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 37, 0.08);
}

.flight-board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 214, 37, 0.05), transparent);
  animation: board-scan 2600ms linear infinite;
  opacity: .75;
  pointer-events: none;
}

@keyframes board-scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

.board-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #ffd625;
  font-family: var(--font-display);
}

.deck-panel.is-brief .board-title {
  gap: 7px;
  margin-bottom: 7px;
}

.board-title b {
  font-size: 25px;
  line-height: 1;
}

.deck-panel.is-brief .board-title b {
  font-size: 21px;
}

.board-title em {
  margin-left: auto;
  color: rgba(241, 237, 221, .62);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.deck-panel.is-brief .board-title em {
  font-size: 7px;
  letter-spacing: .08em;
}

.board-mark {
  width: 22px;
  height: 22px;
  display: inline-block;
  border: 1px solid #ffd625;
  background:
    linear-gradient(45deg, transparent 44%, #ffd625 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #ffd625 45% 55%, transparent 56%);
}

.deck-panel.is-brief .board-mark {
  width: 18px;
  height: 18px;
}

.board-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(48px, 1fr) 50px 32px 94px;
  gap: 4px;
  align-items: center;
  min-height: 23px;
  color: rgba(241, 237, 221, .86);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.deck-panel.is-brief .board-grid {
  grid-template-columns: 36px minmax(40px, 1fr) 43px 26px minmax(68px, .86fr);
  gap: 2px;
  min-height: 15px;
  font-size: 8.6px;
  letter-spacing: .04em;
}

.board-grid > * {
  min-width: 0;
  overflow: hidden;
  padding: 2px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 5px, transparent 5px 9px),
    rgba(255, 255, 255, 0.035);
  white-space: nowrap;
}

.deck-panel.is-brief .board-grid > * {
  padding: 1px 2px;
}

.board-grid span:nth-child(2) {
  color: #ffd625;
}

.board-grid strong {
  color: rgba(241, 237, 221, .94);
  font-weight: 500;
}

.board-head {
  min-height: 18px;
  color: #ffd625;
  font-size: 8px;
  letter-spacing: .11em;
}

.deck-panel.is-brief .board-head {
  min-height: 13px;
  font-size: 6.8px;
  letter-spacing: .08em;
}

.board-head > * {
  background: transparent;
  padding-top: 0;
}

.board-grid.is-delayed > * {
  background:
    repeating-linear-gradient(90deg, rgba(255, 214, 37, 0.14) 0 5px, transparent 5px 9px),
    rgba(255, 45, 16, 0.13);
}

.board-grid.is-delayed span:nth-child(2),
.board-grid.is-delayed strong {
  color: #ffd625;
  letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(255, 214, 37, .34);
}

.status-grid,
.brief-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  border: 1px solid var(--line-strong);
}

.brief-signals {
  grid-template-columns: 1fr 1fr;
}

.status-grid div,
.brief-signals div {
  min-height: 86px;
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.status-grid div:last-child,
.brief-signals div:nth-child(2n) {
  border-right: 0;
}

.status-grid div {
  border-bottom: 0;
}

.brief-signals div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.status-grid span,
.status-grid b,
.brief-signals span,
.brief-signals b {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.status-grid span,
.brief-signals span {
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .12em;
}

.status-grid b,
.brief-signals b {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .08em;
}

.cascade-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cascade-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.cascade-list span {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}

.cascade-list b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cascade-list em {
  display: block;
  margin-top: 5px;
  color: var(--ink-dim);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.loop-board {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  border: 1px solid var(--line-strong);
  background: var(--line-strong);
}

.loop-board article {
  padding: 18px;
  background: var(--surface);
}

.loop-board span {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.loop-board p {
  margin: 10px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

.mission-section {
  padding-bottom: 92px;
}

.game-section {
  min-height: 112svh;
}

.game-section > .section-kicker,
.game-section > h2,
.game-section > .section-copy {
  display: none;
}

.mission-console {
  margin-top: 0;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 45, 16, 0.045), transparent 32%),
    var(--surface);
}

.mission-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mission-progress span:last-child {
  color: var(--ink-dim);
  text-align: right;
}

.mission-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.mission-step {
  min-height: 46px;
  padding: 8px 9px;
  border-right: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.mission-step:last-child {
  border-right: 0;
}

.mission-step i,
.mission-step b {
  display: block;
  font-style: normal;
}

.mission-step i {
  width: 19px;
  height: 19px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
}

.mission-step b {
  margin-top: 5px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.35;
}

.mission-step.is-active {
  color: var(--signal);
}

.mission-step.is-done {
  color: var(--ink);
}

.mission-step.is-done i {
  background: var(--ink);
  color: var(--paper);
}

.decision-list {
  display: grid;
  gap: 18px;
  margin-top: 0;
}

.decision-card {
  border: 0;
  background: transparent;
}

.decision-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--paper);
}

.decision-card header span,
.choice-result,
.option-btn small,
.score-label,
.metric-label,
.metric-detail,
.proxy-note,
.closing-cta {
  font-family: var(--font-mono);
}

.decision-card header span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.decision-card header b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
}

.decision-body {
  padding: 16px;
}

.decision-card.is-active .decision-body {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.decision-card.is-active .decision-body::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--line);
  opacity: .8;
  pointer-events: none;
}

.decision-card.is-active.is-resolving .decision-body::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 2px;
  background: var(--signal);
  box-shadow: 0 0 24px var(--signal);
  animation: scanline 1100ms cubic-bezier(.6, 0, .2, 1) forwards;
}

@keyframes scanline {
  from { transform: translateY(0); opacity: .95; }
  to { transform: translateY(420px); opacity: 0; }
}

.decision-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: 0;
}

.decision-body p {
  margin: 10px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.52;
}

.game-section .decision-body h3 {
  font-size: 22px;
}

.game-section .decision-body > p {
  display: none;
}

.node-target {
  display: inline-grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 7px 9px;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.node-target span {
  font-size: 8.5px;
  letter-spacing: .14em;
}

.node-target b {
  font-size: 11px;
  letter-spacing: .08em;
}

.proposal-action {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.proposal-action span,
.proposal-action small {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.proposal-action span {
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .14em;
}

.proposal-action strong {
  font-size: 14px;
  line-height: 1.25;
}

.proposal-action small {
  color: var(--signal);
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.45;
}

.approve-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  margin-top: 9px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

.approve-btn:disabled {
  cursor: wait;
}

.approve-btn span,
.approve-btn b {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.approve-btn span {
  font-size: 14px;
  letter-spacing: .18em;
}

.approve-btn b {
  font-size: 24px;
  font-weight: 400;
}

.approve-btn.is-secondary {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.approved-log {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.approved-log li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.approved-log span {
  color: var(--signal);
}

.mission-complete-card .decision-body {
  min-height: 320px;
}

.mission-complete-card .decision-body > p {
  display: block;
}

.option-stack {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.option-btn {
  appearance: none;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.option-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.option-btn[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: var(--paper);
}

.option-btn[aria-pressed="true"]::before {
  background: var(--ink);
}

.option-btn.is-recommended[aria-pressed="true"]::before {
  background: var(--signal);
  border-color: var(--signal);
}

.option-btn strong {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.option-btn small {
  display: block;
  margin-top: 4px;
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.35;
}

.option-btn .tag {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.option-btn.is-recommended .tag {
  color: var(--signal);
}

.choice-result {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: .03em;
  line-height: 1.55;
}

.game-section .choice-result {
  display: none;
}

.score-hero {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.score-section.is-locked .score-hero,
.score-section.is-locked .score-grid,
.score-section.is-locked .proxy-note {
  opacity: .36;
}

.score-section.is-locked .score-hero {
  position: relative;
}

.score-section.is-locked .score-hero::after {
  content: "LOCKED · APPROVE 3 pCRL NODES";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--signal);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.score-value {
  display: block;
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 800;
  line-height: .9;
}

.score-label {
  display: block;
  margin-top: 9px;
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-width: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.metric {
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.metric:nth-child(2n) {
  border-right: 0;
}

.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 800;
  line-height: .95;
}

.metric-label {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font-size: 9.5px;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.metric-detail {
  display: block;
  margin-top: 7px;
  color: var(--ink-dim);
  font-size: 9px;
  line-height: 1.4;
}

.proxy-note {
  margin: 18px 0 0;
  padding: 13px 14px;
  border: 1px solid var(--signal);
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .03em;
}

.proxy-note b {
  color: var(--signal);
  font-weight: 500;
}

.closing-section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
  padding-top: 42px;
}

.closing-section::before {
  display: none;
}

.closing-mark svg {
  width: 84px;
  height: auto;
  overflow: visible;
}

.closing-mark path {
  stroke: var(--paper);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.closing-mark circle {
  fill: var(--signal);
}

.closing-cta {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--paper);
  color: var(--paper);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

@media (max-height: 760px) {
  .sim-layer.docked[data-deck-screen="brief"] {
    height: 42svh;
  }

  .pager-layer[data-deck-screen="brief"] {
    top: 42svh;
    padding-top: 10px;
    padding-bottom: var(--pager-bottom-pad);
  }

  .pager-layer[data-deck-screen="brief"] .pager-next {
    min-height: 44px;
  }

  .deck-panel.is-brief {
    gap: 7px;
    padding: 10px;
  }

  .deck-panel.is-brief h2 {
    font-size: 22px;
  }

  .deck-panel.is-brief .deck-copy {
    font-size: 12px;
    line-height: 1.32;
  }

  .deck-panel.is-brief .flight-board {
    padding: 7px;
  }

  .deck-panel.is-brief .board-title {
    margin-bottom: 4px;
  }

  .deck-panel.is-brief .board-title b {
    font-size: 18px;
  }

  .deck-panel.is-brief .board-grid {
    min-height: 15px;
    font-size: 8.1px;
  }

  .deck-panel.is-brief .board-head {
    min-height: 12px;
    font-size: 6.4px;
  }

  /* Keep the close screen (lockup + headline + 2 CTAs + meta) within shorter
     portrait heights without overflowing past the home-indicator safe area. */
  .deck-panel.is-final {
    gap: clamp(12px, 1.8vh, 20px);
  }

  .deck-panel.is-final .final-headline {
    font-size: clamp(30px, 9.5vw, 44px);
  }

  .final-cta {
    min-height: 52px;
  }

  .final-meta {
    font-size: 10px;
    line-height: 1.5;
  }
}

@media (max-height: 660px) {
  .sim-layer.docked[data-deck-screen="brief"] {
    height: 54svh;
  }

  .pager-layer[data-deck-screen="brief"] {
    top: 54svh;
    gap: 8px;
    padding: 8px 12px var(--pager-bottom-pad);
  }

  .pager-layer[data-deck-screen="brief"] .pager-next {
    min-height: 40px;
  }

  .deck-panel.is-brief {
    gap: 7px;
    padding: 9px;
  }

  .deck-panel.is-brief h2 {
    font-size: 23px;
  }

  .deck-panel.is-brief .deck-copy {
    font-size: 12px;
    line-height: 1.32;
  }

  .deck-panel.is-brief .board-title b {
    font-size: 17px;
  }

  .deck-panel.is-brief .board-mark {
    width: 15px;
    height: 15px;
  }

  .deck-panel.is-brief .board-grid {
    min-height: 14px;
    font-size: 7.5px;
  }
}

/* Short / landscape viewports: the pager card (copy + board + ΣΥΝΕΧΕΙΑ)
   must stay on-screen. Cap the docked sim share and floor the card area. */
@media (max-height: 520px) {
  .sim-layer.docked {
    height: 42svh;
  }

  .sim-layer.docked[data-deck-screen="brief"] {
    height: 42svh;
  }

  .pager-layer,
  .pager-layer[data-deck-screen="brief"] {
    top: 42svh;
    gap: 6px;
    padding: 7px 14px var(--pager-bottom-pad);
  }

  .pager-layer .pager-next {
    min-height: 38px;
  }

  .pager-card {
    overflow: hidden;
  }

  .deck-panel,
  .deck-panel.is-brief,
  .deck-panel.is-story {
    gap: 8px;
    padding: 9px;
  }

  .deck-panel h2,
  .deck-panel.is-brief h2 {
    font-size: 19px;
  }

  .deck-panel.is-story h2 {
    font-size: 17px;
  }

  .deck-panel.is-story .deck-copy {
    font-size: 13px;
    line-height: 1.42;
  }

  .deck-panel.is-brief .deck-copy {
    font-size: 11px;
    line-height: 1.3;
  }

  .deck-panel.is-brief .board-title {
    margin-bottom: 3px;
  }

  .deck-panel.is-brief .board-title b {
    font-size: 15px;
  }

  .deck-panel.is-brief .board-grid {
    min-height: 13px;
    font-size: 7px;
  }

  .deck-impact-grid span {
    min-height: 50px;
  }

  .deck-impact-grid b {
    font-size: 22px;
  }
}

@media (max-width: 369px) {
  .deck-panel.is-brief {
    padding: 10px;
  }

  .deck-panel.is-brief h2 {
    font-size: 25px;
  }

  .deck-panel.is-brief .deck-copy {
    font-size: 13px;
    line-height: 1.38;
  }

  .deck-panel.is-brief .board-title b {
    font-size: 19px;
  }

  .deck-panel.is-brief .board-title em {
    font-size: 6.4px;
  }

  .deck-panel.is-brief .board-grid {
    grid-template-columns: 34px minmax(36px, 1fr) 41px 24px minmax(64px, .86fr);
    min-height: 17px;
    font-size: 8px;
    letter-spacing: .025em;
  }

  .story-section h1 {
    font-size: 28px;
  }

  .story-section h2,
  .closing-section p {
    font-size: 25px;
  }

  .score-value {
    font-size: 52px;
  }
}

@media (min-width: 430px) {
  .story-section h1 {
    font-size: 36px;
  }

  .story-section h2,
  .closing-section p {
    font-size: 32px;
  }

  .score-value {
    font-size: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-cue span {
    animation: none;
  }

  .pager-card,
  .pager-card.is-swipe-right,
  .pager-layer[data-deck-screen="brief"] .pager-card.is-swipe-right,
  .deck-panel.is-brief > .deck-kicker,
  .deck-panel.is-brief > h2,
  .deck-panel.is-brief > .deck-copy,
  .deck-panel.is-brief > .flight-board {
    animation: none;
  }

  .sim-layer,
  .dock-chrome,
  .dock-state {
    transition: none;
  }
}

/* Wide screens (tablet/desktop, --col is 100%): restore an editorial measure
   so unwrapped lines don't run the full window width. Phones stay uncapped. */
@media (min-width: 600px) {
  .deck-panel.is-brief h2 {
    max-width: 18ch;
  }

  .deck-panel.is-brief .deck-copy,
  .deck-panel.is-story .deck-copy {
    max-width: 44ch;
  }
}