/* Ankit — explorable sector portfolio.
   Lifted out of index.html on 2026-09-04: at 1696 lines it was 29% of the page
   and the single file had grown past comfortable editing. This is a byte-for-byte
   move, only de-indented, so the cascade is unchanged.
   Loaded from index.html at the exact point the <style> block used to sit. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* removes the default grey/blue flash Chrome/Safari draw on every tap —
     without this a mobile page reads as an unstyled web page, not an app */
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #05070d;
}

body {
  font-family: 'Barlow', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Only the WebGL canvas is fullscreen — #radar must stay in normal flow */
#scene {
  display: block;
  position: fixed;
  inset: 0;
  touch-action: none;
}

:root {
  --ink: #e8eefc;
  --dim: rgba(232, 238, 252, 0.52);
  --line: rgba(232, 238, 252, 0.14);
  --cyan: #7ee7ff;
  --amber: #ffb454;
  --panel: rgba(8, 13, 26, 0.72);

  /* motion system — every transition in this file routes through these
     so timing reads as one coherent instrument, not scattered ad-hoc values */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  /* button/link hover + active feedback */
  --dur-base: 300ms;
  /* default UI state changes — fades, HUD, markers */
  --dur-slow: 550ms;
  /* deliberate reveals — docking panel, chip underline */
  --dur-slower: 900ms;
  /* full-screen crossfades — loader, HUD arrival */
}

/* visible keyboard focus on every interactive element — restrained, not decorative */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* instrument readouts use a mono face — this is a cockpit, not a landing page */
.mono,
.mono-label,
#speed-val,
#race-time,
.marker .dist,
#load-pct,
kbd {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.mono-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* panels read as backlit instrument glass: dark base, hairline, top light-leak */
.glass {
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.glass::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 231, 255, 0.55), transparent);
  pointer-events: none;
}

/* ══════════ LOADER ══════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity var(--dur-slower) var(--ease-out), visibility var(--dur-slower);
}

#loader.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader h1 {
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -2px;
  text-align: center;
}

#loader .tag {
  color: rgba(120, 180, 255, 0.9);
}

#load-track {
  width: min(300px, 70vw);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

#load-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), #8ec5ff);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.9);
  transition: width var(--dur-base) var(--ease-out);
}

#load-pct {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.2em;
}

#launch {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  padding: 16px 46px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(140, 190, 255, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* the arrival moment: launch pops in from a slight recess once the ship is ready */
#launch.ready {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#launch:hover {
  transform: scale(1.06);
  background: rgba(90, 150, 255, 0.14);
}

#launch:active {
  transform: scale(0.98);
}

/* ══════════ HUD ══════════ */
#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out) 0.2s;
}

#hud.on {
  opacity: 1;
}

#hud a,
#hud button {
  pointer-events: auto;
}

.hud-tl {
  position: absolute;
  top: 22px;
  left: 24px;
}

.hud-tl .brand {
  font-size: 26px;
  line-height: 1;
}

.hud-tl .sub {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  text-transform: uppercase;
}

.hud-tr {
  position: absolute;
  top: 22px;
  right: 24px;
  text-align: right;
}

.hud-tr .count {
  font-size: 30px;
  line-height: 1;
}

.hud-tr .count b {
  font-weight: 400;
  color: #8ec5ff;
}

.hud-tr .lbl {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin-top: 5px;
}

.hud-tr .home {
  display: inline-block;
  margin-top: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.hud-tr .home:hover {
  color: #fff;
  border-color: rgba(140, 190, 255, 0.5);
}

/* radar */
#radar-wrap {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 10px;
  border-radius: 14px;
  cursor: pointer;
  /* #hud is pointer-events:none so the scene stays draggable through it —
     anything clickable inside has to opt back in */
  pointer-events: auto;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

#radar-wrap:hover { border-color: rgba(126, 231, 255, 0.45); }
#radar-wrap:active { transform: scale(0.95); }

#radar {
  display: block;
  position: static;
  width: 132px;
  height: 132px;
}

#radar-wrap .cap {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-top: 6px;
  text-transform: uppercase;
}

