:root {
  --ink: #271c16;
  --paper: #e8d39e;
  --paper-dark: #c4a86b;
  --stone: #665f55;
  --stone-light: #91877a;
  --bronze: #a7612d;
  --red: #a93a2f;
  --blue: #2562a8;
  --green: #466a32;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 1140px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #171b17;
  font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
  font-size: 14px;
}

button {
  font: inherit;
}

.game-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #20251f;
  background-size: 4px 4px;
}

.topbar {
  z-index: 3;
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  color: #f6eac4;
  border-bottom: 4px solid #29221c;
  background-color: #303a34;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(10, 18, 14, 0.34)),
    url("assets/ui-marble-dark.png");
  background-size: auto, 420px 420px;
  box-shadow: 0 3px 0 #111;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark,
.modal-emblem {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #f4d477;
  border: 3px solid #b58a42;
  background: #8e2f28;
  box-shadow:
    inset 0 0 0 3px #5c1f1b,
    3px 3px 0 #211916;
  font-size: 23px;
  font-weight: 900;
}

.brand h1 {
  margin: 0;
  color: #fff1b8;
  font-family: "Marcellus", Georgia, serif;
  font-size: 24px;
  letter-spacing: 0.8px;
  text-shadow: 2px 2px #3b2519;
}

.brand p {
  margin: 2px 0 0;
  color: #c9c0a8;
  font-size: 12px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stone-button,
.speed-button,
.primary-button {
  min-width: 40px;
  padding: 8px 10px;
  color: #f6edcf;
  border: 2px solid #29251f;
  border-top-color: #aaa090;
  border-left-color: #aaa090;
  background-color: #666763;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(20, 20, 18, 0.2)),
    url("assets/ui-marble-gray.png");
  background-size: auto, 260px 260px;
  font-size: 13px;
  box-shadow: 2px 2px 0 #171511;
  cursor: pointer;
}

.stone-button:hover,
.speed-button:hover,
.speed-button.active,
.primary-button:hover {
  color: #fff6bd;
  background-color: #7c4538;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(48, 15, 11, 0.2)),
    url("assets/ui-marble-red.png");
  background-size: auto, 260px 260px;
}

.play-area {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(720px, 1fr) 370px;
}

.canvas-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0c2831;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  cursor: crosshair;
}

.canvas-help {
  position: absolute;
  bottom: 10px;
  left: 12px;
  padding: 5px 8px;
  color: #f8ebc6;
  border: 1px solid #574e3e;
  background: rgba(37, 31, 24, 0.8);
  font-size: 12px;
  pointer-events: none;
}

.toast {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 4;
  max-width: 520px;
  padding: 9px 14px;
  color: #2b2118;
  border: 2px solid #675230;
  background: #f2dfaa;
  box-shadow: 4px 4px 0 rgba(22, 17, 13, 0.55);
  font-size: 13px;
  font-weight: bold;
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: 160ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sidebar {
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  border-left: 4px solid #252019;
  background-color: #303a34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(9, 15, 12, 0.24)),
    url("assets/ui-marble-dark.png");
  background-size: auto, 480px 480px;
}

.panel {
  margin-bottom: 8px;
  padding: 5px;
  border: 3px solid #25221c;
  border-top-color: #928b78;
  border-left-color: #928b78;
  background-color: #ddd8cb;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.36), rgba(169, 158, 139, 0.12)),
    url("assets/ui-marble-light.png");
  background-size: auto, 360px 360px;
  box-shadow: 3px 3px 0 rgba(20, 17, 13, 0.8);
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1px -1px 6px;
  padding: 5px 7px;
  color: #f4e9c4;
  border-bottom: 2px solid #342a21;
  background-color: #713e34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(50, 14, 11, 0.2)),
    url("assets/ui-marble-red.png");
  background-size: auto, 300px 300px;
  font-family: "Marcellus", Georgia, serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.resource {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #8e774e;
  background-color: #e3ded1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(170, 160, 143, 0.08)),
    url("assets/ui-marble-light.png");
  background-size: auto, 240px 240px;
  font-size: 13px;
}

.resource-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid #d7c89e;
  background-color: #e5dfd1;
  background-image: url("assets/ui-marble-light.png");
  background-size: 180px 180px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    1px 1px 0 rgba(68, 49, 34, 0.18);
}

.resource-icon::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 0 rgba(39, 28, 22, 0.45));
}

.resource-icon--mini {
  width: 18px;
  height: 18px;
  vertical-align: -2px;
  box-shadow: none;
}

