:root{
  --bg:#fbf6ec;
  --ink:#3e2d24;
  --soil:#594032;
  --soil-dark:#2f211a;
  --soil-line:#9b795f;
  --panel:#fff8efee;
  --panel-border:#d9bfab;
  --shadow:0 12px 30px rgba(49,31,17,.18);
  --font-body:"Manrope", system-ui, sans-serif;
  --font-display:"Indie Flower", cursive;
  --safe-top:max(12px, env(safe-area-inset-top));
  --safe-right:max(12px, env(safe-area-inset-right));
  --safe-bottom:max(12px, env(safe-area-inset-bottom));
  --safe-left:max(12px, env(safe-area-inset-left));
}

*{box-sizing:border-box}
html,body,#app{margin:0;height:100%;width:100%}
body{
  font-family:var(--font-body);
  background:radial-gradient(circle at top left,#fffaf2 0%,#f6eddc 44%,#ecdfc9 100%);
  color:var(--ink);
  overflow:hidden;
}

#mapWrap{
  position:fixed; inset:0;
}
#map{
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.45), transparent 22%),
    radial-gradient(circle at 86% 10%, rgba(255,240,210,.32), transparent 28%),
    linear-gradient(180deg,#fff9ee 0%, #f8f0df 45%, #f3e7d2 100%);
}

.loading{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.9rem 1.1rem;
  background:rgba(255,248,239,.95);
  border:1px solid rgba(120,84,61,.18);
  border-radius:999px;
  box-shadow:var(--shadow);
  z-index:90;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.loading.visible{opacity:1}

.map-title{
  position:fixed;
  top:calc(var(--safe-top) + 8px);
  left:calc(var(--safe-left) + 12px);
  z-index:40;
  max-width:min(44vw, 420px);
  pointer-events:none;
}
.map-title h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2rem,4.2vw,3.55rem);
  line-height:.88;
  color:#fff7f0;
  text-shadow:
    0 1px 0 #b95ca9,
    2px 2px 0 #ffaf6d,
    4px 4px 12px rgba(95,47,25,.34),
    -1px -1px 10px rgba(173,230,184,.18);
  letter-spacing:.01em;
}
.map-title p{
  margin:.3rem 0 0 .15rem;
  font-size:clamp(.82rem,1.3vw,1rem);
  font-weight:700;
  color:#5c3f33;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.info-button{
  position:fixed;
  right:calc(var(--safe-right) + 16px);
  bottom:calc(var(--safe-bottom) + 18px);
  z-index:55;
  width:44px; height:44px;
  border:none; border-radius:50%;
  background:#fff7ef;
  color:#6b4a35;
  font-weight:800;
  font-size:1.15rem;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.info-button:hover{transform:translateY(-1px)}
.info-button:focus-visible,
.panel-handle:focus-visible,
.dropdown-button:focus-visible,
.dropdown-tools button:focus-visible,
.dropdown-option input:focus-visible + span{
  outline:2px solid #7fca93;
  outline-offset:2px;
}

.popup{
  position:fixed;
  min-width:220px;
  max-width:min(340px, 82vw);
  padding:.9rem 1rem .85rem;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(45,25,10,.28);
  border:1px solid rgba(255,255,255,.5);
  z-index:60;
  color:#2b2019;
  backdrop-filter: blur(6px);
}
.popup.hidden{display:none}
.popup h3{
  margin:0 0 .45rem 0;
  font-size:1rem;
  line-height:1.15;
}
.popup dl{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.24rem .55rem;
  font-size:.86rem;
}
.popup dt{font-weight:800}
.popup dd{margin:0}

.legend-panel{
  position:fixed;
  left:50%;
  bottom:var(--safe-bottom);
  transform:translateX(-50%);
  width:min(800px, calc(100vw - 22px));
  z-index:45;
  pointer-events:none;
}
.panel-handle{
  pointer-events:auto;
  margin:0 auto;
  width:90px;
  height:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:none;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, #fffaf5 0%, #f0e1d1 100%);
  box-shadow:0 -2px 10px rgba(76,49,26,.12);
  cursor:pointer;
}
.handle-line{
  width:38px; height:3px; border-radius:999px;
  background:#c5a98f;
}
.handle-arrow{
  display:block;
  font-size:1rem;
  color:#7a5842;
  line-height:1;
  transform-origin:center;
  transition:transform .25s ease;
}
.legend-panel.open .handle-arrow{transform:rotate(180deg)}
.panel-body{
  pointer-events:auto;
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease, padding .32s ease;
  background:var(--panel);
  backdrop-filter: blur(12px);
  border:1px solid var(--panel-border);
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 34px rgba(77,53,32,.17);
  padding:0 16px;
}
.legend-panel.open .panel-body{
  padding:14px 16px 16px;
  max-height:min(33vh, 360px);
}
.panel-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(220px,.9fr);
  gap:16px;
  min-height:220px;
}
.panel-heading h2{
  margin:0 0 .12rem;
  font-size:1rem;
}
.panel-heading p{
  margin:0 0 .7rem;
  font-size:.8rem;
  color:#715545;
}
.treemap-col, .selector-col{min-width:0}
#treemap{
  position:relative;
  height:calc(min(33vh, 360px) - 74px);
  min-height:142px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
}
#treemap svg{width:100%; height:100%; display:block}
.treemap-tip{
  position:absolute;
  z-index:66;
  pointer-events:none;
  padding:.48rem .6rem;
  border-radius:12px;
  background:rgba(48,32,21,.9);
  color:white;
  font-size:.78rem;
  box-shadow:var(--shadow);
}
.treemap-tip.hidden{display:none}