/* speed */
#speed-wrap {
  position: absolute;
  bottom: 34px;
  right: 24px;
  text-align: right;
}

#speed-val {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -2px;
}

#speed-val small {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
  font-family: 'Barlow';
  font-style: normal;
}

#thr-track {
  width: 130px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 10px;
  margin-left: auto;
  border-radius: 2px;
  overflow: hidden;
}

#thr-bar {
  height: 100%;
  width: 0%;
  background: #6aa8ff;
  box-shadow: 0 0 8px rgba(90, 150, 255, 0.9);
  transition: width var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

#thr-bar.boost {
  background: #ffd27a;
  box-shadow: 0 0 10px rgba(255, 190, 90, 0.9);
}

/* controls hint */
#controls {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 9999px;
  transition: opacity var(--dur-slow) var(--ease-out);
}

#controls span {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

#controls kbd {
  font-family: 'Barlow';
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0 2px;
  color: #cfe3ff;
}

#controls.dim {
  opacity: 0.5;
}

/* dock prompt */
#prompt {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 20;
  transform: translate(-50%, 0) scale(0.94);
  padding: 13px 26px;
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
}

#prompt.on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

#prompt .k {
  background: #8ec5ff;
  color: #00142e;
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 11px;
  margin-right: 9px;
}

#prompt .t {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* station markers */
.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  /* only opacity here — .marker's own transform is rewritten every frame to
     track projected screen position, so easing it would lag the marker behind
     the ship's actual motion. Scale-up-on-approach lives on the child .ring instead. */
  transition: opacity var(--dur-base) var(--ease-out);
  will-change: transform;
}

.marker .ring {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
  opacity: 0.85;
  /* re-enabled above pointer-events:none on .marker so a tap on the ring
     alone triggers autopilot — name/distance text below stays inert */
  pointer-events: auto;
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.marker .ring::after {
  content: '';
  position: absolute;
  inset: 12px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  transition: inset var(--dur-base) var(--ease-out);
}

.marker.visited .ring::after {
  inset: 9px;
  opacity: 0.5;
}

/* nearest dockable station draws the eye with a subtle scale-up */
.marker.nearest .ring {
  transform: scale(1.22);
}

/* hover affordance rides brightness only, so it composes with .nearest's
   transform instead of fighting it for the same property */
.marker .ring:hover {
  filter: brightness(1.5);
}

.marker .name {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  transition: opacity var(--dur-base) var(--ease-out);
}

.marker .dist {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
  transition: opacity var(--dur-base) var(--ease-out);
}

.marker.off .name,
.marker.off .dist {
  opacity: 0;
}

.marker.off .ring {
  width: 12px;
  height: 12px;
}

.marker.off .ring::after {
  inset: 3px;
}

/* ══════════ PANEL ══════════ */
#panel {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(0, 0, 6, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

#panel.on {
  opacity: 1;
  visibility: visible;
}

#panel-box {
  width: min(920px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 4px;
  /* instrument slab, not a bubble */
  padding: 46px clamp(24px, 5vw, 58px) 52px;
  border-left: 2px solid var(--accent, var(--cyan));
  transform: translateY(18px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

#panel.on #panel-box {
  transform: translateY(0);
  opacity: 1;
}

/* station colour bleeds in from the binding edge */
#panel-box::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent, #7ee7ff) 12%, transparent), transparent 42%);
}

/* content reveals in sequence once the slab lands */
#panel.on #panel-eyebrow {
  animation: rise var(--dur-slow) 0.10s var(--ease-out) both;
}

#panel.on #panel-title {
  animation: rise var(--dur-slow) 0.16s var(--ease-out) both;
}

#panel.on #panel-body {
  animation: rise var(--dur-slow) 0.24s var(--ease-out) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

#panel-box::-webkit-scrollbar {
  width: 4px;
}

#panel-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

#panel-eyebrow {
  color: var(--accent, var(--cyan));
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#panel-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 120px;
  background: linear-gradient(90deg, currentColor, transparent);
}

#panel-box h2 {
  font-size: clamp(2.3rem, 6.2vw, 3.7rem);
  letter-spacing: -2px;
  line-height: 0.98;
  margin-bottom: 24px;
}

