:root { --navy:#172038; --walnut:#202e37; --glass:rgba(21,29,40,.86); --gold:#e8c170; --ink:#ebede9; --dim:#a8b5b2; --red:#cf573c; --green:#75a743; --paper:#e7d5b3; --paperink:#341c27; }
* { box-sizing:border-box; }
html,body { margin:0; background:#090a14; color:var(--ink); font:14px/1.35 "Segoe UI", system-ui, sans-serif; }
.app { max-width:960px; margin:0 auto; padding:12px; }
.screen { position:relative; width:100%; aspect-ratio:16/9; background:linear-gradient(#3c5e8b 0%, #73bed3 55%, #a4dddb 68%, #75a743 69%, #468232 100%); border:1px solid #394a50; overflow:hidden; }
.screen.dawn { background:linear-gradient(#3c5e8b, #c65197 50%, #e8c170 68%, #468232 69%, #25562e); }
.screen.dusk { background:linear-gradient(#1e1d39, #7a367b 50%, #cf573c 68%, #25562e 69%, #19332d); }
.screen.night { background:linear-gradient(#090a14, #1e1d39 60%, #253a5e 68%, #19332d 69%, #090a14); }
.panel { position:absolute; background:var(--glass); border:1px solid #577277; box-shadow:inset 0 0 0 1px #10141f; padding:6px 8px; font-size:12px; }
.panel .lbl { color:var(--gold); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.bag { left:8px; top:8px; width:190px; }
.party { left:8px; top:62px; width:190px; display:flex; gap:4px; }
.party .p { flex:1; text-align:center; cursor:pointer; padding:2px 0; border:1px solid transparent; }
.party .p.sel { border-color:var(--gold); }
.party .head { width:14px; height:14px; margin:0 auto 2px; border-radius:2px; background:#c09473; }
.party .dead .head { background:#394a50; }
.party .pips { display:flex; gap:1px; justify-content:center; height:4px; }
.party .pips i { width:5px; background:#394a50; }
.party .pips i.on { background:var(--green); } .party .pips i.warn { background:var(--gold); } .party .pips i.bad { background:var(--red); }
.party .key, .hot .key, .keycap { display:inline-block; min-width:14px; padding:0 3px; border:1px solid #577277; background:#10141f; color:var(--dim); font-size:9px; line-height:12px; text-align:center; }
.party .st { font-size:9px; color:var(--red); height:12px; }
.hot { left:206px; top:8px; display:flex; gap:4px; padding:4px; }
.hot .b { width:52px; text-align:center; cursor:pointer; padding:2px; border:1px solid transparent; }
.hot .b:hover { border-color:var(--gold); } .hot .b.dim { opacity:.4; cursor:default; }
.hot .pips { display:flex; gap:2px; justify-content:center; margin:2px 0; } .hot .pips i { width:8px; height:4px; background:#394a50; } .hot .pips i.on { background:var(--gold); }
.status { right:8px; top:8px; text-align:right; white-space:nowrap; }
.status span { margin-left:10px; } .status .lm { color:var(--gold); }
.speed { right:8px; top:44px; padding:3px 6px; }
.speed b { color:var(--gold); }
.center { position:absolute; left:206px; right:8px; top:64px; bottom:8px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.wagon { font-size:36px; filter:drop-shadow(0 2px 0 #10141f); align-self:flex-start; margin-left:20%; animation:bob 1.2s steps(2) infinite; }
.wagon.still { animation:none; }
@keyframes bob { 50% { transform:translateY(1px); } }
.diary { position:absolute; left:8px; bottom:8px; width:300px; max-height:52%; overflow:auto; background:var(--paper); color:var(--paperink); padding:8px 10px; font:13px/1.35 Georgia, serif; border:1px solid #c09473; box-shadow:2px 2px 0 #10141f; }
.diary div { margin-bottom:2px; } .diary .day { color:#884b2b; font-size:11px; }
.pad { position:absolute; right:8px; bottom:8px; width:330px; max-height:70%; overflow:auto; background:var(--paper); color:var(--paperink); padding:10px 12px; border:1px solid #c09473; box-shadow:2px 2px 0 #10141f; font-family:Georgia, serif; }
.pad h3 { margin:0 0 6px; font-size:14px; } .pad .choice { display:block; width:100%; text-align:left; margin:3px 0; padding:5px 8px; background:#fff8; border:1px solid #c09473; color:var(--paperink); cursor:pointer; font:13px Georgia, serif; }
.pad .choice:hover { background:#fff; } .pad .choice[disabled] { opacity:.4; cursor:default; }
.pad .risk { float:right; font-size:10px; letter-spacing:.06em; }
.pad table { width:100%; font-size:12px; border-collapse:collapse; } .pad td { padding:2px 4px; border-bottom:1px solid #d7b594; } .pad td.n { text-align:right; }
.card { background:var(--walnut); border:1px solid #577277; padding:14px 16px; margin:8px 0; }
.card h1, .card h2 { margin:0 0 8px; color:var(--gold); font-weight:600; }
input, select, button { font:inherit; }
input[type=text] { background:#10141f; color:var(--ink); border:1px solid #577277; padding:4px 6px; }
select { background:#10141f; color:var(--ink); border:1px solid #577277; padding:3px; }
button.btn { background:#577277; color:var(--ink); border:1px solid #a8b5b2; padding:6px 12px; cursor:pointer; } button.btn:hover { background:#819796; } button.btn[disabled] { opacity:.4; cursor:default; }
button.sm { padding:1px 6px; font-size:12px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0; }
table.store { border-collapse:collapse; } table.store td, table.store th { padding:4px 8px; border-bottom:1px solid #394a50; text-align:left; }
.tip { position:fixed; z-index:9; background:#10141f; border:1px solid var(--gold); padding:6px 8px; font-size:11px; pointer-events:none; white-space:pre; display:none; }
.dim { color:var(--dim); } .gold { color:var(--gold); } .red { color:var(--red); }
.help { font-size:12px; color:var(--dim); margin-top:8px; }