:root {
  color-scheme: dark;
  --ink: #0c0d0b;
  --panel: #151612;
  --panel-2: #1b1c17;
  --paper: #eee9dc;
  --muted: #979588;
  --line: #3a3a31;
  --gold: #ddb936;
  --green: #39d796;
  --green-dark: #0d2c22;
  --red: #ed5748;
  --red-dark: #321411;
  --cyan: #72dbea;
  --caste-classic: #d3b066;
  --caste-giga: #ff7657;
  --caste-zoomer: #64d8ee;
  --caste-brainlet: #acd95a;
  --caste-npc: #a48cff;
  --caste-creature: #45cd8b;
  --caste-one: #ff5ca8;
  --motion-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
summary {
  font: inherit;
}

button,
a,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

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

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.grain {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.route-scroll {
  position: fixed;
  z-index: 40;
  top: 0;
  right: max(0px, env(safe-area-inset-right));
  bottom: 0;
  width: 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.route-scroll.is-active {
  opacity: 1;
}

.route-scroll svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
}

.route-scroll path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.route-scroll-shadow {
  stroke: rgba(0, 0, 0, 0.82);
  stroke-width: 6px;
  stroke-linecap: round;
}

.route-scroll-thread {
  stroke: rgba(31, 74, 52, 0.82);
  stroke-width: 4px;
  stroke-linecap: round;
}

.route-scroll-progress {
  stroke: url("#route-vine-fibre");
  stroke-width: 3.2px;
  stroke-linecap: round;
}

.route-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 58px;
  height: 68px;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transform-origin: 50% 54%;
  will-change: transform;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.72));
}

.route-scroll-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  animation: route-spider-idle 2.6s ease-in-out infinite;
}

.route-scroll-thumb:hover {
  filter: brightness(1.1) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.76));
}

.route-scroll-thumb.is-dragging {
  cursor: grabbing;
  filter: brightness(1.18) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.8));
}

.route-scroll-thumb.is-dragging img {
  animation-duration: 0.45s;
}

.route-scroll-thumb:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

@keyframes route-spider-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025, 0.985); }
}

@media (max-width: 720px) {
  .route-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-scroll {
    transition: none;
  }

  .route-scroll-thumb {
    will-change: auto;
  }

  .route-scroll-thumb img {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .route-scroll-thread,
  .route-scroll-progress {
    stroke-width: 3px;
  }

  .route-scroll-thumb {
    border: 2px solid #f3d26e;
  }
}

.topbar,
.job-shell,
.fineprint {
  width: min(calc(100% - 48px), 1480px);
  margin-inline: auto;
}

.topbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  align-items: center;
  min-height: 108px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--paper);
  text-decoration: none;
}

.brand img {
  width: 64px;
  height: 64px;
  margin-right: 15px;
  border: 1px solid #585741;
  object-fit: cover;
}

.brand span,
.hideout-title {
  display: flex;
  flex-direction: column;
}

.brand b {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.7px;
}

.brand small,
.hideout-title small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hideout-title {
  align-items: center;
  margin: 0;
  line-height: 1;
}

.hideout-title strong {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 1.2px;
}

.hideout-title small {
  margin-top: 6px;
}

.wallet {
  justify-self: end;
  min-width: 168px;
  min-height: 54px;
  border: 1px solid #696859;
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wallet:hover {
  border-color: var(--paper);
  transform: translateY(-1px);
}

.wallet.connected {
  border-color: #277b5d;
  background: var(--green-dark);
  color: var(--green);
}

.job-shell {
  position: relative;
  z-index: 2;
  padding-block: 30px 64px;
}

.mission-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 34px;
  border-block: 1px solid var(--line);
}

.mission-steps[hidden] {
  display: none;
}

.mission-step {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5f6058;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.2px;
}

.mission-step:not(:last-child)::after {
  position: absolute;
  right: 18px;
  content: "—";
  color: #4c4d46;
}

.mission-step i {
  display: grid;
  width: 30px;
  height: 30px;
  margin-right: 11px;
  place-items: center;
  border: 1px solid #4d4e46;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
}

button.mission-step {
  width: 100%;
  text-align: left;
}

button.mission-step:not(:disabled) {
  cursor: pointer;
}

button.mission-step.done:not(:disabled):hover {
  color: #8ff0c5;
}

button.mission-step:active:not(:disabled),
.stage-back:active,
.cta:active:not(:disabled),
.secondary:active:not(:disabled) {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.mission-step.current {
  color: var(--paper);
}

.mission-step.current i {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

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

.mission-step.done i {
  border-color: var(--green);
  background: var(--green-dark);
}

.app {
  position: relative;
}

.eyebrow,
.stage-header > span {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.intro {
  display: grid;
  height: clamp(620px, calc(100svh - 168px), 760px);
  min-height: 620px;
  grid-template-columns: minmax(520px, 0.95fr) minmax(0, 1.25fr);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}

.intro-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 4vw, 60px);
  border-right: 1px solid var(--line);
}

.intro h1,
.stage-header h1,
.active-content h1,
.roll-screen h1,
.result-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.88;
  text-transform: uppercase;
}

.intro h1 {
  margin-top: 28px;
  font-size: clamp(78px, 6vw, 104px);
  letter-spacing: -2px;
  white-space: nowrap;
}

.intro h1 em {
  color: var(--gold);
  font-style: normal;
}

.intro h1 > span,
.intro h1 > em {
  display: block;
}

.intro-copy > p {
  max-width: 420px;
  margin: 28px 0 0;
  color: #b9b6a8;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.5;
}

.intro-copy > small {
  margin-top: 24px;
  color: #77776c;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.intro-actions,
.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 34px;
}

.cta,
.secondary {
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cta {
  background: var(--gold);
  color: #17160e;
}

.cta span {
  display: inline-block;
  margin-left: 12px;
  transition: transform 160ms ease;
}

.cta:hover:not(:disabled) {
  transform: translateY(-2px);
}

.cta:hover:not(:disabled) span {
  transform: translateX(4px);
}

.cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.secondary {
  border-color: #5a5a4f;
  background: transparent;
  color: var(--paper);
}

.secondary:hover {
  border-color: var(--paper);
  background: #24241e;
}

.secondary.light {
  border-color: rgba(255, 255, 255, 0.55);
  color: white;
}

.intro-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #0d100c;
}

.intro-art::before {
  position: absolute;
  inset: -24px;
  content: "";
  background: url("art/hideout-mission-board-v3.jpg") center / cover no-repeat;
  filter: blur(18px) brightness(0.34) saturate(0.8);
  transform: scale(1.08);
}

.intro-art::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 2;
  background: linear-gradient(90deg, rgba(5, 7, 5, 0.34), rgba(0, 0, 0, 0.08));
}

.intro-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  animation: slow-drift 14s ease-in-out infinite alternate;
}

.intro-art span {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 22px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(5, 6, 5, 0.82);
  color: #d8d4c6;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.stage-header {
  margin-bottom: 28px;
}

.stage-header h1 {
  max-width: 900px;
  margin-top: 12px;
  font-size: clamp(66px, 6.3vw, 104px);
  letter-spacing: -1px;
}

.stage-header > p {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.hood-stage {
  padding-top: 10px;
}

.hood-stage .stage-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.hood-stage .stage-header > span,
.hood-stage .stage-header h1 {
  grid-column: 1;
}

.hood-stage .stage-header > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 360px;
  margin: 0 0 6px 36px;
}

.hood-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.caste-group {
  --caste-accent: var(--gold);
  margin-top: 34px;
}

.caste-group:first-child {
  margin-top: 0;
}

