:root{
  --paper:#fff9b0;
  --ink:#101010;
  --comic-red:#f44336;
  --comic-blue:rgba(129, 207, 255, 0.62);
  --panel:#fff7d2ee;
  --shadow:0 10px 28px rgba(0,0,0,.18);
  --outline:#111;
}
html, body, #app, #map { height: 100%; margin: 0; }
body{
  font-family: "Comic Neue", system-ui, sans-serif;
  color: var(--ink);
  background:#f3f3f3;
  overflow:hidden;
}
#map{
  position:absolute;
  inset:0;
  z-index:1;
}
#veil{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.60);
  z-index:350;
  pointer-events:none;
}
.map-title-wrap{
  position:absolute;
  top:14px;
  left:18px;
  z-index:500;
  pointer-events:none;
  max-width:min(42vw, 420px);
}
.map-title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.05em;
  line-height:.84;
  text-transform:uppercase;
  font-family:"Bangers","Luckiest Guy",cursive;
  font-size:clamp(2.3rem, 6vw, 4.8rem);
  letter-spacing:.04em;
}
.map-title span{
  display:block;
  color:#ffde59;
  -webkit-text-stroke: 2px #0b0b0b;
  text-shadow:
    0 1px 0 #fff,
    2px 2px 0 #111,
    5px 5px 0 rgba(255, 70, 70, .85),
    8px 8px 18px rgba(0,0,0,.22);
  transform:skew(-8deg) rotate(-2deg);
}
.subtitle-box{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:500;
  max-width:min(29vw, 360px);
  padding:10px 12px;
  font-family:"Comic Neue",sans-serif;
  font-weight:700;
  font-size:clamp(.85rem, 1.2vw, 1rem);
  line-height:1.2;
  background:rgba(255,255,255,.86);
  border:2px solid #111;
  border-radius:14px;
  box-shadow:var(--shadow);
}
.ui-corner{
  position:absolute;
  z-index:550;
  display:flex;
  gap:8px;
}
.top-right{ top:18px; right:18px; }
.bottom-left{ left:18px; bottom:18px; }
.comic-btn{
  appearance:none;
  border:2px solid #111;
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:8px 14px;
  font-family:"Comic Neue",sans-serif;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 0 #111;
  transform:translateY(0);
}
.comic-btn:hover{ background:#fff8c8; }
.comic-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #111; }
.comic-btn.small{ padding:7px 11px; font-size:.95rem; }
.comic-btn.ghost{ background:#fffdf1; }

.panel{
  position:absolute;
  top:64px;
  right:18px;
  z-index:560;
  width:min(290px, calc(100vw - 36px));
  background:var(--panel);
  backdrop-filter: blur(4px);
  border:2px solid #111;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px 12px 14px;
  transform-origin: top right;
  transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
}
.panel.closed{
  opacity:0;
  transform:scale(.97) translateY(-6px);
  visibility:hidden;
  pointer-events:none;
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.panel-header h2{
  margin:0;
  font-family:"Bangers",cursive;
  font-size:1.5rem;
  letter-spacing:.03em;
}
.panel-close{
  border:none;
  background:transparent;
  font-size:1.65rem;
  line-height:1;
  cursor:pointer;
}
.panel-section{
  margin:10px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.panel-section label, .section-label{
  font-weight:700;
}
.panel-section input[type="date"]{
  border:2px solid #111;
  border-radius:10px;
  padding:8px;
  font:inherit;
  background:#fffef4;
}
.absurdity-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:8px;
}
.absurdity-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 4px;
  border:2px solid #111;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.absurdity-chip input{ display:none; }
.absurdity-chip.active{ background:#ffe26b; }
.absurdity-chip .num{
  font-family:"Bangers",cursive;
  font-size:1.25rem;
  line-height:1;
}
.absurdity-chip .lab{
  font-size:.72rem;
  text-align:center;
}
.panel-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}

.legend{
  width:170px;
  background:rgba(255,255,255,.92);
  border:2px solid #111;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.legend-toggle{
  width:100%;
  text-align:left;
  font-family:"Comic Neue",sans-serif;
  font-weight:700;
  padding:8px 12px;
  background:#fff;
  border:none;
  cursor:pointer;
}
.legend-body{ padding:0 12px 10px; }
.legend.collapsed .legend-body{ display:none; }
.legend-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:.9rem;
}
.legend-row.note{
  display:block;
  font-size:.78rem;
  color:#333;
  line-height:1.2;
}
.legend-swatch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
}
.legend-swatch.bubble{
  background:url('icon.svg') center/contain no-repeat;
}
.legend-swatch.cluster{
  border-radius:50%;
  background:#ffe45c;
  border:2px solid #111;
  position:relative;
}
.legend-swatch.cluster::after{
  content:"3";
  font-weight:700;
  font-size:.8rem;
}

.loading-state{
  position:absolute;
  inset:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.35);
}
.loading-state.hidden{ display:none; }
.loading-card{
  background:#fff8c8;
  border:2px solid #111;
  border-radius:18px;
  padding:16px 20px;
  font-family:"Permanent Marker",cursive;
  box-shadow:var(--shadow);
}

