/* photo / video slot: real app screens and footage plug in here later */
.slot {
  margin: 4px 0 0; width: 132px; aspect-ratio: 9 / 19.5; max-width: 100%;
  border: 1px solid var(--ink-faint); border-radius: 18px; padding: 5px;
  background: #050505;
}
.slot > div, .slot img, .slot video {
  width: 100%; height: 100%; border-radius: 13px; display: block; object-fit: cover;
}
.slot > div {
  display: grid; place-content: center; text-align: center; padding: 10px;
  background: repeating-linear-gradient(135deg, #070707 0 8px, #0b0b0b 8px 16px);
  font: 400 9px/1.5 var(--f-mono); letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase;
}
/* Through the Scope: the whole page is seen through the app's Scope.
   One circle of night city in the middle; everything outside it is black HUD chrome. */
:root {
  --black: #000;
  --ink: #EDEDED;
  --ink-dim: rgba(237, 237, 237, .62);
  --ink-faint: rgba(237, 237, 237, .2);
  --ink-ghost: rgba(237, 237, 237, .08);
  --glint: #FFE8A3;
  --hot: #FFFFFF;
  --ember: #FF5A1F;
  --char: #3A0A00;
  --paper: #0b0b0a;

  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* set by main.js on resize */
  --cx: 50vw;
  --cy: 50vh;
  --r: 280px;
  /* set by main.js every frame (drift + breathing) */
  --mx: 50vw;
  --my: 50vh;
  --mr: 280px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body.xp { overflow: hidden; overscroll-behavior: none; touch-action: none; }
body.calm { overflow-y: auto; }

a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--glint); outline-offset: 3px; }

.skip {
  position: fixed; left: 16px; top: 8px; z-index: 90;
  transform: translateY(-160%);
  background: var(--glint); color: var(--black);
  font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 14px; text-decoration: none;
}
.skip:focus { transform: none; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 80; background: var(--black);
  display: grid; place-content: center; justify-items: center; gap: 22px;
  transition: opacity .7s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
.ld-svg { width: 168px; height: 168px; overflow: visible; }
.ld-track { fill: none; stroke: var(--ink-ghost); stroke-width: 1; }
.ld-ring {
  fill: none; stroke: var(--ink); stroke-width: 1.2;
  stroke-dasharray: 566; stroke-dashoffset: 566;
  transform: rotate(-90deg); transform-origin: 100px 100px;
  transition: stroke-dashoffset .35s ease;
}
.ld-x { stroke: var(--ink-faint); stroke-width: 1; }
.ld-text { margin: 0; font: 400 11px/1 var(--f-mono); letter-spacing: .26em; color: var(--ink-dim); }

/* ---------- the scope ---------- */
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#mask {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--mx) var(--my),
    transparent 0,
    transparent calc(var(--mr) * .58),
    rgba(0, 0, 0, .42) calc(var(--mr) * .86),
    rgba(0, 0, 0, .9) calc(var(--mr) * .985),
    #000 var(--mr));
}
#bloom {
  position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, .95) 0,
    rgba(255, 232, 163, .45) calc(var(--mr) * .35),
    rgba(255, 232, 163, .08) calc(var(--mr) * .8),
    transparent var(--mr));
  mix-blend-mode: screen;
}
#bloom.on { animation: bloom .75s ease-out; }
@keyframes bloom { 0% { opacity: 0; } 12% { opacity: .62; } 100% { opacity: 0; } }

