.game-wrap {
  max-width:var(--wide);
  margin:0 auto;
  padding:44px var(--gutter) 64px}
.game-hero {
  max-width:720px;
  margin-bottom:36px}
.game-hero h1 {
  font-size:clamp(3.5rem,10vw,7rem);
  line-height:1;
  margin:0 0 20px}
.game-hero p {
  max-width:620px}
.game-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:2px solid #000;
  padding-top:16px;
  font-size:.8rem;
  letter-spacing:.06em}
#game h2 {
  font-size:2rem;
  margin:24px 0 12px}
#game h3 {
  line-height:1.2}
#game p {
  font-size:1rem}
#game button,#game input {
  font:inherit}
#game label {
  display:block;
  font-size:.9rem}
#owner {
  display:block;
  max-width:100%;
  width:360px;
  min-height:44px;
  border:1px solid #000;
  background:transparent;
  padding:8px 12px;
  margin:8px 0 20px}
.game-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  background:transparent;
  border:1px solid #000;
  color:#000;
  text-decoration:none;
  font-size:.95rem!important;
  cursor:pointer}
.game-button.primary {
  background:#000;
  color:#efe9dc;
  margin:18px 0}
.game-button:disabled {
  opacity:.45;
  cursor:default}
.game-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0}
.game-actions .primary {
  margin:0}
.seed-picker {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-width:550px;
  margin:18px 0}
.seed-picker button {
  background:transparent;
  border:1px solid #8a8274;
  padding:8px 4px;
  min-height:72px;
  font-size:.85rem!important;
  cursor:pointer}
