:root {
  color-scheme: dark;
  --ink: #0b1b2a;
  --panel: rgba(7, 16, 27, .82);
  --line: rgba(133, 206, 255, .22);
  --cyan: #50edff;
  --blue: #2da9ff;
  --amber: #ffb443;
  --gold: #ffe073;
  --magenta: #ff4fd8;
  --danger: #ff526d;
  --muted: #91a6b8;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  user-select: none;
}

button, kbd { font: inherit; }
button { color: inherit; }

#game-shell, #render-root, #render-root canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#render-root canvas { display: block; }

.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

.screen.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#boot-screen {
  background: #050a12 url("./assets/images/key-art.png") center / cover no-repeat;
}

.boot-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 8, 15, .95) 0%, rgba(3, 8, 15, .76) 38%, rgba(3, 8, 15, .12) 70%),
    linear-gradient(0deg, rgba(3, 8, 15, .75), transparent 50%);
}

.boot-content {
  position: absolute;
  left: clamp(30px, 7vw, 120px);
  top: 50%;
  width: min(610px, 47vw);
  transform: translateY(-50%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 30px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.boot-content h1 {
  margin: 8px 0 0;
  color: #fff;
  font-family: "Barlow Condensed", "Noto Sans SC", sans-serif;
  font-size: clamp(76px, 9vw, 142px);
  font-weight: 800;
  line-height: .87;
  letter-spacing: -.055em;
  text-shadow: 0 8px 35px #000;
}

.boot-content h1 span {
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan);
  filter: drop-shadow(0 0 14px rgba(80, 237, 255, .38));
}

.boot-lead {
  max-width: 510px;
  margin: 24px 0;
  color: #c7d5df;
  font-size: 16px;
  line-height: 1.8;
  text-shadow: 0 2px 12px #000;
}

.mult-preview {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.mult-preview div {
  min-width: 112px;
  padding: 9px 15px 10px;
  border: 1px solid rgba(100, 226, 255, .22);
  border-left: 3px solid var(--cyan);
  background: rgba(4, 12, 22, .72);
  backdrop-filter: blur(8px);
}

.mult-preview div:nth-child(2) { border-left-color: var(--amber); }
.mult-preview div:nth-child(3) { border-left-color: var(--magenta); }
.mult-preview b {
  display: block;
  color: #fff;
  font: 800 26px/1 "Barlow Condensed", sans-serif;
}
.mult-preview small { color: var(--muted); font-size: 11px; }

.primary-button {
  position: relative;
  min-width: 230px;
  padding: 15px 24px;
  border: 1px solid rgba(134, 245, 255, .65);
  background: linear-gradient(135deg, #0c91ad, #1555a6);
  box-shadow: 0 0 28px rgba(34, 186, 255, .24), inset 0 0 18px rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .12em;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  transition: transform .16s ease, filter .16s ease;
}

.primary-button:hover { transform: translateY(-2px); filter: brightness(1.18); }
.primary-button:active { transform: translateY(1px); }
.primary-button i { margin-left: 25px; font-style: normal; color: var(--gold); }

.controls-card {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 24px;
  color: #8fa5b5;
  font-size: 11px;
}

kbd {
  padding: 2px 6px;
  border: 1px solid rgba(151, 202, 233, .28);
  border-bottom-color: rgba(151, 202, 233, .5);
  border-radius: 3px;
  background: rgba(8, 18, 30, .78);
  color: #dff8ff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}

.boot-footer {
  position: absolute;
  left: clamp(30px, 7vw, 120px);
  bottom: 25px;
  color: rgba(196, 218, 231, .5);
  font-size: 11px;
  letter-spacing: .12em;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
}

.hud.is-visible { opacity: 1; visibility: visible; }

.top-row {
  position: absolute;
  top: 22px;
  left: 26px;
  right: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(8, 20, 34, .9), rgba(5, 11, 19, .68));
  box-shadow: inset 0 0 25px rgba(38, 156, 228, .05), 0 8px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(9px);
}

.mission-panel {
  display: flex;
  min-width: 265px;
  height: 65px;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}

.mission-index {
  height: 100%;
  min-width: 82px;
  padding: 11px 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
}

.mission-index strong {
  display: block;
  color: var(--cyan);
  font: 800 29px/1 "Barlow Condensed", sans-serif;
}

.mission-panel > div:last-child { padding: 0 22px 0 16px; }
.mission-panel span { display: block; color: #eefaff; font-size: 14px; font-weight: 700; }
.mission-panel small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }

.score-panel {
  min-width: 190px;
  padding: 10px 17px 11px;
  text-align: right;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.score-panel > span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .15em; }
.score-panel > strong { display: block; color: #fff; font: 700 25px/1.05 "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.score-panel small { color: #7f95a7; font-size: 9px; }
.score-panel small b { color: var(--gold); }

.power-panel {
  position: absolute;
  left: 50%;
  top: 0;
  width: 245px;
  min-height: 100px;
  padding: 8px 18px 12px;
  transform: translateX(-50%);
  border-top: 2px solid var(--cyan);
  background: linear-gradient(180deg, rgba(10, 24, 39, .94), rgba(5, 10, 18, .58));
  box-shadow: 0 6px 28px rgba(0,0,0,.3), 0 0 18px rgba(80, 237, 255, .1);
  text-align: center;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 12px, calc(100% - 23px) 100%, 23px 100%, 0 12px);
  transition: border-color .2s, filter .2s;
}

.power-label { display: block; color: var(--muted); font-size: 8px; letter-spacing: .19em; }
.power-panel > strong {
  display: inline-block;
  margin: 0 8px 0 0;
  color: #fff;
  font: 800 39px/.95 "Barlow Condensed", sans-serif;
  text-shadow: 0 0 18px currentColor;
}
.power-panel > span:nth-of-type(2) { color: #dbe9f1; font-size: 12px; font-weight: 700; }
.power-track { width: 100%; height: 4px; margin: 7px 0 5px; overflow: hidden; background: rgba(255,255,255,.1); }
.power-track i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 12px currentColor; transform-origin: left; }
.power-panel small { display: block; color: #718798; font-size: 9px; }
.power-panel.multiplier-2 { border-color: var(--cyan); }
.power-panel.multiplier-2 .power-track i { background: var(--cyan); }
.power-panel.multiplier-5 { border-color: var(--amber); filter: drop-shadow(0 0 12px rgba(255, 180, 67, .17)); }
.power-panel.multiplier-5 .power-track i { background: var(--amber); }
.power-panel.multiplier-10 { border-color: var(--magenta); filter: drop-shadow(0 0 18px rgba(255, 79, 216, .26)); }
.power-panel.multiplier-10 .power-track i { background: linear-gradient(90deg, var(--magenta), var(--gold)); }

.boss-panel {
  position: absolute;
  top: 130px;
  left: 50%;
  width: min(650px, 64vw);
  transform: translate(-50%, -25px);
  opacity: 0;
  transition: .35s ease;
}
.boss-panel.is-visible { transform: translate(-50%, 0); opacity: 1; }
.boss-meta { display: flex; justify-content: space-between; margin-bottom: 5px; color: #f4d8e9; font-size: 11px; letter-spacing: .16em; }
.boss-meta b { color: var(--gold); font-family: "Barlow Condensed", sans-serif; }
.boss-track { position: relative; height: 15px; border: 1px solid rgba(255, 135, 177, .45); background: rgba(20, 4, 12, .82); box-shadow: 0 0 20px rgba(255, 55, 139, .12); overflow: hidden; }
.boss-track > i, .boss-track > b { position: absolute; inset: 0; right: auto; width: 100%; transform-origin: left; }
.boss-track > i { background: #ffe07d; transition: transform .5s ease .22s; }
.boss-track > b { background: linear-gradient(90deg, #ac1c5b, #ff446d, #ff8a56); transition: transform .12s ease; }
.boss-segments { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(5,0,5,.8) calc(10% - 1px), rgba(5,0,5,.8) 10%); }

.bottom-row {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.health-panel { display: flex; width: 260px; height: 61px; align-items: center; padding: 8px 15px; }
.health-icon { width: 37px; height: 37px; margin-right: 12px; border: 1px solid rgba(80,237,255,.45); color: var(--cyan); font: 500 27px/34px sans-serif; text-align: center; transform: rotate(45deg); }
.health-icon::first-line { transform: rotate(-45deg); }
.health-panel > div:last-child { flex: 1; }
.health-panel span { color: #a9bcc9; font-size: 9px; letter-spacing: .08em; }
.health-panel span b { color: #fff; font: 700 18px "Barlow Condensed", sans-serif; }
.health-track { height: 7px; margin-top: 7px; background: rgba(255,255,255,.08); overflow: hidden; }
.health-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #29b6da, var(--cyan)); box-shadow: 0 0 12px rgba(80,237,255,.5); transition: width .18s ease, background .2s; }
.dash-panel { display: flex; align-items: center; gap: 11px; padding: 10px 13px; color: var(--muted); font-size: 10px; }
.dash-pips { display: flex; gap: 4px; }
.dash-pips i { width: 18px; height: 5px; background: var(--cyan); box-shadow: 0 0 9px rgba(80,237,255,.4); transition: opacity .15s; }
.dash-pips i.is-empty { opacity: .12; box-shadow: none; }

.help-strip { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); color: rgba(179, 204, 219, .65); font-size: 9px; white-space: nowrap; }
.help-strip em { margin: 0 8px; color: rgba(255,255,255,.18); font-style: normal; }

.announcement, .multiplier-callout {
  position: absolute;
  left: 50%;
  top: 40%;
  min-width: 420px;
  padding: 18px 30px;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(4, 13, 24, .82) 20%, rgba(4, 13, 24, .82) 80%, transparent);
  text-align: center;
  transition: .28s ease;
}
.announcement.is-visible, .multiplier-callout.is-visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.announcement small, .multiplier-callout small { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .25em; }
.announcement strong { display: block; margin: 4px 0; color: #fff; font-size: 34px; letter-spacing: .08em; }
.announcement span { color: #95aebe; font-size: 11px; }
.multiplier-callout { top: 49%; min-width: 480px; background: none; filter: drop-shadow(0 4px 20px #000); }
.multiplier-callout strong { display: block; color: var(--cyan); font: 800 96px/.88 "Barlow Condensed", sans-serif; text-shadow: 0 0 26px currentColor; }
.multiplier-callout span { color: #fff; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.multiplier-callout.mult-5 strong { color: var(--amber); }
.multiplier-callout.mult-10 strong { color: var(--magenta); }

.crosshair {
  position: absolute;
  z-index: 12;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  transform: translate(-100px, -100px);
  filter: drop-shadow(0 0 5px var(--cyan));
}
.crosshair i, .crosshair b, .crosshair span { position: absolute; display: block; }
.crosshair i { inset: 3px; border: 1px solid rgba(115,239,255,.8); border-radius: 50%; }
.crosshair b { left: 12px; top: 0; width: 2px; height: 26px; background: linear-gradient(transparent 0 24%, var(--cyan) 24% 38%, transparent 38% 62%, var(--cyan) 62% 76%, transparent 76%); }
.crosshair span { left: 0; top: 12px; width: 26px; height: 2px; background: linear-gradient(90deg, transparent 0 24%, var(--cyan) 24% 38%, transparent 38% 62%, var(--cyan) 62% 76%, transparent 76%); }
.crosshair.is-focus { transform-origin: center; filter: drop-shadow(0 0 8px var(--amber)); }
.crosshair.is-focus i { inset: 7px; border-color: var(--amber); }

.damage-layer { position: absolute; inset: 0; overflow: hidden; }
.damage-pop {
  position: absolute;
  color: #fff;
  font: 800 17px "Barlow Condensed", sans-serif;
  text-shadow: 0 2px 5px #000, 0 0 10px currentColor;
  white-space: nowrap;
  animation: damage-rise .72s ease-out forwards;
}
.damage-pop b { margin-right: 4px; color: var(--cyan); }
.damage-pop.mult-5 { font-size: 23px; color: #fff0c3; }
.damage-pop.mult-5 b { color: var(--amber); }
.damage-pop.mult-10 { font-size: 31px; color: #fff; }
.damage-pop.mult-10 b { color: var(--magenta); }
@keyframes damage-rise { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 18% { opacity: 1; transform: translate(-50%, -5px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -50px) scale(.96); } }

.danger-vignette, .screen-flash { position: absolute; inset: 0; opacity: 0; }
.danger-vignette { background: radial-gradient(circle, transparent 48%, rgba(255, 22, 59, .56)); transition: opacity .1s; }
.screen-flash { background: #ccfbff; mix-blend-mode: screen; transition: opacity .18s; }
.screen-flash.is-active { opacity: .35; transition: none; }

.modal-screen { display: grid; place-items: center; background: rgba(2, 6, 12, .78); backdrop-filter: blur(10px); }
.modal-card { width: min(520px, calc(100vw - 40px)); padding: 42px; border: 1px solid rgba(95, 219, 255, .3); background: linear-gradient(145deg, rgba(10, 25, 40, .98), rgba(4, 9, 17, .98)); box-shadow: 0 28px 80px #000; text-align: center; clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.modal-card .eyebrow { justify-content: center; }
.modal-card h2 { margin: 9px 0; color: #fff; font-size: 34px; }
.modal-card p { margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.modal-card .primary-button { display: block; margin: 0 auto 10px; }
.text-button { padding: 8px 18px; border: 0; background: none; color: #7f94a5; cursor: pointer; }
.text-button:hover { color: #fff; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 26px 0; background: rgba(111,199,241,.15); }
.result-stats div { padding: 15px 6px; background: #07121e; }
.result-stats small { display: block; color: #6f879a; font-size: 9px; }
.result-stats strong { color: #fff; font: 800 22px "Barlow Condensed", sans-serif; }

.loading-note { position: absolute; z-index: 40; right: 20px; bottom: 18px; padding: 7px 11px; border: 1px solid rgba(80,237,255,.2); background: rgba(4,10,18,.8); color: #88a3b6; font-size: 10px; transition: opacity .3s; }
.loading-note.is-hidden { opacity: 0; }

@media (max-width: 800px) {
  .boot-shade { background: linear-gradient(90deg, rgba(3,8,15,.95), rgba(3,8,15,.55)), linear-gradient(0deg, rgba(3,8,15,.8), transparent); }
  .boot-content { width: calc(100vw - 48px); left: 24px; }
  .boot-content h1 { font-size: 72px; }
  .mult-preview div { min-width: 0; flex: 1; padding: 8px 10px; }
  .controls-card { display: none; }
  .top-row { left: 10px; right: 10px; top: 10px; }
  .mission-panel { min-width: 160px; transform: scale(.85); transform-origin: left top; }
  .score-panel { transform: scale(.85); transform-origin: right top; }
  .power-panel { top: 66px; transform: translateX(-50%) scale(.82); }
  .bottom-row { left: 10px; right: 10px; bottom: 10px; }
  .health-panel { transform: scale(.82); transform-origin: left bottom; }
  .dash-panel { transform: scale(.82); transform-origin: right bottom; }
  .help-strip { display: none; }
  .announcement, .multiplier-callout { min-width: min(440px, 90vw); }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
}