/* ===========================================================================
   GALAXYMAP — Imperial holographic tactical display
   ---------------------------------------------------------------------------
   Direction: cold terminal holography. Think a Star Destroyer's tactical pit —
   a bright blue-white projection standing in a dark room, with amber and red
   reserved for data and threats. Menacing through precision and coldness, not
   through darkness.

   Brightness rules, learned the hard way:
     - the projection field is the brightest thing on screen; the chrome is not
     - scanlines and grain are texture, not a filter — keep them under 15%
     - the vignette frames, it does not swallow
     - planet art stays legible: light desaturation, never dimming
     - every text colour clears WCAG AA against its own panel

   Performance rules, because this is captured to a GMod render target:
     - no backdrop-filter anywhere
     - animate transform/opacity only
     - animation confined to battles and contested systems
   =========================================================================== */

:root{
  /* structure — lifted well off pure black so panels read as metal, not void */
  --void:#080e15;
  --hull:#111b25;
  --hull-2:#16222e;
  --plate:#1b2937;
  --seam:#2b4256;
  --seam-hot:#3d5d76;
  --edge:#5b7f9b;

  /* holography — the cold blue-white projection */
  --holo:#8fe3ff;
  --holo-mid:#4fbede;
  --holo-dim:#2b7593;
  --holo-glow:rgba(143,227,255,.20);

  /* data */
  --amber:#ffc25c;
  --amber-mid:#d99a33;
  --alert:#ff5d4a;
  --ok:#5fd39a;

  /* text — all AA or better on --hull */
  --bright:#f2f8fc;
  --pale:#dceaf4;
  --ghost:#9db4c6;
  --faint:#6d8698;

  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --cond:"Bahnschrift","DIN Condensed","Oswald","Arial Narrow",Impact,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--void);
  color:var(--pale);
  font-family:var(--mono);
  font-size:13px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------- overlays --- */
/* All three are texture. Together they must never cost more than ~12% of the
   image, or the map stops being readable — which is what went wrong before. */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.030;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
.scan{
  position:fixed;inset:0;pointer-events:none;z-index:901;opacity:.10;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.5) 3px 4px);
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:899;
  background:radial-gradient(ellipse 80% 74% at 50% 48%,rgba(0,0,0,0) 55%,rgba(2,5,9,.55) 100%);
}

/* --------------------------------------------------------------- layout --- */
.frame{
  position:relative;height:100vh;width:100vw;
  display:grid;
  grid-template-columns:262px 1fr 262px;
  grid-template-rows:56px 1fr 32px;
  grid-template-areas:"head head head" "left stage right" "foot foot foot";
  gap:1px;background:var(--seam);
}

/* Angular plate with cut corners, plus a lit top edge so it reads as metal. */
.plate{
  background:linear-gradient(180deg,var(--hull-2) 0%,var(--hull) 55%,#0d161f 100%);
  position:relative;
  box-shadow:inset 0 1px 0 rgba(143,227,255,.10);
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));
}

.head{grid-area:head;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.head .id{display:flex;align-items:baseline;gap:15px}
.head h1{
  font-family:var(--cond);font-size:22px;font-weight:600;margin:0;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bright);
  text-shadow:0 0 18px rgba(143,227,255,.35);
}
.head .sub{font-size:10px;letter-spacing:.28em;color:var(--holo-mid);text-transform:uppercase}
.head .right{display:flex;align-items:center;gap:20px;font-size:10.5px;letter-spacing:.16em;color:var(--ghost)}
.clock{color:var(--holo);font-variant-numeric:tabular-nums;letter-spacing:.1em}

.classified{
  color:var(--alert);border:1px solid var(--alert);padding:3px 10px;
  font-size:9.5px;letter-spacing:.24em;font-family:var(--cond);
  background:rgba(255,93,74,.07);
}

.left{grid-area:left}
.right{grid-area:right}
.side{padding:15px 15px 8px;overflow:hidden;display:flex;flex-direction:column}
.side h2{
  font-family:var(--cond);font-size:11px;letter-spacing:.24em;font-weight:600;
  color:var(--holo);margin:0 0 10px;text-transform:uppercase;
  border-bottom:1px solid var(--seam-hot);padding-bottom:7px;
}
.side h2:not(:first-child){margin-top:18px}
.side .scrollpane{overflow-y:auto;flex:1;min-height:0}
.side .scrollpane::-webkit-scrollbar{width:5px}
.side .scrollpane::-webkit-scrollbar-thumb{background:var(--seam-hot)}

.foot{
  grid-area:foot;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:9.5px;letter-spacing:.2em;color:var(--ghost);
}
.link{color:var(--holo);text-decoration:none}
.link:hover{text-decoration:underline;color:var(--bright)}

/* ---------------------------------------------------------------- stage --- */
.stage{grid-area:stage;position:relative;background:#060b11;overflow:hidden}

/* The projection volume — the brightest thing on screen, as it should be. */
.volume{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:98%;height:96%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(143,227,255,.20) 0%,
      rgba(79,190,222,.10) 38%,
      rgba(43,117,147,.045) 62%,
      rgba(0,0,0,0) 78%);
}
/* A faint emitter glow at the base sells "projected from below". */
.volume:after{
  content:"";position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:42%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(143,227,255,.22),rgba(0,0,0,0) 70%);
}

