:root {
  --navy: #0a1418;
  --panel: rgba(17, 22, 26, 0.92);
  --panel-solid: #11161a;
  --gold: #e6b446;
  --gold-hot: #f8db75;
  --gold-line: #d4af5a;
  --gold-dim: #b4822d;
  --cream: #f3ead2;
  --cyan: #00f5d4;
  --cyan-hot: #7afff0;
  --cyan-bar: #2ee8d4;
  --teal: #1a8a78;
  --magenta: #ff64a0;
  --magenta-hot: #ff8ec0;
  --purple: #9d4edd;
  --purple-hot: #c084fc;
  --red: #e04040;
  --combo: #c64244;
  --ink: #e8efe8;
  --muted: #8aa098;
  --orange: #ff7a28;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #071014;
  color: var(--ink);
  font-family: "Rajdhani", "Orbitron", sans-serif;
  user-select: none;
}
#stage, #c {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#c { z-index: 0; }
#vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(4, 10, 12, 0.55) 100%);
}
#hitflash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: rgba(180, 20, 50, 0.0);
  transition: background 80ms linear;
}
#float-layer {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
}
.floater {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px currentColor, 0 2px 0 #12080c;
}
.floater.crit { color: #f8db75; font-size: 26px; }
.floater.dmg { color: #f0e8c8; font-size: 18px; }
.floater.corr { color: #e050ff; font-size: 14px; }
.floater.drain { color: #ff64a0; font-size: 13px; }
.floater.heal { color: #00f5d4; font-size: 16px; }

#hud {
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none;
}
.hidden { display: none !important; }

/* shared gold panel */
.gold-panel {
  background: var(--panel);
  border: 1.6px solid var(--gold-line);
  box-shadow:
    0 0 0 1px rgba(180, 130, 40, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.5),
    inset 0 0 22px rgba(0, 0, 0, 0.35);
}

/* ===== TOP LEFT ===== */
#hud-tl {
  position: absolute;
  top: 1.35%;
  left: 1.15%;
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--panel);
  border: 1.6px solid var(--gold-line);
  padding: 8px 14px 9px 8px;
  min-width: min(430px, 28vw);
  z-index: 9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 18px rgba(0,0,0,0.3);
}
.tl-gear {
  width: 72px; height: 72px;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 0 6px rgba(230, 180, 70, 0.35));
}
.tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.tl-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: clamp(9px, 0.72vw, 12px);
  color: var(--gold-hot);
  margin-bottom: 5px;
}
.stat { margin-bottom: 4px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.stat-lab {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(8px, 0.62vw, 10px);
  color: var(--cyan);
}
.stat-num {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(9px, 0.7vw, 11px);
  color: #d8e8e4;
}
.stat-num .boost {
  color: var(--purple-hot);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: "Orbitron", sans-serif;
  font-size: 0.92em;
}
.track {
  height: 7px;
  background: #070b0d;
  border: 1px solid rgba(0, 245, 212, 0.18);
  overflow: hidden;
  position: relative;
}
.track i {
  display: block; height: 100%; width: 68%;
  background: linear-gradient(90deg, #129e90, var(--cyan-bar) 70%, #7afff0);
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.45);
}
.track-stm { display: flex; }
.track-stm i { height: 100%; }
#bar-stm {
  width: 70%;
  background: linear-gradient(90deg, #129e90, var(--cyan-bar));
}
#bar-stm-boost {
  width: 14%;
  background: linear-gradient(90deg, #9d4edd, #c084fc);
  box-shadow: 0 0 8px rgba(157, 78, 221, 0.6);
}
.tl-res {
  display: flex; gap: 1.2rem; margin-top: 6px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(8px, 0.64vw, 11px);
  letter-spacing: 0.1em;
  color: var(--gold);
}
.tl-res .res { display: flex; align-items: center; gap: 6px; }
.tl-res img { width: 14px; height: 14px; object-fit: contain; }
.tl-res .essence { color: var(--cyan); }
.tl-res b { font-weight: 800; }

/* ===== TOP CENTER ===== */
#hud-tc {
  position: absolute;
  top: 1.05%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(640px, 42vw);
}
.title-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 22px;
  width: 100%;
  background: linear-gradient(180deg, #1c1810 0%, #0e0c08 100%);
  border: 1.7px solid var(--gold-line);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 0 16px rgba(201,164,74,0.08);
}
.title-banner.big { padding: 10px 28px; width: auto; min-width: min(640px, 70vw); }
.title-word {
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: clamp(13px, 1.25vw, 22px);
  color: var(--gold-hot);
  text-shadow: 0 0 12px rgba(248, 219, 117, 0.35);
  white-space: nowrap;
}
.gear-deco {
  width: 22px; height: 22px; object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(230,180,70,0.5));
}
.obj-panel {
  width: 100%;
  background: var(--panel);
  border: 1.5px solid var(--gold-line);
  padding: 6px 12px 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}
