:root{
  --bg:#dceef8;
  --paper:#f9f3df;
  --ink:#3d2b1f;
  --gold:#f4c542;
  --gold2:#ffef8a;
  --shadow:0 12px 30px rgba(120,90,0,.28);
  --panel:rgba(255,250,235,.94);
}
html,body,#app,#map{height:100%;margin:0}
body{
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.5), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.35), transparent 20%),
    repeating-linear-gradient(0deg, rgba(90,70,40,.03), rgba(90,70,40,.03) 2px, transparent 2px, transparent 6px),
    linear-gradient(180deg, #e8f7ff 0%, #d9eef9 100%);
  color:var(--ink);
  overflow:hidden;
}
#app{position:relative}
#map{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 52%),
    repeating-linear-gradient(60deg, rgba(108,87,47,.045), rgba(108,87,47,.045) 2px, transparent 2px, transparent 10px),
    repeating-linear-gradient(-40deg, rgba(108,87,47,.035), rgba(108,87,47,.035) 1px, transparent 1px, transparent 9px),
    linear-gradient(180deg, #eaf8ff, #dcedfb);
}
.title-wrap{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:1000; text-align:center; pointer-events:none;
  width:min(980px, calc(100% - 40px));
}
.eyebrow{
  font-family:"DM Serif Display", serif;
  font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  color:#62461f; text-shadow:0 1px 0 #fff6d4;
}
h1{
  margin:.2rem 0 0;
  font-family:"Abril Fatface", serif;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:.92;
  color:#7a220f;
  text-shadow:0 2px 0 #fff7cf, 0 0 12px rgba(255,218,77,.35);
}
h1 span{display:block}
.right-stack{
  position:absolute; right:14px; top:108px; z-index:1001;
  width:260px; display:flex; flex-direction:column; gap:12px;
}
.panel{
  position:relative; background:var(--panel); backdrop-filter: blur(4px);
  border:2px solid rgba(132,94,32,.22); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-toggle{
  width:100%; text-align:left; border:none; cursor:pointer;
  background:linear-gradient(180deg, #ffefbb, #f4d66d);
  padding:12px 14px; font:700 16px Inter, sans-serif; color:#5d3a00;
}
.panel-body{padding:12px 14px 14px; transition:max-height .25s ease, opacity .2s ease; max-height:340px; opacity:1}
.panel-body.collapsed{max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0}
.legend-item{display:flex; align-items:center; gap:10px; margin:7px 0}
.swatch{width:18px; height:18px; border-radius:50%; border:2px solid rgba(60,40,10,.22); flex:none}
.filter-panel label{display:block; font-weight:700; margin:.2rem 0 .55rem}
.hint{margin:.4rem 0 0; font-size:12px; color:#6a5a43; line-height:1.35}
.signature-wrap{
  position:absolute; left:71%; top:68%; z-index:1000; pointer-events:none;
  transform:rotate(-45deg); transform-origin:center center;
}
.signature{
  font-family:"Caveat", cursive; font-size:52px; color:rgba(90,60,25,.65);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.signature-date{
  font-family:"Caveat", cursive; font-size:28px; color:rgba(90,60,25,.58);
  margin-top:-10px; margin-left:90px;
}
.leaflet-container{font:inherit}
.country-tooltip,
.meridian-tooltip{
  background:rgba(255,251,235,.95);
  border:1px solid rgba(100,74,21,.25);
  color:#4b371b;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  border-radius:8px;
}
.meridian-tooltip{
  font-family:"DM Serif Display", serif;
  font-size:16px;
  color:rgba(162,118,0,.95);
  box-shadow:0 0 10px rgba(255,215,0,.18);
}
.leaflet-tooltip-top.meridian-tooltip:before,
.leaflet-tooltip-bottom.meridian-tooltip:before,
.leaflet-tooltip-left.meridian-tooltip:before,
.leaflet-tooltip-right.meridian-tooltip:before{display:none}
.leaflet-popup-content-wrapper{
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,245,200,.97) 38%, rgba(255,231,131,.92) 58%, rgba(255,253,233,.96));
  border:2px solid rgba(207,154,30,.45);
  box-shadow:0 0 0 1px rgba(255,235,160,.7) inset, 0 12px 24px rgba(183,137,0,.28), 0 0 22px rgba(255,215,0,.22);
  border-radius:16px;
}
.leaflet-popup-tip{
  background:rgba(255,244,196,.96);
  box-shadow:0 6px 10px rgba(183,137,0,.16);
}
.popup h3{
  margin:.1rem 0 .25rem;
  font:700 24px "Abril Fatface", serif;
  line-height:1.05;
  color:#842d0d;
  text-shadow:0 1px 0 #fff8d9;
}
.popup .pre{font-size:13px; font-weight:700; color:#5d4630}
.popup .blimpinent{font-size:12px; margin-top:4px; color:#6b5331}
.popup .tag{
  display:inline-block; margin-top:8px; padding:3px 8px;
  border-radius:999px; background:rgba(132,94,0,.12); font-size:11px; font-weight:700;
}
.popup .cta{margin-top:10px; font-size:12px; font-weight:700}
.popup .cta a{color:#8b1e09; text-decoration:underline}
.popup .limited{
  margin-top:8px; font-size:11px; color:#8a5b00; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase;
}
.usa-shine{
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55)) drop-shadow(0 0 14px rgba(205,30,45,.20));
}
.star-marker{
  color:#ffd84d; font-size:28px;
  text-shadow:0 0 6px #fff7b3, 0 0 18px rgba(255,215,0,.85);
}
@media (max-width: 900px){
  .right-stack{top:118px; width:min(250px, calc(100% - 18px)); right:9px}
  .signature-wrap{left:63%; top:74%}
}
@media (max-width: 700px){
  .eyebrow{font-size:12px}
  h1{font-size:clamp(1.55rem, 7.5vw, 2.35rem)}
  .right-stack{top:102px}
  .signature-wrap{left:54%; top:76%}
}
#orientationGuard{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items:center; justify-content:center;
  background:rgba(244,248,252,.92);
}
.guard-card{
  width:min(340px, calc(100vw - 32px));
  background:rgba(255,250,235,.97);
  border:2px solid rgba(132,94,32,.22);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px 20px;
  text-align:center;
}
.guard-title{
  font:700 1.25rem "Abril Fatface", serif;
  color:#7a220f; margin-bottom:8px;
}
.guard-text{font-size:14px; line-height:1.4; color:#5f4a2d}
@media (max-width: 900px) and (orientation: portrait){
  #orientationGuard{display:flex}
}

/* Remove browser focus rectangle from clicked Leaflet country paths */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible,
path.leaflet-interactive:focus,
path.leaflet-interactive:focus-visible {
  outline: none !important;
}

/* Optional extra hardening for some browsers */
svg path:focus,
svg path:focus-visible {
  outline: none !important;
}