:root {
  --ink: #ffffff;
  --mute: rgba(255, 255, 255, .64);
  --faint: rgba(255, 255, 255, .28);
  --safe: #6ef2a6;
  --warn: #ffc247;
  --danger: #ff5a47;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  /* A phone on its side: the notch and the round corners are left and right. */
  --left: env(safe-area-inset-left, 0px);
  --right: env(safe-area-inset-right, 0px);
  font-family: Barlow, 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: #000;
}
* { box-sizing: border-box; -webkit-touch-callout: none; }
html, body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }

#stage {
  position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: #070a1c;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage.shake #view { animation: shake .34s linear; }
@keyframes shake {
  20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); }
  60% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -1px); }
}

/* ---- instruments ---- */
#hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--top) + 12px) calc(var(--right) + 14px) 18px calc(var(--left) + 14px); background: linear-gradient(#000000c8, transparent); pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
#stage:is([data-state="flight"], [data-state="banner"], [data-state="landed"], [data-state="transit"], [data-state="crash"],
  [data-state="exit"], [data-state="run"], [data-state="caught"], [data-state="board"], [data-state="onward"]) #hud { opacity: 1; }
.run { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.run span { font-size: 10px; font-weight: 600; letter-spacing: .24em; color: var(--mute); }
.run b { font-size: 22px; font-weight: 400; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#target {
  position: absolute; left: 0; right: 0; top: calc(var(--top) + 66px); z-index: 3; text-align: center; pointer-events: none;
  font-size: 10px; letter-spacing: .26em; color: var(--mute); opacity: 0; transition: opacity .3s;
}
#stage[data-state="flight"] #target { opacity: 1; }
/* A pad closed for repair: amber while closed, green once it opens. */
#target.closed { color: var(--warn); font-weight: 600; font-size: 11px; }
#target.open { color: var(--safe); font-weight: 600; font-size: 11px; }
#hint {
  position: absolute; left: 0; right: 0; top: 40%; z-index: 3; text-align: center; pointer-events: none;
  font-weight: 500; font-size: 17px; letter-spacing: .3em; text-indent: .3em; line-height: 1.6; text-shadow: 0 1px 8px #000;
  opacity: 0; transition: opacity .3s;
}
#hint span { font-size: 10px; color: var(--mute); }
#stage:is([data-state="flight"], [data-state="run"]):not(.touched) #hint { opacity: 1; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }

/* ---- overlays ---- */
.overlay {
  position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--top) + 20px) 20px calc(var(--bottom) + 20px); text-align: center; pointer-events: none;
}
#stage[data-state="title"] #title,
#stage[data-state="banner"] #banner,
#stage[data-state="over"] #over { display: flex; }
#stage.paused #pause { display: flex; background: #000000a8; pointer-events: auto; }
#title { background: radial-gradient(ellipse 80% 50% at 50% 38%, #000000a0, transparent 70%); justify-content: flex-start; padding-top: calc(var(--top) + 10vh); }
#title a { pointer-events: auto; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .4em; text-indent: .4em; color: var(--mute); }
h1 { margin: 0; font-size: clamp(32px, 10.5vw, 80px); font-weight: 300; letter-spacing: .2em; text-indent: .2em; line-height: 1; }
/* The wordmark (assets-source/mars-race-logo-v1): as wide as the screen lets it, up to 560 px. */
h1.logo { width: min(400px, 74vw); text-indent: 0; letter-spacing: 0; }
h1.logo img { display: block; width: 100%; height: auto; }
.eyebrow.under { margin-top: 2px; }
h2 { margin: 8px 0 0; font-size: clamp(24px, 8vw, 40px); font-weight: 300; letter-spacing: .28em; text-indent: .28em; }
.lede { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--mute); }
.best { margin: 14px 0 0; font-size: 11px; letter-spacing: .24em; color: var(--safe); min-height: 1em; }
.tap { margin: 22px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .34em; text-indent: .34em; animation: breathe 1.4s ease-in-out infinite; }
.back { margin-top: 18px; font-size: 11px; letter-spacing: .26em; color: var(--mute); text-decoration: none; padding: 8px; }
#banner { background: radial-gradient(ellipse 70% 30% at 50% 45%, #000000a8, transparent 75%); animation: banner 1.4s ease-out both; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* The end of a run: the score on top, everyone's runs in the middle (scrolling), the
   way on at the bottom, always in sight. */
#over {
  background: linear-gradient(#000000d0, #000000a8 30%, #000000b8 70%, #000000e0);
  justify-content: flex-start; padding-top: calc(var(--top) + 4vh); padding-bottom: calc(var(--bottom) + 14px);
}
.over-head, .over-foot { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; }
.over-foot { padding-top: 6px; }
.lost {
  margin: 0; font-size: clamp(26px, 8vw, 46px); font-weight: 300; letter-spacing: .3em; text-indent: .3em; line-height: 1.1;
  text-shadow: 0 0 24px #ff5a4780, 0 2px 12px #000; animation: lost-in 1.1s ease-out both;
}
@keyframes lost-in { from { opacity: 0; letter-spacing: .7em; filter: blur(6px); } to { opacity: 1; letter-spacing: .3em; filter: none; } }
.lost-line { margin: 14px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .28em; color: var(--danger); }
.tally { margin: 2vh 0 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 380px); }
.tally div { padding: 4px; }
.tally dt { font-size: 9px; letter-spacing: .24em; color: var(--mute); }
.tally dd { margin: 4px 0 0; font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; }
.retry {
  margin-top: 6px; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: #00000070;
  display: grid; place-items: center; color: inherit; cursor: pointer; pointer-events: auto;
}
.retry svg { width: 58px; height: 58px; }
.retry path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#over .tap { margin-top: 10px; }
/* A crash goes back to the same pad; a fresh run from the first is the quieter choice. */
.new-run {
  margin-top: 18px; padding: 10px 14px; background: none; border: 0; color: var(--mute); cursor: pointer; pointer-events: auto;
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .26em;
}
.new-run:hover, .new-run:focus-visible { color: var(--ink); }

/* The title's two mode switches: the landings and the runs, by hand or by the autopilot. */
.modes { display: flex; gap: 8px; justify-content: center; margin-top: 18px; pointer-events: auto; }
.mode {
  padding: 9px 12px; border: 1px solid var(--faint); border-radius: 2px; background: #00000066; color: var(--mute); cursor: pointer;
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em;
}
.mode b { font-weight: 600; color: var(--ink); margin-left: .4em; }
.mode[aria-pressed="true"] { border-color: var(--warn); }
.mode[aria-pressed="true"] b { color: var(--warn); }
.mode:hover, .mode:focus-visible { color: var(--ink); }
.modes[hidden], .mode-note[hidden] { display: none; }
.mode-note { margin: 8px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .24em; color: var(--warn); }

#pop {
  position: absolute; left: 0; right: 0; top: 30%; z-index: 4; text-align: center; pointer-events: none;
  font-size: 34px; font-weight: 300; letter-spacing: .14em; color: var(--safe); text-shadow: 0 2px 10px #000; opacity: 0;
}
#pop.show { animation: pop 1.4s ease-out both; }
#pop small { display: block; font-size: 11px; letter-spacing: .3em; color: var(--ink); margin-top: 4px; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* A phone on its side: everything tighter, the retry beside the tally. */
@media (max-height: 500px) {
  #title { padding-top: calc(var(--top) + 4vh); }
  h1 { font-size: 44px; }
  .lede { margin-top: 8px; font-size: 13px; }
  .tap { margin-top: 12px; }
  #over { padding-top: calc(var(--top) + 2vh); }
  .lost { font-size: 32px; }
  .tally { margin-top: 2vh; }
  .tally dd { font-size: 20px; }
  .retry { margin-top: 4px; width: 56px; height: 56px; }
  .retry svg { width: 46px; height: 46px; }
  #hud { padding-top: calc(var(--top) + 8px); }
  #target { top: calc(var(--top) + 54px); }
}

