:root {
  --bg: #04050a;
  --panel: rgba(9, 12, 22, 0.92);
  --line: rgba(140, 170, 220, 0.14);
  --line2: rgba(140, 170, 220, 0.28);
  --text: #c9d3e6;
  --dim: #6d7a93;
  --cyan: #6ef0ff;
  --amber: #ffb35c;
  --red: #ff5a6e;
  --green: #7dffb0;
  --violet: #b99cff;
  --mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.45 var(--sans); overflow: hidden; }
button { font: inherit; color: var(--text); background: rgba(110, 240, 255, 0.04); border: 1px solid var(--line2); border-radius: 3px; padding: 4px 9px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
button:hover:not(:disabled) { background: rgba(110, 240, 255, 0.12); border-color: var(--cyan); color: #fff; }
button:disabled { opacity: .4; cursor: default; }
button.primary { border-color: rgba(110, 240, 255, .55); color: var(--cyan); width: 100%; margin: 6px 0; padding: 7px; letter-spacing: .04em; }
button.active { background: rgba(110, 240, 255, .18); border-color: var(--cyan); color: #fff; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
em { color: var(--amber); font-style: normal; }

#app { display: grid; height: 100vh; height: 100dvh; grid-template-columns: 290px 1fr 320px; grid-template-rows: auto 1fr 132px; grid-template-areas: "top top top" "left map right" "bottom bottom bottom"; }

/* top bar */
#topbar { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(#0a0e1a, #060810); }
.brand { font: 600 17px/1 var(--mono); letter-spacing: .32em; color: #fff; white-space: nowrap; }
.brand span { color: var(--amber); }
.readouts { display: flex; gap: 20px; flex: 1; overflow: hidden; }
.ro { display: flex; flex-direction: column; min-width: 0; }
.ro label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); white-space: nowrap; }
.ro b { font: 500 14px var(--mono); color: #e8eefc; white-space: nowrap; }
#ro-era { color: var(--amber); }
.timectl { display: flex; gap: 6px; align-items: center; }
#speeds { display: flex; gap: 2px; }
#speeds button { padding: 4px 7px; font-family: var(--mono); font-size: 12px; }

/* panels */
.panel { background: var(--panel); overflow-y: auto; padding: 10px 14px 14px; scrollbar-width: thin; scrollbar-color: #223 transparent; }
#left { grid-area: left; border-right: 1px solid var(--line); }
#right { grid-area: right; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
h2 { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--cyan); margin: 6px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
h2 small { color: var(--dim); letter-spacing: .05em; text-transform: none; font-weight: 400; float: right; }
section { margin-bottom: 16px; }
.stat { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.stat label { color: var(--dim); }
.stat b { font: 500 12.5px var(--mono); color: #e8eefc; text-align: right; }
.stat.big b { font-size: 15px; color: #fff; }
.hint { font-size: 11.5px; color: var(--dim); margin: 6px 0; }
.c-reach { color: var(--cyan); } .c-eh { color: var(--red); }
.kbar { position: relative; height: 16px; border: 1px solid var(--line2); margin: 3px 0 7px; border-radius: 2px; overflow: hidden; }
#kbar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #1b6f86, var(--cyan) 60%, var(--amber)); opacity: .55; transition: width .3s; }
.kbar span { position: absolute; inset: 0; font: 11px/14px var(--mono); text-align: center; color: #fff; letter-spacing: .08em; }
input[type=range] { width: 100%; accent-color: var(--cyan); }
.slider-label { display: block; color: var(--dim); }
.slider-label b { color: #fff; font-family: var(--mono); }
.toggle { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; color: var(--amber); cursor: pointer; }
.row { display: flex; gap: 6px; margin: 6px 0; }
.row button { flex: 1; }
#drives { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#drives button { font-family: var(--mono); font-size: 12px; }

/* research */
#techs { flex: 1; overflow-y: auto; }
.tier { font: 10px var(--mono); color: var(--dim); letter-spacing: .15em; text-transform: uppercase; margin: 9px 0 4px; }
.tech { position: relative; border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px 7px; margin-bottom: 4px; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.tech:hover { border-color: var(--line2); background: rgba(255, 255, 255, .02); }
.tech .nm { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; color: #e7ecf7; }
.tech .nm span { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; }
.tech .ef { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.tech .pb { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--cyan); opacity: .7; }
.tech.locked { opacity: .38; }
.tech.ready { border-color: rgba(110, 240, 255, .6); box-shadow: inset 0 0 12px rgba(110, 240, 255, .08); }
.tech.ready .nm span { color: var(--cyan); }
.tech.owned { border-color: rgba(125, 255, 176, .25); background: rgba(125, 255, 176, .03); }
.tech.owned .nm span { color: var(--green); }
.tech.queued { border-color: var(--amber); }
.tech.queued .nm span { color: var(--amber); }
#techinfo { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; font-size: 12px; min-height: 120px; }
#techinfo b { color: var(--amber); display: block; margin-bottom: 3px; }
#techinfo { height: 42%; min-height: 42%; flex: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #223 transparent; }
#techinfo.pinned { border-top-color: var(--amber); }
#techinfo .pin { font: 10px var(--mono); color: var(--dim); float: right; font-weight: 400; }
#techinfo .plan { margin-top: 6px; color: var(--cyan); font-size: 11.5px; }
#techinfo .plan:empty { display: none; }
#techinfo .rh { font: 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--cyan); margin: 10px 0 2px; }
.tech .rb { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; font-size: 11px; line-height: 16px; background: transparent; border-color: transparent; opacity: .45; }
.tech:hover .rb, .tech.pinned .rb { opacity: 1; border-color: var(--line2); }
.tech.pinned { outline: 1px solid var(--amber); }
#btn-library { padding: 0 6px; font-size: 11px; margin-right: 4px; letter-spacing: 0; text-transform: none; }
ul.reading { list-style: none; margin: 4px 0 0; padding: 0; }
ul.reading li { display: flex; gap: 7px; margin: 6px 0; font-size: 12px; line-height: 1.35; }
ul.reading .ri { flex: none; }
ul.reading a { color: #e8eefc; text-decoration: none; border-bottom: 1px solid rgba(110, 240, 255, .35); }
ul.reading a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
ul.reading .by { display: block; color: var(--dim); font-size: 11px; }
ul.reading .note { color: #9aa6bd; font-size: 11.5px; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 26px; }
.library h3 { margin-top: 14px !important; }

/* map */
#viewport { grid-area: map; position: relative; overflow: hidden; background: #000; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#narration { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(620px, 86%); background: rgba(6, 9, 18, .86); border: 1px solid var(--line2); border-left: 2px solid var(--amber); padding: 10px 16px 12px; pointer-events: none; transition: opacity .8s; backdrop-filter: blur(4px); }
#narration h3 { margin: 0 0 4px; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
#narration p { margin: 0; font-size: 13.5px; color: #dfe6f3; }
#narration.alien { border-left-color: #ff6bd6; } #narration.alien h3 { color: #ff8be0; }
#narration.bad { border-left-color: var(--red); } #narration.bad h3 { color: var(--red); }
#narration.civ { border-left-color: var(--cyan); } #narration.civ h3 { color: var(--cyan); }
#narration.fade { opacity: 0; }
#tooltip { position: absolute; pointer-events: none; background: rgba(6, 9, 18, .94); border: 1px solid var(--line2); padding: 8px 10px; font-size: 12px; max-width: 330px; z-index: 5; }
#tooltip b.t { display: block; color: #fff; font-size: 13px; margin-bottom: 3px; }
#tooltip .k { color: var(--dim); }
#tooltip .v { font-family: var(--mono); color: #e8eefc; }
#tooltip .warn { color: var(--red); margin-top: 4px; }
#tooltip .ok { color: var(--cyan); margin-top: 4px; }
#mapctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 3px; }
#mapctl button { width: 30px; height: 30px; padding: 0; background: rgba(6, 9, 18, .8); }
#legend { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--dim); pointer-events: none; }
#legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.you { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.dot.lost { background: #2f8a8a; }
.dot.wild { background: #ffe2b0; }
.dot.alien { background: #ff6bd6; }
.ring { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px dashed; }
.ring.eh { border-color: var(--red); } .ring.ph { border-color: #8090b0; border-style: solid; }

/* bottom */
#bottom { grid-area: bottom; display: grid; grid-template-columns: 1fr 520px; grid-template-rows: 100%; overflow: hidden; border-top: 1px solid var(--line); background: #060810; min-height: 0; }
#timeline { width: 100%; height: 100%; display: block; }
#log { min-height: 0; height: 100%; border-left: 1px solid var(--line); overflow-y: auto; padding: 6px 10px; font-size: 12px; scrollbar-width: thin; scrollbar-color: #223 transparent; }
#log div { padding: 1px 0; cursor: default; }
#log div[data-detail] { cursor: pointer; }
#log div[data-detail]:hover { color: #fff; }
#log .tm { font-family: var(--mono); color: var(--dim); margin-right: 8px; font-size: 11px; }
#log .epoch { color: var(--amber); } #log .tech { color: var(--green); } #log .bad { color: var(--red); }
#log .good { color: var(--cyan); } #log .alien { color: #ff8be0; } #log .civ { color: var(--cyan); font-weight: 600; }

/* modal */
#overlay { position: fixed; inset: 0; background: rgba(1, 2, 6, .78); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(3px); }
#modal { width: min(1080px, 95vw); max-height: 92vh; overflow-y: auto; background: #070a14; border: 1px solid var(--line2); padding: 22px 28px; box-shadow: 0 0 60px rgba(110, 240, 255, .07); }
#modal.narrow { width: min(640px, 92vw); }
#modal h1 { font: 600 26px var(--mono); letter-spacing: .3em; margin: 0 0 2px; color: #fff; }
#modal h1 span { color: var(--amber); }
#modal .sub { color: var(--dim); margin: 0 0 16px; font-size: 13.5px; }
#modal h3 { font: 600 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 16px 0 6px; }
#modal p { font-size: 14px; color: #d3dbea; }
.genesis { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; }
.param { margin-bottom: 11px; }
.param .top { display: flex; justify-content: space-between; align-items: baseline; }
.param .top b { font-weight: 600; color: #fff; }
.param .top span { font: 500 13px var(--mono); color: var(--amber); }
.param .desc { font-size: 11.5px; color: var(--dim); margin-top: 1px; }
.presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.pred { background: rgba(255, 255, 255, .02); border: 1px solid var(--line); padding: 10px 14px; font-size: 12.5px; }
.pred .stat b { font-size: 12px; }
.pred ul { margin: 6px 0 0; padding-left: 18px; }
.pred li { margin: 3px 0; }
.pred li.bad { color: #ff9aa7; } .pred li.good { color: #9ee8c0; }
.hab { height: 8px; border: 1px solid var(--line2); margin: 4px 0 8px; }
.hab div { height: 100%; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); }
.big-btn { font: 600 15px var(--mono); letter-spacing: .2em; padding: 11px 22px; border-color: var(--amber); color: var(--amber); margin-top: 14px; width: 100%; }
.big-btn:hover:not(:disabled) { background: rgba(255, 179, 92, .12); border-color: var(--amber); color: #fff; }
.endstats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; margin: 10px 0; }
.score { font: 600 34px var(--mono); color: #fff; margin: 4px 0; }
.score small { font-size: 13px; color: var(--dim); font-weight: 400; }
.compare { font-size: 12.5px; color: var(--dim); }
.compare b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.help-grid p { margin: 4px 0 8px; font-size: 13px; }
kbd { font: 11px var(--mono); border: 1px solid var(--line2); border-radius: 3px; padding: 0 4px; }

@media (max-width: 1150px) {
  #app { grid-template-columns: 250px 1fr 270px; }
  .readouts .ro:nth-child(n+5) { display: none; }
  #bottom { grid-template-columns: 1fr 380px; }
}

.row .big-btn { font-size: 12.5px; letter-spacing: .12em; padding: 10px 8px; }
.ro b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

#techs { min-height: 0; }
.cmpline { font-size: 14px; color: #dfe6f3; margin: 8px 0 4px; }
.cmpline b { color: var(--amber); font-family: var(--mono); font-weight: 500; }
ul.advice { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; color: #c8d2e4; }
ul.advice li { margin: 3px 0; }

/* territory */
h3.sub3 { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 10px 0 3px; }
h3.sub3 small { text-transform: none; letter-spacing: 0; }
.tbar { display: flex; height: 10px; border: 1px solid var(--line2); border-radius: 2px; overflow: hidden; margin: 2px 0 5px; background: #0a0f1a; }
.tbar i { display: block; height: 100%; width: 0; transition: width .4s; }
.t-keep { background: var(--cyan); }
.t-drift { background: var(--amber); }
.t-flight { background: repeating-linear-gradient(45deg, #2a6d80 0 3px, #163847 3px 6px); }
.t-claim { background: #3a4458; }
.sw { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 1px; vertical-align: 0; }
#terr-hint b { color: #e8eefc; font-weight: 500; }

/* forecasts */
.fc { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; }
.fc.up { color: #7dffb0; }
.fc.down { color: #ff7a7a; }
.fc.stale { opacity: .45; }
.fcrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 4px 0 2px; }
.fcrow button { padding: 3px 0; font: 500 10.5px/1.25 var(--mono); display: flex; flex-direction: column; align-items: center; }
.fcrow button.cur { border-color: var(--cyan); color: #fff; }
.fcrow button small { font-size: 9.5px; }
.fcrow button .nb { color: #ff7a7a; font-size: 9px; }
.tech .fc { display: block; margin-top: 3px; }
.bd { margin: 4px 0 8px; }
.bd .tbar { height: 12px; }
.bd .tbar i { transition: none; }
.bd .lg { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--dim); }
.bd .lg b { color: #e8eefc; font-weight: 500; }
.bd .so { font-size: 11px; color: var(--dim); margin-top: 3px; }

/* civilizations */
.civrow { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 4px 7px; padding: 4px 5px; border: 1px solid transparent; border-radius: 3px; font-size: 12px; }
.civrow.cur { border-color: var(--line2); background: rgba(110, 240, 255, .04); }
.civrow.gone { opacity: .5; }
.civrow .cn { display: flex; flex-direction: column; min-width: 0; }
.civrow .cn b { font-weight: 600; color: #e7ecf7; }
.civrow .cn small { color: var(--dim); font-size: 10.5px; }
.civrow .cn small.cv { font: 500 10.5px var(--mono); color: #c9d3e6; }
.civrow .score-s { font: 500 12px var(--mono); color: #e8eefc; }
.civrow button { padding: 2px 6px; font-size: 10.5px; white-space: nowrap; }
.civrow .you { font: 500 10px var(--mono); color: var(--cyan); }
.civrow .sw { width: 9px; height: 9px; border-radius: 50%; margin: 0; }
.fcrow.three { grid-template-columns: repeat(3, 1fr); }
.fcrow button.cur small { color: var(--dim); }
#autostrat { background: #0a0f1a; color: #e8eefc; border: 1px solid var(--line2); font: inherit; font-size: 11.5px; }
.dimmed { opacity: .6; }
.board { margin-bottom: 8px; }

/* touch: no double-tap zoom or page panning on the map, bigger hit areas */
#map, #timeline { touch-action: none; }
#tabs { display: none; }
@media (pointer: coarse) {
  button { min-height: 34px; }
  #mapctl button { width: 40px; height: 40px; font-size: 18px; }
  .tech .rb { opacity: 1; border-color: var(--line2); padding: 2px 8px; }
}

/* phones and narrow windows: one panel at a time, chosen from the tab bar at the bottom */
@media (max-width: 760px) {
  html, body { font-size: 14px; }
  #app {
    grid-template-columns: 100%; grid-template-rows: auto 1fr auto;
    grid-template-areas: "top" "main" "tabs";
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  #left, #right, #viewport, #bottom { grid-area: main; border: 0; display: none; min-height: 0; }
  #app[data-tab="map"] #viewport { display: block; }
  #app[data-tab="left"] #left { display: block; }
  #app[data-tab="right"] #right { display: flex; }
  #app[data-tab="bottom"] #bottom { display: grid; grid-template-columns: 100%; grid-template-rows: 38% 62%; }
  #log { border-left: 0; border-top: 1px solid var(--line); font-size: 13px; }

  #topbar { flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
  .brand { font-size: 14px; letter-spacing: .24em; }
  .readouts { order: 3; flex-basis: 100%; gap: 14px; }
  .readouts .ro:nth-child(n+4) { display: none; }
  .ro b { font-size: 13px; max-width: 46vw; }
  .timectl { margin-left: auto; gap: 4px; }
  #speeds button { padding: 4px 5px; }
  #btn-skip { font-size: 0; padding: 4px 8px; }
  #btn-skip::after { content: "⏭"; font-size: 14px; }

  #tabs {
    grid-area: tabs; display: flex; border-top: 1px solid var(--line2); background: #060810;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #tabs button {
    flex: 1; border: 0; border-radius: 0; background: none; padding: 6px 0 5px; font-size: 18px; line-height: 1.1;
    display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--dim);
  }
  #tabs button span { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  #tabs button.active { color: var(--cyan); box-shadow: inset 0 2px 0 var(--cyan); }

  #techinfo { height: 38%; min-height: 38%; }
  #narration { top: 8px; left: 8px; right: 58px; width: auto; transform: none; padding: 8px 12px 10px; }
  #narration p { font-size: 13px; }
  #legend { gap: 4px 10px; font-size: 10px; right: 56px; }
  #tooltip { max-width: min(330px, 90vw); }

  #modal, #modal.narrow { width: 100vw; max-height: 100dvh; height: 100dvh; padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); border: 0; }
  #modal h1 { font-size: 20px; letter-spacing: .22em; }
  .genesis, .help-grid, .endstats { grid-template-columns: 100%; gap: 6px; }
  .library { grid-template-columns: 100%; }
}