:root{--ink:#8fd3ff;--dim:#2c5572;--mid:#4d90b8;--warm:#ffd24a;--gold:#ffe08a;--teal:#3fd0c8;
    --good:#ffae4d;--dark:#e07a6a;--mule:#e8e2d0;--pop:#7fd0a0;--life:#c9b8ff;--panel:#0b1016;--p2:#0e1620;--line:#15212c;--line2:#1d2f3d;--chan:#091018;
    --bg:#0c131b;--bg2:#05080c;}
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{min-height:100%}
  body{background:radial-gradient(120% 120% at 50% 0%, var(--bg) 0%, var(--bg2) 100%);
    color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.45;
    padding:18px;display:flex;align-items:flex-start;justify-content:center;}
  .crt{width:100%;max-width:980px;background:var(--panel);border:1px solid var(--line2);
    border-radius:6px;padding:14px 16px 10px;position:relative;overflow:hidden;
    box-shadow:0 0 0 1px #0a0f15,0 24px 60px rgba(0,0,0,.65),inset 0 0 110px rgba(20,50,80,.16);}
  .crt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.15) 3px,rgba(0,0,0,0) 4px);mix-blend-mode:multiply;}
  .crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:10;
    background:radial-gradient(135% 115% at 50% 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45) 100%);}
  .glow{text-shadow:0 0 4px rgba(143,211,255,.45)}
  .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line2);padding-bottom:7px;margin-bottom:10px;}
  h1{font-weight:600;font-size:14px;letter-spacing:3px;}
  .seedtag{color:var(--dim);font-size:10px;letter-spacing:1px;}

  .panel{border:1px solid var(--line);border-radius:4px;background:var(--p2);padding:8px 10px;margin-bottom:9px;}
  .ph{font-size:10px;color:var(--dim);letter-spacing:2px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:6px;font-weight:500;display:flex;justify-content:space-between;}
  .row{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin:2px 0;}
  .row b{color:var(--ink);font-weight:500;} .row .pp{color:var(--pop);}

  .track{width:100%;height:16px;background:var(--chan);border:1px solid var(--line2);border-radius:8px;overflow:hidden;margin:3px 0;position:relative;}
  .track > i{display:block;height:100%;width:0;border-radius:8px;}
  .track.gold   > i{background:linear-gradient(90deg,#a87f2c,#ffe08a);box-shadow:0 0 8px rgba(255,224,138,.5);}
  .winmodal{position:fixed;inset:0;background:rgba(4,8,12,.82);z-index:200;display:flex;align-items:center;justify-content:center;}
  .winbox{background:#0a131c;border:1px solid var(--gold);border-radius:10px;max-width:520px;padding:26px 30px;box-shadow:0 0 60px -10px var(--gold);}
  .wintitle{color:var(--gold);text-align:center;letter-spacing:2px;font-size:15px;margin-bottom:14px;text-shadow:0 0 12px var(--gold);}
  .winbody{color:var(--mid);font-size:12px;line-height:1.7;margin-bottom:18px;}
  .winbody b{color:var(--ink);} .winbody .big{color:var(--gold);font-size:13px;}
  .winbtns{display:flex;flex-direction:column;gap:8px;}
  .winbtns button{font-family:inherit;font-size:11px;padding:9px;background:#0d1925;color:var(--ink);border:1px solid var(--line2);border-radius:6px;cursor:pointer;letter-spacing:.5px;}
  .winbtns button:hover{border-color:var(--gold);color:var(--gold);}
  .startbox{max-width:600px;}
  .modecards{display:flex;gap:12px;margin:6px 0 14px;}
  .modecard{flex:1;text-align:left;font-family:inherit;background:#0d1925;border:1px solid var(--line2);border-radius:8px;padding:16px 16px 18px;cursor:pointer;transition:border-color .15s,background .15s;}
  .modecard:hover{border-color:var(--gold);background:#11202e;}
  .mcname{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:7px;}
  .modecard:hover .mcname{text-shadow:0 0 10px var(--gold);}
  .mcdesc{color:var(--mid);font-size:11px;line-height:1.55;}
  .startopts{display:flex;align-items:center;justify-content:space-between;min-height:20px;}
  .startopts label{color:var(--dim);font-size:10.5px;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;gap:6px;}
  .startopts label input{cursor:pointer;}
  #startreturn{font-family:inherit;font-size:10.5px;padding:5px 12px;background:transparent;color:var(--dim);border:1px solid var(--line2);border-radius:5px;cursor:pointer;letter-spacing:.5px;}
  #startreturn:hover{border-color:var(--mid);color:var(--ink);}
  /* z-index:11 lifts the bar above the CRT scanline (::before z9) + vignette (::after z10) so the dense
     bar doesn't pick up the horizontal-slice noise (and lighter story segs keep their full height). */
  .dnabar{position:relative;z-index:11;height:18px;border:1px solid var(--line2);border-radius:4px;background:#0a121a;overflow:hidden;display:flex;}
  .dnabar .seg{height:100%;border-right:1px solid rgba(0,0,0,.35);box-sizing:border-box;}
  /* the small lives get their own thin bar (the "stories" layer), flush under the works bar in the quiet age */
  .dnabar.hasstories{border-radius:4px 4px 0 0;}
  .storiesbar{height:8px;border-top:none;border-radius:0 0 4px 4px;margin-top:0;}
  /* per-segment dividers stay (the segmented "genome" look); a stronger marker at each ACT boundary */
  .dnabar .seg.actstart{border-left:1px solid rgba(143,211,255,.35);}
  .dnabar .seg.tech{background:var(--gold);}
  .dnabar .seg.tech.off{background:#3a2f12;}
  .dnabar .seg.np{background:var(--teal);}
  .dnabar .seg.np.off{background:rgba(63,208,200,.12);}
  .track.amber  > i{background:linear-gradient(90deg,#a8661a,#ffae4d);box-shadow:0 0 8px rgba(255,174,77,.5);}
  .track.blue   > i{background:linear-gradient(90deg,#2b5878,#8fd3ff);box-shadow:0 0 8px rgba(143,211,255,.45);}
  .track.purple > i{background:linear-gradient(90deg,#5a4a8c,#c9b8ff);box-shadow:0 0 8px rgba(201,184,255,.4);}
  .track.hero > i{background:linear-gradient(90deg,#2b5878,#8fd3ff);box-shadow:0 0 12px rgba(143,211,255,.6);}

  /* ---- system map ---- */
  .map{position:relative;height:128px;overflow:hidden;}
  .map svg{display:block;width:100%;height:118px;}
  .map .svglayer{position:absolute;inset:0;}
  .map .tip{position:fixed;pointer-events:none;z-index:80;background:#0a121a;border:1px solid var(--line2);border-radius:3px;
    padding:4px 7px;font-size:10.5px;color:var(--ink);white-space:nowrap;transform:translate(-50%,-118%);z-index:30;
    box-shadow:0 4px 12px rgba(0,0,0,.6);display:none;line-height:1.4;}
  .map .tip b{color:var(--gold);} .map .tip .s{color:var(--dim);}
  .floattip{position:fixed;pointer-events:none;z-index:120;background:#0a121a;border:1px solid var(--line2);border-radius:3px;
    padding:4px 7px;font-size:10.5px;color:var(--ink);white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.6);display:none;line-height:1.4;}
  .floattip b{color:var(--gold);}
  .planet{fill:#1b2c3a;stroke:#2c4456;stroke-width:1;}
  .sun{fill:#3a2f12;stroke:#7a5e1c;}
  .ring{fill:none;stroke:#16242f;stroke-width:1;}
  .moon{fill:#16242f;stroke:#24384a;stroke-width:.75;}
  .lbl{fill:#2c5572;font-size:8px;font-family:"IBM Plex Mono",monospace;text-anchor:middle;}
  .lbl.lit{fill:#7fa8c4;}
  .gold{fill:#ffe08a;}
  .hot{stroke:#ffe08a;stroke-width:1.4;}
  .hit{cursor:default;}

  .hum .toprow{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
  .hum .era{color:var(--ink);font-weight:500;letter-spacing:1px;} .hum .yr{color:var(--dim);}
  .hum .goal{font-size:10px;color:var(--warm);letter-spacing:1.5px;margin:5px 0 2px;}

  .midgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .scroll{height:74px;overflow-y:auto;font-size:11px;}
  .scroll::-webkit-scrollbar{width:7px} .scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .scroll .rl{margin:1px 0;color:var(--dim);} .scroll .rl.tech{color:var(--mid);} .scroll .rl.act{color:var(--ink);text-shadow:0 0 6px rgba(143,211,255,.5);margin-top:5px;}
  .scroll .rl.rnowline{color:var(--good);}
  .scroll .rl.pend{color:#284258;}
  .rnow{font-size:11px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid var(--line);}
  .rnow .ract{color:var(--ink);font-weight:500;}
  .rnow .rchap{color:var(--good);}
  .rnow .rsmall{color:var(--dim);font-size:10px;}
  .qs .build{font-size:11px;color:var(--good);} .qs .cpc{font-size:11px;color:var(--dim);margin:5px 0 1px;} .qs .cpc b{color:var(--ink);}
  .qs .cpn{font-size:11px;color:var(--mid);margin:4px 0 1px;}

  .actor.dark{border-color:#5a2f2c;} .actor.mule{border-color:#7a2018;background:rgba(255,59,48,.05);box-shadow:0 0 18px -6px rgba(255,59,48,.4);}
  .actor .top{display:flex;justify-content:space-between;font-size:13px;}
  .actor .nm{color:var(--ink);font-weight:500;} .actor.dark .nm{color:var(--dark);} .actor.mule .nm{color:#ff6b5e;letter-spacing:1px;text-shadow:0 0 10px rgba(255,59,48,.5);}
  .actor .role{color:var(--dim);} .actor .pl{color:var(--mid);font-size:11px;}
  .story{margin:6px 0 5px;height:88px;overflow-y:auto;font-size:11px;}
  .story::-webkit-scrollbar{width:7px} .story::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .story .b{margin:2px 0;color:var(--dim);} .story .b.origin{color:var(--mid);} .story .b.dev{color:#9fb6c4;}
  .story .b.turn{color:var(--good);text-shadow:0 0 6px rgba(255,174,77,.4);} .story .b.darkturn{color:var(--dark);text-shadow:0 0 6px rgba(224,122,106,.35);}
  .actor .qname{font-size:11.5px;color:var(--life);margin:4px 0 1px;}
  .phase{font-size:10px;color:var(--dim);letter-spacing:1px;}

  .log{height:150px;overflow-y:auto;font-size:11.5px;}
  .log::-webkit-scrollbar{width:7px} .log::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .log .l{white-space:pre-wrap;margin:1px 0;}
  .log .work{color:#33566f;} .log .q{color:#9fb6c4;} .log .life{color:var(--mid);} .log .up{color:var(--good);text-shadow:0 0 6px rgba(255,174,77,.35);}
  .log .mileC{color:var(--gold);text-shadow:0 0 6px rgba(255,224,138,.4);} .log .era{color:var(--ink);text-shadow:0 0 7px rgba(143,211,255,.55);font-weight:500;}
  .log .dn{color:var(--dark);} .log .born{color:var(--warm);} .log .div{color:#16252f;}
  .log .mule{color:var(--mule);text-shadow:0 0 7px rgba(232,226,208,.4);} .log .esc{color:var(--gold);text-shadow:0 0 8px rgba(255,224,138,.6);}

  .micro .lbl{font-size:12.5px;color:var(--ink);margin-bottom:5px;} .micro .lbl .ph2{color:var(--dim);font-size:10.5px;}
  .micro.mule .lbl{color:#ff6b5e;text-shadow:0 0 10px rgba(255,59,48,.5);}
  .micro.mule .lbl .ph2{color:#a83a32;}
  .micro.mule .track.hero > i{background:linear-gradient(90deg,#5a1410,#ff3b30)!important;box-shadow:0 0 12px rgba(255,59,48,.7)!important;}
  .micro.mule .track.hero{border-color:#7a2018;}

  .foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;margin-top:2px;font-size:10px;color:var(--dim);}
  .foot input{accent-color:var(--mid);width:104px;vertical-align:middle;}
  .foot button{font-family:inherit;font-size:10px;letter-spacing:1px;background:transparent;color:var(--dim);border:1px solid var(--line2);border-radius:3px;padding:2px 7px;cursor:pointer;margin-left:6px;}
  .foot button:hover{color:var(--mid);border-color:var(--mid);} .foot button.on{color:var(--ink);border-color:var(--mid);}
  .cur{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
  .dbg{margin-top:9px;} .dbgbody{font-size:10.5px;max-height:240px;overflow-y:auto;}
  .dbgbody::-webkit-scrollbar{width:7px} .dbgbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .dbgbody .dact{color:var(--ink);margin:7px 0 2px;font-weight:500;}
  .dbgbody .dact.done{color:var(--mid);} .dbgbody .dact.now{color:var(--good);}
  .dbgbody .dbodies{color:var(--gold);font-size:9.5px;letter-spacing:.5px;}
  .dbgbody .dt{color:var(--dim);margin-left:14px;} .dbgbody .dt.done{color:#3a6a55;} .dbgbody .dt.now{color:var(--ink);}
    .dbgbody .dt .mk{display:inline-block;width:12px;color:var(--mid);}
  .achbody{max-height:320px;overflow-y:auto;position:relative;}
  .achbody::-webkit-scrollbar{width:7px} .achbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .achbody .acat{color:var(--dim);letter-spacing:2px;font-size:9.5px;margin:10px 0 5px;border-bottom:1px solid var(--line);padding-bottom:3px;}
  .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px;margin-bottom:4px;}
  .atile{position:relative;aspect-ratio:1/1;border:1px solid var(--line2);border-radius:5px;display:flex;align-items:center;justify-content:center;
    background:#0a121a;cursor:default;transition:none;}
  .atile svg{width:60%;height:60%;}
  /* locked: dim glyph */
  .atile.locked{border-color:#16242f;} .atile.locked svg *{stroke:#244056;fill:none;}
  /* unlocked: lit by category color */
  .atile.got{border-color:currentColor;box-shadow:0 0 7px -1px currentColor;background:#0c1620;}
  .atile.got svg *{stroke:currentColor;fill:none;}
  .atile.c-tech{color:var(--gold);} .atile.c-body{color:#7fa8c4;} .atile.c-build{color:#8fd3ff;}
  .atile.c-bio{color:#7fd0a0;} .atile.c-soc{color:#c9b8ff;} .atile.c-cat{color:var(--dark);}
  .atile.c-strange{color:#e8e2d0;} .atile.c-culture{color:var(--warm);}
  .atile.c-explore{color:#9ad0c8;} .atile.c-discovery{color:#ff9b8e;}
  .atile.c-story{color:#8a8a86;} .atile.c-story.got{color:#a8a8a2;}  /* the small lives: grey, subdued */
  /* hidden (strange, locked): question mark, extra-dim */
  .atile.hidden svg *{stroke:#1e3346;} 
  .achtip{position:fixed;pointer-events:none;z-index:60;background:#0a121a;border:1px solid var(--line2);border-radius:4px;
    padding:6px 9px;font-size:10.5px;color:var(--ink);max-width:230px;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.6);display:none;}
  .achtip b{color:var(--gold);} .achtip .td{color:var(--dim);} .achtip .ts{color:var(--mid);font-size:9.5px;letter-spacing:1px;}
  .sndboard{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line);}
  .sndboard button{font-family:inherit;font-size:9.5px;padding:4px 8px;background:#0d1925;color:var(--ink);border:1px solid var(--line2);border-radius:4px;cursor:pointer;letter-spacing:.4px;}
  .sndboard button:hover{border-color:var(--good);color:var(--good);}
  .sndboard .sblabel{font-size:9px;color:var(--dim);letter-spacing:1.5px;align-self:center;margin-right:3px;}
  .dbgtime{font-size:10.5px;color:var(--mid);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px;line-height:1.6;}
  .dbgtime b{color:var(--ink);} .dbgtime .dnote{color:var(--dim);}
  @media(max-width:640px){.midgrid{grid-template-columns:1fr;}}

  /* ---- layout stability: pin the half-width status labels to a single line so panel heights
     (and the 2-col grid rows) stop jittering as content cycles each tick. the full-width micro
     "taskbar" is left to wrap naturally — it has ample room and truncating it read badly. ---- */
  .qs .build, .qs .cpn, .actor .qname{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .actor .top{white-space:nowrap; overflow:hidden;}
  .actor .top > span{overflow:hidden; text-overflow:ellipsis; min-width:0;}
  .actor .top > span:first-child{flex:1; margin-right:8px;}
  .actor .top > span:last-child{flex:none;}

  /* ---- EXPLORE locked until the player has completed ESCAPE at least once ---- */
  .modecard.locked{opacity:.45;cursor:not-allowed;}
  .modecard.locked:hover{border-color:var(--line2);background:#0d1925;}
  .modecard.locked:hover .mcname{text-shadow:none;}
  .mclock{color:var(--dark);font-size:10px;letter-spacing:1px;margin-top:9px;}

  /* the quiet age widens the DNA bar to take in the small-life stories too */
  .dnabar .seg.lore{background:var(--life);}
  .dnabar .seg.lore.off{background:rgba(201,184,255,.18);}