/* ---- dials riding beside the rocket ---- */
.gauges {
  --dial: 58px;
  position: absolute; left: 0; top: 0; z-index: 3; width: var(--dial);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
  opacity: 0; transition: opacity .25s; will-change: transform;
}
#stage:is([data-state="flight"], [data-state="banner"]) .gauges { opacity: 1; }
.gauge {
  position: relative; margin: 0; width: var(--dial); height: var(--dial); border-radius: 50%;
  background: radial-gradient(circle, #000000b0 58%, #00000060 70%, transparent 72%);
}
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.gauge circle { fill: none; stroke-width: 5; stroke-dasharray: 75 100; stroke-linecap: round; }
.gauge .track { stroke: var(--faint); }
.gauge .arc { stroke: var(--ink); stroke-dasharray: 0 100; transition: stroke .15s; }
.gauge b {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 1px 4px #000;
}
.gauge small { position: absolute; left: 0; right: 0; top: 54%; text-align: center; font-size: 7px; letter-spacing: .14em; color: var(--mute); }
/* The label sits in the dial's open bottom, as on a tachometer. */
.gauge figcaption { position: absolute; left: -6px; right: -6px; bottom: 2px; text-align: center; font-size: 7px; font-weight: 600; letter-spacing: .16em; color: var(--mute); }
#g-speed.safe .arc { stroke: var(--safe); } #g-speed.safe b { color: var(--safe); }
#g-speed.warn .arc { stroke: var(--warn); } #g-speed.warn b { color: var(--warn); }
#g-speed.danger .arc { stroke: var(--danger); } #g-speed.danger b { color: var(--danger); }
#g-fuel.empty .arc { stroke: var(--danger); } #g-fuel.empty b { color: var(--danger); }
@media (min-height: 700px) and (min-width: 700px) { .gauges { --dial: 68px; } .gauge b { font-size: 18px; } }

/* Wind: only on windy pads; it flashes before a gust arrives. */
.gauge[hidden] { display: none; }
#g-wind .arc { stroke: #9fd0ff; }
#g-wind.gust { animation: gust .45s ease-in-out infinite alternate; }
#g-wind.gust .arc { stroke: var(--warn); }
#g-wind.gust b, #g-wind.gust figcaption { color: var(--warn); }
@keyframes gust { to { box-shadow: 0 0 0 3px #ffc24755, 0 0 18px #ffc24788; } }

/* Taps: a solid arc that shortens with every tap; the last one shows amber. */
#g-taps .arc { transition: stroke-dasharray .2s, stroke .2s; }
#g-taps.last .arc { stroke: var(--warn); } #g-taps.last b { color: var(--warn); }
#g-taps.out b { color: var(--danger); }

/* A tap lands: the taps dial gives a small pulse. */
#g-taps.kicked { animation: kicked .18s ease-out; }
@keyframes kicked { 40% { transform: scale(1.12); } }

/* ---- the run's ranking, shown after every landing ---- */
#rank {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--top) + 62px); width: min(300px, calc(100% - 28px));
  transform: translate(-50%, -8px); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  background: #000000b8; border: 1px solid var(--faint); border-radius: 2px;
}
#stage.ranked:is([data-state="landed"], [data-state="transit"]) #rank { opacity: 1; transform: translate(-50%, 0); }
#rank header { display: flex; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--faint); font-size: 9px; font-weight: 600; letter-spacing: .24em; }
#rank header span + span { color: var(--mute); }
#rank ol { list-style: none; margin: 0; padding: 4px 0; }
#rank li { display: grid; grid-template-columns: 34px 1fr auto 40px; gap: 8px; align-items: center; padding: 3px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
#rank li .r { color: var(--mute); }
#rank li .c { letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank li .p { color: var(--mute); font-size: 10px; letter-spacing: .1em; }
#rank li .s { text-align: right; font-weight: 600; }
#rank li.me { background: #6ef2a62a; color: var(--safe); }
#rank li.me .r, #rank li.me .p { color: var(--safe); }
#rank li.gap { display: block; text-align: center; color: var(--mute); padding: 0; line-height: 1; }
.over-rank { margin: 8px 0 0; font-size: 11px; letter-spacing: .26em; color: var(--ink); min-height: 1em; }
/* Everyone's runs on the over screen: no box, as wide as a reading column, fading out
   at its top and bottom edges as it scrolls. */
.over-list {
  position: relative; flex: 1 1 auto; min-height: 96px; width: min(520px, 100%); margin-top: 4px; overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.over-list::-webkit-scrollbar { display: none; }
#over .over-rank { flex: none; margin: 2vh 0 0; font-size: 10px; letter-spacing: .3em; color: var(--mute); }
.over-board { list-style: none; margin: 0; padding: 22px 0 28px; }
.over-board:empty { display: none; }
.over-board li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: baseline; padding: 7px 18px;
  font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; color: #ffffffc0;
}
.over-board li .r { color: var(--mute); font-size: 11px; letter-spacing: .06em; }
.over-board li .c { letter-spacing: .14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.over-board li .s { font-weight: 500; letter-spacing: .04em; }
/* The podium a touch brighter; friends with a small mark. */
.over-board li.top { color: var(--ink); }
.over-board li.top .r { color: var(--warn); }
.over-board li.friend .c::after { content: ' ·  FRIEND'; font-size: 9px; letter-spacing: .2em; color: var(--mute); }
/* This run: green, lit from the middle out, a little larger. */
.over-board li.me {
  color: var(--safe); font-size: 15px; padding-top: 10px; padding-bottom: 10px;
  background: linear-gradient(90deg, transparent, #6ef2a626 20%, #6ef2a626 80%, transparent);
}
.over-board li.me .r { color: var(--safe); font-size: 12px; }
.over-board li.me .s { font-weight: 600; }
.over-board li.gap { display: block; text-align: center; color: var(--mute); padding: 2px 0; line-height: 1; }
.save-run { margin: 4px 0 0; width: min(360px, 100%); padding: 2px 0; pointer-events: auto; text-align: left; }
.save-run[hidden] { display: none; }
.save-run label { display: block; margin-bottom: 5px; font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--warn); }
.save-run .frow input { text-transform: none; }

/* ---- god mode ---- */
/* The endless run: its way in on the title, its way out while on it. */
.endless-open {
  margin-top: 14px; padding: 10px 18px; border: 1px solid var(--warn); border-radius: 2px; background: #00000080; color: var(--ink);
  cursor: pointer; pointer-events: auto; font: 600 11px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .26em;
}
.endless-open small { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .2em; color: var(--warn); }
/* The pause button, while there is something to pause; and the pause screen's two ways on. */
.pause-btn { display: none; }
#stage:is([data-state="flight"], [data-state="run"], [data-state="exit"]):not(.paused):not(.demo) .pause-btn {
  display: block; position: absolute; z-index: 6; left: calc(var(--left) + 12px); bottom: calc(var(--bottom) + 12px);
  width: 38px; height: 38px; border: 1px solid #ffffff3d; border-radius: 50%; background: #0000004d; color: #ffffffb3; opacity: .5; transition: opacity .2s;
  -webkit-tap-highlight-color: transparent;
  font: 600 13px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.1em; cursor: pointer;
}
#pause h2 { margin: 6px 0 0; }
.pause-acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; pointer-events: auto; }
.pause-acts button {
  padding: 11px 16px; border: 1px solid var(--faint); border-radius: 2px; background: #00000080; color: var(--ink); cursor: pointer;
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .24em;
}
.pause-acts #pause-resume { border-color: var(--safe); }
.pause-board { width: min(380px, calc(100% - 32px)); margin-top: 18px; pointer-events: auto; }
.pause-board[hidden] { display: none; }
.pause-board .over-board { max-height: 34vh; overflow: auto; }

/* A level made on the endless trail: the overtake's arrow and the level now begun. */
.overtake.level b { font-size: clamp(36px, 11vw, 76px); }
/* Nothing said over the pause. */
#stage.paused #hint { opacity: 0; }
.god-open { display: none; }
body.god-mode .god-open {
  display: block; position: absolute; z-index: 6; left: 12px; top: calc(var(--top) + 10px);
  padding: 7px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 2px; background: #000000a0; color: var(--ink);
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .24em; cursor: pointer;
}
.god {
  position: absolute; z-index: 7; inset: calc(var(--top) + 46px) 10px calc(var(--bottom) + 10px);
  display: flex; flex-direction: column; background: #050812ee; border: 1px solid var(--faint); border-radius: 2px;
  touch-action: pan-y;
}
.god[hidden] { display: none; }
.god header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .22em; color: var(--ink); }
.god header span { flex: 1; }
.god label { display: flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; }
.god header button { background: none; border: 0; color: var(--ink); font-size: 16px; cursor: pointer; padding: 0 4px; }
.god-pads { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.god-pad {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; width: 100%;
  padding: 8px 12px; background: none; border: 0; border-bottom: 1px solid #ffffff12; color: var(--ink); text-align: left; cursor: pointer;
  font: inherit;
}
.god-pad b { grid-row: span 2; font-size: 20px; font-weight: 300; color: var(--mute); align-self: center; }
.god-pad span { font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.god-pad small { font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.god-pad:hover, .god-pad:focus-visible { background: #ffffff14; }
.god-pad.on { background: #ffffff1f; }
.god-pass {
  margin-top: 14px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 2px; background: #000000a0;
  color: var(--ink); font: 600 12px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .22em; cursor: pointer; pointer-events: auto;
}
.god-pass[hidden] { display: none; }
.god p { margin: 0; padding: 8px 12px; font-size: 10px; letter-spacing: .12em; color: var(--mute); border-top: 1px solid var(--faint); }

/* ---- the blaster's button, on the run between rockets ---- */
.fire {
  /* Bottom right, under the right thumb; see-through, so the trail shows behind it. */
  display: none; position: absolute; z-index: 6;
  right: calc(var(--right) + 16px); bottom: calc(var(--bottom) + 16px);
  width: 88px; height: 88px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75);
  background: radial-gradient(circle at 50% 40%, #ff8a3d40, #00000050 72%); color: var(--ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#stage[data-state="run"] .fire:not(.none) { display: flex; }
.fire .glyph { width: 32px; height: 32px; }
.fire b { font-size: 13px; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.fire.empty { opacity: .35; border-color: var(--faint); }
.fire.kick { animation: kicked .18s ease-out; }
@media (min-width: 700px) { .fire { right: calc(var(--right) + 28px); bottom: calc(var(--bottom) + 24px); width: 92px; height: 92px; } }

/* ---- life and standing ---- */
.vitals { display: flex; flex-direction: column; gap: 5px; width: 128px; }
.vlabel { font-size: 10px; font-weight: 600; letter-spacing: .24em; color: var(--mute); }
.vlabel b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.life { position: relative; height: 9px; border-radius: 2px; background: url(assets/life-track.svg) 0 0 / 100% 100% no-repeat; }
/* The spectrum (assets-source/arcade-run-to-rocket-v1/ui-combat-v2) laid over the track, opened up to the life left. */
.life i {
  position: absolute; inset: 0; background: url(assets/life-spectrum.svg) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--life, 100%)) 0 0); transition: clip-path .35s ease-out;
}
/* A quarter or less: the outline goes red, and pulses. */
.life.low { box-shadow: 0 0 0 1px var(--danger); animation: lifelow .7s ease-in-out infinite alternate; }
.life.hurt { animation: kicked .25s ease-out; }
@keyframes lifelow { to { box-shadow: 0 0 10px #ff5a4a99; } }
body.god-mode .vitals { margin-top: 34px; }
/* No life to lose: a stumble costs only the points. */
.life, #life-num { display: none !important; }
/* The little ladder: the one above, this run, the one below. */
.ladder { display: grid; gap: 2px; width: auto; justify-items: end; margin-top: 2px; font-variant-numeric: tabular-nums; transform-origin: top right; --heat: 0; }
.ladder[hidden] { display: none; }
.rung { position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 3px; font-size: 10px; letter-spacing: .1em; color: var(--mute); background: #0000005c;
  transition: transform .45s cubic-bezier(.2,1.4,.4,1), background .3s, opacity .3s; overflow: hidden; }
.run .rung b { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--mute); }
.rung span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rung i { font-style: normal; font-weight: 600; }
.rung.me { color: var(--ink); background: #ffffff1f; border: 1px solid #ffffff59; padding: 4px 7px 6px; }
.run .rung.me b, .rung.me i { color: var(--ink); }
.rung.me i { font-size: 12px; }
.rung.empty { opacity: 0; }
/* How much of the gap to the one above is already closed. */
.gap { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ffffff1a; }
.gap u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffc247, #6be38a); transition: width .5s ease-out; }
.chase { margin: 1px 0 0; font-size: 9px; letter-spacing: .2em; color: var(--mute); text-align: right; min-height: 1em; }
.chase.close { color: #ffd36b; animation: chase 0.9s ease-in-out infinite alternate; }
@keyframes chase { to { color: #fff; text-shadow: 0 0 8px #ffd36b; } }
/* Points coming in: this run's line kicks. */
.rung.me.gain { animation: gain .35s ease-out; }
@keyframes gain { 40% { transform: scale(1.06); background: #ffc24740; } }
/* A place won: the one passed drops under, this run rises over it, green and glowing. */
.ladder.passed .rung.me { animation: passed 1.1s ease-out; }
.ladder.passed .rung.down { animation: dropped .6s ease-out; }
@keyframes passed { 0% { transform: translateY(100%); background: #6be38a80; box-shadow: 0 0 16px #6be38a; } 40% { transform: translateY(-2px) scale(1.08); background: #6be38a66; } 100% { transform: none; } }
@keyframes dropped { 0% { transform: translateY(-100%); opacity: .4; } 100% { transform: none; } }
.ladder.lost .rung.me { animation: lost .6s ease-out; }
@keyframes lost { 0% { transform: translateY(-100%); background: #ff5a4a66; } 100% { transform: none; } }
.over-life { margin: 10px 0 0; font-size: 11px; letter-spacing: .24em; color: var(--warn); min-height: 1em; }

/* ---- a wide screen: the readouts gathered over the middle, near the action ---- */
@media (min-width: 900px) {
  /* Life and score sit at the edges of a 760 px column, not in the far corners. */
  #hud { padding-left: max(14px, calc(50% - 380px)); padding-right: max(14px, calc(50% - 380px)); }
  .vitals { width: 170px; }
  .life { height: 10px; }
  .run b { font-size: 26px; }
  body.god-mode .vitals { margin-top: 0; }
  /* The blaster at the bottom right of that column. */
  .fire { right: max(28px, calc(50% - 380px)); }
}

/* ---- friends: the ladder's tabs, and the panel ---- */
.ladder { pointer-events: auto; }
.tabs { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 1px; }
.tabs button {
  padding: 3px 7px; border: 0; border-radius: 2px; background: none; color: var(--mute); cursor: pointer;
  font: 600 9px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em;
}
.tabs button[aria-selected="true"] { color: var(--ink); background: #ffffff24; }
.friends-open {
  margin-top: 10px; padding: 9px 16px; border: 1px solid var(--faint); border-radius: 2px; background: #00000066; color: var(--ink);
  cursor: pointer; pointer-events: auto; font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .26em;
}
.friends {
  position: absolute; z-index: 8; left: 50%; top: calc(var(--top) + 16px); transform: translateX(-50%);
  width: min(380px, calc(100% - 24px)); max-height: calc(100% - var(--top) - var(--bottom) - 32px); overflow: auto;
  padding: 0 14px 14px; background: #05070fe8; border: 1px solid var(--faint); border-radius: 3px; text-align: left;
}
.friends[hidden] { display: none; }
.friends header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.friends .x { border: 0; background: none; color: var(--mute); font-size: 22px; cursor: pointer; line-height: 1; }
.fl { display: block; margin: 12px 0 5px; font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--mute); }
.frow { display: flex; gap: 6px; margin: 0; }
.frow input {
  flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--faint); border-radius: 2px; background: #ffffff10; color: var(--ink);
  font: 500 13px/1.2 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.frow input[readonly] { text-transform: none; color: var(--mute); font-size: 12px; }
.frow button {
  padding: 0 12px; border: 1px solid var(--faint); border-radius: 2px; background: #ffffff1a; color: var(--ink); cursor: pointer;
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em;
}
.fmsg { margin: 8px 0 0; min-height: 1em; font-size: 10px; letter-spacing: .14em; color: var(--warn); }
.fmsg.ok { color: var(--safe); }
/* The title's PROFILE and FRIENDS side by side. */
.title-links { display: flex; gap: 8px; justify-content: center; pointer-events: auto; }
/* The profile: the email as it stands, and a note on what it is for. */
#email-form input { text-transform: none; }
.mail-state { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--mute); overflow-wrap: anywhere; }
.mail-state b { font-weight: 600; color: var(--ink); }
.mail-state .confirmed { color: var(--safe); }
.mail-state .pending { color: var(--warn); }
.fnote { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--mute); }
.flist { list-style: none; margin: 6px 0 0; padding: 0; }
.flist li { display: grid; grid-template-columns: 30px 1fr auto 26px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #ffffff14; font-size: 12px; font-variant-numeric: tabular-nums; }
.flist li.me { color: var(--safe); }
.flist .r { color: var(--mute); font-size: 10px; }
.flist .c { letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flist .s { font-weight: 600; }
.flist button { border: 0; background: none; color: var(--mute); font-size: 16px; cursor: pointer; }
.flist .none { display: block; color: var(--mute); font-size: 11px; letter-spacing: .1em; line-height: 1.5; border: 0; }

/* A narrow screen: the pad's line under the ladder of places, not across it. */
@media (max-width: 640px) {
  #target { top: calc(var(--top) + 156px); }
}

/* ---- the race for places: the ladder swells with points, leaps when one is won ---- */
/* Points coming in: the whole ladder swells a little and settles. */
.ladder.swell { animation: swell .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes swell { 35% { transform: scale(1.14); } }
/* A place won: it leaps up big, flashes green three times, and settles. */
.ladder.passed { animation: leap 1.5s cubic-bezier(.2,1.3,.4,1); }
@keyframes leap {
  0% { transform: scale(1); } 14% { transform: scale(1.5); } 70% { transform: scale(1.38); } 100% { transform: scale(1); }
}
.ladder.passed .rung.me { animation: flash-win .5s ease-in-out 3; }
@keyframes flash-win { 50% { background: #6ef2a6; color: #04130b; box-shadow: 0 0 22px #6ef2a6; } }
.ladder.passed .rung.me b, .ladder.passed .rung.me i { animation: flash-ink .5s ease-in-out 3; }
@keyframes flash-ink { 50% { color: #04130b; } }
/* A place lost: a red jolt and a shake. */
.ladder.lost { animation: jolt .7s ease-out; }
@keyframes jolt { 15% { transform: scale(1.25) translateX(-6px); } 30% { transform: scale(1.22) translateX(6px); } 45% { transform: scale(1.2) translateX(-4px); } 100% { transform: none; } }
.ladder.lost .rung.me { animation: flash-lose .35s ease-in-out 2; }
@keyframes flash-lose { 50% { background: #ff5a4a; box-shadow: 0 0 18px #ff5a4a; } }
/* Closing in on the one above: the line grows and burns warmer the nearer it gets. */
.chase { font-size: calc(9px + 5px * var(--heat)); transition: font-size .3s; }
.chase.close { font-weight: 600; }
/* First place: gold. */
.ladder.first .rung.me { border-color: #ffc247; box-shadow: 0 0 14px #ffc24780; }
.ladder.first .chase { color: #ffc247; }

/* The place won or lost, big across the view for a moment. */
.overtake {
  position: absolute; left: 0; right: 0; top: 42%; z-index: 5; text-align: center; pointer-events: none; opacity: 0;
  text-shadow: 0 2px 14px #000;
}
.overtake b { display: block; font-size: clamp(44px, 14vw, 88px); font-weight: 300; letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums; }
.overtake span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .3em; }
.overtake.up { color: #6ef2a6; }
.overtake.down { color: #ff6b5a; }
.overtake.crown { color: #ffc247; }
.overtake.show { animation: overtake 1.8s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes overtake {
  0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.15); } 22% { transform: scale(1); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) scale(.96); }
}

/* The blaster fires by itself: its button only shows the charges, and a tap on it jumps. */
.fire { pointer-events: none; }

/* The weapons kept on the run, as a fan: shut, the one in hand in front and the others peeking out behind it; tapped, they spread upwards and
   one can be chosen, then they close again. Small, see-through, monochrome round icons; a little circle on the lower right edge counts the shots. */
.gun {
  display: none; position: absolute; z-index: 6; pointer-events: none;
  left: calc(var(--left) + 14px); bottom: calc(var(--bottom) + 132px); width: 40px; height: 40px;
}
#stage[data-state="run"] .gun:not(.none) { display: block; }
.gun-item {
  position: absolute; left: 0; bottom: 0; width: 34px; height: 34px; pointer-events: auto; touch-action: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%;
  transform: translateY(calc(var(--p) * -6px)) scale(.86); opacity: .4; z-index: calc(10 - var(--p));
  transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), opacity .25s;
}
/* A bigger place to touch than the icon itself. */
.gun-item::before { content: ''; position: absolute; inset: -6px -12px -6px -8px; }
.gun-item.in-hand { transform: scale(1.12); opacity: .85; z-index: 20; }
.gun.open .gun-item { transform: translateY(calc(var(--i) * -46px)); opacity: .6; z-index: 10; }
.gun.open .gun-item.in-hand { transform: translateY(calc(var(--i) * -46px)) scale(1.18); opacity: .95; }
.gun-item img { display: block; width: 100%; height: 100%; filter: grayscale(1) brightness(1.5) contrast(.9) drop-shadow(0 0 4px rgba(0, 0, 0, .6)); }
.gun-item b {
  position: absolute; right: -8px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 3px; box-sizing: border-box; pointer-events: none;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  background: rgba(21, 24, 35, .7); border: 1.5px solid rgba(255, 255, 255, .8); color: #fff;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; transition: opacity .2s;
}
.gun-item.in-hand b { min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; }
.gun:not(.open) .gun-item:not(.in-hand) b { opacity: 0; }
.gun-item b.low { background: rgba(80, 80, 90, .85); }
.gun.pop { animation: gunpop .5s ease-out; transform-origin: 0 100%; }
@keyframes gunpop { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* The missions of the endless run, in the style of the ladder of places: a small tab that is always there, and under it, when it is opened (by a tap,
   or by itself for a moment when missions are given or something in them changes), quiet see-through rows, each with a hairline of progress along its foot;
   a done row turns green, its line struck through, a tick in front. */
.goals {
  display: none; position: absolute; z-index: 5; pointer-events: none;
  left: calc(var(--left, 0px) + 12px); top: calc(var(--top, 0px) + 12px); width: 148px;
  font-variant-numeric: tabular-nums;
}
#stage[data-state="run"].endless .goals:not(.none) { display: block; }
.goals-btn {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px;
  border: 1px solid var(--faint); background: #0000005c; color: var(--mute); font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1em; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative;
}
.goals-btn::before { content: ''; position: absolute; inset: -8px -8px -8px -4px; }
.goals-btn i { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--list-icon) center / contain no-repeat; mask: var(--list-icon) center / contain no-repeat;
  --list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 2.5 2 3.5 3.8 1.6M1 6.5 2 7.5 3.8 5.6M1 10.5 2 11.5 3.8 9.6M6 2.6H11M6 6.6H11M6 10.6H11' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.goals-btn b { font-weight: 600; }
.goals.open .goals-btn { color: var(--ink); border-color: #ffffff59; background: #ffffff1f; }
.goals.alldone .goals-btn { color: var(--safe); border-color: var(--safe); }
.goals-list {
  display: grid; gap: 2px; margin-top: 4px; opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .3s, transform .3s, visibility 0s .3s;
}
.goals.open .goals-list { opacity: 1; transform: none; visibility: visible; transition: opacity .3s, transform .3s; }
.goals h4 { margin: 0 0 2px; padding: 0 2px; font-size: 9px; font-weight: 600; letter-spacing: .24em; color: var(--mute); }
.goal {
  position: relative; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 6px; overflow: hidden;
  padding: 4px 7px 5px; border-radius: 3px; font-size: 10px; letter-spacing: .1em; color: var(--ink); background: #0000005c;
  transition: background .3s, color .3s;
}
.goal .mk { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--faint); box-sizing: border-box; transition: all .3s; }
.goal .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal i { font-style: normal; font-weight: 600; color: var(--ink); }
.goal u { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ffffff1a; text-decoration: none; }
.goal u s { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffc247, #6be38a); transition: width .5s ease-out; }
.goal.tick { animation: gain .35s ease-out; }
.goal.done { background: #6ef2a62a; color: var(--safe); }
.goal.done .mk { border-color: var(--safe); background: var(--safe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.4 8 2.8' fill='none' stroke='%23062014' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; animation: goalmk .5s ease-out; }
.goal.done .txt { opacity: .85; }
.goal.done i { color: var(--safe); }

.goal.done u s { background: var(--safe); }
.goals.enter .goals-btn { animation: goalsin .6s ease-out; }
.goals-btn.wink { animation: goalswink 1.2s ease-in-out 2; }
@keyframes goalswink { 0%, 100% { transform: none; box-shadow: none; } 40% { transform: scale(1.14); color: var(--ink); border-color: #ffffffa6; box-shadow: 0 0 12px #ffffff59; } }
@keyframes goalstall { 0%, 100% { background: transparent; } 40% { background: #ffffff2e; } }
.goal.stall { animation: goalstall 1s ease-in-out 3; }
@keyframes goalmk { 0% { transform: scale(.4); } 60% { transform: scale(1.4); box-shadow: 0 0 10px var(--safe); } 100% { transform: scale(1); } }
@keyframes goalsin { 0% { transform: translateY(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Under the score, at the right: where this run stands among everyone and among friends, as a quiet line of small labels and figures. */
.run { margin-left: auto; }
.ladder { display: flex; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 0; width: auto; margin-top: 1px; }
.ladder .stand {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 0 0 0 12px; margin-left: 12px; border-left: 1px solid var(--faint);
  background: none; border-radius: 0; text-shadow: 0 1px 6px #000, 0 0 10px #0009;
}
.ladder .stand:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
.ladder .stand[hidden] { display: none; }
.run .ladder .stand span { font-size: 9px; font-weight: 600; letter-spacing: .22em; color: var(--mute); overflow: visible; }
.run .ladder .stand b { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; transform-origin: 100% 100%; }
.ladder .stand.first b { color: #ffc247; }
.ladder .stand.won b { animation: standwon 1s ease-out; }
.ladder .stand.lost b { animation: standlost .6s ease-out; }
.ladder .stand.gain b { animation: standgain .3s ease-out; }
@keyframes standwon { 0% { transform: scale(1.5); color: var(--safe); text-shadow: 0 0 12px var(--safe); } 100% { transform: none; } }
@keyframes standlost { 0% { color: var(--danger); } 100% { color: var(--ink); } }
@keyframes standgain { 40% { transform: scale(1.12); } }
#pad-label:empty { display: none; }

.vitals[hidden] { display: none; }

/* The jet's tank at the right: a thin upright bar with its word under it, there while the jet burns or fills, then gone. */
.fuel {
  position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  right: calc(var(--right) + 16px); top: 40%; opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s;
}
.fuel.on { opacity: 1; transform: none; }
#stage:not([data-state="run"]) .fuel { display: none; }
.fuel span { font-size: 8px; font-weight: 600; letter-spacing: .2em; color: var(--mute); text-shadow: 0 1px 4px #000; order: 2; }
.fuel u { position: relative; display: block; width: 5px; height: 110px; border-radius: 3px; background: #0000005c; box-shadow: 0 0 0 1px #ffffff40; text-decoration: none; overflow: hidden; }
.fuel s { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(0deg, #ffc247, #ffe9a8); transition: height .15s linear; }
.fuel.low s { background: linear-gradient(0deg, #ff5a47, #ff9a7a); animation: fuellow .4s ease-in-out infinite alternate; }
.fuel.filling s { background: linear-gradient(0deg, #6be38a, #c7ffd8); }
.fuel.filling span { color: var(--safe); }
@keyframes fuellow { to { opacity: .55; } }

/* The title: its buttons in the middle of the screen, over the rocket's landing behind them. */
.title-menu { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-menu .endless-open { margin-top: 0; }
/* A moment's dark between one turn of the title's landing and the next. */
.scene-fade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.scene-fade.on { opacity: 1; }

.pause-btn:active { opacity: .9; }

/* The country as a flag, drawn in grey like the rest of the ladder's words. */
.flag { font-style: normal; filter: grayscale(1) brightness(1.5) contrast(.9); letter-spacing: 0; }
.run .ladder .stand span.flag { font-size: 14px; letter-spacing: 0; line-height: 1; }
/* The ladder is a button: a tap on it opens the rankings. */
.ladder { cursor: pointer; }
/* The rankings: three small tabs over a list. */
.rtabs { display: flex; gap: 6px; margin: 4px 0 2px; }
.rtabs button {
  flex: 1; padding: 7px 0; border: 1px solid var(--faint); border-radius: 3px; background: #0000005c; color: var(--mute); cursor: pointer;
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .22em;
}
.rtabs button[hidden] { display: none; }
.rtabs button.on { color: var(--ink); border-color: #ffffff59; background: #ffffff1f; }
.rtabs .flag { font-size: 15px; }
#ranks { background: #05070ff7; }
#ranks .flist { max-height: min(52vh, 420px); overflow: auto; }
#ranks .flist li { grid-template-columns: 40px 1fr auto; }
#ranks .flist li.top .r { color: var(--ink); }
#ranks .flist li.gap { display: block; text-align: center; color: var(--faint); border: 0; padding: 2px 0; }
/* Four places under the score on a narrow screen: tighter, so the line stays clear of the missions at the left. */
@media (max-width: 480px) {
  .ladder .stand { gap: 4px; padding-left: 8px; margin-left: 8px; }
  .run .ladder .stand span { letter-spacing: .14em; }
  .run .ladder .stand b { font-size: 14px; }
}

/* Choosing a region: the regions of the country as a list, the one this pilot is in marked. */
.rchange { margin-top: 10px; }
.rchange button { flex: 1; padding: 9px 0; }
#ranks .flist li.pick { grid-template-columns: 1fr auto; cursor: pointer; }
#ranks .flist li.pick .s { font-weight: 500; color: var(--mute); font-size: 10px; }
#ranks .flist li.pick.me .c::after { content: ' · YOURS'; color: var(--safe); }
#ranks .flist li.pick:active { background: #ffffff14; }

/* The title's buttons, quiet like the ladder of places: see-through, a hairline edge, small line icons. START has the warm edge. */
.title-menu { gap: 12px; }
.title-menu .endless-open {
  display: block; text-align: center; width: min(244px, 66vw); padding: 14px 0;
  border: 1px solid #ffc247b3; border-radius: 3px; background: linear-gradient(90deg, #ffc24708, #ffc24728 50%, #ffc24708), #0000005c;
  color: var(--ink); font: 600 14px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .38em; text-indent: .38em;
  box-shadow: 0 0 22px #ffc24720; backdrop-filter: blur(3px); -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s;
}
.title-menu .endless-open::before {
  content: ''; display: inline-block; width: 0; height: 0; margin-right: 12px; vertical-align: 1px; border-left: 8px solid var(--warn); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.title-menu .endless-open small { display: block; margin-top: 8px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-indent: .2em; color: var(--warn); }
.title-menu .endless-open:active { background: linear-gradient(90deg, #ffc24714, #ffc24745 50%, #ffc24714), #0000005c; box-shadow: 0 0 30px #ffc24742; }
.title-links { gap: 10px; }
.title-menu .friends-open {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: min(117px, 32vw); margin: 0; padding: 11px 0;
  border: 1px solid var(--faint); border-radius: 3px; background: #0000005c; color: var(--mute); backdrop-filter: blur(3px);
  font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .24em; text-indent: .24em; -webkit-tap-highlight-color: transparent;
}
.title-menu .friends-open svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.title-menu .friends-open:active { color: var(--ink); border-color: #ffffff73; background: #ffffff1f; }

/* The mission map: a radar over the dark, drawn like the rest of the interface, in lines. */
.title-links { gap: 6px; }
.title-menu .friends-open { width: min(100px, 28vw); }
.mmap { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; padding: calc(var(--top) + 10px) 20px calc(var(--bottom) + 18px); background: linear-gradient(#060a12a6, #060a1233 38%, #060a1299), url(assets/mission-map-terrain-v1.webp) center / cover no-repeat, #060a12; color: var(--ink); font-family: Barlow, 'Helvetica Neue', Arial, sans-serif; }
.mmap[hidden] { display: none; }
.mmap header { width: min(380px, 100%); display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.mmap header span { flex: 1; }
.mmap header em { font-style: normal; font-size: 9px; letter-spacing: .24em; color: var(--mute); }
.mmap .x { border: 0; background: none; color: var(--mute); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 6px 0 0; }
.mmap .mprog { width: min(380px, 100%); height: 1px; margin-top: 8px; background: #ffffff26; }
.mmap .mprog i { display: block; height: 1px; background: #5eead4; box-shadow: 0 0 8px #5eead4; }
.mmap .mcount { width: min(380px, 100%); margin: 6px 0 0; font-size: 9px; letter-spacing: .24em; color: #5eead4; }
.mmap .mm { position: relative; flex: 1; min-height: 0; width: min(380px, 100%); margin: 6px 0; }
.mmap .mm .rad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mmap .scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask: linear-gradient(transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(transparent, #000 5%, #000 95%, transparent); }
.mmap .scroll::-webkit-scrollbar { display: none; }
.mmap .scroll svg { display: block; width: 100%; height: auto; overflow: visible; }
.mmap .sweep { position: absolute; left: 50%; top: 50%; width: min(86%, 62vh); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, #5eead400 0deg, #5eead400 300deg, #5eead414 359deg, #5eead400 360deg); animation: mmsweep 6s linear infinite; pointer-events: none; -webkit-mask: radial-gradient(circle, #000 0 98%, transparent 100%); mask: radial-gradient(circle, #000 0 98%, transparent 100%); }
@keyframes mmsweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mmap .ring { fill: none; stroke: #5eead4; stroke-opacity: .16; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mmap .road { fill: none; stroke: #ffffff40; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 8; vector-effect: non-scaling-stroke; }
.mmap .road.lit { stroke: #5eead4; stroke-dasharray: 5 8; stroke-opacity: .85; filter: drop-shadow(0 0 3px #5eead4); }
.mmap .pt { cursor: pointer; }
.mmap .pt.lock { cursor: default; }
.mmap .hit { fill: transparent; }
.mmap .dot { fill: #060a12e0; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mmap .done .dot { stroke: #5eead4; fill: #5eead41a; }
.mmap .now .dot { stroke: #ffc247; fill: #ffc24722; filter: drop-shadow(0 0 5px #ffc24780); }
.mmap .lock .dot { stroke: #ffffff30; stroke-dasharray: 2 3; fill: #ffffff08; }
.mmap .tick { fill: none; stroke: #5eead4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mmap .play { fill: #ffc247; }
.mmap .lockic { fill: none; stroke: #ffffff59; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mmap .pick { fill: none; stroke: #ffffff99; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: mmspin 14s linear infinite; }
@keyframes mmspin { to { transform: rotate(360deg); } }
.mmap .pulse { fill: none; stroke: #ffc247; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: mmping 2.6s ease-out infinite; }
.mmap .pulse.p2 { animation-delay: 1.3s; }
@keyframes mmping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
.mmap .star { fill: none; stroke: #ffffff4d; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mmap .star.got { fill: #ffc247; stroke: #ffc247; }
.mmap .no { fill: var(--mute); font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.mmap .lock .no { fill: #ffffff40; }
.mmap .here { fill: #ffc247; font-size: 7.5px; font-weight: 600; letter-spacing: .22em; }
.mmap .mlabel { margin: 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .26em; }
.mmap .mlabel small { display: block; margin-top: 6px; font-size: 9px; font-weight: 500; letter-spacing: .2em; color: #ffc247; min-height: 1em; }
.mmap .go { display: block; margin-top: 12px; text-align: center; width: min(244px, 66vw); padding: 14px 0; border: 1px solid #ffc247b3; border-radius: 3px; background: linear-gradient(90deg, #ffc24708, #ffc24728 50%, #ffc24708), #0000005c; color: var(--ink); cursor: pointer;
  font: 600 13px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .3em; text-indent: .3em; box-shadow: 0 0 22px #ffc24720; -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s; }
.mmap .go:active { background: linear-gradient(90deg, #ffc24714, #ffc24745 50%, #ffc24714), #0000005c; box-shadow: 0 0 30px #ffc24742; }
.mmap .dot, .mmap .tick, .mmap .play, .mmap .star, .mmap .no, .mmap .here, .mmap .lockic, .mmap .pulse, .mmap .pick { pointer-events: none; }
.mmap .no, .mmap .here { paint-order: stroke; stroke: #060a12; stroke-width: 3px; stroke-linejoin: round; }
.mmap .lock .no { fill: #ffffff80; }

/* The build, at the foot of the title screen, and (Expo Go only) the pilot's form while flying. */
.build { margin: -6px 0 0; text-align: center; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--ink); opacity: .75; pointer-events: none; text-shadow: 0 1px 4px #000; }
.dbg { position: absolute; z-index: 7; right: calc(var(--right) + 8px); bottom: calc(var(--bottom) + 8px); margin: 0; padding: 5px 7px; border-radius: 6px; background: #060a1280; font: 500 9px/1.45 ui-monospace, Menlo, monospace; color: #cfe3ee; text-align: right; white-space: pre; pointer-events: none; }
.dbg:not([hidden]) { display: none; }
#stage[data-state="run"] .dbg:not([hidden]) { display: block; }
.dbg b { font-weight: 600; }
.dbg .up { color: #ff8a6b; }
.dbg .down { color: #6be0b0; }

/* PROFILE and FRIENDS across the whole screen, not in a window: no frame, no lines; soft fields, room to breathe, the column centred. */
.friends.full {
  left: 0; top: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: none; border: 0; border-radius: 0;
  padding: calc(var(--top) + 22px) max(22px, calc((100% - 420px) / 2)) calc(var(--bottom) + 28px);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, #1b0a3966, transparent 70%), #05070ff5;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.friends.full header { padding: 0 0 18px; font-size: 13px; letter-spacing: .38em; }
.friends.full .x { width: 36px; height: 36px; margin-right: -8px; border-radius: 18px; font-size: 26px; }
.friends.full .x:active { background: #ffffff14; }
.friends.full .fl { margin: 26px 0 8px; font-size: 10px; letter-spacing: .24em; }
.friends.full .frow { gap: 8px; }
.friends.full .frow input { padding: 13px 14px; border: 0; border-radius: 10px; background: #ffffff12; font-size: 14px; }
.friends.full .frow input:focus { outline: 0; background: #ffffff1c; }
.friends.full .frow button { padding: 0 18px; border: 0; border-radius: 10px; background: #ffffff1c; letter-spacing: .22em; }
.friends.full .frow button:active { background: #ffffff30; }
.friends.full .fnote { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.friends.full .fmsg { margin-top: 12px; }
.friends.full .mail-state { margin-bottom: 10px; font-size: 13px; }
.friends.full .flist { margin-top: 18px; }
.friends.full .flist li { grid-template-columns: 34px 1fr auto 34px; gap: 10px; padding: 11px 12px; margin-bottom: 4px; border: 0; border-radius: 10px; background: #ffffff0c; font-size: 13px; }
.friends.full .flist li.none { padding: 6px 2px; background: none; }
.friends.full #reset-form button, .friends.full #delete-form button { flex: 1; padding: 14px; }

/* ---- the radio: a small see-through icon at the top right, and a quiet sheet under it ---- */
.radio-open {
  display: block; width: 30px; height: 26px; margin: -2px -4px 2px 0; padding: 0; border: 0; background: none; color: var(--ink); opacity: .55; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent; align-self: flex-end;
}
.radio-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px #000); }
.radio-open:active { opacity: 1; }
.radio-open.silent { opacity: .3; }
.title-radio { position: absolute; z-index: 4; top: calc(var(--top) + 12px); right: calc(var(--right) + 14px); margin: 0; }
.radio {
  position: absolute; z-index: 9; top: calc(var(--top) + 44px); right: calc(var(--right) + 12px); width: min(300px, calc(100% - 24px));
  padding: 4px 16px 18px; border-radius: 14px; background: #05070fe6; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-align: left;
}
.radio[hidden] { display: none; }
.radio header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .3em; color: var(--mute); }
.radio .x { width: 30px; height: 30px; margin-right: -8px; border: 0; border-radius: 15px; background: none; color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer; }
.rlist { list-style: none; margin: 0 0 6px; padding: 0; }
.rlist li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px; font-size: 12px; letter-spacing: .12em; color: var(--mute); cursor: pointer; font-variant-numeric: tabular-nums; }
.rlist li.on { background: #ffffff14; color: var(--ink); }
.rlist li svg { width: 12px; height: 12px; fill: currentColor; opacity: 0; }
.rlist li.on svg { opacity: 1; }
.rlist li small { font-size: 10px; color: var(--mute); }
.rset { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; margin-top: 12px; }
.rtoggle { display: flex; align-items: center; gap: 9px; padding: 6px 0; border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 10px/1 Barlow, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .22em; }
.rtoggle i { position: relative; width: 26px; height: 14px; border-radius: 7px; background: #ffffff26; transition: background .2s; }
.rtoggle i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #ffffffb3; transition: transform .2s, background .2s; }
.rtoggle[aria-pressed="true"] i { background: #6ef2a666; }
.rtoggle[aria-pressed="true"] i::after { transform: translateX(12px); background: var(--ink); }
.rset input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; --v: 50%; }
.rset input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, #ffffffb3 var(--v), #ffffff30 var(--v)); }
.rset input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 6px #0008; }
.rset input[type="range"]::-moz-range-track { height: 2px; background: #ffffff30; }
.rset input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.rset.off input { opacity: .35; }

/* The radio as a screen of its own: the whole view, no frame; what is playing large, the list and the two dials below it. */
.radio {
  left: 0; top: 0; right: 0; bottom: 0; width: auto; border-radius: 0; overflow: auto;
  padding: calc(var(--top) + 22px) max(26px, calc((100% - 420px) / 2)) calc(var(--bottom) + 32px);
  background: radial-gradient(ellipse 90% 55% at 50% 0%, #1b0a3977, transparent 70%), #05070ff5;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.radio header { padding: 0 0 26px; font-size: 13px; letter-spacing: .38em; }
.radio .x { width: 36px; height: 36px; margin-right: -8px; border-radius: 18px; font-size: 26px; }
.radio .x:active { background: #ffffff14; }
.rnow { margin: 8px 0 34px; font-size: 26px; font-weight: 300; letter-spacing: .14em; line-height: 1.25; color: var(--ink); }
.rnow small { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--mute); }
.rnow small::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 10px var(--safe); vertical-align: 1px; }
.rnow.mute small::before { background: var(--mute); box-shadow: none; }
.rlist { margin-bottom: 30px; }
.rlist li { padding: 14px 12px; margin: 0 -12px 4px; border-radius: 10px; font-size: 13px; }
.rset { grid-template-columns: 110px 1fr; margin-top: 18px; }
.rtoggle { font-size: 11px; }
.rtoggle i { width: 34px; height: 18px; border-radius: 9px; }
.rtoggle i::after { width: 14px; height: 14px; border-radius: 50%; }
.rtoggle[aria-pressed="true"] i::after { transform: translateX(16px); }
.rset input[type="range"] { height: 32px; }
.rset input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; }

/* The same ground as the map of missions behind PROFILE, FRIENDS and the radio, darkened to read on; a quiet motion of its own on each:
   drifting stars on the first two, slow rings of sound on the radio. */
.friends.full, .radio {
  background: linear-gradient(#060a12e6, #060a12b3 42%, #060a12ea), url(assets/mission-map-terrain-v1.webp) center / cover, #060a12;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.friends.full::before, .radio::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.friends.full::before {
  background: radial-gradient(1.2px 1.2px at 12% 18%, #fff9, transparent), radial-gradient(1px 1px at 78% 32%, #fff8, transparent), radial-gradient(1.4px 1.4px at 44% 66%, #fff7, transparent),
    radial-gradient(1px 1px at 88% 78%, #fff8, transparent), radial-gradient(1.2px 1.2px at 24% 86%, #fff7, transparent), radial-gradient(1px 1px at 62% 8%, #fff8, transparent);
  animation: drift 40s linear infinite;
}
@keyframes drift { to { transform: translateY(-40px); } }
.radio::before {
  background: repeating-radial-gradient(circle at 50% 78%, transparent 0 46px, #6ef2a61a 47px 48px, transparent 49px 96px);
  mask-image: linear-gradient(#0000, #000 40%, #000 80%, #0000); -webkit-mask-image: linear-gradient(#0000, #000 40%, #000 80%, #0000);
  animation: rings 6s linear infinite;
}
@keyframes rings { to { background-size: 100% 100%; transform: scale(1.12); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .friends.full::before, .radio::before { animation: none; } }

/* A phone does not zoom into a field it types in (a size under 16px makes it), and the invite is a single button to share. */
@media (pointer: coarse) { .frow input, input, textarea, select { font-size: 16px; } }
.frow.share-only input { display: none; }
.frow.share-only button { flex: 1; padding: 14px; }

/* Buttons keep a comfortable height whether a field stands beside them or not. */
.friends.full .frow button, .friends.full .frow.share-only button, .friends.full #reset-form button, .friends.full #delete-form button { min-height: 46px; padding: 12px 20px; }
.friends.full .frow.share-only button { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; }
.friends.full .frow.share-only button svg { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: currentColor; }
.friends.full .frow.share-only button svg path { fill: none; }
.friends.full .frow.share-only button svg circle { stroke: none; }
.rtoggle { min-height: 44px; }

/* The radio's icon sits a fifth of the screen down, under the ranking, on the right. */
.radio-open { position: fixed; z-index: 4; top: calc(var(--top) + 20vh); right: calc(var(--right) + 14px); margin: 0; }
.title-radio { top: calc(var(--top) + 20vh); }

/* The pause button's mark is drawn; the radio's button sits over it, a round one of the same kind. */
.pause-btn svg { display: block; width: 14px; height: 14px; margin: auto; fill: currentColor; }
.radio-open, .title-radio {
  position: absolute; z-index: 6; top: auto; right: auto; left: calc(var(--left) + 12px); bottom: calc(var(--bottom) + 12px);
  width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid #ffffff3d; border-radius: 50%; background: #0000004d; color: #ffffffb3; opacity: .5;
  transition: opacity .2s, bottom .2s; -webkit-tap-highlight-color: transparent; cursor: pointer; pointer-events: auto; align-self: auto;
}
.radio-open svg { display: block; width: 18px; height: 18px; margin: auto; filter: none; }
.radio-open:active { opacity: .9; }
.radio-open.silent { opacity: .28; }
/* Where the pause button is, the radio goes above it. */
#stage:is([data-state="flight"], [data-state="run"], [data-state="exit"]):not(.paused):not(.demo) .radio-open:not(.title-radio) { bottom: calc(var(--bottom) + 60px); }
/* The weapons fan above it moves up a little to leave room. */
.gun { bottom: calc(var(--bottom) + 180px); }

/* ---- the first steps: the space glove shows the move (swipe, tap, hold) and fades out when it is done ---- */
.finger { position: absolute; z-index: 5; left: 50%; top: 48%; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.finger.on { opacity: 1; }
/* The glove: four frames of its gesture from the atlas (a row each: tap, swipe left, swipe right, hold), played and held on the last one for a moment. */
.finger .glove { position: absolute; left: -75px; top: -75px; width: 150px; height: 150px; background: url('assets/tutorial-gestures.webp') 0 0 / 600px 600px no-repeat; animation: g-play 1.6s step-end infinite; filter: drop-shadow(0 3px 8px #0009); }
.finger[data-g="shoot"] .glove { background-position-y: 0; }
.finger[data-g="left"] .glove { background-position-y: -150px; }
.finger[data-g="right"] .glove { background-position-y: -300px; }
.finger[data-g="jump"] .glove, .finger[data-g="fly"] .glove { background-position-y: -450px; }
.finger[data-g="fly"] .glove { animation-duration: 2.4s; }
.finger .cap { position: absolute; left: -110px; top: 82px; width: 220px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .26em; color: var(--ink); text-shadow: 0 1px 6px #000, 0 0 3px #000; }
@keyframes g-play { 0% { background-position-x: 0; } 18% { background-position-x: -150px; } 36% { background-position-x: -300px; } 54%, 100% { background-position-x: -450px; } }
@media (prefers-reduced-motion: reduce) { .finger .glove { animation: none; background-position-x: -450px; } }

/* The places under the score, one to a line, right-aligned: they do not fit in a row beside the missions. */
.ladder { flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 1px; }
.ladder .stand, .ladder .stand:first-child { padding: 0; margin: 0; border-left: 0; gap: 8px; }
@media (max-width: 480px) { .ladder .stand { padding: 0; margin: 0; } }

/* The two small buttons together as wide as START, edge to edge. */
.title-links { width: min(244px, 66vw); gap: 8px; }
.title-menu .friends-open { flex: 1; width: auto; min-width: 0; }

/* Expo Go's menu to have something come next, over the radio. */
.dbg-open, .dbg-menu { position: absolute; z-index: 6; display: none; left: calc(var(--left) + 12px); }
.dbg-open {
  bottom: calc(var(--bottom) + 108px); width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff3d; border-radius: 50%; background: #0000004d;
  color: #ffffffb3; font: 600 20px/1 var(--mono, monospace); opacity: .5; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.dbg-menu { bottom: calc(var(--bottom) + 108px); left: calc(var(--left) + 58px); flex-direction: column; gap: 6px; pointer-events: auto; }
.dbg-menu button { min-height: 40px; padding: 0 16px; border: 1px solid #ffffff3d; border-radius: 20px; background: #000000a6; color: #fff; font: 600 11px/1 var(--mono, monospace); letter-spacing: .12em; text-align: left; cursor: pointer; }
#stage:is([data-state="flight"], [data-state="run"], [data-state="exit"]):not(.paused):not(.demo) .dbg-open:not([hidden]) { display: block; }
#stage:is([data-state="flight"], [data-state="run"], [data-state="exit"]):not(.paused):not(.demo) .dbg-menu:not([hidden]) { display: flex; }

/* The inventory over the weapon on the left: it opens to the right like the weapons open upwards; the money under the missions. */
.bag { display: none; position: absolute; z-index: 6; left: calc(var(--left) + 14px); bottom: calc(var(--bottom) + 216px + 10vh); width: 40px; height: 40px; pointer-events: none; transform: translateY(calc(var(--lift, 0px) * -1)); transition: transform .28s cubic-bezier(.2, .9, .25, 1.1); }
.bag-btn, .bag-item { position: absolute; left: 0; top: 0; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff4d; border-radius: 50%; background: #0000008c; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bag-btn { pointer-events: auto; opacity: .8; z-index: 2; }
.bag-btn i, .bag-item i { position: absolute; inset: 7px; background: center / contain no-repeat; }
.bag-btn i { background-image: url(assets/inventory-icon.webp); inset: 0; }
.bag-item i { background-image: url(assets/ration.webp); }
.bag-btn b, .bag-item b { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #6be38a; color: #04200e; font: 700 11px/18px var(--mono, monospace); text-align: center; }
.bag-item { opacity: 0; pointer-events: none; transform: translateX(0); transition: transform .2s, opacity .2s; z-index: 1; }
.bag.open .bag-item { opacity: 1; pointer-events: auto; transform: translateX(calc(var(--i) * 48px)); }
.bag.open .bag-btn { opacity: 1; border-color: #ffffff99; }
.bag-item.dim { opacity: .45 !important; }
#stage[data-state="run"] .bag:not([hidden]) { display: block; }
.coins { display: flex; align-items: center; gap: 5px; color: #ffd36b; }
.coins[hidden] { display: none; }
.coins i { width: 16px; height: 16px; background: url(assets/currency-icon.webp) center / contain no-repeat; }
.coins b { font-size: 14px; letter-spacing: .06em; }
.coins.bump { animation: coinbump .5s ease-out; }
@keyframes coinbump { 0% { transform: scale(1.6); filter: brightness(1.8); } 100% { transform: none; filter: none; } }

.goals:not(.open) .goals-list { position: absolute; left: 0; right: 0; }
.goals .coins { margin: 6px 0 0 2px; }