#lanes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#markers{position:absolute;inset:0;z-index:3}

/* -------------------------------------------------------------- systems --- */
.sys{position:absolute;transform:translate(-50%,-50%);z-index:5}
.sys-hit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;cursor:pointer;background:none;border:0;padding:0;
}
/* Octagonal clip — machined, not organic. */
.sys-disc{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;overflow:hidden;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:#16222e;
  box-shadow:0 0 14px rgba(143,227,255,.22);
}
/* Planet art stays legible: light desaturation, slightly lifted, never dimmed. */
.sys-disc img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.18) contrast(1.06) brightness(1.12) saturate(.9);
}
/* Faction tint, kept light enough that the planet still reads as a planet. */
.sys-disc:after{
  content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  opacity:.55;background:var(--fc,#7a8994);
}

/* Corner brackets — the tactical reticle. */
.sys-reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;pointer-events:none}
.sys-reticle span{position:absolute;width:10px;height:10px;border:1px solid var(--fc,#7a8994);opacity:1}
.sys-reticle span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.sys-reticle span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.sys-reticle span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.sys-reticle span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.sys-label{
  position:absolute;left:50%;top:calc(50% + 32px);transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;text-align:center;
}
.sys-name{
  font-family:var(--cond);font-size:13px;letter-spacing:.20em;color:var(--bright);
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(6,11,17,1),0 0 4px rgba(6,11,17,1),0 1px 2px #000;
}
.sys-owner{display:block;font-size:9px;letter-spacing:.16em;color:var(--fc,#9db4c6);margin-top:2px;
  text-shadow:0 0 6px rgba(6,11,17,.95)}
.sys-garrison{
  position:absolute;left:calc(50% + 21px);top:calc(50% - 24px);
  font-size:9px;letter-spacing:.06em;color:#1a1206;font-weight:700;
  background:var(--amber);padding:1px 5px;
}
.sys.contested .sys-reticle span{border-color:var(--alert);animation:blink 1.1s steps(2) infinite}
.sys.contested .sys-disc{box-shadow:0 0 16px rgba(255,93,74,.45)}
@keyframes blink{50%{opacity:.3}}

/* --------------------------------------------------------------- fleets --- */
.flt{position:absolute;transform:translate(-50%,-50%);z-index:4;cursor:pointer;background:none;border:0;padding:0}
.flt-frame{
  /* display:block is required — position:relative alone leaves this <span>
     inline, and inline elements ignore width and height. */
  position:relative;display:block;width:28px;height:28px;
  border:1px solid rgba(255,194,92,.75);
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
  background:rgba(16,26,36,.85);
}
.flt-frame img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;filter:brightness(1.25) saturate(.85)}
.flt-name{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;
  font-family:var(--cond);font-size:9px;letter-spacing:.16em;color:var(--amber);
  white-space:nowrap;text-shadow:0 0 8px rgba(6,11,17,1),0 1px 2px #000;
}
.flt.anchored .flt-frame{width:22px;height:22px;border-color:rgba(255,194,92,.6)}
.flt.anchored .flt-name{font-size:8px;opacity:.92}

/* -------------------------------------------------------------- battles --- */
.btl{position:absolute;transform:translate(-50%,-50%);z-index:6;cursor:pointer;background:none;border:0;padding:0}
.btl-core{position:relative;width:48px;height:48px;display:block}
.btl-flare{
  position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff8e4 0%,var(--amber) 32%,rgba(255,93,74,.65) 62%,rgba(0,0,0,0) 72%);
  animation:flare 1.35s ease-in-out infinite;
}
@keyframes flare{0%,100%{transform:translate(-50%,-50%) scale(.72);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.5);opacity:1}}
.btl-shock{
  position:absolute;inset:0;border:1px solid var(--alert);border-radius:50%;opacity:0;
  animation:shock 2.4s ease-out infinite;
}
@keyframes shock{0%{transform:scale(.3);opacity:.9}70%{opacity:0}100%{transform:scale(1.3);opacity:0}}
.btl-ring{position:absolute;inset:4px;border:1px dashed rgba(255,194,92,.85);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btl-tag{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;
  font-family:var(--cond);font-size:9px;letter-spacing:.22em;white-space:nowrap;
  color:#1a0906;background:var(--alert);padding:1px 7px;font-weight:600;
}
.btl.forming .btl-tag{background:var(--amber);color:#1a1206}
.btl.forming .btl-flare{animation-duration:2.4s;opacity:.65}
.btl.retreating .btl-tag{background:var(--faint);color:#0b1218}
.btl.retreating .btl-flare,.btl.retreating .btl-shock{animation:none;opacity:.4}

/* Lanes and tracer fire — bright enough to actually trace by eye. */
.lane{stroke:rgba(143,227,255,.30);stroke-width:1.3}
.lane.major{stroke:rgba(143,227,255,.52);stroke-width:2.1}
.tracer{stroke:var(--alert);stroke-width:1.4;stroke-dasharray:3 7;opacity:.9;animation:tracer .85s linear infinite}
@keyframes tracer{to{stroke-dashoffset:-20}}

/* --------------------------------------------------------------- panels --- */
.stat{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:11px;letter-spacing:.06em}
.stat .sw{width:10px;height:10px;flex:none;background:var(--fc);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.stat .nm{flex:1;color:var(--pale);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .ct{color:var(--holo);font-variant-numeric:tabular-nums;font-weight:600}

.frow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(43,66,86,.55);font-size:11px}
.frow img{width:17px;height:17px;object-fit:contain;flex:none;filter:brightness(1.2)}
.frow .fn{flex:1;color:var(--pale);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fw{color:var(--amber-mid);font-size:9px;letter-spacing:.1em}

.logline{font-size:10.5px;line-height:1.55;color:var(--ghost);padding:4px 0;border-bottom:1px solid rgba(43,66,86,.4)}
.logline .t{color:var(--holo-mid);margin-right:7px}

.blist{border:1px solid rgba(255,93,74,.45);background:rgba(255,93,74,.05);padding:8px 10px;margin-bottom:7px;cursor:pointer}
.blist:hover{border-color:var(--alert);background:rgba(255,93,74,.11)}
.blist .bn{font-family:var(--cond);font-size:12px;letter-spacing:.14em;color:var(--bright);text-transform:uppercase}
.blist .bs{font-size:9px;letter-spacing:.18em;color:var(--alert);margin-top:2px}

.empty{color:var(--faint);font-size:10.5px;letter-spacing:.14em;padding:7px 0}

/* ---------------------------------------------------------------- modal --- */
.modal{position:fixed;inset:0;background:rgba(4,8,13,.88);z-index:1000;display:none;align-items:center;justify-content:center}
.modal.open{display:flex}
.card{
  width:min(640px,92vw);max-height:86vh;overflow:auto;
  background:linear-gradient(180deg,var(--plate),var(--hull));
  border:1px solid var(--seam-hot);padding:28px 30px;position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(143,227,255,.14);
  clip-path:polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px));
}
.card h3{font-family:var(--cond);font-size:26px;letter-spacing:.16em;margin:0 0 4px;color:var(--bright);text-transform:uppercase}
.card .kicker{font-size:9.5px;letter-spacing:.26em;color:var(--holo);margin-bottom:16px}
.card .body{font-size:12.5px;line-height:1.7;color:var(--pale);white-space:pre-wrap}
.card .hero{width:100%;height:160px;object-fit:cover;filter:grayscale(.15) brightness(1.08);margin-bottom:18px;border:1px solid var(--seam)}
.card .row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid rgba(43,66,86,.6);font-size:11.5px}
.card .row b{color:var(--ghost);font-weight:400;letter-spacing:.12em}
.card .close{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--ghost);font-size:22px;cursor:pointer;line-height:1}
.card .close:hover{color:var(--alert)}
.tagline{display:inline-block;border:1px solid;padding:3px 10px;font-size:9.5px;letter-spacing:.2em;font-family:var(--cond)}

/* ---------------------------------------------------------------- embed --- */
/* Chrome-less variant for the in-game holotable. Slightly hotter, because it is
   viewed through a render target on a lit surface. */
body.embed{background:transparent}
body.embed .frame{grid-template-columns:0 1fr 0;grid-template-rows:46px 1fr 0;gap:0;background:transparent}
body.embed .left,body.embed .right,body.embed .foot{display:none}
body.embed .head{background:none;clip-path:none;box-shadow:none;justify-content:center;gap:22px}
body.embed .stage{background:transparent}
body.embed .volume{
  background:radial-gradient(ellipse at 50% 50%,
    rgba(143,227,255,.26) 0%,rgba(79,190,222,.13) 38%,rgba(43,117,147,.06) 62%,rgba(0,0,0,0) 78%);
}
body.embed .vignette{background:radial-gradient(ellipse 84% 78% at 50% 52%,rgba(0,0,0,0) 60%,rgba(2,5,9,.42) 100%)}
body.embed .scan{opacity:.07}
body.embed .grain{opacity:.022}

/* Motion off: reduced-motion users, and ?anim=low on the ambient holotable. */
body.anim-low .btl-flare,body.anim-low .btl-shock,body.anim-low .btl-ring,
body.anim-low .tracer,body.anim-low .sys.contested .sys-reticle span{animation:none}
@media (prefers-reduced-motion:reduce){
  .btl-flare,.btl-shock,.btl-ring,.tracer,.sys.contested .sys-reticle span{animation:none}
}

/* --------------------------------------------------------------- mobile --- */
@media (max-width:900px){
  body{overflow:auto}
  .frame{grid-template-columns:1fr;grid-template-rows:50px 60vh auto auto 30px;
    grid-template-areas:"head" "stage" "left" "right" "foot";height:auto}
  .head h1{font-size:15px;letter-spacing:.14em}
  .head .sub{display:none}
  .side{max-height:none}
  .side .scrollpane{max-height:230px}
}