/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .visible {
    visibility: visible;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .table {
    display: table;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
      var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
      var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
:root {
  --cyan: #6ef1ff;
  --gold: #ffd76e;
  --ink: #f2f7ff;
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  color: var(--ink);
  background: #030711;
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    sans-serif;
  overflow: hidden;
}
button {
  font: inherit;
}
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.game-shell {
  isolation: isolate;
  background: #030711;
  width: 100vw;
  height: 100svh;
  position: relative;
  overflow: hidden;
}
.three-stage {
  background: radial-gradient(circle at 50% 35%, #10243a, #030711 72%);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.three-canvas {
  cursor: grab;
  touch-action: none;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}
.three-canvas:active {
  cursor: grabbing;
}
.three-canvas.locked {
  cursor: none;
}
.game-shell:after {
  content: "";
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: normal;
  background:
    radial-gradient(circle at 50% 47%, #0000 43%, #00000080 100%),
    repeating-linear-gradient(0deg, #0000 0 3px, #91caff06 3px 4px);
  position: absolute;
  inset: 0;
}
.modal-layer {
  z-index: 100;
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  background: radial-gradient(circle at 50% 42%, #10274275, #02040bd1);
  place-items: center;
  padding: 22px;
  animation: 0.32s fade;
  display: grid;
  position: absolute;
  inset: 0;
}
.intro-card,
.result-card {
  background:
    radial-gradient(circle at 84% 8%, #6de9ff29, #0000 34%),
    linear-gradient(145deg, #0f1c33fa, #040914fa);
  border: 1px solid #69ebff4d;
  border-radius: 25px;
  width: min(590px, 94vw);
  padding: 44px 48px 37px;
  animation: 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) card;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 42px 120px #000000ad,
    inset 0 1px #ffffff12;
}
.intro-card:after,
.result-card:after {
  content: "";
  pointer-events: none;
  opacity: 0.17;
  background:
    linear-gradient(120deg, #0000 25%, #67ebff38 25.25%, #0000 25.5%),
    linear-gradient(30deg, #0000 64%, #ffd76e33 64.25%, #0000 64.5%);
  position: absolute;
  inset: 0;
}
.intro-kicker {
  z-index: 1;
  color: #75efff;
  letter-spacing: 0.22em;
  font-size: 8px;
  font-weight: 1000;
  position: relative;
}
.intro-card h1 {
  z-index: 1;
  letter-spacing: -0.068em;
  max-width: 470px;
  margin: 24px 0 16px;
  font-size: clamp(40px, 7vw, 66px);
  line-height: 0.87;
  position: relative;
}
.intro-card h1 em {
  color: var(--cyan);
  text-shadow: 0 0 36px #5ceeff40;
  font-style: normal;
}
.intro-card > p {
  z-index: 1;
  color: #a0aec2;
  max-width: 440px;
  margin: 0;
  font-size: 11px;
  line-height: 1.72;
  position: relative;
}
.hero-emblem {
  filter: drop-shadow(0 0 20px #6aecff61);
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  width: 83px;
  height: 104px;
  display: grid;
  position: absolute;
  top: 37px;
  right: 42px;
}
.hero-emblem b {
  clip-path: polygon(50% 0, 95% 18%, 88% 78%, 50% 100%, 12% 78%, 5% 18%);
  color: #092038;
  background: linear-gradient(145deg, #f5ffff, #65e8f4 45%, #1b5f83);
  place-items: center;
  height: 64px;
  font-size: 23px;
  display: grid;
}
.hero-emblem i {
  clip-path: polygon(100% 30%, 0 0, 48% 48%, 0 100%, 100% 72%);
  background: linear-gradient(90deg, #63eeff0d, #63eeff94);
  height: 47px;
}
.hero-emblem i:last-child {
  transform: scaleX(-1);
}
.intro-stats {
  z-index: 1;
  border-top: 1px solid #82a4cd29;
  border-bottom: 1px solid #82a4cd29;
  grid-template-columns: repeat(3, 1fr);
  margin: 26px 0 23px;
  display: grid;
  position: relative;
}
.intro-stats span {
  color: #71829b;
  letter-spacing: 0.11em;
  padding: 14px 8px;
  font-size: 7px;
  font-weight: 900;
}
.intro-stats b {
  color: #fff;
  margin-right: 6px;
  font-size: 11px;
}
.primary,
.result-card button {
  z-index: 2;
  color: #05141f;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: linear-gradient(135deg, #84f8ff, #57d4e9);
  border: 0;
  border-radius: 12px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 8px;
  font-weight: 1000;
  transition: all 0.18s;
  position: relative;
  box-shadow: 0 14px 32px #54e1f02e;
}
.primary b {
  margin-left: 22px;
  font-size: 15px;
}
.primary:hover,
.result-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px #54e1f045;
}
.intro-card > small {
  z-index: 1;
  color: #5c6d84;
  letter-spacing: 0.11em;
  margin-top: 13px;
  font-size: 6px;
  font-weight: 900;
  display: block;
  position: relative;
}
.result-card {
  text-align: center;
  padding: 46px;
}
.result-mark {
  color: #78ffda;
  background: #71ffd714;
  border: 1px solid #71ffd780;
  border-radius: 50%;
  place-items: center;
  width: 65px;
  height: 65px;
  margin: 0 auto 20px;
  font-size: 29px;
  display: grid;
  box-shadow: 0 0 38px #71ffd717;
}
.result-card.lost {
  border-color: #ff60854a;
}
.result-card.lost .result-mark {
  color: #ff6489;
  background: #ff608514;
  border-color: #ff608580;
}
.result-card h2 {
  letter-spacing: -0.055em;
  max-width: 450px;
  margin: 18px auto 13px;
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.03;
}
.result-card p {
  color: #8fa1b9;
  font-size: 11px;
}
.result-card p strong {
  color: #fff;
}
.result-card > div {
  z-index: 2;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  display: flex;
  position: relative;
}
.result-card button {
  color: #b2c2d6;
  box-shadow: none;
  background: #0e192cd1;
  border: 1px solid #84a5cf38;
}
.result-card button.primary {
  color: #05141f;
  background: linear-gradient(135deg, #84f8ff, #57d4e9);
  border: 0;
}
.touch-stick {
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: radial-gradient(circle, #09162680, #040b1633);
  border: 1px solid #85d1e74d;
  border-radius: 50%;
  width: 114px;
  height: 114px;
  margin: -57px 0 0 -57px;
  transition: opacity 0.14s;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.touch-stick span {
  background: radial-gradient(circle at 40% 34%, #92eeff80, #14345099);
  border: 1px solid #a0e8ff80;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 22px #60dcff52;
}
.touch-actions {
  z-index: 8;
  touch-action: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: none;
  position: absolute;
  bottom: 22px;
  right: 18px;
}
.touch-actions .tb {
  color: #d8f7ff;
  letter-spacing: 0.1em;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  touch-action: none;
  background: #040b16ad;
  border: 1px solid #85d1e752;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 8px;
  font-weight: 1000;
  transition:
    transform 0.1s,
    filter 0.1s;
}
.touch-actions .tb.dash {
  color: #9ef3ff;
  border-color: #6ef1ff73;
}
.touch-actions .tb.pulse {
  color: #ffa9e8;
  border-color: #ff78d766;
}
.touch-actions .tb.jump {
  color: #ffe28b;
  border-color: #ffd76e6b;
  width: 86px;
  height: 86px;
  font-size: 9px;
}
.touch-actions .tb:active {
  filter: brightness(1.35);
  transform: scale(0.92);
}
@keyframes fade {
  0% {
    opacity: 0;
  }
}
@keyframes card {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}
@media (width<=760px), (pointer: coarse) {
  .touch-stick {
    display: block;
  }
  .touch-actions {
    display: flex;
  }
  .hud-hint {
    display: none;
  }
  .hud-abilities {
    transform-origin: 0 100%;
    transform: scale(0.82);
  }
  .intro-card {
    padding: 35px 25px 29px;
  }
  .intro-card h1 {
    font-size: 42px;
  }
  .hero-emblem {
    opacity: 0.26;
    right: 17px;
  }
  .intro-stats span {
    font-size: 6px;
  }
  .result-card {
    padding: 34px 24px;
  }
  .result-card > div {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.start-screen {
  z-index: 60;
  color: #f3f8ff;
  isolation: isolate;
  background: #02050d;
  animation: 0.7s ease-out start-reveal;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.start-backdrop {
  z-index: -3;
  filter: blur(42px) saturate(1.15);
  opacity: 0.63;
  background: url(../becoming-fable-cover.png) 50% / cover no-repeat;
  position: absolute;
  inset: -8%;
  transform: scale(1.08);
}
.start-screen:before {
  content: "";
  z-index: -2;
  background:
    linear-gradient(90deg, #01040c57, #02050d14 52%, #02040b47),
    radial-gradient(circle at 54% 42%, #0000 18%, #0000006b 100%);
  position: absolute;
  inset: 0;
}
.start-screen:after {
  content: "";
  z-index: 4;
  pointer-events: none;
  border: 1px solid #a8deff1f;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 100px #0006;
}
.start-layout {
  background: #040916;
  border: 1px solid #86daff33;
  border-radius: clamp(18px, 2.1vw, 32px);
  position: absolute;
  inset: clamp(12px, 2.4vw, 34px);
  overflow: hidden;
  box-shadow:
    0 35px 120px #000000b8,
    inset 0 1px #ffffff14;
}
.cover-panel,
.cover-art {
  position: absolute;
  inset: 0;
}
.cover-art {
  background: url(../becoming-fable-cover.png) 50% / cover no-repeat;
  animation: 16s ease-in-out infinite alternate cover-drift;
  transform: scale(1.002);
}
.cover-panel:after {
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #020610f5 0%,
      #020610c7 24%,
      #0206102e 52%,
      #0206100a 72%
    ),
    linear-gradient(#02050d2e, #0000 68%, #02050db8);
  position: absolute;
  inset: 0;
}
.cover-copy {
  z-index: 2;
  width: min(470px, 40vw);
  position: absolute;
  top: 50%;
  left: clamp(28px, 5vw, 84px);
  transform: translateY(-50%);
}
.cover-kicker {
  color: #75eaff;
  letter-spacing: 0.32em;
  text-shadow: 0 0 20px #5cebff80;
  align-items: center;
  gap: 12px;
  font-size: clamp(8px, 0.66vw, 11px);
  font-weight: 1000;
  display: flex;
}
.cover-kicker:before {
  content: "";
  background: #69eaff;
  width: 36px;
  height: 1px;
  box-shadow: 0 0 12px #69eaff;
}
.cover-copy h1 {
  color: #f5fbff;
  letter-spacing: -0.075em;
  text-shadow: 0 10px 46px #000000b3;
  margin: 20px 0 18px;
  font-size: clamp(54px, 6.7vw, 112px);
  font-weight: 1000;
  line-height: 0.77;
}
.cover-copy h1 em {
  color: #ffd978;
  letter-spacing: -0.055em;
  text-shadow: 0 0 40px #ffc94b40;
  margin-top: 0.12em;
  font-style: normal;
  display: block;
}
.cover-copy > p {
  color: #a9b8cb;
  max-width: 420px;
  margin: 0 0 22px;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.65;
}
.pilot-tag {
  color: #6d8098;
  letter-spacing: 0.15em;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 8px;
  font-weight: 900;
  display: flex;
}
.pilot-tag:after {
  content: "";
  background: #7a9cc159;
  width: 34px;
  height: 1px;
}
.pilot-tag strong {
  color: #fff0bd;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.start-button {
  color: #10120b;
  letter-spacing: 0.18em;
  cursor: pointer;
  background: linear-gradient(135deg, #ffe48b, #f5bd4b);
  border: 1px solid #ffe18aad;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  min-width: 230px;
  height: 56px;
  padding: 0 22px 0 25px;
  font-size: 10px;
  font-weight: 1000;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    filter 0.18s;
  display: flex;
  box-shadow:
    0 15px 42px #ecb33b33,
    inset 0 1px #ffffffbf;
}
.start-button b {
  font-size: 19px;
  line-height: 1;
}
.start-button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 20px 48px #ecb33b4d,
    inset 0 1px #fffc;
}
.start-leaderboard {
  z-index: 3;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, #050d1ce0, #030711c7);
  border: 1px solid #77d6ff3b;
  border-radius: 18px;
  width: min(420px, 32vw);
  position: absolute;
  bottom: clamp(20px, 4.5vh, 52px);
  right: clamp(20px, 3vw, 50px);
  overflow: hidden;
  box-shadow:
    0 24px 70px #00000080,
    inset 0 1px #ffffff12;
}
.start-leaderboard > header {
  color: #7ceeff;
  letter-spacing: 0.18em;
  border-bottom: 1px solid #81b6da21;
  justify-content: space-between;
  align-items: center;
  height: 43px;
  padding: 0 17px;
  font-size: 8px;
  font-weight: 1000;
  display: flex;
}
.start-leaderboard > header b {
  color: #76f7cf;
  letter-spacing: 0.14em;
  border: 1px solid #69ffca3b;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 6px;
}
.start-leaderboard > section {
  padding: 14px 17px 11px;
}
.start-leaderboard > section + section {
  border-top: 1px solid #81b6da1c;
}
.start-leaderboard h2 {
  color: #8598ae;
  letter-spacing: 0.18em;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 7px;
  display: flex;
}
.start-leaderboard h2 i {
  color: #5df;
  font-style: normal;
}
.leader-list {
  min-height: 27px;
}
.leader-list p {
  color: #dceaf8;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 4px 0;
  font-size: 8px;
  display: grid;
}
.leader-list p i {
  color: #526a82;
  font-style: normal;
  font-weight: 1000;
}
.leader-list p span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.leader-list p strong {
  color: #fff;
  font-size: 9px;
}
.leader-list small {
  color: #51667d;
  letter-spacing: 0.11em;
  padding: 5px 0;
  font-size: 7px;
  font-weight: 900;
  display: block;
}
.start-leaderboard > footer {
  color: #53677f;
  letter-spacing: 0.1em;
  border-top: 1px solid #81b6da1c;
  justify-content: space-between;
  padding: 10px 17px;
  font-size: 6px;
  font-weight: 900;
  display: flex;
}
.start-controls {
  z-index: 5;
  white-space: nowrap;
  color: #60738b;
  letter-spacing: 0.12em;
  font-size: 6px;
  font-weight: 900;
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translate(-50%);
}
.start-controls span {
  color: #c7d6e6;
  margin-left: 12px;
}
.start-controls span:first-child {
  margin-left: 0;
}
@keyframes start-reveal {
  0% {
    opacity: 0;
  }
}
@keyframes cover-drift {
  to {
    transform: scale(1.025) translate(-0.25%);
  }
}
@media (width<=980px) {
  .cover-copy {
    width: 44vw;
    left: 34px;
  }
  .cover-copy h1 {
    font-size: clamp(50px, 7.5vw, 76px);
  }
  .start-leaderboard {
    width: min(390px, 42vw);
    bottom: 22px;
    right: 18px;
  }
  .start-leaderboard > footer {
    display: none;
  }
}
@media (width<=720px) {
  .start-layout {
    inset: 8px;
  }
  .cover-art {
    background-position: 64%;
  }
  .cover-panel:after {
    background: linear-gradient(#020610e0 0%, #0206104d 42%, #020610e6 68%);
  }
  .cover-copy {
    width: calc(100% - 44px);
    top: 26px;
    left: 22px;
    transform: none;
  }
  .cover-kicker {
    font-size: 7px;
  }
  .cover-copy h1 {
    margin: 12px 0 10px;
    font-size: 46px;
    line-height: 0.78;
  }
  .cover-copy > p {
    display: none;
  }
  .pilot-tag {
    margin: 13px 0 12px;
  }
  .start-button {
    min-width: 205px;
    height: 48px;
  }
  .start-leaderboard {
    width: auto;
    bottom: 14px;
    left: 14px;
    right: 14px;
  }
  .leader-list p:nth-of-type(n + 4) {
    display: none;
  }
  .start-leaderboard > section {
    padding: 10px 14px 8px;
  }
  .start-leaderboard > header {
    height: 38px;
  }
  .start-controls {
    display: none;
  }
}
.hud {
  z-index: 6;
  pointer-events: none;
  letter-spacing: 0.12em;
  font-weight: 900;
  position: absolute;
  inset: 0;
}
.hud-top {
  width: min(440px, 60vw);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%);
}
.hud-progress {
  background: #081424b3;
  border: 1px solid #78c8ff2e;
  border-radius: 99px;
  height: 5px;
  overflow: hidden;
}
.hud-progress i {
  background: linear-gradient(90deg, #5be5f4, #ffd76e);
  border-radius: 99px;
  height: 100%;
  transition: width 0.25s;
  display: block;
  box-shadow: 0 0 16px #6eebff99;
}
.hud-progress-meta {
  color: #7d93ad;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 7px;
  display: flex;
}
.hud-progress-meta b {
  color: #eaf6ff;
  text-shadow: 0 0 18px #6eebff59;
  font-size: 10px;
}
.hud-compass {
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #8ea4bb;
  background: #040b1699;
  border: 1px solid #7dffd43d;
  border-radius: 99px;
  align-items: center;
  gap: 9px;
  padding: 5px 12px;
  font-size: 7px;
  display: flex;
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translate(-50%);
}
.hud-compass i {
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
  filter: drop-shadow(0 0 7px #7dffd4d9);
  background: #7dffd4;
  width: 13px;
  height: 13px;
  transition: transform 0.1s linear;
}
.hud-compass span {
  color: #eaf6ff;
}
.hud-compass b {
  color: #7dffd4;
}
.hud-buffs {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 16px;
}
.hud-buffs p {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #040b169e;
  border: 1px solid #78c8ff38;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 10px;
  font-size: 7px;
  display: flex;
}
.hud-buffs p i {
  opacity: 0.62;
  font-style: normal;
}
.hud-buffs p.streak {
  color: #ffe27a;
  border-color: #ffe27a73;
  font-size: 10px;
  animation: 0.28s streak-pop;
}
.hud-abilities {
  gap: 11px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 16px;
}
.ability {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #040b169e;
  border: 1px solid #78c8ff33;
  border-radius: 11px;
  min-width: 98px;
  padding: 8px 11px 9px;
}
.ability > span {
  color: #9fb4ca;
  font-size: 7px;
  display: block;
}
.ability > small {
  color: #5d7089;
  margin-top: 6px;
  font-size: 6px;
  display: block;
}
.pips {
  gap: 5px;
  margin-top: 6px;
  display: flex;
}
.pips i {
  background: #6ef1ff24;
  border-radius: 99px;
  width: 26px;
  height: 6px;
  position: relative;
  overflow: hidden;
}
.pips i:after {
  content: "";
  width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, #6ef1ff, #b3f9ff);
  position: absolute;
  inset: 0 auto 0 0;
  box-shadow: 0 0 12px #6ef1ffb3;
}
.meter {
  background: #ff78d724;
  border-radius: 99px;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
}
.meter i {
  background: linear-gradient(90deg, #ff78d7, #ffd0f2);
  height: 100%;
  display: block;
  box-shadow: 0 0 12px #ff78d799;
}
.hud-hint {
  text-align: right;
  color: #8ea4bb;
  font-size: 7px;
  line-height: 2;
  animation: 0.8s fade;
  position: absolute;
  bottom: 16px;
  right: 16px;
}
.hud-hint p {
  margin: 0;
}
.hud-hint b {
  color: #eaf6ff;
}
.hud-hint .dim {
  color: #5d7089;
}
.threat-vignette {
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle, #0000 34%, #ff346073 100%);
  transition: opacity 0.12s linear;
  position: absolute;
  inset: 0;
}
@keyframes streak-pop {
  0% {
    transform: scale(1.3);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}