#reticle { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
#reticle .r-main { fill: none; stroke: rgba(237, 237, 237, .6); stroke-width: 1.2; }
#reticle .r-thin { fill: none; stroke: rgba(237, 237, 237, .18); stroke-width: .8; }
#reticle .r-tick { stroke: rgba(237, 237, 237, .42); stroke-width: 1; }
#reticle .r-post { stroke: rgba(237, 237, 237, .78); stroke-width: 2.6; }
#reticle .r-hair { stroke: rgba(237, 237, 237, .55); stroke-width: .8; }
#reticle .r-dot { fill: rgba(237, 237, 237, .6); }
#reticle .r-center { fill: var(--glint); }
#reticle .r-num { fill: rgba(237, 237, 237, .45); font: 400 9px var(--f-mono); letter-spacing: .1em; }
#flare { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; opacity: 0; }
#flare i { position: absolute; display: block; mix-blend-mode: screen; }
.fl-core {
  width: 260px; height: 260px; left: -130px; top: -130px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .9) 5%, rgba(255, 232, 163, .55) 16%, rgba(255, 232, 163, .12) 40%, transparent 68%);
}
.fl-streak {
  width: 90vw; height: 3px; left: -45vw; top: -1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 163, .35) 30%, #fff 50%, rgba(255, 232, 163, .35) 70%, transparent);
  filter: blur(.6px);
}
.fl-ring {
  width: 120px; height: 120px; left: -60px; top: -60px; border-radius: 50%;
  border: 1px solid rgba(255, 232, 163, .5);
}
#flare.on { animation: flare .9s ease-out; }
#flare.on .fl-core { animation: flcore .9s ease-out; }
#flare.on .fl-ring { animation: flring .9s ease-out; }
@keyframes flare { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flcore { 0% { transform: scale(.2); } 15% { transform: scale(1); } 100% { transform: scale(.7); } }
@keyframes flring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }

#grain {
  position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: .05;
}

/* store buttons */
.badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 14px 8px; min-width: 124px;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(237, 237, 237, .55);
  text-decoration: none; cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.badge:hover { border-color: var(--glint); background: rgba(255, 232, 163, .08); box-shadow: 0 0 22px rgba(255, 232, 163, .18); }
.badge .b-top { font: 400 9px/1 var(--f-mono); letter-spacing: .2em; color: var(--ink-dim); text-transform: uppercase; }
.badge .b-main { font: 600 18px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--hot); }
.badge .b-soon { font: 400 9px/1 var(--f-mono); letter-spacing: .16em; color: var(--glint); text-transform: uppercase; }
.badges.big .badge { min-width: 150px; padding: 12px 18px 11px; }
.badges.big .badge .b-main { font-size: 22px; }
.stop.pulse .badge { animation: pulse 1.4s ease-out 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 232, 163, .7); } 100% { box-shadow: 0 0 0 18px rgba(255, 232, 163, 0); } }

/* chapter: scope readouts */
.readouts { display: flex; gap: 14px; align-items: center; font: 500 max(10px, calc(var(--r) * .034))/1 var(--f-mono); letter-spacing: .2em; }
.readouts .glint-on { color: var(--glint); }
.readouts .glint-on::before { content: "● "; }
.readouts .zoom { color: var(--hot); font-family: var(--f-display); font-size: max(20px, calc(var(--r) * .1)); letter-spacing: .04em; }

/* chapter: burn */
.dossier { position: relative; width: 150px; max-width: 100%; }
.dossier canvas { display: block; width: 100%; height: auto; }
.dossier .d-frame { border: 1px solid var(--ink-faint); padding: 6px 6px 8px; background: rgba(0, 0, 0, .7); }
.dossier .d-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font: 400 9px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-dim); }
.dossier .stamp {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.6); opacity: 0;
  border: 2px solid var(--glint); color: var(--glint);
  font: 700 22px/1 var(--f-display); letter-spacing: .1em;
  padding: 6px 10px 5px; white-space: nowrap; background: rgba(0, 0, 0, .55);
  transition: opacity .2s, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.dossier.done .stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }

/* chapter: plans */
.plans { display: flex; gap: 10px; justify-content: center; }
.plan {
  flex: 1 1 0; min-width: 0; padding: 10px 10px 9px; text-align: left;
  border: 1px solid var(--ink-faint); background: rgba(0, 0, 0, .66);
  display: flex; flex-direction: column; gap: 5px;
}
.plan .p-name { font: 400 9px/1.2 var(--f-mono); letter-spacing: .16em; color: var(--ink-dim); text-transform: uppercase; }
.plan .p-price { font: 600 24px/1 var(--f-display); text-transform: uppercase; color: var(--hot); }
.plan:first-child .p-price { color: var(--glint); }
.plan .p-line { font: 400 11px/1.3 var(--f-body); color: var(--ink-dim); }