.obj-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; gap: 10px;
}
.obj-lab {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(8px, 0.68vw, 11px);
  color: var(--gold-hot);
}
.obj-wave {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(8px, 0.64vw, 11px);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.obj-wave b { color: var(--cyan-hot); }
.obj-track-wrap { position: relative; }
.obj-track {
  height: 8px;
  background: #070b0d;
  border: 1px solid rgba(0, 245, 212, 0.2);
  overflow: hidden;
}
.obj-track i {
  display: block; height: 100%; width: 74%;
  background: linear-gradient(90deg, #0e8a80, var(--cyan));
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.55);
}
.obj-pct {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #e8fff8;
  text-shadow: 0 0 6px #000;
  pointer-events: none;
}

/* ===== TOP RIGHT ===== */
#hud-tr {
  position: absolute;
  top: 1.35%;
  right: 1.15%;
  background: var(--panel);
  border: 1.6px solid var(--gold-line);
  padding: 8px 14px 8px 16px;
  min-width: min(280px, 20vw);
  z-index: 9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tr-cols { display: flex; justify-content: space-between; gap: 18px; }
.tr-lab {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(8px, 0.62vw, 10px);
  letter-spacing: 0.2em;
  color: var(--gold);
}
.tr-lab-r { text-align: right; }
.tr-score {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.5vw, 26px);
  color: var(--gold-hot);
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(230,180,70,0.3);
}
.tr-combo {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.35vw, 24px);
  color: var(--combo);
  text-align: right;
  text-shadow: 0 0 10px rgba(224, 64, 64, 0.45);
}
.tr-combo b {
  font-size: 0.55em;
  letter-spacing: 0.16em;
  vertical-align: middle;
}
.tr-meta {
  margin-top: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(8px, 0.62vw, 10px);
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ===== NAMEPLATE ===== */
#nameplate {
  position: absolute;
  left: 50%; top: 32%;
  transform: translate(-20%, -120%);
  z-index: 7;
  min-width: 220px;
  pointer-events: none;
}
.np-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: #f0d8d8;
  background: rgba(40, 8, 10, 0.72);
  border: 1px solid var(--red);
  padding: 3px 8px;
}
.np-lvl { color: #ff8a8a; font-size: 10px; }
.np-track {
  height: 6px;
  background: #1a0808;
  border: 1px solid var(--red);
  border-top: none;
  overflow: hidden;
}
.np-track i {
  display: block; height: 100%; width: 43%;
  background: linear-gradient(90deg, #8a1818, #e04040);
}
.np-hp {
  text-align: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #d8c8c8;
  margin-top: 2px;
}

/* ===== BOTTOM LEFT ===== */
#hud-bl {
  position: absolute;
  left: 1.15%;
  bottom: 2.2%;
  background: var(--panel);
  border: 1.6px solid var(--gold-line);
  padding: 10px 14px 12px;
  min-width: min(320px, 22vw);
  z-index: 9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.loc-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--gold-hot);
}
.loc-sub {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: clamp(9px, 0.68vw, 12px);
  color: var(--muted);
  margin: 2px 0 8px;
}
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 0.78vw, 13px);
  color: #d4e0d8;
}
.loc-grid .k { color: var(--gold); margin-right: 4px; }
.loc-grid .qty { color: var(--cyan); }

/* ===== BOTTOM CENTER parasites ===== */
#hud-bc {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  transform: translateX(-50%);
  width: min(780px, 52vw);
  z-index: 9;
  background: linear-gradient(180deg, rgba(28, 10, 36, 0.94), rgba(14, 10, 22, 0.94));
  border: 1.7px solid #9d4edd;
  box-shadow:
    0 0 24px rgba(157, 78, 221, 0.28),
    0 10px 28px rgba(0,0,0,0.5);
  padding: 8px 10px 10px;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
}
.para-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px; padding: 0 6px;
}
.para-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: clamp(9px, 0.78vw, 13px);
  color: var(--magenta-hot);
}
.para-title .risk { color: var(--purple-hot); font-size: 0.9em; }
.para-drain {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(8px, 0.64vw, 11px);
  letter-spacing: 0.08em;
  color: var(--magenta);
}
.para-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pcard {
  display: flex; gap: 8px;
  padding: 7px 8px 8px;
  background: rgba(10, 8, 16, 0.7);
  border: 1.4px solid #9d4edd;
  min-height: 108px;
}
.pcard.mag { border-color: #c84cff; box-shadow: inset 0 0 14px rgba(200, 76, 255, 0.12); }
.pcard.purp { border-color: #7a3cff; box-shadow: inset 0 0 14px rgba(122, 60, 255, 0.12); }
.pcard.cyan { border-color: #2ee8d4; box-shadow: inset 0 0 14px rgba(46, 232, 212, 0.12); }
.pcard.empty { opacity: 0.38; filter: grayscale(0.4); }
.pcard-ico { width: 22px; flex-shrink: 0; padding-top: 2px; }
.pcard-ico img { width: 18px; height: 18px; object-fit: contain; }
.pcard-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: clamp(8px, 0.64vw, 11px);
  color: #f0e8ff;
}
.pcard-tier {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(8px, 0.58vw, 10px);
  letter-spacing: 0.1em;
  margin: 2px 0 5px;
}
.mag-t { color: var(--magenta-hot); }
.pur-t { color: var(--purple-hot); }
.cyn-t { color: var(--cyan-hot); }
.tag { font-weight: 800; }
.plus {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--cyan-hot);
  line-height: 1.2;
}
.minus {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--magenta);
  line-height: 1.2;
  margin-bottom: 6px;
}
.ptime {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(8px, 0.62vw, 11px);
  color: var(--purple-hot);
  letter-spacing: 0.04em;
}
.ptime.ready { color: var(--cyan); font-family: "Orbitron", sans-serif; letter-spacing: 0.12em; font-size: 9px; }

