:root {
  color-scheme:dark;
  --bg:#142332;
  --panel:#213545;
  --line:#42565d;
  --text:#e8ead4;
  --muted:#a6b8ad;
  --mint:#b4df9f;
  --gold:#f0ce87;
  --pink:#e59aab
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 'Courier New',monospace;
  background-image:linear-gradient(#ffffff02 1px,transparent 1px);
  background-size:4px 4px
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer;
  border:2px solid var(--line);
  background:#2c4350;
  color:var(--text);
  padding:10px 16px;
  box-shadow:0 3px 0 #0c1b2a;
  min-height:44px
}
button:hover {
  background:#3a5660;
  border-color:var(--mint)
}
button:active {
  transform:translateY(2px);
  box-shadow:none
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
.primary {
  background:var(--mint);
  color:#172c31;
  border-color:var(--mint);
  font-weight:bold
}
.primary:hover {
  background:#c9ebad
}
.danger {
  color:#ffb5b5
}
input,select {
  border:2px solid var(--line);
  background:#142938;
  color:var(--text);
  padding:12px;
  width:100%;
  margin:8px 0 14px
}
label {
  display:block
}
a {
  color:inherit
}
header,footer {
  max-width:1180px;
  margin:auto;
  padding:24px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.brand {
  text-decoration:none;
  letter-spacing:3px;
  font-size:22px;
  font-weight:bold;
  color:var(--mint)
}
.header-right {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:14px;
  color:var(--muted)
}
main {
  max-width:1128px;
  margin:20px auto 40px
}
.eyebrow {
  font-size:13px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:30px;
  line-height:1.3;
  margin-bottom:8px
}
h2 {
  font-size:24px;
  line-height:1.3
}
h3 {
  font-size:17px;
  margin-bottom:8px
}
p {
  color:var(--muted)
}
.panel {
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:5px 5px 0 #0d1e2b
}
.welcome {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:520px
}
.welcome-art {
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  background:#1b303e
}
.welcome-art canvas {
  width:100%;
  image-rendering:pixelated
}
.welcome-form {
  padding:50px 36px;
  align-self:center
}
.welcome-form h1 {
  font-size:36px
}
.welcome-form .primary {
  width:100%
}
.small {
  font-size:14px;
  color:var(--muted)
}
.layout {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);
  gap:24px
}
.habitat-top {
  padding:22px 24px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px
}
.pill {
  font-size:12px;
  letter-spacing:1px;
  color:var(--gold);
  border:1px solid #716b51;
  padding:4px 8px;
  align-self:start;
  white-space:nowrap
}
.habitat-canvas {
  display:block;
  width:100%;
  image-rendering:pixelated;
  background:#142938;
  border-block:2px solid var(--line)
}
.habitat-bottom {
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:var(--muted)
}
.actions {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px
}
.actions button {
  padding:16px 8px
}
.sidebar {
  padding:22px
}
.sidebar h2 {
  font-size:17px
}
.stat {
  margin:13px 0
}
.stat-label {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin-bottom:6px
}
.bar {
  height:10px;
  background:#102533;
  padding:2px
}
.bar span {
  display:block;
  height:100%;
  background:var(--mint);
  transition:width .3s
}
.bar.health span {
  background:var(--pink)
}
.bar.hunger span {
  background:var(--gold)
}
.bar.energy span {
  background:#8dcad9
}
.bar.happiness span {
  background:#c9b4e8
}
.growth {
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.growth button {
  width:100%;
  margin-top:10px
}
.nav-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:26px
}
.nav-grid button {
  text-align:left;
  padding:18px
}
.nav-grid span {
  display:block;
  color:var(--muted);
  font-size:13px
}
.notice {
  color:var(--gold);
  font-size:14px
}
.story {
  padding:20px 0 0;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--muted)
}
footer {
  font-size:12px;
  letter-spacing:1px;
  border-top:1px solid #314650
}
dialog {
  color:var(--text);
  background:var(--panel);
  border:2px solid var(--line);
  padding:24px;
  width:min(760px,calc(100% - 28px));
  max-height:88vh;
  box-shadow:8px 8px 0 #0e1c2b
}
dialog::backdrop {
  background:#06131ccd
}
.modal-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.card {
  padding:18px;
  border:1px solid var(--line);
  background:#1a2e3d
}
.card button {
  margin-top:8px;
  width:100%
}
.card p {
  font-size:14px;
  margin-bottom:8px
}
.guide {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.guide .card {
  padding:10px;
  text-align:center
}
.guide canvas {
  width:96px;
  height:96px;
  image-rendering:pixelated
}
.guide h3 {
  font-size:14px
}
.guide p {
  font-size:12px
}
.guide-title {
  margin-top:24px
}
.requirements {
  padding-left:0;
  list-style:none;
  font-size:14px
}
.met {
  color:var(--mint)
}
.missing {
  color:var(--gold)
}
.game-canvas {
  width:100%;
  image-rendering:pixelated
}
.mini-controls {
  display:flex;
  gap:14px;
  margin:20px 0
}
.mini-controls button {
  flex:1
}
.details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px
}
.settings-row {
  margin-bottom:24px
}
.settings-row button {
  margin:5px
}
.history {
  font-size:14px
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:#e7e9c9;
  color:#17303b;
  box-shadow:4px 4px 0 #081a26;
  padding:12px 20px;
  max-width:90%;
  width:max-content;
  z-index:10;
  display:none
}
#toast.visible {
  display:block
}
:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px
}
@media(max-width:760px) {
  header,footer {
  padding:18px 16px
}
.brand {
  font-size:17px;
  letter-spacing:1px
}
#clock {
  display:none
}
main {
  margin:10px 14px 28px
}
.layout,.welcome {
  grid-template-columns:1fr
}
.welcome-art {
  padding:24px
}
.welcome-form {
  padding:28px
}
.welcome-form h1 {
  font-size:28px
}
.layout {
  gap:20px
}
.sidebar {
  padding:20px
}
.nav-grid {
  gap:8px
}
.nav-grid button {
  padding:12px 8px;
  font-size:14px
}
.nav-grid span {
  font-size:12px
}
.cards {
  grid-template-columns:1fr
}
.guide {
  grid-template-columns:repeat(2,1fr)
}
footer {
  display:block;
  font-size:11px
}
footer span {
  display:block
}
.story {
  display:block
}
.habitat-top {
  padding:18px
}
.habitat-bottom {
  padding:14px
}
.details {
  grid-template-columns:1fr
}
.header-right {
  gap:5px
}

}

@font-face {
  font-family:'Lumen Grid';
  src:url('assets/lumen-grid.ttf') format('truetype');
  font-display:swap
}
.brand,h1,h2,.eyebrow,.pill {
  font-family:'Lumen Grid','Courier New',monospace;
  font-weight:normal
}
.brand {
  font-size:24px
}
h1 {
  font-size:32px
}
h2 {
  font-size:27px
}
.eyebrow {
  font-size:15px;
  letter-spacing:1px
}
.pill {
  font-size:14px
}
@media(max-width:760px) {
  .brand {
  font-size:20px
}
h1 {
  font-size:28px
}

}