#panel-box p.lede {
  color: rgba(232, 238, 252, 0.78);
  font-weight: 300;
  line-height: 1.72;
  font-size: 15.5px;
  max-width: 60ch;
}

#panel-box p.lede b {
  color: var(--ink);
  font-weight: 500;
}

#panel-close {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

#panel-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

#panel-close:active {
  transform: scale(0.92);
}

/* spec-sheet rows, not floating cards: hairline dividers do the structuring */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 0;
  margin-top: 30px;
}

/* stat row — real numbers pulled to the front so the panel is scannable in
   seconds instead of needing a paragraph read. Values are from the resume,
   never invented. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 2px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.stat {
  background: #060b16;
  padding: 15px 14px 14px;
}

.stat b {
  display: block;
  font-family: 'Chivo Mono', monospace;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  color: #8ec5ff;
  letter-spacing: -0.01em;
}

.stat span {
  display: block;
  margin-top: 6px;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.45;
}

/* tight fact list — replaces long prose blocks */
.facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.facts li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid var(--line);
}

.facts li:first-child {
  border-top: none;
}

.facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8ec5ff;
  opacity: 0.75;
}

.facts b {
  color: #fff;
  font-weight: 600;
}

/* certificate gallery — the real scans, framed like documents.
   Deliberately object-fit: CONTAIN, not cover: these are certificates, and
   cropping one turns it into an unrecognisable white fragment. Each sits on
   a dark matte with padding so the whole document reads at a glance and the
   bright paper doesn't glare against the dark UI. */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.cert {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.cert:hover,
.cert:focus-visible {
  border-color: rgba(142, 197, 255, 0.5);
  background: rgba(142, 197, 255, 0.06);
  transform: translateY(-3px);
}

.cert .shot {
  aspect-ratio: 4 / 3;
  min-height: 0;   /* let the aspect-ratio box win over the image's intrinsic height */
  display: grid;
  place-items: center;
  padding: 11px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(142, 197, 255, 0.07), transparent 70%),
    #070c18;
  border-bottom: 1px solid var(--line);
}

.cert img {
  display: block;
  /* Fill the .shot box exactly and let object-fit do the letterboxing.
     max-width/max-height do NOT work here: the <img> carries width/height
     attributes (kept for CLS) and max-* resolves against an auto-sized grid
     row, so the image overflowed and .cert's overflow:hidden clipped a few
     px off the top and bottom of the narrower certificates. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
  /* knock the paper back a touch so it sits in the dark UI instead of
     glaring out of it; full brightness on hover */
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-out);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.cert:hover img,
.cert:focus-visible img {
  opacity: 1;
}

.cert .meta {
  padding: 11px 13px 13px;
}

.cert .meta b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}

.cert .meta span {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 767px) {
  /* 140px min forces 2 columns on a phone. At 190px it fell back to a
     single column, which made 9 certificates an unreasonably long scroll. */
  .cert-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .cert .shot {
    padding: 7px;
  }

  .cert .meta {
    padding: 9px 10px 10px;
  }

  .cert .meta b {
    font-size: 11.5px;
  }
}

.item {
  padding: 20px 22px 22px 0;
  border-top: 1px solid var(--line);
  margin-right: 22px;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out);
}

.item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--accent, var(--cyan));
  transition: width var(--dur-slow) var(--ease-out);
}

.item:hover::before {
  width: 46px;
}

.item h3 {
  font-size: 15.5px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  transition: color var(--dur-base) var(--ease-out);
}

.item p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(232, 238, 252, 0.6);
  line-height: 1.65;
}

.item .tag {
  display: inline-block;
  margin-top: 13px;
  font-family: 'Chivo Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, var(--cyan));
}

.item a {
  color: inherit;
  text-decoration: none;
}

