:root {
  --ink: #17201b;
  --muted: #5a675d;
  --paper: #fff8e7;
  --field: #8fb365;
  --danger: #a83f35;
  --good: #2f7a4b;
  --shadow: 0 18px 38px rgba(31, 42, 31, 0.2);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background: #d8e1c5;
}
button { font: inherit; }
.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  min-height: 100vh;
}

.map-stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(410px, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #c9dbb2 0%, #9fbd70 52%, #7ea252 100%);
}
.map { position: relative; min-height: 410px; }
.town { position: absolute; left: 50%; top: 48%; width: 180px; height: 150px; transform: translate(-50%, -50%) scale(0.72); }
.town::before {
  content: "";
  position: absolute; inset: 24px 16px 20px;
  border: 8px solid rgba(88, 66, 43, 0.82); border-radius: 8px;
  opacity: var(--wall-opacity, 0);
}
.hall, .house, .tower, .granary {
  position: absolute; background: #d4b16a; border: 2px solid #704d2d; border-radius: 4px;
  box-shadow: 0 10px 10px rgba(40, 43, 28, 0.16);
}
.hall { left: 63px; top: 50px; width: 58px; height: 42px; }
.house { width: 34px; height: 28px; }
.house.one { left: 24px; top: 76px; }
.house.two { left: 124px; top: 78px; }
.house.three { left: 74px; top: 108px; }
.tower { left: 128px; top: 30px; width: 28px; height: 58px; opacity: var(--tower-opacity, 0); }
.granary { left: 28px; top: 28px; width: 34px; height: 44px; opacity: var(--granary-opacity, 0); }
.hall::before, .house::before, .tower::before, .granary::before {
  content: ""; position: absolute; left: -4px; right: -4px; top: -18px; height: 20px;
  background: #8f3e31; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.farm {
  position: absolute; width: 76px; height: 44px; border: 2px solid rgba(78, 91, 45, 0.62); border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 8px, transparent 8px 18px), var(--field);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12), 0 7px 10px rgba(47, 61, 35, 0.14);
}
.farm::after { content: attr(data-label); position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 700; color: rgba(23, 32, 27, 0.72); }
.farm.damaged { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 8px, transparent 8px 18px), #a89556; }
.farm.burned { background: repeating-linear-gradient(90deg, rgba(33, 28, 24, 0.3) 0 8px, transparent 8px 18px), #554d42; border-color: rgba(75, 55, 42, 0.9); }
.farm.guarded { outline: 3px solid rgba(47, 122, 75, 0.72); }
.smoke { position: absolute; left: 45%; top: -14px; width: 28px; height: 34px; background: rgba(73, 70, 66, 0.34); border-radius: 50%; filter: blur(6px); }

.hud {
  position: relative; z-index: 2; display: grid; gap: 10px; align-items: start;
  margin: 12px; padding: 12px; border: 1px solid rgba(74, 83, 63, 0.2); border-radius: 8px;
  background: rgba(255, 249, 232, 0.92); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
h2, p { margin-top: 0; }
h2 { margin-bottom: 8px; font-size: 19px; }
.eyebrow { margin-bottom: 5px; color: #6b4a2d; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.status-line, .body-copy { margin-bottom: 0; color: var(--muted); line-height: 1.45; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.resource { min-height: 44px; padding: 7px 8px; border: 1px solid rgba(74, 83, 63, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.45); }
.resource strong { display: block; font-size: 15px; line-height: 1.15; }
.resource span { color: var(--muted); font-size: 12px; }
.council {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  grid-template-rows: minmax(150px, auto) minmax(260px, 1fr);
  grid-template-areas:
    "event orders"
    "ledger orders";
  align-content: start;
  gap: 14px;
  padding: 14px;
  background: #d8e1c5;
}
.decision-panel, .ledger { min-height: 300px; padding: 16px; border: 1px solid rgba(74, 83, 63, 0.2); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.decision-panel:first-child { grid-area: event; min-height: 150px; }
.decision-panel:nth-child(2) { grid-area: orders; }
.ledger { grid-area: ledger; min-height: 260px; }
.choice-grid { display: grid; gap: 10px; margin-top: 14px; }
#actionChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 12px;
  text-align: left;
  border: 1px solid rgba(74, 83, 63, 0.24);
  border-radius: 8px;
  color: var(--ink);
  background: #fbf4df;
  cursor: pointer;
}
.choice:hover:not(:disabled) { border-color: rgba(47, 122, 75, 0.58); background: #fff9e9; }
.choice:disabled { color: #8f8a7a; cursor: not-allowed; background: #ebe2cc; }
.choice.completed { border-color: rgba(47, 122, 75, 0.34); background: #e7f0d2; }
.choice strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.choice span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.choice .choice-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid rgba(47, 122, 75, 0.35);
  border-radius: 8px;
  color: #2f6f44;
  background: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.choice.selected { border-color: rgba(47, 122, 75, 0.74); background: #e7f0d2; }
.primary-action, .quiet-action { width: 100%; margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(47, 122, 75, 0.45); border-radius: 8px; color: #fff; background: var(--good); cursor: pointer; font-weight: 800; }
.primary-action:disabled { border-color: rgba(74, 83, 63, 0.18); color: #898575; background: #d6ccb2; cursor: not-allowed; }
.quiet-action { color: var(--ink); background: #eadfbe; border-color: rgba(74, 83, 63, 0.24); }
.log { height: 248px; overflow: auto; padding-right: 6px; }
.ledger .log { height: 150px; }
.log p { margin-bottom: 10px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.log strong { color: var(--ink); }
.danger { color: var(--danger); }
@media (max-width: 1100px) {
  .game-shell { display: block; }
  .map-stage { min-height: 620px; }
  .hud, .council { grid-template-columns: 1fr; }
  .council {
    grid-template-rows: auto;
    grid-template-areas:
      "event"
      "orders"
      "ledger";
  }
  .resource-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .map { min-height: 380px; }
  .ledger .log { height: 248px; }
}
@media (max-width: 640px) {
  .hud { margin: 10px; padding: 12px; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  #actionChoices { grid-template-columns: 1fr; }
  .farm { width: 70px; height: 42px; }
  .town { left: 48%; transform: translate(-50%, -50%) scale(0.68); }
}