:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #030510;
  color: #f4fbff;
}

* { box-sizing: border-box; }

html, body, #game {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body { background: radial-gradient(circle at 50% 35%, #101536, #02030a 70%); }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.pod-select {
  --pod-accent: #55e9ff;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vh, 24px);
  padding: clamp(20px, 4vh, 44px) clamp(18px, 5vw, 72px) clamp(16px, 3vh, 32px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(31, 141, 202, .17), transparent 39%),
    linear-gradient(155deg, #070b1c 0%, #02040d 52%, #090419 100%);
  color: #f4fbff;
  text-transform: uppercase;
}

.pod-select__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(86, 233, 255, .28) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(95, 229, 255, .055) 54px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(95, 229, 255, .045) 80px);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 86%, transparent);
}

.pod-select__header {
  position: relative;
  z-index: 2;
  text-align: center;
}

.pod-select__eyebrow {
  color: var(--pod-accent);
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 900;
  letter-spacing: .42em;
  text-shadow: 0 0 18px rgba(85, 233, 255, .65);
}

.pod-select__header h1 {
  margin: 5px 0 1px;
  font-size: clamp(29px, 4.8vw, 66px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: .95;
  text-shadow: 0 0 34px rgba(103, 212, 255, .22);
}

.pod-select__header h1 span { color: var(--pod-accent); }

.pod-select__header p {
  margin: 8px 0 0;
  color: rgba(224, 241, 255, .54);
  font-size: clamp(8px, 1vw, 10px);
  font-weight: 800;
  letter-spacing: .5em;
}

.pod-select__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  justify-self: center;
  width: min(1420px, 94vw);
  min-height: 0;
}

.pod-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(89, 225, 255, .34);
  border-radius: 0;
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);
  outline: none;
  background:
    linear-gradient(135deg, rgba(57, 181, 255, .105), transparent 38%),
    linear-gradient(155deg, rgba(10, 18, 41, .94), rgba(3, 7, 18, .98));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .48),
    inset 0 0 48px rgba(61, 204, 255, .035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, filter .22s ease, transform .22s ease;
}

.pod-card::before,
.pod-card::after {
  position: absolute;
  z-index: 5;
  content: '';
  pointer-events: none;
}

.pod-card::before {
  top: 0;
  left: 14%;
  width: 34%;
  height: 2px;
  background: var(--pod-accent);
  box-shadow: 0 0 20px var(--pod-accent);
}

.pod-card::after {
  inset: 0;
  opacity: .22;
  background: linear-gradient(108deg, transparent 25%, rgba(111, 234, 255, .18) 43%, transparent 58%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}

.pod-card:hover,
.pod-card:focus-visible {
  border-color: rgba(93, 238, 255, .86);
  filter: brightness(1.09);
  transform: translateY(-3px);
}

.pod-card:hover::after,
.pod-card:focus-visible::after { transform: translateX(100%); }

.pod-card__index {
  position: absolute;
  top: clamp(18px, 3vw, 30px);
  left: clamp(20px, 3vw, 34px);
  z-index: 4;
  color: rgba(220, 244, 255, .1);
  font-size: clamp(62px, 10vw, 126px);
  font-style: italic;
  font-weight: 950;
  line-height: .8;
}

.pod-card__status {
  position: absolute;
  top: clamp(19px, 3vw, 31px);
  right: clamp(22px, 3vw, 34px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(222, 243, 255, .7);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .22em;
}

.pod-card__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54ffb5;
  box-shadow: 0 0 12px #54ffb5;
  animation: pod-status 1.4s ease-in-out infinite alternate;
}

.pod-card__viewport {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 0;
}

.pod-card__viewport::after {
  position: absolute;
  right: 15%;
  bottom: 4%;
  left: 15%;
  height: 15%;
  content: '';
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(38, 192, 255, .2), transparent 70%);
  filter: blur(13px);
}

.pod-card__viewport canvas { pointer-events: none; }

.pod-card__scan {
  position: absolute;
  top: 15%;
  bottom: 25%;
  left: 50%;
  z-index: 3;
  width: 1px;
  opacity: .28;
  background: linear-gradient(transparent, var(--pod-accent), transparent);
  box-shadow: 0 0 16px var(--pod-accent);
  pointer-events: none;
  animation: pod-scan 4.5s ease-in-out infinite;
}