.resource-icon--mini::before {
  inset: 1px;
}

.resource-logs::before { background-image: url("assets/icon-logs.svg"); }
.resource-planks::before { background-image: url("assets/icon-planks.svg"); }
.resource-stone::before { background-image: url("assets/icon-stone.svg"); }
.resource-grain::before { background-image: url("assets/icon-grain.svg"); }
.resource-bread::before { background-image: url("assets/icon-bread.svg"); }
.resource-fish::before { background-image: url("assets/icon-fish.svg"); }
.resource-coal::before { background-image: url("assets/icon-coal.svg"); }
.resource-ore::before { background-image: url("assets/icon-ore.svg"); }
.resource-iron::before { background-image: url("assets/icon-iron.svg"); }
.resource-gold::before { background-image: url("assets/icon-gold.svg"); }
.resource-coins::before { background-image: url("assets/icon-coins.svg"); }
.resource-tools::before { background-image: url("assets/icon-tools.svg"); }
.resource-weapons::before { background-image: url("assets/icon-weapons.svg"); }
.resource-soldiers::before { background-image: url("assets/icon-soldiers.svg"); }

.resource strong {
  font-size: 15px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.tool {
  display: flex;
  min-height: 61px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  color: #30261d;
  border: 2px solid #8b774f;
  border-top-color: #f0dfad;
  border-left-color: #f0dfad;
  background-color: #bbb9b1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(70, 70, 65, 0.08)),
    url("assets/ui-marble-gray.png");
  background-size: auto, 260px 260px;
  font-size: 12px;
  cursor: pointer;
}

.tool span {
  color: inherit;
}

.tool:hover,
.tool.active {
  color: #fff4cf;
  border-color: #4d2b1e;
  background-color: #85483b;
  background-image: url("assets/ui-marble-red.png");
  background-size: 250px 250px;
  text-shadow: 0 1px 0 #3b2418;
}

.tool-icon {
  font-size: 21px;
  line-height: 22px;
  filter: drop-shadow(0 1px 0 rgba(38, 22, 16, 0.35));
}

.building-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.building-button {
  position: relative;
  display: grid;
  min-height: 62px;
  padding: 6px 5px 6px 54px;
  color: #31251b;
  border: 2px solid #8b774f;
  border-top-color: #f0dfad;
  border-left-color: #f0dfad;
  background-color: #ddd8cb;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.26), rgba(170, 160, 143, 0.08)),
    url("assets/ui-marble-light.png");
  background-size: auto, 280px 280px;
  text-align: left;
  cursor: pointer;
}

.building-button:hover,
.building-button.active {
  color: #fff6d5;
  background-color: #80463a;
  background-image: url("assets/ui-marble-red.png");
  background-size: 260px 260px;
}

.building-swatch {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid #d9caa1;
  background-color: #e5dfd1;
  background-image: url("assets/ui-marble-light.png");
  background-size: 190px 190px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    1px 1px 0 rgba(68, 49, 34, 0.18);
}

.building-swatch::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 0 rgba(33, 19, 13, 0.42));
}

.building-warehouse::before { background-image: url("assets/building-warehouse.svg"); }
.building-woodcutter::before { background-image: url("assets/building-woodcutter.svg"); }
.building-forester::before { background-image: url("assets/building-forester.svg"); }
.building-sawmill::before { background-image: url("assets/building-sawmill.svg"); }
.building-quarry::before { background-image: url("assets/building-quarry.svg"); }
.building-fisher::before { background-image: url("assets/building-fisher.svg"); }
.building-farm::before { background-image: url("assets/building-farm.svg"); }
.building-bakery::before { background-image: url("assets/building-bakery.svg"); }
.building-coalmine::before { background-image: url("assets/building-coalmine.svg"); }
.building-ironmine::before { background-image: url("assets/building-ironmine.svg"); }
.building-goldmine::before { background-image: url("assets/building-goldmine.svg"); }
.building-smelter::before { background-image: url("assets/building-smelter.svg"); }
.building-toolsmith::before { background-image: url("assets/building-toolsmith.svg"); }
.building-mint::before { background-image: url("assets/building-mint.svg"); }
.building-armory::before { background-image: url("assets/building-armory.svg"); }
.building-barracks::before { background-image: url("assets/building-barracks.svg"); }

.building-button:hover .building-swatch,
.building-button.active .building-swatch {
  border-color: #fff0bf;
  background-color: #f0e7ce;
  background-image: url("assets/ui-marble-light.png");
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(81, 35, 24, 0.22);
}

