:root{
  --banana-yellow:#f6da68;
  --banana-light:#fbf3c4;
  --banana-green:#4f7f2d;
  --banana-dark:#21451a;
  --banana-brown:#876342;
  --banana-cream:#fff9de;
  --warning-red:#8d1f15;
  --panel-bg:rgba(255,250,233,.94);
  --modal-bg:#fff8de;
  --shadow:0 10px 28px rgba(28, 35, 15, 0.18);
  --border:rgba(79,127,45,.25);
  --text:#23311c;
  --muted:#54624d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:linear-gradient(180deg,#fffdf1 0%, #f7f2d9 100%);
  color:var(--text);
  overflow:hidden;
}
a{color:#2b5d1e}
#app{height:100%;display:flex;flex-direction:column}
#masthead{
  position:relative;
  z-index:60;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px 10px 18px;
}
.headline-wrap h1{
  margin:0;
  font-size:clamp(1.5rem, 2.8vw, 2.35rem);
  letter-spacing:.01em;
  line-height:1.05;
}
.subtitle{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:clamp(.9rem, 1.35vw, 1.08rem);
}
.top-controls{
  z-index:61;
  display:flex;
  align-items:flex-start;
  gap:10px;
  position:relative;
}
.icon-button{
  width:42px;height:42px;border-radius:999px;border:1px solid var(--border);
  background:var(--panel-bg); box-shadow:var(--shadow); color:var(--banana-dark);
  cursor:pointer; display:grid; place-items:center; font-weight:700; font-size:1.1rem;
}
.icon-button:hover{transform:translateY(-1px)}
.hamburger-wrap{position:relative}
#hamburgerButton{
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
#hamburgerButton span{
  display:block; width:16px; height:2px; background:var(--banana-dark); margin:0; border-radius:99px;
}
.dropdown-panel{
  position:absolute; z-index:62; top:50px; right:0; min-width:190px; padding:8px;
  background:var(--panel-bg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.hidden{display:none !important}
.menu-item{
  width:100%; text-align:left; border:none; background:transparent; border-radius:10px;
  padding:10px 12px; color:var(--text); cursor:pointer; font-size:.95rem;
}
.menu-item:hover{background:rgba(246,218,104,.32)}
#mapShell{
  position:relative; flex:1; min-height:0; overflow:hidden;
}
#mapSvg{
  position:absolute; inset:0; width:100%; height:100%;
}
.country{
  cursor:pointer;
  vector-effect:non-scaling-stroke;
  transition:opacity .2s ease, fill .2s ease, stroke .2s ease, filter .2s ease;
}
.country.hovered{
  filter:drop-shadow(0 0 6px rgba(90,90,0,.24));
}
.boundary-outline{
  fill:none; stroke:rgba(123,117,68,.22); stroke-width:.6; vector-effect:non-scaling-stroke; pointer-events:none;
}
.tooltip{
  position:absolute; z-index:25; min-width:260px; max-width:min(360px, 42vw);
  background:var(--banana-yellow); color:var(--banana-dark);
  border:none; border-radius:14px; box-shadow:0 10px 22px rgba(47,72,31,.24);
  padding:12px 14px; pointer-events:none;
}
.tooltip h3{margin:0 0 6px;font-size:1rem}
.tooltip .rank{font-weight:700; margin-bottom:8px}
.tooltip table{
  width:100%; border-collapse:collapse; font-size:.84rem; background:rgba(255,255,255,.32); border-radius:8px; overflow:hidden;
}
.tooltip th,.tooltip td{padding:4px 6px; text-align:left}
.tooltip tr:nth-child(even){background:rgba(255,255,255,.18)}
.tooltip .warning{
  margin-top:8px; color:var(--warning-red); font-weight:700; line-height:1.35;
}
.tooltip .small-note{font-size:.74rem; font-weight:500}
.panel{
  position:absolute; z-index:26; background:var(--panel-bg); backdrop-filter:blur(7px);
  border:1px solid var(--border); box-shadow:var(--shadow);
  border-radius:16px; overflow:hidden;
}
.legend-panel{
  left:16px; bottom:42px; width:min(340px, calc(100vw - 32px));
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px;
  border-bottom:1px solid rgba(79,127,45,.14)
}
.panel-header h2{margin:0; font-size:1rem}
.panel-toggle{
  border:none; background:rgba(246,218,104,.32); color:var(--banana-dark); width:30px; height:30px;
  border-radius:10px; cursor:pointer; font-size:1rem; font-weight:700;
}
.panel-content{padding:12px}
.legend-row{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.88rem}
.legend-swatch{width:22px;height:16px;border-radius:4px;border:1px solid rgba(46,57,27,.22); flex:none}
.legend-title{font-weight:700; margin-bottom:10px}
.legend-subtitle{font-size:.8rem; color:var(--muted); margin-bottom:10px}
#footerAttribution{
  position:absolute; z-index:20; right:12px; bottom:10px; font-size:.75rem; color:#5b614c;
  background:rgba(255,252,233,.7); padding:4px 8px; border-radius:999px; border:1px solid rgba(79,127,45,.12)
}
#loadingOverlay,#mobileRotateOverlay{
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(255,252,235,.86); backdrop-filter:blur(5px);
}
.spinner{
  width:38px;height:38px;border-radius:50%; border:4px solid rgba(79,127,45,.16); border-top-color:var(--banana-green);
  animation:spin .95s linear infinite; margin:0 auto 12px;
}
.loading-text{text-align:center; color:var(--banana-dark); font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
.rotate-card{
  background:var(--panel-bg); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:18px;
  padding:20px 24px; max-width:360px; text-align:center;
}
.rotate-icon{font-size:2.2rem; margin-bottom:8px}
.modal-backdrop{
  position:fixed; inset:0; z-index:50; background:rgba(36,42,18,.24);
}
.modal{
  position:absolute; top:76px; right:18px; width:min(420px, calc(100vw - 24px)); max-height:min(76vh, 760px);
  background:var(--modal-bg); color:var(--text); border-radius:10px; box-shadow:var(--shadow);
  border:1px solid rgba(79,127,45,.2); padding:16px 16px 14px;
}
.modal h2{margin:0 0 10px}
.modal-scroll{overflow:auto; max-height:calc(76vh - 60px); padding-right:4px}
.tight-list{margin:.45rem 0 .8rem 1rem; padding:0}
.tight-list li{margin:.2rem 0}
.control-group{margin-bottom:16px}
.control-group label,.control-group h3{display:block; margin-bottom:6px; font-weight:700}
.control-group select, .control-group input[type="range"]{
  width:100%;
}
.control-group select{
  background:#fffdf3; border:1px solid rgba(79,127,45,.25); border-radius:10px; padding:10px 12px; color:var(--text)
}
.slider-label-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#classSliderValue{
  padding:2px 8px; border-radius:999px; background:rgba(246,218,104,.32); font-weight:700;
}
.fineprint{font-size:.78rem; color:var(--muted); margin:.35rem 0 0}
.checkbox-grid{
  display:grid; gap:8px; margin-top:8px
}
.checkbox-item{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.45); border:1px solid rgba(79,127,45,.14);
}
.checkbox-item input{margin-top:2px}
.checkbox-item label{margin:0; font-weight:600}
.checkbox-item .mini{display:block; font-weight:500; color:var(--muted); font-size:.76rem; margin-top:2px}
.made-with{margin-top:1rem; font-weight:700}
.no-data{fill:var(--banana-brown)}
@media (max-width: 860px){
  #masthead{padding:12px 12px 8px}
  .legend-panel{left:12px; bottom:40px; width:min(310px, calc(100vw - 24px))}
  #footerAttribution{right:8px; bottom:8px; max-width:45vw; text-align:right}
}