.pod-card__info {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px;
  padding: clamp(17px, 2.8vw, 28px) clamp(20px, 3.6vw, 38px);
  border-top: 1px solid rgba(89, 225, 255, .16);
  background: linear-gradient(90deg, rgba(4, 10, 25, .96), rgba(8, 13, 31, .9));
}

.pod-card__identity,
.pod-card__specs span { display: grid; }

.pod-card small {
  color: var(--pod-accent);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .24em;
}

.pod-card__identity strong {
  margin-top: 5px;
  font-size: clamp(23px, 3.5vw, 40px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1;
}

.pod-card__identity em {
  color: rgba(239, 249, 255, .55);
  font-style: inherit;
  font-weight: 600;
}

.pod-card__specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(18px, 4vw, 46px);
}

.pod-card__specs strong {
  margin-top: 5px;
  color: rgba(241, 250, 255, .88);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}

.pod-card__launch {
  position: absolute;
  right: clamp(21px, 3vw, 34px);
  bottom: calc(clamp(17px, 2.8vw, 28px) + 58px);
  z-index: 6;
  color: white;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
  text-shadow: 0 0 16px var(--pod-accent);
}

.pod-card__launch b { color: var(--pod-accent); font-size: 15px; }

.pod-card.is-launching { animation: pod-launch .25s ease-in both; }

.pod-select__footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  justify-self: center;
  width: min(1420px, 94vw);
  color: rgba(185, 218, 234, .38);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .25em;
}

@keyframes pod-status { to { opacity: .42; } }
@keyframes pod-scan {
  0%, 100% { transform: translateX(-300px); opacity: 0; }
  15%, 85% { opacity: .28; }
  50% { transform: translateX(300px); opacity: .5; }
}
@keyframes pod-launch { to { opacity: 0; transform: scale(1.035); filter: brightness(1.8); } }

.circuit-select {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vh, 22px);
  padding: clamp(20px, 3.5vh, 38px) clamp(18px, 5vw, 72px) clamp(16px, 3vh, 30px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(45, 132, 191, .18), transparent 42%),
    linear-gradient(155deg, #070b1c 0%, #02040d 52%, #090419 100%);
  color: #f4fbff;
  text-transform: uppercase;
}

.circuit-select__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(86, 233, 255, .22) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(95, 229, 255, .05) 54px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(95, 229, 255, .04) 80px);
  mask-image: linear-gradient(to bottom, transparent, black 13%, black 90%, transparent);
}

.circuit-select__header {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(1420px, 94vw);
  text-align: center;
}

.circuit-select__back {
  position: absolute;
  top: 2px;
  left: 0;
  padding: 8px 11px;
  border: 1px solid rgba(97, 220, 255, .24);
  background: rgba(5, 13, 29, .74);
  color: rgba(214, 240, 252, .62);
  font: 800 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.circuit-select__back:hover,
.circuit-select__back:focus-visible {
  border-color: #55e9ff;
  outline: none;
  background: rgba(21, 65, 87, .72);
  color: white;
}

.circuit-select__eyebrow {
  color: #55e9ff;
  font-size: clamp(8px, 1vw, 10px);
  font-weight: 900;
  letter-spacing: .34em;
  text-shadow: 0 0 18px rgba(85, 233, 255, .58);
}

.circuit-select__header h1 {
  margin: 5px 0 0;
  font-size: clamp(28px, 4vw, 54px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: .95;
}

.circuit-select__header h1 span { color: #55e9ff; }

.circuit-select__header p {
  margin: 8px 0 0;
  color: rgba(224, 241, 255, .48);
  font-size: clamp(7px, .9vw, 9px);
  font-weight: 800;
  letter-spacing: .34em;
}

.circuit-select__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  align-content: start;
  gap: 12px;
  justify-self: center;
  width: min(1420px, 94vw);
  min-height: 0;
  padding: 4px 7px 18px 4px;
  overflow-y: auto;
  scrollbar-color: rgba(85, 233, 255, .42) rgba(4, 10, 24, .62);
  scrollbar-width: thin;
}

.circuit-card {
  --circuit-accent: #55e9ff;
  --circuit-horizon: #102b45;
  position: relative;
  display: grid;
  grid-template-rows: 58px auto auto;
  min-height: 164px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--circuit-accent) 35%, transparent);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  outline: none;
  background: linear-gradient(155deg, rgba(12, 22, 43, .97), rgba(3, 8, 18, .98));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, filter .18s ease, transform .18s ease, opacity .18s ease;
}

