/* Flux Front v2 — HUD layout, bars, triangle pad, overlays (§11, §19 palette). */
:root {
  --p0: #3ee6ff;
  --p1: #ff5c4d;
  --matter: #ffb648;
  --volon: #5cff8a;
  --flux: #b06bff;
  --bg: #0a0e14;
  --panel: #0e141d;
  --line: #1c2836;
  --txt: #c7d6e8;
  --dim: #7d93ad;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: #05070b;
  color: var(--txt);
  font-family: 'Segoe UI', system-ui, sans-serif;
  height: 100%;
  overflow: hidden;
  user-select: none;
}
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 6px 10px;
  gap: 6px;
}

/* ---------- top bar: gate-charge race ---------- */
#topbar {
  width: min(1280px, 96vw);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pname { font-size: 13px; letter-spacing: 1.5px; font-weight: 600; white-space: nowrap; }
.pname.you { color: var(--p0); text-shadow: 0 0 8px rgba(62,230,255,.6); }
.pname.foe { color: var(--p1); text-shadow: 0 0 8px rgba(255,92,77,.6); }
.racebar {
  flex: 1;
  height: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.racebar .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(176,107,255,.55), var(--flux));
  box-shadow: 0 0 12px rgba(176,107,255,.8);
  border-radius: 8px;
  transition: none;
}
.racebar.foe { transform: scaleX(-1); }
.racebar.foe .fill {
  background: repeating-linear-gradient(90deg, rgba(176,107,255,.7) 0 22%, rgba(176,107,255,.35) 22% 25%);
  animation: sigPulse 1.6s ease-in-out infinite;
}
@keyframes sigPulse { 50% { filter: brightness(1.45); } }
#clockwrap { text-align: center; min-width: 86px; }
#clock {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
#clock.surge { color: var(--flux); text-shadow: 0 0 10px rgba(176,107,255,.9); }
#surgeTag {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--flux);
  animation: sigPulse 0.8s ease-in-out infinite;
}

/* ---------- battlefield ---------- */
#stage { position: relative; width: min(1280px, 96vw); flex: 1; min-height: 0; display: flex; }
#game {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: crosshair;
  display: block;
}

/* ---------- bottom bar ---------- */
#bottombar {
  width: min(1280px, 96vw);
  display: grid;
  grid-template-columns: 300px 180px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "res pad pal" "feed feed feed";
  gap: 4px 14px;
  align-items: center;
}
#resPanel { grid-area: res; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.resrow { display: flex; align-items: center; gap: 8px; }
.resrow label { font-size: 10px; letter-spacing: 2px; color: var(--dim); width: 56px; }
.bar {
  flex: 1;
  height: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.bar .fill { height: 100%; width: 0%; border-radius: 7px; }
.bar.matter .fill { background: linear-gradient(90deg, rgba(255,182,72,.45), var(--matter)); box-shadow: 0 0 10px rgba(255,182,72,.55); }
.bar.energy .fill { background: linear-gradient(90deg, rgba(62,230,255,.4), var(--p0)); box-shadow: 0 0 10px rgba(62,230,255,.55); }
.bar.volon .fill { background: linear-gradient(90deg, rgba(92,255,138,.4), var(--volon)); box-shadow: 0 0 10px rgba(92,255,138,.55); }
.bar .over {
  position: absolute; inset: 0; border-radius: 7px; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,60,48,.35) 0 8px, transparent 8px 16px);
}
.bar .over.on { opacity: 1; animation: sigPulse .7s linear infinite; }

#stancePad { grid-area: pad; justify-self: center; cursor: pointer; }

#palette { grid-area: pal; display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.pbtn {
  width: 52px; height: 56px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.pbtn:hover { border-color: var(--p0); transform: translateY(-2px); }
.pbtn.sel { border-color: var(--p0); box-shadow: 0 0 12px rgba(62,230,255,.5); }
.pbtn.cant { opacity: .38; }
.pbtn .pkey {
  position: absolute; top: 2px; left: 5px;
  font-size: 9px; color: var(--dim);
}
.pbtn .pcost {
  position: absolute; bottom: 4px; left: 6px;
  height: 3px; border-radius: 2px;
  background: var(--matter); opacity: .8;
  max-width: calc(100% - 12px);
}