.item a:hover h3 {
  color: var(--accent, var(--cyan));
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.chip {
  padding: 9px 18px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.chip:hover {
  border-color: rgba(140, 190, 255, 0.5);
  color: #cfe3ff;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.links a {
  padding: 14px 30px;
  border-radius: 9999px;
  text-decoration: none;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.links a:hover {
  transform: scale(1.04);
  border-color: rgba(140, 190, 255, 0.55);
}

.links a:active {
  transform: scale(0.98);
}

/* toast — Bruno-Simon-folio-2025-style notification banner: slides down
   from the top with a bouncy overshoot, a shrinking time-bar shows how
   long it'll stay, and it queues rather than clobbering a toast in flight */
#toast {
  position: fixed;
  z-index: 70;
  top: 20px;
  left: 50%;
  width: min(380px, calc(100% - 40px));
  transform: translate(-50%, calc(-100% - 20px));
  padding: 12px 20px 15px;
  border-radius: 10px;
  background: radial-gradient(ellipse at top left, #1c2436, #131826);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s cubic-bezier(0.4, 1.6, 0.65, 1);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #cfe3ff;
  overflow: hidden;
}

#toast.on {
  transform: translate(-50%, 0);
}

#toast.leaving {
  transform: translate(-50%, calc(-100% + 10px)) scale(0.92);
  transition-timing-function: cubic-bezier(0.42, 0, 0.47, -0.55);
  transition-duration: 0.45s;
}

#toast .time-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #8ec5ff;
  transform-origin: 100% 0;
  will-change: transform;
}

#toast.is-error .time-bar { background: #ff6a7c; }
#toast.is-success .time-bar { background: #d5ff95; }

/* hud utility buttons (log / behind / sound) */
/* One panel, uniform full-width rows. It used to be a loose stack of
   pills right-aligned with `align-items: flex-end`, so every row started at
   a different x and the edge read as ragged. */
.hud-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  align-items: stretch;
  width: 216px;
  padding: 10px;
  border-radius: 14px;
  pointer-events: auto;
}

/* group heading — separates the two actions above from the display
   switches below, which previously sat in one undifferentiated stack */
.hud-sep {
  font-family: 'Barlow';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 238, 252, 0.32);
  padding: 10px 10px 4px;
  border-top: 1px solid rgba(232, 238, 252, 0.09);
  margin-top: 6px;
  text-align: left;
}

/* a toggle is a labelled switch, not a sentence: name on the left, state
   shown by the switch on the right, so the rows scan as a column */
.hud-tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: 'Barlow';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 238, 252, 0.55);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.hud-tgl:hover { color: #fff; background: rgba(142, 197, 255, 0.08); }
.hud-tgl.on { color: rgba(232, 238, 252, 0.9); }

.hud-tgl i {
  flex: none;
  width: 26px;
  height: 14px;
  border-radius: 9999px;
  background: rgba(232, 238, 252, 0.1);
  border: 1px solid rgba(232, 238, 252, 0.18);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.hud-tgl i::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(232, 238, 252, 0.55);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.hud-tgl.on i {
  background: rgba(126, 231, 255, 0.22);
  border-color: rgba(126, 231, 255, 0.6);
}

.hud-tgl.on i::after {
  transform: translateX(12px);
  background: #7ee7ff;
}

/* The toggle is shown everywhere now; sizing lives with the collapse rules
   further down. This block used to hide it outside the phone breakpoint. */

.hud-btn {
  /* folio-2025 trigger chrome (menu.styl/map.styl .button-inner + ::after):
     faint translucent fill, hairline border that brightens 0.35 -> 0.8 on
     hover, label opacity 0.6 -> 1 — ported to the site's blue palette */
  background: rgba(142, 197, 255, 0.05);
  border: 1px solid rgba(232, 238, 252, 0.16);
  color: rgba(232, 238, 252, 0.62);
  font-family: 'Barlow';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* inside the menu the actions are rows, not free-floating pills — one
   corner-radius system for the whole panel */
.hud-btns .hud-btn {
  text-align: left;
  border-radius: 8px;
  border-color: transparent;
  background: none;
  padding: 8px 10px;
}

.hud-btns .hud-btn:hover {
  transform: none;
  border-color: transparent;
  background: rgba(142, 197, 255, 0.1);
}

.hud-btn:hover {
  color: #fff;
  border-color: rgba(126, 231, 255, 0.65);
  background: rgba(142, 197, 255, 0.1);
  transform: translateX(-2px); /* folio's slide-toward-content hover gesture */
}

.hud-btn:active {
  transform: translateX(0) scale(0.96);
}

/* social bar */
.socials {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.socials a:hover {
  transform: scale(1.12);
  border-color: rgba(140, 190, 255, 0.6);
  color: #cfe3ff;
}

.socials a:active {
  transform: scale(0.98);
}

/* race timer */
#race-hud {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 26px;
  border-radius: 9999px;
  text-align: center;
  display: none;
  white-space: nowrap;
}

#race-hud.on {
  display: block;
}

#race-hud .rt {
  font-size: 22px;
  letter-spacing: 1px;
  color: #7ee7ff;
}

#race-hud .rg {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-top: 3px;
}

