:root {
  color-scheme: dark;
  --ink: #f2ead7;
  --muted: #b8ad97;
  --line: rgba(241, 220, 174, 0.18);
  --panel: rgba(33, 29, 24, 0.94);
  --panel-strong: rgba(45, 38, 30, 0.98);
  --accent: #d7a94d;
  --accent-2: #76b7a0;
  --danger: #be6150;
  --shadow: rgba(0, 0, 0, 0.38);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 16%, rgba(225, 198, 143, 0.16), transparent 28%),
    linear-gradient(135deg, #181512 0%, #282017 48%, #101214 100%);
  color: var(--ink);
}

button {
  font: inherit;
}

.game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  grid-template-rows: 68px minmax(0, 1fr) 42px;
  background:
    linear-gradient(180deg, rgba(16, 13, 10, 0.52), rgba(16, 13, 10, 0.1) 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 68px);
}

.topbar,
.tool-panel,
.inventory-panel,
.statusbar {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 238, 190, 0.035), rgba(0, 0, 0, 0.04)),
    var(--panel);
}

.topbar {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 42px var(--shadow);
  z-index: 3;
}

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

.brand strong {
  display: block;
  font-size: 18px;
  letter-spacing: 0;
}

.brand small {
  color: var(--muted);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(250, 224, 172, 0.34);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 44%, rgba(250, 224, 172, 0.74) 45% 55%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(250, 224, 172, 0.74) 45% 55%, transparent 56%),
    radial-gradient(circle, rgba(215, 169, 77, 0.25), rgba(215, 169, 77, 0.06));
}