/* ===== BOTTOM RIGHT ===== */
#hud-br {
  position: absolute;
  right: 1.15%;
  bottom: 2.0%;
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--panel);
  border: 1.6px solid var(--gold-line);
  padding: 10px 12px 10px 14px;
  min-width: min(360px, 26vw);
  z-index: 9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.weap-col { flex: 1; min-width: 0; }
.weap-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(8px, 0.68vw, 11px);
  color: var(--gold-hot);
  margin-bottom: 6px;
}
.weap-stats {
  display: flex; gap: 16px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(10px, 0.8vw, 13px);
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.weap-stats b { color: #f0fff8; }
.weap-keys { display: flex; gap: 8px; align-items: center; }
.wkey {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  display: grid; place-items: center;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: var(--cyan-hot);
  background: rgba(0, 40, 40, 0.5);
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.25);
}
.wkey.teal { border-color: #2aa090; color: #8eefe0; }
.wkey.dim { border-color: #5a4030; color: #a08070; box-shadow: none; }
.wkey.hot {
  border-color: var(--orange);
  color: #fff0e0;
  background: radial-gradient(circle at 40% 40%, #ff7a28, #a03010);
  box-shadow: 0 0 10px rgba(255, 122, 40, 0.55);
}
.radar-wrap {
  position: relative;
  width: 108px; height: 108px;
  flex-shrink: 0;
}
.radar-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
#radar {
  position: absolute;
  inset: 12%;
  width: 76%; height: 76%;
  z-index: 1;
}

/* ===== MENU / RESULTS ===== */
#menu, #results {
  position: absolute; inset: 0; z-index: 12;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 28, 32, 0.55), rgba(4, 8, 10, 0.82));
}
.menu-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 22px 28px 26px;
  background: rgba(10, 16, 20, 0.88);
  border: 1.8px solid var(--gold-line);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), inset 0 0 40px rgba(201,164,74,0.05);
  max-width: min(820px, 92vw);
  text-align: center;
}
.title-sub {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}
.menu-blurb {
  max-width: 640px;
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #d0ddd8;
}
.menu-blurb b { color: var(--gold-hot); }
.menu-art {
  display: flex; gap: 28px; align-items: flex-end; justify-content: center;
  height: 140px;
}
.menu-art img {
  height: 120px; width: auto; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
}
.menu-art img:nth-child(2) { height: 140px; }
#btn-play, #btn-again {
  pointer-events: auto;
  margin-top: 6px;
  padding: 10px 28px;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: #1a1208;
  background: linear-gradient(180deg, var(--gold-hot), var(--gold-dim));
  border: 1px solid #fff3c0;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(230, 180, 70, 0.35);
}
#btn-play:hover, #btn-again:hover { filter: brightness(1.08); }
.menu-controls {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--gold-line);
  color: var(--gold-hot);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
}
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--muted);
}
.res-grid b { color: var(--gold-hot); font-size: 16px; display: block; margin-top: 2px; }

#banner {
  position: absolute; left: 50%; top: 13.5%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--gold-hot);
  text-shadow: 0 0 16px rgba(230,180,70,0.5);
  pointer-events: none;
}
#pause {
  position: absolute; inset: 0; z-index: 11;
  display: grid; place-items: center;
  background: rgba(4, 8, 10, 0.55);
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: 0.28em;
  font-size: 42px;
  color: var(--gold-hot);
}
#hint {
  position: absolute; left: 50%; bottom: 36%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(200, 220, 210, 0.55);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .tl-gear { width: 54px; height: 54px; }
  #hud-bc { width: min(720px, 64vw); }
  .para-cards { gap: 6px; }
}