:root {
  color-scheme: dark;
  font-family: "Courier New", "MS Gothic", monospace;
  background: #071011;
  color: #d3e4a5;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 20%, #203836 0, #101e1f 50%, #071011 100%);
}

.game-shell { width: min(100%, 980px); margin: 0 auto; }

.titlebar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
h1 { margin: 1px 0 0; font-size: clamp(20px, 4vw, 34px); line-height: 1; letter-spacing: .04em; }
.kicker { color: #78998a; font-size: 10px; letter-spacing: .18em; }
.prototype-badge { display: inline-block; margin-top: 6px; padding: 3px 7px; color: #071011; background: #e2c36b; font-size: 10px; font-weight: bold; letter-spacing: .08em; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
button, summary, select {
  color: #d3e4a5; background: #172c2b; border: 1px solid #78998a;
  border-radius: 2px; padding: 7px 9px; font: bold 11px inherit; cursor: pointer;
}
button:hover, button:focus-visible, summary:hover, summary:focus-visible, select:hover, select:focus-visible { background: #34544a; outline: 2px solid #d3e4a5; outline-offset: 1px; }
.screen-frame { position: relative; border: clamp(5px, 1vw, 10px) solid #304846; padding: 4px; background: #09100f; box-shadow: 0 0 0 2px #080d0d, 0 12px 35px #0009; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 430; background: #a8c98b; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.start-screen { position: absolute; z-index: 2; inset: 4px; display: grid; place-items: center; padding: 14px; background: #071011e8; }
.start-screen[hidden] { display: none; }
.start-panel { width: min(100%, 360px); padding: clamp(16px, 4vw, 28px); border: 3px solid #e2c36b; background: #172c2b; box-shadow: 8px 8px 0 #071011; }
.start-panel h2 { margin: 4px 0 18px; color: #d3e4a5; font-size: clamp(20px, 5vw, 28px); }
.setup-field { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; margin: 10px 0; color: #e2c36b; font-size: 13px; font-weight: bold; }
.setup-field[hidden] { display: none; }
.setup-field select { width: 100%; min-height: 40px; font-size: 13px; }
.start-button { width: 100%; margin-top: 14px; padding: 12px; border-color: #e2c36b; color: #071011; background: #e2c36b; font-size: 14px; }
.start-button:hover, .start-button:focus-visible { color: #d3e4a5; }
.controls { min-height: 1.4em; margin: 8px 0; color: #a8c98b; text-align: center; font-size: clamp(11px, 2vw, 14px); }
details { margin: 10px auto; color: #a8c98b; font-size: 13px; line-height: 1.7; }
summary { display: inline-block; list-style: none; }
.rules { padding: 3px 10px; border-left: 2px solid #34544a; }
footer { margin-top: 12px; color: #78998a; text-align: center; font-size: 11px; }
a { color: #d3e4a5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 620px) {
  .titlebar { align-items: start; flex-direction: column; }
  .toolbar { justify-content: start; }
  .start-screen { padding: 7px; }
  .start-panel { padding: 10px 12px; }
  .start-panel h2 { margin: 2px 0 6px; }
  .setup-field { margin: 5px 0; }
  .setup-field select { min-height: 34px; padding-block: 5px; }
  .start-button { margin-top: 6px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .screen-frame { box-shadow: 0 0 0 2px #080d0d; } }