:root { --bg:#14110d; --panel:#211b14; --panel2:#2b231a; --ink:#efe6d2; --muted:#a39878; --gold:#d6a84a; --line:#43372a; --ok:#7fb069; --err:#e0705a; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:15px/1.4 Georgia, 'Times New Roman', serif; }
a { color:var(--gold); }
button, select, input { font:inherit; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:6px 10px; }
button { cursor:pointer; } button:hover { border-color:var(--gold); } button.small { padding:2px 8px; font-size:13px; }
button.primary { background:#6b4e1b; border-color:var(--gold); }
button:disabled { opacity:.45; cursor:default; }
body.page { display:flex; align-items:center; justify-content:center; min-height:100%; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; width:min(92vw,380px); }
.card.wide { width:min(96vw,820px); align-self:flex-start; margin-top:24px; }
.card h1 { margin-top:0; color:var(--gold); } .card label { display:block; margin:12px 0; } .card input { width:100%; }
.card form button { width:100%; margin-top:8px; } .card .row { display:flex; gap:12px; align-items:flex-end; } .card .row label { flex:1; margin:0; }
.card .row button { width:auto; margin:0; }
.muted { color:var(--muted); } .ok { color:var(--ok); } .err { color:var(--err); }
table { width:100%; border-collapse:collapse; margin-top:16px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
code { color:var(--gold); }
body.game { overflow:hidden; display:flex; flex-direction:column; }
#topbar { display:flex; gap:16px; align-items:center; padding:6px 12px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
#topbar .logo { color:var(--gold); } #topbar nav { margin-left:auto; display:flex; gap:8px; align-items:center; }
#resbar { display:flex; gap:14px; flex-wrap:wrap; } #resbar span { white-space:nowrap; } #resbar b { color:var(--gold); font-weight:normal; }
#stage { position:relative; flex:1; min-height:0; }
#stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#overlay { touch-action:none; }
#panel { position:absolute; top:8px; right:8px; width:min(340px,92vw); max-height:calc(100% - 16px); overflow:auto; background:rgba(33,27,20,.94); border:1px solid var(--line); border-radius:8px; padding:12px; }
#panel h3 { margin:0 0 6px; color:var(--gold); } #panel h4 { margin:12px 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
#panel .row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:4px 0; } #panel input[type=number] { width:70px; }
#panel .bar { height:6px; background:#3a3025; border-radius:3px; overflow:hidden; flex:1; min-width:60px; } #panel .bar i { display:block; height:100%; background:var(--gold); }
#drawer { position:absolute; left:8px; top:8px; bottom:8px; width:min(460px,94vw); overflow:auto; background:rgba(33,27,20,.97); border:1px solid var(--line); border-radius:8px; padding:12px; }
#drawer h3 { margin-top:0; color:var(--gold); } #drawer .entry { padding:8px 0; border-bottom:1px solid var(--line); } #drawer .entry small { color:var(--muted); }
#toast { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--gold); padding:8px 14px; border-radius:6px; max-width:90vw; }
#toast.bad { border-color:var(--err); }
#onboard { position:fixed; inset:0; background:rgba(10,8,5,.85); display:flex; align-items:center; justify-content:center; z-index:5; } #onboard[hidden] { display:none; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
@media (max-width:700px) { #panel { top:auto; bottom:8px; max-height:50%; } }

#panel label.fld { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--muted, #a89c84); } #panel label.fld input { font-size:inherit; color:var(--ink); }
#panel .hint { font-size:12px; opacity:.8; margin:2px 0 6px; }
#panel .slider input[type=range] { flex:1; min-width:90px; } #panel .slider .a-v { width:2em; text-align:right; }

label.sl { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:12px; } label.sl > span { min-width:130px; } label.sl input[type=range] { flex:1; min-width:80px; } label.sl .val { min-width:3.5em; text-align:right; }
label.sl select { flex:1; }
label.ck { display:flex; align-items:center; gap:6px; font-size:12px; margin:2px 0; }
.routine { border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0; } .routine.off { opacity:.55; }
.routine .rhead { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .routine .rhead label { margin-left:auto; }
.entry.warn { border-left:3px solid #d06a4a; padding-left:6px; }

#guide { position:absolute; left:8px; bottom:8px; width:min(320px,92vw); max-height:50%; overflow:auto; background:rgba(33,27,20,.94); border:1px solid var(--line); border-radius:8px; padding:10px; }
#guide[data-collapsed] { width:auto; padding:4px; background:transparent; border:0; }
#guide .gh { display:flex; justify-content:space-between; align-items:center; color:var(--gold); } #guide h4 { margin:10px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
#guide .adv { border-left:3px solid var(--line); padding:2px 0 2px 8px; margin:8px 0; } #guide .adv p { margin:0 0 4px; font-size:14px; }
#guide .adv.now { border-color:var(--gold); } #guide .adv.warn { border-color:var(--err); } #guide .adv.next { border-color:var(--ok); }
#guide ul.goals { list-style:none; margin:0; padding:0; font-size:13px; } #guide ul.goals li.done { color:var(--ok); text-decoration:line-through; opacity:.75; }
.modal { position:fixed; inset:0; background:rgba(10,8,5,.85); display:flex; align-items:center; justify-content:center; z-index:6; } .modal[hidden] { display:none; }
.awaylist { max-height:50vh; overflow:auto; margin:8px 0; } .awaylist .entry { padding:6px 0; border-bottom:1px solid var(--line); } .awaylist .entry.warn { border-left:3px solid #d06a4a; padding-left:6px; }
@media (max-width:700px) { #guide { bottom:auto; top:8px; max-height:40%; } }