/* Loaded last (see index.html's <head>, which links every UI kit file
   before this one): the global base + the few overlays that live outside
   the UI kit's scaled screens (they follow the mouse or cover the whole
   window). */
:root{
  --void: #05060a;
  --danger: #ff6b6e;
}
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background: #000;
  font-family: var(--uiFontBody);
  color: var(--uiText);
}
/* Full-window canvas; the main scene only renders into the HUD's viewport
   rect (scene/viewRect.js), the rest stays black behind the panels. */
#stage{ position:fixed; inset:0; }
canvas{ display:block; touch-action:none; cursor: grab; }

/* Themed scrollbar for scrollable UI (fleet list, event log, windows) — Firefox */
*{ scrollbar-width: thin; scrollbar-color: #3c55d8 rgb(255 255 255 / .04); }
/* Themed scrollbar — Chromium/WebKit */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgb(255 255 255 / .04); }
*::-webkit-scrollbar-thumb{
  background-color: #3c55d8; border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color: #6f86ff; }
*::-webkit-scrollbar-corner{ background: transparent; }

/* One generic "is this hidden" rule instead of ~15 separate `#id.hidden{
   display:none; }` rules (one per panel/overlay), each of which had to be
   remembered by hand for every new element that gets JS-toggled `.hidden` —
   #dronePanel's was missing for a long time, which meant the class was
   toggled correctly by JS the whole time but visually did nothing (see
   docs/architecture.md's drone-panel bullets). `!important` is deliberate, not
   incidental: several base rules this overrides (#banner, #outdatedOverlay,
   .uiWindow, the HUD's absolutely-positioned children) set their own
   `display` directly, at higher specificity than a plain `.hidden` class
   alone could beat — `!important` sidesteps that comparison entirely
   instead of requiring every future hideable element to remember to write
   `#itsOwnId.hidden{...}` just to out-specificity its own base rule. */
.hidden{ display:none !important; }

/* Hover tooltip over a planet/black hole (scene/tooltip.js). */
#bodyTooltip{
  position:fixed; z-index:6; pointer-events:none;
  padding: 8px 14px 9px; min-width: 160px;
  background: rgb(0 2 12 / .92); border: 1.5px solid var(--uiFrame); border-radius: 8px;
  box-shadow: 0 0 8px var(--uiFrameGlow);
}
#bodyTooltip .ttTitle{
  font-family: var(--uiFontLabel); font-size: 15px; letter-spacing: .3px;
  color: #ffd98f; margin-bottom: 4px;
}
#bodyTooltip .ttRow{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size: 13.5px; color: #c7d0ff; margin: 1px 0; gap: 16px;
}
#bodyTooltip .ttRow b{ color: #fff; font-weight:500; }

/* Drag-select rectangle and the course-order pulse (scene/controls.js). */
#selectBox{
  position:fixed; z-index:7; border: 1px solid rgb(245 189 92 / .9);
  background: rgb(245 189 92 / .1);
  display:none; pointer-events:none;
}
#cmdFlash{
  position:fixed; z-index:7; width:34px; height:34px; margin:-17px 0 0 -17px;
  border: 2px solid #f5bd5c; border-radius:50%;
  pointer-events:none; opacity:0;
  transform: scale(0.4);
}
#cmdFlash.fire{
  animation: cmdPulse 0.5s ease-out forwards;
}
@keyframes cmdPulse{
  0%{ opacity:1; transform:scale(0.3); }
  100%{ opacity:0; transform:scale(1.6); }
}

/* The order menu after a course click (ui/hud/orderMenu.js). */
#orderMenu{
  position:fixed; z-index:8; display:flex; flex-direction:column; gap:4px;
  padding: 6px; min-width: 112px;
  background: rgb(0 2 12 / .92); border: 1.5px solid var(--uiFrame); border-radius: 8px;
  box-shadow: 0 0 8px var(--uiFrameGlow);
}
#orderMenu button{
  font-family: var(--uiFontLabel); font-size: 14px; letter-spacing: .6px;
  padding: 5px 12px; text-align:left; cursor:pointer;
  color: #c7d0ff; background: rgb(95 119 247 / .14);
  border: 1px solid rgb(95 119 247 / .45); border-radius: 5px;
}
#orderMenu button:hover:not(:disabled){ background: rgb(95 119 247 / .35); color:#fff; }
#orderMenu button.attack{ color:#f08995; border-color: rgb(208 91 105 / .55); background: rgb(208 91 105 / .12); }
#orderMenu button.attack:hover{ background: rgb(208 91 105 / .32); color:#fff; }
#orderMenu button.on{ border-color:#f8bb56; box-shadow: inset 3px 0 0 #f8bb56; }
#orderMenu button:disabled{ opacity:.35; cursor:default; }

