:root {
  color-scheme: dark;
  --bg: #080b0a;
  --panel: #0d1210;
  --line: #344138;
  --text: #c8d2c5;
  --muted: #718274;
  --green: #50e590;
  --cyan: #47e6dc;
  --yellow: #f6e33e;
  --red: #f05a52;
  --pink: #e75cae;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #18221b 0, var(--bg) 45rem); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, select, input { font: inherit; }
.app-shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 24px; }
.app-header, .control-deck, .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow, .header-status, .app-footer, label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 7px 0 22px; color: var(--green); font: 700 clamp(1.7rem, 4vw, 2.8rem)/1 "Courier New", monospace; letter-spacing: 0.14em; }
h1 span { color: var(--yellow); }
.header-status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.auth-screen { width: min(620px, 100%); margin: 35px auto 0; }
.auth-terminal { padding: clamp(22px, 5vw, 42px); border: 1px solid #425047; border-radius: 5px; background: #000; box-shadow: 0 22px 80px #000, inset 0 0 40px #041008; font: clamp(12px, 1.3vw, 15px)/1.35 Monaco, "Lucida Console", "Courier New", monospace; }
.auth-intro { color: var(--muted); }
.auth-tabs { display: flex; gap: 8px; margin: 22px 0 16px; }
.auth-tab { color: var(--muted); }
.auth-tab.active { color: var(--green); border-color: var(--green); }
.auth-form { display: grid; gap: 8px; }
.auth-form[hidden] { display: none; }
.auth-form label { color: var(--text); font-size: 0.72rem; }
.auth-form input { width: 100%; padding: 10px; border: 1px solid #3d5d47; border-radius: 3px; background: #0a100c; color: var(--text); font: inherit; }
.auth-form input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 2px #50e59022; }
.auth-form button { margin-top: 8px; justify-self: start; }
.auth-message { min-height: 1.4em; margin-top: 14px; color: var(--cyan); }
.auth-message.error { color: var(--red); }
.auth-message.success { color: var(--green); }
.muted { color: var(--muted); }
.game-screen { overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; padding: clamp(18px, 3vw, 34px); border: 1px solid #425047; border-radius: 5px; background: #000; box-shadow: 0 22px 80px #000, inset 0 0 40px #041008; color: var(--text); font: clamp(10px, 1.1vw, 13px)/1.12 Monaco, "Lucida Console", "Courier New", monospace; letter-spacing: 0; }
.screen-line { white-space: pre; }
.screen-line strong { color: var(--cyan); font-weight: 400; }
.screen-line .yellow { color: var(--yellow); }
.screen-line .red, .red { color: var(--red); }
.screen-line .green { color: var(--green); }
.divider { height: 1px; margin: 8px 0; background: #d7ded3; opacity: 0.65; }
.screen-top { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 18px; }
.screen-top > div { min-width: 0; }
.screen-top .territory { color: #000; background: var(--yellow); padding: 0 8px; }
.screen-top .turns { text-align: right; }
.screen-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: 18px; min-height: 190px; }
.map { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(8, 1fr); min-height: 190px; border-right: 1px solid #1d2a20; }
.sector { display: grid; place-items: center; color: #3158af; font-size: 0.85em; }
.sector.star { color: var(--yellow); }
.sector.enemy { color: var(--pink); }
.sector.friendly { color: var(--green); }
.sector.player { color: var(--cyan); text-shadow: 0 0 7px var(--cyan); }
.amiga-glyph { position: relative; display: inline-block; width: 1em; height: 1em; vertical-align: -0.16em; }
.amiga-pixel { position: absolute; left: calc(var(--x) * 12.5%); top: calc(var(--y) * 12.5%); width: 12.5%; height: 12.5%; background: currentColor; }
.amiga-sprite { display: inline-block; width: var(--sprite-width, 8px); height: var(--sprite-height, 8px); flex: 0 0 var(--sprite-width, 8px); background-repeat: no-repeat; background-position: calc(-1 * var(--sprite-x)) calc(-1 * var(--sprite-y)); image-rendering: pixelated; transform: scale(var(--sprite-scale, 1.25)); transform-origin: center; vertical-align: -0.12em; }
.amiga-sprite-fallback { color: currentColor; font-size: 0.8em; }
.status-panel { padding-left: 2px; }
.status-panel .label { color: var(--text); }
.status-panel .power { color: var(--yellow); }
.weapon-row { display: flex; justify-content: space-between; gap: 12px; }
.message-log { min-height: 68px; color: var(--text); }
.message-log .error { color: var(--red); }
.message-log .info { color: var(--cyan); }
.message-log .success { color: var(--green); }
.message-log .muted { color: var(--muted); }
.command-line { color: var(--yellow); }
.command-line .prompt { color: var(--cyan); }
.terminal-panel { display: grid; gap: 4px; padding: 7px 0; }
.panel-title { color: var(--cyan); letter-spacing: 0.06em; }
.terminal-action { display: block; width: 100%; padding: 3px 5px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
.terminal-action:hover, .terminal-action:focus-visible, .terminal-action.selected { border-left-color: var(--yellow); background: #101b12; outline: none; }
.terminal-action .muted, .terminal-panel .muted { color: var(--muted); }
.terminal-panel .success { color: var(--green); }
.control-deck { width: min(960px, 100%); margin: 15px auto 0; padding: 12px 0; border-top: 1px solid #202c23; border-bottom: 1px solid #202c23; }
.control-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
button, select { border: 1px solid #3d5d47; border-radius: 3px; padding: 7px 10px; background: #111a13; color: var(--green); cursor: pointer; }
button:hover, select:hover, button:focus-visible, select:focus-visible { border-color: var(--green); background: #17271a; outline: none; }
button:disabled { opacity: 0.5; cursor: wait; }
button.subtle { color: var(--muted); border-color: #29352c; }
kbd { color: var(--yellow); }
select { color: var(--text); }
.clock-controls { margin-left: auto; }
.app-footer { width: min(960px, 100%); margin: 14px auto 0; font-size: 0.65rem; }
@media (max-width: 750px) {
  .app-shell { width: min(100% - 18px, 650px); padding-top: 18px; }
  .app-header, .control-deck, .app-footer { align-items: flex-start; flex-direction: column; }
  .header-status { margin-top: -13px; }
  .screen-top { grid-template-columns: 1fr 1fr; gap: 5px 12px; }
  .screen-top .turns { text-align: left; }
  .screen-body { grid-template-columns: 1fr; gap: 5px; }
  .map { min-height: 130px; border-right: 0; border-bottom: 1px solid #1d2a20; }
  .status-panel { padding: 0 0 7px; }
  .clock-controls { margin-left: 0; }
}