/* fullscreen map overlay — opens with a fade + settle instead of popping
   (folio's modals fade opacity over 0.3s; ours routes through --dur-base) */
#map-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(0, 2, 10, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

#map-overlay.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#map-canvas {
  width: min(74vmin, 640px);
  height: min(74vmin, 640px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  cursor: crosshair;
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease-out);
}

#map-overlay.on #map-canvas {
  transform: scale(1);
}

/* On a phone 74vmin is only ~290px — far too small to accurately tap a
   station dot and autopilot to it. Use nearly the full width instead. */
@media (max-width: 767px) {
  /* A square chart on a portrait phone is capped by WIDTH (~367px here)
     while ~840px of height goes unused. Filling the width edge-to-edge and
     letting the caption overlay the chart instead of taking its own row
     gets the chart as large as the screen physically allows. */
  #map-canvas {
    width: 100vw;
    height: 100vw;
    max-height: 82vh;
    max-width: 82vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  #map-overlay {
    gap: 0;
    justify-content: center;
  }

  /* !important because the unscoped `#map-overlay .cap` rule further down
     this stylesheet has equal specificity and wins on source order —
     without it the caption kept 10px/.35em and overflowed the 390px screen */
  #map-overlay .cap { cursor: pointer; }

#map-overlay .cap {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 9px 15px;
    border-radius: 9999px;
    background: rgba(6, 10, 24, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    max-width: calc(100vw - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

#map-overlay .cap {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* achievements list */
.ach-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 10px;
}

.ach-row .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: #ffd27a;
  box-shadow: 0 0 10px rgba(255, 200, 90, 0.8);
}

.ach-row.locked {
  opacity: 0.42;
}

.ach-row.locked .dot {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.ach-row h4 {
  font-size: 14px;
  font-weight: 600;
}

.ach-row p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

/* whisper form */
/* Fly Together panel. Deliberately reuses .whisper-form for the input row so
   the two "type something and send" surfaces on the site look identical. */
.wing-code {
  font-family: 'Chivo Mono', monospace;
  font-size: 34px;
  letter-spacing: 0.34em;
  color: #7ee7ff;
  text-align: center;
  padding: 18px 0 6px;
  text-shadow: 0 0 26px rgba(126, 231, 255, 0.45);
}

.wing-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0 18px;
}

.wing-status {
  font-family: 'Chivo Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(232, 238, 252, 0.55);
  min-height: 18px;
  margin-top: 14px;
}

