* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #090b0f;
  color: #fff;
  font-family:
    Inter, Impact, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  user-select: none;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: default;
}

.hud {
  position: fixed;
  z-index: 3;
  display: flex;
  gap: 18px;
  pointer-events: none;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.76);
}

.hud-left {
  top: max(26px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  align-items: flex-start;
}

.hud-right {
  top: max(28px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right));
  align-items: flex-start;
}

.wing-badge {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 2px solid rgba(172, 224, 255, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(23, 39, 48, 0.94), rgba(6, 11, 16, 0.92));
  box-shadow:
    inset 0 0 28px rgba(133, 205, 255, 0.16),
    0 10px 28px rgba(0, 0, 0, 0.42);
}

.wing-badge span {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.score-block span,
.combo-block span,
.time-block span,
.targets-block span,
.weapon span,
.boost span {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
}

.score-block strong,
.time-block strong,
.targets-block strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

.stars {
  margin-top: 8px;
  color: #ffc84a;
  font-size: 27px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.combo-block {
  position: absolute;
  left: 128px;
  top: 128px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}

.combo-block strong {
  color: #ffe44e;
  font-size: 31px;
  line-height: 1;
}

.pause {
  display: flex;
  width: 68px;
  height: 68px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  background: rgba(9, 12, 18, 0.48);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.06);
  pointer-events: auto;
}

.pause span {
  width: 8px;
  height: 31px;
  border-radius: 2px;
  background: #fff;
}

.targets-block {
  position: absolute;
  top: 92px;
  right: 0;
  min-width: 126px;
  text-align: left;
}

.targets-block strong {
  font-size: clamp(30px, 3.2vw, 46px);
}

.reticle {
  position: fixed;
  left: 50%;
  top: 62%;
  z-index: 3;
  width: 86px;
  height: 62px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.86;
  will-change: left, top;
}

.reticle i {
  position: absolute;
}

.reticle-ring {
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(196, 245, 255, 0.88);
  border-radius: 50%;
  box-shadow:
    0 0 9px rgba(98, 229, 255, 0.34),
    inset 0 0 8px rgba(98, 229, 255, 0.18);
  transform: translate(-50%, -50%);
}

.reticle-dot {
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(134, 235, 255, 0.76);
  transform: translate(-50%, -50%);
}

.reticle-h,
.reticle-v {
  left: 50%;
  top: 50%;
  background: rgba(196, 245, 255, 0.74);
  box-shadow: 0 0 6px rgba(98, 229, 255, 0.34);
  transform: translate(-50%, -50%);
}

.reticle-h {
  width: 76px;
  height: 1px;
}

.reticle-v {
  width: 1px;
  height: 40px;
}

.reticle-wing {
  top: 50%;
  width: 18px;
  height: 9px;
  border-top: 2px solid rgba(196, 245, 255, 0.82);
  transform: translateY(-50%);
}

.reticle-wing-left {
  left: 2px;
  border-left: 2px solid rgba(196, 245, 255, 0.82);
}

.reticle-wing-right {
  right: 2px;
  border-right: 2px solid rgba(196, 245, 255, 0.82);
}

.roll-controls {
  display: grid;
  width: 116px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
}

.roll-controls button {
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(131, 229, 255, 0.42);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(78, 234, 255, 0.24), rgba(7, 19, 26, 0.54)),
    rgba(0, 0, 0, 0.38);
  box-shadow:
    inset 0 0 10px rgba(78, 234, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.24);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.roll-controls button:active {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(70, 217, 189, 0.54);
}

.speed-bars {
  display: grid;
  width: 34px;
  margin-top: 9px;
  gap: 5px;
}

.speed-bars i {
  display: block;
  height: 10px;
  background: rgba(62, 224, 190, 0.25);
}

.speed-bars i.on {
  background: #46d9bd;
  box-shadow: 0 0 10px rgba(70, 217, 189, 0.62);
}

.settings-toggle {
  position: fixed;
  top: max(132px, calc(env(safe-area-inset-top) + 110px));
  right: max(26px, env(safe-area-inset-right));
  z-index: 7;
  width: 54px;
  height: 38px;
  border: 1px solid rgba(131, 229, 255, 0.42);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(180deg, rgba(78, 234, 255, 0.2), rgba(7, 19, 26, 0.58)),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 10px rgba(78, 234, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.32);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  pointer-events: auto;
}

.settings-toggle.active {
  border-color: rgba(103, 230, 255, 0.74);
  box-shadow:
    inset 0 0 14px rgba(78, 234, 255, 0.22),
    0 0 18px rgba(78, 234, 255, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.32);
}

.scene-toggle {
  position: fixed;
  top: max(132px, calc(env(safe-area-inset-top) + 110px));
  right: max(88px, calc(env(safe-area-inset-right) + 62px));
  z-index: 7;
  width: 66px;
  height: 38px;
  border: 1px solid rgba(255, 199, 92, 0.48);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 184, 70, 0.24), rgba(26, 16, 7, 0.58)),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 10px rgba(255, 184, 70, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.32);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  pointer-events: auto;
}

