:root {
  --paragon: #6dd0ff;
  --paragon-deep: #1d4d6b;
  --rogue: #ff5b6e;
  --rogue-deep: #6b1d2a;
  --ink: #e7eef7;
  --ink-dim: #92a0b3;
  --bg: #05060a;
  --warn: #ffd166;
  --ok: #8aff9a;
  font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* HTML `hidden` must beat our display:grid/flex overrides below. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  cursor: crosshair;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.topbar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  width: min(900px, 92vw);
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 13px;
}

.bar--paragon { color: var(--paragon); justify-self: end; }
.bar--rogue   { color: var(--rogue);   justify-self: start; }

.bar__label { opacity: 0.85; }

.bar__track {
  position: relative;
  width: 280px;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}

.bar--paragon .bar__track { transform: scaleX(-1); }
.bar--paragon .bar__fill  { transform-origin: right center; }

.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, currentColor, transparent 220%);
  box-shadow: 0 0 12px currentColor;
  transition: width 0.55s cubic-bezier(.2,.7,.2,1);
}

.bar--paragon .bar__fill { background: linear-gradient(90deg, var(--paragon), var(--paragon-deep)); }
.bar--rogue   .bar__fill { background: linear-gradient(90deg, var(--rogue),   var(--rogue-deep)); }

.bar__value {
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  text-align: center;
  font-size: 16px;
}

.bar.flash .bar__track { animation: flash 0.5s ease-out; }
@keyframes flash {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  40%  { box-shadow: 0 0 24px 4px currentColor; }
  100% { box-shadow: 0 0 0 0 currentColor; }
}

.planet-pip {
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  font-size: 13px;
  white-space: nowrap;
}
.planet-pip span { color: var(--ink); }

/* ---------- Reticle ---------- */
/* The reticle is positioned by JS via `top`/`left` (pixels OR 50% strings).
   `translate(-50%,-50%)` centers it on whatever anchor point we set —
   used to make it physically follow the OS cursor during ALIGN.
   The lock/strike states compose the same translate with a scale. */
.reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  color: var(--ink-dim);
  transform: translate(-50%, -50%);
  transition: color 0.2s, transform 0.2s;
}
.reticle svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }
.reticle__ring { stroke-dasharray: 6 4; }

.reticle[data-state="lock"] {
  color: var(--warn);
  transform: translate(-50%, -50%) scale(1.05);
  animation: pulse 1.1s ease-in-out infinite;
}
.reticle[data-state="strike"] {
  color: var(--rogue);
  transform: translate(-50%, -50%) scale(1.4);
}
@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 0 currentColor); }
  50%      { filter: drop-shadow(0 0 8px currentColor); }
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute;
  top: calc(50% + 80px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 80vw);
  padding: 14px 18px;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid var(--accent, rgba(255,255,255,0.2));
  border-left-width: 4px;
  backdrop-filter: blur(6px);
  text-align: left;
  animation: rise 0.25s ease-out;
}
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.tooltip__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent, var(--ink));
}
.tooltip__quote {
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
  margin: 4px 0 8px;
}
.tooltip__desc {
  font-size: 13px;
  color: var(--ink-dim);
}
.tooltip__hint {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--warn);
}

/* ---------- Banner ---------- */
.banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 28px;
  font-size: 22px;
  letter-spacing: 0.3em;
  font-weight: 700;
  background: rgba(8, 12, 20, 0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-top: 3px solid var(--accent, var(--ink));
  animation: bannerIn 0.35s ease-out;
}
@keyframes bannerIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Mission Brief ---------- */

/* Modal backdrop — opaque to clicks, almost transparent to the eye.
   Sits behind .brief but in front of the canvas, so:
     - .brief itself receives clicks normally (X button, links, scroll)
     - any click that misses .brief lands on the backdrop and dies there
     - the canvas (and therefore Game.update's strike check) never sees them
   The backdrop is rendered inside .hud (z-index: 5), so it naturally
   layers above the WebGL canvas without needing an explicit z-index. */
.brief-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: rgba(5, 6, 10, 0.42);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  animation: backdropIn 0.35s ease-out;
}
.brief-backdrop.fade-out {
  animation: backdropOut 0.4s ease-in forwards;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes backdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Attention shake — applied to the X when the player clicks the
   backdrop, so they associate "to dismiss the modal, hit the X". */
.brief__close.attention {
  animation: closeShake 0.45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes closeShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

.brief {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 14px 22px 16px;
  background: linear-gradient(180deg, rgba(8,12,20,0.92), rgba(8,12,20,0.78));
  border: 1px solid rgba(255,255,255,0.16);
  border-top: 2px solid var(--paragon);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  animation: briefIn 0.45s cubic-bezier(.2,.7,.2,1);
  /* Scroll inside the panel without forwarding wheel to the canvas. */
  pointer-events: auto;
}
.brief.fade-out { animation: briefOut 0.4s ease-in forwards; }
@keyframes briefIn {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes briefOut {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -10px); }
}
.brief__head {
  /* Three columns: [TAG] [NAME, right-aligned, takes remaining space] [X].
     Switched from flex space-between because we now need the close button
     pinned at the far right while the name still hugs it (rather than
     drifting to the centre when there are three flex children). */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 8px;
}
.brief__tag {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--paragon);
  font-weight: 700;
}
.brief__name {
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}
.brief__close {
  pointer-events: auto;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.brief__close:hover {
  background: var(--rogue);
  color: var(--bg);
  border-color: var(--rogue);
}
.brief__close:active { transform: scale(0.92); }
.brief__close:focus-visible {
  outline: 2px solid var(--paragon);
  outline-offset: 2px;
}
.brief__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* Legacy single-column fallback for old `manifest.brief: string[]` data. */
.brief__legacy {
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0.92;
}
.brief__legacy li {
  padding-left: 14px;
  position: relative;
}
.brief__legacy li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--ink-dim);
}

