/* Firefly faithful-mode styling. The canvas is a fixed 600x600 (as the
   original GLUT window was); menus mimic the grey X11/GLUT pop-ups. */

:root {
  --glut-grey: #c3c3c3;
  --glut-light: #fdfdfd;
  --glut-dark: #828282;
  --glut-hi: #000082;       /* highlighted entry background */
  --mono: "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #c3c3c3;
  font-family: var(--mono);
  -webkit-user-select: none;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 28px 0 14px;   /* top room for the credit that sits above the canvas */
  overflow: auto;         /* fall back to scrolling rather than clipping */
}

/* fixed faithful 600x600 stage */
#stage {
  position: relative;
  width: 600px;
  height: 600px;
  background: #000;
  box-shadow: 0 0 0 1px #333;
}

#canvas {
  display: block;
  width: 600px;
  height: 600px;
  background: #000;
  outline: none;
}

/* bottom readout — mirrors the original info() line (red, as in the C source) */
#readout {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font: 15px/1.1 var(--mono);
  color: #ff2b2b;
  letter-spacing: 0.5px;
  text-shadow: 0 0 2px rgba(255,0,0,0.4);
  pointer-events: none;
  white-space: pre;
}

/* faithful: named-star list (top-left of the canvas) */
#names {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: 44%;
  font: 12px var(--mono);
  color: #c9d6ff;
  line-height: 1.35;
  pointer-events: none;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
#names.hidden { display: none; }
#names .nm-title { color: #ffe27a; font-weight: bold; margin-bottom: 2px; }

/* modern: identified-star tooltip (follows the pointer) */
#starid {
  position: fixed;
  font: 12px var(--mono);
  color: #eaf2ff;
  background: rgba(16,22,38,0.92);
  border: 1px solid rgba(150,200,255,0.5);
  border-radius: 5px;
  padding: 3px 7px;
  pointer-events: none;
  z-index: 40;
  white-space: nowrap;
}
#starid.hidden { display: none; }

#credit {
  position: absolute;
  right: 0;            /* right end ("2000") aligns to the box's top-right corner */
  bottom: 100%;        /* sit on top of the canvas box… */
  margin-bottom: 4px;  /* …just above the top edge */
  text-align: right;
  white-space: nowrap;
  font: 11px var(--mono);
  color: rgba(180,200,255,0.6);
  letter-spacing: 0.4px;
  pointer-events: none;
  z-index: 10;
}
/* the "&" is the hidden faithful/modern toggle: it alone takes clicks, with a
   generous tap target and a gentle hover tell so it can be discovered */
#modeToggle {
  pointer-events: auto;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  transition: color 0.15s, text-shadow 0.15s;
}
#modeToggle:hover,
#modeToggle:focus-visible {
  color: #eaf2ff;
  text-shadow: 0 0 6px rgba(150,200,255,0.8);
  outline: none;
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #9fb4ff;
  font: 14px var(--mono);
  transition: opacity 0.5s ease;
  z-index: 5;
}
#loading.hidden { opacity: 0; pointer-events: none; }

/* date / time / place prompt */
#whenveil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  z-index: 6;
}
#whenveil.hidden { display: none; }
#whenform {
  background: var(--glut-grey);
  border: 2px outset var(--glut-grey);
  color: #000;
  padding: 16px 18px;
  font: 13px var(--mono);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 260px;
}
#whenform .when-title { font-size: 20px; font-weight: bold; text-align: center; }
#whenform .when-sub { text-align: center; margin-bottom: 4px; }
#whenform label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#whenform input {
  font: 13px var(--mono);
  padding: 2px 4px;
  border: 2px inset var(--glut-grey);
  background: #fff;
  width: 130px;
}
#whenform select {
  font: 13px var(--mono);
  padding: 2px 4px;
  border: 2px inset var(--glut-grey);
  background: #fff;
  width: 140px;
}
#w-geo-row { display: none; text-align: center; }   /* shown only in modern mode */
#whenform #w-geo {
  font: 13px var(--mono);
  padding: 4px 12px;
  background: var(--glut-grey);
  border: 2px outset var(--glut-grey);
  cursor: pointer;
  margin: 0;
}
#whenform #w-geo:active { border-style: inset; }
#whenform .when-note { font-size: 10.5px; color: #444; max-width: 270px; text-align: center; margin-top: 2px; }
#whenform button {
  margin-top: 6px;
  font: bold 13px var(--mono);
  padding: 5px;
  background: var(--glut-grey);
  border: 2px outset var(--glut-grey);
  cursor: pointer;
}
#whenform button:active { border-style: inset; }

