/* FermiParadox — Signal Noir. Deep navy/charcoal, holographic blue, amber, orange warning. */
:root{
  --bg:#070b12; --bg2:#0a0f1a; --panel:#0e1622; --panel2:#101a28; --edge:#1d2c3e;
  --ink:#cfe0ee; --dim:#7d92a8; --faint:#52677d;
  --holo:#5cc6ff; --amber:#e6b34a; --warn:#e8761f; --crit:#d2402f; --good:#5fe06a;
  --mono:"Space Mono",ui-monospace,Menlo,monospace; --sans:"Space Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:radial-gradient(120% 90% at 50% -10%,#0c1626 0%,var(--bg) 60%);color:var(--ink);font-family:var(--sans);overflow:hidden;user-select:none}
.hidden{display:none!important}
kbd{font-family:var(--mono);background:#15202e;border:1px solid var(--edge);border-radius:4px;padding:0 5px;font-size:11px;color:var(--holo)}

/* screens */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:40}
.logo{font-weight:700;font-size:46px;letter-spacing:6px;color:#eaf4ff;text-shadow:0 0 24px rgba(92,198,255,.35)}
.logo span{color:var(--holo)} .logo.small{font-size:26px}
.tagline{color:var(--dim);font-family:var(--mono);font-size:12.5px;letter-spacing:.5px;max-width:560px;text-align:center}
.menu-card{background:linear-gradient(180deg,#0e1826,#0a1019);border:1px solid var(--edge);border-radius:14px;padding:26px 30px;width:min(540px,92vw);display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.tabs{display:flex;gap:8px}
.tab{flex:1;padding:9px;background:#0c1622;border:1px solid var(--edge);color:var(--dim);border-radius:8px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.5px}
.tab.active{background:rgba(92,198,255,.12);border-color:var(--holo);color:#eaf4ff}
.fields{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.field input,.field select{background:#0a121c;border:1px solid var(--edge);color:var(--ink);border-radius:8px;padding:9px 11px;font-family:var(--mono);font-size:13px;outline:none}
.field input:focus,.field select:focus{border-color:var(--holo)}
.play{background:linear-gradient(180deg,#1b86c9,#125f95);border:1px solid #2aa0e0;color:#eaf8ff;font-weight:600;font-size:15px;padding:12px;border-radius:10px;cursor:pointer;letter-spacing:.5px}
.play:hover{filter:brightness(1.1)}
.menu-msg{color:var(--warn);font-family:var(--mono);font-size:12px;min-height:14px;text-align:center}
.howto{color:var(--faint);font-size:12px;line-height:1.6;border-top:1px solid var(--edge);padding-top:12px}
.howto b{color:var(--dim)}
.credit{color:var(--faint);font-family:var(--mono);font-size:11px}
.loadbox{display:flex;flex-direction:column;align-items:center;gap:14px}
#load-stage{font-family:var(--mono);color:var(--dim);font-size:13px}
.bar{width:300px;height:6px;background:#0c1622;border:1px solid var(--edge);border-radius:4px;overflow:hidden}
#load-fill{height:100%;width:10%;background:linear-gradient(90deg,var(--holo),var(--amber));transition:width .3s}

/* app layout */
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#earthbar{height:46px;display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(180deg,#0c1420,#0a0f18);border-bottom:1px solid var(--edge)}
.phase{font-family:var(--mono);font-weight:700;letter-spacing:2px;font-size:13px;color:var(--amber)}
.day{font-family:var(--mono);color:var(--dim);font-size:12px}
.eb-vars{display:flex;gap:10px}
.ev{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.ev .vbar{width:46px;height:6px;background:#0a121c;border:1px solid var(--edge);border-radius:3px;overflow:hidden}
.ev .vfill{height:100%}
.eb-news{flex:1;overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:#9bb0c4;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker{display:inline-block;padding-left:100%;animation:scroll 26s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}
.eb-right{display:flex;align-items:center;gap:10px}
.score{font-family:var(--mono);color:var(--amber);font-size:13px}
.net-tag{font-family:var(--mono);font-size:11px;color:var(--holo);background:rgba(92,198,255,.1);border:1px solid var(--edge);border-radius:6px;padding:2px 7px}
.speed{display:flex;gap:3px}
.spd{width:26px;height:24px;background:#0c1622;border:1px solid var(--edge);color:var(--dim);border-radius:5px;cursor:pointer;font-size:11px;font-family:var(--mono)}
.spd.active{background:rgba(92,198,255,.14);border-color:var(--holo);color:#eaf4ff}
.mute{width:28px;height:24px;background:#0c1622;border:1px solid var(--edge);color:var(--holo);border-radius:5px;cursor:pointer}
.mute.off{color:var(--faint)}

#stage{flex:1;display:flex;min-height:0}
#left{flex:1.55;display:flex;flex-direction:column;min-width:0;padding:12px;gap:10px}
#wfwrap{position:relative;flex:1;min-height:0;border:1px solid var(--edge);border-radius:10px;overflow:hidden;background:#060a14}
#wf{width:100%;height:100%;display:block}
#wf-help{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:10px;color:rgba(159,198,224,.5);pointer-events:none}
#scan{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:10px 12px}
.sc-group{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.sc-group select,.sc-group input[type=range]{accent-color:var(--holo)}
.sc-group select{background:#0a121c;border:1px solid var(--edge);color:var(--ink);border-radius:6px;padding:5px 7px;font-family:var(--mono);font-size:12px}
.scan-btn{background:linear-gradient(180deg,#1b86c9,#125f95);border:1px solid #2aa0e0;color:#eaf8ff;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;font-family:var(--mono);letter-spacing:1px}
.scan-btn.stop{background:linear-gradient(180deg,#c2531c,#8c3a12);border-color:var(--warn)}
.val{color:var(--holo)}

#right{flex:1;display:flex;flex-direction:column;min-width:320px;max-width:440px;border-left:1px solid var(--edge);background:linear-gradient(180deg,#0a1019,#080c14)}
#tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--edge)}
.ptab{padding:6px 10px;background:#0c1622;border:1px solid var(--edge);color:var(--dim);border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:11px}
.ptab.active{background:rgba(92,198,255,.14);border-color:var(--holo);color:#eaf4ff}
.ptab.alert{border-color:var(--warn);color:var(--warn)}
#panel{flex:1;overflow-y:auto;padding:12px}
#panel::-webkit-scrollbar{width:8px}#panel::-webkit-scrollbar-thumb{background:#1b2a3a;border-radius:4px}

h4.sec{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--holo);margin:2px 0 10px;text-transform:uppercase}
.row{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--panel);border:1px solid var(--edge);border-radius:8px;margin-bottom:7px;font-size:12.5px}
.row .grow{flex:1}
.row small{color:var(--dim);font-family:var(--mono);font-size:10.5px}
.pill{font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:10px;border:1px solid var(--edge);color:var(--dim)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.btn{background:#11202e;border:1px solid var(--edge);color:var(--holo);border-radius:6px;padding:5px 9px;cursor:pointer;font-family:var(--mono);font-size:11px}
.btn:hover{border-color:var(--holo)} .btn:disabled{opacity:.4;cursor:default}
.btn.amber{color:var(--amber)} .btn.good{color:var(--good)} .btn.warn{color:var(--warn)}
.track{height:7px;background:#0a121c;border:1px solid var(--edge);border-radius:4px;overflow:hidden;margin-top:4px}
.fill{height:100%;background:var(--holo)}
.muted{color:var(--faint);font-family:var(--mono);font-size:11.5px;line-height:1.6}
.kv{font-family:var(--mono);font-size:11px;color:var(--dim)} .kv b{color:var(--ink)}
#journal-cv{width:100%;height:360px;border:1px solid var(--edge);border-radius:8px;background:#070d16}

/* overlays */
.overlay{position:fixed;inset:0;background:rgba(4,7,12,.74);display:flex;align-items:center;justify-content:center;z-index:50}
.event-card,.ending-card{background:linear-gradient(180deg,#101a28,#0a1019);border:1px solid var(--edge);border-radius:14px;padding:24px 28px;width:min(520px,92vw);box-shadow:0 24px 80px rgba(0,0,0,.6)}
.event-cat{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--warn);text-transform:uppercase}
.event-title{font-size:22px;font-weight:600;margin:6px 0 10px}
.event-body{color:var(--dim);line-height:1.6;font-size:14px;margin-bottom:16px}
.event-acts{display:flex;gap:8px;flex-wrap:wrap}
.ending-title{font-size:30px;font-weight:700;color:var(--amber);text-shadow:0 0 22px rgba(230,179,74,.3)}
.ending-body{color:var(--ink);line-height:1.7;font-size:15px;margin:12px 0}
.ending-stats{font-family:var(--mono);font-size:12px;color:var(--dim);margin-bottom:16px}

/* base view */
#baseview{flex:1;position:relative;min-height:0}
#basecanvas{width:100%;height:100%;display:block;cursor:pointer}
#basedock{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.dock-res{display:flex;gap:14px;background:rgba(10,16,26,.8);border:1px solid var(--edge);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:12px}
.dock-res b{color:var(--ink)} .dock-res .r-sal{color:var(--amber)} .dock-res .r-fund{color:var(--good)} .dock-res .r-pow{color:var(--holo)} .dock-res .r-pow.over{color:var(--warn)}
.dock-obj{max-width:380px;background:rgba(10,16,26,.8);border:1px solid var(--edge);border-left:3px solid var(--amber);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:11.5px;color:#cfe0ee}
.dock-obj b{color:var(--amber)}
.basepanel{position:absolute;right:18px;top:18px;width:min(340px,90%);max-height:84%;overflow-y:auto;background:linear-gradient(180deg,#101a28,#0a1019);border:1px solid var(--edge);border-radius:12px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.basepanel h3{margin:0 0 4px;font-size:16px}
.basepanel .sci{color:var(--dim);font-size:12px;line-height:1.55;margin-bottom:10px}
.basepanel .pclose{position:absolute;right:10px;top:8px;background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer}
.inst-row{border:1px solid var(--edge);border-radius:8px;padding:8px;margin-bottom:7px;background:var(--panel)}
.inst-row.locked{opacity:.55} .inst-row .nm{font-size:12.5px} .inst-row .sci2{color:var(--dim);font-size:10.5px;font-family:var(--mono);margin:3px 0}
.cost{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.bbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lrow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim);padding:3px 2px;border-bottom:1px solid rgba(255,255,255,.04)}
.lrow span:last-child{color:var(--holo)}
.crow{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--panel);border:1px solid var(--edge);border-radius:8px 8px 0 0;margin-top:7px;font-size:12.5px}
.crow .grow{flex:1} .crow small{color:var(--dim);font-family:var(--mono);font-size:10.5px}
.crow-acts{display:flex;gap:6px;padding:6px 9px;background:rgba(10,16,26,.5);border:1px solid var(--edge);border-top:none;border-radius:0 0 8px 8px;margin-bottom:7px}
.crow-acts .btn{flex:1;text-align:center}
.bsel{width:100%;margin-top:4px;background:#0a121c;border:1px solid var(--edge);color:var(--ink);border-radius:6px;padding:6px;font-family:var(--mono);font-size:12px}
.bslider{width:100%;margin-top:4px;accent-color:var(--holo)}
.cport{height:48px;width:auto;image-rendering:pixelated;align-self:flex-start;margin:-1px 2px 0 -2px;background:rgba(10,18,28,.55);border:1px solid var(--edge);border-radius:5px}
/* character creator */
.creator-card{background:linear-gradient(180deg,#0c1626,#070b12);border:1px solid var(--edge);border-radius:16px;padding:22px 26px;width:min(440px,93vw);text-align:center;box-shadow:0 24px 90px rgba(0,0,0,.7)}
.creator-title{font-weight:700;font-size:20px;letter-spacing:3px;color:#eaf4ff}
.creator-sub{color:var(--dim);font-size:12px;margin:5px 0 14px;font-family:var(--mono)}
.creator-stage{display:flex;justify-content:center;margin-bottom:14px}
#creator-canvas{image-rendering:pixelated;border:1px solid var(--edge);border-radius:10px;background:#0a111d}
.creator-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:16px}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--panel);border:1px solid var(--edge);border-radius:7px;padding:4px 6px}
.cc-lab{font-family:var(--mono);font-size:11px;color:var(--ink);flex:1;text-align:center}
.cc-arw{background:#11202e;border:1px solid var(--edge);color:var(--holo);border-radius:5px;width:24px;height:22px;cursor:pointer;font-size:13px;line-height:1;padding:0}
.cc-arw:hover{border-color:var(--holo)}
.creator-acts{display:flex;gap:10px;justify-content:center}
.arrival-card{background:linear-gradient(180deg,#0c1626,#070b12);border:1px solid var(--edge);border-radius:14px;padding:30px 34px;width:min(600px,92vw);text-align:center;box-shadow:0 24px 90px rgba(0,0,0,.7)}
.arrival-logo{font-weight:700;font-size:30px;letter-spacing:5px;color:#eaf4ff;margin-bottom:18px}.arrival-logo span{color:var(--holo)}
.arrival-text{color:#c4d3e2;font-size:15px;line-height:1.8;min-height:120px;margin-bottom:18px;font-family:var(--mono)}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:45;pointer-events:none}
.toast div{background:rgba(12,20,32,.94);border:1px solid var(--edge);border-left:3px solid var(--holo);border-radius:7px;padding:8px 14px;font-family:var(--mono);font-size:12px;color:var(--ink);animation:tin .3s}
.toast div.nexus{border-left-color:var(--good)} .toast div.contact{border-left-color:var(--amber)} .toast div.alert{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
@media(max-width:820px){ #right{max-width:none} .tagline{font-size:11px} }