@font-face {
  font-family: Rajdhani;
  src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Rajdhani;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --doad-ink: #e9faff;
  --doad-accent: #b0e9f1;
  --doad-goal: #f7cc87;
  --doad-glass: #08202bdf;
}

#doad-hud {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
  color: var(--doad-ink);
  font: 600 14px/1.22 Rajdhani, Bahnschrift, Arial, sans-serif;
  user-select: none;
}
.doad-playing #doad-hud { display: block; }
#doad-hud * { box-sizing: border-box; }
#doad-hud [hidden] { display: none !important; }
/* Keep the canvas and all scene overlays below the sibling HUD layer. */
#szene { isolation: isolate; touch-action: none; }
.doad-playing { touch-action: none; }
#doad-touch-controls { position: absolute; inset: 0; z-index: 60; pointer-events: none; }

#doad-world-transition {
  position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; gap: .2em;
  text-align: center; color: var(--doad-ink); background: radial-gradient(ellipse at 50% 53%, #153b48, #07131c 66%);
  font: 700 clamp(14px, 3vh, 22px)/1.2 Rajdhani, Bahnschrift, Arial, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; visibility: hidden; pointer-events: none; touch-action: none;
  transition: opacity .22s ease, visibility 0s .22s;
}
#doad-world-transition.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease;
}
#doad-world-transition span { color: var(--doad-accent); }
#doad-world-transition strong { font-size: 2.1em; letter-spacing: .09em; }
@media (prefers-reduced-motion: reduce) { #doad-world-transition { transition: none; } }

#doad-visor {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #194860a6, #1e49606b 10%, #28566a20 18%, transparent 24%, transparent 76%, #28566a20 82%, #1e49606b 90%, #194860a6);
}
.doad-optics-library { position: absolute; width: 0; height: 0; }
#doad-visor svg, .doad-radar-glass, .doad-panel-glass { position: absolute; inset: 0; width: 100%; height: 100%; }
#doad-visor path { vector-effect: non-scaling-stroke; }
.doad-visor-halo { stroke: #6fdef4; stroke-width: 7; opacity: .09; }
.doad-visor-lustre { stroke: #a3ecfa; stroke-width: 3; opacity: .24; }
.doad-visor-edge { stroke: #bff6ff; stroke-width: 1.2; }
#doad-visor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 57%, #e8293c4a 82%, #e8293cbf);
  opacity: 0;
}
.doad-critical #doad-visor::after { opacity: .32; animation: doad-alert 560ms ease-out; }
@keyframes doad-alert { from { opacity: .61; } to { opacity: .32; } }
#doad-damage {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse, transparent 68%, #d14f352b 87%, #df5a4670);
  transition: opacity 140ms ease-out;
}
#doad-damage.active { opacity: 1; }
#doad-critical { color: #ffbb9e; margin-top: 4px; }
.doad-critical .doad-health-field strong { color: #ffd5ba; }
@media (prefers-reduced-motion: reduce) {
  .doad-critical #doad-visor::after { animation: none; }
  #doad-damage { transition: none; }
}

#doad-radar {
  position: absolute;
  top: max(3.5vh, calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  transform: translateX(-50%);
  width: min(54vw, 920px);
  height: clamp(25px, 5.4vh, 54px);
}
#doad-radar-marks { position: absolute; inset: 0 6%; }
#doad-radar-marks i { position: absolute; transform: translateX(-50%); }
.doad-radar-enemy {
  width: 5px;
  height: 5px;
  top: 38%;
  border-radius: 1px;
  rotate: 45deg;
  background: #ffa2a4;
  box-shadow: 0 0 0 1px #ff8f9340;
  animation: doad-radar-acquire 420ms ease-out;
}
#doad-navigation {
  --navigation-color: #ffb451;
  position: absolute;
  top: 20%;
  width: 3px;
  height: 54%;
  transform: translateX(-50%);
  border-radius: 1px;
  background: var(--navigation-color);
  box-shadow: 0 0 4px #08141f;
}
#doad-navigation.doad-navigation-relic { width: 8px; height: 8px; top: 34%; transform: translateX(-50%) rotate(45deg); }
#doad-navigation.doad-navigation-shelter {
  --navigation-color: #88f5d5;
  width: 10px;
  height: 11px;
  top: 30%;
  clip-path: polygon(50% 0, 100% 18%, 89% 70%, 50% 100%, 11% 70%, 0 18%);
}
#doad-navigation[data-edge="left"], #doad-navigation[data-edge="right"] {
  width: 12px;
  height: 12px;
  top: 25%;
  transform: translateX(-50%);
  clip-path: polygon(0 35%, 54% 35%, 54% 0, 100% 50%, 54% 100%, 54% 65%, 0 65%);
}
#doad-navigation[data-edge="left"] { transform: translateX(-50%) scaleX(-1); }
@keyframes doad-radar-acquire { from { box-shadow: 0 0 0 3px #ffb3b660; } }
@media (prefers-reduced-motion: reduce) { .doad-radar-enemy { animation: none; } }

.doad-panel {
  position: absolute;
  top: max(14%, calc(env(safe-area-inset-top) + 38px));
  bottom: max(14%, calc(env(safe-area-inset-bottom) + 15px));
  width: clamp(155px, 19vw, 360px);
  display: flex;
  align-items: center;
  isolation: isolate;
  text-shadow: 0 1px 1px #071c28c7;
}
.doad-panel-glass { z-index: -1; }
.doad-goal-light { opacity: 0; }
.doad-vitals {
  left: max(0px, env(safe-area-inset-left));
}
.doad-mission {
  right: max(0px, env(safe-area-inset-right));
}
.doad-mission .doad-panel-glass { transform: scaleX(-1); }
.doad-vitals, .doad-mission { padding: 0; }
.doad-panel-content { width: 60%; margin: 0 16% 0 24%; min-width: 0; height: 78%; display: flex; flex-direction: column; justify-content: space-between; }
.doad-mission .doad-panel-content { width: 62%; margin: 0 20% 0 18%; }
.doad-field {
  display: grid;
  justify-items: start;
  gap: clamp(4px, 1vh, 12px);
  position: relative;
  flex-shrink: 0;
  transform: rotate(var(--doad-field-tilt, 0deg));
  transform-origin: center;
}
.doad-field + .doad-field {
  padding-top: clamp(8px, 2.2vh, 24px);
  background: linear-gradient(90deg, #9ae3ef50, #cbf7fdd0 15%, #b2eaf2c9 92%, #9ae3ef3b) left top / 100% 1px no-repeat;
}
.doad-label { color: #e0f5fc; font-size: clamp(12px, 1.25vw, 22px); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.doad-field strong { font-size: clamp(25px, 2.95vw, 54px); line-height: 1; font-weight: 700; letter-spacing: .032em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #061c27b3, 0 0 4px #98edfc21; }
.doad-mobility { grid-template-columns: auto auto; justify-content: space-between; gap: 4px; }
.doad-mobility > div { display: grid; gap: clamp(2px, .65vh, 7px); }
.doad-field.doad-mobility strong { font-size: clamp(16px, 2.15vw, 35px); letter-spacing: 0; }
#doad-hp { font-size: clamp(22px, 2.65vw, 48px); white-space: nowrap; letter-spacing: .015em; }
#doad-world { font-size: clamp(20px, 2.35vw, 42px); overflow-wrap: anywhere; color: #ebfcff; font-weight: 600; letter-spacing: .14em; }
#doad-world.doad-world-goldmine { font-size: clamp(13px, 2vw, 34px); letter-spacing: .11em; white-space: nowrap; }
#doad-world.doad-world-threetowers { font-size: clamp(14px, 2.15vw, 37px); letter-spacing: .12em; overflow-wrap: normal; }
.doad-armory { align-items: center; gap: 5px; }
.doad-ammo { color: var(--doad-accent); font-size: clamp(18px, 2vw, 31px); line-height: 1; display: flex; align-items: center; gap: 8px; justify-content: flex-end; width: calc(100% - 6px); }
.doad-ammo span { color: #c3e1eb; font-size: clamp(11px, 1.1vw, 19px); text-transform: uppercase; letter-spacing: .11em; }
.doad-goal, .doad-goal .doad-label { color: var(--doad-goal); }
#doad-objective { margin: 1px 0 0; font-size: clamp(12px, 1.3vw, 22px); overflow-wrap: anywhere; }

#doad-hud button {
  pointer-events: auto;
  border: 1px solid #a6ecfb69;
  border-radius: 7px;
  background: #072837e0;
  color: var(--doad-ink);
  min-height: 38px;
  padding: 5px 10px;
  font: 650 13px system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
#doad-hud button:hover:enabled { background: #204358; }
#doad-hud button:focus:not(:focus-visible) { outline: none; }
#doad-hud button:focus-visible { outline: 2px solid #ffd17b; outline-offset: 2px; }
#doad-hud button:disabled { cursor: default; }
#doad-hud kbd { background: none; color: #a5bacb; font-size: 10px; margin-left: 4px; }
.doad-actions { position: absolute; top: max(3.5vh, env(safe-area-inset-top)); right: max(8.5vw, env(safe-area-inset-right)); display: flex; gap: 0; }
#doad-hud .doad-actions button { width: 44px; height: 40px; padding: 9px; border: 0; background: transparent; border-radius: 3px; }
#doad-hud .doad-actions button + button { margin-left: 5px; }
.doad-actions::after { content: ""; position: absolute; left: 46px; top: 13px; width: 1px; height: 14px; background: #bfe5ee66; }
.doad-actions svg { width: 100%; height: 100%; }
#doad-sound[aria-pressed="true"] .doad-sound-muted, #doad-sound[aria-pressed="false"] .doad-sound-waves { display: none; }
#doad-hud #doad-weapon {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 3px 3px;
  border-color: transparent;
  background: transparent;
}
#doad-hud #doad-weapon:hover:enabled { background-color: #8ceaf51f; }
#doad-hud #doad-weapon:disabled { pointer-events: none; }
@media (pointer: coarse) {
  #doad-hud #doad-weapon { pointer-events: none; }
}
.doad-weapon-icon { width: 78%; min-width: 0; height: clamp(28px, 7.3vh, 74px); fill: #b6d5de; }
#doad-weapon-cycle { width: clamp(17px, 2vw, 28px); flex: 0 0 auto; color: var(--doad-accent); }
#doad-weapon-cycle svg { display: block; width: 100%; }
.doad-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#doad-hud progress { display: block; width: 100%; height: clamp(7px, 1.6vh, 16px); margin: 3px 0 0; accent-color: #71e4ec; border: 0; border-radius: 0; }
#doad-health {
  --doad-energy: linear-gradient(#d8fcff 0 10%, #8fe6ee 10%, #60cedb 58%, #4babbd 90%, #a1e9ef 90%);
  appearance: none;
  background: #142a36;
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
#doad-health::-webkit-progress-bar { background: linear-gradient(#5c86912e, #152c38 20%, #345867); }
#doad-health::-webkit-progress-value { background: var(--doad-energy); }
#doad-health::-moz-progress-bar { background: var(--doad-energy); }
.doad-hurt #doad-health { --doad-energy: linear-gradient(#ffe2a9 0 18%, #ffbc77 18% 48%, #dc8550 48%); }
.doad-critical #doad-health { --doad-energy: linear-gradient(#ffd4a3 0 16%, #ff9d71 16% 48%, #e75e56 48% 88%, #a74347 88%); }
#doad-hud #doad-heat { grid-column: 1 / -1; accent-color: #ffac64; }
#doad-hit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 38px; color: #ffca7d; opacity: 0; line-height: 1; }
#doad-hit.active { opacity: 1; }
#doad-reticle { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; transform: translate(-50%, -50%); color: #e7faff; background: currentColor; border-radius: 50%; outline: 1px solid #06202b84; z-index: 3; }
#doad-reticle::before, #doad-reticle::after { content: ""; position: absolute; background: currentColor; }
#doad-reticle::before { left: -8px; top: .5px; width: 5px; height: 1px; box-shadow: 13px 0 currentColor, 0 1px #051921a0, 13px 1px #051921a0; }
#doad-reticle::after { left: .5px; top: -8px; width: 1px; height: 5px; box-shadow: 0 13px currentColor, 1px 0 #051921a0, 1px 13px #051921a0; }
#doad-touch-cue { position: absolute; width: 48px; height: 48px; transform: translate(-50%, -50%); border: 1px solid #cbe7eb94; border-radius: 50%; box-shadow: inset 0 0 0 7px #082e3d33; }
#doad-touch-cue::before { content: ""; position: absolute; inset: 7px; border: 1px solid #cbe7eb81; border-radius: 50%; }

.menuConti { width: min(100%, 420px); padding: 0 16px; box-sizing: border-box; }
.doad-copyright { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); border: 0; padding: 8px 0 0 8px; background: transparent; color: inherit; font: normal 11px/1.3 "Lucida Console", Courier, monospace; cursor: pointer; }
.doad-copyright:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.doad-copyright-modal { background: #0005; }
.doad-copyright-modal .modal-body p:last-child { margin-bottom: 0; }
.doad-objective-marker { position: absolute; transform: translate(-50%, -100%); padding: 3px 7px; border: 1px solid #ffcf72; border-radius: 5px; background: #17222de8; color: #ffdc96; font: 700 11px/1.4 system-ui; white-space: nowrap; }
.doad-objective-marker[hidden] { display: none; }
#doad-resume { display: block; width: min(100%, 240px); padding: clamp(5px, 1.8dvh, 10px); border: 1px solid #666; border-radius: 25px; background: transparent; color: inherit; font: inherit; font-size: 70%; cursor: pointer; margin: 0 auto clamp(4px, 2dvh, 20px); }

@media (min-width: 1101px) and (min-height: 501px) {
  .doad-vitals .doad-panel-content { margin-inline: 20%; }
  .doad-mission .doad-panel-content { margin-inline: 24% 14%; }
}

@media (max-width: 900px), (max-height: 500px) {
  .doad-panel { width: clamp(144px, 21vw, 190px); top: max(14%, calc(env(safe-area-inset-top) + 36px)); bottom: max(10%, calc(env(safe-area-inset-bottom) + 9px)); }
  .doad-panel-content { height: 76%; }
  .doad-mission .doad-panel-content { height: 70%; }
  .doad-field { gap: 3px; }
  .doad-field + .doad-field { padding-top: 7px; }
  .doad-field strong { font-size: clamp(23px, 3.3vw, 30px); }
  #doad-hp { font-size: clamp(20px, 2.7vw, 25px); }
  .doad-label { font-size: clamp(11px, 1.55vw, 14px); letter-spacing: .025em; }
  #doad-world { font-size: clamp(18px, 2.5vw, 25px); }
  #doad-objective { font-size: 12px; }
  .doad-ammo span { font-size: 11px; }
  #doad-hud #doad-weapon { min-height: 36px; padding: 0; }
  #doad-hud kbd { display: none; }
  .doad-actions { top: max(5px, env(safe-area-inset-top)); right: max(6vw, env(safe-area-inset-right)); }
  #doad-radar { top: max(12px, env(safe-area-inset-top)); }
}
@media (max-width: 600px) {
  .doad-panel { width: 137px; }
  .doad-panel-content { width: 64%; margin-left: 24%; margin-right: 12%; }
  .doad-mission .doad-panel-content { width: 68%; margin-left: 14%; margin-right: 18%; }
  .doad-field strong { font-size: 22px; }
  #doad-hp { font-size: 19px; }
  .doad-actions { right: max(4vw, env(safe-area-inset-right)); }
}
@media (max-width: 450px) {
  #doad-radar { width: 38vw; }
  .doad-actions { top: auto; bottom: max(6px, env(safe-area-inset-bottom)); }
  .doad-panel { bottom: max(48px, calc(env(safe-area-inset-bottom) + 42px)); }
}
@media (max-height: 340px) {
  .doad-panel { top: max(13%, 35px); bottom: max(6%, env(safe-area-inset-bottom)); }
  .doad-field { gap: 2px; }
  .doad-field + .doad-field { padding-top: 2px; }
  .doad-armory { gap: 2px; }
  .doad-panel-content { height: 76%; }
  #doad-hud #doad-weapon { min-height: 26px; }
  .doad-weapon-icon { height: 23px; }
  .doad-field strong { font-size: 21px; }
  .doad-mission .doad-field { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 4px; }
  #doad-objective { grid-column: 1 / -1; }
}
#doad-cockpit[hidden], #doad-cockpit [hidden] { display: none; }
#doad-cockpit {
  position: fixed; inset: 0; z-index: 30; color: #c7faff; touch-action: none;
  font: 600 14px/1.4 system-ui, sans-serif; pointer-events: auto;
}
.doad-ring-active #doad-hud > :not(.doad-actions) { visibility: hidden; }
.doad-ring-active #doad-hud .doad-actions { z-index: 31; }
.doad-ring-active #doad-hud { z-index: 32; }
.doad-cockpit-jump {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, #d3faff 0%, #54b4e9 4%, #163052 19%, #090f2d 71%),
    #0a1632;
}
.doad-cockpit-jump::before,
.doad-cockpit-jump::after {
  content: ""; position: absolute; inset: 0;
  transform: scale(var(--jump-scale, 1));
}
.doad-cockpit-jump::before {
  background: radial-gradient(ellipse, transparent 24%, #8dcfff20 36%, #9be9ff9c 39%, #4c9adb29 42%, transparent 50%);
}
.doad-cockpit-jump::after {
  background: repeating-conic-gradient(from 7deg at 50% 50%, #e3fbffbc 0deg .4deg, transparent .9deg 8deg,
    #7ac7f275 8.3deg 8.8deg, transparent 9.4deg 17deg);
  mask-image: radial-gradient(ellipse, transparent 6%, #000 30%, #0008 49%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .doad-cockpit-jump { background: #112748; }
  .doad-cockpit-jump::before, .doad-cockpit-jump::after { display: none; }
}
.doad-cockpit-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.doad-cockpit-readout {
  position: absolute; top: max(2%, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: grid; text-align: center; min-width: 28%; width: max-content; max-width: 69%;
  padding: .28em 2.2em .52em;
  clip-path: polygon(0 0, 100% 0, 100% 73%, 94% 100%, 6% 100%, 0 73%);
  background: linear-gradient(#142b38, #051018 48%, #0e2833 97%, #5a9da9);
  text-shadow: 0 0 10px #4ce1e57a;
}
.doad-cockpit-readout strong { color: #ffdd93; font-size: clamp(15px, 4vh, 29px); letter-spacing: .14em; }
.doad-cockpit-readout span { font-size: clamp(10px, 2vh, 13px); }
.doad-cockpit-arrow {
  position: absolute; margin-top: -18px; color: #ffdf91; font-size: 26px; line-height: 1;
  text-shadow: 0 0 9px #351700, 0 0 12px #ffd180; pointer-events: none;
}
.doad-cockpit-arrow-edge { margin-top: 0; font-size: 20px; }
.doad-cockpit-sight {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 10px; border: 1px solid #b6f7f4; border-block-color: transparent;
  border-radius: 40%; background: radial-gradient(circle, #b6f7f4 0 1px, transparent 1.5px);
  filter: drop-shadow(0 0 3px #0b2839); pointer-events: none;
}
.doad-cockpit-console {
  position: absolute; inset: auto max(8%, env(safe-area-inset-right)) max(3%, env(safe-area-inset-bottom)) max(8%, env(safe-area-inset-left));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.43fr) minmax(0, .86fr);
  align-items: end; gap: clamp(4px, 1.4vw, 21px);
  pointer-events: none; font-variant-numeric: tabular-nums;
}
.doad-cockpit-instrument {
  position: relative; min-width: 0; box-sizing: border-box; height: clamp(62px, 16.5vh, 121px);
  display: flex; align-items: center; justify-content: center; gap: clamp(3px, 1vw, 14px);
  padding: 6px clamp(6px, 1.2vw, 18px);
  clip-path: polygon(9% 0, 91% 0, 100% 22%, 100% 85%, 94% 100%, 6% 100%, 0 85%, 0 22%);
  background: radial-gradient(ellipse at 50% 130%, #17404a 0%, #081c24 48%, #040c12 92%);
  box-shadow: inset 0 2px #47707a, inset 0 -2px #23434f, inset 0 0 0 5px #10232d;
}
.doad-cockpit-instrument::after {
  content: ""; position: absolute; inset: 7px 6px; opacity: .22; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 4px, #8ddbeb24 5px, transparent 6px);
}
.doad-cockpit-speed svg { width: min(49%, 150px); height: 100%; overflow: visible; }
.doad-cockpit-speed svg path { fill: none; stroke-linecap: round; }
.doad-cockpit-speed .doad-dial-shadow { stroke: #214854; stroke-width: 8px; }
.doad-cockpit-speed .doad-dial-ticks { stroke: #8fdae2; stroke-width: 7px; stroke-dasharray: 1 9; }
.doad-cockpit-speed .doad-dial-redline { stroke: #e6a77b; stroke-width: 2.5px; }
.doad-cockpit-speed .doad-dial-needle { fill: #ffd995; filter: drop-shadow(0 0 3px #f3b86e); }
.doad-cockpit-speed circle { fill: #a3dae3; }
.doad-cockpit-altitude { gap: clamp(8px, 2.1vw, 28px); }
.doad-cockpit-altitude-tape {
  position: relative; width: clamp(17px, 3vw, 33px); height: 66%;
  background: linear-gradient(90deg, #10242c 46%, transparent 46%),
    repeating-linear-gradient(to top, #7abbc3 0 1px, transparent 1px 7px);
  border-inline-end: 1px solid #4d8c94;
}
.doad-cockpit-altitude-tape::after {
  content: ""; position: absolute; left: 3%; right: -4px; bottom: var(--flight-altitude, 0%); height: 2px;
  background: #ffda94; box-shadow: 0 0 7px #f6a966;
}
.doad-cockpit-navigation {
  height: clamp(73px, 19vh, 139px); flex-direction: column; justify-content: center; gap: clamp(3px, .9vh, 9px);
  background: radial-gradient(ellipse at 50% 130%, #154654 0%, #081d27 62%, #040c12 100%);
}
.doad-cockpit-race { display: flex; justify-content: space-around; align-items: center; width: 100%; text-align: center; }
.doad-cockpit-race > div + div { border-left: 1px solid #2e5b67; padding-left: .75em; }
.doad-cockpit-ring-segments {
  display: grid; width: 88%; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: clamp(2px, .3vw, 5px);
}
.doad-cockpit-ring-segments i { height: clamp(3px, .8vh, 7px); transform: skewX(-14deg); background: #275463; }
.doad-cockpit-ring-segments [data-result="hit"] { background: #92ffcf; box-shadow: 0 0 6px #75f9ce83; }
.doad-cockpit-ring-segments [data-result="miss"] { background: #e99270; box-shadow: 0 0 5px #ed9c6a52; }
@media (max-width: 600px) {
  .doad-cockpit-console { inset-inline: max(5%, env(safe-area-inset-left)) max(5%, env(safe-area-inset-right)); }
  .doad-cockpit-race > div + div { padding-left: .38em; }
}
.doad-cockpit-console span {
  display: block; color: #a7dae6; font: 700 clamp(9px, 1.65vh, 12px)/1.15 system-ui, sans-serif; letter-spacing: .16em;
}
.doad-cockpit-console b {
  color: #e9fcff; font: 650 clamp(15px, 4.15vh, 37px)/1.06 ui-monospace, monospace; text-shadow: 0 0 12px #43c3ee8a;
  white-space: nowrap;
}
.doad-cockpit-console small { color: #afdce5; font-size: clamp(9px, 1.65vh, 12px); white-space: nowrap; }
.doad-cockpit-race small[data-metric="goal"] { display: block; }
.doad-cockpit-urgent [data-metric="time"] { color: #ffab85; }
#doad-cockpit[data-gate="hit"] [data-metric="rings"] { color: #9cffce; }
#doad-cockpit[data-gate="miss"] [data-metric="rings"] { color: #ffbc99; }
.doad-cockpit-throttle {
  --doad-throttle-length: clamp(78px, 29vh, 155px);
  --doad-throttle-track: linear-gradient(90deg, #d47f69, #468ba2 48%, #b7e3ec 49% 51%, #468ba2 52%, #79edbd);
  position: absolute; top: 53%;
  right: calc(env(safe-area-inset-right, 0px) + clamp(26px, 5vw, 80px));
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: 2px; padding: .42em .45em;
  border: 1px solid #557984; border-radius: 9px 9px 6px 6px; pointer-events: auto; touch-action: none;
  background: linear-gradient(90deg, #142a36, #0a161e 15%, #071019 85%, #142a36);
  box-shadow: 0 0 0 3px #122632, 0 0 0 4px #37616d, inset 0 0 0 3px #0e2430, 3px 8px 13px #050e16b3;
}
.doad-cockpit-throttle > span:first-child {
  font-size: clamp(9px, 1.65vh, 12px); letter-spacing: .16em; color: #d8f8ff;
}
.doad-cockpit-throttle small { font-size: clamp(8px, 1.5vh, 11px); letter-spacing: .07em; color: #afdce5; }
.doad-cockpit-throttle-axis { position: relative; width: 44px; height: var(--doad-throttle-length); }
.doad-cockpit-throttle input {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  appearance: none; -webkit-appearance: none; width: var(--doad-throttle-length); height: 44px;
  padding: 0; margin: 0; background: transparent; touch-action: none; cursor: ns-resize;
}
.doad-cockpit-throttle input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 5px; background: var(--doad-throttle-track);
}
.doad-cockpit-throttle input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 21px; height: 23px; margin-top: -9px; border: 1px solid #d7ffff;
  border-radius: 4px; background: repeating-linear-gradient(0deg, #255267 0 3px, #a7ecf3 3px 5px);
}
.doad-cockpit-throttle input::-moz-range-track {
  height: 6px; border-radius: 5px; background: var(--doad-throttle-track);
}
.doad-cockpit-throttle input::-moz-range-thumb {
  width: 20px; height: 22px; border: 1px solid #d7ffff; border-radius: 4px;
  background: repeating-linear-gradient(0deg, #255267 0 3px, #a7ecf3 3px 5px);
}
.doad-cockpit-throttle[data-mode="brake"] small:last-child { color: #ffab85; }
.doad-cockpit-throttle[data-mode="fast"] small:first-of-type { color: #9cffce; }
.doad-cockpit-stick {
  position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%);
  border: 1px solid #b0f6fd; background: #132d4248; border-radius: 50%; pointer-events: none;
}
.doad-cockpit-result {
  position: absolute; inset: max(64px, 16vh) auto auto 50%; transform: translateX(-50%);
  box-sizing: border-box; width: min(540px, 88vw); padding: clamp(.75em, 3vh, 2em) 1em;
  text-align: center; border-block: 2px solid #81dcecc9; color: #d7f5ff;
  background: linear-gradient(150deg, #173849f7, #081824fa); box-shadow: 0 0 48px #061522c9;
}
.doad-cockpit-result h2 { margin: 0; color: #ffdd93; font-size: clamp(18px, 5vh, 32px); letter-spacing: .1em; }
.doad-cockpit-result p { margin: .35em 0 .8em; }
.doad-cockpit-result div { display: flex; justify-content: center; flex-wrap: wrap; gap: .5em; }
.doad-cockpit-result button {
  min-height: 40px; padding: .35em .75em; color: #e9fcff; font: inherit; cursor: pointer;
  border: 1px solid #6cbcca; background: #153d53;
}
.doad-cockpit-result button:hover, .doad-cockpit-result button:focus-visible { background: #235a72; }
.doad-cockpit-seed { margin-top: .45em; }
.doad-cockpit-seed summary { width: max-content; margin-inline: auto; cursor: pointer; color: #adf0f3; }
.doad-cockpit-seed form { display: flex; justify-content: center; gap: .5em; margin-top: .35em; }
.doad-cockpit-seed input {
  min-width: 0; width: 11em; box-sizing: border-box; padding: .35em .6em; color: #e9fcff;
  font: inherit; font-size: max(16px, 1em); border: 1px solid #6cbcca; background: #0b2738;
}
.doad-cockpit-seed button { min-height: 34px; }
.doad-cockpit-seed small { display: block; margin-top: .25em; color: #bbebef; }
@media (max-height: 430px) {
  .doad-cockpit-result:has(.doad-cockpit-seed[open]) { inset-block-start: max(43px, 11vh); padding-block: .45em; }
}