:root{
  --bg: #000000;
  --fg: #ffffff;
  --accent: #00ffd5;
  --muted: rgba(255,255,255,0.12);
}
.scheme-alt{
  --bg:#ffffff;
  --fg:#000000;
  --accent:#0033ff;
  --muted: rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.title{
  text-align:center;
  font-size:1.8rem;
  letter-spacing:0.35rem;
  padding:1.25rem 0;
  margin:0;
}

#schemeToggle{
  position:fixed;
  right:1rem;
  top:0.9rem;
  background:transparent;
  color:var(--fg);
  border:1px solid var(--muted);
  padding:0.35rem 0.6rem;
  cursor:pointer;
  border-radius:6px;
  z-index:6; /* ensure toggle is above other layers and clickable */
}

#infoToggle{
  position:fixed;
  right:4rem;
  top:0.9rem;
  background:transparent;
  color:var(--fg);
  border:1px solid var(--muted);
  padding:0.35rem 0.6rem;
  cursor:pointer;
  border-radius:6px;
  z-index:6;
}

.stage{
  display:flex;
  justify-content:center;
  padding:0 1rem 4rem 1rem;
}


.content{
  display:flex;
  gap:1.5rem;
  align-items:center; /* center vertically */
  justify-content:space-between;
  width:100%;
  min-height:calc(100vh - 6rem);
}

.map-wrap{
  width:33.3333%;
  max-width:none;
  height:520px; /* reduce total vertical space to make section smaller */
}

.stage{position:relative; overflow:visible}

.orbits{
  position:fixed;
  left:0; top:0;
  width:100vw;
  height:100vh;
  z-index:0; /* behind hotspots and info */
  pointer-events:none;
}

.hotspot-layer{z-index:1; position:relative}
.info-column{z-index:2; position:relative}

header.title{position:relative; z-index:3}

.info-column{
  width:66.6667%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.info-bar{
  background: var(--bg);
  border:1px solid var(--muted);
  padding:0.9rem;
  border-radius:8px;
  min-height:120px;
  width:50%; /* narrower than the column */
  box-sizing:border-box;
  color: var(--fg);
}

.info-placeholder{color:var(--muted); font-size:0.95rem}

.map-wrap{
  position:relative;
  width:140px; /* narrow left column for planets */
  max-width:22vw;
  height:700px; /* reduced height to keep spacing compact */
  margin-left:2rem;
}
.map-image{
  display:none; /* hide background image for now */
}

.hotspot-layer{
  position:absolute;
  inset:0;
  pointer-events:auto; /* allow interaction with hotspot children */
}
.hotspot{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  background:var(--hotspot, #ffeb3b);
  border:2px solid var(--bg);
  box-shadow:0 0 8px rgba(255,235,59,0.18);
  opacity:1;
  pointer-events:auto;
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  caret-color: transparent;
}
.hotspot:hover{
  transform:scale(1.35);
  box-shadow:0 0 18px var(--accent);
}
.hotspot:focus{
  /* remove default focus outline for mouse interaction */
  outline: none;
}
.hotspot:focus-visible{
  /* show visible focus only for keyboard users */
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.hotspot.active{
  transform:scale(1.45);
  box-shadow:0 0 28px var(--accent);
  outline:2px solid var(--accent);
  outline-offset:6px;
}

/* Sun: larger and brighter */
.hotspot.sun{
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
  background: #ffcf48; /* user-specified sun color */
  box-shadow:0 0 28px rgba(255,207,72,0.65), 0 0 10px rgba(255,180,80,0.25);
  border-color: rgba(255,207,72,0.28);
}

/* Planets: default size (slightly smaller than sun) */
.hotspot.planet{
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  background: #ed7d2e; /* user-specified planet color */
  box-shadow:0 0 10px rgba(237,125,46,0.22);
}

/* Moons: slightly smaller and darker tone */
.hotspot.moon{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background: #f6a63b; /* user-specified moon color */
  box-shadow:0 0 6px rgba(246,166,59,0.18);
  border:1px solid rgba(0,0,0,0.18);
}

/* Asteroid belt: same size as moons, dark grey */
.hotspot.asteroid{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:#6e6e6e;
  box-shadow:0 0 6px rgba(0,0,0,0.25);
  border:1px solid rgba(0,0,0,0.28);
}

/* Stations: ringed indicator */
.hotspot.station{
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  background:#13529c; /* user-specified station color */
  box-shadow:0 0 10px rgba(19,82,156,0.2);
  border:2px dashed rgba(0,0,0,0.12);
  border-radius:0; /* sharp corners for station squares */
}

/* Specific: Brand station should be moon-sized and grey */
.hotspot[data-id="brand-station"]{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:#13529c; /* station color */
  box-shadow:0 0 6px rgba(19,82,156,0.15);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:0;
}

/* KL-P station shares the same visual style as Brand station */
.hotspot[data-id="klp"]{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:#13529c;
  box-shadow:0 0 6px rgba(19,82,156,0.15);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:0;
}

.info-bar{
  max-width:860px;
  width:90vw;
  margin:1rem auto 2rem auto;
  padding:0.9rem 1rem;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--muted);
  color:var(--fg);
  min-height:48px;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}

/* Info bar: center with content and allow scrolling when very long */
#infoBar{
  transform: none;
  transition: none;
  max-height: 72vh;
  overflow: auto;
}

/* Modules title spacing: ensure empty space before the embedded modules */
.modules-title{
  display:block;
  margin-top:1.25rem;
  margin-bottom:0.6rem;
  font-weight:600;
  font-size:1rem;
  color:var(--fg);
}

/* Hide blinking text caret in non-input/read-only areas */
.info-bar,
.info-bar *,
.info-desc,
.modules-container,
.modules-toggle,
.expand-btn,
#infoBar{
  caret-color: transparent;
}

/* Modules toggle button */
.modules-toggle{
  display:block; /* place on its own row */
  background:transparent;
  color:#ed7d2e; /* use planet color for Modules button text */
  border:1px solid var(--muted);
  padding:0.35rem 0.6rem;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  margin:0 0 0.6rem 0;
}

.modules-container{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease;
}
.modules-container.expanded{
  max-height:1200px; /* large enough to show embedded iframes */
}

/* Ensure the info bar follows the active color scheme */
#infoBar{
  background: var(--bg);
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  border:1px solid var(--muted);
}
.info-title{font-weight:600}
.info-links a{color:var(--accent);text-decoration:underline}

@media (max-width:600px){
  .map-wrap{width:100%}
  .title{font-size:1.2rem}
  .body{font-size:0.95rem}
}

/* Controls and expand button inside the info bar */
.info-controls{display:flex; justify-content:flex-end; margin-top:0.5rem}
.expand-btn{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--muted);
  padding:0.3rem 0.55rem;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}

/* Make embedded iframes responsive inside the info box */
.info-desc iframe{max-width:100%; height:auto; display:block}

/* Footer credit (bottom-right) */
#madeBy{
  position:fixed;
  right:0.9rem;
  bottom:0.6rem;
  z-index:8;
  color:var(--muted);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:0.85rem;
  text-decoration:none;
  padding:0.18rem 0.36rem;
  border-radius:6px;
  background:transparent;
}
#madeBy:hover{ color:#f6a63b; text-decoration:underline }

/* Link hover color in info area */
.info-bar a:hover,
.info-desc a:hover,
.info-links a:hover{
  color: #f6a63b;
}