.flight-tune {
  position: fixed;
  top: max(180px, calc(env(safe-area-inset-top) + 158px));
  right: max(26px, env(safe-area-inset-right));
  z-index: 4;
  display: none;
  width: 156px;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(5, 9, 14, 0.34);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.flight-tune.open {
  display: grid;
}

.flight-tune label {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
}

.flight-tune span {
  color: rgba(255, 255, 255, 0.76);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}

.flight-tune input {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #67e6ff;
}

.controls {
  position: fixed;
  inset: auto 0 max(28px, env(safe-area-inset-bottom)) 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(34px, env(safe-area-inset-right)) 0 max(38px, env(safe-area-inset-left));
  pointer-events: none;
}

.left-flight-controls {
  order: 1;
  display: grid;
  gap: 12px;
  align-items: end;
  justify-items: start;
  pointer-events: auto;
}

.right-flight-controls {
  order: 4;
  display: grid;
  align-items: flex-end;
  justify-items: end;
  gap: 10px;
  pointer-events: auto;
}

.right-top-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.speed-panel {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.speed-readout {
  width: 116px;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.speed-readout span,
.speed-readout small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 0;
}

.speed-readout strong {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 25px;
  line-height: 0.95;
}

.speed-readout em {
  display: none;
}

.speed-readout .speed-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 108px;
  gap: 3px;
  margin-top: 7px;
}

.speed-readout .speed-bars i {
  height: 7px;
}

.stick,
.throttle,
.boost,
.weapon {
  pointer-events: auto;
}

.throttle {
  --throttle-y: 92px;
  --throttle-fill: 32%;
  --throttle-angle: 0deg;
  display: grid;
  width: clamp(58px, 6vw, 78px);
  height: clamp(128px, 14vw, 178px);
  align-content: end;
  justify-items: center;
  gap: 8px;
  touch-action: none;
}

.throttle span {
  color: rgba(255, 255, 255, 0.78);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.throttle-slot {
  position: relative;
  width: clamp(38px, 4.5vw, 52px);
  height: clamp(96px, 11vw, 138px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.54)),
    rgba(3, 8, 12, 0.68);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.08),
    0 13px 32px rgba(0, 0, 0, 0.38);
}

.throttle.active .throttle-slot {
  border-color: rgba(103, 230, 255, 0.56);
  box-shadow:
    inset 0 0 28px rgba(103, 230, 255, 0.12),
    0 0 22px rgba(103, 230, 255, 0.18),
    0 13px 32px rgba(0, 0, 0, 0.38);
}

.throttle-fill {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 12px;
  height: var(--throttle-fill);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(103, 230, 255, 0.92), rgba(70, 217, 189, 0.24));
  box-shadow: 0 0 12px rgba(103, 230, 255, 0.38);
  transform: translateX(-50%);
}