.wing-status.ok { color: #6ef2a0; }
.wing-status.err { color: #ff8f8f; }

.whisper-form {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.whisper-form input {
  flex: 1;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  padding: 12px 20px;
  color: #fff;
  font-family: 'Barlow';
  font-size: 13.5px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.whisper-form input:focus {
  border-color: rgba(140, 190, 255, 0.55);
}

.whisper-form button {
  padding: 12px 26px;
  border-radius: 9999px;
  border: 1px solid rgba(140, 190, 255, 0.4);
  background: rgba(90, 150, 255, 0.1);
  color: #cfe3ff;
  font-family: 'Barlow';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.whisper-form button:hover {
  background: rgba(90, 150, 255, 0.22);
}

.whisper-form button:active {
  transform: scale(0.97);
}

.whisper-note {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 10px;
  letter-spacing: 0.05em;
}

/* touch controls */
#touch {
  position: absolute;
  inset: 0;
  display: none;
  /* the container spans the screen purely to position its buttons — left
     clickable it swallowed taps on the radar and prompt underneath */
  pointer-events: none;
}

body.touch #touch {
  display: block;
}

#touch button {
  pointer-events: auto;
  position: absolute;
  bottom: 92px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  /* same translucent-glass chrome as .hud-btn, tuned for thumbs: tinted
     fill + blurred backdrop + hairline that brightens on press */
  background: rgba(142, 197, 255, 0.03);
  border: 1px solid rgba(232, 238, 252, 0.12);
  color: #cfe3ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

#touch button:active {
  transform: scale(0.92);
  border-color: rgba(126, 231, 255, 0.7);
  background: rgba(142, 197, 255, 0.12);
}

/* Dock, Boost and Map buttons removed — docking is a tap on the prompt pill
   directly (matches how station markers already work), boost is redundant
   since the joystick's push-force already gives full analog throttle, and
   the radar itself is now the map button */
#t-eva {
  right: 24px;
  opacity: 0.55;
}

body.touch #controls {
  display: none;
}

/* On a phone the radar doubles as the map button: tap it for the full
   sector chart. It lives bottom-RIGHT because the left 55% of the screen
   is the steering zone, and a drag starting on it would fight the joystick. */
body.touch #radar-wrap {
  left: auto;
  right: 16px;
  bottom: 16px;
  padding: 8px;
  z-index: 20;
}

body.touch #radar {
  width: 84px;
  height: 84px;
}

body.touch #radar-wrap .cap {
  font-size: 7px;
  margin-top: 4px;
}

body.touch #t-eva {
  bottom: 150px;
}

body.touch #speed-wrap {
  bottom: 244px;
}

/* dock prompt: the [E] key badge is meaningless on touch — the prompt
   pill itself is the tap target now (no separate Dock button), and pulses
   to read as tappable */
body.touch #prompt .k {
  display: none;
}

body.touch #prompt {
  cursor: pointer;
}

@keyframes dockPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(140, 190, 255, 0.55);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(140, 190, 255, 0);
  }
}

body.touch #prompt.on {
  animation: dockPulse var(--dur-slower) var(--ease-out) infinite;
}

/* nipplejs virtual joystick zone — left half of the screen so it never
   overlaps the bottom-right Boost/Dock buttons; the stick spawns wherever
   the thumb lands inside this div and springs back on release */
#joystick-zone {
  position: fixed;
  left: 0;
  top: 0;
  width: 55%;
  height: 100%;
  z-index: 15;
  touch-action: none;
  pointer-events: auto;
}

/* nipplejs is kept ONLY as the touch-input source — its chunky blue 2D knob
   is hidden entirely. The world-space ring around the ship is the sole
   visual, which is how folio-2025 does it: its Nipple.js draws no DOM
   element at all, only a ring rendered in the scene under the vehicle. */
/* nipplejs 1.0.4 renders `.joystick` (with .back/.front children) and sets
   an inline `opacity: 1` on it — `.nipple` matches nothing and inline
   styles need !important to beat. Both selectors kept for version safety. */
.nipple,
.joystick,
#joystick-zone .back,
#joystick-zone .front {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 44px minimum touch targets (WCAG) via an invisible ::after hit-area so the
   visible pill/circle chrome doesn't balloon in size */
body.touch .hud-btn,
body.touch a.home,
body.touch .socials a {
  position: relative;
}

body.touch .hud-btn::after,
body.touch a.home::after,
body.touch .socials a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

body.touch #panel-close {
  width: 44px;
  height: 44px;
}

/* wider gaps so the enlarged invisible hit-areas above don't overlap each other */
body.touch .hud-btns {
  gap: 6px;
  width: 232px;
}

body.touch .hud-tgl,
body.touch .hud-btns .hud-btn {
  padding: 11px 12px;   /* thumb-sized rows */
  font-size: 11px;
}

body.touch .socials {
  gap: 14px;
}