.circuit-card::before {
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 4;
  width: 42%;
  height: 2px;
  content: '';
  background: var(--circuit-accent);
  box-shadow: 0 0 14px var(--circuit-accent);
}

.circuit-card__sky {
  position: relative;
  display: block;
  border-bottom: 1px solid color-mix(in srgb, var(--circuit-accent) 18%, transparent);
  background:
    linear-gradient(166deg, transparent 45%, color-mix(in srgb, var(--circuit-accent) 32%, transparent) 46% 47%, transparent 48%),
    radial-gradient(ellipse at 58% 112%, var(--circuit-horizon), #030713 68%);
}

.circuit-card__sky::after {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, var(--circuit-accent), transparent);
  box-shadow: 0 0 9px var(--circuit-accent);
}

.circuit-card__number {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 3;
  color: rgba(238, 249, 255, .78);
  font-size: 25px;
  font-style: italic;
  font-weight: 950;
  letter-spacing: .04em;
}

.circuit-card__status {
  position: absolute;
  top: 18px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(222, 243, 255, .62);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
}

.circuit-card__status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.circuit-card__name {
  display: block;
  padding: 14px 14px 7px;
  overflow: hidden;
  color: white;
  font-size: 13px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.circuit-card__metrics {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 0 14px 13px;
}

.circuit-card__metrics span { display: grid; gap: 2px; }
.circuit-card__metrics span:last-child { text-align: right; }

.circuit-card__metrics small {
  color: var(--circuit-accent);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .2em;
}

.circuit-card__metrics strong {
  color: rgba(236, 248, 255, .72);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.circuit-card__lock {
  position: absolute;
  right: 12px;
  bottom: 40px;
  display: none;
  color: rgba(231, 242, 248, .5);
  font-size: 20px;
}

.circuit-card.is-locked {
  opacity: .5;
  filter: saturate(.12) brightness(.62);
  cursor: not-allowed;
}
.circuit-card.is-locked .circuit-card__lock { display: block; }
.circuit-card.is-available .circuit-card__status,
.circuit-card.is-validated .circuit-card__status { color: #68ffc1; }

.circuit-card.is-available:hover,
.circuit-card.is-available:focus-visible,
.circuit-card.is-validated:hover,
.circuit-card.is-validated:focus-visible {
  z-index: 3;
  border-color: var(--circuit-accent);
  filter: saturate(.85) brightness(1.12);
  transform: translateY(-3px);
}

.circuit-card.is-selected:not(:disabled) {
  border-color: color-mix(in srgb, var(--circuit-accent) 82%, white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--circuit-accent) 12%, transparent);
}

.circuit-card.is-launching { animation: pod-launch .25s ease-in both; }
.circuit-card.is-loading {
  border-color: var(--circuit-accent);
  filter: brightness(1.18);
  animation: circuit-loading-card .8s ease-in-out infinite alternate;
}

.circuit-select__footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  justify-self: center;
  width: min(1420px, 94vw);
  color: rgba(185, 218, 234, .42);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
}

.circuit-loader {
  --loader-accent: #55e9ff;
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--loader-accent) 14%, transparent), transparent 38%),
    rgba(1, 4, 13, .82);
  backdrop-filter: blur(8px);
}

.circuit-loader[hidden] { display: none; }

.circuit-loader__frame {
  position: relative;
  width: min(540px, calc(100vw - 36px));
  padding: 34px 38px 31px;
  border: 1px solid color-mix(in srgb, var(--loader-accent) 54%, transparent);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background: linear-gradient(145deg, rgba(13, 24, 47, .98), rgba(3, 7, 18, .99));
  box-shadow: 0 0 70px color-mix(in srgb, var(--loader-accent) 16%, transparent);
}

.circuit-loader__frame::before {
  position: absolute;
  top: 0;
  left: 14%;
  width: 48%;
  height: 2px;
  content: '';
  background: var(--loader-accent);
  box-shadow: 0 0 18px var(--loader-accent);
}

