:root {
  --cyan: #3defff;
  --cyan-hot: #00e8ff;
  --cyan-dim: #1aa8c4;
  --orange: #ff8a1a;
  --orange-hot: #ffb020;
  --gold: #ffd24a;
  --green: #3dff8a;
  --red: #ff4466;
  --pink: #e080ff;
  --navy: #070612;
  --panel: rgba(8, 16, 28, 0.86);
  --panel-2: rgba(10, 22, 36, 0.92);
  --stroke: rgba(0, 220, 255, 0.75);
  --stroke-o: rgba(255, 140, 30, 0.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090610;
  color: #e8f4ff;
  font-family: "Rajdhani", "Exo 2", sans-serif;
  user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  background: #090610;
}

#c {
  display: block;
  width: 100%;
  height: 100%;
}

.hidden { display: none !important; }

#float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.wtag {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  white-space: nowrap;
}
.wtag .hp-wrap {
  background: rgba(10, 8, 16, 0.88);
  border: 1px solid rgba(255, 90, 90, 0.7);
  border-radius: 3px;
  padding: 4px 8px 5px;
  min-width: 160px;
}
.wtag .hp-meta {
  display: flex;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-family: "Share Tech Mono", monospace;
  color: #ff9a6a;
  margin-bottom: 2px;
}
.wtag .hp-meta .burn { color: #ff6a3a; }
.wtag .hp-name {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.wtag .hp-name em { color: #ff6a7a; font-style: normal; font-size: 9px; }
.wtag .hp-pct { float: right; color: #ffd24a; font-family: "Share Tech Mono", monospace; font-size: 10px; }
.wtag .hp-bar {
  height: 4px;
  background: #1a1018;
  border-radius: 1px;
  overflow: hidden;
  margin-top: 3px;
}
.wtag .hp-bar i {
  display: block;
  height: 100%;
  width: 42%;
  background: linear-gradient(90deg, #ff4a3a, #ff8a40);
}

.wtag.pet .hp-wrap {
  border-color: rgba(255, 170, 40, 0.85);
  background: rgba(18, 12, 8, 0.9);
  min-width: 170px;
}
.wtag.pet .hp-name { color: #ffcc66; }
.wtag.pet .order {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #ffb020;
  font-family: "Share Tech Mono", monospace;
}

.wtag.player-tag .ring-lab {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #7ad8ff;
  text-shadow: 0 0 8px #00e8ff;
}

.floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 2px 8px #000;
}
.floater.crit {
  color: #ffd020;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.floater.combo {
  color: #ff8a20;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.floater.dps {
  color: #ffb060;
  font-size: 11px;
  font-family: "Share Tech Mono", monospace;
}
.floater.stasis {
  color: #9ad8ff;
  font-size: 10px;
  font-family: "Share Tech Mono", monospace;
  background: rgba(8, 20, 36, 0.8);
  border: 1px solid rgba(80, 180, 255, 0.5);
  padding: 2px 6px;
  border-radius: 2px;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

#hud-top {
  position: absolute;
  top: 1.2%;
  left: 1.1%;
  right: 1.1%;
  height: 78px;
  display: grid;
  grid-template-columns: 1.15fr 1.2fr 0.95fr;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(10, 16, 28, 0.92), rgba(8, 12, 22, 0.82));
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 8px 28px rgba(0, 0, 0, 0.45),
    -18px 0 40px rgba(0, 200, 255, 0.08),
    18px 0 40px rgba(255, 140, 20, 0.08);
  padding: 8px 14px 8px 12px;
}

#hud-tl {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo-dia {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 8px #00e8ff);
}
.brand-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}
.brand-sub {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--cyan);
  margin-top: 2px;
}

.vitals { flex: 1; min-width: 0; padding-top: 2px; }
.vital-row {
  display: grid;
  grid-template-columns: 132px 1fr 118px;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.vital-lab {
  font-size: 9px;
  letter-spacing: 0.14em;
  font-family: "Share Tech Mono", monospace;
  color: #9ec8d8;
}
.vital-lab.cyan { color: #7ad8f0; }
.vital-lab.orange { color: #ffb060; }
.vital-track {
  height: 7px;
  background: #0a1018;
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.vital-track.orange { border-color: rgba(255, 140, 30, 0.4); }
.vital-track i {
  display: block;
  height: 100%;
  width: 85%;
  background: linear-gradient(90deg, #0088aa, #00e8ff);
  box-shadow: 0 0 8px #00e8ff;
}
.vital-track.orange i {
  width: 71%;
  background: linear-gradient(90deg, #cc4a00, #ff9a20);
  box-shadow: 0 0 8px #ff8a1a;
}
.vital-val {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #d8f4ff;
  text-align: right;
}
.vital-val.orange { color: #ffc070; }
.vital-val .opt { color: var(--green); font-size: 10px; }

#hud-tc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.stage-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 40, 70, 0.55);
  border: 1px solid rgba(0, 220, 255, 0.55);
  border-radius: 4px;
  padding: 3px 14px;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan-hot);
}
.stage-div {
  width: 1px;
  height: 12px;
  background: rgba(0, 220, 255, 0.45);
}
.wave-name { color: #fff; }
.obj-line {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #c8e8f8;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
}
.obj-line b { color: #fff; font-weight: 800; }
.obj-sub {
  display: flex;
  gap: 18px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #8ab0c4;
  letter-spacing: 0.08em;
}
.obj-sub b { color: #ffb060; }
.timer { color: var(--cyan); }

#hud-tr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.score-block { text-align: right; }
.score-lab {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: #8ab0c4;
  font-family: "Share Tech Mono", monospace;
}
.score-num {
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.combo-block { text-align: right; }
.combo-lab {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-hot);
  letter-spacing: 0.08em;
}
.tr-stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #9ec8d8;
}
.tr-stats b { color: #fff; }
.tr-stats em { color: var(--cyan); font-style: normal; }

/* ===== BOTTOM LEFT AI ===== */
#hud-bl {
  position: absolute;
  left: 1.15%;
  bottom: 1.4%;
  width: 430px;
  pointer-events: auto;
}
.panel-ai {
  background: var(--panel);
  border: 1.5px solid var(--stroke-o);
  border-radius: 8px;
  padding: 10px 12px 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 24px rgba(255,140,20,0.08);
}
.ai-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ai-title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffe8c0;
}
.ai-title span { color: var(--orange-hot); }
.ai-active {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-active i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  display: inline-block;
}
.flame-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #ffc070;
}
.flame-track {
  flex: 1;
  height: 6px;
  background: #0a1018;
  border: 1px solid rgba(255,140,30,0.4);
  border-radius: 2px;
  overflow: hidden;
}
.flame-track i {
  display: block;
  height: 100%;
  width: 88%;
  background: linear-gradient(90deg, #cc4a00, #ffb020);
}
.abi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.abi {
  pointer-events: auto;
  cursor: pointer;
  background: rgba(6, 14, 24, 0.9);
  border: 1px solid rgba(0, 180, 220, 0.35);
  border-radius: 4px;
  color: #c8e0f0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 5px 6px 6px;
  font-family: "Rajdhani", sans-serif;
}
.abi.on {
  border-color: var(--orange-hot);
  box-shadow: 0 0 0 1px rgba(255,140,20,0.35) inset, 0 0 12px rgba(255,140,20,0.15);
  background: rgba(40, 22, 8, 0.9);
}
.abi kbd {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  color: var(--cyan);
  background: none;
  border: none;
}
.abi img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px #00e8ff);
}
.abi b {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.abi small {
  display: block;
  font-size: 9px;
  color: #8ab0c4;
  letter-spacing: 0.04em;
}
.directive {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #9ec8d8;
  letter-spacing: 0.04em;
}
.directive b { color: var(--orange-hot); }
.ai-note {
  font-size: 9px;
  color: #6a90a4;
  letter-spacing: 0.08em;
  margin-top: 3px;
  font-family: "Share Tech Mono", monospace;
}
.synergy {
  margin-top: 4px;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
}

/* ===== BOTTOM CENTER FORGE ===== */
#hud-bc {
  position: absolute;
  left: 50%;
  bottom: 1.4%;
  transform: translateX(-50%);
  width: min(640px, 46vw);
  pointer-events: auto;
}
.panel-forge {
  background: var(--panel-2);
  border: 1.5px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 10px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 20px rgba(0,200,255,0.08);
}
.forge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding: 0 4px;
}
.forge-title {
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cyan);
}
.forge-molten {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #9ec8d8;
}
.forge-molten b { color: #fff; }
.forge-molten em { color: var(--orange-hot); font-style: normal; }
.forge-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.slot {
  pointer-events: auto;
  cursor: pointer;
  background: rgba(6, 16, 28, 0.95);
  border: 1px solid rgba(0, 180, 220, 0.35);
  border-radius: 4px;
  color: #c8e0f0;
  padding: 5px 4px 6px;
  text-align: center;
}
.slot.deployed {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 220, 255, 0.2);
}
.slot.cd { opacity: 0.7; }
.slot.sel {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 210, 60, 0.25);
}
.slot-k {
  display: flex;
  justify-content: space-between;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #8ab0c4;
  padding: 0 2px;
}
.slot-k kbd {
  color: var(--cyan);
  background: none;
  border: none;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
}
.slot img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 2px auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0,220,255,0.35));
}
.slot-name {
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #fff;
  font-weight: 700;
}
.slot-st {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  color: var(--cyan);
  margin-top: 2px;
}
.slot-st.ready { color: var(--green); }

