/* style.css - 1990s DOS / VGA strategy-game chrome. Double-line borders,
 * navy panels, Press Start 2P everywhere, optional CRT scanlines, amber
 * alt-history theme. */

/* self-hosted pixel font so the retro look works offline / from file:// */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PressStart2P.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000014;
  color: #fff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  overflow: hidden;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}
button, select, input { font-family: inherit; font-size: 9px; color: #fff; }

/* ---- app shell ---- */
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 4px double #fff;
  background: #000014;
}
#topbar, #alt-banner, #ticker-wrap, #controls { flex: 0 0 auto; }
#main { flex: 1 1 auto; }

.panel { background: #000080; border: 4px double #fff; }

/* ---- top bar ---- */
#topbar {
  display: flex; align-items: center; gap: 12px;
  background: #000080; border-bottom: 4px double #fff;
  padding: 8px 12px;
}
#title { color: #ffd23f; font-size: 11px; letter-spacing: 1px; flex: 0 0 auto; text-shadow: 2px 2px 0 #000; }
#topbar .spacer { flex: 1; }
#year-big { font-size: 16px; color: #fff; text-shadow: 2px 2px 0 #000; }
#era-tag {
  font-size: 9px; padding: 5px 8px; border: 2px solid #00CED1; color: #00CED1;
  white-space: nowrap;
}
#pop { font-size: 10px; color: #7CFC00; text-shadow: 1px 1px 0 #000; min-width: 92px; text-align: right; }

/* alt banner strip */
#alt-banner {
  display: none; text-align: center; color: #000; background: #ffb000;
  font-size: 9px; padding: 4px; letter-spacing: 1px;
  border-bottom: 4px double #fff;
}
body.alt-mode #alt-banner { display: block; }

/* ---- main: map + side panel ---- */
#main { display: flex; min-height: 0; min-width: 0; }
#map-area { position: relative; flex: 1; min-width: 0; background: #0a1a5c; overflow: hidden; }
#map-canvas, #fx-canvas { position: absolute; top: 0; left: 0; }
#fx-canvas { cursor: crosshair; }

#side {
  flex: 0 0 232px; background: #000080; border-left: 4px double #fff;
  display: flex; flex-direction: column; min-height: 0;
}
.side-sec { border-bottom: 3px double #6a6ad0; padding: 8px; }
.side-sec h3 { font-size: 8px; color: #ffd23f; margin-bottom: 6px; letter-spacing: 1px; }
#date-big { font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #000; }
#era-sub { font-size: 8px; color: #00CED1; margin-top: 4px; }

#civ-scroll, #event-scroll { flex: 1; overflow-y: auto; }
#civ-scroll { min-height: 80px; }
.civ-row, .ev-row { font-size: 8px; padding: 3px 2px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.civ-row:hover { background: #1414b0; }
.civ-row .sw { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid #fff; }
.civ-row .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-row .warn { color: #ffb000; margin-left: auto; }
.civ-row.dying .cn { text-decoration: line-through; color: #9a9ad8; }
.civ-empty { font-size: 8px; color: #6a6ad0; padding: 6px 2px; }
.ev-row { cursor: default; display: block; line-height: 1.6; }
.ev-tag { font-weight: bold; }
.ev-name { color: #fff; }
.ev-yr { color: #9a9ad8; }

/* custom scrollbars (retro) */
#civ-scroll::-webkit-scrollbar, #event-scroll::-webkit-scrollbar { width: 8px; }
#civ-scroll::-webkit-scrollbar-thumb, #event-scroll::-webkit-scrollbar-thumb { background: #4a4ad0; border: 1px solid #fff; }
#civ-scroll::-webkit-scrollbar-track, #event-scroll::-webkit-scrollbar-track { background: #000050; }

/* ---- ticker ---- */
#ticker-wrap {
  background: #000; border-top: 4px double #fff; border-bottom: 4px double #fff;
  overflow: hidden; white-space: nowrap; padding: 6px 0; position: relative; height: 28px;
}
#ticker-track { display: inline-block; white-space: nowrap; color: #ffd23f; font-size: 9px; will-change: transform; padding-left: 8px; }
body.alt-mode #ticker-track { color: #ffb000; }

/* ---- controls ---- */
#controls { background: #000080; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.ctl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctl-label { color: #9a9ad8; font-size: 8px; margin-right: 2px; }
button {
  background: #000050; border: 3px double #fff; color: #fff; padding: 6px 9px;
  cursor: pointer; font-size: 9px; letter-spacing: 1px;
}
button:hover { background: #1414b0; }
button.on { background: #2a2ad0; color: #ffd23f; border-color: #ffd23f; }
.filter-btn.off { opacity: 0.4; color: #8a8ad0; }
.speed-btn { padding: 6px 7px; }
#jump-input { width: 92px; background: #000; border: 2px solid #fff; padding: 5px; color: #7CFC00; }
#seed-label { color: #00CED1; font-size: 8px; padding: 5px 6px; border: 2px solid #00CED1; }

#btn-play { color: #7CFC00; min-width: 96px; }
#btn-alt { margin-left: auto; border-color: #6a6ad0; }
#btn-alt.alt-on { background: #5a3a00; color: #ffb000; border-color: #ffb000; box-shadow: 0 0 10px #ffb000, inset 0 0 6px #ffb000; }

#alt-controls { display: none; border-top: 3px double #6a6ad0; padding-top: 7px; }
#alt-controls .ctl-row { gap: 8px; }
#alt-scenario { background: #000; border: 2px solid #ffb000; color: #ffb000; padding: 5px; max-width: 280px; }
#alt-summary { color: #ffd9a0; font-size: 8px; line-height: 1.7; flex: 1; min-width: 200px; }

/* ---- era banner ---- */
#era-banner {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  background: #000080; border: 4px double #fff;
  color: #ffd23f; padding: 16px 26px; font-size: 13px; letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000; opacity: 0; pointer-events: none; transition: opacity 0.4s;
  z-index: 30; text-align: center; white-space: nowrap;
}
#era-banner.show { opacity: 1; }
body.alt-mode #era-banner { border-color: #ffb000; color: #ffb000; box-shadow: 0 0 18px #ffb000; }

/* ---- info popup ---- */
#info-popup {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #000080; border: 4px double #fff; padding: 14px 16px; min-width: 280px; max-width: 340px;
  z-index: 40; display: none; box-shadow: 0 0 0 4px #000, 6px 6px 0 #000;
}
#info-popup.show { display: block; }
.ip-head { font-size: 11px; color: #ffd23f; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.ip-head .sw { width: 12px; height: 12px; border: 1px solid #fff; display: inline-block; }
.ip-head .warn { color: #ffb000; }
.ip-row { font-size: 9px; margin: 5px 0; color: #fff; }
.ip-desc { font-size: 8px; line-height: 1.8; color: #c8c8ff; margin-top: 10px; }
.ip-desc.alt { color: #ffd9a0; }
.ip-close { font-size: 7px; color: #6a6ad0; margin-top: 12px; text-align: center; }

/* ---- splash ---- */
#splash {
  position: fixed; inset: 0; background: #000014; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s; color: #c0c0c0;
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash-inner { width: 560px; max-width: 92vw; }
#splash-text { font-size: 9px; line-height: 2; white-space: pre-wrap; color: #cfcfcf; min-height: 280px; }
#splash-cursor { display: inline-block; width: 8px; height: 12px; background: #cfcfcf; animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- CRT scanlines ---- */
body.scan::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.0) 0, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.38) 3px);
  opacity: 0.4;
}