/* ---------- HUD chrome ---------- */
.hud {
  position: fixed; left: 0; right: 0; z-index: 20;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 400 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-top { top: 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)); align-items: flex-start; }
.hud-bottom { bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
.wordmark { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.wm-logo { display: block; height: 36px; width: auto; }
.stores { display: flex; gap: 8px; }
.stores .badge { min-width: 0; padding: 7px 10px 6px; }
.stores .badge .b-main { font-size: 13px; }
.stores .badge .b-top { display: none; }
.hud-left, .hud-right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hud-bottom a, .hud-bottom button {
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: none;
  color: var(--ink-dim); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.hud-bottom a:hover, .hud-bottom button:hover { color: var(--ink); }
.hud-bottom button b { font-weight: 500; color: var(--ink); }
.hud-bottom button[aria-pressed="true"] { color: var(--glint); }
.hud-bottom .email { text-transform: none; letter-spacing: .06em; user-select: all; }

#flash { position: fixed; inset: 0; z-index: 95; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { opacity: 1; }

#toast {
  position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 14px; background: var(--black); border: 1px solid var(--glint); color: var(--glint);
  font: 400 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .25s, transform .25s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.noscript { position: fixed; inset: auto 16px 40% 16px; text-align: center; color: var(--ink); z-index: 99; }

@media (max-width: 560px) {
  .wm-logo { height: 28px; }
  .stores .badge { padding: 6px 8px 5px; }
  .stores .badge .b-soon { display: none; }
  .hud-left, .hud-right { gap: 12px; }
  .hud-bottom { justify-content: center; row-gap: 6px; letter-spacing: .12em; }
  .hud-bottom .email { display: none; }
  .hud-bottom .hud-left, .hud-bottom .hud-right { gap: 10px; justify-content: center; }
  #quick { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- calm layout: the Dossier Desk (reduce motion / no 3D) ---------- */
body.calm #world, body.calm #mask, body.calm #bloom, body.calm #reticle, body.calm #pips,
body.calm #flare, body.calm #grain, body.calm #wide, body.calm #spots, body.calm #hints, body.calm #quick { display: none; }
body.calm .hud-top { background: linear-gradient(#000 60%, transparent); padding-bottom: 18px; }
body.calm .hud-bottom { background: linear-gradient(transparent, #000 45%); padding-top: 22px; }

#desk {
  min-height: 100%;
  padding-block: 110px 120px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 232, 163, .1), transparent 70%),
    var(--black);
}
.desk-col { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.case {
  background: var(--paper); border: 1px solid var(--ink-faint);
  padding: 26px clamp(18px, 4vw, 34px) 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: start;
}
.case > .case-text { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.case .kicker { color: var(--glint); }
.case h2, .case h1 {
  margin: 0; font: 600 clamp(30px, 6vw, 46px)/.95 var(--f-display); text-transform: uppercase; color: var(--hot);
  text-wrap: balance;
}
.case .body { color: var(--ink-dim); }
.case .badges { justify-content: flex-start; }
.case .plans { justify-content: flex-start; }
.case .plan { width: 170px; }
.case .plan .p-name { font-size: 10px; }
.case .plan .p-price { font-size: 26px; }
.case .plan .p-line { font-size: 12px; }
.case .dossier { width: 170px; }
.case .dossier .d-meta { font-size: 9px; }
.case .readouts { font-size: 11px; }
.case .readouts .zoom { font-size: 26px; }
.case .slot { width: 120px; }
@media (max-width: 600px) {
  .case { grid-template-columns: minmax(0, 1fr); }
  .case .slot.empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .badge, .stop.pulse .badge { animation: none; transition: none; }
}



/* ---------- one cityscape: wide view with gold dots; click one and the Scope zooms in ---------- */
#reticle { opacity: 0; transition: opacity .4s; }
body.zoomed #reticle { opacity: 1; }

#pips { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.pip {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer; pointer-events: auto;
  display: grid; place-items: center;
}
.pip i {
  position: relative; display: block; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--glint); box-shadow: 0 0 12px 3px rgba(255, 232, 163, .7);
  transition: transform .2s;
}
.pip i::after {
  content: ""; position: absolute; inset: -8px; border: 1px solid rgba(255, 232, 163, .7);
  animation: pip 2.2s ease-out infinite;
}
.pip:hover i, .pip:focus-visible i { transform: rotate(45deg) scale(1.5); }
@keyframes pip { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

/* wide view: headline and store buttons */
#wide {
  position: fixed; z-index: 8; display: flex; flex-direction: column; gap: 14px;
  left: max(28px, env(safe-area-inset-left, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 56px)); transition: opacity .4s; pointer-events: none;
}
#wide .badges { pointer-events: auto; }
body.zoomed #wide { opacity: 0; pointer-events: none; }
#wide .headline {
  margin: 0; font: 600 clamp(30px, 4.6vw, 58px)/.95 var(--f-display); text-transform: uppercase;
  color: var(--hot); text-wrap: balance; text-shadow: 0 0 18px #000, 0 0 4px #000;
}
#wide .sub { margin: 0; max-width: 44ch; color: var(--ink); text-shadow: 0 0 10px #000, 0 0 3px #000; }
#wide .badges { justify-content: flex-start; }
body[data-layout="stack"] #wide { left: 16px; right: 16px; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
body[data-layout="stack"] #wide .badge { min-width: 0; flex: 1 1 0; }

/* the spot's content, shown inside the Scope once it arrives */
#spots { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.spot {
  position: absolute; pointer-events: auto;
  left: 50%; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-height: 46vh; overflow-y: auto;
  width: min(620px, calc(100vw - 32px));
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .8));
}
.spot.in { animation: spot .5s ease-out; }
@keyframes spot { 0% { opacity: 0; transform: translate(-50%, 10px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
.spot-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.spot .code { margin: 0; font: 500 10px/1.3 var(--f-mono); letter-spacing: .26em; color: var(--glint); text-transform: uppercase; }
.spot .headline {
  margin: 0; font: 600 clamp(24px, 2.9vw, 38px)/.95 var(--f-display); text-transform: uppercase;
  color: var(--hot); text-wrap: balance;
}
.spot .body { margin: 0; color: var(--ink); max-width: 52ch; }
.spot .slot { width: 84px; flex: none; margin: 0; }
.spot .plans { justify-content: flex-start; max-width: 360px; }
.spot .dossier { width: 92px; }
.spot .dossier .stamp { font-size: 16px; }
body[data-layout="stack"] .spot {
  top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; overflow-y: auto;
}
body[data-layout="stack"] .spot .slot.empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pip i::after, .spot.in { animation: none; }
}

/* scoped in: the four corners of the black say what's that way */
#hints { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hint {
  position: absolute; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; max-width: 200px;
  background: none; border: 0; padding: 8px; color: var(--ink-dim);
  font: 400 10px/1.3 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  transition: color .2s, transform .25s;
  animation: hint .5s ease-out;
}
@keyframes hint { 0% { opacity: 0; } 100% { opacity: 1; } }
.hint i { width: 16px; height: 16px; border: 2px solid var(--glint); border-right: 0; border-bottom: 0; opacity: .8; }
.hint .h-place { color: var(--ink); font-size: 11px; }
.hint .h-title { color: var(--glint); }
.hint-tl { left: max(24px, env(safe-area-inset-left, 0px)); top: calc(86px + env(safe-area-inset-top, 0px)); align-items: flex-start; text-align: left; }
.hint-tr { right: max(24px, env(safe-area-inset-right, 0px)); top: calc(86px + env(safe-area-inset-top, 0px)); align-items: flex-end; text-align: right; }
.hint-bl { left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; text-align: left; }
.hint-br { right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; text-align: right; }
.hint-tl i { transform: rotate(0deg); }
.hint-tr i { transform: rotate(90deg); }
.hint-br i { transform: rotate(180deg); }
.hint-bl i { transform: rotate(-90deg); }
.hint:hover, .hint.hot { color: var(--ink); }
.hint:hover i, .hint.hot i { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 232, 163, .8)); }
.hint-tl.hot { transform: translate(-6px, -6px); } .hint-tr.hot { transform: translate(6px, -6px); }
.hint-bl.hot { transform: translate(-6px, 6px); } .hint-br.hot { transform: translate(6px, 6px); }
body[data-layout="stack"] .hint-bl, body[data-layout="stack"] .hint-br { bottom: auto; top: calc(var(--hint-low, 60vh)); }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; transition: none; } }
.hint-bl i, .hint-br i { order: 3; }