.circuit-loader__kicker {
  display: block;
  color: var(--loader-accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .3em;
}

.circuit-loader strong {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: white;
  font-size: clamp(22px, 4vw, 38px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.circuit-loader__track {
  height: 5px;
  margin-top: 28px;
  overflow: hidden;
  background: color-mix(in srgb, var(--loader-accent) 13%, #050913);
}

.circuit-loader__track i {
  display: block;
  width: var(--load-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--loader-accent) 52%, white), var(--loader-accent));
  box-shadow: 0 0 16px var(--loader-accent);
  transition: width .12s linear;
}

.circuit-loader.is-indeterminate .circuit-loader__track i {
  width: 34%;
  animation: circuit-loader-stream 1s ease-in-out infinite;
}

.circuit-loader__status {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 11px;
  color: rgba(210, 235, 248, .54);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .18em;
}

.circuit-loader__status output {
  color: var(--loader-accent);
  font: inherit;
}

.circuit-loader.has-error .circuit-loader__kicker,
.circuit-loader.has-error .circuit-loader__status output { color: #ff6685; }

.circuit-loader__dismiss {
  margin-top: 24px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 102, 133, .58);
  background: rgba(64, 8, 23, .72);
  color: #ff91a8;
  font: 850 8px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

.circuit-loader__dismiss[hidden] { display: none; }

@keyframes circuit-loading-card {
  to {
    filter: brightness(1.5);
    box-shadow: 0 0 28px color-mix(in srgb, var(--circuit-accent) 22%, transparent);
  }
}

@keyframes circuit-loader-stream {
  from { transform: translateX(-105%); }
  to { transform: translateX(300%); }
}

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: clamp(18px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(78, 229, 255, .7);
}

.hud__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.hud__right {
  display: grid;
  width: min(238px, 38vw);
  gap: 8px;
}

.hud__speed-value {
  font-size: clamp(38px, 6vw, 78px);
  font-weight: 800;
  line-height: .85;
  font-variant-numeric: tabular-nums;
}

.hud__unit, .hud__label {
  color: #65eaff;
  font-size: 11px;
  font-weight: 700;
}

.hud__stats {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 13px;
  min-width: 0;
  padding: 11px 13px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--boost-color) 25%, transparent);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--boost-color) 8%, transparent), transparent 48%),
    rgba(3, 8, 22, .62);
  box-shadow: inset 0 0 24px rgba(67, 220, 255, .035);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  backdrop-filter: blur(5px);
}

.hud__stats::before {
  position: absolute;
  top: 0;
  right: 18px;
  width: 42%;
  height: 2px;
  content: '';
  background: var(--boost-color);
  box-shadow: 0 0 12px var(--boost-color);
}

.hud__stats-title {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--boost-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hud__stats > span:not(.hud__label) {
  color: rgba(240, 250, 255, .92);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .06em;
}

.hud__stats .hud__label {
  opacity: .74;
  font-size: 9px;
  letter-spacing: .16em;
}

.hud__dev {
  position: relative;
  width: 100%;
  padding: 10px 13px 12px;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--boost-color) 22%, transparent);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--boost-color) 7%, transparent), transparent 52%),
    rgba(3, 8, 22, .68);
  box-shadow: inset 0 0 24px rgba(67, 220, 255, .035);
  backdrop-filter: blur(5px);
}

.hud__dev::before {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 32%;
  height: 2px;
  content: '';
  background: var(--boost-color);
  box-shadow: 0 0 12px var(--boost-color);
}

.hud__dev-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: rgba(240, 250, 255, .62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.hud__dev-title span {
  color: var(--boost-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
}

.hud__dev-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.hud__dev-field > span {
  color: #65eaff;
  opacity: .74;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.hud__dev select {
  width: 100%;
  min-width: 0;
  padding: 7px 6px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--boost-color) 30%, transparent);
  border-radius: 0;
  outline: none;
  background: rgba(1, 6, 17, .82);
  color: rgba(244, 251, 255, .94);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: none;
  cursor: pointer;
}

.hud__dev select:hover,
.hud__dev select:focus-visible {
  border-color: var(--boost-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--boost-color) 28%, transparent);
}

.hud__dev option {
  background: #07101e;
  color: #f4fbff;
}

.hud__dev-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--boost-color) 14%, transparent);
  font-size: 8px;
  line-height: 1.15;
}

.hud__dev-info span {
  color: #65eaff;
  opacity: .58;
  font-weight: 700;
  letter-spacing: .13em;
}

.hud__dev-info strong {
  overflow: hidden;
  color: rgba(240, 250, 255, .78);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud__progress {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 4vh, 44px);
  height: 3px;
  background: rgba(255,255,255,.14);
}

