:root{
    --ink:#2b2620; --paper:#faf6ee; --paper-2:#f2ead9; --accent:#c96f3a;
    --green:#2ecc71; --line:#e3d8c2; --shadow:0 8px 24px rgba(60,45,20,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;font-family:'Georgia','Iowan Old Style','Palatino Linotype',serif;background:var(--paper);color:var(--ink);}
  #app{display:flex;height:100vh;width:100vw;overflow:hidden;}

  /* Sidebar */
  #sidebar{width:352px;min-width:352px;height:100%;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:1000;box-shadow:2px 0 12px rgba(0,0,0,0.06);}
  #sidebar-header{padding:18px 20px 12px;border-bottom:1px solid var(--line);}
  #sidebar-header h1{margin:0 0 4px;font-size:21px;letter-spacing:0.3px;}
  #sidebar-header p{margin:0;font-size:12px;color:#7a6f5c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.5;}
  #zoom-hint{margin-top:7px;font-size:11px;color:#9a8c72;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-style:italic;}
  #search-wrap{padding:12px 20px 8px;}
  #search{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13.5px;outline:none;}
  #search:focus{border-color:var(--accent);}
  #seen-filter{display:flex;gap:6px;padding:6px 20px 12px;border-bottom:1px solid var(--line);}
  .chip{flex:1;padding:6px 8px;border-radius:20px;border:1.5px solid var(--line);background:#fff;color:#7a6f5c;font-size:11.5px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;text-align:center;}
  .chip:hover{border-color:var(--accent);}
  .chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  #inspire-btn{margin:12px 20px;padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;letter-spacing:0.2px;}
  #inspire-btn:hover{background:#b45f2e;}
  #stats-btn{margin:0 20px 12px;padding:9px 14px;background:#fff;color:var(--accent);border:1.5px solid var(--line);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:600;cursor:pointer;}
  #stats-btn:hover{border-color:var(--accent);background:var(--paper-2);}
  /* stats panel */
  .stats-hero{height:120px;background:linear-gradient(135deg,#2e6da4,#3fae6b);}
  .stat-big{text-align:center;padding:6px 0 4px;}
  .stat-big-num{font-family:'Georgia',serif;font-size:38px;font-weight:700;color:var(--ink);line-height:1;}
  .stat-big-num span{font-size:20px;color:#a3947a;}
  .stat-big-label{font-size:12.5px;color:#7a6f5c;margin-top:4px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .stat-track{height:8px;border-radius:5px;background:var(--paper-2);overflow:hidden;margin:10px auto 2px;max-width:280px;}
  .stat-fill{height:100%;background:linear-gradient(90deg,#3fae6b,#2e86c1);border-radius:5px;transition:width 0.5s ease;}
  .stat-quad{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin:14px 0 4px;}
  .qcard{background:var(--paper-2);border-radius:10px;padding:10px 4px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .qcard b{display:block;font-size:17px;color:var(--ink);font-family:'Georgia',serif;}
  .qcard span{font-size:10px;color:#8c7f68;text-transform:uppercase;letter-spacing:0.4px;}
  /* explore-next suggestions */
  .suggest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .sg-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;text-align:left;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;transition:transform 0.12s ease,border-color 0.12s ease;}
  .sg-card:hover{transform:translateY(-2px);border-color:var(--accent);}
  .sg-e{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.06);margin-bottom:3px;}
  .sg-t{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2;}
  .sg-b{font-size:10.5px;color:#8c7f68;line-height:1.2;}
  /* badge shelf */
  .badge-shelf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;}
  .bt{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:9px 4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:center;}
  .bt:hover{border-color:var(--accent);}
  .bt-e{font-size:22px;filter:grayscale(1) opacity(0.5);}
  .bt.earned{background:#fff;}
  .bt.earned .bt-e{filter:none;}
  .bt-n{font-size:9.5px;font-weight:600;color:#5c5340;line-height:1.15;}
  .bt-p{font-size:9px;color:#a3947a;font-weight:700;}
  .bt.earned .bt-p{color:var(--green);}
  .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 6px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;position:relative;cursor:pointer;transition:transform 0.12s ease,border-color 0.12s ease;}
  .cat-card:hover{transform:translateY(-2px);border-color:var(--accent);}
  .cat-emoji{font-size:22px;}
  .cat-num{font-family:'Georgia',serif;font-size:24px;font-weight:700;color:var(--accent);line-height:1.1;}
  .cat-of{font-size:10px;color:#a3947a;}
  .cat-label{font-size:11.5px;color:#5c5340;font-weight:600;margin-top:2px;}
  .biome-check-list{display:flex;flex-direction:column;gap:2px;}
  .bcheck{display:flex;align-items:center;gap:7px;width:100%;font-size:12.5px;padding:5px 6px;border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#9a8c72;background:none;border:none;cursor:pointer;text-align:left;}
  .bcheck:hover{background:var(--paper-2);}
  .bcheck.on{color:#2f2a22;}
  .bc-name{flex:1;}
  .bc-n{font-size:10.5px;color:#a3947a;font-weight:600;}
  .bcheck.on .bc-n{color:#2f9e57;}
  .stat-extreme{display:flex;gap:10px;}
  .stat-extreme div{flex:1;background:var(--paper-2);border-radius:10px;padding:10px 12px;font-size:12px;color:#7a6f5c;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .stat-extreme b{color:var(--ink);font-size:13.5px;}
  #legend{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  #collections-title,#legend-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#a3947a;padding:10px 8px 6px;display:flex;justify-content:space-between;}
  /* badges / achievements */
  #badges-section{border-bottom:1px solid var(--line);margin-bottom:4px;}
  #badges-head{cursor:pointer;user-select:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#a3947a;padding:10px 8px 8px;display:flex;justify-content:space-between;align-items:center;}
  #badges-head:hover{color:var(--accent);}
  #badges-count{background:var(--paper-2);border-radius:10px;padding:1px 8px;font-weight:700;color:#8a7d64;letter-spacing:0;}
  #badges-list{display:none;padding:0 4px 8px;}
  #badges-section.open #badges-list{display:block;}
  #badges-head::after{content:'▸';margin-left:6px;transition:transform 0.2s ease;color:#c9bda2;}
  #badges-section.open #badges-head::after{transform:rotate(90deg);}
  .badge-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .badge-ico{font-size:19px;width:26px;text-align:center;flex-shrink:0;filter:none;transition:filter 0.3s ease;}
  .badge-row.locked .badge-ico{filter:grayscale(1) opacity(0.5);}
  .badge-info{flex:1;min-width:0;}
  .badge-name{font-size:12.5px;font-weight:600;color:#2f2a22;display:flex;align-items:center;gap:5px;}
  .badge-row.locked .badge-name{color:#9a8c72;}
  .badge-check{color:var(--green);font-size:11px;visibility:hidden;}
  .badge-row:not(.locked) .badge-check{visibility:visible;}
  .badge-desc{font-size:10.5px;color:#9a8c72;line-height:1.35;margin:1px 0 4px;}
  .badge-bar{height:4px;border-radius:3px;background:var(--paper-2);overflow:hidden;}
  .badge-fill{height:100%;width:0;background:#c9bda2;border-radius:3px;transition:width 0.4s ease;}
  .badge-row:not(.locked) .badge-fill{background:var(--green);}
  .badge-count{font-size:10px;font-weight:700;color:#a3947a;flex-shrink:0;min-width:26px;text-align:right;}
  .badge-row:not(.locked) .badge-count{color:var(--green);}
  /* badge unlock toast */
  #badge-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:2200;display:flex;align-items:center;gap:12px;background:#2b2620;color:#fff;padding:12px 18px;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,0.35);opacity:0;pointer-events:none;transition:opacity 0.35s ease, transform 0.35s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  #badge-toast.show{opacity:1;transform:translate(-50%,0);}
  #badge-toast .bt-ico{font-size:30px;}
  #badge-toast .bt-title{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:#f5b301;font-weight:700;}
  #badge-toast .bt-name{font-size:15px;font-weight:700;font-family:'Georgia',serif;}
  /* collections */
  #collections-list{margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:8px;}
  .coll-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;user-select:none;}
  .coll-row:hover{background:var(--paper-2);}
  .coll-row.active-coll{background:var(--paper-2);box-shadow:inset 2px 0 0 var(--accent);}
  .coll-emoji{font-size:17px;width:24px;text-align:center;flex-shrink:0;}
  .coll-info{flex:1;min-width:0;}
  .coll-name{font-size:13px;font-weight:600;line-height:1.25;}
  .coll-sub{font-size:10.5px;color:#9a8c72;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .coll-count{font-size:10.5px;font-weight:700;color:#a3947a;background:var(--paper-2);border-radius:10px;padding:1px 7px;flex-shrink:0;}
  .coll-count.some{color:#2f9e57;}
  .coll-count.done{background:var(--green);color:#fff;}
  /* detail card collection chips */
  .d-colls{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
  .d-coll{font-size:11.5px;font-weight:600;color:var(--accent);background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:3px 10px;cursor:pointer;font-family:inherit;}
  .d-coll:hover{border-color:var(--accent);background:var(--paper-2);}
  #legend-title button{border:none;background:none;color:var(--accent);font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .biome-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;user-select:none;}
  .biome-row:hover{background:var(--paper-2);}
  .biome-swatch{width:26px;height:26px;min-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.08);}
  .biome-info{flex:1;}
  .biome-name{font-size:13px;font-weight:600;line-height:1.3;}
  .biome-count{font-size:11px;color:#8c7f68;}
  .biome-row.dim{opacity:0.4;}
  .biome-row.active-row{background:var(--paper-2);box-shadow:inset 2px 0 0 var(--accent);}
  .biome-caret{color:#b9a888;font-size:11px;transition:transform 0.2s ease;padding:0 2px;}
  .biome-group.open .biome-caret{transform:rotate(90deg);}
  .biome-count.some{color:#2f9e57;font-weight:700;}
  /* seen-state dots */
  .seen-dot{width:11px;height:11px;min-width:11px;border-radius:50%;border:1.5px solid #cbbda2;background:#fff;}
  .seen-dot.full{background:var(--green);border-color:var(--green);}
  .seen-dot.partial{border-color:var(--green);background:conic-gradient(var(--green) 0 50%, #fff 50% 100%);}
  /* subtype list */
  .biome-desc{display:none;padding:0 10px 8px 46px;font-size:11.5px;line-height:1.5;color:#7a6f5c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .biome-group.open .biome-desc{display:block;}
  .subtype-list{display:none;padding:2px 0 8px 30px;}
  .biome-group.open .subtype-list{display:block;}
  .subtype-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .subtype-row:hover{background:var(--paper-2);}
  .subtype-row.active-sub{background:var(--paper-2);box-shadow:inset 2px 0 0 var(--accent);}
  .subtype-name{flex:1;font-size:12px;color:#4a4335;line-height:1.3;}
  .count-pill{font-size:10.5px;color:#9a8c72;}
  .count-pill.some{color:#2f9e57;font-weight:700;}
  #sidebar-footer{padding:12px 20px 16px;border-top:1px solid var(--line);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11.5px;color:#6b6151;}
  #progress-row{margin-bottom:6px;}
  #progress-row b{color:var(--ink);}
  #progress-bar-track{width:100%;height:6px;border-radius:4px;background:var(--paper-2);overflow:hidden;margin-bottom:10px;}
  #progress-bar-fill{height:100%;width:0%;background:var(--green);border-radius:4px;transition:width 0.3s ease;}
  #footer-links{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a3947a;}
  #footer-links label{display:flex;align-items:center;gap:5px;cursor:pointer;}
  #footer-links a{color:var(--accent);text-decoration:none;cursor:pointer;}
  #footer-links a:hover{text-decoration:underline;}

  /* Map */
  #map{flex:1;height:100%;background:#aecbda;}

  /* Region shapes - soft, organic */
  .region-shape{transition:fill-opacity 0.5s ease, stroke-opacity 0.5s ease;}
  .leaflet-overlay-pane path.region-shape{stroke-linejoin:round;stroke-linecap:round;}

  /* Region labels — stretched across their area, revealed per-zoom */
  .region-label{background:none !important;border:none !important;box-shadow:none;pointer-events:none;}
  .region-label span{
    position:absolute;transform:translate(-50%,-50%);display:inline-block;
    font-family:'Georgia',serif;font-size:12px;font-weight:700;
    color:#43391f;text-shadow:0 0 4px #faf6ee,0 0 7px #faf6ee,0 0 10px #faf6ee, 0 1px 1px rgba(255,255,255,0.9);
    white-space:nowrap;text-transform:uppercase;opacity:0.9;
    transition:opacity 0.5s ease, letter-spacing 0.25s ease;
  }
  .region-label.lbl-hidden span{opacity:0;}

  /* Markers */
  .marker-icon{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.35);font-size:15px;transition:transform 0.25s ease;}
  .leaflet-marker-icon .marker-icon{transform:scale(1);}
  .leaflet-marker-icon.z-hidden{opacity:0;pointer-events:none;transition:opacity 0.4s ease;}
  .leaflet-marker-icon:not(.z-hidden){opacity:1;transition:opacity 0.4s ease;}
  .leaflet-marker-icon.z-hidden .marker-icon{transform:scale(0.35);}
  .marker-icon:hover{transform:scale(1.2);}
  .marker-icon.seen{box-shadow:0 0 0 3px var(--green),0 2px 6px rgba(0,0,0,0.35);}
  .seen-badge{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--green);color:#fff;font-size:9px;font-weight:bold;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;}
  .star-badge{position:absolute;top:-6px;left:-6px;width:14px;height:14px;border-radius:50%;background:#f5b301;color:#fff;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;}
  .wish-badge{position:absolute;bottom:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:#e8558a;color:#fff;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;}
  /* cluster bubbles — hint that there's more to explore before zooming in */
  .cluster-icon{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;border:2px solid rgba(255,255,255,0.9);box-shadow:0 2px 7px rgba(0,0,0,0.3);opacity:0.9;cursor:pointer;transition:transform 0.15s ease, opacity 0.15s ease;}
  .cluster-icon:hover{transform:scale(1.12);opacity:1;}
  .cluster-icon span{text-shadow:0 1px 2px rgba(0,0,0,0.35);}
  /* highlight ring for the place currently open in the detail panel */
  .detail-hl{background:none !important;border:none !important;}
  .hl-ring{position:absolute;left:0;top:0;border-radius:50%;border:3px solid var(--accent);transform:translate(-50%,-50%);animation:hlpulse 1.7s ease-out infinite;pointer-events:none;}
  @keyframes hlpulse{0%{width:14px;height:14px;opacity:0.95;}70%{opacity:0.15;}100%{width:56px;height:56px;opacity:0;}}

  /* Place labels (appear when zoomed in) */
  .place-label{background:none !important;border:none !important;box-shadow:none !important;pointer-events:none;margin-top:2px !important;}
  .place-label::before{display:none !important;}
  .place-label span{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:10.5px;font-weight:600;color:#3a342a;background:rgba(250,246,238,0.82);padding:1px 5px;border-radius:5px;white-space:nowrap;opacity:0;transition:opacity 0.3s ease;}
  body.show-place-labels .place-label span{opacity:1;}
  /* featured place names appear earlier, with a warm tint */
  .place-label.featured span{color:#6b4d00;background:rgba(255,244,214,0.9);}
  body.show-featured-labels .place-label.featured span{opacity:1;}

  /* Popups */
  .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--shadow);}
  .leaflet-popup-content{margin:0;width:288px !important;}
  .popup-card{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .popup-hero{position:relative;border-radius:14px 14px 0 0;overflow:hidden;min-height:120px;display:flex;}
  .hero-art{position:absolute;inset:0;transition:opacity 0.5s ease;}
  .hero-art svg{display:block;width:100%;height:100%;}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.6s ease;}
  .popup-card.has-photo .hero-photo{opacity:1;}
  .popup-card.has-photo .hero-art{opacity:0;}
  .hero-attr{position:absolute;bottom:5px;right:8px;font-size:9.5px;color:rgba(255,255,255,0.9);text-shadow:0 1px 2px rgba(0,0,0,0.6);text-decoration:none;opacity:0;transition:opacity 0.4s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:2;}
  .popup-card.has-photo .hero-attr{opacity:0.85;}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,10,0.62),rgba(18,14,10,0.12) 55%,rgba(18,14,10,0.02));}
  .hero-text{position:relative;margin-top:auto;padding:12px 16px 11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.55);width:100%;}
  .popup-biome-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.8px;font-weight:600;opacity:0.95;}
  .popup-title{font-family:'Georgia',serif;font-size:18px;font-weight:700;margin:2px 0 0;color:#fff;}
  .popup-subtype{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.26);padding:2px 9px;border-radius:20px;}
  .popup-body{padding:12px 16px 16px;background:#fff;border-radius:0 0 14px 14px;}
  .popup-desc-sm{font-size:13px;line-height:1.55;color:#3a342a;margin-bottom:12px;}
  .explore-btn{width:100%;padding:10px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0.2px;}
  .explore-btn:hover{background:#b45f2e;}
  .popup-links{display:flex;gap:8px;margin-top:11px;}
  .pill{flex:1;text-align:center;padding:8px;border-radius:8px;background:var(--paper-2);color:#8a7d64;font-weight:600;font-size:11.5px;text-decoration:none;}
  .pill:hover{background:#eaddc2;color:var(--accent);}

  /* ---------- Detail panel (big overview) ---------- */
  #detail-overlay{position:fixed;inset:0;background:rgba(20,15,10,0.28);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1500;}
  #detail-overlay.show{opacity:1;pointer-events:auto;}
  #detail{position:fixed;top:0;right:0;height:100%;width:430px;max-width:92vw;background:var(--paper);box-shadow:-10px 0 40px rgba(40,30,15,0.22);transform:translateX(102%);transition:transform 0.34s cubic-bezier(.4,.0,.2,1);z-index:1600;display:flex;flex-direction:column;}
  #detail.open{transform:translateX(0);}
  #detail-close{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,0.4);color:#fff;font-size:15px;cursor:pointer;backdrop-filter:blur(3px);}
  #detail-close:hover{background:rgba(0,0,0,0.6);}
  #detail-content{overflow-y:auto;height:100%;scroll-behavior:smooth;}
  .d-hero{position:relative;height:230px;overflow:hidden;}
  .d-hero-art{position:absolute;inset:0;transition:opacity 0.5s ease;}
  .d-hero-art svg{width:100%;height:100%;display:block;}
  .d-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.6s ease;}
  .d-hero.has-photo .d-hero-photo{opacity:1;}
  .d-hero.has-photo .d-hero-art{opacity:0;}
  .d-hero.has-photo .hero-attr{opacity:0.85;}
  .d-hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,10,0.72),rgba(18,14,10,0.05) 60%);}
  .d-hero-text{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
  .d-biome{font-size:11px;text-transform:uppercase;letter-spacing:0.8px;font-weight:600;opacity:0.95;}
  .d-hero-text h2{font-family:'Georgia',serif;font-size:24px;margin:3px 0 0;line-height:1.15;}
  .d-body{padding:16px 18px 30px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .d-loc{font-size:12.5px;color:#8c7f68;margin-bottom:10px;}
  .d-desc{font-size:14px;line-height:1.6;color:#2f2a22;margin:0 0 4px;}
  .d-sect{margin-top:16px;}
  .d-sect h3{font-size:11px;text-transform:uppercase;letter-spacing:0.8px;color:#a3947a;margin:0 0 5px;font-weight:700;}
  .d-sect p{font-size:13.5px;line-height:1.55;color:#3a342a;margin:0;}
  .d-season{font-weight:600;color:#2f2a22;margin-bottom:8px !important;}
  /* climate chart */
  .climate{margin-top:8px;}
  .cbars{display:flex;align-items:flex-end;gap:3px;height:96px;padding:2px 0;}
  .cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:default;}
  .cbar-t{font-size:8.5px;color:#8c7f68;margin-bottom:2px;}
  .cbar-track{width:100%;height:100%;display:flex;align-items:flex-end;}
  .cbar-fill{width:100%;border-radius:3px 3px 0 0;transition:height 0.3s ease;}
  .cbar-m{font-size:9px;color:#9a8c72;margin-top:3px;}
  .cnote{font-size:10.5px;color:#9a8c72;margin-top:7px;line-height:1.4;}
  /* soundscape */
  .d-sound{display:flex;align-items:center;gap:10px;}
  .d-sound-btn{flex:1;padding:10px;border-radius:8px;border:1.5px solid #3f8ec9;background:#eef5fb;color:#2c6ea3;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;}
  .d-sound-btn:hover{background:#e2eef9;}
  .d-sound-btn.on{background:#2e86c1;border-color:#2e86c1;color:#fff;}
  .d-credit{font-size:10px;color:#a3947a;text-decoration:none;white-space:nowrap;}
  .d-credit:hover{color:var(--accent);}
  /* gallery */
  .d-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
  .d-gallery a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:7px;}
  .d-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 0.25s ease;}
  .d-gallery a:hover img{transform:scale(1.08);}
  /* collectible stat bar */
  .d-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 12px;}
  .stars{font-size:15px;color:#f5b301;letter-spacing:1px;}
  .stars .star-off{color:#e0d4bd;}
  .d-chip{font-size:11.5px;font-weight:600;color:#5c5340;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;}
  /* known-for checklist */
  .d-checks{list-style:none;margin:0;padding:0;}
  .d-checks li{position:relative;padding:2px 0 2px 22px;font-size:13.5px;line-height:1.5;color:#2f2a22;}
  .d-checks li::before{content:'✓';position:absolute;left:0;top:1px;color:#3fae6b;font-weight:800;}
  /* animals */
  .d-animals{display:flex;flex-wrap:wrap;gap:6px;}
  .d-animal{font-size:12.5px;font-weight:600;color:#4a4335;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;cursor:pointer;font-family:inherit;}
  .d-animal:hover{border-color:var(--accent);color:var(--accent);background:#fff;}
  .d-animals-note{font-size:12px;color:#8c7f68;margin-top:7px !important;line-height:1.5;}
  .d-hint{font-size:9.5px;color:#c0b298;text-transform:none;letter-spacing:0;font-weight:500;}
  .d-check-link{background:none;border:none;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-align:left;}
  .d-check-link:hover{text-decoration:underline;}
  /* active animal filter banner */
  #active-filter{margin:0 20px 10px;padding:8px 12px;background:#2b2620;color:#fff;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  #active-filter b{color:#ffd76a;}
  #active-filter .af-clear{background:rgba(255,255,255,0.18);border:none;color:#fff;border-radius:50%;width:20px;height:20px;line-height:1;cursor:pointer;flex-shrink:0;font-size:11px;}
  #active-filter .af-clear:hover{background:rgba(255,255,255,0.32);}
  /* nearby */
  .d-nearby{display:flex;flex-wrap:wrap;gap:6px;}
  .d-near{font-size:12.5px;font-weight:600;color:var(--accent);background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;font-family:inherit;}
  .d-near:hover{border-color:var(--accent);background:var(--paper-2);}
  .d-near span{color:#a3947a;font-weight:500;font-size:11px;margin-left:3px;}
  .d-real{font-size:9.5px;color:#3fae6b;text-transform:none;letter-spacing:0;font-weight:600;}
  @media (max-width:760px){ #detail{width:100%;max-width:100%;} }
  .popup-actions{display:flex;gap:8px;margin-top:12px;}
  .popup-actions button{flex:1;padding:9px;border-radius:8px;border:1.5px solid;background:#fff;font-weight:600;font-size:12px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .popup-actions button:hover{opacity:0.85;}
  .seen-toggle{border-color:var(--green);color:#2f9e57;}
  .seen-toggle.is-seen{background:var(--green);border-color:var(--green);color:#fff;}
  .wish-toggle{border-color:#e8558a;color:#e8558a;}
  .wish-toggle.is-wish{background:#e8558a;border-color:#e8558a;color:#fff;}

  .region-tooltip{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11.5px;background:rgba(43,38,32,0.92) !important;color:#fff;border:none !important;box-shadow:none;padding:4px 9px;border-radius:6px;}
  .region-tooltip::before{display:none;}
  .leaflet-control-attribution{font-size:10px;}

  @media (max-width:760px){
    #app{flex-direction:column;}
    #sidebar{width:100%;min-width:0;height:46%;position:absolute;bottom:0;left:0;border-right:none;border-top:1px solid var(--line);}
    #map{height:100%;}
  }
  /* ---------- badges: categories, experiences, badge detail ---------- */
  .badge-cat-label{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:#b0a488;font-weight:700;margin:10px 4px 2px;}
  .badge-row{cursor:pointer;transition:background 0.12s ease;}
  .badge-row:hover{background:var(--paper-2);}
  .badge-row.is-hidden .badge-ico{filter:none;opacity:0.7;}
  .exp-chip{display:inline-flex;align-items:center;gap:3px;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:6px 11px;margin:0 6px 6px 0;font-size:12px;color:#6b6151;cursor:pointer;font-family:inherit;transition:all 0.12s ease;}
  .exp-chip:hover{border-color:var(--accent);}
  .exp-chip.on{background:#eaf5e6;border-color:var(--green);color:#2f6b34;font-weight:600;}
  .d-exp{margin-top:4px;}
  .d-exp-note{font-size:12px;color:#8c7f68;line-height:1.5;margin:0 0 8px;}
  .d-exp-hint h3,.d-exp-hint{opacity:0.9;}
  .bshelf-cat{margin-bottom:12px;}
  .bshelf-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#7a6f5c;margin:0 0 5px;}
  .bshelf-n{margin-left:auto;background:var(--paper-2);border-radius:10px;padding:1px 8px;font-size:10px;color:#8a7d64;}
  .bt.hidden-badge .bt-e{filter:grayscale(1) opacity(0.55);}
  .bt.hidden-badge .bt-n,.bt.hidden-badge .bt-p{color:#b0a488;}
  /* badge detail */
  .badge-detail-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 12px 16px;background:linear-gradient(160deg,var(--paper-2),#fff);border-radius:14px;border:1px solid var(--line);margin-top:4px;}
  .badge-detail-hero.earned{background:linear-gradient(160deg,#fdf4e3,#fff);border-color:#e7cf9f;}
  .badge-detail-hero.locked{filter:grayscale(0.4);}
  .bd-emoji{font-size:52px;line-height:1;margin-bottom:8px;}
  .badge-detail-hero.locked .bd-emoji{opacity:0.6;}
  .bd-title{font-family:'Georgia',serif;font-size:22px;color:var(--ink);font-weight:700;}
  .bd-cat{font-size:11px;text-transform:uppercase;letter-spacing:0.8px;color:#a3947a;font-weight:700;margin-top:3px;}
  .bd-how{font-size:13.5px;color:#3a342a;line-height:1.55;text-align:center;margin:14px 4px 6px;}
  .bd-tiers{display:flex;gap:8px;justify-content:center;margin:10px 0 2px;}
  .bd-tier{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px 4px;opacity:0.5;}
  .bd-tier.got{opacity:1;background:#fff;border-color:#e7cf9f;}
  .bd-medal{font-size:22px;filter:grayscale(1);}
  .bd-tier.got .bd-medal{filter:none;}
  .bd-th{font-size:11px;font-weight:700;color:#7a6f5c;}
  .bd-progress{margin:14px 0 4px;}
  .bd-track{height:8px;border-radius:5px;background:var(--paper-2);overflow:hidden;}
  .bd-fill{height:100%;background:var(--green);border-radius:5px;transition:width 0.5s ease;}
  .bd-prog-label{font-size:11.5px;color:#7a6f5c;font-weight:600;text-align:center;margin-top:6px;}
  .bd-places{display:flex;flex-direction:column;gap:5px;margin-top:6px;}
  .bd-place{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color 0.12s ease;}
  .bd-place:hover{border-color:var(--accent);}
  .bd-place.done{background:#f3faf0;border-color:#cfe6c5;}
  .bd-place-dot{color:#c2b79e;font-weight:700;flex-shrink:0;}
  .bd-place.done .bd-place-dot{color:var(--green);}
  .bd-place-name{font-size:12.5px;font-weight:600;color:#2f2a22;flex-shrink:0;}
  .bd-place-near{font-size:11px;color:#a3947a;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bd-more{text-align:center;font-size:11px;color:#a3947a;margin-top:8px;}
  .bd-back{background:none;border:none;color:var(--accent);font-weight:700;font-size:12.5px;cursor:pointer;padding:2px 0 10px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .bd-back:hover{text-decoration:underline;}
  .bd-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.6px;color:#a3947a;font-weight:700;margin:12px 0 5px;}
  .bd-group-label.bd-gl-done{color:var(--green);}

/* ---------- Account & auth ---------- */
#account{margin-top:9px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.acct-off{color:#a3947a;}
.acct-user{color:#5c5340;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.acct-btn{border:1px solid var(--line);background:#fff;color:#7a6f5c;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;}
.acct-btn:hover{border-color:var(--accent);color:var(--accent);}
.acct-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.acct-btn.primary:hover{background:#b45f2e;color:#fff;}
.acct-google{display:inline-flex;align-items:center;gap:6px;}
.acct-google .g-mark{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:#fff;color:#4285F4;border-radius:50%;font-weight:800;font-size:11px;font-family:Arial,sans-serif;}
.modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(20,15,10,0.45);}
.modal-card{position:relative;background:var(--paper);width:352px;max-width:92vw;border-radius:16px;padding:24px 22px 22px;box-shadow:0 20px 60px rgba(30,20,10,0.35);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.modal-card h2{margin:0 0 4px;font-family:'Georgia',serif;font-size:20px;color:var(--ink);}
.modal-sub{margin:0 0 16px;font-size:12.5px;color:#7a6f5c;line-height:1.5;}
.modal-card input{width:100%;padding:11px 12px;margin-bottom:10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;}
.modal-card input:focus{border-color:var(--accent);}
.auth-submit{width:100%;padding:11px;border:none;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
.auth-submit:hover{background:#b45f2e;}
.auth-submit:disabled{opacity:0.6;cursor:default;}
.auth-error{color:#c0392b;font-size:12px;min-height:16px;margin-bottom:6px;}
.auth-switch{margin-top:14px;font-size:12px;color:#7a6f5c;text-align:center;}
.auth-switch a{color:var(--accent);text-decoration:none;font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}
.modal-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;background:var(--paper-2);border-radius:50%;color:#7a6f5c;cursor:pointer;font-size:12px;}
.modal-close:hover{background:#eaddc2;}