:root {
  --ink: #332817;
  --cream: #fff7d7;
  --paper: #f7edc9;
  --paper-dark: #ead9a8;
  --leaf: #4f7f3a;
  --leaf-dark: #24451f;
  --moss: #91ad55;
  --bark: #7b5735;
  --berry: #8b4a6f;
  --sun: rgba(250, 203, 87, 0.55);
  --partial-sun: rgba(166, 197, 99, 0.5);
  --partial-shade: rgba(91, 140, 93, 0.5);
  --shade: rgba(52, 70, 77, 0.58);
  --glow: #ffe48a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 232, 151, 0.35), transparent 22rem),
    radial-gradient(circle at 85% 15%, rgba(159, 190, 97, 0.25), transparent 24rem),
    linear-gradient(135deg, #d7c59a, #a7b56c 45%, #5e7b49);
}

/* top banner */
.topbar {
  margin: 0.75rem;
  padding: 1rem 1.25rem;
  border: 3px double #6c5b2f;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 247, 215, 0.95), rgba(236, 219, 160, 0.92));
  box-shadow:
    0 8px 0 rgba(80, 61, 32, 0.35),
    0 18px 40px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h1 {
  margin: 0;
  font-size: 2.2rem;
  color: #2c4b22;
  text-shadow: 2px 2px 0 #f5df8d;
}

.topbar p {
  margin: 0.25rem 0 0;
  font-style: italic;
}

/* overall layout */
.app-shell {
  display: grid;
  grid-template-columns: 330px minmax(520px, 1fr) 320px;
  gap: 1rem;
  padding: 0.75rem;
  height: calc(100vh - 120px);
}

.sidebar,
.info-panel {
  overflow: auto;
}

/* notebook panels */
.panel,
.info-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 247, 215, 0.97), rgba(239, 221, 165, 0.96));
  border: 2px solid #6c5b2f;
  border-radius: 22px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow:
    0 5px 0 rgba(103, 78, 40, 0.35),
    inset 0 0 0 2px rgba(255,255,255,0.35);
}

.panel::before,
.info-panel::before {
  content: "✦";
  position: absolute;
  top: -12px;
  right: 20px;
  color: var(--berry);
  background: var(--paper);
  border: 1px solid #6c5b2f;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

h2 {
  margin-top: 0;
  color: #375929;
  text-shadow: 1px 1px 0 #fff1a8;
}

h3 {
  color: #5e3c23;
}

.small,
.muted {
  font-size: 0.9rem;
  opacity: 0.82;
}

/* whimsical buttons */
button,
input,
select {
  font: inherit;
}

button,
select,
input {
  border-radius: 999px;
  border: 2px solid #6c5b2f;
  background: #fff7d7;
  color: var(--ink);
  padding: 0.6rem 0.85rem;
}

button {
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 0 #8b7341;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button:hover {
  transform: translateY(-2px) rotate(-0.4deg);
  background: #fff0ad;
  box-shadow: 0 6px 0 #8b7341;
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #8b7341;
}

.zone-tool.active,
.feature-tool.active {
  background: #cde88c;
  outline: 3px solid var(--glow);
}

/* form controls */
#searchInput,
#categoryFilter,
.show-all-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.65rem;
}

#categoryFilter option {
  color: var(--ink);
  background: var(--paper);
}