.top-stats {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.top-stats strong {
  color: var(--ink);
}

.top-actions {
  display: flex;
  gap: 8px;
}

.top-actions button,
.continue-btn {
  min-height: 34px;
  border: 1px solid rgba(232, 198, 128, 0.25);
  border-radius: 8px;
  background: rgba(227, 186, 104, 0.12);
  color: var(--ink);
  padding: 0 12px;
  cursor: pointer;
}

.top-actions button:hover,
.continue-btn:hover {
  border-color: rgba(232, 198, 128, 0.58);
  background: rgba(227, 186, 104, 0.2);
}

.music-btn[aria-pressed="false"] {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.tool-panel,
.inventory-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 14px 12px;
  overflow: auto;
}

.tool-panel {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
}

.inventory-panel {
  grid-column: 3;
  grid-row: 2;
  border-left: 1px solid var(--line);
}

.panel-title,
.mini-title {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.tool-list,
.inventory-list {
  display: grid;
  gap: 8px;
}

.tool-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(240, 216, 167, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
}

.tool-btn:hover,
.tool-btn.active {
  border-color: rgba(215, 169, 77, 0.6);
  background: rgba(215, 169, 77, 0.16);
}

.tool-btn small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-icon,
.resource-dot,
.mode-icon {
  display: inline-block;
  border: 1px solid rgba(255, 239, 202, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 7px 18px rgba(0, 0, 0, 0.18);
}

.tool-icon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 246, 210, 0.14), transparent 42%),
    linear-gradient(135deg, #6f7f5f, #283723);
}

.tool-icon::before,
.tool-icon::after,
.resource-dot::before,
.resource-dot::after {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
}

.tool-icon.gather {
  background:
    linear-gradient(145deg, transparent 0 45%, rgba(255, 255, 255, 0.55) 46% 55%, transparent 56%),
    linear-gradient(135deg, #b98b4b, #4c2d1c);
}

.tool-icon.demolish {
  background:
    linear-gradient(45deg, transparent 0 42%, rgba(255, 255, 255, 0.55) 43% 57%, transparent 58%),
    linear-gradient(135deg, #9c493d, #3a2022);
}

.tool-icon.road {
  background: linear-gradient(90deg, #87673c 0 30%, #c7ae75 31% 69%, #785834 70%);
}

.tool-icon.bridge {
  background: repeating-linear-gradient(90deg, #9b6738 0 6px, #6b4325 6px 11px);
}

.tool-icon.house,
.tool-icon.palace {
  background:
    linear-gradient(135deg, transparent 0 42%, #b94d41 43% 58%, transparent 59%),
    linear-gradient(180deg, #d7c49b 45%, #6b523b 46%);
}

.tool-icon.lumber {
  background:
    radial-gradient(circle at 34% 34%, #405f35 0 22%, transparent 23%),
    radial-gradient(circle at 62% 30%, #4e7040 0 24%, transparent 25%),
    linear-gradient(180deg, #805233 45%, #4a301f 46%);
}

.tool-icon.quarry,
.tool-icon.wall,
.tool-icon.tower {
  background: linear-gradient(135deg, #a2a5a0, #4f5654 55%, #272d2f);
}

.tool-icon.farm {
  background: repeating-linear-gradient(90deg, #9fb85d 0 5px, #6e8f44 5px 10px);
}

.tool-icon.well {
  background: radial-gradient(circle, #74a9b8 0 38%, #6d665b 39% 58%, #313334 59%);
}

.tool-icon.warehouse {
  background:
    linear-gradient(90deg, rgba(62, 39, 26, 0.45) 0 18%, transparent 19% 80%, rgba(62, 39, 26, 0.45) 81%),
    linear-gradient(180deg, #b48a59 0 48%, #69462b 49%);
}

.tool-icon.market {
  background:
    repeating-linear-gradient(90deg, #b7493d 0 7px, #e0c27a 7px 14px),
    linear-gradient(180deg, transparent 0 44%, #70492e 45%);
}

.tool-icon.workshop {
  background:
    radial-gradient(circle at 67% 34%, #d7a94d 0 14%, transparent 15%),
    linear-gradient(135deg, #65727a, #2f3335);
}

.tool-icon.weaver {
  background:
    repeating-linear-gradient(90deg, #d8c3e8 0 4px, #6f5d82 4px 8px),
    linear-gradient(180deg, #725b83, #33283f);
}

.tool-icon.apothecary {
  background:
    radial-gradient(circle at 34% 34%, #93c979 0 14%, transparent 15%),
    radial-gradient(circle at 62% 60%, #d6cf8a 0 12%, transparent 13%),
    linear-gradient(135deg, #426241, #273328);
}

.tool-icon.mint {
  background:
    radial-gradient(circle at 64% 36%, #f0cf64 0 15%, transparent 16%),
    radial-gradient(circle at 38% 62%, #dcae43 0 13%, transparent 14%),
    linear-gradient(135deg, #716f67, #2d3030);
}

.tool-icon.gather::before {
  left: 9px;
  top: 7px;
  width: 15px;
  height: 20px;
  border-right: 4px solid #d9c28a;
  border-bottom: 4px solid #724529;
  border-radius: 2px 10px 2px 7px;
  transform: rotate(42deg);
}

.tool-icon.gather::after {
  left: 6px;
  top: 20px;
  width: 20px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d2b078, #7a4b2d);
}

.tool-icon.demolish::before {
  left: 15px;
  top: 3px;
  width: 5px;
  height: 28px;
  border-radius: 4px;
  background: #d8c49a;
  transform: rotate(-45deg);
}

.tool-icon.demolish::after {
  left: 5px;
  top: 12px;
  width: 24px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #b7564a, #5b2526);
  transform: rotate(45deg);
}

.tool-icon.road {
  background:
    linear-gradient(180deg, rgba(255, 244, 203, 0.16), transparent 40%),
    linear-gradient(90deg, #7a5730 0 24%, #c8aa6b 25% 74%, #6d4b2a 75%);
}

.tool-icon.road::before {
  inset: 6px 14px;
  background: repeating-linear-gradient(180deg, #e3c983 0 5px, #aa8750 5px 7px);
}

.tool-icon.road::after {
  inset: 14px 4px;
  background: repeating-linear-gradient(90deg, #e3c983 0 5px, #aa8750 5px 7px);
}

.tool-icon.bridge {
  background:
    linear-gradient(180deg, rgba(109, 187, 206, 0.46), rgba(44, 102, 123, 0.82)),
    #315f74;
}

.tool-icon.bridge::before {
  left: 3px;
  top: 10px;
  width: 28px;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #b3713c 0 4px, #714321 4px 6px);
  box-shadow: inset 0 2px 0 rgba(255, 220, 151, 0.22);
}

.tool-icon.bridge::after {
  left: 4px;
  top: 9px;
  width: 26px;
  height: 14px;
  border-top: 2px solid #3f2718;
  border-bottom: 2px solid #3f2718;
}

.tool-icon.house,
.tool-icon.palace,
.tool-icon.apothecary {
  background:
    linear-gradient(180deg, rgba(255, 245, 210, 0.18), transparent 44%),
    linear-gradient(135deg, #61513e, #2d251f);
}

.tool-icon.house::before,
.tool-icon.apothecary::before {
  left: 7px;
  top: 14px;
  width: 20px;
  height: 14px;
  border: 1px solid rgba(58, 34, 22, 0.55);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #486d7a 0 4px, transparent 4px 16px, #486d7a 16px),
    linear-gradient(180deg, #dec99b, #9d7650);
}

.tool-icon.house::after,
.tool-icon.apothecary::after {
  left: 4px;
  top: 7px;
  width: 26px;
  height: 12px;
  clip-path: polygon(50% 0, 100% 72%, 88% 100%, 12% 100%, 0 72%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 226, 154, 0.22) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #d35a47, #8f302b);
}

.tool-icon.hut,
.tool-icon.courtyard,
.tool-icon.townhouse,
.tool-icon.inn,
.tool-icon.manor {
  background:
    linear-gradient(180deg, rgba(255, 245, 210, 0.16), transparent 44%),
    linear-gradient(135deg, #67523d, #2c251f);
}

.tool-icon.hut::before {
  left: 8px;
  top: 15px;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(62, 39, 24, 0.6);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #4b6f67 0 4px, transparent 4px 14px, #6d4529 14px),
    linear-gradient(180deg, #c9b27d, #8a6741);
}

.tool-icon.hut::after {
  left: 5px;
  top: 7px;
  width: 24px;
  height: 13px;
  border-radius: 50% 50% 5px 5px;
  background:
    repeating-linear-gradient(90deg, rgba(92, 60, 29, 0.35) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #d3b660, #8a682f);
}

.tool-icon.courtyard::before {
  left: 5px;
  top: 15px;
  width: 24px;
  height: 12px;
  border: 1px solid rgba(62, 39, 24, 0.58);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #dfc999 0 7px, #8f6b45 7px 10px, #d5bd8a 10px 14px, #8f6b45 14px 17px, #dfc999 17px),
    linear-gradient(180deg, #dfc999, #92704b);
}

.tool-icon.courtyard::after {
  left: 3px;
  top: 7px;
  width: 28px;
  height: 11px;
  background:
    linear-gradient(135deg, transparent 0 12%, #bd4e3e 13% 35%, transparent 36% 64%, #bd4e3e 65% 87%, transparent 88%),
    linear-gradient(180deg, #d35a47, #8f302b);
  clip-path: polygon(0 82%, 22% 20%, 43% 82%, 57% 82%, 78% 20%, 100% 82%, 92% 100%, 8% 100%);
}

.tool-icon.townhouse::before {
  left: 5px;
  top: 13px;
  width: 24px;
  height: 14px;
  border: 1px solid rgba(58, 34, 22, 0.58);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, #486d78 0 4px, transparent 4px 7px),
    linear-gradient(180deg, #d5bd8a, #92704b);
}

.tool-icon.townhouse::after {
  left: 3px;
  top: 5px;
  width: 28px;
  height: 12px;
  border-radius: 50% 50% 4px 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 224, 150, 0.28) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #b74b3d, #7e2b28);
  box-shadow: inset 0 -2px 0 rgba(58, 33, 23, 0.38);
}

.tool-icon.inn::before {
  left: 5px;
  top: 14px;
  width: 24px;
  height: 13px;
  border: 1px solid rgba(58, 34, 22, 0.58);
  border-radius: 2px;
  background:
    radial-gradient(circle at 11% 30%, #f0b75a 0 7%, transparent 8%),
    radial-gradient(circle at 89% 30%, #f0b75a 0 7%, transparent 8%),
    linear-gradient(90deg, #486d78 0 4px, transparent 4px 19px, #486d78 19px),
    linear-gradient(180deg, #c99b68, #745033);
}

.tool-icon.inn::after {
  left: 3px;
  top: 6px;
  width: 28px;
  height: 12px;
  border-radius: 50% 50% 4px 4px;
  background:
    radial-gradient(circle at 50% 78%, #e8c46e 0 12%, transparent 13%),
    linear-gradient(180deg, #c55743, #87312b);
}

.tool-icon.manor::before {
  left: 5px;
  top: 13px;
  width: 24px;
  height: 14px;
  border: 1px solid rgba(58, 34, 22, 0.58);
  border-radius: 2px;
  background:
    radial-gradient(circle at 14% 78%, #6f9d55 0 8%, transparent 9%),
    radial-gradient(circle at 86% 78%, #6f9d55 0 8%, transparent 9%),
    linear-gradient(90deg, #435f74 0 4px, transparent 4px 19px, #435f74 19px),
    linear-gradient(180deg, #dfcfaa, #9b7a55);
}

.tool-icon.manor::after {
  left: 3px;
  top: 4px;
  width: 28px;
  height: 14px;
  border-radius: 50% 50% 4px 4px;
  background:
    repeating-linear-gradient(90deg, rgba(242, 221, 166, 0.24) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #a15a92, #60366c);
  box-shadow: 9px -4px 0 -3px #e2c177;
}

.tool-icon.palace::before {
  left: 5px;
  top: 14px;
  width: 24px;
  height: 13px;
  border: 1px solid rgba(64, 39, 24, 0.65);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #3d5c67 0 4px, transparent 4px 19px, #3d5c67 19px),
    linear-gradient(180deg, #dfca98, #9a744d);
}

.tool-icon.palace::after {
  left: 2px;
  top: 5px;
  width: 30px;
  height: 13px;
  border-radius: 50% 50% 4px 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 221, 150, 0.3) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #c24b3b, #7f2a26);
  box-shadow: 9px -5px 0 -2px #d7b45c;
}

.tool-icon.lumber {
  background:
    radial-gradient(circle at 20% 72%, #8b5732 0 12%, transparent 13%),
    radial-gradient(circle at 70% 70%, #a56a3b 0 12%, transparent 13%),
    linear-gradient(135deg, #4e6f43, #263720);
}

.tool-icon.lumber::before {
  left: 8px;
  top: 5px;
  width: 18px;
  height: 14px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #6d9b58, #2f5a32);
}

.tool-icon.lumber::after {
  left: 6px;
  top: 20px;
  width: 23px;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, #9b6237 0 3px, #5a351f 3px 5px);
}

.tool-icon.quarry::before,
.tool-icon.wall::before,
.tool-icon.tower::before {
  left: 5px;
  top: 10px;
  width: 24px;
  height: 17px;
  clip-path: polygon(8% 100%, 30% 14%, 49% 76%, 68% 7%, 96% 100%);
  background: linear-gradient(135deg, #aeb2ad, #5b6261 56%, #313737);
}

.tool-icon.quarry::after {
  left: 8px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-top: 3px solid #d2bb7c;
  border-left: 3px solid #704526;
  transform: rotate(-28deg);
}

.tool-icon.farm {
  background:
    linear-gradient(180deg, rgba(255, 239, 170, 0.14), transparent 40%),
    linear-gradient(135deg, #7fa84a, #3f612e);
}

.tool-icon.farm::before {
  inset: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #bdd36b 0 4px, #6f9142 4px 8px);
}

.tool-icon.farm::after {
  left: 7px;
  top: 8px;
  width: 20px;
  height: 17px;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(64, 78, 35, 0.52) 5px 7px);
  transform: skewY(8deg);
}

.tool-icon.well {
  background: linear-gradient(135deg, #5f6a68, #242c2e);
}

.tool-icon.well::before {
  left: 7px;
  top: 12px;
  width: 20px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #71b9d0 0 34%, transparent 35%),
    radial-gradient(ellipse at center, #9a9589 0 65%, #4e5351 66%);
}

.tool-icon.well::after {
  left: 9px;
  top: 4px;
  width: 16px;
  height: 14px;
  border-top: 3px solid #9b6738;
  border-left: 2px solid #9b6738;
  border-right: 2px solid #9b6738;
  border-radius: 3px 3px 0 0;
}

.tool-icon.warehouse::before,
.tool-icon.workshop::before,
.tool-icon.weaver::before,
.tool-icon.mint::before {
  left: 6px;
  top: 13px;
  width: 22px;
  height: 14px;
  border: 1px solid rgba(55, 32, 20, 0.6);
  border-radius: 2px;
  background: linear-gradient(180deg, #b78952, #6b4429);
}

.tool-icon.warehouse::after,
.tool-icon.workshop::after {
  left: 4px;
  top: 7px;
  width: 26px;
  height: 9px;
  border-radius: 50% 50% 3px 3px;
  background: linear-gradient(180deg, #7d482a, #4b2b1a);
}

.tool-icon.warehouse::before {
  background:
    linear-gradient(45deg, transparent 0 46%, rgba(74, 46, 31, 0.9) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 0 46%, rgba(74, 46, 31, 0.9) 47% 53%, transparent 54%),
    linear-gradient(180deg, #b78952, #6b4429);
}

.tool-icon.workshop::after {
  box-shadow:
    17px -5px 0 -2px #222b2f,
    18px -9px 0 -4px rgba(230, 222, 190, 0.8);
}

.tool-icon.market {
  background: linear-gradient(135deg, #73523d, #30241d);
}

.tool-icon.market::before {
  left: 5px;
  top: 13px;
  width: 24px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #75533a, #4a3324);
}

.tool-icon.market::after {
  left: 4px;
  top: 6px;
  width: 26px;
  height: 10px;
  border-radius: 7px 7px 2px 2px;
  background: repeating-linear-gradient(90deg, #b7493d 0 6px, #e0c27a 6px 12px);
  box-shadow:
    5px 13px 0 -3px #d7a94d,
    -1px 11px 0 -4px #e9b95c,
    22px 11px 0 -4px #e9b95c;
}

.tool-icon.weaver::before {
  background:
    repeating-linear-gradient(90deg, #d8c3e8 0 3px, #806796 3px 6px),
    linear-gradient(180deg, #816395, #4d3b5d);
}

.tool-icon.weaver::after {
  left: 4px;
  top: 7px;
  width: 26px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 72%, 88% 100%, 12% 100%, 0 72%);
  background: linear-gradient(180deg, #a9554b, #73322d);
}

.tool-icon.apothecary::before {
  background:
    radial-gradient(circle at 72% 62%, #d6cf8a 0 12%, transparent 13%),
    linear-gradient(90deg, #446d54 0 4px, transparent 4px 16px, #446d54 16px),
    linear-gradient(180deg, #dfcc9e, #8e7651);
}

.tool-icon.apothecary::after {
  background:
    radial-gradient(circle at 70% 78%, #d6cf8a 0 12%, transparent 13%),
    linear-gradient(180deg, #6ea35b, #416b3e);
}

.tool-icon.mint::before {
  background:
    radial-gradient(circle at 50% 57%, #f0cf64 0 18%, transparent 19%),
    linear-gradient(180deg, #8a8d86, #4d5351);
}

.tool-icon.mint::after {
  left: 5px;
  top: 7px;
  width: 24px;
  height: 9px;
  border-radius: 50% 50% 3px 3px;
  background: linear-gradient(180deg, #5d6664, #323939);
  box-shadow:
    16px 8px 0 -5px #f0cf64,
    8px 14px 0 -5px #dcae43;
}

.tool-icon.wall::before {
  clip-path: none;
  top: 12px;
  height: 12px;
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(65, 70, 69, 0.5) 25% 28%, transparent 29% 58%, rgba(65, 70, 69, 0.5) 59% 62%, transparent 63%),
    linear-gradient(180deg, #878d89, #545b5a);
}

.tool-icon.wall::after {
  left: 5px;
  top: 8px;
  width: 24px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #69716f 0 5px, #4e5654 5px 8px);
}

.tool-icon.tower::before {
  left: 9px;
  top: 10px;
  width: 16px;
  height: 16px;
  clip-path: none;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(180deg, #8c928e, #4e5654);
}

.tool-icon.tower::after {
  left: 7px;
  top: 5px;
  width: 20px;
  height: 10px;
  border-radius: 50% 50% 3px 3px;
  background: linear-gradient(180deg, #6d7471, #424a48);
  box-shadow: 14px -1px 0 -5px #b64d3f;
}

.inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(240, 216, 167, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.inventory-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.resource-dot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.resource-dot.wood {
  background: linear-gradient(135deg, #9a6a3f, #58351f);
}

.resource-dot.stone {
  background: linear-gradient(135deg, #a6aaa6, #545b5a);
}

.resource-dot.clay {
  background: linear-gradient(135deg, #bd7452, #693d30);
}

.resource-dot.iron {
  background: linear-gradient(135deg, #82909a, #263139);
}

.resource-dot.food {
  background: linear-gradient(135deg, #bed66b, #557736);
}

.resource-dot.water {
  background: linear-gradient(135deg, #83c2d7, #2f6f86);
}

.resource-dot.bamboo {
  background: linear-gradient(135deg, #89b866, #3f6f3b);
}

.resource-dot.herb {
  background: linear-gradient(135deg, #afd16b, #496f35);
}

.resource-dot.silk {
  background: linear-gradient(135deg, #e3c9ea, #806796);
}

.resource-dot.gold {
  background: linear-gradient(135deg, #f0cf64, #9a7624);
}

.resource-dot.coin {
  background: linear-gradient(135deg, #f1ca65, #9c6e23);
}

.resource-dot::before {
  inset: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  mix-blend-mode: screen;
}

.resource-dot::after {
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
}

.resource-dot.wood::after {
  border-top: 2px solid #d3a06a;
  border-bottom: 2px solid #5e371f;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #8c5934 0 2px, #5a351f 2px 4px);
}

.resource-dot.stone::after {
  clip-path: polygon(5% 82%, 32% 16%, 56% 70%, 78% 9%, 96% 86%);
  background: linear-gradient(135deg, #d0d1ca, #616966);
}

.resource-dot.clay::after {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 36%, rgba(255, 224, 182, 0.34) 0 18%, transparent 19%),
    linear-gradient(135deg, #c67854, #6b3b2f);
}

.resource-dot.iron::after {
  clip-path: polygon(12% 82%, 28% 18%, 52% 68%, 77% 12%, 92% 84%);
  background: linear-gradient(135deg, #aeb9c0, #2d3941);
}

.resource-dot.food::after {
  border-radius: 50% 50% 50% 0;
  background: #d8cf6f;
  box-shadow:
    5px 2px 0 -1px #96ad50,
    -2px 6px 0 -1px #789240;
  transform: rotate(-22deg);
}

.resource-dot.water::after {
  width: 12px;
  height: 8px;
  border-bottom: 2px solid rgba(227, 248, 244, 0.62);
  border-radius: 50%;
  background: linear-gradient(180deg, #9ed8e5, #3f8aa2);
}

.resource-dot.bamboo::after {
  left: 7px;
  top: 2px;
  width: 3px;
  height: 14px;
  border-left: 2px solid #315a2e;
  border-right: 1px solid #9fcc73;
  background: #6fa45a;
  box-shadow:
    -4px 4px 0 -1px #6fa45a,
    4px 7px 0 -1px #6fa45a;
}

.resource-dot.herb::after {
  border-radius: 70% 20% 70% 20%;
  background: #a7cf69;
  box-shadow:
    5px 4px 0 -1px #6f9d45,
    -3px 5px 0 -1px #7dae4e;
  transform: rotate(-24deg);
}

.resource-dot.silk::after {
  width: 12px;
  height: 10px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 4px),
    linear-gradient(135deg, #e8d2ef, #866a9b);
}

.resource-dot.gold::after,
.resource-dot.coin::after {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff0a4 0 16%, #e0b841 17% 60%, #8f671e 61%);
  box-shadow: inset 0 0 0 1px rgba(85, 55, 14, 0.6);
}

.resource-dot.coin::after {
  left: 3px;
  top: 5px;
  width: 12px;
  height: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(85, 55, 14, 0.6),
    1px -4px 0 -1px #d9a936;
}

.mini-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

#miniMap {
  width: 100%;
  height: auto;
  border: 1px solid rgba(238, 212, 162, 0.18);
  border-radius: 8px;
  background: #17191a;
}

.stage-wrap {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(95, 62, 36, 0.16), transparent 14% 86%, rgba(95, 62, 36, 0.16)),
    linear-gradient(180deg, rgba(255, 228, 174, 0.07), transparent 18%),
    #14120f;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.cursor-info,
.toast {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(241, 220, 174, 0.16);
  border-radius: 8px;
  background: rgba(25, 21, 18, 0.76);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.cursor-info {
  left: 14px;
  top: 14px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--muted);
}

.toast {
  left: 50%;
  bottom: 18px;
  max-width: min(560px, calc(100% - 40px));
  padding: 10px 14px;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.statusbar {
  grid-column: 1 / 4;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  z-index: 3;
}

#selectionLabel {
  color: var(--ink);
}

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(8, 7, 6, 0.42), rgba(8, 7, 6, 0.78)),
    radial-gradient(circle at 24% 72%, rgba(112, 164, 141, 0.16), transparent 26%),
    radial-gradient(circle at 78% 26%, rgba(213, 164, 74, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(68, 52, 35, 0.9), rgba(20, 20, 19, 0.94)),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 46px);
}

.start-screen.hidden {
  display: none;
}

.start-card {
  width: min(760px, 100%);
  border: 1px solid rgba(240, 216, 167, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(44, 36, 28, 0.96), rgba(22, 19, 17, 0.95)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 14px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
  padding: clamp(24px, 5vw, 44px);
}

.start-kicker {
  color: var(--accent-2);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.start-card h1 {
  margin: 10px 0 10px;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.95;
  letter-spacing: 0;
}

.start-card p {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mode-card {
  display: grid;
  gap: 10px;
  min-height: 168px;
  border: 1px solid rgba(240, 216, 167, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  padding: 18px;
  text-align: left;
  cursor: pointer;
}

.mode-card:hover {
  border-color: rgba(215, 169, 77, 0.72);
  background: rgba(215, 169, 77, 0.13);
}

.mode-card strong {
  font-size: 22px;
}

.mode-card small {
  color: var(--muted);
  line-height: 1.55;
}

.scale-select {
  margin-top: 16px;
}

.scale-title {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.scale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scale-card {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid rgba(240, 216, 167, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.scale-card.active {
  border-color: rgba(215, 169, 77, 0.76);
  background: rgba(215, 169, 77, 0.14);
  box-shadow: inset 0 0 0 1px rgba(215, 169, 77, 0.18);
}

.scale-card small {
  color: var(--muted);
}

.mode-icon {
  width: 54px;
  height: 54px;
  border-radius: 8px;
}

.mode-icon.survival {
  background:
    linear-gradient(145deg, transparent 0 44%, rgba(255, 246, 220, 0.52) 45% 55%, transparent 56%),
    radial-gradient(circle at 28% 30%, #5f7d4b 0 22%, transparent 23%),
    linear-gradient(135deg, #a06a3e, #2d2118);
}

.mode-icon.creative {
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 246, 220, 0.54) 45% 55%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(255, 246, 220, 0.54) 45% 55%, transparent 56%),
    linear-gradient(135deg, #d1a756, #2f6971);
}

.continue-btn {
  display: none;
  margin-top: 14px;
}

.continue-btn.available {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 980px) {
  .game-shell {
    grid-template-columns: 166px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr) 190px 40px;
  }

  .topbar {
    grid-column: 1 / 3;
  }

  .top-stats {
    justify-content: flex-start;
    overflow: auto;
  }

  .inventory-panel {
    grid-column: 1 / 3;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .tool-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .stage-wrap {
    grid-column: 2;
    grid-row: 2;
  }

  .statusbar {
    grid-column: 1 / 3;
    grid-row: 4;
  }

  .tool-btn {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 43px;
  }

  .tool-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 720px) {
  .game-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 58px 116px minmax(0, 1fr) 164px 38px;
  }

  .topbar {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
    padding: 8px;
  }

  .brand {
    min-width: 0;
  }

  .brand-mark,
  .top-actions button {
    display: none;
  }

  .top-stats {
    font-size: 12px;
    gap: 10px;
  }

  .tool-panel {
    grid-column: 1;
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tool-list {
    grid-auto-flow: column;
    grid-auto-columns: 150px;
  }

  .stage-wrap {
    grid-column: 1;
    grid-row: 3;
  }

  .inventory-panel {
    grid-column: 1;
    grid-row: 4;
    grid-template-columns: minmax(0, 1fr) 126px;
    padding: 10px;
  }

  .inventory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .inventory-item {
    min-height: 34px;
    font-size: 12px;
  }

  .statusbar {
    grid-column: 1;
    grid-row: 5;
    padding: 0 10px;
    font-size: 12px;
  }

  .mode-grid {
    grid-template-columns: 1fr;
  }
}