:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, monospace;
  background: #030705;
  color: #acc59e;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 45%, #101c13 0%, #050a07 56%, #010302 100%);
  font-size: 15px;
  line-height: 1.5;
}
button, input { font: inherit; }
button { cursor: pointer; }
.machine { max-width: 1160px; min-height: 100vh; margin: auto; padding: clamp(12px, 4vw, 45px); display: flex; align-items: center; }
.bezel { width: 100%; padding: clamp(8px, 1.5vw, 18px); border: 1px solid #304036; background: #182119; box-shadow: 0 0 0 2px #050a06, 0 0 0 4px #253529, 0 32px 85px #000; }
.screen { position: relative; min-height: min(780px, calc(100vh - 130px)); overflow: hidden; border: 2px solid #050805; background: #071009; box-shadow: inset 0 0 65px #000, 0 0 8px #48623b; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, #0005 4px); opacity: .38; }
.screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 40%, transparent 45%, #0008 100%); }
.screen-content { position: relative; z-index: 1; max-width: 940px; min-height: min(780px, calc(100vh - 130px)); margin: auto; padding: clamp(20px, 4vw, 45px) clamp(18px, 4vw, 50px) 28px; display: flex; flex-direction: column; text-shadow: 0 0 8px #74d17b80; }
.boot-top, .machine-foot, .status, .controls { display: flex; justify-content: space-between; gap: 12px; }
.boot-top { color: #789476; font-size: 12px; letter-spacing: .12em; }
.title { margin: 21px 0 5px; color: #d1e7bb; font-size: clamp(6px, 1.5vw, 16px); font-weight: bold; line-height: 1.1; letter-spacing: 0; white-space: pre; }
.edition { margin: 10px 0 16px; color: #c8dba9; font-size: 13px; letter-spacing: .19em; }
.rule { overflow: hidden; color: #748d70; white-space: nowrap; line-height: 1; }
.status { flex-wrap: wrap; justify-content: flex-start; column-gap: clamp(18px, 5vw, 62px); row-gap: 2px; padding: 10px 0; color: #91ab8c; font-size: 12px; letter-spacing: .08em; }
.status b { color: #d5e3ba; font-weight: normal; }
.log { flex: 1; min-height: 220px; max-height: 440px; overflow-y: auto; scrollbar-color: #557056 #071009; padding: 26px 6px 25px 0; }
.log p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.system-line { color: #91a882; }
.intro { color: #c0d3ad; max-width: 72ch; }
.turn { margin-top: 29px; }
.turn-command { margin-bottom: 12px !important; color: #dbe7c4; }
.turn-title { color: #b2a98c; font-size: 12px; letter-spacing: .12em; margin-bottom: 9px !important; }
.turn-scene { color: #b7cba9; max-width: 72ch; }
.turn-ending { margin-top: 18px !important; color: #d2b88c; letter-spacing: .12em; }
.pending { margin-top: 23px !important; color: #9da990; animation: blink 1.2s steps(2, start) infinite; }
.bottom { padding-top: 14px; border-top: 1px solid #516449; }
.notice { min-height: 21px; margin: 0 0 9px; color: #c6ae8a; font-size: 12px; }
form label { display: block; margin-bottom: 6px; color: #d5e3ba; font-size: 13px; letter-spacing: .1em; }
.prompt-row { display: flex; align-items: center; gap: 12px; }
.prompt-mark { color: #d9eac7; font-size: 20px; }
input { min-width: 0; flex: 1; padding: 8px 2px; border: 0; outline: 0; color: #e1ebce; background: transparent; caret-color: #dcecc7; }
input:focus-visible { box-shadow: inset 0 -1px #9fbe91; }
input:disabled { opacity: .55; }
button { border: 1px solid #6d8768; border-radius: 0; padding: 7px 11px; color: #d3e2bd; background: #142017; font-size: 12px; letter-spacing: .07em; }
button:hover:not(:disabled), button:focus-visible { color: #061009; background: #c0d6af; outline: 0; }
button:disabled { cursor: default; opacity: .45; }
.help { margin: 5px 0 0 25px; color: #728c70; font-size: 11px; letter-spacing: .07em; }
.controls { align-items: center; justify-content: flex-end; margin-top: 21px; color: #789476; font-size: 11px; letter-spacing: .08em; }
.controls span { margin-left: auto; }
.controls button { border-color: #52664e; color: #a9bea0; background: transparent; }
.machine-foot { padding: 15px 16px 0; color: #6e7f68; font-size: 11px; letter-spacing: .16em; }
.machine-foot span:last-child { color: #899e7b; }
[hidden] { display: none !important; }
@keyframes blink { 50% { opacity: .3; } }
@media (max-width: 600px) {
  .machine { padding: 0; align-items: stretch; }
  .bezel { padding: 5px; border: 0; }
  .screen, .screen-content { min-height: calc(100vh - 48px); }
  .screen-content { padding: 23px 17px; }
  .title { font-size: clamp(5px, 1.45vw, 8px); }
  .boot-top { font-size: 10px; }
  .status { font-size: 11px; column-gap: 18px; }
  .log { max-height: none; }
  .prompt-row { gap: 6px; }
  .prompt-row button { padding: 7px 6px; font-size: 11px; }
  .machine-foot { padding: 8px 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .pending { animation: none; } }