:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#171914; color:#e9f4c6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:18px; background:radial-gradient(circle at top,#293121,#10120f 65%); }
button,input { font:inherit; }
button { border:2px solid #72834e; background:#27301f; color:#efffc4; padding:.7rem .85rem; border-radius:8px; cursor:pointer; box-shadow:inset 0 -2px #151b10; }
button:hover,button:focus { background:#354327; outline:2px solid #a5bd72; outline-offset:1px; }
input { width:100%; padding:.65rem; margin-top:.35rem; background:#10150e; border:2px solid #56613e; color:#efffc4; border-radius:6px; text-transform:none; }
label { display:block; margin:.75rem 0; }
.machine { width:min(100%,980px); border:8px solid #454d3c; border-radius:28px; background:#20251d; box-shadow:0 20px 60px #0009,inset 0 0 0 3px #141711; padding:14px; }
.machine-head,.machine-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 8px; }
.machine-head small { display:block; margin-top:4px; color:#b9c79a; }
.brand { font-weight:900; letter-spacing:.08em; }
.badge,.signal { border:1px solid #7c8e55; border-radius:999px; padding:.3rem .55rem; font-size:.78rem; background:#151a12; }
.screen { min-height:520px; background:#b8c894; color:#15200d; border:8px inset #5b6947; padding:14px; overflow:auto; max-height:72vh; }
.hidden { display:none !important; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
.tab.active { background:#a9bd71; color:#14200c; border-color:#d9ef9f; }
.drawer { display:none; }
.drawer.active { display:block; }
.panel { border:3px solid #344326; background:#c9d7a8; padding:12px; margin-bottom:12px; box-shadow:inset 0 0 0 2px #e3efc8; }
.panel h2 { margin:0 0 10px; font-size:1rem; letter-spacing:.07em; }
.panel-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.button-row { display:flex; flex-wrap:wrap; gap:8px; }
.screen button { background:#465f31; color:#f6ffe0; border-color:#26351d; }
.plots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.plot { border:2px dashed #61754a; padding:8px; min-height:110px; background:#b8c897; }
.plot strong { display:block; }
.crop-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.crop-actions button { font-size:.72rem; padding:.4rem; }
.creature-stage { text-align:center; }
.creature-glyph { white-space:pre; font-size:clamp(1.7rem,6vw,3.4rem); line-height:1; padding:18px; min-height:130px; display:grid; place-items:center; filter:contrast(1.2); }
.creature-glyph[data-palette="MOSS"] { color:#344b1f; }
.creature-glyph[data-palette="BERRY"] { color:#6b274d; }
.creature-glyph[data-palette="MUD"] { color:#5d4129; }
.creature-glyph[data-palette="CREAM"] { color:#665d35; }
.creature-glyph[data-palette="NIGHT"] { color:#243441; }
.creature-glyph[data-palette="BEAN"] { color:#31543a; }
.signal-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.signal { color:#15200d; background:#dce9bd; border-color:#637749; }
.meter { display:grid; grid-template-columns:100px 1fr 34px; gap:8px; align-items:center; margin:.35rem 0; }
.bar { height:12px; border:2px solid #3c4f2c; background:#98aa78; }
.bar > span { display:block; height:100%; background:#334d25; }
.status { min-height:1.25em; }
.return-summary { border:3px double #40502f; background:#d8e6b8; padding:10px; margin-bottom:12px; }
.return-summary h2 { margin-top:0; }
.king-panel { text-align:center; }
.king-face { font-size:4rem; line-height:1; }
.tiny { padding:.35rem .5rem; font-size:.7rem; }
.divider { text-align:center; margin:1rem 0; font-weight:700; }
.gate-screen { max-width:560px; margin:auto; }
@media (max-width:650px) {
  body { padding:0; place-items:stretch; }
  .machine { border-radius:0; min-height:100vh; width:100%; border-width:4px; }
  .screen { max-height:none; min-height:calc(100vh - 175px); }
  .panel-row { grid-template-columns:1fr; }
  .plots { grid-template-columns:repeat(2,1fr); }
  .machine-foot { align-items:flex-start; flex-direction:column; }
}