/* The secondary HUD (flight log, behind the scene, fly together, the three
   display toggles and the social links) collapses behind one control on EVERY
   screen, not just phones.

   Counted at rest, rex had eight permanent HUD regions against folio-2025's one.
   A standing panel of Sound / Visor Glare / Rim Light toggles is the difference
   between looking like a place and looking like an options screen in front of
   one, and it was the loudest of the eight.

   The counter, sector label, radar, speed readout and controls hint stay: they
   are flight information, not settings. */
#hud-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-top: 14px;
  border-radius: 50%;
  font-size: 16px;
}

.hud-btns {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.hud-btns.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* a thumb needs more than a cursor does */
@media (max-width: 767px) {
  #hud-menu-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .hud-tl .brand {
    font-size: 20px;
  }

  .hud-tr .count {
    font-size: 22px;
  }

  #speed-val {
    font-size: 28px;
  }

  #panel-box {
    padding: 34px 22px;
    border-radius: 20px;
  }

  /* "· Open Sector" is redundant with the live #sector-lbl readout — drop it
     first so the name doesn't collide with "STATIONS DOCKED" on narrow phones */
  .hud-tl .sub-sector {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Opacity fades still carry meaning (docking, toasts, HUD arrival) — keep them.
     Spatial motion doesn't aid comprehension, so cut it: any transform/width/height/inset
     component of a transition is dropped here regardless of what the base rule declared,
     and one-shot reveal keyframes (e.g. the panel's rise-in) collapse to instant. */
  *,
  *::before,
  *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Jump transition.

   Modelled on folio-2025, corrected twice. First by watching the live site rather
   than only reading Overlay.js: his curtain is a dark field carrying a repeating
   cross pattern with faint diagonal lines over it, moving slowly (2s in, 4s out,
   power1.inOut), not a flat colour and not a fade.

   Then by measurement. Sweeping this with mask-position did nothing, and the
   reason is that Chrome does not interpolate mask-position: through WAAPI it read
   100% at 500ms and 1000ms and 0% at 1500ms, a discrete jump at the midpoint. So
   the curtain is an oversized child that TRANSLATES across a clipping parent.
   transform always interpolates and runs on the compositor.

   The palette stays this site's deep navy. His warm maroon belongs to his world;
   the technique is what is worth taking. */
#jump {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

#jump-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Scoped under #jump on purpose. A bare fullscreen canvas rule would also
     catch the radar and the chart, which has broken the HUD here before. */
}

/* ═══ guided tour (2026-10-15): the ship rides a course past every station; this is its rail bar and the launch choice ═══ */
#tour-rail { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(92vw, 760px); padding: 12px 16px 10px; display: none; align-items: center; gap: 14px; pointer-events: auto; }
#hud.touring #tour-rail { display: flex; }
#hud.touring #controls, #hud.touring #touch { display: none; }
#tour-rail .tr-track { position: relative; flex: 1; height: 28px; }
#tour-rail .tr-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255, 255, 255, 0.14); }
#tour-rail .tr-fill { position: absolute; left: 0; top: 50%; height: 2px; width: 0; background: rgba(158, 200, 255, 0.9); box-shadow: 0 0 10px rgba(158, 200, 255, 0.8); }
#tour-rail .tr-ship { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%); filter: drop-shadow(0 0 6px #fff); }
#tour-rail .tr-stops i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); opacity: 0.55; cursor: pointer; pointer-events: auto; transition: transform 0.25s, opacity 0.25s; }
#tour-rail .tr-stops i.here { opacity: 1; transform: scale(1.6); box-shadow: 0 0 12px var(--c); }
#tour-rail .tr-stops i b, #tour-rail .tr-stops i span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-style: normal; }
#tour-rail .tr-stops i b { top: -16px; font-weight: 600; }
#tour-rail .tr-stops i span { top: 14px; display: none; }
#tour-rail .tr-stops i.here span { display: block; color: #fff; }
#tour-rail .tr-hint { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
#tour-rail #tour-exit { white-space: nowrap; }
/* two rows at every size: the course on top with room for its five labels, the button and the hint under it
   (one row left the track about 60px wide once the hint was a readable 11px, and S-01 to S-05 printed over each other) */
#tour-rail { flex-wrap: wrap; row-gap: 6px; }
#tour-rail .tr-track { flex: 1 1 100%; order: -1; margin: 14px 0 8px; }
#tour-rail .tr-hint { flex: 1 1 0; min-width: 0; white-space: normal; text-align: right; line-height: 1.4; }
/* below a wide desktop the centred rail would run under the radar (bottom left) and the speed readout (bottom right) */
@media (min-width: 641px) and (max-width: 1360px) {
  #tour-rail { left: 272px; right: 132px; width: auto; transform: none; }
}
#tour-choice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); width: min(92vw, 520px); padding: 22px; display: grid; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); z-index: 30; }
#tour-choice.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
#tour-choice .tc-title { font-size: 22px; margin: 0 0 6px; }
#tour-choice button { display: grid; gap: 4px; text-align: left; padding: 14px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: inherit; cursor: pointer; font: inherit; }
#tour-choice button:hover, #tour-choice button:focus-visible { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
#tour-choice button b { font-size: 15px; letter-spacing: 0.02em; }
#tour-choice button span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) {
  /* phones: the rail keeps to the left so the radar's column at the right stays clear */
  #tour-rail { left: 12px; transform: none; width: calc(100vw - 176px); flex-wrap: wrap; bottom: 14px; padding: 10px 12px 8px; gap: 8px; }
  #tour-rail .tr-track { flex-basis: 100%; order: -1; margin-bottom: 12px; }
  #tour-rail .tr-hint { flex-basis: 100%; white-space: normal; font-size: 11px; }
  #tour-rail #tour-exit { width: 100%; }
  #tour-rail .tr-stops i span { display: none !important; }
}

