:root {
  color-scheme: light;
  --ink: #263238;
  --paper: #fffdf8;
  --line: #d9d1c4;
  --mint: #56b891;
  --coral: #f06c65;
  --sun: #f4bd4f;
  --sky: #62a7d8;
  --berry: #8467c7;
  --deep: #1f3d4a;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #eaf4ee;
}

button {
  border: 0;
  font: inherit;
  color: inherit;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: 78px 1fr;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #fffaf0, #eff9f6);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 28px rgba(57, 76, 72, 0.12);
  z-index: 3;
}

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

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, #fff 0 12%, transparent 13%),
    conic-gradient(from 20deg, var(--coral), var(--sun), var(--mint), var(--sky), var(--berry), var(--coral));
  box-shadow: inset 0 -7px rgba(0, 0, 0, 0.12), 0 5px 14px rgba(31, 61, 74, 0.18);
}

h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}

.brand p {
  margin: 4px 0 0;
  color: #68746e;
  font-size: 13px;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 10px;
  width: min(760px, 62vw);
}

.stat {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}

.stat span {
  display: block;
  font-size: 11px;
  color: #6a756e;
}

.stat strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  white-space: nowrap;
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 292px 1fr;
}

.palette {
  border-right: 1px solid var(--line);
  background: #fffbf2;
  padding: 14px;
  overflow: auto;
  z-index: 2;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.tab,
.action {
  height: 36px;
  border-radius: 8px;
  background: #eee7d8;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.tab.active,
.action:hover {
  background: var(--deep);
  color: white;
}

.tab:active,
.tool:active,
.action:active {
  transform: translateY(1px);
}

.tool-panel {
  display: none;
  gap: 10px;
}

.tool-panel.active {
  display: grid;
}

.tool {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e4d9c9;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(63, 74, 70, 0.06);
}

.tool.active {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(86, 184, 145, 0.2);
}

.tool small {
  display: block;
  color: #707a74;
  margin-top: 3px;
  line-height: 1.25;
}

.tool-art {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 1px solid rgba(38, 50, 56, 0.12);
  background: #e9f5e8;
  position: relative;
  overflow: hidden;
}

.path-art { background: linear-gradient(135deg, #b8845b 0 32%, #ead3ab 33% 66%, #b8845b 67%); }
.remove-art { background: linear-gradient(135deg, #f6efe3, #d6d0c6); }
.remove-art::before { content: ""; position: absolute; width: 42px; height: 5px; background: var(--coral); transform: rotate(-35deg); left: 4px; top: 23px; }
.wheel-art { background: radial-gradient(circle, #fff 0 12%, #62a7d8 13% 18%, transparent 19%), conic-gradient(var(--coral), var(--sun), var(--mint), var(--berry), var(--coral)); }
.coaster-art { background: linear-gradient(160deg, transparent 45%, #b14b5c 46% 54%, transparent 55%), #e6f5fb; }
.carousel-art { background: conic-gradient(from 45deg, #f06c65, #fff, #f4bd4f, #fff, #56b891, #fff, #f06c65); }
.food-art { background: linear-gradient(#e95d56 0 32%, #fff 33% 44%, #ffd76f 45%); }
.tree-art { background: radial-gradient(circle at 52% 35%, #338f65 0 30%, transparent 31%), linear-gradient(#d19655 45%, #7ac57a 46%); }
.water-art { background: radial-gradient(circle at 25% 35%, #bfefff 0 9%, transparent 10%), linear-gradient(135deg, #4aa7d8, #72d3d1); }
.lamp-art { background: radial-gradient(circle at 50% 28%, #ffe58b 0 16%, transparent 17%), linear-gradient(90deg, transparent 46%, #5c4c4c 47% 53%, transparent 54%), #ecf4ed; }
.garden-art { background: radial-gradient(circle at 30% 35%, #f06c65 0 8%, transparent 9%), radial-gradient(circle at 58% 30%, #8467c7 0 8%, transparent 9%), radial-gradient(circle at 45% 55%, #f4bd4f 0 8%, transparent 9%), #dff2dc; }
.arcade-art { background: radial-gradient(circle at 34% 43%, #62a7d8 0 7%, transparent 8%), radial-gradient(circle at 64% 43%, #f06c65 0 7%, transparent 8%), linear-gradient(#263238 0 28%, #8467c7 29% 72%, #f4bd4f 73%); }
.restroom-art { background: linear-gradient(90deg, #62a7d8 0 49%, #f06c65 50%), radial-gradient(circle at 50% 22%, #fff 0 12%, transparent 13%); }
.souvenir-art { background: radial-gradient(circle at 50% 26%, #fff 0 10%, transparent 11%), linear-gradient(#56b891 0 32%, #fff 33% 44%, #8467c7 45%); }
.bench-art { background: linear-gradient(180deg, transparent 18%, #9a633c 19% 34%, transparent 35% 48%, #9a633c 49% 64%, transparent 65%), #e8f4e0; }
.fountain-art { background: radial-gradient(circle at 50% 42%, #bfefff 0 10%, transparent 11%), radial-gradient(circle at 50% 62%, #62a7d8 0 26%, transparent 27%), #edf6f9; }
.statue-art { background: radial-gradient(circle at 50% 28%, #f5f1df 0 14%, transparent 15%), linear-gradient(90deg, transparent 34%, #b9b2a0 35% 65%, transparent 66%), #eef1e8; }
.balloon-art { background: radial-gradient(circle at 32% 30%, #f06c65 0 14%, transparent 15%), radial-gradient(circle at 58% 24%, #f4bd4f 0 14%, transparent 15%), radial-gradient(circle at 50% 48%, #62a7d8 0 14%, transparent 15%), linear-gradient(90deg, transparent 49%, #6b6060 50% 52%, transparent 53%), #f5f7ef; }
.hedge-art { background: radial-gradient(circle at 22% 50%, #2c8d64 0 18%, transparent 19%), radial-gradient(circle at 50% 50%, #56b891 0 20%, transparent 21%), radial-gradient(circle at 78% 50%, #2c8d64 0 18%, transparent 19%), #eaf5e7; }
.trash-art { background: linear-gradient(90deg, transparent 30%, #4f696b 31% 69%, transparent 70%), linear-gradient(#dff2dc 0 32%, #56b891 33% 42%, #eaf5e7 43%); }

.action {
  width: 100%;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid #e4d9c9;
}

.hint {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: #f2eadc;
  color: #5d665f;
  font-size: 13px;
}

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

.stage-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(244, 189, 79, 0.18), transparent 24%),
    linear-gradient(160deg, #cfe8df, #e8f3ec 52%, #d4e6f3);
}

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

.floating-log {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(420px, calc(100% - 36px));
  display: grid;
  gap: 6px;
  pointer-events: none;
}

.toast {
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(31, 61, 74, 0.88);
  color: white;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(31, 61, 74, 0.22);
}

.inspector {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 238px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(217, 209, 196, 0.9);
  box-shadow: 0 12px 32px rgba(31, 61, 74, 0.18);
  font-size: 13px;
}

.inspector strong,
.inspector span {
  display: block;
}

.inspector span {
  margin-top: 5px;
  color: #64706a;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .app-shell {
    grid-template-rows: 116px 1fr;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .stat-strip {
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 172px 1fr;
  }

  .palette {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tool-panel.active {
    display: flex;
    min-width: max-content;
  }

  .tool {
    width: 220px;
  }
}