/* ---- Faction cards (top row of the brief) ------------------------------- */
.brief__factions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.brief__faction {
  padding: 10px 12px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--accent, var(--ink-dim));
}
.brief__faction-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.brief__faction-icon {
  font-size: 16px;
  line-height: 1;
}
.brief__faction-name {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent, var(--ink));
}
.brief__faction-quote {
  font-style: italic;
  color: var(--ink);
  opacity: 0.9;
  margin: 2px 0 6px;
  font-size: 12.5px;
}
.brief__faction-role {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.95;
}
.brief__faction-nature {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* ---- Mission section ---------------------------------------------------- */
.brief__mission {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief__mission-head {
  font-size: 12px;
  letter-spacing: 0.32em;
  font-weight: 700;
  color: var(--warn);
}
.brief__mission-sit {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.95;
}
.brief__mission-choices-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
  margin-top: 2px;
}
.brief__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.brief__choice {
  padding: 8px 10px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 2px solid var(--accent, var(--ink-dim));
}
.brief__choice-action {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--accent, var(--ink));
  margin-bottom: 4px;
}
.brief__choice-outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.92;
}
.brief__choice-outcomes li {
  padding-left: 12px;
  position: relative;
  line-height: 1.5;
}
.brief__choice-outcomes li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--ink-dim);
}

/* Stack columns on narrow screens so nothing crushes. */
@media (max-width: 520px) {
  .brief__factions, .brief__choices { grid-template-columns: 1fr; }
}

/* ---------- Waypoint ---------- */
.waypoint {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  color: var(--warn);
  /* The element itself is a 0-sized anchor; children float around it. */
  transition: opacity 0.2s;
}
.waypoint__chevron {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px currentColor);
  transform-origin: center;
}
.waypoint__info {
  position: absolute;
  /* Offset below the chevron */
  margin: 22px 0 0 -50px;
  width: 100px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  white-space: nowrap;
}
.waypoint__name {
  display: block;
  color: var(--warn);
}
.waypoint__dist {
  display: block;
  color: var(--ink-dim);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bottom hint ---------- */
.bottom-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.bottom-hint kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  margin: 0 2px;
  border: 1px solid rgba(255,255,255,0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: radial-gradient(ellipse at center, rgba(8,12,20,0.6), rgba(0,0,0,0.95));
  display: grid;
  place-items: center;
}
.overlay__inner {
  text-align: center;
  max-width: 640px;
  padding: 32px;
}
.title {
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--paragon), var(--ink), var(--rogue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.title span {
  display: inline-block;
  font-size: 0.5em;
  vertical-align: middle;
  margin: 0 12px;
  color: var(--ink-dim);
  letter-spacing: 0.4em;
  -webkit-text-fill-color: currentColor;
}
.subtitle {
  color: var(--ink-dim);
  letter-spacing: 0.3em;
  font-size: 14px;
  margin: 0 0 24px;
}
.rules {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.88;
  line-height: 1.9;
}
.cta {
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 28px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 14px;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.cta:hover { background: var(--ink); color: var(--bg); }
.cta:active { transform: translateY(1px); }

/* Secondary action — same geometry, dimmer chrome so the primary CTA wins. */
.cta--ghost {
  border-color: rgba(231, 238, 247, 0.35);
  color: var(--ink-dim);
}
.cta--ghost:hover {
  background: rgba(231, 238, 247, 0.08);
  color: var(--ink);
}

/* CTA row: places primary + secondary side-by-side under the rules list. */
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Credits overlay ---------- */
.credits-title {
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.32em;
  font-weight: 800;
  margin: 0 0 24px;
  background: linear-gradient(90deg, var(--paragon), var(--ink), var(--rogue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.credits-section {
  margin-bottom: 22px;
  text-align: left;
}
.credits-section__head {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--paragon);
  font-weight: 700;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
}
.credits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.credits-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  font-size: 14px;
}
.credits-item__what {
  color: var(--ink);
  letter-spacing: 0.06em;
}
.credits-item__who {
  color: var(--ink-dim);
  text-align: right;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.credits-item__src {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  opacity: 0.8;
}
.credits-link {
  color: var(--paragon);
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 208, 255, 0.4);
  pointer-events: auto;
  transition: color 0.15s, border-color 0.15s;
}
.credits-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* End screen */
.end-title {
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.2em;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--accent, var(--ink));
}
.end-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.end-stats > div { display: flex; flex-direction: column; gap: 4px; }
.end-stats__label {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}
.end-stats > div:first-child  { color: var(--paragon); }
.end-stats > div:last-child   { color: var(--rogue); }
.end-flavor {
  color: var(--ink-dim);
  font-style: italic;
  margin: 8px 0 28px;
  max-width: 520px;
  line-height: 1.6;
}