:root{
  --night:#0d1420; --night-2:#101b2b;
  --starlight:#f3ead2; --amber:#f0a848; --teal:#5aa8aa;
  --sand:#c9b089; --faint:#8fa0b5;
  --panel:#131e2ecc; --panel-glass:#131e2e73; --line:#26344a;
  --good:#7fc99b; --bad:#d98a6a;
  --dim:#5d6d84;
  /* canvas-only tokens (read into the JS palette; keep these the single source) */
  --course:#285060; --tick:#3a4c66; --rose-ring:#33445e; --rose-minor:#4a5b76;
  --ghost:#243247; --island:#2a3a4f; --ref-fill:#4a3a22;
  --land:#1a2536; --coast:#33465f; --range:#2f4a58; --wave:#7e96b6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--night);color:var(--starlight);
  font-family:system-ui,-apple-system,sans-serif;overflow:hidden}
canvas{display:block;position:fixed;inset:0;width:100vw;height:100vh}

header{position:fixed;top:0;left:0;right:0;padding:18px 24px 0;pointer-events:none;z-index:3}
h1{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(20px,3.2vw,32px);letter-spacing:.06em}
.sub{color:var(--faint);font-size:12.5px;max-width:50ch;margin-top:4px;line-height:1.45}

/* mode toggle top-left under title handled inline; frame toggle top-right */
.frames{position:fixed;top:18px;right:24px;z-index:4;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);
  border-radius:10px;overflow:hidden}
.frames button{appearance:none;border:0;background:transparent;color:var(--faint);
  font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:left;padding:10px 15px;
  cursor:pointer;border-left:3px solid transparent;transition:color .25s,border-color .25s,background .25s}