.throttle-knob {
  position: absolute;
  left: 50%;
  top: var(--throttle-y);
  width: 42px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  background: radial-gradient(circle at 42% 30%, #f0f3f2, #4e575e 58%, #14181d);
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) rotate(var(--throttle-angle));
}

.stick {
  position: relative;
  --joy-x: 0px;
  --joy-y: 0px;
  width: clamp(142px, 16vw, 218px);
  height: clamp(142px, 16vw, 218px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  touch-action: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.6));
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.08),
    0 13px 32px rgba(0, 0, 0, 0.38);
}

.stick::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(103, 230, 255, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(103, 230, 255, 0.06);
}

.stick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.stick.active {
  border-color: rgba(83, 242, 255, 0.48);
  box-shadow:
    inset 0 0 34px rgba(83, 242, 255, 0.14),
    0 0 22px rgba(83, 242, 255, 0.18),
    0 13px 32px rgba(0, 0, 0, 0.38);
}

.stick-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 41%;
  height: 41%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 30%, #cfd3d5, #34383d 62%, #111319);
  transform: translate(calc(-50% + var(--joy-x)), calc(-50% + var(--joy-y)));
  transition: transform 120ms ease;
  box-shadow: inset 0 9px 18px rgba(255, 255, 255, 0.16);
  z-index: 2;
}

.stick.active .stick-core {
  transition: none;
}

.pitch-stick {
  --joy-x: 0px;
  --joy-y: 0px;
  width: clamp(142px, 16vw, 218px);
  height: clamp(142px, 16vw, 218px);
  border-radius: 50%;
}

.pitch-stick::before {
  inset: 18%;
  border-radius: 50%;
}

.pitch-stick::after {
  width: 58%;
  height: 58%;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.pitch-stick .stick-core {
  width: 41%;
  height: 41%;
  border-radius: 50%;
}

.turn-stick {
  order: initial;
}

.stick-arrow {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.86;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.stick-arrow-up {
  left: 50%;
  top: 10%;
  border-width: 0 12px 14px 12px;
  border-color: transparent transparent rgba(255, 255, 255, 0.88) transparent;
  transform: translateX(-50%);
}

.stick-arrow-down {
  left: 50%;
  bottom: 10%;
  border-width: 14px 12px 0 12px;
  border-color: rgba(255, 255, 255, 0.88) transparent transparent transparent;
  transform: translateX(-50%);
}

.stick-arrow-left {
  left: 10%;
  top: 50%;
  border-width: 12px 14px 12px 0;
  border-color: transparent rgba(255, 255, 255, 0.88) transparent transparent;
  transform: translateY(-50%);
}

.stick-arrow-right {
  right: 10%;
  top: 50%;
  border-width: 12px 0 12px 14px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.88);
  transform: translateY(-50%);
}

.boost.active,
.weapon.active {
  filter: drop-shadow(0 0 11px rgba(73, 235, 255, 0.75));
}

.boost {
  width: clamp(62px, 6.4vw, 84px);
  height: clamp(62px, 6.4vw, 84px);
  border: 2px solid rgba(83, 242, 255, 0.68);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle, rgba(34, 255, 249, 0.24), rgba(6, 20, 25, 0.78) 56%),
    rgba(0, 0, 0, 0.62);
  box-shadow:
    0 0 20px rgba(57, 220, 255, 0.28),
    inset 0 0 20px rgba(78, 234, 255, 0.22);
}

.boost i {
  display: block;
  width: 27px;
  height: 25px;
  margin: 0 auto 4px;
  background:
    linear-gradient(135deg, transparent 35%, #5fe8ef 36% 64%, transparent 65%) 0 0 / 18px 18px,
    linear-gradient(135deg, transparent 35%, #5fe8ef 36% 64%, transparent 65%) 8px 8px / 18px 18px;
}

.boost span,
.weapon span {
  font-size: 11px;
}

.weapon-stack {
  display: flex;
  gap: 9px;
  align-items: flex-end;
}

.weapon {
  position: relative;
  width: clamp(62px, 6.4vw, 84px);
  height: clamp(62px, 6.4vw, 84px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.16), transparent 32%),
    rgba(2, 5, 9, 0.66);
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.34);
}