.hud__progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff3bd4, #4ee5ff);
  box-shadow: 0 0 14px #4ee5ff;
}

.hud__help {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  color: rgba(255,255,255,.82);
  font-size: clamp(10px, 1.3vw, 13px);
  text-align: center;
  transition: opacity .8s ease;
  white-space: nowrap;
}

.hud__help.is-hidden { opacity: 0; }

.hud__touch-controls { display: none; }

@media (hover: none) and (pointer: coarse) {
  .hud__touch-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    height: 20vh;
    height: 20dvh;
    pointer-events: none;
    color: color-mix(in srgb, var(--boost-color) 48%, transparent);
  }

  .hud__touch-zone {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-inline: 5vw;
    border-top: 1px solid color-mix(in srgb, var(--boost-color) 13%, transparent);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--boost-color) 3%, transparent),
      transparent 32% 68%,
      color-mix(in srgb, var(--boost-color) 3%, transparent)
    );
  }

  .hud__touch-zone--brake {
    color: rgba(255, 130, 151, .42);
    border-top-color: rgba(255, 100, 130, .12);
    background: linear-gradient(
      90deg,
      rgba(255, 80, 112, .025),
      transparent 32% 68%,
      rgba(255, 80, 112, .025)
    );
  }

  .hud__touch-zone span:last-child { text-align: right; }

  .hud__touch-zone span {
    font-size: 13px;
    font-weight: 900;
  }

  .hud__touch-zone strong {
    opacity: .82;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .28em;
  }

  .hud__help { display: none; }
  .hud__progress { bottom: calc(20vh + 12px); bottom: calc(20dvh + 12px); }
}

.hud__start-countdown {
  --countdown-scale: 1;
  --countdown-opacity: 1;
  --countdown-brightness: 1;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: var(--countdown-opacity);
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--boost-color) 9%, transparent),
    transparent 30%
  );
}

.hud__start-countdown[hidden] { display: none; }

.hud__start-countdown-frame {
  position: relative;
  display: grid;
  min-width: clamp(210px, 31vw, 430px);
  min-height: clamp(170px, 29vw, 360px);
  place-items: center;
  filter: brightness(var(--countdown-brightness));
  transform: scale(var(--countdown-scale));
  will-change: transform, filter;
}

.hud__start-countdown-frame::before,
.hud__start-countdown-frame::after {
  position: absolute;
  inset: 10% 0;
  content: '';
  border-block: 2px solid color-mix(in srgb, var(--boost-color) 76%, transparent);
  clip-path: polygon(0 0, 34% 0, 30% 3px, 70% 3px, 66% 0, 100% 0, 100% 100%, 66% 100%, 70% calc(100% - 3px), 30% calc(100% - 3px), 34% 100%, 0 100%);
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--boost-color) 12%, transparent);
}

.hud__start-countdown-frame::after {
  inset: 0 11%;
  border-block: 0;
  border-inline: 1px solid color-mix(in srgb, var(--boost-color) 32%, transparent);
  clip-path: none;
}

.hud__start-countdown span {
  position: relative;
  z-index: 1;
  color: #f7fdff;
  font-size: clamp(112px, 24vw, 270px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: .78;
  text-indent: -.05em;
  text-shadow:
    0 0 10px white,
    0 0 34px var(--boost-color),
    9px 0 0 color-mix(in srgb, var(--boost-color) 32%, transparent);
}

.hud__start-countdown small {
  position: absolute;
  bottom: 13%;
  z-index: 1;
  color: var(--boost-color);
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 900;
  letter-spacing: .32em;
  white-space: nowrap;
}

.hud__start-countdown.is-start span {
  font-size: clamp(66px, 14vw, 168px);
  letter-spacing: .08em;
  text-indent: .08em;
}

.hud__start-countdown.is-waiting span {
  opacity: .72;
  font-size: clamp(48px, 9vw, 100px);
  letter-spacing: .14em;
  text-indent: .14em;
}

.hud__lap-result {
  position: absolute;
  top: 17vh;
  left: 50%;
  padding: 11px 18px;
  border-inline: 2px solid #ff627e;
  opacity: 0;
  color: #ff9aad;
  background: linear-gradient(90deg, transparent, rgba(46, 4, 17, .7), transparent);
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -8px);
}

