:root { --soot:#0b0d12; --slate:#2a303c; --gunmetal:#4a5362; --zinc:#8b94a3; --bone:#e6e0d2; --rust:#b5542a; --ochre:#d49a3a; --lamp:#ffb45a; --teal:#3fd8c7; --lure:#ff3fa8; --blood:#ff6a2a; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#000; overflow:hidden; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--bone); }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; cursor: crosshair; }
#ui { position:fixed; inset:0; pointer-events:none; }
#ui > * { pointer-events:auto; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.hidden { display:none !important; }
#loading { position:fixed; inset:0; background: radial-gradient(ellipse at 50% 60%, #151a24 0%, #06070a 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:10; transition: opacity 0.8s; }
#loading .title { font-size: 44px; letter-spacing: 0.35em; font-weight: 300; color: var(--bone); text-shadow: 0 0 40px rgba(255,180,90,0.25); }
#loading .sub { font-size: 13px; letter-spacing: 0.25em; color: var(--zinc); text-transform: uppercase; }
#loading .bar { width: 320px; height: 2px; background: #222933; margin-top: 30px; }
#loadbar { height: 100%; width: 0%; background: var(--lamp); transition: width 0.2s; box-shadow: 0 0 12px var(--lamp); }
#loadmsg { font-size: 12px; color: var(--zinc); letter-spacing: 0.15em; text-transform: uppercase; }
#start, #newgame { margin-top: 24px; background: transparent; color: var(--bone); border: 1px solid var(--zinc); padding: 10px 36px; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; }
#start:hover, #newgame:hover { border-color: var(--lamp); color: var(--lamp); }

.hud { position:absolute; pointer-events:none; }
#hud-bl { left: 22px; bottom: 22px; display:flex; flex-direction:column; gap:6px; }
#hud-br { right: 22px; bottom: 22px; text-align:right; }
#hud-tl { left: 22px; top: 18px; }
#hud-tr { right: 22px; top: 18px; text-align:right; }
#hud-bc { left: 50%; bottom: 90px; transform: translateX(-50%); text-align:center; width: 70%; }
.bar { position:relative; height: 6px; width: 220px; background: rgba(11,13,18,0.8); border: 1px solid rgba(139,148,163,0.4); }
.bar > i { position:absolute; left:0; top:0; bottom:0; display:block; background: var(--teal); transition: width 0.08s; }
.bar.hp > i { background: linear-gradient(90deg, #e2c5a0, #d49a3a); }
.bar.hp.low > i { background: var(--blood); }
.bar.heat { margin-top: 6px; } .bar.heat > i { background: linear-gradient(90deg, #6fb9d8, #d8ecf6); } .bar.heat.low > i { background: #7fd3ff; animation: blink 0.6s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.35; } }
.label { font-size: 10px; letter-spacing: 0.2em; color: var(--zinc); text-transform: uppercase; }
.ammo { font-size: 34px; font-weight: 300; letter-spacing: 0.05em; line-height: 1; color: var(--bone); }
.ammo small { font-size: 14px; color: var(--zinc); margin-left: 6px; }
.ammo.empty { color: var(--blood); }
.ammo small i { font-style: normal; color: #d9a441; letter-spacing: 0.12em; font-size: 11px; }
.weapon-name { font-size: 11px; letter-spacing: 0.25em; color: var(--lamp); text-transform: uppercase; }
.slots { display:flex; gap:6px; justify-content:flex-end; margin-top:6px; }
.slot { width: 26px; height: 18px; border: 1px solid rgba(139,148,163,0.4); font-size: 10px; display:flex; align-items:center; justify-content:center; color: var(--zinc); }
.slot.on { border-color: var(--lamp); color: var(--lamp); }
.reload { height: 3px; width: 120px; margin-left:auto; background: rgba(11,13,18,0.8); margin-top: 4px; }
.reload > i { display:block; height:100%; background: var(--lamp); }
.objective { font-size: 12px; color: var(--bone); letter-spacing: 0.06em; opacity: 0.85; max-width: 380px; margin-top: 6px; }
.objective::before { content: '› '; color: var(--lamp); }
.clock { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.dial { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(139,148,163,0.5); position:relative; background: conic-gradient(var(--lamp) 0deg, var(--lamp) var(--p), rgba(11,13,18,0.6) var(--p)); }
.dial::after { content:''; position:absolute; inset: 5px; border-radius:50%; background: #0b0d12; }
.daylabel { font-size: 11px; letter-spacing: 0.2em; color: var(--zinc); text-transform: uppercase; }
.daylabel b { color: var(--bone); font-weight: 500; }
.night .daylabel b { color: var(--lure); }
.inv { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin-top: 8px; max-width: 360px; }
.inv span { font-size: 11px; color: var(--zinc); letter-spacing: 0.05em; }
.inv span b { color: var(--bone); font-weight: 500; }
.prompt { position:absolute; transform: translate(-50%, -100%); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone); background: rgba(11,13,18,0.8); border: 1px solid rgba(139,148,163,0.4); padding: 4px 10px; white-space: nowrap; }
.prompt b { color: var(--lamp); border: 1px solid var(--lamp); padding: 0 5px; margin-right: 6px; font-weight: 500; }
.prompt .pb { height:2px; background: rgba(139,148,163,0.3); margin-top:4px; } .prompt .pb i { display:block; height:100%; background: var(--lamp); }
.line { font-size: 15px; line-height: 1.5; color: var(--bone); text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,0.8); opacity:0; transition: opacity 0.25s; }
.line.show { opacity: 1; }
.line .spk { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--zinc); display:block; margin-bottom: 2px; }
.line.tamsin .spk { color: var(--lamp); } .line.steward .spk { color: var(--teal); } .line.suit { font-family: ui-monospace, Menlo, monospace; color: var(--teal); font-size: 13px; letter-spacing: 0.18em; } .line.wren { font-style: italic; color: #d8d0c0; }
.hint { font-size: 11px; letter-spacing: 0.2em; color: var(--zinc); text-transform: uppercase; margin-top: 10px; opacity: 0; transition: opacity 0.3s; }
.hint.show { opacity: 0.9; }
.toast { position:absolute; left:50%; top: 22%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blood); opacity: 0; transition: opacity 0.2s; }
.toast.show { opacity: 1; }
.wave { position:absolute; left:50%; top: 70px; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lure); opacity:0; transition: opacity 0.5s; }
.wave.show { opacity: 1; }
.panel { position:absolute; background: rgba(11,13,18,0.86); border: 1px solid rgba(139,148,163,0.35); padding: 14px 16px; backdrop-filter: blur(6px); }
.panel h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lamp); font-weight: 500; }
#build { left: 22px; top: 50%; transform: translateY(-50%); width: 240px; }
.bitem { display:flex; justify-content:space-between; align-items:center; padding: 6px 8px; border: 1px solid transparent; cursor:pointer; font-size: 12px; }
.bitem:hover, .bitem.sel { border-color: rgba(255,180,90,0.6); background: rgba(255,180,90,0.06); }
.bitem.locked { opacity: 0.35; cursor: default; }
.bitem .cost { font-size: 10px; color: var(--zinc); letter-spacing: 0.05em; }
.bitem .cost.no { color: var(--blood); }
.bitem .key { font-size: 10px; color: var(--zinc); margin-right: 8px; }
.bdesc { font-size: 11px; color: var(--zinc); margin-top: 10px; line-height: 1.4; min-height: 32px; }
#craft { right: 22px; top: 50%; transform: translateY(-50%); width: 300px; }
#log { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; font-family: ui-monospace, Menlo, monospace; }
#log .meta { font-size: 10px; letter-spacing: 0.2em; color: var(--zinc); text-transform: uppercase; margin-bottom: 10px; }
#log pre { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--bone); margin:0; }
#log .close { margin-top: 12px; font-size: 10px; letter-spacing: 0.2em; color: var(--zinc); text-transform: uppercase; }
.modinfo { position:absolute; transform: translate(-50%, -110%); font-size: 11px; background: rgba(11,13,18,0.85); border: 1px solid rgba(139,148,163,0.4); padding: 6px 10px; white-space: nowrap; }
.modinfo b { color: var(--lamp); font-weight:500; }
.modinfo .pw { color: var(--teal); } .modinfo .off { color: var(--blood); }
#menu { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; text-align:center; }
#menu button, .panel button { background: transparent; color: var(--bone); border: 1px solid rgba(139,148,163,0.5); padding: 8px 18px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor:pointer; margin: 4px; }
#menu button:hover, .panel button:hover { border-color: var(--lamp); color: var(--lamp); }
.power { font-size: 11px; color: var(--zinc); letter-spacing: 0.1em; margin-top: 4px; }
.power b { color: var(--teal); font-weight: 500; } .power.over b { color: var(--blood); }
#dev { position:absolute; left: 22px; top: 60px; font-size: 10px; color: var(--zinc); font-family: ui-monospace, Menlo, monospace; white-space: pre; opacity: 0.7; }
.threat { position:absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lure); box-shadow: 0 0 10px var(--lure); transform: translate(-50%, -50%); opacity: 0.8; }
#sysmap { position:absolute; inset:0; background: rgba(5,6,10,0.92); display:flex; align-items:center; justify-content:center; }
.mapwrap { width: 1060px; max-width: 96vw; display:grid; grid-template-columns: 720px 1fr; gap: 20px; grid-template-rows: auto 480px; }
.maptitle { grid-column: 1 / 3; font-size: 13px; letter-spacing: 0.35em; color: var(--lamp); } .maptitle span { color: var(--zinc); letter-spacing: 0.2em; font-size: 11px; }
.mapcanvas { position:relative; width: 720px; height: 480px; background: radial-gradient(ellipse at 50% 50%, #1a1710 0%, #05060a 70%); border: 1px solid rgba(139,148,163,0.25); overflow:hidden; }
.mapcanvas .star { position:absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, #ffd9a0 0%, #ffb45a 40%, rgba(255,120,50,0) 72%); box-shadow: 0 0 60px rgba(255,180,90,0.5); }
.mapcanvas .orbit { position:absolute; border: 1px dashed rgba(139,148,163,0.18); border-radius: 50%; pointer-events:none; }
.mapcanvas .planet { position:absolute; border-radius: 50%; cursor:pointer; box-shadow: 0 0 18px rgba(0,0,0,0.6); transition: transform 0.15s; }
.mapcanvas .planet:hover { transform: scale(1.12); } .mapcanvas .planet.sel { outline: 2px solid var(--lamp); outline-offset: 4px; }
.mapcanvas .planet.here::after { content: 'you are here'; position:absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 16px; font-size: 9px; letter-spacing: 0.2em; color: var(--teal); white-space: nowrap; }
.mapcanvas .planet.locked { filter: grayscale(0.9) brightness(0.5); } .mapcanvas .planet.locked .pname { color: var(--zinc); }
.mapcanvas .pname { position:absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.mapinfo { border: 1px solid rgba(139,148,163,0.25); padding: 16px; font-size: 12px; }
.mapinfo h3 { margin: 14px 0 10px; font-size: 16px; font-weight: 400; letter-spacing: 0.2em; color: var(--bone); } .mapinfo h3 span { font-size: 11px; color: var(--zinc); letter-spacing: 0.1em; margin-left: 8px; }
.mapinfo .row { display:flex; justify-content:space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(139,148,163,0.15); } .mapinfo .row span { color: var(--zinc); text-transform: uppercase; letter-spacing: 0.15em; font-size: 10px; } .mapinfo .row b { font-weight: 500; text-align: right; }
.shipstats { font-size: 11px; color: var(--zinc); } .shipstats b { color: var(--bone); font-weight: 500; } .shipstats .ok { color: var(--teal); } .shipstats .bad { color: var(--blood); }
.hintline { margin-top: 20px; color: var(--zinc); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.mapinfo button { background: transparent; color: var(--bone); border: 1px solid var(--lamp); padding: 9px 16px; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; cursor:pointer; width: 100%; }
.mapinfo button:disabled { border-color: rgba(139,148,163,0.35); color: var(--zinc); cursor: default; }
#travel { position:absolute; inset:0; background:#05060a; } #travel .stars { position:absolute; inset:0; width:100%; height:100%; }
#travel .tfrom, #travel .tto { position:absolute; top: 40px; font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--zinc); } #travel .tfrom { left: 40px; } #travel .tto { right: 40px; color: var(--lamp); }
#travel .tstatus { position:absolute; left: 50%; bottom: 60px; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--bone); }
#ending { position:absolute; inset:0; overflow:hidden; }
#ending .eblack { position:absolute; inset:0; background:#000; }
#ending .eburn { position:absolute; left:0; right:0; bottom:0; height:45%; opacity:0; background: radial-gradient(ellipse at 50% 100%, rgba(255,180,90,0.55) 0%, rgba(255,110,50,0.25) 35%, rgba(0,0,0,0) 70%); }
#ending .elines { position:absolute; left:50%; bottom: 18%; transform: translateX(-50%); width: 70%; text-align:center; z-index: 3; }
#ending .elines:not(:empty) { background: rgba(0,0,0,0.72); padding: 18px 24px 6px; border-radius: 4px; box-shadow: 0 0 40px 30px rgba(0,0,0,0.72); }
#ending .elines .line { opacity: 1; margin-bottom: 14px; font-size: 17px; }
#ending .enames { position:absolute; left:50%; top:0; transform: translateX(-50%); width: 60%; height: 100%; overflow:hidden; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--zinc); letter-spacing: 0.1em; opacity: 0.6; z-index: 1; transition: opacity 2s; }
#ending .enames.dim { opacity: 0.18; }
#ending .enames .ecol { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 16px; padding-top: 100vh; }
#ending .enames .ecol span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ending .enames.scroll .ecol { animation: scrollnames 240s linear forwards; }
@keyframes scrollnames { from { transform: translateY(0); } to { transform: translateY(-100%); } }
#ending .etitle { position:absolute; left:50%; top: 42%; transform: translateX(-50%); font-size: 20px; letter-spacing: 0.4em; color: var(--bone); text-align:center; z-index: 4; text-shadow: 0 0 24px #000, 0 0 8px #000; white-space: nowrap; }
#ending .econt { position:absolute; left:50%; top: 52%; transform: translateX(-50%); z-index: 4; background: rgba(0,0,0,0.8); color: var(--bone); border: 1px solid var(--lamp); padding: 10px 30px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; cursor:pointer; }
.bar.filter { margin-top: 6px; } .bar.filter > i { background: linear-gradient(90deg, #8a9a3a, #d6e37a); } .bar.filter.low > i { background: #d6e37a; animation: blink 0.6s infinite alternate; }

.toast.ok { color: var(--teal); }

/* ---------- dialogue band, crosshair, journal, settings ---------- */
#hud-bc { bottom: 84px; width: min(820px, 78%); }
.line { display:inline-block; text-align:left; font-size: 17px; line-height: 1.5; padding: 10px 18px 11px 16px; background: rgba(6,8,12,0.66); border-left: 3px solid var(--zinc); border-radius: 2px; backdrop-filter: blur(3px); text-shadow: 0 1px 2px #000; max-width: 100%; }
.line.tamsin { border-left-color: var(--lamp); } .line.steward { border-left-color: var(--teal); } .line.wren { border-left-color: #d8d0c0; } .line.suit { border-left-color: var(--teal); background: rgba(6,8,12,0.5); }
.line .spk { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; display:block; margin-bottom: 3px; font-style: normal; }
.line .more { display:block; margin-top: 6px; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--zinc); opacity: 0.8; }
.cross { position:absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events:none; z-index: 5; }
.cross::before, .cross::after { content:''; position:absolute; background: rgba(240,235,220,0.9); box-shadow: 0 0 2px #000; }
.cross::before { left: 8px; top: 0; width: 2px; height: 18px; } .cross::after { top: 8px; left: 0; width: 18px; height: 2px; }
.cross { mask: radial-gradient(circle, transparent 3px, #000 3.5px); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
#journal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; max-height: 70vh; display:flex; flex-direction:column; }
#journal.hidden { display:none; }
#journal .jtabs { margin-bottom: 10px; } #journal .jtabs button.on { border-color: var(--lamp); color: var(--lamp); }
#journal .jbody { overflow-y: auto; flex: 1; min-height: 120px; max-height: 52vh; padding-right: 6px; }
#journal .jline { font-size: 13px; line-height: 1.5; color: var(--bone); padding: 6px 0 6px 10px; border-left: 2px solid var(--zinc); margin-bottom: 6px; }
#journal .jline.tamsin { border-left-color: var(--lamp); } #journal .jline.steward { border-left-color: var(--teal); } #journal .jline.suit { font-family: ui-monospace, Menlo, monospace; color: var(--teal); font-size: 12px; letter-spacing: 0.1em; }
#journal .jspk { display:block; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--zinc); margin-bottom: 2px; }
#journal .jlog { display:flex; justify-content:space-between; padding: 8px 10px; border: 1px solid rgba(139,148,163,0.3); margin-bottom: 6px; cursor:pointer; font-size: 12px; } #journal .jlog:hover { border-color: var(--lamp); }
#journal .jlog span { color: var(--zinc); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
#journal .jempty { color: var(--zinc); font-size: 12px; padding: 12px 0; }
#menu { width: 440px; }
#menu .srow { display:flex; align-items:center; gap: 10px; font-size: 11px; color: var(--bone); margin: 4px 0; text-align:left; }
#menu .srow span { width: 150px; letter-spacing: 0.05em; } #menu .srow b { width: 44px; text-align:right; color: var(--lamp); font-weight: 500; }
#menu .srow input[type=range] { flex: 1; accent-color: #ffb45a; }
#menu .shint { display:block; font-size: 10px; color: var(--zinc); letter-spacing: 0.08em; margin-top: 4px; }

/* ---------- the terminal at the core ---------- */
#terminal { position:fixed; inset:0; z-index: 30; background: rgba(2,4,7,0.92); display:flex; align-items:center; justify-content:center; pointer-events:auto; }
#terminal.hidden { display:none; }
#terminal .tscreen { width: min(760px, 86vw); max-height: 80vh; display:flex; flex-direction:column; border: 1px solid rgba(90,200,190,0.35); background: #04080a; padding: 22px 28px; font-family: ui-monospace, Menlo, monospace; box-shadow: 0 0 60px rgba(60,180,170,0.08) inset; }
#terminal .thead { font-size: 10px; letter-spacing: 0.32em; color: var(--teal); opacity: 0.8; margin-bottom: 16px; }
#terminal .tlog { overflow-y: auto; flex: 1; }
#terminal .tline { display:flex; gap: 14px; margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #d9e6e2; }
#terminal .tline.wren { color: #f0e6d2; }
#terminal .tspk { flex: 0 0 72px; font-size: 10px; letter-spacing: 0.25em; color: var(--teal); padding-top: 5px; }
#terminal .tline.wren .tspk { color: var(--lamp); }
#terminal .ttxt::after { content: '_'; animation: tblink 1s steps(2) infinite; color: var(--teal); }
#terminal .tline:not(:last-child) .ttxt::after { content: ''; }
#terminal .tprompt { margin: 10px 0 14px 86px; padding: 12px 16px; border: 1px solid var(--lamp); color: var(--lamp); font-size: 12px; letter-spacing: 0.25em; display:flex; flex-wrap:wrap; gap: 10px 22px; align-items:center; }
#terminal .tprompt .tp { font-weight: 600; } #terminal .tprompt .tk { color: var(--bone); font-size: 10px; letter-spacing: 0.2em; opacity: 0.8; }
#terminal .tprompt.done { border-color: var(--teal); color: var(--teal); }
#terminal .tfoot { margin-top: 12px; font-size: 9px; letter-spacing: 0.3em; color: var(--zinc); text-transform: uppercase; min-height: 12px; }
@keyframes tblink { 50% { opacity: 0; } }
#ending .ewatch { display:block; margin-top: 18px; color: var(--bone); letter-spacing: 0.3em; font-size: 10px; opacity: 0.8; }

/* ---------- suit tuning ---------- */
#menu .tuning { text-align:left; }
#menu .trow { display:flex; flex-wrap:wrap; align-items:center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid rgba(139,148,163,0.18); font-size: 11px; color: var(--bone); }
#menu .trow .tslot { font-family: ui-monospace, Menlo, monospace; color: var(--lamp); width: 14px; }
#menu .trow.locked { color: var(--zinc); } #menu .trow .tdesc { flex-basis: 100%; font-size: 10px; color: var(--zinc); line-height: 1.5; }
#menu .trow .tdesc i { color: var(--bone); font-style: normal; }
#menu .trow button { padding: 5px 12px; font-size: 10px; margin: 0; }

#map .course, .mapinfo .course { font-size: 11px; color: var(--lamp); letter-spacing: 0.08em; margin: 4px 0 8px; }

/* ---------- build ring, craft hints ---------- */
#buildring { position:absolute; transform: translate(-50%, -50%); border: 1px dashed rgba(255,180,90,0.45); border-radius: 50%; pointer-events:none; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
#buildring.hidden { display:none; }
#craft .cost em { font-style: normal; color: var(--blood); } #craft .cost .need { color: var(--zinc); font-size: 10px; margin-left: 6px; }