.bubble-marker{
  position:relative;
  width:100%;
  height:100%;
  transition:filter .12s ease, transform .12s ease;
}
.bubble-marker img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.bubble-marker.active::before,
.bubble-marker:hover::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background:var(--comic-blue);
  box-shadow:0 0 0 2px rgba(129,207,255,.18);
  z-index:-1;
}
.bubble-marker.active,
.bubble-marker:hover{
  transform:translateY(-1px);
}
.bubble-icon{
  background:transparent;
  border:none;
}
.cluster-bubble{
  width:100%;
  height:100%;
  position:relative;
  background:url('icon.svg') center/contain no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cluster-bubble .count{
  position:absolute;
  top:46%;
  left:52%;
  transform:translate(-50%,-50%);
  font-family:"Bangers",cursive;
  color:hsl(4, 90%, 58%);
  font-size:2.3rem;
  text-shadow:0 2px 0 #fff;
}
.cluster-icon{
  background:transparent;
  border:none;
}

.note-tooltip.leaflet-tooltip{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.note-card{
  position:relative;
  min-width:180px;
  max-width:280px;
  background:var(--paper);
  color:#000;
  border:2px solid #111;
  box-shadow:var(--shadow);
  border-radius:6px;
  padding:10px 12px 8px;
  transform:rotate(-1.2deg);
  text-align:left;
  word-wrap: break-word;       /* Legacy support */
  overflow-wrap: break-word;  /* Modern standard */
  white-space: normal;        /* Ensures text doesn't stay on one line */
}
.note-card::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:-11px;
  bottom:16px;
  background:var(--paper);
  border-left:2px solid #111;
  border-bottom:2px solid #111;
  transform:rotate(45deg);
}
.note-quote{
  font-family:"Permanent Marker",cursive;
  font-size:1rem;
  line-height:1.28;
  color: #000;
}
.note-date{
  margin-top:8px;
  font-size:.92rem;
  font-weight:300;
  letter-spacing:.02em;
  font-family:"Permanent Marker",cursive;
  color:rgba(255, 70, 70, 1);

}
.note-place{
  margin-top:4px;
  font-size:.73rem;
  opacity:.82;
}

.modal.hidden{ display:none; }
.modal{
  position:absolute;
  inset:0;
  z-index:900;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.36);
}
.modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(620px, calc(100vw - 32px));
  max-height:min(80vh, 700px);
  overflow:auto;
  background:#fffbe8;
  border:2px solid #111;
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px 20px 18px;
}
.modal-content h2{
  margin:0 0 12px 0;
  font-family:"Bangers",cursive;
  font-size:2rem;
}
.modal-close{ position:absolute; top:12px; right:12px; }
.sources-list{
  margin:0;
  padding-left:20px;
  line-height:1.4;
}
.sources-list li{ margin-bottom:9px; }

.leaflet-control-attribution{
  font-size:.72rem;
  z-index:450 !important;
}
.leaflet-pane, .leaflet-top, .leaflet-bottom{ z-index: 200; }
.leaflet-tooltip-pane{ z-index: 430; }
.leaflet-popup-pane{ z-index: 420; }

@media (max-width: 860px){
  .map-title-wrap{ max-width:68vw; }
  .subtitle-box{
    right:16px;
    left:auto;
    bottom:72px;
    max-width:45vw;
  }
}
@media (max-width: 680px){
  .top-right{ top:auto; bottom:18px; right:18px; }
  .panel{ top:auto; bottom:72px; }
  .subtitle-box{
    max-width:52vw;
    font-size:.8rem;
  }
  .map-title{ font-size:clamp(2rem, 10vw, 3.4rem); }
}