.hud__lap-result.is-visible { animation: lap-result 2.6s ease both; }

.hud__lap-result.is-boost {
  border-color: var(--boost-color);
  color: var(--boost-color);
  background: linear-gradient(90deg, transparent, rgba(4, 24, 28, .76), transparent);
  text-shadow: 0 0 14px var(--boost-color);
}

.hud__lap-result.is-boost.is-visible { animation-duration: 1.8s; }

@keyframes lap-result {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(.96); }
  12%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 8px) scale(.98); }
}

.hud [data-time].is-warning { color: #ffd66b; text-shadow: 0 0 14px rgba(255, 195, 61, .75); }
.hud [data-time].is-critical {
  color: #ff627e;
  text-shadow: 0 0 18px rgba(255, 49, 91, .9);
  animation: timer-critical .55s ease-in-out infinite alternate;
}

@keyframes timer-critical { to { opacity: .55; } }

.finish {
  --result-accent: #58efff;
  --result-secondary: #ae76ff;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  pointer-events: auto;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 44%, rgba(36, 134, 187, .2), transparent 42%),
    rgba(1, 3, 12, .78);
  backdrop-filter: blur(10px) saturate(1.25);
  animation: result-veil .28s ease-out both;
}

.finish[hidden] { display: none; }

.finish__card {
  position: relative;
  isolation: isolate;
  width: min(580px, calc(100vw - 32px));
  overflow: hidden;
  padding: clamp(34px, 6vw, 58px);
  border: 1px solid color-mix(in srgb, var(--result-accent) 58%, transparent);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--result-accent) 9%, transparent), transparent 42%),
    linear-gradient(150deg, rgba(12, 18, 43, .98), rgba(3, 6, 18, .98));
  box-shadow:
    0 0 90px color-mix(in srgb, var(--result-accent) 18%, transparent),
    inset 0 0 48px rgba(90, 225, 255, .04);
  text-align: center;
  animation: result-card .42s cubic-bezier(.16, .8, .24, 1) both;
}

.finish__card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  opacity: .12;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, var(--result-accent) 12px),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--result-accent) 80px);
  mask-image: linear-gradient(to bottom, transparent, black 28%, transparent 88%);
}

.finish__card::after {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 2px;
  content: '';
  background: var(--result-accent);
  box-shadow: 0 0 22px var(--result-accent);
}

