:root {
  --gold: #d4a84a;
  --gold-hot: #fbe072;
  --gold-deep: #b48a3f;
  --gold-dim: #8a6a32;
  --hp: #2de173;
  --shield: #32d7ff;
  --steam: #f0b428;
  --heat: #e8872a;
  --combo: #e85a20;
  --teal: #3ec8c8;
  --teal-hot: #6ee8e0;
  --navy: #0c141c;
  --ink: #f3e6c0;
  --muted: #8aa0a8;
  --panel: rgba(10, 16, 24, 0.86);
  --stroke: #b48a3f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05080c;
  color: var(--ink);
  font-family: "Rajdhani", "Segoe UI", sans-serif;
  user-select: none;
}
#stage, #c {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#c { z-index: 0; }
#float-layer {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.hidden { display: none !important; }

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

.panel {
  background: var(--panel);
  border: 1.5px solid var(--stroke);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.45);
}
.panel-gold { border-color: #c49a48; }
.panel-teal { border-color: #3ec8c8; box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 18px rgba(62,200,200,0.18); }

/* ---------- top left ---------- */
#hud-tl {
  position: absolute;
  top: 10px; left: 12px;
  width: min(390px, 25vw);
}
.tl-row { display: flex; gap: 10px; padding: 10px 12px 6px; }
.portrait-wrap {
  width: 78px; height: 78px; flex: 0 0 78px;
  display: grid; place-items: center;
}
.portrait-wrap img {
  width: 78px; height: 78px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(212,168,74,0.45));
}
.tl-stats { flex: 1; min-width: 0; padding-top: 2px; }
.stat-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.stat-lab {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #d8c48a;
  font-weight: 700;
}
.stat-num {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #d8c48a;
  white-space: nowrap;
}
.stat-track {
  height: 8px;
  background: #141c22;
  border: 1px solid #2a3640;
  border-radius: 6px;
  overflow: hidden;
}
.stat-track.thin { height: 7px; }
.stat-track i { display: block; height: 100%; width: 100%; transform-origin: left center; }
.fill-hp { background: linear-gradient(90deg, #1aa85a, #2de173); }
.fill-sh { background: linear-gradient(90deg, #1aa8d0, #32d7ff); }
.fill-st { background: linear-gradient(90deg, #c88818, #f0b428); }
.fill-heat { background: linear-gradient(90deg, #c86818, #e8872a); }

.lives-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 8px 18px;
}
#lives-icons { display: flex; gap: 4px; }
.life-pip {
  width: 16px; height: 16px;
  background: conic-gradient(from 30deg, #d4a84a, #fbe072, #d4a84a);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 0 6px rgba(251,224,114,0.5);
}
.life-pip.off { opacity: 0.22; filter: grayscale(1); }
.lives-lab { font-size: 11px; letter-spacing: 0.14em; color: #d8c48a; font-weight: 700; }

.res-pill {
  margin-top: 6px;
  display: flex; gap: 18px;
  padding: 5px 14px;
  background: rgba(10,16,24,0.82);
  border: 1.5px solid #c49a48;
  border-radius: 9px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #d8c48a;
}
.res-pill .scrap i, .res-pill .nectar i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px;
}
.res-pill .scrap i { background: #fbe072; box-shadow: 0 0 6px #fbe072; }
.res-pill .nectar i { background: #2de173; box-shadow: 0 0 6px #2de173; }
.res-pill .nectar { color: #6ee8a8; }

/* ---------- top center ---------- */
#hud-tc {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: min(680px, 42vw);
}
.title-banner {
  background: rgba(10,16,24,0.9);
  border: 1.5px solid #c49a48;
  border-radius: 10px;
  padding: 8px 22px 7px;
  text-align: center;
}
.title-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.title-word {
  font-family: "Cinzel", "Orbitron", serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: clamp(14px, 1.35vw, 20px);
  color: #fbe072;
  text-shadow: 0 0 12px rgba(251,224,114,0.35);
}
.hex-deco {
  width: 14px; height: 14px;
  background: linear-gradient(180deg, #fbe072, #b48a3f);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.title-sub {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.wave-lab { color: #e85a20; }
.obj-lab { color: #8fd8e8; letter-spacing: 0.16em; }
.time-lab { color: #d4a84a; }

/* ---------- top right ---------- */
#hud-tr {
  position: absolute;
  top: 10px; right: 12px;
  width: min(300px, 22vw);
}
.score-panel { padding: 8px 14px 10px; }
.score-head {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.14em; color: #d4a84a; font-weight: 700;
}
.score-head .high { color: #8aa0a8; font-size: 10px; }
.score-num {
  font-family: "Cinzel", serif;
  font-size: clamp(26px, 2.4vw, 36px);
  color: #fbe072;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(251,224,114,0.3);
}
.combo-box {
  margin-top: 4px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px;
  border: 1.5px solid #e85a20;
  border-radius: 4px;
  background: rgba(80, 20, 8, 0.45);
  font-size: 12px; letter-spacing: 0.12em; font-weight: 800;
  color: #f0a060;
}
.combo-box .frenzy { color: #e85a20; }
.combo-box.hot {
  box-shadow: 0 0 12px rgba(232,90,32,0.45);
}

/* ---------- bottom left ---------- */
#hud-bl {
  position: absolute;
  left: 12px; bottom: 14px;
  width: min(400px, 28vw);
}
.weap-panel { padding: 10px 14px 10px; }
.weap-title {
  font-size: 13px; letter-spacing: 0.12em; font-weight: 800;
  color: #fbe072; margin-bottom: 6px;
}
.weap-line {
  font-size: 12px; letter-spacing: 0.08em; font-weight: 700;
  color: #c8d8c0; margin-top: 3px;
}
.weap-line.cd { color: #8aa0a8; }

/* ---------- bottom center ---------- */
#hud-bc {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  width: min(720px, 46vw);
}
.rewind-panel {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 14px 8px 8px;
}
.rewind-icon {
  width: 78px; height: 78px; object-fit: contain; flex: 0 0 78px;
  filter: drop-shadow(0 0 8px rgba(62,200,200,0.4));
}
.rewind-body { flex: 1; min-width: 0; }
.rewind-head {
  display: flex; justify-content: space-between; align-items: center;
}
.rewind-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.16em;
  font-size: 16px;
  color: #fbe072;
}
.ready-pill {
  font-size: 11px; letter-spacing: 0.1em; font-weight: 800;
  color: #0c141c;
  background: #3ec8c8;
  padding: 3px 10px;
  border-radius: 4px;
}
.ready-pill.cooling {
  background: #2a3640; color: #8aa0a8;
}
.timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: center;
  margin: 6px 0 4px;
}
.tl-lab, .tl-now {
  font-size: 10px; letter-spacing: 0.06em; color: #8fd8e8; font-weight: 700;
  white-space: nowrap;
}
.tl-track {
  height: 10px;
  background: #16343a;
  border: 1px solid #2a6870;
  border-radius: 6px;
  overflow: hidden;
}
.tl-track i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #2a8a90, #5ee0d8);
  transform-origin: left center;
}
.rewind-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.08em; color: #d8c48a; font-weight: 700;
}
.rewind-note { color: #8aa0a8; font-size: 10px; }

/* ---------- bottom right radar ---------- */
#hud-br {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 176px;
}
.radar-lab {
  text-align: center;
  font-size: 10px; letter-spacing: 0.14em; color: #8fd8e8; font-weight: 700;
  margin-bottom: 2px;
}
.radar-frame {
  position: relative;
  width: 176px; height: 176px;
}
.radar-bezel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.0; /* drawn on canvas; keep img as fallback asset */
}
#radar {
  position: absolute; inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  border-radius: 50%;
}
.compass {
  position: absolute;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: #fbe072;
}
.compass.n { top: 6px; left: 50%; transform: translateX(-50%); }
.compass.s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.compass.e { right: 8px; top: 50%; transform: translateY(-50%); }
.compass.w { left: 8px; top: 50%; transform: translateY(-50%); }

/* ---------- world floaters ---------- */
.floater {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.floater .name {
  font-size: 11px; letter-spacing: 0.12em; font-weight: 800;
  color: #fbe072; text-shadow: 0 1px 3px #000;
}
.floater .hp-wrap {
  width: 88px; height: 6px;
  margin: 3px auto 0;
  background: #141c22;
  border: 1px solid #2a3640;
  border-radius: 4px; overflow: hidden;
}
.floater .hp-wrap i { display: block; height: 100%; background: #2de173; }
.floater.boss .name { color: #ffd070; }
.floater.boss .hp-wrap i { background: #e84a3a; }
.crit-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", serif;
  font-weight: 800;
  color: #fbe072;
  text-shadow: 0 0 8px #e85a20, 0 2px 0 #000;
  pointer-events: none;
}
.weak-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px; letter-spacing: 0.1em; font-weight: 800;
  color: #e85a20;
  text-shadow: 0 1px 3px #000;
}
.rewind-toast {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 12px; letter-spacing: 0.14em; font-weight: 800;
  color: #5ee0d8;
  text-shadow: 0 0 8px #1a6870, 0 1px 3px #000;
}

/* ---------- menu / results ---------- */
#menu, #results {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(20,28,36,0.55), rgba(4,8,12,0.82));
}
.menu-card {
  width: min(720px, 90vw);
  background: rgba(10,16,24,0.92);
  border: 1.5px solid #c49a48;
  border-radius: 14px;
  padding: 28px 36px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
.title-row.big .title-word { font-size: clamp(18px, 2vw, 26px); }
.menu-sub {
  margin-top: 8px;
  font-size: 12px; letter-spacing: 0.2em; color: #8fd8e8; font-weight: 700;
}
.menu-blurb {
  margin: 16px auto 8px;
  max-width: 560px;
  font-size: 15px; line-height: 1.45; color: #d8c48a;
}
.menu-art {
  display: flex; justify-content: center; align-items: flex-end; gap: 24px;
  height: 150px; margin: 8px 0 12px;
}
.menu-art img { object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5)); }
#menu-hero { height: 140px; }
#menu-seed { height: 150px; }
#btn-play, #btn-again {
  pointer-events: auto;
  cursor: pointer;
  border: 1.5px solid #fbe072;
  background: linear-gradient(180deg, #3a2a10, #1a1408);
  color: #fbe072;
  font-family: "Cinzel", serif;
  letter-spacing: 0.2em;
  font-size: 15px;
  padding: 10px 28px;
  border-radius: 8px;
}
#btn-play:hover, #btn-again:hover { background: #4a3614; }
.menu-controls {
  margin-top: 14px;
  font-size: 13px; color: #8aa0a8; letter-spacing: 0.04em;
  line-height: 1.6;
}
kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid #c49a48;
  border-radius: 3px;
  color: #fbe072;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
}
.res-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 18px 0;
  font-size: 14px; letter-spacing: 0.12em; color: #d8c48a;
}
.res-grid b { color: #fbe072; display: block; font-size: 22px; font-family: "Cinzel", serif; }