/* modern theme for the prompt */
body.modern #whenform {
  background: rgba(18,24,40,0.97);
  border: 1px solid rgba(130,160,230,0.4);
  border-radius: 10px;
  color: #cfe0ff;
}
body.modern #whenform input,
body.modern #whenform select { background: #0c1322; color: #dcebff; border: 1px solid rgba(130,160,230,0.4); border-radius: 4px; }
body.modern #whenform #w-geo { background: linear-gradient(#26314c,#1a2233); color: #dcebff; border: 1px solid rgba(150,200,255,0.5); border-radius: 6px; }
body.modern #whenform .when-title { color: #9fb4ff; }
body.modern #whenform .when-note { color: #7c8aa6; }
body.modern #whenform button { background: linear-gradient(#26314c,#1a2233); color: #dcebff; border: 1px solid rgba(150,200,255,0.5); border-radius: 6px; }

/* safety-net controls + key hint */
#controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 600px;
  flex-wrap: wrap;
}
.menubtn {
  font: 12px var(--mono);
  color: #000;
  background: var(--glut-grey);
  border: 2px outset var(--glut-grey);
  padding: 3px 10px;
  cursor: pointer;
}
.menubtn:active { border-style: inset; }
#navBtn { display: none; }   /* modern-mode only (shown via JS) */
#hint {
  font: 10.5px var(--mono);
  color: #5e6b7a;
  margin-left: auto;
}

/* ---- retro GLUT-style pop-up menus ---- */
.glut-menu {
  position: fixed;
  z-index: 50;
  background: var(--glut-grey);
  border: 2px outset var(--glut-grey);
  padding: 1px;
  font: 13px/1.0 var(--mono);
  color: #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
.glut-title {
  padding: 3px 22px 3px 8px;
  font-weight: bold;
  text-align: center;
  color: #000;
}
.glut-sep {
  height: 0;
  border-top: 1px solid var(--glut-dark);
  border-bottom: 1px solid var(--glut-light);
  margin: 1px 2px;
}
.glut-item {
  position: relative;
  padding: 3px 22px 3px 10px;
  white-space: nowrap;
  cursor: default;
}
.glut-item.has-sub::after {
  content: "\25B8";          /* ▸ */
  position: absolute;
  right: 7px;
}
.glut-item.hi { background: var(--glut-hi); color: #fff; }

/* ================= modern mode ================= */
body.modern {
  background: radial-gradient(ellipse at 50% 35%, #0a1226 0%, #05070f 60%, #000 100%);
}
body.modern #stage {
  box-shadow: 0 0 60px rgba(60,90,160,0.25), 0 0 0 1px rgba(120,150,220,0.18);
  border-radius: 6px;
}
body.modern #credit { color: rgba(160,190,255,0.85); font-size: 12px; }
body.modern #readout { color: #8fd3ff; text-shadow: 0 0 6px rgba(80,160,255,0.5); }
body.modern #hint { color: #43506a; }

/* sleek dark controls + menus in modern mode */
body.modern .menubtn {
  color: #cfe0ff;
  background: linear-gradient(#222b42, #18203250);
  border: 1px solid rgba(130,160,230,0.35);
  border-radius: 6px;
  padding: 4px 12px;
}
body.modern .menubtn:hover { background: #2b3654; }

body.modern .glut-menu {
  background: rgba(18,24,40,0.96);
  border: 1px solid rgba(130,160,230,0.35);
  border-radius: 8px;
  color: #cfe0ff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}
body.modern .glut-title { color: #9fb4ff; }
body.modern .glut-sep { border-top-color: rgba(130,160,230,0.25); border-bottom-color: transparent; }
body.modern .glut-item.hi { background: linear-gradient(#3a5bd0, #2d49b0); color: #fff; border-radius: 4px; }