.building-name {
  font-family: "Marcellus", Georgia, serif;
  font-size: 13.5px;
  font-weight: bold;
  line-height: 1.15;
}

.building-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-items: center;
  color: #725a3e;
  font-size: 11px;
}

.building-button:hover .building-cost,
.building-button.active .building-cost {
  color: #f2ddb0;
}

.selection-content {
  min-height: 54px;
  padding: 3px;
  font-size: 13px;
  line-height: 1.45;
}

.recipe {
  margin: 5px 0;
  padding: 4px 5px;
  color: #f5e7b9;
  border: 1px solid #59412e;
  background-color: #734137;
  background-image: url("assets/ui-marble-red.png");
  background-size: 260px 260px;
  text-align: center;
  font-weight: bold;
}

.inventory-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 4px 0;
}

.inventory-chip {
  padding: 2px 5px;
  border: 1px solid #8d754d;
  background-color: #e3ded1;
  background-image: url("assets/ui-marble-light.png");
  background-size: 230px 230px;
}

.status-line {
  margin-top: 5px;
  padding-left: 6px;
  color: #60432d;
  border-left: 4px solid #a47437;
  font-weight: bold;
}

.work-bar > span {
  background: #b17a36;
}

.inspector-button {
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  color: #f7ebc7;
  border: 2px solid #3f3025;
  border-top-color: #a98e68;
  border-left-color: #a98e68;
  background-color: #666763;
  background-image: url("assets/ui-marble-gray.png");
  background-size: 260px 260px;
  cursor: pointer;
}

.inspector-button:hover {
  background-color: #86483b;
  background-image: url("assets/ui-marble-red.png");
  background-size: 260px 260px;
}

.selection-name {
  margin-bottom: 3px;
  color: #663a26;
  font-weight: bold;
}

.bar {
  height: 9px;
  margin: 4px 0;
  border: 1px solid #4d3d2d;
  background: #8f815f;
}

.bar > span {
  display: block;
  height: 100%;
  background: #5b8b3a;
}

.objectives {
  display: grid;
  gap: 3px;
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.35;
}

.objective {
  padding: 4px 5px;
  border-left: 4px solid #9b7c42;
  background-color: #e3ded1;
  background-image: url("assets/ui-marble-light.png");
  background-size: 240px 240px;
}

.objective.done {
  color: #59624a;
  border-left-color: #537943;
  text-decoration: line-through;
}

.event-log {
  max-height: 94px;
  overflow: hidden;
  color: #5a4832;
  font-size: 12.5px;
  line-height: 1.45;
}

.event-line {
  padding: 3px 2px;
  border-top: 1px dotted #a38a5c;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(16, 18, 13, 0.72);
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(440px, 90vw);
  padding: 28px;
  border: 5px solid #31271e;
  outline: 3px solid #9e8659;
  background-color: #ddd8cb;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(165, 154, 136, 0.1)),
    url("assets/ui-marble-light.png");
  background-size: auto, 380px 380px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.55);
  text-align: center;
}

.modal-emblem {
  margin: 0 auto 14px;
}

.modal-card h2 {
  margin: 8px 0;
  color: #783428;
  font-family: Georgia, serif;
  font-size: 30px;
}

.modal-card p {
  font-size: 14px;
  line-height: 1.55;
}

.primary-button {
  padding: 10px 18px;
  background: #7e4930;
}

@media (max-height: 760px) {
  .topbar {
    min-height: 58px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand h1 {
    font-size: 20px;
  }

  .panel {
    margin-bottom: 5px;
  }

}

.selection-name {
  margin-bottom: 2px;
  color: #4b3324;
  font-family: "Marcellus", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.inventory-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid #9a814f;
  background-color: #ece3c6;
  background-image: url("assets/ui-marble-light.png");
  background-size: 180px 180px;
  font-size: 12px;
  line-height: 1.1;
}

.recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  font-size: 13px;
  line-height: 1.35;
}

.selection-panel .panel-title,
.objectives-panel .panel-title {
  font-size: 15px;
}

.selection-content {
  font-size: 14.5px;
  line-height: 1.5;
}

.cost-token,
.recipe-token {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.recipe-label {
  padding: 0 3px;
  color: #f3dfae;
  font-weight: 700;
}

.recipe-arrow,
.recipe-plus {
  color: #f7eec8;
  font-weight: 700;
}