.weapon b {
  position: absolute;
  left: 50%;
  bottom: 8px;
  font-size: 13px;
  transform: translateX(-50%);
}

.missile-icon,
.gun-icon {
  display: block;
  width: 31px;
  height: 31px;
  margin: 8px auto 2px;
  opacity: 0.92;
}

.missile-icon {
  background:
    linear-gradient(45deg, transparent 39%, #fff 40% 60%, transparent 61%),
    linear-gradient(-20deg, transparent 30%, #fff 31% 48%, transparent 49%);
}

.gun-icon {
  background:
    repeating-linear-gradient(90deg, #fff 0 5px, transparent 5px 9px),
    linear-gradient(35deg, transparent 38%, #fff 39% 57%, transparent 58%);
}

.toast {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 6;
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(34px, 6vw, 84px);
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(255, 159, 47, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translate(-50%, -20px) scale(0.88);
  pointer-events: none;
}

.toast.show {
  animation: toast-pop 820ms ease-out;
}

@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.72);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(0.9);
  }
}

@media (max-width: 760px) {
  .wing-badge {
    width: 62px;
    height: 62px;
  }

  .wing-badge span {
    font-size: 18px;
  }

  .score-block strong,
  .time-block strong,
  .targets-block strong {
    font-size: 28px;
  }

  .combo-block {
    left: 84px;
    top: 92px;
  }

  .stars {
    font-size: 18px;
  }

  .reticle {
    width: 46px;
    height: 46px;
  }

  .settings-toggle {
    top: max(82px, calc(env(safe-area-inset-top) + 70px));
    right: max(12px, env(safe-area-inset-right));
    width: 50px;
    height: 34px;
    font-size: 15px;
  }

  .scene-toggle {
    top: max(82px, calc(env(safe-area-inset-top) + 70px));
    right: max(68px, calc(env(safe-area-inset-right) + 56px));
    width: 54px;
    height: 34px;
    font-size: 14px;
  }

  .flight-tune {
    top: max(122px, calc(env(safe-area-inset-top) + 108px));
    right: max(12px, env(safe-area-inset-right));
    width: 136px;
    transform: scale(0.88);
    transform-origin: top right;
  }

  .controls {
    padding-inline: 14px;
    gap: 8px;
  }

  .left-flight-controls,
  .right-flight-controls {
    gap: 8px;
  }

  .right-top-controls {
    display: grid;
    justify-items: end;
    gap: 6px;
  }

  .speed-panel {
    gap: 6px;
  }

  .roll-controls {
    width: 108px;
  }

  .speed-readout {
    width: 72px;
  }

  .speed-readout strong {
    font-size: 18px;
  }

  .speed-readout .speed-bars {
    width: 70px;
  }

  .throttle {
    width: 42px;
    height: 112px;
  }

  .throttle span {
    font-size: 11px;
  }

  .throttle-slot {
    width: 32px;
    height: 88px;
  }

  .throttle-knob {
    width: 35px;
    height: 24px;
  }

  .pitch-stick {
    width: 118px;
    height: 118px;
  }

  .turn-stick {
    width: 118px;
    height: 118px;
  }

  .boost,
  .weapon {
    width: 50px;
    height: 50px;
  }

  .boost i {
    width: 24px;
    height: 22px;
    margin-bottom: 3px;
  }

  .boost span {
    font-size: 9px;
  }

  .weapon-stack {
    display: flex;
    gap: 6px;
  }

  .weapon span {
    font-size: 8px;
  }

  .weapon b {
    bottom: 5px;
    font-size: 10px;
  }

  .missile-icon,
  .gun-icon {
    width: 22px;
    height: 22px;
    margin-top: 6px;
  }
}