.finish__kicker {
  color: var(--result-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.finish h1 {
  margin: 13px 0 7px;
  color: white;
  font-size: clamp(34px, 7vw, 58px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 0 0 28px color-mix(in srgb, var(--result-accent) 52%, transparent);
}

.finish__level {
  color: color-mix(in srgb, var(--result-secondary) 82%, white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.finish__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 34px;
  border: 1px solid color-mix(in srgb, var(--result-accent) 22%, transparent);
  background: color-mix(in srgb, var(--result-accent) 18%, transparent);
}

.finish__metric {
  display: grid;
  gap: 7px;
  padding: 17px 14px;
  background: rgba(3, 8, 23, .91);
}

.finish__metric--wide { grid-column: 1 / -1; }

.finish__metric span {
  color: color-mix(in srgb, var(--result-accent) 75%, white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.finish__metric strong {
  color: white;
  font-size: clamp(18px, 4vw, 27px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.finish__countdown {
  min-height: 1.4em;
  margin: 28px 0 0;
  color: var(--result-accent);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .24em;
  text-transform: uppercase;
  animation: result-pulse .7s ease-in-out infinite alternate;
}

@keyframes result-veil { from { opacity: 0; } }
@keyframes result-card {
  from { opacity: 0; transform: translateY(22px) scale(.96); filter: brightness(1.8); }
}
@keyframes result-pulse { to { opacity: .55; text-shadow: 0 0 18px var(--result-accent); } }

.pause-menu {
  --pause-accent: #58efff;
  --pause-secondary: #ae76ff;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: auto;
  background:
    linear-gradient(115deg, rgba(3, 7, 18, .9), rgba(1, 3, 11, .72)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, .018) 80px),
    rgba(0, 2, 9, .7);
  backdrop-filter: blur(11px) saturate(1.15);
  animation: result-veil .18s ease-out both;
}

.pause-menu[hidden] { display: none; }

.pause-menu__card {
  position: relative;
  isolation: isolate;
  width: min(540px, calc(100vw - 32px));
  overflow: hidden;
  padding: clamp(34px, 6vw, 56px);
  border: 1px solid color-mix(in srgb, var(--pause-accent) 52%, transparent);
  clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pause-accent) 10%, transparent), transparent 42%),
    linear-gradient(150deg, rgba(12, 18, 43, .985), rgba(3, 6, 18, .985));
  box-shadow:
    0 0 90px color-mix(in srgb, var(--pause-accent) 16%, transparent),
    inset 0 0 48px rgba(90, 225, 255, .04);
  text-align: center;
  text-transform: uppercase;
  animation: result-card .3s cubic-bezier(.16, .8, .24, 1) both;
}

.pause-menu__card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  opacity: .1;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, var(--pause-accent) 14px),
    repeating-linear-gradient(90deg, transparent 0 89px, var(--pause-accent) 90px);
  mask-image: linear-gradient(to bottom, transparent, black 30%, transparent 88%);
}

.pause-menu__card::after {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 2px;
  content: '';
  background: var(--pause-accent);
  box-shadow: 0 0 24px var(--pause-accent);
}

.pause-menu__kicker {
  color: var(--pause-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .34em;
}

.pause-menu h1 {
  margin: 14px 0 8px;
  color: #fff;
  font-size: clamp(48px, 10vw, 78px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: .9;
  text-shadow: 0 0 30px color-mix(in srgb, var(--pause-accent) 50%, transparent);
}

.pause-menu p {
  margin: 0;
  color: color-mix(in srgb, var(--pause-secondary) 58%, white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

.pause-menu__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 34px;
}

.pause-menu button {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--pause-accent) 34%, transparent);
  outline: none;
  background: rgba(2, 8, 22, .88);
  color: rgba(239, 249, 255, .78);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.pause-menu button.is-primary {
  border-color: color-mix(in srgb, var(--pause-accent) 72%, transparent);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--pause-accent) 24%, transparent), transparent),
    rgba(3, 13, 29, .94);
  color: #fff;
}

.pause-menu button:hover,
.pause-menu button:focus-visible {
  border-color: var(--pause-accent);
  color: #fff;
  box-shadow: 0 0 22px color-mix(in srgb, var(--pause-accent) 28%, transparent);
  transform: translateY(-2px);
}

.pause-menu small {
  display: block;
  margin-top: 20px;
  color: color-mix(in srgb, var(--pause-accent) 60%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .25em;
}

.debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px;
  background: rgba(0,0,0,.55);
  color: #b8ffcc;
  font: 11px/1.45 ui-monospace, monospace;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 780px), (max-height: 620px) {
  .hud__stats { display: none; }
}

@media (max-width: 1120px) {
  .pod-card__info { grid-template-columns: 1fr; gap: 14px; }
  .pod-card__specs { justify-content: space-between; gap: 12px; }
  .pod-card__launch { top: 58px; right: 20px; bottom: auto; }
}

@media (max-width: 780px) {
  .pod-select__grid {
    grid-template-columns: 1fr;
    width: 100%;
    overflow-y: auto;
    padding-right: 4px;
  }

  .pod-card { min-height: 460px; }
  .pod-select__footer { width: 100%; }
}

@media (max-width: 620px) {
  .pod-select { padding-inline: 12px; }
  .pod-card { grid-template-rows: minmax(210px, 1fr) auto; width: 100%; }
  .pod-card__info { grid-template-columns: 1fr; gap: 14px; }
  .pod-card__specs { justify-content: space-between; gap: 12px; }
  .pod-card__launch { top: 58px; right: 20px; bottom: auto; }
  .pod-select__footer { width: 100%; }
  .circuit-select { padding-inline: 12px; }
  .circuit-select__header { width: 100%; padding-top: 34px; }
  .circuit-select__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .circuit-card { min-height: 154px; }
  .circuit-card__name { padding-inline: 10px; font-size: 11px; }
  .circuit-card__metrics { padding-inline: 10px; }
  .circuit-select__footer { width: 100%; font-size: 6px; }
  .hud__right { width: 218px; }
  .hud__stats { gap: 4px 10px; padding: 10px 12px; }
  .hud__dev { padding: 9px 12px 10px; }
  .finish__card { padding: 32px 22px; }
  .pause-menu__card { padding: 34px 22px; }
  .pause-menu__actions { grid-template-columns: 1fr; }
}