/* The race's menus and HUD (menu.js, race/index.html), in the Low-poly UI kit: over kit.css and
   kit-lowpoly.css, with html[data-ui="lowpoly"]. The title is a dark bay; a planet's card a plate
   cut at two corners that rises when it's the one in the middle; the levels are gems set into the
   planet's face; the HUD's readouts sink into glass wells. */

/* The title: over everything, the planets in a row that scrolls sideways and snaps to a card. */
.rm-title {
  position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(16px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto;
  background: var(--bay-facets), radial-gradient(120% 80% at 50% 30%, var(--bay-hi), var(--sky) 70%);
}
.rm-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px; text-align: center; }
.rm-head .ui-title { font-size: 28px; }
/* The landing's wordmark: letters lit as plates (the kit's three bands, from the upper left), Exo in
   glass and Drift in hull, raised on a lip; the subtitle a nameplate between two rules. */
.rm-logo { gap: 12px; margin-bottom: 10px; }
.rm-word {
  display: flex; gap: 0.24em; margin: 0; font: 700 clamp(44px, 14vw, 72px)/0.95 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  filter: drop-shadow(0 5px 0 var(--lip)) drop-shadow(0 0 22px color-mix(in srgb, var(--glass) 22%, transparent));
}
.rm-word span { background: var(--plate); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-word .exo { background-image: var(--plate-glass); }
.rm-sub { display: flex; align-items: center; gap: 12px; color: var(--trim); letter-spacing: 0.32em; }
.rm-sub::before, .rm-sub::after { content: ''; width: 28px; height: 2px; background: var(--line-strong); }
.rm-row { display: flex; align-items: center; gap: 4px; width: min(100%, 1100px); }
.rm-arrow { flex: none; margin: 0 4px; }
.rm-cards {
  position: relative; flex: 1; min-width: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px calc(50% - min(130px, 34vw)) 24px; box-sizing: border-box; overscroll-behavior-x: contain;
}
.rm-cards::-webkit-scrollbar { display: none; }
.rm-card {
  --lipc: var(--bay-lo);
  flex: none; width: min(260px, 68vw); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px 22px; box-sizing: border-box; border: 0; cursor: pointer; text-align: center; color: var(--hud); font-family: var(--sans);
  background: var(--plate-bay); clip-path: var(--cut-l6); box-shadow: 0 6px 0 var(--lipc);
  translate: 0 6px; opacity: 0.6; transition: translate 120ms, opacity 120ms; -webkit-tap-highlight-color: transparent;
}
.rm-card.on { translate: none; opacity: 1; --lipc: var(--lip); }
.rm-card.on .ui-title { color: var(--glass); }
.rm-card:focus-visible { outline: none; box-shadow: 0 6px 0 var(--lipc), inset 0 0 0 2px var(--glass); }
.rm-card .ui-title { font-size: 22px; }
.rm-card .ui-note { font-size: 14px; min-height: 2.8em; }
.rm-planet { display: block; margin: 0 auto 4px; }
.rm-foot { display: flex; gap: 12px; justify-content: center; padding: 0 16px; }
.rm-foot .ui-btn { min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .rm-card { transition: none; } }

/* The levels: gems on the planet's face, each joined by a dotted line to its plate beside the
   planet (the name, and its gems for how hard). */
.rm-globe { position: relative; flex: none; }
.rm-globe .rm-planet { margin: 0; }
.rm-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rm-links line { stroke: color-mix(in srgb, var(--gem) 55%, var(--trim)); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.55; }
.rm-links line.on { stroke: var(--gem); stroke-width: 2; opacity: 1; }
.rm-pin {
  position: absolute; translate: -50% -50%; display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rm-pin > i {
  width: 12px; height: 12px; rotate: 45deg; box-shadow: 0 0 0 3px var(--sky), 0 0 0 4px color-mix(in srgb, var(--gem) 50%, var(--sky));
  background: linear-gradient(90deg, color-mix(in srgb, var(--gem) 70%, #fff) 0 50%, var(--gem) 0);
}
.rm-pin.on > i { box-shadow: 0 0 0 3px var(--sky), 0 0 0 4px var(--gem), 0 0 14px 5px color-mix(in srgb, var(--gem) 60%, transparent); }
.rm-dot {
  position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 8px; padding: 0; min-width: var(--hit); min-height: var(--hit);
  background: none; border: 0; cursor: pointer; color: var(--trim); font-family: var(--sans); -webkit-tap-highlight-color: transparent;
}
.rm-dot > i {
  flex: none; width: 18px; height: 18px; margin-left: 13px; rotate: 45deg; box-shadow: 0 0 0 3px var(--sky), 0 0 0 5px color-mix(in srgb, var(--gem) 50%, var(--sky));
  background: linear-gradient(90deg, color-mix(in srgb, var(--gem) 70%, #fff) 0 50%, var(--gem) 0);
}
.rm-dot.on > i { box-shadow: 0 0 0 3px var(--sky), 0 0 0 5px var(--gem), 0 0 18px 6px color-mix(in srgb, var(--gem) 60%, transparent); }
.rm-dot-l {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 10px 7px; clip-path: var(--cut-s);
  background: color-mix(in srgb, var(--sky) 78%, transparent); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.6);
}
.rm-dot-l b { font: 700 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.rm-dot.on .rm-dot-l b { color: var(--gem); }
.rm-gems { display: flex; gap: 5px; padding-left: 1px; }
.rm-gems i { width: 5px; height: 5px; rotate: 45deg; background: var(--deep); }
.rm-gems i.on { background: var(--gem); }
.rm-dot:focus-visible { outline: none; }
.rm-dot:focus-visible .rm-dot-l { box-shadow: inset 0 0 0 2px var(--glass); }
.rm-about { min-height: 2.8em; max-width: 340px; padding: 0 16px; text-align: center; color: var(--hud); }

/* The race's menu sheet. */
.rm-sheet .body { gap: 12px; }
.rm-where { font-size: 14px; }
.rm-warn { margin: 0; color: var(--warn); }

/* The HUD: no backing but the minimap's (drawn on the canvas), shadowed lettering instead. At the top
   left two rows: a raised plate of the lap beside the lap's time, then the best lap, the haul and the
   hull; the standings, only portraits in place order, up from the bottom left beside the stick, as
   large as the room under the times lets them (to a cap, small on an upright screen); the Menu button
   at the bottom right. Only the button takes a touch: the rest lets it through to the track (and the stick). */
#hud[hidden] { display: none; }
#hud {
  position: fixed; inset: 0; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; pointer-events: none;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.rm-read { font: 500 12px/1.5 var(--sans); color: var(--hud); pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85); }
.rm-read .num { color: var(--glass); }
#hud-times { justify-self: start; display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; }
#hud-lap {
  padding: 5px 10px 4px; font: 700 13px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; text-shadow: none;
  --lipc: var(--lip); background: var(--plate); color: var(--plate-ink); clip-path: var(--cut-s-l4); box-shadow: 0 4px 0 var(--lipc); margin-bottom: 4px;
}
#hud-time { font: 600 26px/1 var(--mono); letter-spacing: -0.01em; color: var(--glass); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 10px color-mix(in srgb, var(--glass) 35%, transparent), 0 0 4px #000; }
#hud-rest { grid-column: 1 / -1; color: var(--trim); font-size: 11px; white-space: nowrap; }
#hud-rest .num { font: 500 11px var(--mono); }
#hud-foot { grid-area: 3 / 1; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
#hud-order { grid-area: 2 / 1 / 4; container-type: size; display: grid; align-content: end; min-height: 0; pointer-events: none; }
#hud-order ol {
  display: grid; grid-auto-rows: minmax(0, 1fr); gap: 5px; height: min(100cqh, calc(var(--n, 6) * (var(--face, 112px) + 5px) - 5px)); margin: 0; padding: 0; list-style: none;
}
#hud-order li { display: flex; min-height: 0; }
@media (orientation: portrait) { #hud-order ol { --face: 40px; } } /* a phone upright: kept small */
.rm-face {
  display: inline-block; width: 24px; height: 24px; background: #0b0e14 center / cover no-repeat;
  box-shadow: inset 0 0 0 2px var(--c), 0 0 0 1px rgba(0, 0, 0, 0.5); clip-path: var(--cut-s);
}
#hud-order .rm-face { width: auto; height: 100%; max-width: 22vw; aspect-ratio: 1; box-shadow: inset 0 0 0 3px var(--c); clip-path: var(--cut); }
#hud-order li.you .rm-face { box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--glass); }
#menu-btn { pointer-events: auto; margin-left: auto; }

/* Loading (busy): the survey's uplink as a hull bay over the dark: what's surveyed and where, the
   step under way in a glass well, its progress a segment meter; the well's caret blinks. */
#load { position: fixed; inset: 0; z-index: 6; display: none; place-items: center; padding: 16px; background: color-mix(in srgb, var(--sky) 80%, transparent); }
body.busy #load { display: grid; }
.rm-load {
  display: flex; flex-direction: column; gap: 10px; width: min(100%, 340px); box-sizing: border-box; padding: 16px 18px 20px;
  background: var(--bay-facets), var(--bay-hi); clip-path: var(--cut);
}
.rm-load-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rm-load-head .num { font: 500 11px var(--mono); color: var(--mute); }
.rm-load-where { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-load-where .ui-tag { color: var(--glass); }
.rm-load-read {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px 6px; background: var(--sky); box-shadow: var(--well); clip-path: var(--cut-s);
  font: 500 12px var(--mono); color: var(--glass);
}
.rm-load-read #load-step::after { content: '_'; animation: rm-caret 1s steps(1) infinite; }
@keyframes rm-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rm-load-read #load-step::after { animation: none; } }
.rm-load .ui-meter { flex: none; }
.rm-load .ui-meter > span { transition: none; } /* the bake starves the frames a transition needs */

/* The hangar (Menu.hangar): over everything like the title; the trees as tabs, a tree as a grid of
   its tiers (a column each) and their two choices; the choice open below, then the bench (the one
   building), the build against stock, and the footer. Scrolls on a phone. */
.rm-hangar { justify-content: flex-start; gap: 12px; padding-left: 16px; padding-right: 16px; }
.rm-hangar > * { width: min(100%, 640px); box-sizing: border-box; }
.rm-hangar .rm-head .ui-title { font-size: 24px; }
.rm-wallet { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; font: 500 13px var(--mono); color: var(--hud); }
.rm-wallet .ui-cr { color: #ffd84a; }
.rm-part { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rm-icon { display: inline-block; vertical-align: -4px; margin-right: 2px; }
.rm-tabs { display: flex; gap: 6px; }
.rm-tab { flex: 1 1 0; min-width: 0; }
.rm-tab[aria-selected="true"] { outline: 2px solid var(--cyan); outline-offset: -2px; }
.rm-tree { display: grid; gap: 8px; align-items: stretch; }
.rm-tier { text-align: center; grid-row: 1; }
.rm-tree .rm-node { position: relative; min-height: 92px; padding: 8px; gap: 6px; justify-content: flex-start; }
.rm-node .lbl { white-space: normal; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rm-node .ui-deltas { font-size: 11px; gap: 0 8px; flex-direction: column; }
.rm-node .ui-delta { white-space: normal; }
.rm-tree .rm-node { min-width: 0; }
.rm-node.closed { opacity: 0.45; }
.rm-node.closed .ui-delta span { color: inherit; }
.rm-detail { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.rm-detail .ui-title { font-size: 18px; }
.rm-why { color: var(--warn, #ffb03a); }
.rm-bench { text-align: center; }
.rm-bench { display: flex; flex-direction: column; gap: 6px; }
.rm-build { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rm-build .ui-deltas { justify-content: center; }
@media (max-width: 420px) { .rm-tree { gap: 6px; } .rm-tree .rm-node { min-height: 104px; padding: 6px; } .rm-node .lbl { font-size: 11px; } .rm-node .ui-deltas { font-size: 10px; } }

/* The landing: the race's name over its menu, one button under the other. */
.rm-menu { display: flex; flex-direction: column; gap: 10px; width: min(100% - 32px, 320px); }

/* The controls and the profile: a page over everything like the title, a column of its parts. */
.rm-page { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }
.rm-page > * { width: min(100%, 520px); box-sizing: border-box; }
.rm-page > .ui-label { text-align: center; }
.rm-opts { display: flex; gap: 6px; }
.rm-opt { flex: 1 1 0; min-width: 0; }
.rm-opt[aria-pressed="true"] { outline: 2px solid var(--cyan); outline-offset: -2px; }
.rm-page .rm-about { margin: 0 auto; }
.rm-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font: 500 13px/1.4 var(--sans); color: var(--hud); }
.rm-keys dt { font-family: var(--mono); color: var(--glass); white-space: nowrap; }
.rm-keys dd { margin: 0; }
.rm-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.rm-face-l { clip-path: var(--cut-l6); background: #0b0e14; }
.rm-profile .rm-keys { font-size: 15px; }

/* The hangar's ships: a card a hull, its look over its numbers; the one flown lit. */
.rm-ships { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.rm-hull { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; text-align: center; }
.rm-hull .ui-title { font-size: 16px; }
.rm-hull .ui-deltas { font-size: 11px; flex-direction: column; gap: 0; }
.rm-hull .ui-note { margin: 0; }
.rm-hull.on { box-shadow: inset 0 0 0 2px var(--cyan); }
.rm-ship { display: block; }
@media (max-width: 420px) { .rm-tabs { flex-wrap: wrap; } .rm-tab { flex: 1 1 30%; } }