@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800;900&family=Share+Tech+Mono&display=swap");
:root {
  color-scheme: dark;
  --cyan: #a9ffea;
  --orange: #ff733d;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #120e15;
  color: #f6e6cf;
  font:
    12px "Share Tech Mono",
    monospace;
  overflow: hidden;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 10px;
}
button:hover {
  color: var(--cyan);
}
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
#game {
  height: 100dvh;
  position: relative;
  overflow: hidden;
}
#view,
canvas,
.scan {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
canvas {
  image-rendering: auto;
}
.scan {
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 3px, #00000008 3px 4px);
  z-index: 2;
  box-shadow: inset 0 0 130px #10071155;
}
header {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px;
  z-index: 5;
  background: linear-gradient(#18141d80, transparent);
}
.brand {
  color: #fff;
  text-decoration: none;
  font:
    900 26px "Barlow Condensed",
    sans-serif;
  letter-spacing: -1px;
}
.brand span {
  color: var(--orange);
}
header button {
  font-size: 19px;
  width: 36px;
  height: 36px;
  padding: 5px;
  text-shadow: 0 2px 4px #000;
}
.score {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-shadow: 0 2px 5px #17131a;
}
.score span {
  color: #d7cfcc;
  font-size: 12px;
}
.score strong {
  font-size: 25px;
  font-weight: 400;
  color: var(--cyan);
  min-width: 40px;
  text-align: right;
}
.telemetry {
  position: absolute;
  top: 96px;
  left: 28px;
  z-index: 3;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.8s,
    transform 0.8s;
  text-shadow: 0 2px 8px #251226;
}
.telemetry.visible {
  opacity: 1;
  transform: translateY(0);
}
h2 {
  font: 800 23px "Barlow Condensed";
  letter-spacing: 1.5px;
  margin: 0;
}
.telemetry p {
  font-size: 9px;
  letter-spacing: 2px;
  margin: 6px 0;
  color: #f2c8a7;
}
#notice {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  font-size: 12px;
  color: #ffe2a4;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
  text-shadow: 0 2px 7px #000;
}
#notice.visible {
  opacity: 1;
}
#aim {
  position: absolute;
  left: calc(50% - 10px);
  top: 46%;
  font-size: 23px;
  color: #cfffee66;
}
.dashboard {
  position: absolute;
  bottom: 22px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 2px 3px #10212b);
  color: var(--cyan);
}
.dashboard:before {
  content: "";
  position: fixed;
  bottom: -22px;
  left: -25px;
  right: -25px;
  height: 125px;
  background: linear-gradient(transparent, #0e152052);
  z-index: -1;
}
.speedbox {
  position: relative;
  width: 205px;
  height: 97px;
}
.speedbox svg {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 205px;
  height: 50px;
  opacity: 0.85;
}
.gaugebase,
#gauge {
  fill: none;
  stroke-width: 8;
  stroke: #244649;
  stroke-dasharray: 4 3;
}
#gauge {
  stroke: var(--cyan);
  stroke-dasharray: 0 400;
}
.speedline {
  position: absolute;
  bottom: 0;
  left: 15px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.speedline strong {
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -3px;
  line-height: 1;
}
.speedline span {
  font-size: 10px;
  color: #bad1ca;
}
#traction {
  position: absolute;
  left: 16px;
  bottom: -13px;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #ffd6a4;
}
.condition {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  text-align: center;
  width: 90px;
  font-size: 9px;
  color: #d7d6cd;
  letter-spacing: 1px;
}
#hullbar {
  height: 3px;
  background: #fce8d333;
  margin-bottom: 10px;
}
#hull {
  display: block;
  height: 100%;
  width: 100%;
  background: #c1dbcb;
  transition: width 0.25s;
}
#hullbar.critical #hull {
  background: #ff7b50;
  animation: pulse 0.7s infinite alternate;
}
.jetbox {
  width: 155px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.jetbox.active {
  opacity: 1;
}
.pressure {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}
.pressure strong {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -1px;
}
.pressure span {
  font-size: 9px;
  color: #bad1ca;
}
.bar {
  height: 5px;
  background: #9ef9e522;
  margin: 9px 0 6px;
}
.bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #9ef9e5 0 4px,
    transparent 4px 7px
  );
}
.jetlabels {
  display: flex;
  justify-content: space-between;
  height: 10px;
  font-size: 8px;
  letter-spacing: 1px;
}
#altitude {
  opacity: 0;
}
section {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #120e1a77, transparent, #120e1a44);
  text-align: center;
}
section[hidden] {
  display: none;
}
h1 {
  font:
    900 clamp(76px, 10vw, 150px)/0.76 "Barlow Condensed",
    Impact,
    sans-serif;
  font-style: italic;
  letter-spacing: -2px;
  margin: 10px 0 35px;
  text-shadow: 5px 6px 0 #6c2c32;
}
h1 span {
  display: block;
  color: var(--orange);
  font-size: 0.6em;
  letter-spacing: 24px;
  margin-top: 17px;
  margin-left: 25px;
}
section button {
  display: block;
  background: var(--orange);
  color: #21151b;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 16px 49px;
  margin: 24px auto 13px;
}
section button:hover {
  background: #ff9b69;
  color: #21151b;
}
section small {
  font-size: 9px;
  letter-spacing: 0.6px;
  color: #f2d4b5;
  text-shadow: 0 2px 3px #000;
}
section p {
  font-size: 12px;
  letter-spacing: 2px;
}
.startgroup {
  margin-top: 12px;
}
#game:not(.playing) .dashboard,
#game:not(.playing) .score,
#game:not(.playing) #pause,
#game:not(.playing) #aim,
#game:not(.playing) #touch {
  visibility: hidden;
}
#touch {
  display: none;
}
@keyframes pulse {
  to {
    opacity: 0.35;
  }
}
@media (max-width: 700px) {
  header {
    padding: 13px 16px;
    gap: 9px;
  }
  .telemetry {
    left: 19px;
    top: 76px;
  }
  h2 {
    font-size: 20px;
  }
  .dashboard {
    left: 14px;
    right: 14px;
    bottom: 24px;
  }
  .speedbox {
    width: 160px;
    height: 79px;
  }
  .speedbox svg {
    width: 160px;
    bottom: 24px;
  }
  .speedline {
    left: 10px;
  }
  .speedline strong {
    font-size: 41px;
  }
  .speedline span {
    font-size: 8px;
  }
  .jetbox {
    width: 125px;
  }
  .pressure strong {
    font-size: 22px;
  }
  .condition {
    width: 65px;
    font-size: 8px;
  }
  .score strong {
    font-size: 22px;
  }
  .score span {
    font-size: 10px;
  }
  #notice {
    font-size: 10px;
  }
  .dashboard:before {
    left: -14px;
    right: -14px;
  }
  section small {
    font-size: 8px;
  }
}
@media (pointer: coarse) {
  #touch {
    display: flex;
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    gap: 7px;
    z-index: 5;
    touch-action: none;
    justify-content: space-between;
  }
  #touch button {
    background: #13262e77;
    border: 1px solid #b8e9d944;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    font-size: 11px;
  }
  .dashboard {
    bottom: 78px;
  }
}
@media (max-height: 470px) {
  h1 {
    font-size: 66px;
    margin: 0 0 16px;
  }
  h1 span {
    margin-top: 10px;
  }
  .startgroup {
    margin-top: 0;
  }
  section button {
    margin-top: 12px;
  }
  .telemetry {
    top: 65px;
  }
  .dashboard {
    bottom: 15px;
  }
  .speedbox {
    height: 65px;
  }
  .speedline strong {
    font-size: 35px;
  }
  .speedbox svg {
    width: 145px;
    bottom: 19px;
  }
}