/* tour: the hidden choice card must not keep its buttons live (#hud button { pointer-events: auto } reaches
   inside it), or two invisible buttons sit in the middle of the screen eating taps for the rest of the flight */
#tour-choice { visibility: hidden; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s; }
#tour-choice.on { visibility: visible; transition-delay: 0s; }
#tour-choice:not(.on) button { pointer-events: none; }

/* phones: the HUD's smallest labels come up to a readable size; nothing is hidden or moved */
@media (max-width: 767px), (max-height: 480px) {
  .hud-tl .sub { font-size: 11px; letter-spacing: 0.2em; }
  .hud-tr .lbl { font-size: 11px; letter-spacing: 0.16em; }
  #radar-wrap .cap { font-size: 11px; letter-spacing: 0.12em; }
  #t-eva { font-size: 12px; }
  #tour-rail .tr-stops i b { font-size: 11px; letter-spacing: 0.08em; }
  #tour-rail .tr-hint { font-size: 11px; letter-spacing: 0.08em; }
  #tour-rail #tour-exit { font-size: 11px; min-height: 40px; }
}
/* touch layout overrides for the tour and the smallest labels (these outrank the body.touch rules above) */
body.touch #radar-wrap .cap { font-size: 11px; letter-spacing: 0.12em; }
body.touch #t-eva { font-size: 12px; }
@media (max-width: 767px), (max-height: 480px) {
  #hud-menu-toggle { width: 44px; height: 44px; font-size: 18px; }
  #tour-rail .tr-stops i.here span { font-size: 11px; letter-spacing: 0.08em; }
}
@media (max-height: 480px) {
  /* landscape phone: the rail keeps left of the radar, like portrait */
  #tour-rail { left: 12px; transform: none; width: calc(100vw - 176px); bottom: 10px; padding: 8px 12px 6px; }
  #tour-choice { padding: 14px; gap: 6px; }
  #tour-choice .tc-title { font-size: 18px; margin-bottom: 2px; }
  #tour-choice button { padding: 9px 12px; }
}
@media (max-height: 480px) {
  #tour-rail .tr-hint { white-space: normal; flex: 1; }
  /* landscape phone: the right column is full (counter, menu, EVA, radar) and bottom: 244px lands the speed readout on them, so it sits under the brand on the left */
  body.touch #speed-wrap { right: auto; left: 24px; bottom: auto; top: 84px; text-align: left; }
}