/* plant list as collectible cards */
.plant-list {
  display: grid;
  gap: 0.75rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.plant-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem;
  border-radius: 18px;
  border: 2px solid #7d6838;
  background:
    linear-gradient(135deg, #fff9df, #dce8a6);
  box-shadow:
    0 4px 0 rgba(103, 78, 40, 0.35),
    inset 0 0 12px rgba(255,255,255,0.45);
  cursor: grab;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.plant-card:hover {
  transform: translateY(-2px) rotate(0.6deg);
  filter: saturate(1.08);
}

.plant-thumb,
.placed-plant {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  object-fit: cover;
  background:
    radial-gradient(circle at 35% 35%, #fff7b8, #8fb85d 42%, #355c32 78%);
  border: 2px solid #6c5b2f;
}

.plant-name {
  font-weight: bold;
  color: #2f4e24;
}

.plant-meta {
  font-size: 0.82rem;
  color: #6a5131;
}

/* map area */
.map-wrap {
  min-width: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem 0.8rem;
  font-size: 0.9rem;
  color: #fff7d7;
  text-shadow: 1px 1px 0 #203518;
}

.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  margin-right: 0.25rem;
  vertical-align: -3px;
  border: 1px solid rgba(255,255,255,0.45);
}

.swatch.full_sun { background: var(--sun); }
.swatch.partial_sun { background: var(--partial-sun); }
.swatch.partial_shade { background: var(--partial-shade); }
.swatch.shade { background: var(--shade); }

.map {
  position: relative;
  width: 100%;
  height: calc(100vh - 180px);
  min-height: 560px;
  overflow: hidden;
  border-radius: 30px;
  border: 4px ridge #6c5b2f;

  background:
    url("./assets/textures/green-moss-background.jpg"),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 70% 25%, rgba(255, 230, 130, 0.18), transparent 22rem),
    radial-gradient(circle at 20% 80%, rgba(82, 115, 58, 0.32), transparent 18rem),
    linear-gradient(135deg, #78945b, #416f45 48%, #294a33);

  background-size:
    250px,
    32px 32px,
    32px 32px,
    auto,
    auto,
    auto;

  box-shadow:
    inset 0 0 50px rgba(30, 46, 25, 0.55),
    0 10px 0 rgba(83, 63, 31, 0.35),
    0 24px 50px rgba(0,0,0,0.25);
}

/* grid painter */
.zone-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(16, 1fr);
  z-index: 1;
}

.zone-cell {
  border: 1px solid rgba(255,255,255,0.035);
  user-select: none;
}

.zone-cell:hover {
  outline: 2px solid rgba(255, 247, 215, 0.5);
  z-index: 2;
}

.zone-cell.full_sun { background: var(--sun); }
.zone-cell.partial_sun { background: var(--partial-sun); }
.zone-cell.partial_shade { background: var(--partial-shade); }
.zone-cell.shade { background: var(--shade); }

/* placed plants */
.plant-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.placed-plant-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: move;
}

.placed-plant-wrap:hover .placed-plant {
  transform: scale(1.12) rotate(-2deg);
}

.placed-plant-wrap.bad-placement .placed-plant {
  outline: 3px solid #d64d3f;
  box-shadow: 0 0 18px rgba(255, 107, 95, 0.9);
}

.spacing-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(255, 247, 220, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* roads / buildings */
.map-feature {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: move;
  border: 2px solid rgba(255, 247, 220, 0.7);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.25),
    inset 0 0 12px rgba(255,255,255,0.2);
}

.map-feature.selected {
  outline: 3px solid var(--glow);
  box-shadow:
    0 0 0 4px rgba(70, 57, 28, 0.45),
    0 0 22px rgba(255, 228, 138, 0.85);
}

.map-feature.road {
  background:
    linear-gradient(90deg, #5d5c56, #77746a, #5d5c56);
  border-radius: 999px;
}

.map-feature.driveway {
  background:
    linear-gradient(90deg, #9b8c75, #c1b292, #9b8c75);
  border-radius: 999px;
}

.map-feature.building {
  background:
    linear-gradient(135deg, #a56e45, #6a4328);
  border-radius: 14px;
}

.map-feature::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 4px black;
  pointer-events: none;
}

.map-feature.road::after { content: "Road"; }
.map-feature.driveway::after { content: "Driveway"; }
.map-feature.building::after { content: "Building"; }

/* feature editor */
.feature-editor {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed rgba(108, 91, 47, 0.45);
}

.feature-editor label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.feature-editor input[type="range"] {
  width: 100%;
  padding: 0;
}

.feature-editor button {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}

/* details */
.detail-card {
  display: grid;
  gap: 0.5rem;
}

.detail-card h3 {
  margin: 0;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge {
  display: inline-block;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: rgba(145, 173, 85, 0.22);
  border: 1px solid rgba(75, 97, 44, 0.35);
  font-size: 0.82rem;
}

.warning {
  color: #9f2e21;
  font-weight: bold;
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .map {
    height: 650px;
  }
}