body[data-layout="stack"] .spot { max-height: 40vh; }

/* Quick Travel: bottom right, city view only */
#quick {
  position: fixed; z-index: 11; right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  transition: opacity .3s;
}
body.zoomed #quick { opacity: 0; pointer-events: none; }
.qt-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(0, 0, 0, .6); border: 1px solid var(--ink-faint); padding: 8px 12px;
  font: 500 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  transition: border-color .2s, color .2s;
}
.qt-btn i { width: 6px; height: 6px; background: var(--glint); transform: rotate(45deg); box-shadow: 0 0 8px 2px rgba(255, 232, 163, .6); }
.qt-btn:hover, .qt-btn.on { border-color: var(--glint); color: var(--glint); }
.qt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qt-list button {
  cursor: pointer; background: rgba(0, 0, 0, .7); border: 0; border-right: 2px solid var(--glint);
  padding: 7px 12px; color: var(--ink); text-align: right;
  font: 600 16px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  transition: color .2s, background .2s;
  animation: qt .35s ease-out backwards;
}
.qt-list li:nth-last-child(1) button { animation-delay: .05s; } .qt-list li:nth-last-child(2) button { animation-delay: .12s; }
.qt-list li:nth-last-child(3) button { animation-delay: .19s; } .qt-list li:nth-last-child(4) button { animation-delay: .26s; }
.qt-list li:nth-last-child(5) button { animation-delay: .33s; } .qt-list li:nth-last-child(6) button { animation-delay: .4s; }
@keyframes qt { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.qt-list button:hover, .qt-list button:focus-visible { color: var(--glint); background: rgba(255, 232, 163, .08); }
@media (prefers-reduced-motion: reduce) { .qt-list button { animation: none; } }
body[data-layout="stack"] #wide { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
body[data-layout="stack"].qt-open #wide { opacity: 0; pointer-events: none; }

/* card extras: reticle designs (Loadout) and rank colours (Level up) */
.reticles { display: flex; gap: 12px; }
.reticles svg { width: 46px; height: 46px; stroke: currentColor; stroke-width: 1.6; fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.reticles svg circle[r="17"], .reticles svg circle[r="8"] { fill: none; }
.ranks { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ranks span { display: inline-flex; align-items: center; gap: 6px; }
.ranks i { width: 9px; height: 9px; transform: rotate(45deg); }
.ranks span:last-child { color: #D4A944; }

/* wide view: a shorter headline block, so the spots on the left of the city stay clear */
#wide .headline { font-size: clamp(26px, 3.1vw, 40px); }

/* story order: numbered dots, "Start here" on the first */
.pip b {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  font: 600 13px/1 var(--f-display); color: var(--glint); text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.pip .start {
  position: absolute; left: 26px; top: calc(50% + 12px); white-space: nowrap;
  font: 500 9px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.qt-n { display: inline-block; min-width: 1.4em; margin-right: 8px; color: var(--glint); text-align: left; }