.dropdown{position:relative}
.dropdown-button{
  width:100%;
  text-align:left;
  padding:.82rem .95rem;
  border-radius:14px;
  border:1px solid #d6c0ac;
  background:#fffdf8;
  color:#5b4336;
  font-weight:700;
  cursor:pointer;
}
.dropdown-button::after{
  content:"▾";
  float:right;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:100%;
  max-height:min(250px, 48vh);
  overflow:auto;
  background:#fffaf4;
  border:1px solid #dcc6b1;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:.55rem;
  z-index:70;
}
.dropdown-menu.hidden{display:none}
.dropdown-tools{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.dropdown-tools button{
  border:none;
  background:#eedecf;
  color:#5c4738;
  padding:.45rem .65rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:.78rem;
}
.species-options{display:flex; flex-direction:column; gap:2px}
.dropdown-option{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .2rem;
  border-radius:10px;
}
.dropdown-option:hover{background:rgba(214,192,172,.22)}
.dropdown-option input{margin:0}
.dropdown-swatch{
  width:11px; height:11px; border-radius:50%;
  flex:none;
}
.selection-status{
  margin-top:.85rem;
  font-size:.84rem;
  color:#6f5444;
  font-weight:700;
}

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(35,23,16,.32);
  display:grid;
  place-items:center;
  z-index:80;
}
.modal-backdrop.hidden{display:none}
.modal{
  width:min(460px, calc(100vw - 32px));
  background:#fff8f0;
  border-radius:20px;
  padding:1rem 1.05rem 1.1rem;
  box-shadow:0 20px 50px rgba(36,18,8,.28);
  border:1px solid rgba(114,78,53,.14);
}
.modal h2{margin:.1rem 0 .7rem}
.modal p{margin:.45rem 0; line-height:1.4; font-size:.93rem}
.modal a{color:#8b4fc8}

.rotate-notice{
  position:fixed; inset:0;
  background:rgba(252,246,235,.96);
  display:none;
  place-items:center;
  z-index:100;
  padding:24px;
}
.rotate-card{
  max-width:320px;
  text-align:center;
  background:#fffaf3;
  border:1px solid #e3ccb3;
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:1.2rem 1rem;
}
.rotate-flower{font-size:2rem}
.rotate-card h2{margin:.4rem 0 .3rem; font-size:1.25rem}
.rotate-card p{margin:0; line-height:1.45}

.state-base{filter:url(#soilTexture)}
.state-fill{
  fill:#5a3d2e;
  fill-opacity:.88;
}
.state-stroke{
  fill:none;
  stroke:#a88263;
  stroke-width:.7px;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.weed{
  stroke:none;
  transition:opacity .18s ease;
  cursor:pointer;
}
.weed:hover{
  filter:brightness(1.05) saturate(1.06);
}
.weed.dimmed{opacity:.15}
.weed.selected{
  filter:drop-shadow(0 0 5px rgba(255,255,255,.22));
}
.treemap-node{
  stroke:none;
  cursor:pointer;
}
.treemap-node.dimmed{opacity:.22}
.treemap-node.selected{filter:brightness(1.06)}
.treemap-label{
  pointer-events:none;
  fill:rgba(50,31,20,.82);
  font-size:11px;
  font-weight:800;
}

@media (max-width: 720px){
  .panel-grid{grid-template-columns:1fr}
  .legend-panel.open .panel-body{max-height:min(80vh, 560px)}
  #treemap{height:240px}
  .map-title{
    max-width:min(72vw, 320px);
    top:calc(var(--safe-top) + 4px);
    left:calc(var(--safe-left) + 10px);
  }
  .map-title h1{font-size:clamp(1.75rem, 8vw, 2.55rem)}
  .map-title p{font-size:.77rem; max-width:220px}
  .info-button{right:calc(var(--safe-right) + 10px); bottom:calc(var(--safe-bottom) + 10px)}
}
@media (orientation:portrait) and (max-width: 768px){
  .rotate-notice{display:grid}
}


#mapWrap{
  position:fixed;
  inset:0;
}
.map-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}
#weedCanvas,
#map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
#weedCanvas{
  z-index:3;
  pointer-events:none;
}
#map{
  z-index:1;
  pointer-events:auto;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.45), transparent 22%),
    radial-gradient(circle at 86% 10%, rgba(255,240,210,.32), transparent 28%),
    linear-gradient(180deg,#fff9ee 0%, #f8f0df 45%, #f3e7d2 100%);
}