/* Blocks all interaction, above every other overlay (windows included) —
   deliberately not dismissible except by reloading. */
#outdatedOverlay{
  position:fixed; inset:0; z-index:100; display:flex;
  align-items:center; justify-content:center;
  background: rgb(0 0 8 / .9);
}
#outdatedBox{
  max-width: 420px; text-align:center;
  background: rgb(0 2 12 / .95); border: 1.5px solid #d05b69; border-radius: 12px;
  box-shadow: 0 0 10px rgb(208 91 105 / .45);
  padding: 26px 24px;
}
#outdatedTitle{
  font-family: var(--uiFontLabel); font-size: 21px; letter-spacing: .4px;
  color: var(--danger); margin-bottom: 12px;
}
#outdatedText{
  font-size: 16px; color: #c7d0ff;
  line-height:1.5; margin: 0 0 20px;
}
#outdatedReloadBtn{
  font-family: var(--uiFontLabel); font-weight:600; font-size: 17px; letter-spacing: .5px;
  background: linear-gradient(180deg,#f08995,#d05b69 55%,#a83a48); color: #2a0508; border:none;
  padding: 11px 28px; cursor:pointer; border-radius: 6px 20px 20px 6px;
}
#outdatedReloadBtn:hover{ filter: brightness(1.1); }
#outdatedHint{
  font-size: 13px; color: var(--uiText2);
  margin-top: 10px;
}
#outdatedNewsBtn{
  margin-top: 18px; background: none; cursor: pointer;
  font-family: var(--uiFontLabel); font-weight: 500; font-size: 15px; letter-spacing: .5px;
  color: #f8bb56; border: 1.5px solid #f8bb56; border-radius: 6px 16px 16px 6px; padding: 7px 20px;
}
#outdatedNewsBtn:hover{ background: rgb(248 187 86 / .12); }
#outdatedNews{
  margin-top: 14px; max-height: min(300px, 40vh); overflow-y: auto; text-align: left;
  border-top: 1px solid rgb(208 91 105 / .4); padding: 10px 6px 0 0;
  scrollbar-width: thin; scrollbar-color: rgb(248 187 86 / .6) rgb(255 255 255 / .05);
}
#outdatedNews::-webkit-scrollbar{ width: 8px; }
#outdatedNews::-webkit-scrollbar-track{ background: rgb(255 255 255 / .05); border-radius: 4px; }
#outdatedNews::-webkit-scrollbar-thumb{ background: rgb(248 187 86 / .6); border-radius: 4px; }
#outdatedNews h4{
  margin: 10px 0 4px; font-family: var(--uiFontLabel); font-weight: 600; font-size: 15px;
  color: #f8bb56; letter-spacing: .5px;
}
#outdatedNews ul{ margin: 0; padding-left: 18px; }
#outdatedNews li{ font-size: 14.5px; line-height: 1.45; color: #c7d0ff; margin: 2px 0; }

/* First-visit privacy notice (ui/privacy.js): a bar along the bottom of
   the window, above everything, until OK is clicked once. */
#privacyNotice{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:14px; max-width:min(900px, calc(100vw - 28px)); box-sizing:border-box;
  padding:10px 14px 10px 18px; border-radius:10px; background:rgb(2 4 16 / .94);
  border:1.5px solid #1c3bb4; box-shadow:0 0 12px rgb(28 59 180 / .55);
  font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:15px; line-height:20px; color:#c7d0ff; }
#privacyNotice.hidden{ display:none; }
#privacyNotice a{ color:#4fe3c6; white-space:nowrap; }
#privacyNoticeOk{ flex:none; height:30px; padding:0 18px; border:0; border-radius:8px; cursor:pointer;
  font-family:"Oswald","Arial Narrow",sans-serif; font-weight:600; font-size:15px; color:#2a1a02; }