@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#090b10;
  --paper:#fff7e8;
  --muted:#d1cdc6;
  --yellow:#f8d34d;
  --accent:var(--yellow);
  --display:Impact,'Arial Narrow','Arial Black',Arial,sans-serif;
  --mono:'Courier New',monospace;
  font-family:Arial,Helvetica,sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  overflow:hidden;
}
button,input {
  font:inherit;
}
button {
  border:0;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button:disabled {
  cursor:default;
  opacity:.45;
}
button:focus-visible,input:focus-visible {
  outline:3px solid white;
  outline-offset:4px;
}
h1,h2,h3,p {
  margin:0;
}
h1:focus,h2:focus {
  outline:none;
}
[hidden] {
  display:none!important;
}
.svg-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.hud-top {
  position:fixed;
  z-index:15;
  inset:0 0 auto;
  padding:max(18px,env(safe-area-inset-top)) 4vw 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(#080a10a0,transparent);
  pointer-events:none;
  text-shadow:0 2px 8px #000;
}
.hud-brand {
  display:flex;
  gap:20px;
  align-items:center;
}
.hud-brand b {
  font:1.7rem var(--display);
}
.hud-brand>span {
  font:.65rem var(--mono);
  letter-spacing:.15em;
}
.hud-tools {
  display:flex;
  gap:24px;
  align-items:center;
  pointer-events:auto;
}
.hud-level {
  font:.7rem var(--mono);
}
.hud-level b {
  color:var(--yellow);
  font-size:1.25rem;
}
.sound-button {
  min-width:60px;
  min-height:44px;
  padding:8px;
  color:white;
  background:#090b1050;
  display:flex;
  align-items:center;
  gap:8px;
  font:.7rem var(--mono);
}
.sound-button[aria-pressed=true] {
  color:var(--yellow);
}
.hud-bottom {
  position:fixed;
  z-index:8;
  inset:auto 0 0;
  padding:16px 4vw max(16px,env(safe-area-inset-bottom));
  display:flex;
  gap:16px;
  align-items:center;
  font:.65rem var(--mono);
  color:#d0cec6;
  pointer-events:none;
  background:linear-gradient(transparent,#080a1090);
}
.chapter-track {
  display:flex;
  gap:5px;
}
.chapter-track i {
  width:18px;
  height:3px;
  background:#fff7e830;
  transform:skewX(-25deg);
}
.chapter-track i.current {
  background:var(--yellow);
}
#chapter-count {
  margin-left:auto;
  color:var(--yellow);
}
.scene {
  position:relative;
  isolation:isolate;
  height:100dvh;
  min-height:500px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:100px 6vw 80px;
}
.scene::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#090b10dc,transparent 72%),linear-gradient(0deg,#090b1080,transparent 55%);
}
.scene-art {
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:linear-gradient(#090b1070,#090b1070),var(--art-url);
  background-size:cover;
  background-position:center;
}
.scene-art img {
  display:block;
  width:75%;
  height:100%;
  margin-left:auto;
  object-fit:cover;
  object-position:var(--image-position,center);
  animation:artwork-in 1.4s ease-out both;
}
.scene-content {
  position:relative;
  z-index:2;
  width:min(100%,510px);
  animation:content-in .55s .1s both;
}
.eyebrow {
  font:700 .75rem/1.45 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:9px;
  text-shadow:0 2px 8px #000;
}
.diamond,.objective-marker {
  display:inline-block;
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:var(--yellow);
  flex-shrink:0;
}
.display-title {
  font:900 clamp(3.5rem,6vw,6rem)/.95 var(--display);
  letter-spacing:-.015em;
  white-space:pre-line;
  text-transform:uppercase;
  text-shadow:0 3px 16px #0008;
}
.description {
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
  max-width:38ch;
  margin-top:12px;
}
.primary {
  min-height:56px;
  padding:15px 20px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--yellow);
  color:#11120e;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-align:left;
  box-shadow:4px 4px 0 #0006;
  transition:transform .18s,background .18s;
}
.primary:not(:disabled):hover {
  transform:translateY(-2px);
  background:#ffe779;
}
.primary:disabled {
  background:#8e8b73;
}
#intro-title {
  font:900 clamp(6rem,12vw,12rem)/.84 var(--display);
  letter-spacing:-.025em;
  text-shadow:5px 6px 0 #090b1080;
}
#intro-title>span {
  display:block;
}
.title-dlc {
  color:var(--yellow);
}
.title-star {
  font:.3em Arial;
  vertical-align:top;
  margin-left:.25em;
}
.mission-name {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:25px;
}
.mission-name h2 {
  font:900 1.3rem var(--mono);
}
.mission-line {
  width:28px;
  height:3px;
  background:var(--yellow);
}
.intro-content .description {
  margin:16px 0 24px;
}
.intro-content .primary {
  max-width:385px;
}
.intro-note {
  font:.65rem var(--mono);
  color:#c8c6bd;
  margin-top:18px;
}
.intro-number {
  position:absolute;
  right:4vw;
  bottom:90px;
  text-align:right;
  text-shadow:0 2px 10px #000;
}
.intro-number>span {
  display:block;
  font:.7rem var(--mono);
  letter-spacing:.15em;
}
.intro-number b {
  font:6rem/.95 var(--display);
  color:var(--yellow);
}
.light-sweep {
  position:absolute;
  width:36%;
  height:2px;
  top:72%;
  right:2%;
  background:linear-gradient(90deg,transparent,#ffe7a9,transparent);
  box-shadow:0 0 25px 5px #ffd59030;
  animation:light-sweep 1.7s ease-out both;
  pointer-events:none;
}
.scene-character {
  align-items:center;
}
.character-content {
  max-width:460px;
}
.character-id {
  position:absolute;
  right:4vw;
  bottom:90px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:right;
  text-shadow:0 3px 15px #000;
}
.character-id>span {
  font:.7rem var(--mono);
  color:var(--yellow);
}
.character-id b {
  font:3rem var(--display);
}
.stats {
  display:grid;
  gap:13px;
  margin:24px 0;
}
.stat {
  display:grid;
  grid-template-columns:150px 1fr 32px;
  gap:12px;
  align-items:center;
  font-size:.8rem;
  text-transform:uppercase;
}
.stat-bar {
  height:7px;
  background:#fff7e825;
  transform:skewX(-15deg);
}
.stat-bar>i {
  width:var(--value);
  height:100%;
  display:block;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);
  transform-origin:left;
  animation:stat-fill .8s .2s both;
}
.stat-value {
  font:bold 1rem var(--mono);
  color:var(--yellow);
  text-align:right;
}
.mode-select {
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
.mode-select legend {
  font:.75rem var(--mono);
  padding:0;
  margin-bottom:10px;
}
.modes {
  display:flex;
  gap:6px;
}
.modes button {
  flex:1;
  min-width:0;
  min-height:45px;
  padding:10px 4px;
  font-size:.8rem;
  text-transform:uppercase;
  color:var(--paper);
  background:#090b1050;
  border-bottom:2px solid #fff7e84d;
  transition:background .18s,color .18s,box-shadow .18s;
}
.modes button:hover,.modes button[aria-pressed=true] {
  border-color:var(--yellow);
  color:var(--yellow);
  background:#f8d34d13;
}
.unlock {
  color:var(--muted);
  font:.75rem/1.4 var(--mono);
  min-height:32px;
  margin:14px 0;
}
.unlock.active {
  color:var(--yellow);
}
.modes button[aria-pressed=true] {
  background:var(--yellow);
  color:#11120e;
  border-color:var(--yellow);
  font-weight:700;
  box-shadow:0 0 14px #f8d34d20;
}
.modes button.tap-feedback { animation:mode-tap .18s ease-out; }
.mode-feedback {
  min-height:86px;
  margin:14px 0;
}
#package-unlocked {
  display:block;
  min-height:22px;
  font:700 .78rem/1.4 var(--mono);
  color:var(--yellow);
}
.mode-feedback .unlock {
  font:.85rem/1.45 Arial,Helvetica,sans-serif;
  min-height:42px;
  margin:4px 0 0;
  color:var(--paper);
}
.all-modes .mode-feedback { animation:package-pulse .22s ease-out; }
@keyframes mode-tap { 50% { transform:scale(.96); } }
@keyframes package-pulse { 35% { filter:brightness(1.5); transform:translateY(-2px); } }
.cargo-stage {
  position:absolute;
  z-index:0;
  inset:0 0 0 36%;
  display:flex;
  justify-content:center;
  background:#10151d;
}
.cargo-frame {
  position:relative;
  height:100%;
  aspect-ratio:1122/1402;
}
.cargo-frame>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
}
.scene-cargo::after {
  z-index:1;
  background:linear-gradient(90deg,#090b10f5,transparent 68%);
}
.cargo-content {
  pointer-events:none;
  max-width:470px;
}
.cargo-content button {
  pointer-events:auto;
}
.cargo-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.cargo-lines path {
  fill:none;
  stroke:var(--yellow);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .35s;
  filter:drop-shadow(0 0 5px #f8d34d66);
}
.cargo-lines path.locked {
  stroke-dashoffset:0;
}
.anchor-button {
  position:absolute;
  z-index:4;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border:2px solid var(--yellow);
  background:#11151fdf;
  color:var(--yellow);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:bold 1rem var(--mono);
  box-shadow:0 0 0 7px #f8d34d20,0 3px 15px #0008;
}
.anchor-button::after {
  content:'';
  position:absolute;
  inset:-10px;
  border:1px solid #f8d34d65;
  border-radius:50%;
  animation:target-pulse 1.7s infinite;
  pointer-events:none;
}
.anchor-button[aria-pressed=true] {
  background:var(--yellow);
  color:#090b10;
}
.anchor-button[aria-pressed=true]::after {
  animation:none;
  opacity:0;
}
.cargo-label {
  position:absolute;
  right:8%;
  top:12%;
  padding:8px 10px;
  color:var(--yellow);
  font:.7rem var(--mono);
  background:#090b1070;
}
.cargo-objective {
  display:flex;
  align-items:center;
  gap:14px;
  margin:24px 0;
}
.cargo-objective strong {
  font:bold .9rem var(--mono);
  text-transform:uppercase;
  color:var(--yellow);
}
.cargo-objective p {
  font-size:.8rem;
  margin-top:7px;
  color:var(--muted);
}
.cargo-objective>b {
  margin-left:auto;
  font:bold 1rem var(--mono);
  white-space:nowrap;
  color:var(--yellow);
}
.cargo-complete .objective-marker {
  background:#a8dfcb;
}
.scene-radio {
  align-items:center;
  justify-content:center;
}
.scene-radio .scene-art img {
  width:100%;
  filter:blur(6px) saturate(.7);
  object-position:center 65%;
}
.scene-radio::after {
  background:#090b10bb;
}
.radio-content {
  width:min(100%,680px);
  text-align:center;
}
.radio-content>.eyebrow {
  justify-content:center;
}
.radio-subtitle {
  color:var(--muted);
  font-size:.9rem;
  margin-top:12px;
}
.radio-tuner {
  margin:26px 0 22px;
  padding:20px 0 0;
  border-top:1px solid #fff7e840;
}
.tuner-meta {
  display:flex;
  justify-content:space-between;
  font:.75rem var(--mono);
  color:var(--muted);
}
.station-row {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
  margin:20px 0 16px;
  gap:8px;
}
.tune-arrow {
  width:48px;
  height:58px;
  font:2.5rem Arial;
  color:var(--paper);
  background:transparent;
}
.tune-arrow:hover {
  color:var(--accent);
}
.frequency {
  font:1.2rem var(--mono);
  color:var(--accent);
}
.frequency::after {
  content:' MHz';
  color:var(--muted);
  font-size:.8rem;
}
.station-display h3 {
  font:900 clamp(2rem,3.3vw,3rem)/1.05 var(--display);
  margin-top:10px;
  color:var(--accent);
  min-height:2.1em;
  display:grid;
  align-items:center;
}
.frequency-scale {
  position:relative;
  padding-top:8px;
}
.tuner-ticks {
  height:28px;
  position:absolute;
  inset:8px 13px auto;
  background:repeating-linear-gradient(90deg,#eee8d450 0 1px,transparent 1px 10px);
}
#tuner {
  appearance:none;
  -webkit-appearance:none;
  width:calc(100% - 24px);
  margin:0 12px;
  height:44px;
  background:transparent;
  position:relative;
  z-index:1;
  cursor:pointer;
}
#tuner::-webkit-slider-runnable-track {
  height:2px;
  background:#eee8d448;
}
#tuner::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:24px;
  height:42px;
  background:transparent;
  margin-top:-20px;
}
#tuner::-moz-range-track {
  height:2px;
  background:#eee8d448;
}
#tuner::-moz-range-thumb {
  width:24px;
  height:42px;
  background:transparent;
  border:0;
}
#tuner-needle {
  position:absolute;
  top:6px;
  left:calc(14px + (100% - 28px) * var(--station,0) / 2);
  height:40px;
  width:3px;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
  transition:left .3s;
  pointer-events:none;
}
.frequency-marks {
  display:flex;
  justify-content:space-between;
  margin:3px 13px 0;
  font:.75rem var(--mono);
  color:var(--muted);
}
.station-vibe {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:24px 0 18px;
  min-height:55px;
  text-align:left;
}
.station-vibe strong {
  font-size:.9rem;
  line-height:1.4;
}
.station-vibe p {
  color:var(--muted);
  font-size:.9rem;
  margin-top:5px;
}
.equalizer {
  height:28px;
  display:flex;
  align-items:center;
  gap:3px;
  flex-shrink:0;
}
.equalizer i {
  display:block;
  height:7px;
  width:3px;
  background:var(--accent);
}
.audio-playing .equalizer i {
  animation:equalize .6s infinite alternate ease-in-out;
}
.equalizer i:nth-child(2n) {
  animation-delay:-.2s;
}
.equalizer i:nth-child(3n) {
  animation-delay:-.45s;
}
.equalizer i:nth-child(5n) {
  animation-delay:-.1s;
}
.station-select {
  width:100%;
  min-height:44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--accent);
  background:transparent;
  border-bottom:1px solid var(--accent);
  font:bold .75rem var(--mono);
  text-transform:uppercase;
}
.station-select[aria-pressed=true] {
  color:#ddd9cd;
  border-color:#fff7e845;
}
.audio-status {
  font:.7rem var(--mono);
  color:var(--muted);
  margin-top:13px;
  min-height:18px;
}
.scene-journey {
  padding:0;
  display:block;
  background:#111d27;
}
.scene-journey::after {
  background:radial-gradient(ellipse at center,transparent 30%,#050910a0);
  z-index:1;
}
.journey-grid {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 79px,#fff7e805 79px 80px),repeating-linear-gradient(90deg,transparent 0 79px,#fff7e805 79px 80px);
}
.journey-top {
  position:absolute;
  z-index:4;
  top:100px;
  left:6vw;
  pointer-events:none;
}
.journey-top .eyebrow {
  margin-bottom:8px;
}
.journey-top .display-title {
  font-size:clamp(2rem,3vw,3.4rem);
}
.journey-top .description {
  font-size:.8rem;
}
.map-wrap {
  position:absolute;
  inset:0;
}
.map-heading {
  position:absolute;
  z-index:3;
  left:6vw;
  top:205px;
  font:.75rem var(--mono);
  display:flex;
  gap:25px;
  color:var(--yellow);
}
.mission-map {
  height:100%;
  width:100%;
  position:relative;
}
.mission-map>svg {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  overflow:visible;
  filter:drop-shadow(0 3px 12px #0005);
  transition:transform .65s;
  transform:scale(1.05);
}
.map-blocks {
  fill:#293b4b;
  stroke:#374c5d;
  stroke-width:2;
}
.map-streets {
  fill:none;
  stroke:#6b777b;
  stroke-width:18;
}
.map-streets path {
  stroke-dasharray:30 2;
}
.route-base,.route-progress {
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.route-base {
  stroke:#f8d34d55;
  stroke-dasharray:6 7;
}
.route-progress {
  stroke:var(--yellow);
  opacity:.75;
}
.map-start {
  fill:#8ca5ad;
}
.map-caption {
  fill:#8ba0aa;
  font:6px var(--mono);
}
.player-halo {
  fill:#4da2ff1c;
  stroke:#68b8ff44;
}
.goal-ring {
  fill:#f8d34d20;
  stroke:var(--yellow);
  stroke-width:2;
  stroke-dasharray:4 3;
  animation:marker-spin 8s linear infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.map-pickup {
  position:absolute;
  z-index:5;
  left:calc(50% + 20.4vh);
  top:15.5%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  color:#141713;
  background:var(--yellow);
  box-shadow:0 0 0 8px #f8d34d22;
}
.map-pickup:disabled {
  opacity:0;
  pointer-events:none;
}
.map-pickup:not(:disabled) {
  animation:target-glow .7s infinite alternate;
}
.map-north {
  position:absolute;
  right:4vw;
  top:95px;
  font:.7rem var(--mono);
}
.journey-status {
  position:absolute;
  z-index:4;
  bottom:60px;
  left:6vw;
  right:6vw;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font:.7rem var(--mono);
  color:var(--yellow);
}
.cargo-safe {
  color:#a8dfcb;
}
.journey-actions {
  position:absolute;
  z-index:6;
  right:6vw;
  bottom:110px;
  width:220px;
}
.gas-button {
  width:100%;
  min-height:100px;
  border:2px solid #ffffff70;
  background:#090b1088;
  color:white;
  display:grid;
  place-content:center;
  font:2.4rem var(--display);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.gas-button span {
  font:.75rem var(--mono);
  margin-top:8px;
}
.gas-button.pressed {
  border-color:var(--yellow);
  color:var(--yellow);
  box-shadow:0 0 40px #f8d34d25;
}
.moving .mission-map>svg {
  animation:road-rumble .15s infinite alternate;
}
.item-acquired {
  position:fixed;
  z-index:6;
  top:43%;
  left:0;
  right:0;
  background:linear-gradient(90deg,transparent,#090b10dd 20%,#090b10dd 80%,transparent);
  padding:24px;
  text-align:center;
  animation:reward-in .3s both;
}
.item-acquired>span {
  display:block;
  color:var(--yellow);
  font:.9rem var(--mono);
  margin-bottom:10px;
}
.item-acquired strong {
  display:block;
  font:3rem var(--display);
}
.item-acquired small {
  display:block;
  font:.7rem var(--mono);
  margin-top:12px;
  color:#a8dfcb;
}
.driving-radio {
  position:absolute;
  z-index:4;
  right:4vw;
  top:100px;
  text-align:right;
  max-width:280px;
  text-shadow:0 2px 8px #000;
}
.driving-radio>span {
  color:var(--yellow);
  font:.65rem var(--mono);
}
.driving-radio strong {
  display:block;
  font:1.5rem var(--display);
  margin:5px 0;
}
.driving-radio small {
  display:block;
  color:#c7d1d6;
  font-size:.65rem;
}
.driving-radio .equalizer {
  justify-content:flex-end;
  margin-top:10px;
}
.minimap {
  position:absolute;
  z-index:4;
  left:5vw;
  bottom:105px;
  width:145px;
  height:145px;
  border-radius:50%;
  overflow:hidden;
  background:#0a121be8;
  border:3px solid #b3bdc170;
  box-shadow:0 4px 15px #0008;
  transform:rotate(-8deg);
}
.minimap svg {
  width:100%;
  height:100%;
  transform:scale(.8);
}
.minimap span {
  position:absolute;
  bottom:10px;
  left:40px;
  font:.6rem var(--mono);
  color:white;
}
.at-store .mission-map>svg {
  transform:scale(1.1);
}
.returning #store-building {
  opacity:.4;
}
.scene-finale {
  padding:100px 6vw 80px;
}
.scene-finale .scene-art {
  background-image:linear-gradient(#090b1055,#090b1055),var(--art-url);
}
.scene-finale .scene-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  animation:none;
}
.scene.scene-finale::after {
  background:linear-gradient(0deg,#090b10f2,#090b10ba 24%,#090b1060 42%,transparent 65%);
  opacity:0;
  transition:opacity .8s;
}
.passed-overlay {
  position:absolute;
  z-index:4;
  left:5%;
  top:8%;
  width:90%;
  height:60%;
  object-fit:contain;
  pointer-events:none;
}
#passed-video { opacity:0; }
#passed-video[data-renderer="native-alpha"] { opacity:1; }
.passed-fallback {
  position:absolute;
  z-index:5;
  top:30%;
  left:0;
  right:0;
  text-align:center;
  font:italic 900 clamp(3rem,8vw,8rem) var(--display);
  color:#e4c270;
  text-shadow:3px 4px 0 #000;
  animation:reward-in .4s both;
}
.finale-rewards {
  position:absolute;
  z-index:5;
  bottom:12%;
  left:6vw;
  right:6vw;
  animation:content-in .6s both;
  text-align:center;
}
.finale-rewards .eyebrow {
  justify-content:center;
}
.reward-line {
  display:flex;
  justify-content:center;
  gap:20px;
  font:.75rem var(--mono);
  color:white;
}
.reward-line b {
  color:var(--yellow);
}
.finale-content {
  max-width:420px;
  animation:message-in .8s ease-out both;
}
@keyframes message-in { from { opacity:0; } to { opacity:1; } }
#finale-message {
  position:absolute;
  inset:auto auto max(64px,calc(env(safe-area-inset-bottom) + 48px)) 6vw;
  width:min(420px,88vw);
  max-height:min(46dvh,calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:0 6px 8px 0;
  text-shadow:0 1px 5px #000;
}
#finale-message .personal-message p {
  font-size:1rem;
  line-height:1.5;
}
#finale-message .personal-message strong {
  font-size:1rem;
  line-height:1.5;
  font-weight:600;
  margin-top:16px;
}
.scene-finale.message-visible::after {
  opacity:1;
}
#finale-message .signature { font:italic .95rem/1.5 Arial,Helvetica,sans-serif; color:var(--paper); margin:12px 0 18px; }
.personal-message p {
  color:#f2ede5;
  font-size:1.05rem;
  line-height:1.6;
  white-space:pre-line;
  text-wrap:pretty;
}
.personal-message strong {
  display:block;
  white-space:pre-line;
  font-size:1.1rem;
  line-height:1.45;
  margin-top:18px;
}
.signature {
  display:block;
  font:italic 1.3rem var(--display);
  color:var(--yellow);
  margin:14px 0 24px;
}
.text-button {
  min-height:44px;
  width:100%;
  color:var(--muted);
  font-size:.8rem;
  background:transparent;
  margin-top:5px;
}
.text-button:hover {
  color:white;
}
.scene-transition {
  position:fixed;
  z-index:30;
  inset:0;
  background:#090b10;
  pointer-events:none;
  opacity:0;
  display:grid;
  place-items:center;
  transition:opacity .17s;
}
.scene-transition>span {
  font:3rem var(--display);
  color:var(--yellow);
  transform:skew(-6deg);
}
.scene-transition.visible {
  opacity:1;
}
.scene-transition::before,.scene-transition::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:10vh;
  background:black;
}
.scene-transition::before {
  top:0;
}
.scene-transition::after {
  bottom:0;
}
body::after {
  content:'';
  position:fixed;
  z-index:40;
  inset:0;
  background:#fff9df;
  opacity:0;
  pointer-events:none;
}
body.mission-flash::after {
  animation:flash .18s both;
}
#snap-dialog {
  padding:0;
  margin:0;
  border:0;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  color:var(--paper);
  background:#06070a;
}
#snap-dialog::backdrop {
  background:#06070a;
}
.stories-open {
  overflow:hidden;
}
.snap-viewer {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
#snap-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-position:var(--image-position,center);
  object-fit:var(--snap-fit,cover);
}
.snap-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,#050609f5,#05060966 24%,transparent 55%),linear-gradient(180deg,#050609bd,transparent 25%);
}
.story-progress {
  position:absolute;
  z-index:6;
  left:20px;
  right:20px;
  top:max(12px,env(safe-area-inset-top));
  display:flex;
  gap:5px;
}
.story-progress>span {
  height:3px;
  flex:1;
  background:#ffffff55;
}
.story-progress i {
  display:block;
  width:100%;
  height:100%;
  background:white;
  transform:scaleX(var(--progress,0));
  transform-origin:left;
}
.snap-header {
  position:absolute;
  z-index:6;
  left:24px;
  right:20px;
  top:calc(max(12px,env(safe-area-inset-top)) + 13px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.snap-header>div:first-child {
  display:flex;
  gap:14px;
  align-items:center;
  font:.7rem var(--mono);
}
.snap-header b {
  color:var(--yellow);
  white-space:nowrap;
}
.snap-tools {
  display:flex;
}
.snap-tools button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:white;
  background:#05060960;
  font-size:1.2rem;
}
.snap-hit {
  position:absolute;
  z-index:3;
  inset:85px auto 0;
  width:50%;
  color:white;
  background:transparent;
}
.snap-hit-prev {
  left:0;
  text-align:left;
}
.snap-hit-next {
  right:0;
  text-align:right;
}
.snap-hit>span {
  font:2rem Arial;
  padding:10px 15px;
  text-shadow:0 2px 12px black;
  opacity:.7;
}
.snap-hit:disabled {
  opacity:0;
}
.snap-copy {
  position:absolute;
  z-index:4;
  bottom:max(35px,env(safe-area-inset-bottom));
  left:max(26px,calc((100vw - 1100px)/2));
  right:max(26px,calc((100vw - 1100px)/2));
  pointer-events:none;
}
.snap-copy h2 {
  font:900 clamp(2.2rem,5vw,4rem)/1 var(--display);
  text-transform:uppercase;
}
.snap-copy .eyebrow {
  margin-bottom:12px;
}
#snap-caption {
  font-size:1rem;
  line-height:1.5;
  margin-top:13px;
  max-width:40ch;
}
.snap-hint {
  font:.65rem var(--mono);
  display:block;
  margin-top:19px;
  color:#c0c1c4;
}
.asset-missing {
  background:radial-gradient(ellipse at center,#272c37,#090b10);
}
.asset-missing>img {
  opacity:0;
}
.asset-missing::before {
  content:'Ł / DLC';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:4rem var(--display);
  color:var(--yellow);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.noscript {
  position:fixed;
  z-index:50;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:var(--yellow);
  color:#111;
}
@keyframes artwork-in {
  from {
    transform:scale(1.035);
  }
  to {
    transform:scale(1);
  }
}
@keyframes content-in {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes stat-fill {
  from {
    transform:scaleX(0);
  }
  to {
    transform:scaleX(1);
  }
}
@keyframes light-sweep {
  0% {
    opacity:0;
    transform:translateX(-40px);
  }
  40% {
    opacity:.8;
  }
  100% {
    opacity:.1;
    transform:none;
  }
}
@keyframes target-pulse {
  from {
    transform:scale(.85);
    opacity:.6;
  }
  to {
    transform:scale(1.25);
    opacity:0;
  }
}
@keyframes target-glow {
  to {
    box-shadow:0 0 0 10px #f8d34d33,0 0 28px #f8d34d55;
  }
}
@keyframes equalize {
  to {
    height:27px;
  }
}
@keyframes reward-in {
  from {
    opacity:0;
    transform:scale(1.07);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes marker-spin {
  to {
    transform:rotate(360deg);
  }
}
@keyframes road-rumble {
  to {
    translate:1px 1px;
  }
}
@keyframes flash {
  0%,45% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@media(max-width:900px) {
  .hud-top {
    padding:max(10px,env(safe-area-inset-top)) 20px 15px;
  }
  .hud-brand b {
    font-size:1.4rem;
  }
  .hud-brand>span {
    display:none;
  }
  .hud-tools {
    gap:12px;
  }
  .hud-level {
    font-size:.6rem;
  }
  .hud-level b {
    font-size:1rem;
  }
  .hud-bottom {
    padding:12px 20px max(12px,env(safe-area-inset-bottom));
    gap:10px;
    font-size:.55rem;
  }
  .chapter-track i {
    width:12px;
  }
  .scene {
    padding:85px 24px 65px;
    min-height:500px;
  }
  .scene-art img {
    width:100%;
    object-position:var(--mobile-position,center);
  }
  .scene::after {
    background:linear-gradient(0deg,#090b10e8,transparent 78%);
  }
  .scene-content {
    width:100%;
    max-width:530px;
    margin-inline:auto;
  }
  .eyebrow {
    font-size:.65rem;
    margin-bottom:12px;
  }
  .display-title {
    font-size:clamp(2.5rem,9vw,4rem);
  }
  .description {
    font-size:.85rem;
  }
  .primary {
    min-height:52px;
    font-size:.85rem;
  }
  .scene-intro .scene-art img {
    object-position:50% 18%;
  }
  .scene-intro::after {
    background:linear-gradient(0deg,#090b10e5,transparent 67%);
  }
  #intro-title {
    font-size:clamp(4.5rem,20vw,7rem);
  }
  .intro-content .eyebrow {
    margin-bottom:12px;
  }
  .mission-name {
    margin-top:17px;
  }
  .mission-name h2 {
    font-size:1rem;
  }
  .intro-content .description {
    margin:12px 0 20px;
  }
  .intro-content .primary {
    max-width:none;
  }
  .intro-note {
    font-size:.55rem;
    margin-top:14px;
  }
  .intro-number {
    top:88px;
    bottom:auto;
    right:24px;
  }
  .intro-number>span {
    font-size:.55rem;
  }
  .intro-number b {
    font-size:3.7rem;
  }
  .scene-character {
    align-items:flex-end;
  }
  .scene-character .scene-art img {
    object-position:50% 0%;
  }
  .scene-character::after {
    background:linear-gradient(0deg,#090b10f5,#090b10bb 38%,transparent 77%);
  }
  .character-content .display-title {
    font-size:2.8rem;
  }
  .character-content>.description {
    display:none;
  }
  .character-id {
    top:85px;
    right:24px;
    bottom:auto;
  }
  .character-id b {
    font-size:1.5rem;
  }
  .character-id>span {
    font-size:.55rem;
  }
  .character-id>span:last-child {
    display:none;
  }
  .stats {
    gap:9px;
    margin:16px 0;
  }
  .stat {
    grid-template-columns:133px 1fr 28px;
    gap:10px;
    font-size:.68rem;
  }
  .stat-value {
    font-size:.85rem;
  }
  .mode-select legend {
    font-size:.65rem;
    margin-bottom:7px;
  }
  .modes button {
    font-size:.7rem;
    min-height:44px;
  }
  .unlock {
    font-size:.65rem;
    margin:11px 0;
    min-height:28px;
  }
  .cargo-stage {
    inset:0;
    display:block;
    background-image:linear-gradient(#090b1090,#090b1090),url('assets/images/cargo-mission.webp');
    background-size:cover;
  }
  .cargo-frame {
    width:min(100vw,calc((100dvh - 185px)*.80028));
    height:auto;
    aspect-ratio:1122/1402;
    margin:55px auto 0;
  }
  .scene-cargo::after {
    background:linear-gradient(0deg,#090b10e8,transparent 55%);
  }
  .cargo-content {
    max-width:none;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
  }
  .cargo-content>.eyebrow {
    position:absolute;
    bottom:calc(100dvh - 157px);
    left:0;
    white-space:nowrap;
  }
  .cargo-content>.display-title {
    position:absolute;
    bottom:calc(100dvh - 216px);
    left:0;
    font-size:1.7rem;
    pointer-events:none;
  }
  .cargo-content>.description {
    display:none;
  }
  .cargo-objective {
    margin:0 0 16px;
    padding:0;
  }
  .cargo-objective strong {
    font-size:.7rem;
  }
  .cargo-objective p {
    font-size:.65rem;
    line-height:1.3;
  }
  .cargo-objective>b {
    font-size:.8rem;
  }
  .cargo-label {
    display:none;
  }
  .anchor-button {
    width:48px;
    height:48px;
  }
  .scene-radio {
    align-items:center;
  }
  .radio-content>.display-title {
    font-size:2.6rem;
  }
  .radio-subtitle {
    font-size:.8rem;
  }
  .radio-tuner {
    margin:23px 0 18px;
    padding-top:17px;
  }
  .station-row {
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:2px;
    margin:18px 0 12px;
  }
  .tune-arrow {
    width:44px;
  }
  .station-display h3 {
    font-size:1.9rem;
  }
  .station-vibe {
    gap:12px;
    margin:20px 0 15px;
  }
  .station-vibe strong,.station-vibe p {
    font-size:.8rem;
  }
  .tuner-meta,.frequency-marks {
    font-size:.65rem;
  }
  .audio-status {
    font-size:.6rem;
  }
  .scene-journey {
    padding:0;
  }
  .journey-top {
    top:80px;
    left:24px;
    right:24px;
  }
  .journey-top .display-title {
    font-size:2.1rem;
  }
  .journey-top .description {
    font-size:.7rem;
    margin-top:8px;
  }
  .map-heading {
    top:175px;
    left:24px;
    font-size:.65rem;
  }
  .mission-map>svg {
    transform:scale(1.18);
    top:30px;
    height:calc(100% - 60px);
  }
  .map-pickup {
    left:78%;
    top:24%;
    width:44px;
    height:44px;
  }
  .map-north {
    display:none;
  }
  .journey-actions {
    right:24px;
    bottom:105px;
    width:160px;
  }
  .gas-button {
    min-height:86px;
  }
  .gas-button span {
    font-size:.6rem;
  }
  .journey-status {
    left:24px;
    right:24px;
    bottom:62px;
    font-size:.6rem;
  }
  .minimap {
    left:24px;
    bottom:100px;
    width:112px;
    height:112px;
  }
  .minimap span {
    left:26px;
    font-size:.5rem;
  }
  .driving-radio {
    top:220px;
    right:20px;
    max-width:155px;
  }
  .driving-radio strong {
    font-size:1rem;
  }
  .driving-radio small {
    font-size:.5rem;
  }
  .driving-radio>span {
    font-size:.5rem;
  }
  .driving-radio .equalizer {
    margin-top:5px;
  }
  .item-acquired strong {
    font-size:2.3rem;
  }
  .at-store .mission-map>svg {
    transform:scale(1.18);
  }
  .scene-finale .scene-art img {
    object-fit:cover;
    object-position:50% 55%;
  }
  .passed-overlay {
    left:0;
    width:100%;
    top:10%;
    height:45%;
  }
  .finale-rewards {
    bottom:13%;
    left:20px;
    right:20px;
  }
  .finale-rewards .eyebrow {
    font-size:.6rem;
  }
  .reward-line {
    font-size:.6rem;
    gap:12px;
  }
  .finale-content {
    max-width:500px;
  }
  .personal-message p {
    font-size:.88rem;
    line-height:1.5;
  }
  .personal-message strong {
    font-size:.92rem;
    margin-top:16px;
  }
  .signature {
    font-size:1.2rem;
    margin:13px 0 18px;
  }
  .snap-header {
    left:18px;
    right:12px;
  }
  .snap-header>div:first-child {
    gap:8px;
    font-size:.6rem;
  }
  .snap-tools button {
    width:44px;
  }
  .snap-copy {
    left:24px;
    right:24px;
  }
  .snap-copy h2 {
    font-size:2.3rem;
  }
}
@media(max-width:900px) and (max-height:700px) {
  .scene {
    padding-bottom:55px;
  }
  .character-content .eyebrow {
    display:none;
  }
  .character-content .display-title {
    font-size:2.2rem;
  }
  .stats {
    gap:7px;
    margin:12px 0;
  }
  .unlock {
    margin:8px 0;
    min-height:26px;
  }
  .intro-content .description,.intro-note {
    display:none;
  }
  .intro-content .primary {
    margin-top:18px;
  }
  #intro-title {
    font-size:4.3rem;
  }
  .radio-content>.eyebrow,.radio-subtitle {
    display:none;
  }
  .radio-content>.display-title {
    font-size:2.2rem;
  }
  .radio-tuner {
    margin:14px 0;
    padding-top:12px;
  }
  .station-row {
    margin:10px 0;
  }
  .station-display h3 {
    font-size:1.6rem;
    min-height:2em;
  }
  .station-vibe {
    margin:10px 0;
    min-height:42px;
  }
  .personal-message p {
    font-size:.8rem;
    line-height:1.4;
  }
  .personal-message strong {
    font-size:.82rem;
    margin-top:12px;
  }
  .signature {
    margin:10px 0 14px;
  }
  .cargo-frame {
    width:min(100vw,calc((100dvh - 240px)*.80028));
  }
  .cargo-content>.display-title {
    font-size:1.4rem;
  }
  .journey-top .description {
    display:none;
  }
  .map-heading {
    top:150px;
  }
  .driving-radio {
    top:185px;
  }
  .minimap {
    width:90px;
    height:90px;
  }
  .minimap span {
    left:16px;
  }
  .journey-actions {
    width:145px;
  }
  .gas-button {
    min-height:75px;
  }
}
@media(max-height:500px) and (orientation:landscape) {
  body {
    overflow:auto;
  }
  .scene {
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  .scene-character {
    align-items:center;
  }
  .character-content {
    margin:0;
    width:55%;
    max-width:460px;
  }
  .character-id {
    display:none;
  }
  .scene-character .scene-art img {
    width:60%;
    margin-left:auto;
  }
  .scene-radio {
    min-height:590px;
  }
  .scene-finale.message-visible {
    min-height:630px;
  }
  .scene-cargo {
    min-height:500px;
  }
  .hud-bottom {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .mission-flash::after {
    opacity:0;
  }
  .equalizer i:nth-child(2n) {
    height:20px;
  }
}
/* Keep the tuner legible and the cargo portrait unobstructed on phones. */
@media(max-width:900px) {
  .scene-radio::after {
    background:#090b10c4;
  }
  .cargo-stage {
    background:#10151d;
  }
  .cargo-frame {
    margin-top:72px;
  }
  .cargo-frame::after {
    content:'';
    position:absolute;
    inset:70% 0 0;
    background:linear-gradient(transparent,#10151d);
    pointer-events:none;
  }
  .cargo-content>.display-title {
    position:static;
    font-size:2.25rem;
    margin-bottom:18px;
  }
  .cargo-content>.eyebrow {
    bottom:calc(100dvh - 141px);
  }
  .cargo-content {
    max-width:530px;
    margin-inline:auto;
  }
  .scene-cargo::after {
    background:linear-gradient(0deg,#090b10dd,transparent 42%);
  }
}
@media(max-width:900px) and (max-height:700px) {
  .cargo-content>.display-title {
    font-size:1.65rem;
    margin-bottom:12px;
  }
  .cargo-objective {
    margin-bottom:12px;
  }
  .cargo-frame {
    margin-top:62px;
  }
  .cargo-frame::after {
    inset:65% 0 0;
  }
}
@media(max-width:900px) {
  .driving-radio {
    top:auto;
    bottom:245px;
    right:24px;
    max-width:190px;
  }
  .driving-radio strong {
    font-size:1.05rem;
  }
}
@media(max-width:900px) and (max-height:700px) {
  .driving-radio {
    bottom:210px;
    max-width:160px;
  }
}
/* One main portrait per scene; the HUD floats over its shaded edge. */
.scene-art {
  background-image:none;
  background-color:#10151d;
}
.scene-finale .scene-art {
  background-image:linear-gradient(#090b10bb,#090b10bb),var(--art-url);
}
@media(max-width:900px) and (max-height:620px) {
  .cargo-frame {
    width:min(100vw,calc((100dvh - 260px)*.80028));
  }
}
@media(max-width:900px) {
  .mode-feedback { min-height:82px; margin:10px 0; }
  .mode-feedback .unlock { font-size:.85rem; line-height:1.45; }
  #package-unlocked { font-size:.73rem; }
  .scene-character { padding-bottom:max(65px,calc(env(safe-area-inset-bottom) + 45px)); }
  #finale-message {
    left:24px;
    right:24px;
    width:calc(100% - 48px);
    max-width:420px;
    margin:0;
    inset-block-start:auto;
    inset-block-end:max(70px,calc(env(safe-area-inset-bottom) + 48px));
    padding:0 0 4px;
  }
  .cargo-content>.eyebrow {
    position:absolute;
    top:auto;
    bottom:calc(100dvh - 173px - env(safe-area-inset-top));
    left:0;
  }
  .cargo-frame {
    margin-top:max(94px,calc(env(safe-area-inset-top) + 90px));
    width:min(100vw,calc((100dvh - 280px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.80028));
  }
  .journey-top { top:max(80px,calc(env(safe-area-inset-top) + 72px)); }
  .map-heading { top:max(175px,calc(env(safe-area-inset-top) + 165px)); }
  .intro-number,.character-id { top:max(88px,calc(env(safe-area-inset-top) + 78px)); }
}
@media(max-width:900px) and (max-height:700px) {
  .map-heading { top:max(150px,calc(env(safe-area-inset-top) + 145px)); }
}
@media(max-width:900px) and (max-height:620px) {
  .cargo-frame {
    margin-top:max(84px,calc(env(safe-area-inset-top) + 90px));
    width:min(100vw,calc((100dvh - 292px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.80028));
  }
}