.caste-group-head,
.caste-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 14px;
  padding-inline: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--caste-accent) 52%, var(--line));
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.caste-group-head small,
.caste-group-header small,
.caste-group-count {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

.hood-card {
  --caste-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid var(--caste-accent);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.hood-card:hover {
  z-index: 2;
  border-color: var(--caste-accent);
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.hood-art {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #0e0f0c;
}

.hood-art::after {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  content: "";
  background: transparent;
}

.hood-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.hood-card:hover .hood-art img {
  transform: scale(1.035);
}

.hood-card-copy {
  display: flex;
  flex-direction: column;
  min-height: 142px;
  padding: 21px 22px;
}

.hood-card-copy i {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.hood-card-copy strong {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 500;
}

.hood-card-copy small {
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
}

.hood-card > em {
  position: absolute;
  right: 20px;
  bottom: 21px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.hood-card:hover > em {
  opacity: 1;
  transform: translateX(0);
}

.loading-card {
  min-height: 470px;
  border: 1px solid var(--line);
  background: #20211c;
  animation: loading 1.2s ease-in-out infinite alternate;
}

.empty-state {
  padding: clamp(40px, 7vw, 90px);
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
}

.empty-state strong {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 500;
}

.empty-state p {
  max-width: 600px;
  margin: 12px auto 24px;
  color: var(--muted);
}

.empty-state > div {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.stage-layout {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: clamp(34px, 3.5vw, 56px);
  align-items: start;
}

.stage-main {
  min-width: 0;
}

.hood-dossier {
  --caste-accent: var(--gold);
  position: sticky;
  top: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 46%, var(--line));
  border-top: 4px solid var(--caste-accent);
  background: var(--panel);
}

.dossier-art {
  aspect-ratio: 1;
  overflow: hidden;
  background: #0d0e0c;
}

.dossier-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dossier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px 0;
}

.dossier-head button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}

.dossier-head button:hover {
  color: var(--paper);
}

.ready-dot {
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.ready-dot::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  content: "";
}

.hood-dossier h2 {
  margin: 17px 20px 0;
  font-family: var(--display);
  font-size: 46px;
  font-weight: 500;
  line-height: 0.95;
}

.caste-tag {
  margin: 9px 20px 21px;
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.caste-tag span {
  color: #625f52;
}

.caste-classic-wojaks { --caste-accent: var(--caste-classic); }
.caste-giga-chads { --caste-accent: var(--caste-giga); }
.caste-zoomers { --caste-accent: var(--caste-zoomer); }
.caste-brainlets { --caste-accent: var(--caste-brainlet); }
.caste-npc-division { --caste-accent: var(--caste-npc); }
.caste-creatures { --caste-accent: var(--caste-creature); }
.caste-1-1,
.caste-one-of-one { --caste-accent: var(--caste-one); }
.caste-unfiled { --caste-accent: #a8a69a; }

.caste-tag,
.instinct b,
.caste-perk b,
.hood-perk b {
  color: var(--caste-accent);
}

.xp-copy {
  display: flex;
  justify-content: space-between;
  padding-inline: 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
}

.xp-copy b {
  color: var(--paper);
}

.xp-track {
  height: 5px;
  margin: 9px 20px 19px;
  overflow: hidden;
  background: #34342d;
}

.xp-track i {
  display: block;
  height: 100%;
  background: var(--caste-accent);
  animation: xp-fill 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dossier-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-inline: 20px;
  border-block: 1px solid var(--line);
}

.dossier-stats p {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 17px 0;
}

.dossier-stats p + p {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.dossier-stats b {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
}

.dossier-stats p:last-child b {
  color: var(--red);
}

.dossier-stats span {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.instinct {
  display: flex;
  flex-direction: column;
  margin: 19px 20px;
}

.instinct small,
.level-note summary {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.instinct b {
  margin-top: 5px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.8px;
}

.instinct span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hood-traits {
  margin: 0 20px 19px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.hood-traits > small {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.hood-traits p {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.hood-traits b {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.6px;
}

.hood-traits span {
  min-width: 0;
  color: #c7c3b6;
  overflow-wrap: anywhere;
}

.progress-note {
  margin: 0 20px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.6px;
}

.level-note {
  margin: 0 20px 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.level-note summary {
  display: flex;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.level-note summary::-webkit-details-marker {
  display: none;
}

.level-note summary::after {
  content: "+";
  color: var(--gold);
}

.level-note[open] summary::after {
  content: "−";
}

.level-note p {
  display: flex;
  gap: 9px;
  margin: 12px 0 4px;
}

.level-note p b,
.level-note em {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.5px;
}

.level-note > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.level-note em {
  display: block;
  margin-top: 9px;
  color: var(--gold);
}

.caste-perk,
.hood-perk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--caste-accent) 36%, var(--line));
}

.caste-perk b,
.hood-perk b {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.8px;
}

.caste-perk span,
.hood-perk span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.hood-card-face {
  display: block;
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hood-card-level {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 55%, var(--line));
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.story-hood,
.scene-hood {
  --caste-accent: var(--gold);
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: min(100%, 390px);
  padding: 8px 14px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 70%, white 12%);
  border-left: 4px solid var(--caste-accent);
  background: rgba(8, 9, 7, 0.86);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px) saturate(120%);
}

.story-hood img,
.scene-hood img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 65%, transparent);
  object-fit: cover;
}

.story-hood-copy,
.scene-hood-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.story-hood-copy b,
.scene-hood-copy b {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.story-hood-copy small,
.scene-hood-copy small {
  margin-top: 6px;
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.scene-loot,
.story-loot {
  position: relative;
  z-index: 4;
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 360px);
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: rgba(8, 9, 7, 0.9);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  color: var(--paper);
  backdrop-filter: blur(14px) saturate(120%);
}

.scene-loot-mark {
  display: grid;
  width: 84px;
  height: 72px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: #fff;
}

.scene-loot-mark img {
  width: 74px;
  max-height: 58px;
  object-fit: contain;
}

.vault-mark.apple img,
.scene-loot-mark.apple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(3.35);
}

.vault-mark.tesla img,
.scene-loot-mark.tesla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.15);
}

.scene-loot-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.scene-loot-copy small,
.scene-loot-copy em {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.scene-loot-copy b {
  margin-block: 2px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.stage-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 0 0 20px;
  padding: 0 14px;
  border: 1px solid #58584f;
  background: transparent;
  color: #c2bfb2;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 100ms ease-out;
}

.stage-back:hover {
  border-color: var(--paper);
  background: #20211b;
  color: var(--paper);
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vault-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.vault-card::after {
  position: absolute;
  right: 20px;
  top: 18px;
  content: "→";
  color: var(--muted);
  font-family: var(--mono);
  transition: color 160ms ease, transform 160ms ease;
}

.vault-card:hover {
  border-color: var(--gold);
  background: #1e1f19;
  transform: translateY(-5px);
}

.vault-card:hover::after {
  color: var(--gold);
  transform: translateX(4px);
}

.vault-mark {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8d6cf;
  background: #f4f4f2;
}

.vault-mark img {
  width: 82px;
  max-height: 82px;
  object-fit: contain;
}

.vault-mark.tesla img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.vault-mark.spy {
  width: 160px;
}

.vault-mark.spy img {
  width: 134px;
}

.vault-copy {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.vault-copy small,
.vault-take i {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
}

.vault-copy strong {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(48px, 4.3vw, 72px);
  font-weight: 500;
  line-height: 0.9;
}

.vault-copy b {
  margin-top: 6px;
  color: #aaa89d;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
}

.vault-take {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.vault-take b {
  margin-top: 6px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
}

.route-head h1 {
  max-width: 860px;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.95;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.route-card {
  position: relative;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #111;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.route-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 220ms ease;
}

.route-higher > img {
  object-position: 46% center;
}

.route-lower > img {
  object-position: 47% center;
}

.route-shade {
  position: absolute;
  inset: 28% 0 0;
  background: linear-gradient(180deg, rgba(3, 4, 3, 0.04), rgba(3, 4, 3, 0.7) 34%, rgba(3, 4, 3, 0.92) 100%);
}

.route-card:hover {
  z-index: 2;
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.route-higher:hover {
  border-color: var(--green);
}

.route-lower:hover {
  border-color: var(--red);
}

.route-card:hover > img {
  transform: scale(1.045) translateY(-1%);
}

.market-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 9px 11px;
  border: 1px solid currentColor;
  background: rgba(6, 7, 6, 0.85);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.route-higher .market-badge {
  color: var(--green);
}

.route-lower .market-badge {
  color: var(--red);
}

.route-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.route-copy i {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.route-copy strong {
  max-width: 360px;
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(42px, 3.4vw, 60px);
  font-weight: 500;
  line-height: 0.92;
}

.route-copy small {
  max-width: 330px;
  margin-top: 10px;
  color: #b2b1a9;
  font-size: 15px;
  line-height: 1.45;
}

.route-copy b {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
}

.route-card > .story-hood-route {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  max-width: 280px;
}

.route-card > .story-hood-route img {
  width: 64px;
  height: 64px;
}

.route-card > .scene-loot-route {
  position: absolute;
  z-index: 4;
  top: 62px;
  right: 16px;
}

.route-higher .route-copy b {
  color: var(--green);
}

.route-lower .route-copy b {
  color: var(--red);
}

.route-key {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.route-key i {
  width: 24px;
}

.green-dot,
.red-dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}

.green-dot {
  background: var(--green);
}

.red-dot {
  background: var(--red);
}

.job-ticket {
  border: 1px solid var(--line);
  background: var(--panel);
}

.ticket-green {
  border-top: 3px solid var(--green);
}

.ticket-red {
  border-top: 3px solid var(--red);
}

.ticket-route {
  display: flex;
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  border-bottom: 1px solid var(--line);
}

.ticket-route > span {
  display: grid;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  margin-right: 20px;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-size: 48px;
}

.ticket-green .ticket-route > span,
.ticket-green .ticket-route small {
  color: var(--green);
}

.ticket-red .ticket-route > span,
.ticket-red .ticket-route small {
  color: var(--red);
}

.ticket-route p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ticket-route small,
.ticket-route i {
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1px;
}

.ticket-route strong {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 500;
  line-height: 0.9;
}

.ticket-route i {
  margin-top: 10px;
  color: var(--gold);
}

.ticket-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ticket-facts p {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 108px;
  margin: 0;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.ticket-facts p:last-child {
  border-right: 0;
}

.ticket-facts small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.ticket-facts b {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ticket-facts .risk-fact b {
  color: var(--red);
}

.risk-check {
  display: flex;
  align-items: center;
  padding: 18px;
  border-top: 1px solid var(--line);
  color: #b6b3a6;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}

.risk-check input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin: 0 10px 0 0;
  accent-color: var(--red);
}

.confirm-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.stamp-button:not(:disabled) {
  animation: stamp-ready 1.8s ease-in-out infinite;
}

.launch-note {
  margin: 12px 0 0;
  color: #6f6e64;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
  letter-spacing: 0.4px;
}

.launch-note b {
  color: var(--gold);
}

.active-job {
  position: relative;
  min-height: min(680px, calc(100vh - 190px));
  overflow: hidden;
  border: 1px solid var(--line);
}

.active-bg,
.active-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.active-bg {
  object-fit: cover;
  animation: active-drift 9s ease-in-out infinite alternate;
}

.active-shade {
  background: rgba(3, 4, 3, 0.63);
}

.active-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px;
  text-align: center;
}

.active-hood {
  display: flex;
  align-items: center;
  margin: 26px 0 30px;
  padding: 7px 13px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(8, 9, 7, 0.82);
  text-align: left;
}

.active-hood > img {
  width: 64px;
  height: 64px;
  margin-right: 10px;
  object-fit: cover;
}

.active-hood span {
  display: flex;
  flex-direction: column;
}

.active-hood b {
  font-family: var(--mono);
  font-size: 12px;
}

.active-hood small {
  margin-top: 4px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
}

.active-content h1 {
  font-size: clamp(72px, 9vw, 132px);
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.active-content > p {
  max-width: 560px;
  margin: 20px auto 0;
  color: #c8c5b9;
  font-size: 18px;
}

.active-content .scene-loot-active {
  margin: -14px 0 26px;
}

.active-content .scene-loot-mark {
  width: 104px;
  height: 82px;
}

.active-content .scene-loot-mark img {
  width: 92px;
  max-height: 66px;
}

.countdown {
  margin: 28px 0 20px;
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 3px;
}

.active-green .countdown {
  color: var(--green);
}

.active-red .countdown {
  color: var(--red);
}

.roll-screen {
  position: relative;
  display: flex;
  min-height: min(680px, calc(100vh - 190px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #57221d;
  background: #180d0b;
  text-align: center;
}

.bars {
  position: absolute;
  inset: -5% 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  opacity: 0.16;
}

.bars i {
  width: 3.4%;
  background: #c8bca2;
  transform: translateY(-110%);
  animation: bars-drop 850ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bars i:nth-child(2) { animation-delay: 60ms; }
.bars i:nth-child(3) { animation-delay: 110ms; }
.bars i:nth-child(4) { animation-delay: 150ms; }
.bars i:nth-child(5) { animation-delay: 90ms; }
.bars i:nth-child(6) { animation-delay: 30ms; }
.bars i:nth-child(7) { animation-delay: 130ms; }

.roll-screen h1 {
  position: relative;
  margin-top: 22px;
  font-size: clamp(80px, 10vw, 145px);
}

.roll-screen > p {
  position: relative;
  max-width: 520px;
  margin: 24px auto 0;
  color: #b8aaa0;
  font-size: 18px;
}

.roll-screen > p b {
  color: var(--red);
}

.roll-number {
  position: relative;
  width: min(440px, 70%);
  margin-top: 34px;
}

.roll-number i {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: #3b1c18;
}

.roll-number i::after {
  display: block;
  width: 22%;
  height: 100%;
  background: var(--red);
  content: "";
  animation: roll-scan 620ms ease-in-out infinite alternate;
}

.roll-number span {
  display: block;
  margin-top: 11px;
  color: #75554f;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.result-screen {
  display: grid;
  min-height: min(680px, calc(100vh - 190px));
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  border: 1px solid var(--line);
  background: var(--panel);
}

.result-art {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.result-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.1);
}

.result-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-jail .result-art > img {
  object-position: center;
}

.result-art > span:not(.story-hood):not(.scene-loot):not(.result-crew-badge):not(.result-fx):not(.result-verdict) {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  padding: 10px 12px;
  border: 1px solid currentColor;
  background: rgba(5, 6, 5, 0.88);
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.result-art > .story-hood-result {
  position: absolute;
  z-index: 4;
  top: auto;
  right: auto;
  bottom: 24px;
  left: 24px;
  padding: 8px 14px 8px 8px;
  max-width: 430px;
  color: var(--paper);
  font-family: var(--sans);
  letter-spacing: 0;
}

.result-art > .story-hood-result img {
  width: 180px;
  height: 180px;
}

.result-art > .story-hood-result .story-hood-copy b {
  font-size: 34px;
}

.result-art > .scene-loot-result {
  position: absolute;
  z-index: 4;
  top: 24px;
  right: 24px;
  left: auto;
  padding: 8px 14px 8px 8px;
  color: var(--paper);
  font-family: var(--sans);
  letter-spacing: 0;
}

.result-art > .scene-loot-result .scene-loot-mark {
  width: 104px;
  height: 82px;
}

.result-art > .scene-loot-result .scene-loot-mark img {
  width: 92px;
  max-height: 66px;
}

.result-escape .result-art > span:not(.story-hood):not(.scene-loot):not(.result-crew-badge):not(.result-fx):not(.result-verdict),
.result-neutral .result-art > span:not(.story-hood):not(.scene-loot):not(.result-crew-badge):not(.result-fx):not(.result-verdict) {
  color: var(--gold);
}

.result-jail .result-art > span:not(.story-hood):not(.scene-loot):not(.result-crew-badge):not(.result-fx):not(.result-verdict) {
  color: var(--red);
}

.result-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
  border-left: 1px solid var(--line);
}

.result-copy h1 {
  margin-top: 22px;
  font-size: clamp(64px, 7vw, 104px);
}

.result-success .result-copy h1 {
  color: var(--green);
}

.result-jail .result-copy h1 {
  color: var(--red);
}

.result-copy > p {
  margin: 20px 0 0;
  color: #aaa79b;
  font-size: 17px;
  line-height: 1.55;
}

.result-rewards {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
}

.result-rewards p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 14px;
  background: var(--panel-2);
}

.result-rewards small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.result-rewards b {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
}

.result-copy .permanent-note {
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.result-copy .cta {
  width: fit-content;
  margin-top: 26px;
}

.hood-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #55554d;
  font-family: var(--display);
  font-size: 42px;
}

.fineprint {
  position: relative;
  z-index: 3;
  padding: 0 0 36px;
  color: #696960;
}

.fineprint details {
  border-top: 1px solid var(--line);
}

.fineprint summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  list-style: none;
  color: #9d9b91;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}

.fineprint summary::-webkit-details-marker {
  display: none;
}

.fineprint summary::after {
  content: "+";
  color: var(--gold);
}

.fineprint details[open] summary::after {
  content: "−";
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.rules-grid p {
  display: flex;
  min-height: 90px;
  flex-direction: column;
  margin: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.rules-grid p:last-child {
  border-right: 0;
}

.rules-grid b {
  color: var(--gold);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
}

.rules-grid span {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.contract-links {
  display: flex;
  gap: 18px;
  padding-block: 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.contract-links a {
  color: #939188;
  text-decoration: none;
}

.contract-links a:hover {
  color: var(--paper);
}

.contract-links span {
  margin-left: auto;
}

.fineprint > small {
  font-family: var(--mono);
  font-size: 10px;
}

.toast {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 22px;
  max-width: min(430px, calc(100% - 44px));
  padding: 14px 17px;
  border: 1px solid var(--gold);
  background: #17170f;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app > section,
.app > .stage-layout {
  animation: stage-enter 420ms var(--motion-standard) backwards;
}

.stage-layout .hood-dossier {
  animation: dossier-enter 460ms var(--motion-standard) 40ms backwards;
}

.stage-layout .stage-main {
  animation: content-enter 460ms var(--motion-standard) 80ms backwards;
}

.hood-card,
.vault-card {
  animation: card-rise 420ms var(--motion-standard) backwards;
}

.hood-card:nth-child(2),
.vault-card:nth-child(2) { animation-delay: 45ms; }
.hood-card:nth-child(3),
.vault-card:nth-child(3) { animation-delay: 90ms; }
.hood-card:nth-child(4) { animation-delay: 135ms; }
.hood-card:nth-child(5) { animation-delay: 180ms; }
.hood-card:nth-child(6) { animation-delay: 225ms; }

.route-higher {
  animation: route-enter-left 440ms var(--motion-standard) 80ms backwards;
}

.route-lower {
  animation: route-enter-right 440ms var(--motion-standard) 125ms backwards;
}

.result-art > img {
  animation: result-image-enter 760ms var(--motion-standard) backwards;
}

.result-copy > * {
  animation: result-copy-enter 360ms var(--motion-standard) backwards;
}

.result-copy > *:nth-child(2) { animation-delay: 55ms; }
.result-copy > *:nth-child(3) { animation-delay: 95ms; }
.result-copy > *:nth-child(4) { animation-delay: 135ms; }
.result-copy > *:nth-child(5) { animation-delay: 175ms; }
.result-copy > *:nth-child(6) { animation-delay: 215ms; }

.result-success .result-art::before,
.result-escape .result-art::before,
.result-jail .result-art::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.result-success .result-art::before {
  background: radial-gradient(circle at 52% 48%, rgba(57, 215, 150, 0.5), transparent 56%);
  animation: success-light 900ms ease-out both;
}

.result-escape .result-art::before {
  background: linear-gradient(110deg, transparent 25%, rgba(221, 185, 54, 0.24) 48%, transparent 70%);
  animation: escape-sweep 900ms var(--motion-standard) both;
}

.result-jail .result-art::before {
  background: repeating-linear-gradient(90deg, transparent 0 10%, rgba(8, 4, 3, 0.78) 10% 13%);
  animation: jail-slam 440ms cubic-bezier(0.25, 0.86, 0.34, 1) both;
}

.result-jail {
  animation: jail-impact 360ms ease-out 260ms both;
}

.story-hood,
.scene-hood {
  animation: portrait-enter 380ms var(--motion-standard) 150ms backwards;
}

@keyframes stage-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dossier-enter {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes content-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes route-enter-left {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes route-enter-right {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes portrait-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-image-enter {
  from { opacity: 0.42; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes result-copy-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes success-light {
  0% { opacity: 0; transform: scale(0.75); }
  38% { opacity: 1; }
  100% { opacity: 0.2; transform: scale(1.18); }
}

@keyframes escape-sweep {
  from { opacity: 0; transform: translateX(-65%); }
  35% { opacity: 1; }
  to { opacity: 0; transform: translateX(65%); }
}

@keyframes jail-slam {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes jail-impact {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  55% { transform: translateX(4px); }
  78% { transform: translateX(-2px); }
}

@keyframes reduced-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slow-drift {
  from { transform: scale(0.985); }
  to { transform: scale(1); }
}

@keyframes active-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}

@keyframes loading {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

@keyframes xp-fill {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

@keyframes stamp-ready {
  0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(221, 185, 54, 0); }
  92% { box-shadow: 0 0 0 5px rgba(221, 185, 54, 0.13); }
}

@keyframes bars-drop {
  to { transform: translateY(0); }
}

@keyframes roll-scan {
  from { transform: translateX(0); }
  to { transform: translateX(355%); }
}

@media (min-width: 761px) and (max-height: 820px) {
  .intro {
    height: clamp(580px, calc(100svh - 150px), 680px);
    min-height: 580px;
  }

  .intro-copy {
    padding-block: 36px;
  }

  .intro h1 {
    margin-top: 22px;
    font-size: clamp(70px, 5.4vw, 88px);
  }

  .intro-copy > p {
    margin-top: 20px;
  }

  .intro-actions {
    margin-top: 26px;
  }

  .intro-copy > small {
    margin-top: 18px;
  }
}

@media (max-width: 1050px) {
  .topbar,
  .job-shell,
  .fineprint {
    width: min(calc(100% - 32px), 1000px);
  }

  .intro {
    grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
  }

  .intro-copy {
    padding: 36px;
  }

  .intro h1 {
    font-size: clamp(68px, 8vw, 82px);
  }

  .stage-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
  }

  .vault-grid {
    grid-template-columns: 1fr;
  }

  .vault-card {
    display: grid;
    min-height: 150px;
    grid-template-columns: 124px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
  }

  .vault-card::after {
    display: none;
  }

  .vault-copy,
  .vault-take {
    margin: 0;
  }

  .vault-copy strong {
    font-size: 45px;
  }

  .vault-take {
    min-width: 150px;
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .route-card {
    min-height: 460px;
  }

  .ticket-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .ticket-facts p:nth-child(2) {
    border-right: 0;
  }

  .ticket-facts p:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .result-screen {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
  }
}

@media (max-width: 760px) {
  .topbar,
  .job-shell,
  .fineprint {
    width: min(calc(100% - 24px), 720px);
  }

  .topbar {
    grid-template-columns: 1fr auto;
    min-height: 70px;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand b {
    font-size: 17px;
  }

  .brand small {
    font-size: 9px;
  }

  .hideout-title {
    display: none;
  }

  .wallet {
    min-width: 116px;
    min-height: 38px;
    font-size: 11px;
  }

  .job-shell {
    padding-block: 18px 38px;
  }

  .mission-steps {
    margin-bottom: 20px;
  }

  .mission-step {
    justify-content: center;
    min-height: 38px;
  }

  .mission-step b,
  .mission-step:not(:last-child)::after {
    display: none;
  }

  .mission-step i {
    margin: 0;
  }

  .intro {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .intro-copy {
    min-height: 450px;
    padding: 32px 24px;
    border-right: 0;
  }

  .intro h1 {
    font-size: clamp(56px, 15.5vw, 78px);
    letter-spacing: -1px;
  }

  .intro h1 > .hero-wide,
  .intro h1 > em {
    font-size: 0.82em;
    letter-spacing: 0;
  }

  .intro-copy > p {
    max-width: 100%;
  }

  .intro-copy > small {
    overflow-wrap: anywhere;
  }

  .intro-art {
    min-height: 330px;
    border-top: 1px solid var(--line);
  }

  .intro-actions {
    flex-direction: column;
  }

  .intro-actions button {
    width: 100%;
  }

  .hood-stage .stage-header {
    display: block;
  }

  .hood-stage .stage-header > p {
    margin: 14px 0 0;
  }

  .stage-header h1 {
    font-size: clamp(52px, 16vw, 76px);
  }

  .hood-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hood-card {
    grid-template-rows: minmax(190px, 1fr) auto;
  }

  .hood-card-copy {
    min-height: 108px;
    padding: 14px;
  }

  .hood-card-copy strong {
    font-size: 24px;
  }

  .hood-card > em {
    display: none;
  }

  .stage-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .hood-dossier {
    position: relative;
    top: auto;
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }

  .dossier-art {
    grid-row: 1 / span 4;
    aspect-ratio: auto;
    min-height: 156px;
  }

  .dossier-head,
  .hood-dossier h2,
  .caste-tag,
  .xp-copy,
  .xp-track {
    grid-column: 2;
  }

  .dossier-head {
    padding: 11px 12px 0;
  }

  .hood-dossier h2 {
    margin: 8px 12px 0;
    font-size: 28px;
  }

  .caste-tag {
    margin: 4px 12px 8px;
  }

  .xp-copy {
    padding-inline: 12px;
  }

  .xp-track {
    margin: 6px 12px 11px;
  }

  .dossier-stats,
  .instinct,
  .hood-traits,
  .progress-note,
  .level-note {
    display: none;
  }

  .stage-main {
    width: 100%;
  }

  .vault-card {
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 128px;
    padding: 16px;
  }

  .vault-mark {
    width: 62px;
    height: 62px;
  }

  .vault-mark.spy {
    width: 68px;
  }

  .vault-mark.spy img {
    width: 58px;
  }

  .vault-copy strong {
    font-size: 38px;
  }

  .vault-take {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .route-grid {
    grid-template-columns: 1fr;
  }

  .route-card {
    min-height: 390px;
  }

  .route-copy strong {
    font-size: 42px;
  }

  .route-key {
    justify-content: center;
  }

  .ticket-route {
    padding: 20px;
  }

  .ticket-route > span {
    width: 56px;
    height: 56px;
    font-size: 36px;
  }

  .ticket-route strong {
    font-size: 38px;
  }

  .confirm-actions {
    flex-direction: column-reverse;
  }

  .confirm-actions button {
    width: 100%;
  }

  .launch-note {
    text-align: left;
  }

  .active-job,
  .roll-screen,
  .result-screen {
    min-height: 620px;
  }

  .active-content {
    padding: 28px 18px;
  }

  .active-content h1,
  .roll-screen h1 {
    font-size: clamp(68px, 20vw, 100px);
  }

  .result-screen {
    grid-template-columns: 1fr;
  }

  .result-art {
    min-height: 360px;
  }

  .result-copy {
    padding: 34px 24px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .result-copy h1 {
    font-size: clamp(58px, 18vw, 88px);
  }

  .story-hood,
  .scene-hood {
    max-width: 100%;
    backdrop-filter: none;
  }

  .story-hood img,
  .scene-hood img {
    width: 58px;
    height: 58px;
  }

  .story-hood-copy b,
  .scene-hood-copy b {
    font-size: 23px;
  }

  .story-hood-copy small,
  .scene-hood-copy small {
    font-size: 9px;
  }

  .route-card > .story-hood-route {
    top: 12px;
    left: 12px;
    max-width: 210px;
  }

  .route-card > .story-hood-route img {
    width: 50px;
    height: 50px;
  }

  .route-card > .story-hood-route .story-hood-copy b {
    font-size: 20px;
  }

  .route-card > .scene-loot-route {
    top: 76px;
    right: 12px;
    padding: 5px 8px 5px 5px;
  }

  .scene-loot-mark,
  .active-content .scene-loot-mark,
  .result-art > .scene-loot-result .scene-loot-mark {
    width: 64px;
    height: 54px;
  }

  .scene-loot-mark img,
  .active-content .scene-loot-mark img,
  .result-art > .scene-loot-result .scene-loot-mark img {
    width: 56px;
    max-height: 42px;
  }

  .scene-loot-copy b {
    font-size: 25px;
  }

  .scene-loot-copy small,
  .scene-loot-copy em {
    font-size: 8px;
  }

  .result-art > .scene-loot-result {
    top: 18px;
    right: 18px;
    padding: 5px 8px 5px 5px;
  }

  .result-art > .story-hood-result {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .result-art > .story-hood-result img {
    width: 96px;
    height: 96px;
  }

  .result-art > .story-hood-result .story-hood-copy b {
    font-size: 25px;
  }

  .stage-back {
    min-height: 44px;
    margin-bottom: 16px;
    font-size: 11px;
  }

  .caste-group-head,
  .caste-group-header {
    font-size: 11px;
  }

  .caste-group-head small,
  .caste-group-header small,
  .caste-group-count {
    font-size: 9px;
  }

  .rules-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rules-grid p:nth-child(2) {
    border-right: 0;
  }

  .rules-grid p:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .contract-links {
    flex-wrap: wrap;
  }

  .contract-links span {
    width: 100%;
    margin: 0;
  }
}

/* Crew-first mission flow: one shared call, up to eight Hoods. */
.hood-stage {
  padding-bottom: 116px;
}

.hood-card.is-selected {
  z-index: 2;
  border-color: var(--caste-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--caste-accent) 42%, transparent), 0 18px 46px rgba(0, 0, 0, 0.36);
  transform: translateY(-4px);
}

.hood-card.is-selected::after {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--caste-accent);
  border-radius: 50%;
  background: #0c0d0b;
  color: var(--caste-accent);
  content: "✓";
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 900;
}

.hood-card.is-selected > em,
.hood-card:focus-visible > em {
  color: var(--caste-accent);
  opacity: 1;
  transform: none;
}

.hood-card:active,
.crew-tray .cta:active,
.market-quote-compact:active {
  transform: scale(0.985);
  transition-duration: 90ms;
}

.crew-tray {
  position: sticky;
  z-index: 30;
  bottom: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: min(100%, 1120px);
  min-height: 86px;
  margin: 28px auto 0;
  padding: 12px 14px 12px 20px;
  border: 1px solid #656357;
  border-top: 3px solid var(--gold);
  background: rgba(14, 15, 12, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(18px) saturate(135%);
}

.crew-tray-count {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crew-tray-count b {
  color: var(--gold);
  font-family: var(--display);
  font-size: 48px;
  font-weight: 500;
  line-height: 0.8;
}

.crew-tray-count small,
.crew-tray-ids i {
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.crew-tray-count small {
  color: var(--muted);
}

.crew-tray-ids {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.crew-tray-ids i {
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 58%, var(--line));
  color: var(--caste-accent);
}

.crew-tray .cta {
  min-height: 58px;
  margin: 0;
  white-space: nowrap;
}

.crew-dossier {
  padding: 8px 0 24px;
  border-top-color: var(--gold);
}

.crew-dossier h2 {
  margin-top: 30px;
}

.crew-dossier-list,
.confirm-crew,
.crew-outcome-list {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.crew-dossier-row,
.confirm-crew-row,
.crew-outcome-list > span {
  --caste-accent: var(--gold);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 12px;
  border-left: 4px solid var(--caste-accent);
  background: color-mix(in srgb, var(--caste-accent) 7%, #11120f);
}

.crew-dossier-row b,
.confirm-crew-row b,
.crew-outcome-list b {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
}

.crew-dossier-row em,
.confirm-crew-row em,
.crew-outcome-list em {
  justify-self: end;
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.crew-dossier-row small,
.confirm-crew-row small,
.crew-outcome-list small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
}

.stage-layout-full {
  display: block;
}

.stage-layout-full .stage-main {
  width: min(100%, 1220px);
  margin-inline: auto;
}

.confirm-crew {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
  background: #10110e;
}

.ticket-facts-compact p {
  min-height: 94px;
}

.active-crew,
.result-crew-badge {
  position: relative;
  z-index: 4;
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 720px);
  flex-direction: column;
  gap: 5px;
  padding: 12px 15px;
  border-left: 4px solid var(--gold);
  background: rgba(8, 9, 7, 0.9);
  color: var(--paper);
  text-align: left;
  backdrop-filter: blur(14px) saturate(120%);
}

.active-crew small,
.result-crew-badge small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
}

.active-crew b,
.result-crew-badge b {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.result-art > .result-crew-badge {
  position: absolute;
  top: 104px;
  left: 24px;
}

.result-copy .crew-outcome-list {
  margin-top: 20px;
  padding: 12px;
}

.crew-outcome-jail {
  --caste-accent: var(--red) !important;
}

.crew-outcome-escape,
.crew-outcome-success {
  --caste-accent: var(--green) !important;
}

.result-partial-jail .result-copy h1 {
  color: var(--red);
}

/* Quotes keep only what changes the player's decision. Brand marks live on vault cards. */
.market-quote-compact {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top-width: 3px;
  box-shadow: none;
}

.market-compact-price {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.market-compact-price small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.market-compact-price b {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 500;
  line-height: 0.9;
}

.vault-card {
  min-height: 500px;
}

.vault-card .market-context-vault {
  margin: 22px 0;
}

.route-stage .market-context-route {
  width: min(100%, 620px);
  margin-bottom: 20px;
}

.market-asset {
  gap: 0;
}

.market-quote-main {
  grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
}

.market-quote-card > footer {
  min-height: 42px;
}

.route-card > .scene-loot-route {
  top: 16px;
  right: auto;
  left: 16px;
  max-width: calc(100% - 150px);
  padding: 10px 12px;
}

.scene-loot-copy b {
  font-size: 25px;
}

.scene-loot-copy em {
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 900px) {
  .crew-tray {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crew-tray .cta {
    grid-column: 1 / -1;
    width: 100%;
  }

  .confirm-crew {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hood-stage {
    padding-bottom: 146px;
  }

  .crew-tray {
    bottom: 8px;
    gap: 10px;
    padding: 10px;
  }

  .crew-tray-count b {
    font-size: 40px;
  }

  .crew-tray-count small,
  .crew-tray-ids i {
    font-size: 10px;
  }

  .crew-tray-ids {
    max-height: 58px;
    overflow: auto;
  }

  .stage-layout-full .stage-header h1 {
    font-size: clamp(54px, 16vw, 78px);
  }

  .ticket-facts-compact {
    grid-template-columns: 1fr 1fr;
  }

  .ticket-facts-compact p:nth-child(2n) {
    border-right: 0;
  }

  .market-quote-main {
    display: block;
  }

  .market-compact-price b {
    font-size: 34px;
  }

  .result-art > .result-crew-badge {
    top: 92px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hood-card,
  .crew-tray,
  .route-card,
  .stamp-button {
    animation: none !important;
    transition: opacity 160ms ease !important;
    transform: none !important;
  }
}

/* Direct route feedback and restrained outcome motion. */
.route-card {
  --route-accent: var(--gold);
  --route-lift: 0px;
  --route-press-scale: 1;
  --route-shift-x: 0px;
  --route-shift-y: 0px;
  --route-tilt-x: 0deg;
  --route-tilt-y: 0deg;
  --route-pan-x: 0px;
  --route-pan-y: 0px;
  --route-image-scale: 1;
  isolation: isolate;
  transform: perspective(1100px) translate3d(var(--route-shift-x), calc(var(--route-lift) + var(--route-shift-y)), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms var(--motion-standard), border-color 180ms ease, box-shadow 220ms ease;
}

.route-higher {
  --route-accent: var(--green);
}

.route-lower {
  --route-accent: var(--red);
}

.route-card > img {
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  inset: -7px;
  transform: translate3d(var(--route-pan-x), var(--route-pan-y), 0) scale(var(--route-image-scale));
  will-change: transform;
  transition: transform 280ms var(--motion-standard), filter 160ms ease;
}

.route-card::before {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  min-width: 190px;
  padding: 11px 20px 9px;
  border: 4px double currentColor;
  background: rgba(8, 9, 7, 0.94);
  color: var(--route-accent);
  content: attr(data-stamp);
  font-family: var(--display);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 500;
  line-height: 0.9;
  text-align: center;
  letter-spacing: 1px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.35);
  pointer-events: none;
}

.route-card.motion-interacted,
.route-card.is-committed {
  animation: none;
}

.route-card.is-parallax {
  transform: perspective(1100px) translate3d(var(--route-shift-x), calc(var(--route-lift) + var(--route-shift-y)), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
  transition: border-color 180ms ease, box-shadow 220ms ease;
}

.route-card.is-parallax > img {
  transition: none;
}

.route-card.is-pressed,
.route-card:active {
  --route-press-scale: 0.982;
  transform: perspective(1100px) translate3d(var(--route-shift-x), calc(var(--route-lift) + var(--route-shift-y)), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
  filter: brightness(0.94);
  transition-duration: 70ms;
}

.route-card.is-committed {
  --route-press-scale: 0.99;
  border-color: var(--route-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-accent) 54%, transparent), 0 18px 44px rgba(0, 0, 0, 0.42);
}

.route-card.is-committed::before {
  animation: route-commit-stamp 190ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.route-card:focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .route-card:hover {
    --route-lift: -6px;
    --route-image-scale: 1.045;
    z-index: 2;
    transform: perspective(1100px) translate3d(var(--route-shift-x), calc(var(--route-lift) + var(--route-shift-y)), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  }

  .route-card:hover > img {
    transform: translate3d(var(--route-pan-x), var(--route-pan-y), 0) scale(var(--route-image-scale));
  }
}

@media (hover: none), (pointer: coarse) {
  .route-card:hover {
    --route-lift: 0px;
    --route-image-scale: 1;
    z-index: auto;
    transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(var(--route-press-scale));
    box-shadow: none;
  }

  .route-higher:hover,
  .route-lower:hover {
    border-color: var(--line);
  }

  .route-card:hover > img {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.result-success,
.result-escape,
.result-jail {
  --result-accent: var(--gold);
  border-top: 4px solid var(--result-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--result-accent) 20%, transparent);
}

.result-success {
  --result-accent: var(--green);
}

.result-jail {
  --result-accent: var(--red);
}

.result-success .result-copy h1 {
  text-shadow: 0 0 30px rgba(57, 215, 150, 0.16);
}

.result-escape .result-copy h1 {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(221, 185, 54, 0.12);
}

.result-jail .result-copy h1 {
  text-shadow: 0 0 26px rgba(237, 87, 72, 0.14);
}

.result-success .result-rewards,
.result-escape .result-rewards,
.result-jail .result-rewards {
  box-shadow: inset 4px 0 0 var(--result-accent);
}

.result-success .result-art::before {
  animation-duration: 720ms;
}

.result-escape .result-art::before {
  animation-duration: 680ms;
}

.result-jail .result-art::before {
  animation-duration: 300ms;
}

.app > .result-screen.result-jail {
  animation: result-jail-arrive 340ms ease-out 120ms both;
}

@keyframes route-commit-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.45);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.94);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1);
  }
}

@keyframes result-jail-arrive {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.995);
  }
  28% {
    opacity: 1;
    transform: translateX(-4px) scale(1);
  }
  52% {
    transform: translateX(3px) scale(1);
  }
  74% {
    transform: translateX(-1.5px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .route-card::before {
    background: #080907;
  }

  .result-success,
  .result-escape,
  .result-jail {
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  .route-card::before {
    border-width: 5px;
    background: #000;
  }

  .result-success,
  .result-escape,
  .result-jail {
    border-width: 2px;
    border-top-width: 6px;
    box-shadow: none;
  }

  .result-success .result-copy h1,
  .result-escape .result-copy h1,
  .result-jail .result-copy h1 {
    text-shadow: none;
  }
}

/* Live custody recovery stays absent until a real Jobs address is configured. */
.live-recovery {
  margin: 0 0 clamp(34px, 5vw, 64px);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line);
  background: #12130f;
}

.live-recovery > header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.live-recovery-kicker,
.live-recovery > header p,
.live-job-hood small,
.live-job-wait,
.live-claim small {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.live-recovery-kicker {
  color: var(--gold);
}

.live-recovery h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.live-recovery > header p {
  margin: 0 0 0 auto;
  color: var(--red);
  letter-spacing: 0;
}

.live-job-list {
  display: grid;
}

.live-job-card {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(250px, 1.25fr) minmax(180px, auto);
  align-items: center;
  gap: 22px;
  min-height: 116px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.live-job-card.is-jailed {
  box-shadow: inset 4px 0 0 var(--red);
  background: linear-gradient(90deg, rgba(237, 87, 72, 0.1), transparent 38%);
}

.live-job-hood,
.live-job-state,
.live-claim,
.live-claim > span {
  display: flex;
  align-items: center;
}

.live-job-hood {
  gap: 14px;
}

.live-job-hood img,
.live-job-hood .hood-placeholder {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border: 1px solid #555347;
  object-fit: cover;
}

.live-job-hood .hood-placeholder {
  display: grid;
  place-items: center;
  background: #25261f;
  font-family: var(--display);
}

.live-job-hood span,
.live-job-state,
.live-claim > span {
  flex-direction: column;
  align-items: flex-start;
}

.live-job-hood small,
.live-job-state span,
.live-job-wait,
.live-claim small {
  color: var(--muted);
}

.live-job-hood b {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
}

.live-job-state {
  gap: 5px;
}

.live-job-state strong {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.live-job-state > span:not(.live-job-wait) {
  font-size: 14px;
  line-height: 1.4;
}

.live-job-wait b {
  color: var(--gold);
}

.live-job-button,
.live-claim .cta {
  min-height: 58px;
  padding-inline: 22px;
  font-size: 15px;
}

.live-job-button:active,
.live-claim .cta:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

.live-claim {
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  background: rgba(221, 185, 54, 0.08);
}

.live-claim > span {
  gap: 5px;
}

.live-claim b {
  color: var(--gold);
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
}

.live-recovery-loading {
  padding: 28px 24px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 860px) {
  .live-job-card {
    grid-template-columns: 1fr auto;
  }

  .live-job-state {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .live-recovery > header,
  .live-job-card,
  .live-claim {
    padding: 18px;
  }

  .live-recovery > header {
    flex-direction: column;
    gap: 6px;
  }

  .live-recovery > header p {
    margin-left: 0;
  }

  .live-job-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .live-job-state {
    grid-column: auto;
    grid-row: auto;
  }

  .live-job-button,
  .live-claim .cta {
    width: 100%;
  }

  .live-claim {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-job-button,
  .live-claim .cta {
    transition: opacity 160ms ease;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-card,
  .route-card:hover,
  .route-card:active,
  .route-card.is-pressed,
  .route-card.is-parallax,
  .route-card.is-committed,
  .route-card > img {
    transform: none !important;
    will-change: auto;
  }

  .route-card::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .result-success,
  .result-escape,
  .result-jail,
  .result-success .result-art::before,
  .result-escape .result-art::before,
  .result-jail .result-art::before {
    animation: none !important;
    transform: none !important;
  }

  .result-success .result-art::before {
    opacity: 0.16;
  }

  .result-escape .result-art::before {
    opacity: 0.1;
  }

  .result-jail .result-art::before {
    opacity: 0.62;
  }
}

@media (max-width: 430px) {
  .topbar,
  .job-shell,
  .fineprint {
    width: calc(100% - 20px);
  }

  .brand span small {
    display: none;
  }

  .wallet {
    min-width: 104px;
  }

  .hood-grid {
    grid-template-columns: 1fr;
  }

  .hood-card {
    grid-template-rows: minmax(280px, 1fr) auto;
  }

  .ticket-facts {
    grid-template-columns: 1fr;
  }

  .ticket-facts p,
  .ticket-facts p:nth-child(2) {
    min-height: 70px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ticket-facts p:last-child {
    border-bottom: 0;
  }

  .route-key {
    font-size: 7px;
  }

  .active-hood {
    max-width: 100%;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .rules-grid p,
  .rules-grid p:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rules-grid p:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .story-hood,
  .scene-hood,
  .active-hood,
  .scene-loot,
  .intro-art span {
    background: #11120f;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #c2bfb2;
    --line: #69695e;
  }

  .story-hood,
  .scene-hood,
  .active-hood {
    background: #080907;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .app > section,
  .app > .stage-layout {
    animation: reduced-fade 160ms ease-out both !important;
  }

  .intro-art img,
  .active-bg,
  .result-art > img,
  .bars i,
  .roll-number i::after {
    transform: none !important;
  }
}

/* RWA game scale, identity dossier and level frames */
body {
  font-size: 18px;
}

.topbar,
.job-shell,
.fineprint {
  width: min(calc(100% - 40px), 1680px);
}

.topbar {
  min-height: 124px;
}

.brand img {
  width: 72px;
  height: 72px;
  margin-right: 0;
}

.brand b {
  font-size: 28px;
  letter-spacing: 0.5px;
}

.brand small,
.hideout-title small {
  font-size: 12px;
}

.hideout-title strong {
  font-size: 44px;
  letter-spacing: 0.7px;
}

.wallet {
  min-width: 184px;
  min-height: 60px;
  font-size: 15px;
}

.job-shell {
  padding-block: 36px 82px;
}

.mission-steps {
  margin-bottom: 42px;
}

.mission-step {
  min-height: 70px;
  font-size: 14px;
}

.mission-step i {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.eyebrow,
.stage-header > span {
  font-size: 15px;
}

.intro {
  height: clamp(700px, calc(100svh - 190px), 850px);
  min-height: 700px;
  grid-template-columns: minmax(590px, 0.98fr) minmax(0, 1.22fr);
}

.intro-copy {
  padding: clamp(46px, 4.5vw, 76px);
}

.intro h1 {
  font-size: clamp(88px, 6.3vw, 118px);
  letter-spacing: -0.025em;
}

.intro-copy > p {
  max-width: 500px;
  font-size: clamp(20px, 1.4vw, 24px);
}

.intro-copy > small {
  font-size: 13px;
  line-height: 1.55;
}

.cta,
.secondary {
  min-height: 64px;
  padding-inline: 32px;
  font-size: 15px;
}

.stage-header {
  margin-bottom: 34px;
}

.stage-header h1 {
  font-size: clamp(74px, 6.8vw, 118px);
  letter-spacing: -0.02em;
}

.stage-header > p {
  max-width: 740px;
  font-size: 20px;
}

.hood-stage .stage-header > p {
  max-width: 440px;
}

.hood-grid {
  gap: 22px;
}

.caste-group {
  margin-top: 46px;
}

.caste-group-head,
.caste-group-header {
  min-height: 56px;
  margin-bottom: 18px;
  font-size: 14px;
}

.hood-card {
  grid-template-rows: minmax(370px, 1fr) auto;
  border-top-width: 5px;
}

.hood-card-copy {
  min-height: 194px;
  padding: 25px 26px;
}

.hood-card-copy i {
  font-size: 14px;
}

.hood-card-copy strong {
  margin-top: 9px;
  font-size: 46px;
}

.hood-card-copy small {
  font-size: 13px;
  line-height: 1.4;
}

.hood-card-level {
  max-width: calc(100% - 4px);
  padding: 7px 10px;
  white-space: normal;
}

.hood-card-traits {
  display: grid;
  gap: 4px;
  margin-top: 11px !important;
  color: #c7c3b6 !important;
}

.hood-card-traits span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-layout {
  grid-template-columns: minmax(410px, 450px) minmax(0, 1fr);
  gap: clamp(46px, 4vw, 72px);
}

.hood-dossier {
  --level-accent: #797d78;
  max-width: 450px;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--level-accent) 72%, var(--line));
  border-top: 6px solid var(--level-accent);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34), 0 0 34px color-mix(in srgb, var(--level-accent) 10%, transparent);
}

.hood-dossier::before {
  position: absolute;
  z-index: 5;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--level-accent) 42%, transparent);
  clip-path: polygon(0 0, 34px 0, 34px 2px, 2px 2px, 2px 34px, 0 34px, 0 0, 100% 0, 100% 34px, calc(100% - 2px) 34px, calc(100% - 2px) 2px, calc(100% - 34px) 2px, calc(100% - 34px) 0, 100% 0, 100% 100%, calc(100% - 34px) 100%, calc(100% - 34px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 34px), 100% calc(100% - 34px), 100% 100%, 0 100%, 0 calc(100% - 34px), 2px calc(100% - 34px), 2px calc(100% - 2px), 34px calc(100% - 2px), 34px 100%, 0 100%);
  content: "";
  pointer-events: none;
}

.level-frame-iron { --level-accent: #858984; }
.level-frame-bronze { --level-accent: #c77a42; }
.level-frame-silver { --level-accent: #c7d0d7; }
.level-frame-gold { --level-accent: #efc946; }
.level-frame-crown { --level-accent: #ff63b8; }
.level-frame-unranked { --level-accent: #676961; }

.level-frame-crown.hood-dossier,
.level-frame-crown.hood-card {
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.42), 0 0 36px rgba(255, 92, 168, 0.16);
}

.hood-card[class*="level-frame-"] {
  border-color: color-mix(in srgb, var(--level-accent) 68%, var(--line));
  border-top-color: var(--level-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--level-accent) 22%, transparent);
}

.hood-card[class*="level-frame-"]:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--level-accent) 36%, transparent);
}

.hood-card.level-frame-crown {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38), 0 0 34px rgba(255, 92, 168, 0.14), inset 0 0 0 1px rgba(255, 92, 168, 0.3);
}

.dossier-art {
  position: relative;
}

.dossier-art::after {
  position: absolute;
  inset: 0;
  border: 3px solid color-mix(in srgb, var(--level-accent) 76%, transparent);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.34);
  content: "";
  pointer-events: none;
}

.portrait-tag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(8, 9, 7, 0.86);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.level-seal,
.hood-level-seal {
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--level-accent) 80%, white 10%);
  background: rgba(8, 9, 7, 0.9);
  color: var(--level-accent);
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.level-seal {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  min-width: 110px;
  padding: 10px 12px;
}

.level-seal b,
.hood-level-seal b {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  line-height: 0.92;
}

.level-seal small,
.hood-level-seal small {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.hood-level-seal {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  min-width: 94px;
  padding: 9px 10px;
}

.dossier-head {
  padding: 20px 24px 0;
}

.dossier-head button,
.ready-dot {
  font-size: 12px;
}

.hood-dossier h2 {
  margin: 20px 24px 0;
  font-size: 56px;
}

.caste-tag {
  margin: 10px 24px 23px;
  font-size: 14px;
}

.xp-copy {
  padding-inline: 24px;
  font-size: 12px;
}

.xp-track {
  height: 7px;
  margin: 10px 24px 22px;
}

.dossier-stats {
  margin-inline: 24px;
}

.dossier-stats p {
  min-height: 118px;
  justify-content: center;
  padding-block: 19px;
}

.dossier-stats b {
  font-size: 42px;
  line-height: 1;
}

.dossier-stats .take-stat b {
  color: var(--green);
}

.dossier-stats .risk-stat b,
.dossier-stats .level-offline b {
  color: var(--red);
}

.dossier-stats span {
  max-width: 170px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
}

.instinct {
  margin: 22px 24px;
}

.instinct small {
  font-size: 12px;
}

.instinct b {
  font-size: 15px;
}

.instinct span {
  font-size: 14px;
}

.hood-traits {
  margin: 0 24px 22px;
  padding-top: 18px;
}

.hood-traits > small {
  margin-bottom: 12px;
  font-size: 12px;
}

.trait-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trait-chip {
  display: flex;
  min-width: 0;
  min-height: 62px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 42%, var(--line));
  background: #1d1e19;
}

.trait-chip b {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
}

.trait-chip em {
  margin-top: 5px;
  color: #d8d4c6;
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.level-note {
  margin: 0 24px 24px;
  padding-top: 16px;
}

.level-note header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.level-note header b {
  color: var(--level-accent);
}

.level-note p {
  flex-wrap: wrap;
  margin: 13px 0 10px;
}

.level-note p b {
  padding: 6px 8px;
  border: 1px solid #45463e;
  background: #1f201b;
  font-size: 11px;
}

.next-level {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  padding: 12px;
  border-left: 3px solid var(--level-accent);
  background: color-mix(in srgb, var(--level-accent) 8%, #171813);
  font-family: var(--mono);
}

.next-level small {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--level-accent);
  font-size: 11px;
  font-weight: 900;
}

.next-level b {
  color: #d7d3c6;
  font-size: 11px;
}

.level-note > em {
  margin-top: 11px;
  color: var(--gold);
  font-size: 10px;
  line-height: 1.45;
}

.progress-note {
  margin: 0 24px 24px;
  font-size: 12px;
}

.story-hood,
.scene-hood {
  gap: 14px;
  max-width: min(100%, 430px);
  padding: 10px 16px 10px 10px;
  border-color: color-mix(in srgb, var(--level-accent) 82%, white 8%);
  border-left-color: var(--level-accent);
  border-left-width: 5px;
}

.story-hood.level-frame-unranked,
.scene-hood.level-frame-unranked {
  --level-accent: var(--caste-accent);
}

.story-hood img,
.scene-hood img {
  width: 92px;
  height: 92px;
  border: 2px solid color-mix(in srgb, var(--level-accent) 72%, transparent);
}

.story-hood-copy small,
.scene-hood-copy small {
  order: -1;
  margin: 0 0 6px;
  color: var(--level-accent);
  font-size: 10px;
}

.story-hood-copy b,
.scene-hood-copy b {
  font-size: 32px;
}

.story-hood-copy em,
.scene-hood-copy em {
  margin-top: 6px;
  color: #bdb9ac;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.vault-card {
  min-height: 500px;
  padding: 30px;
}

.vault-mark {
  width: 128px;
  height: 128px;
}

.vault-mark.spy {
  width: 184px;
}

.vault-copy small,
.vault-take i,
.vault-copy b,
.vault-take b {
  font-size: 13px;
}

.route-head h1 {
  font-size: clamp(58px, 5.2vw, 86px);
}

.route-card {
  min-height: 590px;
}

.route-copy {
  padding: 28px;
}

.route-copy strong {
  font-size: clamp(50px, 3.7vw, 68px);
}

.route-copy small {
  max-width: 420px;
  font-size: 17px;
}

.route-copy i,
.route-copy b,
.market-badge {
  font-size: 13px;
}

.route-card > .story-hood-route {
  max-width: 330px;
}

.route-card > .story-hood-route img {
  width: 88px;
  height: 88px;
}

.route-card > .scene-loot-route {
  top: 128px;
}

.scene-identity-note {
  margin: 15px 0 0;
  color: #aaa79b;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.route-key {
  margin-top: 8px;
  font-size: 12px;
}

.ticket-facts p {
  min-height: 126px;
  padding: 22px;
}

.ticket-facts small {
  font-size: 11px;
}

.ticket-facts b {
  font-size: 14px;
}

.risk-check {
  padding: 22px;
  font-size: 17px;
}

.active-job,
.result-screen {
  min-height: min(760px, calc(100vh - 210px));
}

.story-hood.active-hood > img {
  width: 112px;
  height: 112px;
  margin-right: 0;
}

.active-content > p {
  max-width: 680px;
  font-size: 20px;
}

.result-art > .story-hood-result img {
  width: 220px;
  height: 220px;
}

.result-art > .story-hood-result .story-hood-copy b {
  font-size: 40px;
}

.result-copy > p {
  font-size: 19px;
}

.result-rewards p {
  padding: 18px;
}

.result-rewards small,
.result-rewards b {
  font-size: 12px;
}

.fineprint summary {
  min-height: 62px;
  font-size: 12px;
}

.rules-grid span {
  font-size: 14px;
}

@media (max-width: 1180px) {
  .topbar,
  .job-shell,
  .fineprint {
    width: min(calc(100% - 32px), 1140px);
  }

  .intro {
    grid-template-columns: minmax(470px, 0.95fr) minmax(0, 1.05fr);
  }

  .intro h1 {
    font-size: clamp(76px, 7.5vw, 96px);
  }

  .stage-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 30px;
  }

  .hood-dossier {
    max-width: 340px;
  }

  .dossier-stats b {
    font-size: 34px;
  }

  .trait-chips {
    grid-template-columns: 1fr;
  }

  .hood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-card {
    min-height: 176px;
  }

  .route-card {
    min-height: 560px;
  }

  .route-card > .story-hood-route {
    max-width: 250px;
  }

  .route-card > .story-hood-route img {
    width: 72px;
    height: 72px;
  }

  .story-hood-copy b,
  .scene-hood-copy b {
    font-size: 26px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 17px;
  }

  .intro {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar,
  .job-shell,
  .fineprint {
    width: calc(100% - 20px);
  }

  .topbar {
    min-height: 82px;
  }

  .brand img {
    width: 52px;
    height: 52px;
    margin-right: 11px;
  }

  .brand b {
    font-size: 20px;
  }

  .brand small {
    font-size: 9px;
  }

  .wallet {
    min-width: 120px;
    min-height: 46px;
    font-size: 12px;
  }

  .job-shell {
    padding-block: 20px 46px;
  }

  .mission-steps {
    margin-bottom: 24px;
  }

  .mission-step {
    min-height: 48px;
  }

  .mission-step i {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .intro-copy {
    width: 100%;
    min-width: 0;
    min-height: 520px;
    padding: 38px 24px;
  }

  .intro h1 {
    font-size: clamp(45px, 14.2vw, 62px);
  }

  .intro-copy > p {
    font-size: 19px;
  }

  .intro-copy > small {
    font-size: 11px;
  }

  .cta,
  .secondary {
    min-height: 60px;
    font-size: 14px;
  }

  .stage-header h1 {
    font-size: clamp(60px, 17vw, 84px);
  }

  .stage-header > p {
    font-size: 18px;
  }

  .hood-grid {
    grid-template-columns: 1fr;
  }

  .hood-card {
    grid-template-rows: clamp(310px, 82vw, 520px) auto;
  }

  .hood-card-copy {
    min-height: 180px;
    padding: 22px;
  }

  .hood-card-copy strong {
    font-size: 42px;
  }

  .hood-card-copy i,
  .hood-card-copy small {
    font-size: 12px;
  }

  .stage-layout {
    gap: 28px;
  }

  .hood-dossier {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }

  .dossier-art {
    grid-row: 1 / span 5;
    min-height: 214px;
  }

  .portrait-tag {
    top: 10px;
    left: 10px;
    padding: 6px 7px;
    font-size: 9px;
  }

  .level-seal {
    right: 10px;
    bottom: 10px;
    min-width: 84px;
    padding: 8px;
  }

  .level-seal b {
    font-size: 28px;
  }

  .dossier-head,
  .hood-dossier h2,
  .caste-tag,
  .xp-copy,
  .xp-track {
    grid-column: 2;
  }

  .dossier-head {
    padding: 15px 15px 0;
  }

  .dossier-head button,
  .ready-dot {
    font-size: 9px;
  }

  .hood-dossier h2 {
    margin: 10px 15px 0;
    font-size: 38px;
  }

  .caste-tag {
    margin: 6px 15px 11px;
    font-size: 11px;
  }

  .xp-copy {
    padding-inline: 15px;
    font-size: 9px;
  }

  .xp-track {
    height: 6px;
    margin: 7px 15px 14px;
  }

  .dossier-stats,
  .hood-traits,
  .progress-note,
  .level-note {
    display: grid;
    grid-column: 1 / -1;
  }

  .dossier-stats {
    grid-template-columns: 1fr 1fr;
    margin: 0 18px;
  }

  .dossier-stats p {
    min-height: 108px;
  }

  .dossier-stats b {
    font-size: 36px;
  }

  .dossier-stats span {
    font-size: 10px;
  }

  .instinct {
    display: none;
  }

  .hood-traits {
    margin: 20px 18px;
  }

  .trait-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trait-chip {
    min-height: 70px;
  }

  .trait-chip em {
    font-size: 13px;
  }

  .level-note,
  .progress-note {
    margin: 0 18px 20px;
  }

  .level-note header {
    font-size: 10px;
  }

  .next-level {
    grid-template-columns: 1fr;
  }

  .next-level small {
    grid-row: auto;
  }

  .vault-card {
    min-height: 150px;
  }

  .route-card {
    min-height: 560px;
  }

  .route-card > .story-hood-route {
    top: 68px;
    left: 12px;
    max-width: 270px;
  }

  .route-card > .story-hood-route img {
    width: 78px;
    height: 78px;
  }

  .route-card > .scene-loot-route {
    top: 174px;
  }

  .route-copy {
    padding: 24px;
  }

  .route-copy strong {
    font-size: 50px;
  }

  .route-copy small {
    font-size: 17px;
  }

  .scene-identity-note {
    font-size: 10px;
    line-height: 1.5;
  }

  .route-key {
    font-size: 9px;
  }

  .ticket-facts small {
    font-size: 10px;
  }

  .ticket-facts b {
    font-size: 14px;
  }

  .risk-check {
    font-size: 16px;
  }

  .active-job,
  .roll-screen,
  .result-screen {
    min-height: 680px;
  }

  .story-hood.active-hood > img {
    width: 92px;
    height: 92px;
  }

  .active-content > p {
    font-size: 18px;
  }

  .result-art > .story-hood-result img {
    width: 126px;
    height: 126px;
  }

  .result-art > .story-hood-result .story-hood-copy b {
    font-size: 30px;
  }

  .result-copy > p {
    font-size: 18px;
  }
}

@media (max-width: 430px) {
  .brand b {
    font-size: 18px;
  }

  .wallet {
    min-width: 108px;
    padding-inline: 12px;
  }

  .hood-dossier {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .dossier-art {
    min-height: 196px;
  }

  .hood-dossier h2 {
    font-size: 32px;
  }

  .dossier-stats {
    margin-inline: 14px;
  }

  .dossier-stats b {
    font-size: 31px;
  }

  .hood-traits,
  .level-note,
  .progress-note {
    margin-right: 14px;
    margin-left: 14px;
  }

  .trait-chip {
    padding: 9px;
  }

  .trait-chip em {
    font-size: 12px;
  }

  .route-card > .story-hood-route {
    max-width: 250px;
  }

  .route-card > .story-hood-route img {
    width: 70px;
    height: 70px;
  }

  .story-hood-copy b,
  .scene-hood-copy b {
    font-size: 24px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .level-seal,
  .hood-level-seal,
  .portrait-tag,
  .story-hood,
  .scene-hood {
    background: #11120f;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .hood-dossier,
  .hood-card,
  .trait-chip,
  .level-seal,
  .hood-level-seal {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hood-dossier,
  .hood-card,
  .story-hood,
  .level-seal,
  .hood-level-seal {
    animation: reduced-fade 160ms ease-out both !important;
    transform: none !important;
  }
}

/* Live RWA display feed */
.market-quote-card {
  --market-accent: var(--gold);
  width: 100%;
  overflow: hidden;
  border: 1px solid #505046;
  border-top: 4px solid var(--market-accent);
  background: rgba(17, 18, 15, 0.96);
  color: var(--paper);
  text-align: left;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
}

.market-quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 88px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.market-asset {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.market-asset > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.market-asset small,
.market-mid small,
.market-quote-facts small,
.market-entry-strip small,
.market-feed-error small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.market-asset b {
  margin-top: 5px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.market-asset b i {
  margin-left: 5px;
  color: #a5a296;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.7px;
}

.market-logo {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6d4cc;
  background: #f6f6f4;
}

.market-logo img {
  width: 48px;
  max-height: 48px;
  object-fit: contain;
}

.market-logo.apple img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transform: scale(3.35);
}

.market-logo.tesla img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transform: scale(2.15);
}

.market-feed-status {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 10px;
  border: 1px solid currentColor;
  color: var(--green);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.market-feed-status i {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.market-feed-status.status-stale,
.market-feed-status.status-halted {
  color: var(--gold);
}

.market-feed-status.status-offline {
  color: var(--red);
}

.market-quote-main {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(300px, 1.28fr);
  align-items: stretch;
  min-height: 178px;
  border-bottom: 1px solid var(--line);
}

.market-mid {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border-right: 1px solid var(--line);
}

.market-mid strong {
  margin-top: 7px;
  font-family: var(--display);
  font-size: clamp(48px, 4.8vw, 74px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.market-mid em {
  margin-top: 9px;
  color: var(--market-accent);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.market-chart-wrap {
  position: relative;
  min-width: 0;
  min-height: 164px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}

.market-sparkline {
  display: block;
  width: 100%;
  height: 164px;
  outline: 0;
  cursor: crosshair;
  touch-action: pan-y;
}

.market-sparkline:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.market-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #77776d;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.8px;
  pointer-events: none;
}

.market-chart-empty[hidden],
.market-chart-tooltip[hidden] {
  display: none;
}

.market-chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 144px;
  padding: 7px 9px;
  border: 1px solid #747368;
  background: #090a08;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.market-quote-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.market-quote-facts p {
  display: flex;
  min-width: 0;
  min-height: 74px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 12px 15px;
  border-right: 1px solid var(--line);
}

.market-quote-facts p:last-child {
  border-right: 0;
}

.market-quote-facts b {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.market-entry-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(221, 185, 54, 0.055);
}

.market-entry-strip > p {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

.market-entry-strip > span {
  color: #77776d;
  font-family: var(--display);
  font-size: 28px;
}

.market-entry-strip p b {
  margin-top: 3px;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 500;
}

.market-entry-strip p em {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.market-direction {
  min-width: 132px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.market-move-higher .market-direction,
.market-move-higher .market-mid strong {
  color: var(--green);
}

.market-move-lower .market-direction,
.market-move-lower .market-mid strong {
  color: var(--red);
}

.market-move-neutral .market-direction {
  color: var(--gold);
}

.market-entry-strip.waiting-tick .market-direction {
  color: #a6a398;
}

.market-quote-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 16px;
  background: #0d0e0b;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.6px;
}

.market-quote-card > footer b {
  flex: 0 0 auto;
  color: var(--gold);
}

.market-quote-card > footer span {
  color: #74736a;
  text-align: right;
}

.market-feed-error {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}

.market-feed-error strong {
  margin-top: 8px;
  color: var(--red);
  font-family: var(--display);
  font-size: 44px;
  font-weight: 500;
}

.market-feed-error p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.market-refresh {
  width: fit-content;
  margin-top: 16px;
}

.route-stage .market-context-route,
.confirm-stage .market-context-confirm {
  margin-bottom: 26px;
}

.vault-card .market-context-vault {
  margin: 24px 0;
}

.market-context-vault .market-quote-head {
  min-height: 70px;
  padding: 10px;
}

.market-context-vault .market-logo {
  width: 48px;
  height: 48px;
}

.market-context-vault .market-asset small,
.market-context-vault .market-asset b i {
  display: none;
}

.market-context-vault .market-asset b {
  margin: 0;
  font-size: 26px;
}

.market-context-vault .market-feed-status {
  min-height: 28px;
  padding-inline: 7px;
  font-size: 8px;
}

.market-context-vault .market-quote-main {
  display: block;
}

.market-context-vault .market-mid {
  min-height: 112px;
  padding: 16px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.market-context-vault .market-mid strong {
  font-size: clamp(42px, 3.5vw, 56px);
}

.market-context-vault .market-chart-wrap,
.market-context-vault .market-sparkline {
  min-height: 126px;
  height: 126px;
}

.market-context-vault .market-quote-facts {
  grid-template-columns: 1fr 1fr;
}

.market-context-vault .market-quote-facts p {
  min-height: 62px;
}

.market-context-vault .market-quote-facts p:nth-child(2) {
  border-right: 0;
}

.market-context-vault .market-quote-facts p:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.market-context-vault > footer {
  display: block;
  font-size: 8px;
}

.market-context-vault > footer span {
  display: none;
}

.vault-card {
  min-height: 780px;
}

.active-content .market-context-active {
  width: min(100%, 940px);
  margin: 28px auto 8px;
  background: rgba(12, 13, 11, 0.94);
  backdrop-filter: blur(18px) saturate(120%);
}

.active-content .market-context-active .market-quote-main {
  min-height: 150px;
}

.active-content .market-context-active .market-chart-wrap,
.active-content .market-context-active .market-sparkline {
  min-height: 144px;
  height: 144px;
}

.result-copy .market-context-result {
  margin-top: 24px;
}

.market-context-result .market-quote-main {
  grid-template-columns: 1fr;
}

.market-context-result .market-mid {
  min-height: 128px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.market-context-result .market-mid strong {
  font-size: 56px;
}

.market-context-result .market-chart-wrap,
.market-context-result .market-sparkline {
  min-height: 132px;
  height: 132px;
}

.market-context-result .market-entry-strip {
  grid-template-columns: 1fr auto 1fr;
}

.market-context-result .market-direction {
  grid-column: 1 / -1;
  text-align: left;
}

.result-feed-unavailable .result-art > span:not(.story-hood):not(.scene-loot):not(.result-crew-badge):not(.result-fx):not(.result-verdict) {
  color: var(--red);
}

.result-feed-unavailable .result-copy h1 {
  color: var(--red);
}

.result-copy .feed-reason,
.result-copy .oracle-disclaimer {
  padding: 13px 15px;
  border-left: 3px solid var(--red);
  background: var(--red-dark);
  color: #d4cfc1;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

.result-copy .oracle-disclaimer {
  border-left-color: var(--gold);
  background: rgba(221, 185, 54, 0.06);
}

.result-copy .oracle-disclaimer b {
  color: var(--gold);
}

.feed-retry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.feed-retry-actions .cta,
.feed-retry-actions .secondary {
  margin: 0;
}

@media (max-width: 1300px) {
  .vault-grid {
    grid-template-columns: 1fr;
  }

  .vault-card {
    display: grid;
    min-height: 0;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
  }

  .vault-card .market-context-vault {
    grid-column: 1 / -1;
    margin-block: 4px;
  }

  .vault-card .vault-copy,
  .vault-card .vault-take {
    margin: 0;
  }

  .vault-card .vault-take {
    min-width: 170px;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .market-context-vault .market-quote-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  }

  .market-context-vault .market-mid {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .market-context-vault .market-quote-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .market-context-vault .market-quote-facts p,
  .market-context-vault .market-quote-facts p:nth-child(2) {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .market-context-vault .market-quote-facts p:last-child {
    border-right: 0;
  }
}

@media (max-width: 1180px) {
  .vault-card .market-context-vault {
    grid-column: 1 / -1;
    width: 100%;
    margin-block: 4px;
  }

  .vault-card {
    min-height: 0;
  }

  .market-context-vault .market-quote-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  }

  .market-context-vault .market-mid {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .market-context-vault .market-quote-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .market-context-vault .market-quote-facts p,
  .market-context-vault .market-quote-facts p:nth-child(2) {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .market-context-vault .market-quote-facts p:last-child {
    border-right: 0;
  }

  .market-quote-main {
    grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1.35fr);
  }

  .market-entry-strip {
    grid-template-columns: 1fr auto 1fr;
  }

  .market-direction {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .vault-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .vault-card .vault-take {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 13px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .market-quote-card {
    border-top-width: 3px;
  }

  .market-quote-head {
    min-height: 76px;
    gap: 10px;
    padding: 10px;
  }

  .market-logo {
    width: 52px;
    height: 52px;
  }

  .market-asset {
    gap: 9px;
  }

  .market-asset small {
    font-size: 8px;
  }

  .market-asset b {
    font-size: 25px;
  }

  .market-asset b i {
    display: none;
  }

  .market-feed-status {
    min-height: 29px;
    padding-inline: 7px;
    font-size: 8px;
  }

  .market-quote-main,
  .market-context-vault .market-quote-main {
    display: block;
  }

  .market-mid,
  .market-context-vault .market-mid {
    min-height: 118px;
    padding: 17px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .market-mid strong,
  .market-context-vault .market-mid strong,
  .market-context-result .market-mid strong {
    font-size: 52px;
  }

  .market-chart-wrap,
  .market-sparkline,
  .market-context-vault .market-chart-wrap,
  .market-context-vault .market-sparkline {
    min-height: 142px;
    height: 142px;
  }

  .market-quote-facts,
  .market-context-vault .market-quote-facts {
    grid-template-columns: 1fr 1fr;
  }

  .market-quote-facts p,
  .market-context-vault .market-quote-facts p,
  .market-context-vault .market-quote-facts p:nth-child(2) {
    min-height: 68px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .market-quote-facts p:nth-child(2n),
  .market-context-vault .market-quote-facts p:nth-child(2n) {
    border-right: 0;
  }

  .market-quote-facts p:nth-last-child(-n + 2),
  .market-context-vault .market-quote-facts p:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .market-entry-strip,
  .market-context-result .market-entry-strip {
    grid-template-columns: 1fr auto 1fr;
    gap: 9px;
    padding: 13px;
  }

  .market-entry-strip p b {
    font-size: 27px;
  }

  .market-direction {
    grid-column: 1 / -1;
    width: 100%;
    text-align: left;
  }

  .market-quote-card > footer {
    display: block;
    font-size: 8px;
  }

  .market-quote-card > footer span {
    display: block;
    margin-top: 5px;
    text-align: left;
  }

  .vault-card .market-context-vault {
    grid-column: 1 / -1;
    margin-block: 8px;
  }

  .active-content .market-context-active {
    margin-top: 22px;
    backdrop-filter: none;
  }

  .active-content .market-context-active .market-quote-head,
  .active-content .market-context-active .market-quote-facts,
  .active-content .market-context-active > footer {
    text-align: left;
  }

  .feed-retry-actions {
    flex-direction: column;
  }

  .feed-retry-actions button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .market-logo {
    width: 46px;
    height: 46px;
  }

  .market-asset b {
    font-size: 23px;
  }

  .market-feed-status {
    font-size: 7px;
  }

  .market-mid strong,
  .market-context-vault .market-mid strong,
  .market-context-result .market-mid strong {
    font-size: 46px;
  }

  .market-entry-strip p b {
    font-size: 24px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .market-quote-card,
  .active-content .market-context-active {
    background: #11120f;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .market-quote-card,
  .market-logo,
  .market-feed-status,
  .market-chart-tooltip {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-quote-card,
  .market-feed-status i {
    animation: none !important;
    transition: none !important;
  }
}

/* Final legibility pass: the game should read at a glance, never like a terminal. */
.intro-art img {
  object-fit: cover;
  object-position: 70% 50%;
}

.level-seal small,
.hood-level-seal small,
.dossier-stats span,
.trait-chip b,
.level-note header,
.level-note p b,
.next-level small,
.next-level b,
.level-note > em,
.market-asset small,
.market-mid small,
.market-quote-facts small,
.market-entry-strip small,
.market-feed-error small,
.market-chart-empty {
  font-size: 12px;
}

.trait-chip em,
.market-asset b i,
.market-mid em,
.market-feed-status,
.market-direction {
  font-size: 13px;
}

.market-quote-facts p b {
  font-size: 15px;
}

.market-entry-strip p em,
.market-chart-tooltip,
.market-quote-card > footer {
  font-size: 11px;
}

.result-art > .story-hood-result {
  top: 112px;
  bottom: auto;
}

@media (max-width: 760px) {
  .intro-art img {
    object-position: 68% 50%;
  }

  .result-art > .story-hood-result {
    top: 96px;
    bottom: auto;
  }

  .market-asset small,
  .market-mid small,
  .market-quote-facts small,
  .market-entry-strip small,
  .market-feed-error small,
  .market-chart-empty,
  .market-feed-status,
  .market-quote-card > footer {
    font-size: 11px;
  }
}

/* Keep the crew/quote simplification last in the cascade. */
.stage-layout.stage-layout-full {
  display: block;
}

.vault-card {
  min-height: 500px;
}

.vault-card .market-context-vault {
  margin: 22px 0;
}

.route-stage .market-context-route {
  width: min(100%, 620px);
  margin-bottom: 20px;
}

.market-quote-main {
  grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
}

.route-card > .scene-loot-route {
  top: 16px;
  right: auto;
  left: 16px;
  max-width: calc(100% - 150px);
  padding: 10px 12px;
}

@media (max-width: 1300px) {
  .vault-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .intro h1 {
    font-size: clamp(40px, 12.8vw, 62px);
    white-space: nowrap;
  }

  .intro h1 > .hero-wide,
  .intro h1 > em {
    font-size: 0.72em;
  }

  .hood-dossier.crew-dossier {
    display: block;
    padding-bottom: 12px;
  }

  .crew-dossier h2 {
    margin: 18px 18px 2px;
    font-size: 42px;
  }

  .crew-dossier .caste-tag {
    margin-inline: 18px;
  }

  .crew-dossier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 12px;
  }

  .crew-dossier-row {
    padding: 9px;
  }

  .crew-dossier-row b {
    font-size: 23px;
  }

  .crew-dossier-row small,
  .crew-dossier .dossier-stats,
  .crew-dossier .progress-note {
    display: none;
  }

  .crew-dossier-row,
  .confirm-crew-row,
  .crew-outcome-list > span {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .crew-dossier-row em,
  .confirm-crew-row em,
  .crew-outcome-list em {
    justify-self: start;
  }

  .crew-dossier-row small,
  .confirm-crew-row small,
  .crew-outcome-list small {
    grid-column: 1;
  }

  .vault-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .vault-mark,
  .vault-mark.spy {
    width: 92px;
    height: 92px;
  }

  .vault-mark.spy img {
    width: 82px;
  }

  .vault-copy {
    margin-top: 0;
  }

  .route-head h1 {
    font-size: clamp(40px, 11.5vw, 58px);
    line-height: 0.92;
  }

  .market-quote-main {
    display: block;
  }
}

/* Route decision: one readable situation, then two explicit moves. */
.route-stage.stage-layout-full .stage-main {
  width: min(100%, 1280px);
}

.route-scene {
  position: relative;
  min-height: 330px;
  margin: 18px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 5.8;
  border: 1px solid var(--line);
  background: #0c0d0b;
  isolation: isolate;
  animation: route-scene-arrive 420ms var(--motion-standard) both;
}

.route-scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.012);
}

.route-scene-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 5, 0.88) 0%, rgba(5, 6, 5, 0.6) 38%, rgba(5, 6, 5, 0.08) 70%),
    linear-gradient(0deg, rgba(5, 6, 5, 0.76) 0%, transparent 42%);
}

.route-scene figcaption {
  position: absolute;
  z-index: 2;
  bottom: clamp(28px, 4vw, 54px);
  left: clamp(24px, 4vw, 58px);
  width: min(620px, calc(100% - 48px));
  margin: 0;
  color: var(--paper);
}

.route-scene figcaption > span,
.route-choice-head > span {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.route-scene figcaption h1 {
  max-width: 620px;
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.route-scene figcaption p {
  max-width: 520px;
  margin: 12px 0 0;
  color: #d8d5ca;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 650;
  line-height: 1.35;
}

.route-crew-badge {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  display: flex;
  max-width: min(420px, calc(100% - 40px));
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(239, 234, 218, 0.48);
  background: rgba(7, 8, 7, 0.78);
  color: var(--paper);
  backdrop-filter: blur(16px) saturate(130%);
}

.route-crew-badge b,
.route-crew-badge small {
  font-family: var(--mono);
  font-weight: 900;
  white-space: nowrap;
}

.route-crew-badge b {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.8px;
}

.route-crew-badge small {
  min-width: 0;
  overflow: hidden;
  color: #d6d2c5;
  font-size: 10px;
  letter-spacing: 0.35px;
  text-overflow: ellipsis;
}

.route-decision-meta {
  margin: 12px 0 0;
}

.route-stage .route-decision-meta .market-context-route {
  width: 100%;
  margin: 0;
}

.route-choice-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(24px, 3vw, 38px) 0 14px;
}

.route-choice-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  text-align: right;
}

.route-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.route-action {
  --route-accent: var(--gold);
  --route-press-scale: 1;
  --route-shift-x: 0px;
  --route-shift-y: 0px;
  --route-tilt-x: 0deg;
  --route-tilt-y: 0deg;
  position: relative;
  display: grid;
  min-height: 190px;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--route-accent) 38%, var(--line));
  background: #121310;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transform: perspective(1100px) translate3d(var(--route-shift-x), var(--route-shift-y), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms var(--motion-standard), border-color 160ms ease, background-color 160ms ease, box-shadow 220ms ease;
}

.route-action.route-higher {
  --route-accent: var(--green);
  animation: route-enter-left 400ms var(--motion-standard) 60ms backwards;
}

.route-action.route-lower {
  --route-accent: var(--red);
  animation: route-enter-right 400ms var(--motion-standard) 95ms backwards;
}

.route-action-direction {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 22px 16px;
  border-right: 1px solid color-mix(in srgb, var(--route-accent) 42%, var(--line));
  background: color-mix(in srgb, var(--route-accent) 12%, #0c0d0b);
  color: var(--route-accent);
}

.route-action-direction i {
  font-family: var(--display);
  font-size: 54px;
  font-style: normal;
  font-weight: 500;
  line-height: 0.7;
}

.route-action-direction b {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 0.9;
}

.route-action-direction small {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.route-action-copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}

.route-action-copy > i {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.route-action-copy > strong {
  margin-top: 9px;
  font-family: var(--display);
  font-size: clamp(32px, 2.7vw, 46px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.route-action-copy > small {
  max-width: 430px;
  margin-top: 11px;
  color: #bdb9ad;
  font-size: 15px;
  line-height: 1.4;
}

.route-action-arrow {
  align-self: center;
  padding: 18px;
  color: var(--route-accent);
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  transition: transform 180ms var(--motion-standard);
}

.route-action::before {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  min-width: 180px;
  padding: 11px 18px 9px;
  border: 4px double currentColor;
  background: rgba(7, 8, 7, 0.96);
  color: var(--route-accent);
  content: attr(data-stamp);
  font-family: var(--display);
  font-size: 48px;
  font-weight: 500;
  line-height: 0.9;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.28);
  pointer-events: none;
}

.route-action.is-pressed,
.route-action:active {
  --route-press-scale: 0.982;
  border-color: var(--route-accent);
  background: color-mix(in srgb, var(--route-accent) 5%, #10110f);
  transition-duration: 70ms;
}

.route-action.is-parallax {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 220ms ease;
}

.route-action.is-committed {
  --route-press-scale: 0.992;
  border-color: var(--route-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--route-accent) 44%, transparent), 0 16px 38px rgba(0, 0, 0, 0.36);
}

.route-action.is-committed::before {
  animation: route-commit-stamp 190ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.route-action:focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .route-action:hover {
    border-color: var(--route-accent);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    transform: perspective(1100px) translate3d(var(--route-shift-x), calc(var(--route-shift-y) - 4px), 0) rotateX(var(--route-tilt-x)) rotateY(var(--route-tilt-y)) scale(var(--route-press-scale));
  }

  .route-action:hover .route-action-arrow {
    transform: translateX(4px);
  }
}

@keyframes route-scene-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.997);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .route-scene {
    min-height: 390px;
    aspect-ratio: 16 / 9;
  }

  .route-actions {
    grid-template-columns: 1fr;
  }

  .route-action {
    min-height: 190px;
    grid-template-columns: 132px minmax(0, 1fr) auto;
  }
}

@media (max-width: 560px) {
  .route-scene {
    min-height: 360px;
    aspect-ratio: 4 / 4.5;
  }

  .route-scene-shade {
    background:
      linear-gradient(0deg, rgba(5, 6, 5, 0.92) 0%, rgba(5, 6, 5, 0.38) 68%, rgba(5, 6, 5, 0.14) 100%),
      linear-gradient(90deg, rgba(5, 6, 5, 0.34), transparent 76%);
  }

  .route-scene figcaption {
    bottom: 22px;
    left: 18px;
    width: calc(100% - 36px);
  }

  .route-scene figcaption > span {
    font-size: 9px;
    letter-spacing: 0.8px;
  }

  .route-scene figcaption h1 {
    margin-top: 10px;
    font-size: clamp(40px, 12.3vw, 54px);
    line-height: 0.9;
  }

  .route-scene figcaption p {
    margin-top: 11px;
    font-size: 16px;
  }

  .route-crew-badge {
    top: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    padding: 9px 10px;
  }

  .route-crew-badge b {
    font-size: 10px;
  }

  .route-crew-badge small {
    font-size: 9px;
  }

  .route-choice-head {
    display: block;
    margin-top: 30px;
  }

  .route-choice-head p {
    margin-top: 8px;
    font-size: 15px;
    text-align: left;
  }

  .route-action {
    min-height: 174px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .route-action-direction {
    padding: 18px 10px;
  }

  .route-action-direction i {
    font-size: 50px;
  }

  .route-action-direction b {
    margin-top: 14px;
    font-size: 25px;
  }

  .route-action-direction small {
    font-size: 7px;
    letter-spacing: 0.5px;
  }

  .route-action-copy {
    padding: 18px 14px;
  }

  .route-action-copy > i {
    font-size: 9px;
  }

  .route-action-copy > strong {
    font-size: clamp(29px, 8.7vw, 40px);
  }

  .route-action-copy > small {
    font-size: 14px;
  }

  .route-action-arrow {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .route-crew-badge,
  .route-action::before {
    background: #080907;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .route-scene,
  .route-action,
  .route-crew-badge {
    border-width: 2px;
  }

  .route-scene-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.12));
  }

  .route-action-direction {
    border-right-width: 2px;
  }

  .route-action::before {
    border-width: 5px;
    background: #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-scene,
  .route-action,
  .route-action.route-higher,
  .route-action.route-lower,
  .route-action:hover,
  .route-action:active,
  .route-action.is-pressed,
  .route-action.is-parallax,
  .route-action.is-committed {
    animation: none !important;
    transform: none !important;
    transition: border-color 100ms ease, background-color 100ms ease, opacity 100ms ease !important;
    will-change: auto;
  }

  .route-action::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .route-action-arrow {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Story verdicts — the exact selected scene receives a different physical
   ending for victory, failed escape and permanent Jail. No generic art swap.
   -------------------------------------------------------------------------- */

.result-art .result-fx {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The verdict layer is the single source of outcome motion. Earlier generic
   result pseudos otherwise run at the same time (and Jail draws two cages). */
.result-art {
  isolation: isolate;
}

.result-screen.result-victory .result-art::before,
.result-screen.result-defeat .result-art::before,
.result-screen.result-jail .result-art::before {
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
}

.result-verdict {
  position: absolute;
  z-index: 6;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  padding: 12px 16px;
  border: 2px solid currentColor;
  background: rgba(5, 6, 5, 0.9);
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  transform: rotate(-2deg);
  backdrop-filter: blur(10px);
}

.result-verdict-victory { color: var(--green); }
.result-verdict-defeat { color: var(--gold); }
.result-verdict-jail { color: var(--red); }

/* Victory: the vault opens, light travels through the selected environment
   and compact loot sparks cross the frame. */
.result-fx-victory {
  background:
    radial-gradient(circle at 68% 46%, rgba(58, 231, 160, 0.42), transparent 31%),
    linear-gradient(105deg, transparent 24%, rgba(255, 236, 160, 0.28) 48%, transparent 68%);
  mix-blend-mode: screen;
  animation: verdict-victory-light 1.25s cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

.result-fx-victory i {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 12px;
  height: 12px;
  border: 2px solid #ffe788;
  background: rgba(221, 185, 54, 0.42);
  box-shadow: 0 0 18px rgba(255, 231, 136, 0.86);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: verdict-loot-burst 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.result-fx-victory i:nth-child(2) { --fx-x: -180px; --fx-y: -92px; animation-delay: 50ms; }
.result-fx-victory i:nth-child(3) { --fx-x: 148px; --fx-y: -116px; animation-delay: 90ms; }
.result-fx-victory i:nth-child(4) { --fx-x: -132px; --fx-y: 128px; animation-delay: 130ms; }
.result-fx-victory i:nth-child(5) { --fx-x: 176px; --fx-y: 88px; animation-delay: 165ms; }
.result-fx-victory i:nth-child(6) { --fx-x: 20px; --fx-y: -164px; animation-delay: 205ms; }
.result-fx-victory i:first-child { --fx-x: -30px; --fx-y: 170px; }

/* Wrong call but no Jail: the alarm sweeps across the same mission image,
   dust/rain streaks kick backwards, then the scene settles into amber. */
.result-fx-defeat {
  background:
    linear-gradient(115deg, transparent 18%, rgba(237, 87, 72, 0.34) 38%, transparent 57%),
    radial-gradient(circle at 50% 50%, transparent 25%, rgba(5, 6, 5, 0.68) 100%);
  animation: verdict-defeat-alarm 1.1s cubic-bezier(0.24, 0.72, 0.28, 1) both;
}

.result-fx-defeat i {
  position: absolute;
  top: calc(18% + var(--streak-y, 0%));
  left: -24%;
  width: 44%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 205, 83, 0.72), transparent);
  transform: rotate(-14deg);
  animation: verdict-escape-streak 820ms ease-out both;
}

.result-fx-defeat i:nth-child(2) { --streak-y: 12%; animation-delay: 55ms; }
.result-fx-defeat i:nth-child(3) { --streak-y: 24%; animation-delay: 100ms; }
.result-fx-defeat i:nth-child(4) { --streak-y: 36%; animation-delay: 145ms; }
.result-fx-defeat i:nth-child(5) { --streak-y: 48%; animation-delay: 190ms; }
.result-fx-defeat i:nth-child(6) { --streak-y: 60%; animation-delay: 235ms; }

/* Jail: bars belong to the exact job scene. A red beacon hits first, then six
   steel bars slam down independently and the whole frame absorbs the impact. */
.result-fx-jail {
  background:
    radial-gradient(circle at 76% 18%, rgba(237, 87, 72, 0.55), transparent 26%),
    linear-gradient(rgba(52, 4, 0, 0.2), rgba(4, 2, 2, 0.62));
  animation: verdict-jail-beacon 820ms steps(2, end) both;
}

.result-fx-jail i {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: calc(7% + var(--bar-index, 0) * 17%);
  width: clamp(16px, 2.4vw, 34px);
  border-right: 3px solid #080808;
  border-left: 2px solid #70675e;
  background: linear-gradient(90deg, #0a0a09, #3c3a35 42%, #10100f 76%);
  box-shadow: 10px 0 22px rgba(0, 0, 0, 0.62);
  transform: translateY(-118%);
  animation: verdict-jail-bar 390ms cubic-bezier(0.15, 0.78, 0.18, 1) both;
}

.result-fx-jail i:nth-child(2) { --bar-index: 1; animation-delay: 42ms; }
.result-fx-jail i:nth-child(3) { --bar-index: 2; animation-delay: 84ms; }
.result-fx-jail i:nth-child(4) { --bar-index: 3; animation-delay: 126ms; }
.result-fx-jail i:nth-child(5) { --bar-index: 4; animation-delay: 168ms; }
.result-fx-jail i:nth-child(6) { --bar-index: 5; animation-delay: 210ms; }

.result-victory .result-art > img {
  animation: verdict-scene-victory 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.result-defeat .result-art > img {
  animation: verdict-scene-defeat 1s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.result-jail .result-art > img,
.result-partial-jail .result-art > img {
  filter: saturate(0.62) contrast(1.14) brightness(0.64) sepia(0.13);
  animation: verdict-scene-jail 560ms ease-out 170ms both;
}

/* Era-specific material accents make the same verdict animation feel native
   to an orchard, paper archive or electric factory. */
.result-era-aapl .result-fx-victory i { border-radius: 50%; background: #b8d76a; }
.result-era-spy .result-fx-victory i { border-radius: 1px; background: #e2c986; }
.result-era-tsla .result-fx-victory i { border-color: #8be8ff; background: #4ebbd0; }
.result-era-aapl .result-fx-defeat i { background: linear-gradient(90deg, transparent, rgba(201, 154, 68, 0.78), transparent); }
.result-era-spy .result-fx-defeat i { height: 3px; background: linear-gradient(90deg, transparent, rgba(236, 225, 191, 0.72), transparent); }
.result-era-tsla .result-fx-defeat i { background: linear-gradient(90deg, transparent, rgba(85, 203, 224, 0.7), transparent); }

@keyframes verdict-victory-light {
  0% { opacity: 0; transform: translateX(-16%) scale(0.9); }
  38% { opacity: 1; }
  100% { opacity: 0.5; transform: translateX(5%) scale(1.08); }
}

@keyframes verdict-loot-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.2); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx-x, 80px)), calc(-50% + var(--fx-y, -80px))) rotate(225deg) scale(1.2); }
}

@keyframes verdict-defeat-alarm {
  0% { opacity: 0; transform: translateX(-55%); }
  38% { opacity: 1; }
  100% { opacity: 0.58; transform: translateX(42%); }
}

@keyframes verdict-escape-streak {
  0% { opacity: 0; transform: translateX(0) rotate(-14deg); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(310%) rotate(-14deg); }
}

@keyframes verdict-jail-beacon {
  0%, 26%, 52% { opacity: 0.25; }
  13%, 39%, 66%, 100% { opacity: 1; }
}

@keyframes verdict-jail-bar {
  0% { transform: translateY(-118%); }
  78% { transform: translateY(2.5%); }
  100% { transform: translateY(0); }
}

@keyframes verdict-scene-victory {
  0% { transform: scale(1.035); filter: brightness(0.72) saturate(0.85); }
  45% { filter: brightness(1.16) saturate(1.24); }
  100% { transform: scale(1); filter: brightness(1.03) saturate(1.08); }
}

@keyframes verdict-scene-defeat {
  0% { transform: translateX(0) scale(1.02); filter: brightness(1); }
  16% { transform: translateX(-7px) scale(1.025); }
  31% { transform: translateX(5px) scale(1.025); }
  54% { transform: translateX(-2px) scale(1.02); }
  100% { transform: translateX(0) scale(1); filter: brightness(0.72) saturate(0.72); }
}

@keyframes verdict-scene-jail {
  0%, 100% { transform: translateX(0) scale(1.015); }
  24% { transform: translateX(-8px) scale(1.02); }
  48% { transform: translateX(6px) scale(1.02); }
  72% { transform: translateX(-3px) scale(1.018); }
}

@media (max-width: 700px) {
  .result-verdict {
    right: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    font-size: clamp(27px, 9vw, 42px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .result-verdict { background: #050605; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .result-verdict {
    border-width: 3px;
    background: #000;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-art .result-fx,
  .result-art .result-fx i,
  .result-victory .result-art > img,
  .result-defeat .result-art > img,
  .result-jail .result-art > img,
  .result-partial-jail .result-art > img {
    animation: none !important;
    transform: none !important;
  }

  .result-fx-victory { opacity: 0.22; }
  .result-fx-defeat { opacity: 0.2; }
  .result-fx-jail { opacity: 0.72; }
  .result-fx-victory i,
  .result-fx-defeat i { display: none; }
  .result-fx-jail i { transform: translateY(0) !important; }
}

/* Confirm is a final yes/no moment, not another dashboard. */
.confirm-stage.stage-layout-full .stage-main {
  width: min(100%, 920px);
}

.confirm-stage .stage-back {
  margin-bottom: 22px;
}

.confirm-simple {
  --confirm-accent: var(--green);
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 5px solid var(--confirm-accent);
  background: #11120f;
}

.confirm-simple.confirm-red {
  --confirm-accent: var(--red);
}

.confirm-story {
  padding: clamp(26px, 5vw, 52px);
  border-bottom: 1px solid var(--line);
}

.confirm-story > span {
  color: var(--confirm-accent);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.confirm-story h1 {
  max-width: 760px;
  margin: 12px 0 8px;
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 92px);
  font-weight: 500;
  line-height: 0.88;
}

.confirm-story p {
  max-width: 700px;
  margin: 0;
  color: #bab7aa;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
}

.confirm-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(22px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
}

.confirm-crew-chips {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 9px;
}

.confirm-crew-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 5px;
  border: 1px solid #555448;
  color: var(--paper);
}

.confirm-crew-chip img {
  width: 38px;
  height: 38px;
  object-fit: cover;
}

.confirm-crew-chip b {
  font-family: var(--mono);
  font-size: 13px;
}

.confirm-entry {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: 9px 14px;
  margin: 0;
  font-family: var(--mono);
  white-space: nowrap;
}

.confirm-entry span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.confirm-entry b,
.confirm-entry strong {
  font-size: clamp(15px, 2vw, 19px);
}

.confirm-entry i {
  color: var(--confirm-accent);
  font-size: 24px;
  font-style: normal;
}

.confirm-risk {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 25px clamp(22px, 5vw, 48px);
  color: #c4c1b5;
  cursor: pointer;
}

.confirm-risk input {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--red);
}

.confirm-risk span {
  font-size: 16px;
  line-height: 1.45;
}

.confirm-risk b {
  color: var(--paper);
}

.confirm-send {
  width: calc(100% - clamp(44px, 10vw, 96px));
  min-height: 80px;
  margin: 0 clamp(22px, 5vw, 48px) clamp(22px, 5vw, 48px);
  border-color: var(--confirm-accent);
  background: var(--confirm-accent);
  color: #090a08;
  font-size: clamp(22px, 3vw, 32px);
}

.confirm-send:disabled {
  border-color: #46463e;
  background: #24251f;
  color: #74736a;
}

.active-entry {
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 0;
  padding: 12px 15px;
  border: 1px solid rgba(239, 234, 218, 0.32);
  background: rgba(5, 6, 5, 0.78);
  font-family: var(--mono);
}

.active-entry small,
.active-entry span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.active-entry b {
  color: var(--gold);
  font-size: 18px;
}

@media (max-width: 760px) {
  .confirm-summary {
    grid-template-columns: 1fr;
  }

  .confirm-entry {
    justify-content: start;
  }

  .confirm-crew-chip img {
    width: 34px;
    height: 34px;
  }

  .confirm-story h1 {
    font-size: clamp(46px, 15vw, 68px);
  }
}

@media (prefers-contrast: more) {
  .confirm-simple,
  .confirm-crew-chip {
    border-width: 2px;
  }
}

/* Interactive heist table — a concise, touchable opening instead of an explainer wall. */
.intro.intro-planning {
  height: clamp(620px, calc(100svh - 168px), 780px);
  min-height: 620px;
  grid-template-columns: minmax(410px, 0.72fr) minmax(600px, 1.28fr);
  background: #0b0c09;
}

.intro-planning .intro-copy {
  padding: clamp(40px, 4vw, 68px);
  background:
    linear-gradient(115deg, rgba(228, 199, 90, 0.09), transparent 48%),
    #151610;
}

.intro-planning .intro-copy > .eyebrow {
  width: fit-content;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--gold);
}

.intro-planning h1 {
  max-width: 560px;
  margin-top: 26px;
  font-size: clamp(76px, 6.2vw, 116px);
  line-height: 0.83;
  white-space: normal;
}

.intro-flow {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 38px;
  color: var(--paper);
  font-family: var(--mono);
}

.intro-flow > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.intro-flow i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(221, 185, 54, 0.56);
  border-radius: 50%;
  color: var(--gold);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.intro-flow b {
  overflow: hidden;
  font-size: 13px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
}

.intro-flow > em {
  color: #77766d;
  font-size: 15px;
  font-style: normal;
}

.intro-planning .intro-actions {
  margin-top: 38px;
}

.intro-planning .intro-copy > small {
  margin-top: 18px;
}

.intro-table {
  --spot-x: 62%;
  --spot-y: 38%;
  --table-pan-x: 0px;
  --table-pan-y: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #17130d;
  user-select: none;
  -webkit-user-select: none;
}

.intro-table-scene {
  position: absolute;
  z-index: 0;
  inset: -16px;
  background: url("art/hideout-plan-table-v1.jpg") center / cover no-repeat;
  filter: saturate(0.96) brightness(1.08) contrast(1.02);
  transform: translate3d(var(--table-pan-x), var(--table-pan-y), 0) scale(1.035);
  transition: filter 260ms ease;
  will-change: transform;
}

.intro-table::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 3, 0.18), transparent 20%, transparent 84%, rgba(3, 4, 2, 0.08)),
    linear-gradient(0deg, rgba(3, 4, 2, 0.18), transparent 24%);
}

.intro-table::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle 240px at var(--spot-x) var(--spot-y), rgba(255, 226, 135, 0.22), transparent 76%);
  mix-blend-mode: screen;
}

.plan-paper,
.plan-route-pin {
  --drag-x: 0px;
  --drag-y: 0px;
  position: absolute;
  z-index: 5;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}

.plan-paper {
  display: grid;
  width: clamp(210px, 20vw, 320px);
  min-height: 142px;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(62, 48, 30, 0.48);
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(54, 44, 27, 0.075) 21px 22px),
    #d7cfb4;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), inset 0 0 28px rgba(96, 72, 34, 0.1);
  color: #191811;
  transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--paper-rotate));
  transform-origin: 50% 12%;
}

.plan-paper::after {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 32px;
  height: 14px;
  border: 2px solid rgba(134, 28, 23, 0.55);
  content: "FILED";
  color: rgba(134, 28, 23, 0.72);
  font: 800 7px/12px var(--mono);
  letter-spacing: 0.6px;
  text-align: center;
  transform: rotate(-8deg);
}

.plan-paper img {
  width: 84px;
  height: 78px;
  border: 1px solid rgba(38, 33, 24, 0.22);
  background: #f2efe4;
  object-fit: contain;
  filter: grayscale(0.15) contrast(0.92);
}

.plan-paper > span:not(.paper-pin) {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.plan-paper b {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 500;
  line-height: 0.8;
}

.plan-paper small {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.paper-pin {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 3px solid #751d18;
  border-radius: 50%;
  background: #c74737;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.45);
}

.plan-paper-aapl {
  --paper-rotate: -5deg;
  top: 14%;
  left: 10%;
}

.plan-paper-spy {
  --paper-rotate: 4deg;
  top: 38%;
  right: 9%;
}

.plan-paper-tsla {
  --paper-rotate: 2deg;
  bottom: 12%;
  left: 16%;
}

.plan-thread {
  position: absolute;
  z-index: 3;
  top: 29%;
  left: 25%;
  width: 58%;
  height: 40%;
  border: solid #9d2c25;
  border-width: 3px 3px 3px 0;
  border-radius: 0 52% 44% 0;
  opacity: 0.78;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.6));
  transform: rotate(8deg);
}

.plan-route-pin {
  top: 18%;
  right: 12%;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #8d271f;
  box-shadow: 0 11px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 4px rgba(255, 202, 152, 0.16);
  color: #eadcbf;
  transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(-9deg);
}

.plan-route-pin i {
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(255, 226, 185, 0.5);
  border-radius: inherit;
}

.plan-route-pin b {
  font: 900 9px/1 var(--mono);
  letter-spacing: 0.8px;
}

.plan-paper.is-dragging,
.plan-route-pin.is-dragging {
  z-index: 10;
  cursor: grabbing;
  filter: brightness(1.04);
}

.plan-paper:focus-visible,
.plan-route-pin:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.intro-table-hint {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(238, 230, 203, 0.3);
  background: rgba(7, 8, 6, 0.72);
  color: #d2cbb6;
  font: 900 9px/1 var(--mono);
  letter-spacing: 0.8px;
  pointer-events: none;
}

@media (max-width: 1120px) {
  .intro.intro-planning {
    grid-template-columns: minmax(360px, 0.72fr) minmax(520px, 1.28fr);
  }

  .intro-planning h1 {
    font-size: clamp(68px, 7vw, 88px);
  }

  .plan-paper {
    width: 200px;
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .plan-paper img {
    width: 62px;
    height: 58px;
  }
}

@media (max-width: 900px) {
  .intro.intro-planning {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .intro-planning .intro-copy {
    min-height: 0;
    padding: 38px 28px 40px;
    border-right: 0;
  }

  .intro-planning h1 {
    max-width: none;
    font-size: clamp(62px, 12vw, 94px);
  }

  .intro-flow {
    margin-top: 28px;
  }

  .intro-planning .intro-actions {
    margin-top: 28px;
  }

  .intro-table {
    min-height: 540px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .intro-planning .intro-copy {
    padding: 30px 20px 34px;
  }

  .intro-planning h1 {
    margin-top: 20px;
    font-size: clamp(54px, 17vw, 74px);
  }

  .intro-flow {
    gap: 5px;
  }

  .intro-flow i {
    width: 26px;
    height: 26px;
    font-size: 8px;
  }

  .intro-flow b {
    font-size: 10px;
  }

  .intro-planning .intro-actions {
    flex-direction: column;
  }

  .intro-planning .intro-actions button {
    width: 100%;
  }

  .intro-table {
    min-height: 475px;
  }

  .plan-paper {
    width: 150px;
    min-height: 94px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .plan-paper img {
    width: 44px;
    height: 44px;
  }

  .plan-paper b {
    font-size: 27px;
  }

  .plan-paper-aapl { top: 12%; left: 5%; }
  .plan-paper-spy { top: 39%; right: 4%; }
  .plan-paper-tsla { bottom: 10%; left: 6%; }
  .plan-route-pin { top: 15%; right: 7%; width: 60px; height: 60px; }
  .intro-table-hint { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .intro-table::after {
    display: none;
  }

  .intro-table-hint {
    background: #090a07;
  }
}

@media (prefers-contrast: more) {
  .plan-paper {
    border-width: 3px;
  }

  .intro-table::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-table-scene {
    transform: none !important;
  }

  .plan-paper,
  .plan-route-pin {
    transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--paper-rotate, 0deg)) !important;
  }
}

/* Caste identity stays glanceable: one planned edge, one optional explanation. */
.caste-edge-legend {
  width: min(100%, 980px);
  margin: -12px 0 28px;
  border: 1px solid #4a493f;
  background: rgba(20, 21, 17, 0.82);
}

.caste-edge-legend summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  list-style: none;
}

.caste-edge-legend summary::-webkit-details-marker {
  display: none;
}

.caste-edge-legend summary b {
  padding: 5px 7px;
  border: 1px solid #777366;
  color: #aaa699;
  font-size: 9px;
}

.caste-edge-legend summary i {
  margin-left: auto;
  color: var(--gold);
  font-size: 18px;
  font-style: normal;
  transition: transform 180ms ease-out;
}

.caste-edge-legend[open] summary i {
  transform: rotate(45deg);
}

.caste-edge-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #4a493f;
  background: #414137;
}

.caste-edge-key {
  --caste-accent: var(--gold);
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: #151612;
  box-shadow: inset 3px 0 var(--caste-accent);
}

.caste-edge-key i,
.caste-edge-key em {
  color: #99968a;
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.caste-edge-key b {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.7px;
}

.caste-edge-legend > p {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid #4a493f;
  color: #a6a397;
  font-size: 13px;
}

.hood-card-copy {
  min-height: 158px;
}

.hood-card-edge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 12px !important;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--caste-accent) 34%, var(--line));
}

.hood-card-edge b {
  color: var(--caste-accent);
  font-size: 13px;
  letter-spacing: 0.6px;
}

.hood-card-edge span {
  min-width: 0;
  overflow: hidden;
  color: #d0ccbe;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hood-card-edge em {
  color: #858278;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.caste-edge-panel {
  margin: 20px 24px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--caste-accent) 46%, var(--line));
  background: color-mix(in srgb, var(--caste-accent) 6%, #151612);
}

.caste-edge-panel small,
.caste-edge-panel em {
  color: #918e82;
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.caste-edge-panel p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 7px 0 6px;
}

.caste-edge-panel p b {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.6px;
}

.caste-edge-panel p span {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .caste-edge-legend {
    margin-top: -6px;
  }

  .caste-edge-key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hood-card-copy {
    min-height: 150px;
  }

  .hood-card-edge {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hood-card-edge em {
    display: none;
  }

  .caste-edge-panel {
    display: grid;
    grid-column: 1 / -1;
    margin: 18px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .caste-edge-legend {
    background: #151612;
  }
}

@media (prefers-contrast: more) {
  .caste-edge-legend,
  .caste-edge-panel {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caste-edge-legend summary i {
    transition: none;
  }
}

/* Active mission is a live instrument panel: the price trail is the screen. */
.active-mission-stage {
  --active-accent: var(--green);
  width: min(100%, 1440px);
  margin-inline: auto;
  border: 1px solid var(--line);
  background: #0b0c0a;
}

.active-mission-stage.active-red {
  --active-accent: var(--red);
}

.active-mission-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.active-mission-bar > b {
  overflow: hidden;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-mission-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--active-accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.active-mission-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: active-live-pulse 1.8s ease-in-out infinite;
}

.active-mission-bar .secondary {
  min-height: 42px;
  padding-inline: 14px;
}

.active-mission-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  min-height: min(690px, calc(100vh - 230px));
}

.active-mission-detail {
  min-width: 0;
  padding: clamp(12px, 2vw, 24px);
}

.market-context-active {
  display: grid;
  height: 100%;
  min-height: 560px;
  grid-template-rows: auto minmax(310px, 1fr) auto;
  overflow: hidden;
  border-top: 4px solid var(--active-accent);
  background: linear-gradient(145deg, #131410, #0d0e0c 72%);
  animation: active-panel-in 280ms cubic-bezier(0.2, 0.82, 0.3, 1) both;
}

.active-market-head {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.active-market-hood {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.active-market-avatar,
.active-market-hood .hood-placeholder {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 2px solid var(--gold);
  border-radius: 50%;
  object-fit: cover;
}

.active-market-hood > span,
.active-market-plan {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.active-market-hood small,
.active-market-plan small,
.active-market-facts small,
.active-market-facts em {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.active-market-hood b {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}

.active-market-hood em {
  overflow: hidden;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-market-plan {
  justify-items: center;
  text-align: center;
}

.active-market-plan small {
  color: var(--active-accent);
}

.active-market-plan b {
  max-width: 100%;
  overflow: hidden;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-market-plot {
  position: relative;
  display: grid;
  min-height: 310px;
}

.active-market-plot .market-chart-wrap,
.active-market-plot .market-sparkline {
  width: 100%;
  height: 100%;
  min-height: 310px;
}

.active-market-now {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 20px;
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 234, 218, 0.18);
  background: rgba(8, 9, 7, 0.8);
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(130%);
}

.active-market-now small,
.active-market-now em {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.active-market-now strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 500;
  line-height: 1;
}

.active-market-now em {
  color: var(--active-accent);
}

.active-market-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  border-top: 1px solid var(--line);
  background: rgba(18, 19, 15, 0.96);
}

.active-market-facts > span {
  display: grid;
  min-width: 0;
  gap: 4px;
  align-content: center;
  min-height: 84px;
  padding: 13px 16px;
  border-right: 1px solid var(--line);
}

.active-market-facts b {
  overflow: hidden;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-market-facts > span:first-child b,
.active-time-left b {
  color: var(--gold);
}

.active-display-note {
  width: 116px;
  border-right: 0 !important;
}

.active-display-note b {
  color: var(--muted);
  font-size: 9px;
  white-space: normal;
}

.active-market-offline {
  display: flex;
  min-height: 310px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--paper);
  font-family: var(--mono);
}

.active-mission-crew {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-left: 1px solid var(--line);
  background: #10110e;
}

.active-crew-title {
  display: flex;
  min-height: 42px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
}

.active-crew-title b {
  color: var(--gold);
  font-size: 20px;
}

.active-hood-chip {
  --caste-accent: var(--gold);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #35362f;
  border-left: 3px solid var(--caste-accent);
  background: #171813;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}

.active-hood-chip:hover,
.active-hood-chip:focus-visible {
  border-color: var(--caste-accent);
  outline: none;
  background: color-mix(in srgb, var(--caste-accent) 10%, #171813);
}

.active-hood-chip:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

.active-hood-chip.is-focused {
  border-color: var(--caste-accent);
  background: color-mix(in srgb, var(--caste-accent) 14%, #171813);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--caste-accent) 28%, transparent);
}

.active-hood-chip > img,
.active-hood-chip > .hood-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.active-hood-chip > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.active-hood-chip b,
.active-hood-chip small {
  overflow: hidden;
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-hood-chip b {
  font-size: 13px;
}

.active-hood-chip small {
  color: var(--caste-accent);
  font-size: 9px;
  font-weight: 900;
}

.active-hood-chip > i {
  color: var(--caste-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
}

@keyframes active-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

@keyframes active-live-pulse {
  50% { opacity: 0.45; transform: scale(0.82); }
}

@media (max-width: 900px) {
  .active-mission-body {
    grid-template-columns: 1fr;
  }

  .active-mission-crew {
    grid-row: 1;
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    border-left: 0;
    scroll-snap-type: x proximity;
  }

  .active-crew-title {
    display: none;
  }

  .active-hood-chip {
    min-width: 176px;
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .active-mission-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
  }

  .active-mission-bar > b {
    display: none;
  }

  .active-mission-detail {
    padding: 0;
  }

  .market-context-active {
    min-height: calc(100svh - 236px);
    border-inline: 0;
    grid-template-rows: auto minmax(260px, 1fr) auto;
  }

  .active-market-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .active-market-plan {
    display: none;
  }

  .active-market-avatar,
  .active-market-hood .hood-placeholder {
    width: 48px;
    height: 48px;
  }

  .active-market-plot,
  .active-market-plot .market-chart-wrap,
  .active-market-plot .market-sparkline {
    min-height: 260px;
  }

  .active-market-now {
    top: 10px;
    left: 10px;
  }

  .active-market-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .active-market-facts > span {
    min-height: 74px;
    padding: 10px;
  }

  .active-market-facts b {
    font-size: 12px;
  }

  .active-display-note {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .active-market-now {
    background: #0b0c0a;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .active-mission-stage,
  .market-context-active,
  .active-hood-chip {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-context-active,
  .active-mission-live i {
    animation: none !important;
  }

  .active-hood-chip {
    transition: color 100ms linear, background-color 100ms linear;
  }

  .active-hood-chip:active {
    transform: none;
  }
}

/* The vine owns vertical position feedback; keep the browser rail out of the composition. */
html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Keep the NFT art honest: level treatment is a hairline, never a grey veil. */
.dossier-art > img {
  opacity: 1;
  filter: none;
}

.dossier-art::after {
  border-width: 2px;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--level-accent) 24%, transparent);
}

/* Readable progression: every useful milestone is visible before committing a Hood. */
.progression-map {
  display: grid;
  gap: 15px;
}

.hood-stage > .progression-map {
  margin: 24px 0 34px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--level-accent, var(--gold));
  background: #11120f;
}

.progression-map > header,
.xp-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.progression-map > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.progression-map > header span,
.progression-map > header b,
.xp-rules b,
.progression-map > em {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.progression-map > header span {
  color: var(--level-accent);
  font-size: 13px;
}

.progression-map > header b {
  font-size: 18px;
}

.xp-rules {
  margin: 0;
}

.xp-rules b {
  padding: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.xp-rules b:first-child { color: var(--red); }
.xp-rules b:nth-child(2) { color: var(--green); }
.xp-rules b:last-child { color: var(--gold); }

.progression-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.progression-rail > span {
  display: grid;
  min-height: 94px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  color: #686860;
}

.progression-rail > span:last-child { border-right: 0; }

.progression-rail > span.is-earned {
  background: color-mix(in srgb, var(--level-accent) 11%, #11120f);
  color: var(--paper);
  box-shadow: inset 0 3px 0 var(--level-accent);
}

.progression-rail i,
.progression-rail b,
.progression-rail small {
  font-family: var(--mono);
  font-style: normal;
}

.progression-rail i { color: var(--level-accent); font-size: 10px; font-weight: 900; }
.progression-rail b { font-size: 11px; }
.progression-rail small { font-size: 8px; line-height: 1.35; }
.progression-map > em { color: var(--muted); font-size: 9px; line-height: 1.45; }

/* The confirmation step is now a blueprint plus a live, interactive price instrument. */
.confirm-stage.stage-layout-full .stage-main {
  width: min(100%, 1280px);
}

.confirm-board {
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(500px, 1.12fr);
  min-height: 530px;
  border-bottom: 1px solid var(--line);
}

.confirm-scene {
  position: relative;
  min-width: 0;
  min-height: 530px;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #080907;
}

.confirm-scene::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 5, 0.06) 20%, rgba(6, 7, 5, 0.96) 91%);
  content: "";
  pointer-events: none;
}

.confirm-scene > img {
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-scene:hover > img { transform: scale(1.025); }

.confirm-scene > span,
.confirm-scene figcaption {
  position: absolute;
  z-index: 1;
}

.confirm-scene > span {
  top: 22px;
  left: 22px;
  padding: 8px 10px;
  border: 1px solid var(--confirm-accent);
  background: rgba(7, 8, 6, 0.82);
  color: var(--confirm-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.confirm-scene figcaption {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 32px;
}

.confirm-scene small { color: var(--confirm-accent); font-family: var(--mono); font-weight: 900; letter-spacing: 1px; }
.confirm-scene h1 { margin: 10px 0 8px; font-family: var(--display); font-size: clamp(48px, 5.1vw, 80px); font-weight: 500; line-height: 0.9; }
.confirm-scene p { max-width: 540px; margin: 0; color: #c1beb1; font-size: 16px; line-height: 1.45; }

.confirm-instrument {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 17px;
  padding: clamp(22px, 3.2vw, 42px);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--confirm-accent) 7%, transparent), transparent 62%), #0d0e0b;
}

.confirm-instrument > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
}

.confirm-instrument > header b { color: var(--confirm-accent); }
.confirm-instrument .market-context-confirm { margin: 0; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32); }

/* Mission results first land as one unmistakable, full-screen reward beat. */
.result-takeover {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-content: center;
  gap: 12px;
  padding: clamp(28px, 7vw, 96px);
  border: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--takeover-accent) 25%, transparent), transparent 42%),
    linear-gradient(145deg, #060705 0%, #11140e 52%, #050605 100%);
  color: var(--paper);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  animation: result-takeover-enter 720ms cubic-bezier(0.18, 1.34, 0.32, 1) both;
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.85, 0.2, 1), visibility 0s linear 320ms;
}

.result-takeover-victory { --takeover-accent: var(--green); }
.result-takeover-defeat { --takeover-accent: var(--gold); }
.result-takeover-jail { --takeover-accent: var(--red); }

.result-takeover::before,
.result-takeover::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--takeover-accent) 48%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: result-takeover-ring 1900ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.result-takeover::before { width: min(74vw, 980px); aspect-ratio: 1; }
.result-takeover::after { width: min(48vw, 640px); aspect-ratio: 1; animation-delay: 180ms; }

.result-takeover > * { position: relative; z-index: 1; }
.result-takeover span,
.result-takeover small { color: var(--takeover-accent); font-family: var(--mono); font-weight: 900; letter-spacing: 2px; }
.result-takeover span { font-size: clamp(12px, 1.4vw, 20px); }
.result-takeover strong { color: var(--paper); font-family: var(--display); font-size: clamp(64px, 11.5vw, 178px); font-weight: 500; line-height: 0.86; text-shadow: 0 16px 60px color-mix(in srgb, var(--takeover-accent) 30%, transparent); }
.result-takeover em { color: var(--takeover-accent); font-family: var(--display); font-size: clamp(42px, 6vw, 92px); font-style: normal; line-height: 1; }
.result-takeover small { margin-top: 18px; font-size: 10px; animation: result-takeover-prompt 1.8s ease-in-out infinite; }

.result-takeover.is-dismissed {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.975);
}

@keyframes result-takeover-enter {
  0% { opacity: 0; transform: scale(0.88); }
  62% { opacity: 1; transform: scale(1.018); }
  82% { transform: scale(0.994); }
  100% { transform: scale(1); }
}

@keyframes result-takeover-ring {
  0% { opacity: 0; transform: scale(0.68); }
  28% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes result-takeover-prompt {
  0%, 100% { opacity: 0.48; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 920px) {
  .confirm-board { grid-template-columns: 1fr; }
  .confirm-scene { min-height: 480px; border-right: 0; border-bottom: 1px solid var(--line); }
  .confirm-scene > img { min-height: 480px; }
  .confirm-instrument { padding: 22px; }
}

@media (max-width: 640px) {
  .progression-rail { grid-template-columns: 1fr; }
  .progression-rail > span { min-height: 68px; border-right: 0; border-bottom: 1px solid var(--line); }
  .progression-rail > span:last-child { border-bottom: 0; }
  .xp-rules { grid-template-columns: 1fr; }
  .confirm-scene, .confirm-scene > img { min-height: 410px; }
  .confirm-scene figcaption { padding: 22px; }
  .confirm-scene h1 { font-size: clamp(44px, 15vw, 68px); }
  .confirm-instrument > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-scene > img,
  .result-takeover,
  .result-takeover::before,
  .result-takeover::after,
  .result-takeover small {
    animation: none;
    transition-duration: 100ms;
  }
}