:root {
  --bg: #14110d;
  --panel: #1e1a14;
  --ink: #e8e0d0;
  --muted: #9a9080;
  --grass: #7ab648;
  --grass-dk: #4e7a2c;
  --dirt: #8a5a3a;
  --line: #342e24;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -200px, #241f18 0, var(--bg) 60%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  padding: clamp(12px, 3vw, 32px);
}
main { max-width: 820px; margin: 0 auto; }

.masthead { text-align: center; margin-bottom: 20px; }
.masthead h1 {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(34px, 8vw, 60px);
  letter-spacing: 0.12em;
  margin: 0;
  color: var(--grass);
  text-shadow: 0 2px 0 var(--grass-dk), 0 3px 0 #2c4418, 0 4px 10px #0008;
}
.tagline { color: var(--muted); margin: 6px 0 0; font-size: 14px; }

.screen {
  position: relative;
  background: #000;
  border: 3px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 40px #000a, inset 0 0 0 1px #0006;
  max-width: 640px;
  margin: 0 auto;
}
#screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 256 / 224;
  image-rendering: pixelated;
  border-radius: 4px;
  background: #10203a;
}
.overlay {
  position: absolute; inset: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #000a; backdrop-filter: blur(2px);
  border-radius: 4px;
}
.overlay.hidden { display: none; }
#boot {
  font-size: 20px; padding: 14px 34px;
  background: var(--grass); color: #10230a; border: 0;
  border-radius: 8px; cursor: pointer; font-weight: 700;
  box-shadow: 0 4px 0 var(--grass-dk);
}
#boot:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--grass-dk); }

.statusbar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0 6px;
}
.badge {
  font: 600 13px ui-monospace, Menlo, Consolas, monospace;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; white-space: nowrap;
}
.badge-off { color: var(--muted); }
.badge-on { color: #10230a; background: var(--grass); border-color: var(--grass-dk); }
.badge-btn { cursor: pointer; }
.badge-btn:disabled { opacity: .5; cursor: default; }

.controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 22px auto; max-width: 640px;
}
@media (max-width: 560px) { .controls { grid-template-columns: 1fr; } }
.col {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.col h2 {
  margin: 0 0 8px; font-size: 14px; color: var(--grass);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.controls table { width: 100%; border-collapse: collapse; font-size: 13px; }
.controls td { padding: 3px 0; vertical-align: top; }
.controls td:first-child {
  color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; padding-right: 12px; width: 42%;
}
.controls td:last-child { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.about { max-width: 640px; margin: 8px auto 0; color: var(--muted); font-size: 13px; }
.about a { color: var(--grass); }
.about .note { font-size: 12px; opacity: .85; margin-top: 10px; }
.repo { text-align: center; margin-top: 14px; }