.seed-picker svg {
  display:block;
  width:30px;
  height:30px;
  margin:0 auto 4px;
  color:#08742f}
[aria-pressed=true] {
  outline:2px solid #000;
  outline-offset:-3px;
  background:#fff8e9!important}
.game-field {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  max-width:550px;
  padding:8px;
  background:#72583e;
  border:1px solid #000}
.game-cell {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  min-width:0;
  min-height:88px;
  padding:6px 1px;
  background:#e3d5b9;
  border:1px solid #aa906e;
  color:#12652c;
  text-align:center;
  line-height:1.2;
  cursor:pointer}
.game-cell svg {
  width:36px;
  height:36px;
  margin-bottom:4px}
.game-cell span {
  font-size:.72rem;
  color:#222}
.game-cell small {
  font-size:.65rem;
  color:#333;
  margin-top:3px}
.game-cell.far-cell {
  background:#cdbb9d;
  border-style:dashed;
  border-color:#554631}
.game-cell.wall-cell {
  background:repeating-linear-gradient(0deg,#a5a4a0 0 21px,#797b79 22px 24px);
  border-color:#606361}
.game-cell.thirsty {
  color:#885d06}
.game-cell.wilted {
  color:#87471c}
.game-cell.dead,.game-cell.uprooted,.game-cell.harvested {
  color:#504c45}
.game-cell.dead svg,.game-cell.uprooted svg {
  opacity:.5}
.game-cell[aria-disabled=true] {
  cursor:default}
.game-cell:focus-visible {
  z-index:1;
  outline:3px solid #000;
  outline-offset:1px}
.game-stats {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  max-width:550px;
  font-size:1rem}
#game progress {
  display:block;
  width:100%;
  max-width:550px;
  height:6px;
  accent-color:#0b8f3a;
  margin:16px 0 24px}
.access-status {
  border-left:3px solid #d8342c;
  padding-left:12px}
.malus {
  position:relative;
  border:1px solid #b5a991;
  background:#f5efdf;
  max-width:650px;
  padding:22px;
  margin:24px 0;
  box-shadow:4px 4px 0 #d9cfbb}
.malus h3 {
  color:#ab231c;
  font-size:1.7rem;
  margin:10px 0}
.malus>p:first-of-type {
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-right:40px}
.seal {
  position:absolute;
  right:20px;
  top:20px;
  border-radius:50%;
  background:#d8342c;
  color:#fff;
  width:34px;
  height:34px;
  text-align:center;
  line-height:34px;
  font-family:var(--condensed)}
#game details {
  border-top:1px solid #b8ae9d;
  padding:14px 0;
  max-width:720px;
  font-size:.95rem}
#game summary {
  cursor:pointer;
  min-height:32px}
.certificates {
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.certificate {
  border:1px solid #8d846f;
  padding:14px;
  flex:1 1 220px;
  font-size:.9rem;
  overflow-wrap:anywhere}
.revoked {
  border-style:dashed;
  color:#685e50}
.access-log {
  padding-left:22px}
.access-log p {
  margin-top:4px}
.goat {
  font-size:.9rem!important}
.game-outcome {
  font-size:1.7rem!important;
  max-width:720px;
  line-height:1.4}
.field-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:24px 0}
.field-comparison h3 {
  font-size:1.25rem;
  min-height:2.5em}
.field-comparison .game-cell {
  cursor:default}
.save-status,.simulation-note {
  font-size:.8rem!important;
  color:#5c5549}
.simulation-note {
  margin-top:24px;
  border-top:1px solid #b8ae9d;
  padding-top:16px}
.wall-arrival .wall-cell {
  animation:wall-lands .8s ease-out}
@keyframes wall-lands {
  from {
  opacity:0;
  transform:translateY(-20px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce) {
  .wall-arrival .wall-cell {
  animation:none}
}
@media(max-width:650px) {
  .field-comparison {
  grid-template-columns:1fr}
.game-heading {
  letter-spacing:0}
.game-heading .game-button {
  padding:8px;
  font-size:.8rem!important}
.game-cell {
  min-height:76px}
.game-cell svg {
  width:28px;
  height:28px}
.game-cell span {
  font-size:.61rem}
.game-cell small {
  font-size:.59rem}
.game-field {
  gap:3px;
  padding:5px}
.seed-picker {
  gap:5px}
.game-wrap {
  padding:28px 16px 48px}
}
 
.game-cell svg.goat-marker {
  position:absolute;
  right:1px;
  top:1px;
  width:20px;
  height:20px;
  color:#25251e;
  background:#efe9dc;
  border-radius:3px}
.game-cell span {
  overflow-wrap:anywhere}



/* ==========================================================
   Dark version (black + grid, like the LAND page)
   ========================================================== */
.land-dark .game-hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.land-dark .game-hero h1 { font-family: var(--condensed); font-weight: 800; font-size: clamp(3.4rem, 8vw, 6.6rem); line-height: .9; margin: 0 0 18px; color: #fff; }
.land-dark .game-hero p { font-size: 1.15rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.game-hero__field { justify-self: end; width: 100%; max-width: 280px; }
@media (max-width: 760px) {
  .land-dark .game-hero { grid-template-columns: 1fr; gap: 20px; }
  .game-hero__field { justify-self: start; max-width: 200px; }
}
.land-dark #game { color: #fff; }
.land-dark .game-heading { border-top-color: #fff; color: rgba(255,255,255,.75); }
.land-dark #game h2 { font-family: var(--condensed); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); }
.land-dark #game p, .land-dark #game label { color: rgba(255,255,255,.85); }
.land-dark #owner { border-color: rgba(255,255,255,.6); color: #fff; }
.land-dark #owner::placeholder { color: rgba(255,255,255,.45); }
.land-dark .game-button { border-color: #fff; color: #fff; }
.land-dark .game-button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.land-dark .game-button.primary { background: #fff; color: #000; }
.land-dark .game-button.primary:hover:not(:disabled) { background: var(--land-ivory); }
.land-dark .seed-picker button { border-color: rgba(255,255,255,.35); color: #fff; }
.land-dark .seed-picker svg { color: #6fbf4a; }
.land-dark [aria-pressed=true] { outline-color: #fff; background: rgba(255,255,255,.14) !important; }
.land-dark .game-field { background: #24180f; border-color: rgba(255,255,255,.25); }
.land-dark .game-cell { background: #3b2a1c; border-color: #5a4330; color: #8fd16a; }
.land-dark .game-cell span { color: #f3ede0; }
.land-dark .game-cell small { color: #cbbfa8; }
.land-dark .game-cell.far-cell { background: #1c140d; border-color: #8a7358; }
.land-dark .game-cell.wall-cell { background: repeating-linear-gradient(0deg, #efe9dc 0 21px, #bdb6a8 22px 24px); border-color: #efe9dc; }
.land-dark .game-cell.wall-cell span, .land-dark .game-cell.wall-cell small { color: #222; }
.land-dark .game-cell.thirsty { color: #e8b04e; }
.land-dark .game-cell.wilted { color: #d0813f; }
.land-dark .game-cell.dead, .land-dark .game-cell.uprooted, .land-dark .game-cell.harvested { color: #9a9285; }
.land-dark .game-cell:focus-visible { outline-color: #fff; }
.land-dark .game-stats { color: #fff; }
.land-dark .malus, .land-dark .malus p, .land-dark .malus a { color: #1d1a16 !important; }
.land-dark .malus { box-shadow: 6px 6px 0 #b8322a; }
.land-dark .malus .game-button { border-color: #000; color: #000; }
.land-dark #game details { border-top-color: rgba(255,255,255,.25); }
.land-dark .certificate { border-color: rgba(255,255,255,.35); }
.land-dark .revoked { color: #9a9184; }
.land-dark .save-status, .land-dark .simulation-note { color: rgba(255,255,255,.55) !important; }
.land-dark .simulation-note { border-top-color: rgba(255,255,255,.25); }