* { box-sizing: border-box; margin: 0; }
:root {
  --bg:#14110c; --panel:#1f1a12; --edge:#3a3122; --ink:#d8cdb4; --dim:#8f8570;
  --gold:#c9a44c; --red:#a4432f; --ok:#6f8f4f;
}
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--ink);
  font:14px/1.45 Georgia, "Times New Roman", serif; }
canvas { position:fixed; inset:0; width:100vw; height:100vh; display:block; cursor:grab; }
canvas.drag { cursor:grabbing; }

.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,8,5,.88); z-index:30; }
.card { background:var(--panel); border:1px solid var(--edge); padding:28px 32px; width:320px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 0 40px #000; }
.card.wide { width:420px; }
.card h1 { font-size:26px; letter-spacing:6px; color:var(--gold); text-align:center; }
.card h2 { color:var(--gold); }
.sub { color:var(--dim); font-style:italic; }
.card .sub { text-align:center; margin-top:-6px; }
input, button {
  font:inherit; color:var(--ink); background:#26201580; border:1px solid var(--edge); padding:8px 10px;
}
input[type=color] { padding:2px; height:32px; width:60px; }
button { cursor:pointer; background:#2e2718; }
button:hover { border-color:var(--gold); }
button:disabled { opacity:.4; cursor:default; }
button.mini { padding:2px 8px; font-size:12px; }
.err { color:var(--red); min-height:1.2em; font-size:13px; }
.row { display:flex; align-items:center; gap:10px; }
.hidden { display:none !important; }

#topbar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; gap:18px;
  align-items:center; padding:6px 14px; background:linear-gradient(#241d12,#1a1510);
  border-bottom:1px solid var(--edge); }
#topbar b { color:var(--gold); }
#t-date { color:var(--gold); min-width:170px; }
.grow { flex:1; }
.paused { color:var(--red); }

#panel { position:fixed; top:48px; right:0; bottom:0; width:270px; z-index:15;
  background:var(--panel); border-left:1px solid var(--edge); padding:16px; overflow-y:auto; }
#panel h3 { color:var(--gold); }
#p-body { margin:10px 0; display:flex; flex-direction:column; gap:6px; font-size:13px; }
#p-body .k { color:var(--dim); }
#p-claim { width:100%; margin-top:6px; }

.cultures { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; }
.cultures .c { border:1px solid var(--edge); padding:8px 10px; cursor:pointer; display:flex; gap:10px; align-items:center; }
.cultures .c:hover { border-color:var(--gold); }
.cultures .c.sel { border-color:var(--gold); background:#2e2718; }
.cultures .dot { width:14px; height:14px; border-radius:50%; flex:none; }
.cultures small { color:var(--dim); display:block; }

#ticker { position:fixed; left:12px; bottom:12px; z-index:15; max-width:420px;
  font-size:12px; color:var(--dim); text-shadow:0 1px 2px #000; }
#ticker div:first-child { color:var(--ink); }

#admin { position:fixed; top:48px; left:0; bottom:0; width:420px; z-index:25;
  background:var(--panel); border-right:1px solid var(--edge); padding:16px;
  display:flex; flex-direction:column; gap:10px; }
#admin h3 { color:var(--gold); }
#a-config { flex:1; font:12px/1.4 monospace; background:#151009; color:var(--ink);
  border:1px solid var(--edge); padding:8px; resize:none; }
button.danger { border-color:var(--red); color:var(--red); }
.camps button { display:block; width:100%; margin-top:4px; text-align:left; }