#feed {
  grid-area: feed;
  height: 66px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 12px;
  padding: 0 4px 2px;
}
.fline { line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; }
.fline:last-child { opacity: 1; }
.fline:nth-last-child(2) { opacity: .8; }
.fline .ft { color: var(--dim); font-size: 10px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.fline.own { color: #bfeaf5; }
.fline.foe { color: #ffb3aa; }
.fline.sys { color: var(--flux); font-weight: 600; }

/* ---------- overlays ---------- */
.hidden { display: none !important; }
#banner {
  position: absolute; top: 26%; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 5;
}
#banner .btitle {
  font-size: 52px; font-weight: 800; letter-spacing: 10px;
  color: #fff; text-shadow: 0 0 26px var(--flux), 0 0 60px var(--flux);
}
#banner .bsub { font-size: 15px; letter-spacing: 3px; color: var(--txt); margin-top: 6px; }
#banner.pop { animation: bannerPop 2.4s ease-out forwards; }
@keyframes bannerPop {
  0% { opacity: 0; transform: scale(1.25); }
  12% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
#pauseOverlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,11,.55);
  font-size: 40px; letter-spacing: 12px; font-weight: 700; color: var(--txt);
}

#startScreen, #debrief {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(5,7,11,.9);
  backdrop-filter: blur(3px);
  text-align: center;
  border-radius: 6px;
  overflow: auto;
}
#startScreen h1 {
  font-size: 56px; letter-spacing: 16px; font-weight: 800; color: #fff;
  text-shadow: 0 0 30px var(--p0), 0 0 80px var(--flux);
}
#startScreen .sub { max-width: 640px; color: var(--dim); margin: 14px 0 22px; line-height: 1.5; font-size: 14px; }
.cmdrs { display: flex; gap: 12px; margin-bottom: 24px; }
.cmdr {
  width: 218px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  color: var(--txt); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .12s, box-shadow .12s;
}
.cmdr:hover { border-color: var(--p1); }
.cmdr.sel { border-color: var(--p1); box-shadow: 0 0 16px rgba(255,92,77,.4); }
.cmdr .cname { font-weight: 700; color: var(--p1); letter-spacing: 1px; }
.cmdr .cdoc { font-size: 11px; color: var(--txt); }
.cmdr .ctell { font-size: 11px; color: var(--dim); line-height: 1.45; }
#playBtn, #rematchBtn {
  font-size: 18px; letter-spacing: 6px; font-weight: 700;
  padding: 12px 46px; margin-top: 4px;
  color: #051018; background: var(--p0);
  border: none; border-radius: 8px; cursor: pointer;
  box-shadow: 0 0 24px rgba(62,230,255,.5);
  transition: transform .12s, box-shadow .12s;
}
#playBtn:hover, #rematchBtn:hover { transform: scale(1.05); box-shadow: 0 0 34px rgba(62,230,255,.8); }
.controls-hint { margin-top: 22px; font-size: 12px; color: var(--dim); line-height: 1.7; max-width: 720px; }
.controls-hint b { color: var(--txt); }

/* ---------- debrief ---------- */
.dwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; }
#debrief h2 { font-size: 42px; letter-spacing: 12px; font-weight: 800; }
#debrief h2.vwin { color: var(--p0); text-shadow: 0 0 26px rgba(62,230,255,.8); }
#debrief h2.vloss { color: var(--p1); text-shadow: 0 0 26px rgba(255,92,77,.8); }
.dhow { color: var(--dim); font-size: 13px; letter-spacing: 1px; }
#dgraph { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.dhl { display: flex; flex-direction: column; gap: 4px; max-width: 740px; }
.hline { font-size: 13px; color: var(--txt); text-align: left; }
.hline b { color: var(--matter); }
.dstats table { border-collapse: collapse; font-size: 12px; }
.dstats th, .dstats td { padding: 2px 14px; text-align: right; }
.dstats td:first-child { text-align: left; color: var(--dim); }
.dstats th:nth-child(2), .dstats td:nth-child(2) { color: var(--p0); }
.dstats th:nth-child(3), .dstats td:nth-child(3) { color: var(--p1); }
.career { margin-top: 6px; font-size: 12px; color: var(--dim); }
.career b { color: var(--txt); }

/* ---------- tooltip ---------- */
#tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  max-width: 260px;
  background: rgba(10,16,24,.95);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px; line-height: 1.5; color: var(--txt);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
#tooltip b { color: #fff; }
#tooltip .tm { color: var(--matter); }
#tooltip .te { color: var(--p0); }
#tooltip .td { color: var(--dim); font-size: 11px; }
#tooltip .foe-tag { color: var(--p1); font-size: 10px; letter-spacing: 1px; }
#tooltip i { color: var(--dim); }