/* ===== BOTTOM RIGHT TACTICAL ===== */
#hud-br {
  position: absolute;
  right: 1.15%;
  bottom: 1.4%;
  width: 340px;
}
.panel-tac {
  background: var(--panel);
  border: 1.5px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 10px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.tac-head {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 6px;
}
.tac-head span { color: #8ab0c4; font-size: 10px; }
.tac-body { display: flex; gap: 10px; }
#radar {
  width: 92px;
  height: 92px;
  background: radial-gradient(circle, #041018 40%, #082030 100%);
  border: 1px solid rgba(0, 220, 255, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
}
.tac-info { min-width: 0; }
.tac-lock {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #8ab0c4;
  font-family: "Share Tech Mono", monospace;
}
.tac-name {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--orange-hot);
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.tac-line {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #9ec8d8;
  line-height: 1.35;
}
.tac-line b { color: #fff; }
.tac-line.warn b { color: var(--gold); }
.tac-line.burn { color: #ff8a40; }
.engine-line {
  margin-top: 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  color: #5a8094;
  letter-spacing: 0.04em;
}

/* ===== MENU / PAUSE / RESULTS ===== */
#menu, #pause, #results {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 10, 40, 0.55), rgba(4, 2, 12, 0.82));
}

.menu-card {
  width: min(560px, 92vw);
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(6, 10, 20, 0.96));
  border: 1.5px solid var(--stroke);
  border-radius: 12px;
  padding: 28px 32px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(0,180,255,0.1);
}
.menu-card.slim { width: min(380px, 90vw); padding: 28px; }
.menu-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.menu-brand img { width: 52px; height: 52px; filter: drop-shadow(0 0 10px #00e8ff); }
.menu-title {
  font-family: "Orbitron", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}
.menu-title.sm { font-size: 22px; margin-bottom: 16px; }
.menu-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: var(--cyan);
  font-weight: 700;
  margin-top: 4px;
}
.menu-kicker {
  margin: 10px 0 14px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--orange-hot);
}
.menu-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  margin-bottom: 12px;
}
.menu-art img {
  height: 140px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
.menu-art img.pet { height: 92px; }
.menu-blurb {
  font-size: 14px;
  line-height: 1.45;
  color: #c0d8e8;
  margin-bottom: 16px;
}
.menu-blurb b { color: #fff; }
.menu-controls {
  margin-top: 14px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #8ab0c4;
  line-height: 1.6;
}
kbd {
  display: inline-block;
  border: 1px solid rgba(0, 200, 255, 0.4);
  background: rgba(0, 30, 50, 0.6);
  color: var(--cyan);
  padding: 0 5px;
  border-radius: 3px;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
}

button {
  pointer-events: auto;
  cursor: pointer;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #00c8e8, #0088aa);
  color: #041018;
  border: none;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 13px;
  box-shadow: 0 0 18px rgba(0, 220, 255, 0.35);
}
button:hover { filter: brightness(1.1); }
button.ghost {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--stroke);
  box-shadow: none;
  margin-top: 10px;
}

.res-head {
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 16px 0 18px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  color: #8ab0c4;
}
.res-grid b { display: block; color: #fff; font-size: 18px; font-family: "Orbitron", sans-serif; }

@media (max-width: 1280px) {
  #hud-bl { width: 360px; }
  #hud-br { width: 300px; }
  #hud-bc { width: min(520px, 42vw); }
  .vital-row { grid-template-columns: 110px 1fr 100px; }
  .brand-title { font-size: 13px; }
}

@media (max-width: 900px) {
  #hud-top { grid-template-columns: 1fr; height: auto; }
  #hud-bl, #hud-br { width: 46%; }
  #hud-bc { width: 90%; bottom: 28%; }
}