.frames button+button{border-top:1px solid var(--line)}
.frames button.active{color:var(--starlight);background:#1a273a;border-left-color:var(--amber)}
.frames button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.frames .hint{font-size:10px;color:#5d6d84;padding:6px 15px 8px;border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace}

/* candidate chooser */
.chooser{position:fixed;left:24px;top:132px;z-index:4;
  display:flex;flex-direction:column;gap:6px;font-family:'IBM Plex Mono',monospace;
  transition:opacity .3s}
.chooser.hidden{opacity:0;pointer-events:none}
.chooser .ttl{font-size:10px;color:#5d6d84;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.chooser button{appearance:none;text-align:left;border:1px solid var(--line);
  background:var(--panel);color:var(--faint);border-radius:8px;padding:8px 12px;
  font-family:inherit;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;
  gap:14px;min-width:186px;transition:border-color .2s,color .2s,background .2s}
.chooser button:hover{border-color:var(--teal);color:var(--starlight)}
.chooser button.chosen{border-color:var(--amber);color:var(--starlight);background:#1a273a}
.chooser button .sc{color:#5d6d84}
.chooser button.chosen .sc{color:var(--amber)}
.chooser button:focus-visible{outline:2px solid var(--amber)}
.chooser .detail{margin:-2px 0 2px;padding:6px 12px 7px;max-width:186px;
  font-size:10.5px;line-height:1.5;color:var(--faint);
  border-left:2px solid var(--amber);background:var(--panel)}
.chooser .detail b{color:var(--starlight);font-weight:500}

.readout{position:fixed;left:24px;bottom:84px;z-index:3;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;line-height:1.85;color:var(--faint);pointer-events:none}
.readout b{color:var(--starlight);font-weight:500}
.readout .etakN{color:var(--amber)}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:16px;
  padding:14px 24px;background:linear-gradient(to top,#0d1420f2,#0d142000)}
.bar button.icon{appearance:none;border:1px solid var(--line);background:var(--panel);
  color:var(--starlight);width:44px;height:44px;border-radius:50%;font-size:15px;cursor:pointer;flex:none;
  transition:border-color .2s}
.bar button.icon:hover{border-color:var(--amber)}
.bar button.icon:focus-visible{outline:2px solid var(--amber)}
.scrubwrap{position:relative;flex:1;display:flex;align-items:center}
#scrub{flex:1}
/* etak boundary ticks overlaid on the scrub track; 7px inset ≈ half the thumb width */
.etakstrip{position:absolute;left:7px;right:7px;top:50%;height:0;pointer-events:none}
.etakstrip i{position:absolute;top:-5px;width:1px;height:10px;background:var(--tick);transform:translateX(-50%)}
.etakstrip i.past{background:var(--amber)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:1px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--starlight);margin-top:-6px}
input[type=range]::-moz-range-track{height:2px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:0;background:var(--starlight)}
.speedwrap{display:flex;align-items:center;gap:8px;flex:none;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--faint)}
#speed{width:100px}
/* settlement timeline: the bar becomes a time slider */
.bar .year{flex:none;min-width:86px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:12px;color:var(--starlight)}
.bar .year.hidden{display:none}
.etakstrip.hidden{display:none}

.modeswitch{position:fixed;left:24px;top:96px;z-index:4;display:flex;gap:0;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;font-family:'IBM Plex Mono',monospace}
.modeswitch button{appearance:none;border:0;background:var(--panel);color:var(--faint);
  font-family:inherit;font-size:11.5px;padding:7px 14px;cursor:pointer;transition:color .2s,background .2s}
.modeswitch button+button{border-left:1px solid var(--line)}
.modeswitch button.active{background:#1a273a;color:var(--starlight)}
.modeswitch button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

.storylink{position:fixed;right:24px;top:174px;z-index:4;appearance:none;background:none;
  border:0;padding:0;pointer-events:auto;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#5d6d84;cursor:pointer;transition:color .2s}
.storylink:hover{color:var(--starlight)}
.storylink:focus-visible{outline:2px solid var(--amber)}

.storycard{position:fixed;left:24px;top:132px;z-index:6;
  width:min(440px,calc(100vw - 48px));padding:18px 22px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-glass);backdrop-filter:blur(3px);transition:opacity .3s}
.storycard.hidden{opacity:0;pointer-events:none}
.storycard .era{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber)}
.storycard h2{font-family:'Marcellus',serif;font-weight:400;font-size:22px;margin:4px 0 6px;
  color:var(--starlight);letter-spacing:.03em}
.storycard p{font-size:13px;line-height:1.65;color:var(--faint);margin:0 0 12px}
.storycard .row{display:flex;justify-content:space-between;align-items:center}
.storycard .row button{appearance:none;font-family:'IBM Plex Mono',monospace;cursor:pointer;transition:border-color .2s,color .2s}
#storySkip{background:none;border:0;padding:0;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#5d6d84}
#storySkip:hover{color:var(--starlight)}
#storyNext{border:1px solid var(--amber);background:none;color:var(--amber);
  font-size:12px;padding:8px 18px;border-radius:8px}
#storyNext:hover{background:#1a273a}
#storyNext:focus-visible,#storySkip:focus-visible{outline:2px solid var(--amber)}

/* settlement mode: the era/place card sits bottom-left, above the timeline bar */
.storycard.settle{top:auto;bottom:84px;z-index:5}
.storycard.star{left:auto;right:24px;top:auto;bottom:180px;width:min(320px,calc(100vw - 48px));z-index:5}
.storycard.star p{margin-bottom:2px}
.storycard.settle p{margin-bottom:2px}
.storycard .close{position:absolute;top:10px;right:12px;appearance:none;background:none;border:0;
  padding:2px 4px;font-size:12px;color:#5d6d84;cursor:pointer;transition:color .2s}
.storycard .close:hover{color:var(--starlight)}
.storycard .close:focus-visible{outline:2px solid var(--amber)}

.modeswitch.hidden,.frames.hidden,.bar.hidden,.readout.hidden,.storylink.hidden{opacity:0;pointer-events:none}
.modeswitch,.frames,.bar,.readout{transition:opacity .3s}

.departwrap{position:fixed;right:24px;bottom:138px;z-index:4;display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:#5d6d84;
  letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.departwrap.hidden{opacity:0;pointer-events:none}
.departwrap input{border:1px solid var(--line);background:var(--panel);color:var(--starlight);
  border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12px;color-scheme:dark}
.departwrap input:focus-visible{outline:2px solid var(--amber)}

.newbtn{position:fixed;right:24px;bottom:84px;z-index:4;appearance:none;
  border:1px solid var(--line);background:var(--panel);color:var(--starlight);
  font-family:'IBM Plex Mono',monospace;font-size:12px;padding:9px 16px;border-radius:8px;cursor:pointer;
  transition:border-color .2s,opacity .3s}
.newbtn:hover{border-color:var(--amber)}
.newbtn.hidden{opacity:0;pointer-events:none}
.newbtn:focus-visible{outline:2px solid var(--amber)}

@media (max-width:900px){
  .sub{max-width:38ch}
  .score{top:auto;bottom:130px;width:160px}
  .chooser{top:auto;bottom:220px}
  .readout{bottom:78px;font-size:11px}
}