#game.gameover #touch {
  z-index: 7;
}

header .brand {
  order: 4;
  font-size: 29px;
  line-height: 0.8;
  letter-spacing: -0.6px;
  font-style: italic;
  text-align: center;
  width: 130px;
  margin-left: 10px;
  text-shadow: 2px 2px 0 #612c32;
}
header .brand span {
  display: block;
  font-size: 16px;
  letter-spacing: 7px;
  margin: 6px -7px 0 0;
  color: var(--orange);
}
header .score {
  order: 1;
  margin-left: 0;
  margin-right: auto;
}
#sound {
  order: 2;
}
#pause {
  order: 3;
}
.speedbox {
  height: 100px;
}
.speedbox svg {
  top: 0;
  bottom: auto;
  height: 39px;
  width: 205px;
  overflow: visible;
}
.speedline {
  bottom: 2px;
}
.speedline strong,
.pressure strong {
  color: #c6ffea;
  text-shadow:
    0 -1px 0 #f3fff8,
    0 1px 1px #155e58,
    0 0 4px #86ffcf99,
    0 0 12px #4dddb655,
    0 0 24px #31b69922;
}
#gauge {
  stroke: url(#lcd);
  filter: drop-shadow(0 0 3px #75ffcfaa);
}
.gaugebase {
  stroke: #183d3c;
  opacity: 0.75;
}
.bar {
  height: 6px;
  background: #0b303a77;
  border-bottom: 1px solid #9dedd333;
}
.bar i {
  background: linear-gradient(#eafff5, #94ffd7 40%, #2bac94);
  mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
  filter: drop-shadow(0 0 3px #6dffc9);
}
@media (max-width: 700px) {
  header .brand {
    width: 105px;
    font-size: 24px;
    margin-left: 0;
  }
  header .brand span {
    font-size: 13px;
    letter-spacing: 6px;
  }
  .speedbox {
    height: 87px;
  }
  .speedbox svg {
    width: 160px;
    height: 32px;
  }
  .speedline {
    bottom: 1px;
  }
}

.boss-meter {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 48vw);
  text-align: center;
  color: #ffdda4;
  font-size: 11px;
  letter-spacing: 2px;
  pointer-events: none;
  text-shadow: 0 0 10px #f64;
}
.boss-meter i {
  display: block;
  height: 4px;
  margin-top: 9px;
  background: #432d35;
  box-shadow: 0 0 14px #ed755344;
  transform: skewX(-20deg);
}
.boss-meter b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ef6945, #ffe8ac);
  box-shadow: 0 0 10px #ff805a;
  transition: width 0.2s;
}
.boss-meter.enraged b {
  background: #ff4f45;
}
.boss-meter[hidden] {
  display: none;
}

/* Contextual driving feedback; the centre stays open outside combat. */
#play-feedback{position:absolute;inset:0;pointer-events:none;z-index:4;font-size:11px;text-shadow:0 1px 5px #100e19}
#play-feedback[hidden],#play-feedback [hidden]{display:none!important}
#target-lock{position:absolute;width:90px;height:64px;transform:translate(-50%,-50%);border:1px solid #9effd577;border-radius:12px;color:#baffdf;box-shadow:inset 0 0 12px #80ffc012}
#target-lock span{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:1px}
#target-lock i{position:absolute;bottom:-8px;left:12%;width:76%;height:3px;background:#132b32}#target-lock b{display:block;height:100%;background:#a4ffda}.shielded{color:#a8cdff!important;border-color:#8abfff!important}
#hit-confirm{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);color:#fff0b5;font-size:24px;letter-spacing:2px}
#damage-edge{position:absolute;inset:0;box-shadow:inset 0 0 90px #f43d22;opacity:0}
#contract{position:absolute;bottom:145px;left:26px;max-width:210px;color:#e5d6bc;letter-spacing:1px}#contract small{display:block;font-size:8px;color:#b5a99a;margin-bottom:5px}#contract span{display:block}#contract i{display:block;width:130px;height:2px;background:#382f31;margin-top:7px}#contract b{display:block;height:100%;background:#dfbc83}
#skill-chain{position:absolute;top:67px;left:26px;width:145px;color:#a8ffdd}#skill-chain strong{font-size:25px;margin-right:8px}#skill-chain span{font-size:9px}#skill-chain i{display:block;height:2px;background:#a8ffdd}
#navigation{position:absolute;top:65px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#c8d4c4;font-size:9px;letter-spacing:1px}
#threats b{position:absolute;transform:translate(-50%,-50%);color:#ffb98e;font-size:10px;letter-spacing:1px;background:#241a1966;padding:5px 7px;border-radius:20px}
#discovery-beacon{position:absolute;transform:translate(-50%,-50%);font-size:30px;color:#ead49c;opacity:.8}#discovery-beacon small{display:block;font-size:9px;text-align:center}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px 25px;width:min(440px,85vw);margin-top:24px;text-align:left}.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.settings input[type=range]{width:95px;accent-color:#a8ffdd}.settings input[type=checkbox]{accent-color:#a8ffdd}.settings select{background:#162829;border:1px solid #45615e;color:#baffdf;padding:5px;font:inherit;font-size:10px}
#personal-best{color:#baa98b;margin-top:12px;font-size:10px;letter-spacing:2px}.reduced-motion .scan{display:none}
@media(max-width:700px){#contract{left:14px;bottom:165px;font-size:9px}#navigation{top:65px;font-size:8px}#skill-chain{left:14px;top:64px}.settings{gap:14px;grid-template-columns:1fr}#target-lock{width:64px;height:48px}}

#speed.overdrive {color:#ff6450;text-shadow:0 0 5px #ff3215,0 0 18px #f52b16;animation:overdrive-led .8s ease-in-out infinite alternate;font-size:clamp(32px,4vw,58px)}
#speed.overdrive.steady {animation:none}
@keyframes overdrive-led {to {color:#ffd1a4;text-shadow:0 0 9px #ff6a23,0 0 23px #ff3718}}
@media(prefers-reduced-motion:reduce){#speed.overdrive{animation:none}}

#music-mode {position:absolute;right:255px;top:24px;font:10px monospace;letter-spacing:1px;width:auto;padding:6px 8px;color:#b8eddf;background:#19212755;border:1px solid #a8decb40;border-radius:3px;}
#music-mode[aria-pressed="true"] {color:#ffb17b;border-color:#ff9a7055}
@media(max-width:600px){#music-mode{right:160px;top:15px;font-size:8px;padding:5px;letter-spacing:0}}