:root {
  --orange: #ff7a00;
  --magenta: #c425d6;
  --blue: #2417ff;
  --navy: #f5f2ff;
  --ink: #1d1445;
  --ink-2: rgba(29, 20, 69, .66);
  --soft: rgba(80, 50, 170, .07);
  --soft-2: rgba(80, 50, 170, .15);
  --yellow: #ffc21a;
  --glass: rgba(255, 255, 255, .92);
  --line: rgba(80, 50, 170, .16);
  --ml: 'Anek Malayalam', 'Noto Sans Malayalam', system-ui, sans-serif;
  --en: 'Plus Jakarta Sans', system-ui, sans-serif;
  --cut: 16px;
  --panel-w: 420px;
  --gap: 16px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--en), var(--ml); color: var(--ink); background: var(--navy); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- map + theme overlays ---------- */
#map { position: fixed; inset: 0; background: #aad3df; z-index: 0; font-family: var(--en); }
.maplibregl-canvas { outline: none; }
.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; }
.attrib {
  position: fixed; z-index: 9; left: 50%; bottom: 6px; translate: -50% 0; font: 500 10.5px var(--en); color: var(--ink-2);
  padding: 2px 10px; border-radius: 10px; background: rgba(255,255,255,.6); white-space: nowrap;
}
.attrib a { color: inherit; }

/* floating map controls */
.ctl { position: fixed; z-index: 10; left: var(--gap); bottom: 74px; display: flex; flex-direction: column; gap: 8px; }
.ctl button {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font: 800 20px var(--en); color: var(--ink);
  background: var(--glass); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(60,30,140,.18); transition: transform .15s, background .15s;
}
.ctl button:hover { background: #fff; transform: translateY(-1px); }
#c-tilt { font-size: 13px; letter-spacing: .02em; }
#c-tilt.flat { color: var(--ink-2); }
#c-tour { background: linear-gradient(135deg, #ffd23a, #ff9d00); border: 0; color: #1a0b4a; }
#c-tour .i-stop, #c-tour.on .i-play { display: none; }
#c-tour.on .i-stop { display: block; }
#c-tour.on { background: linear-gradient(135deg, #ff6a3d, #e11fc0); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(225,31,192,.2); } }
#compass { transition: transform .1s linear; }
.tour-label {
  position: fixed; z-index: 11; left: 50%; bottom: 74px; translate: -50% 0; padding: 12px 26px; border-radius: 40px;
  font: 800 22px var(--ml); color: #fff; background: linear-gradient(135deg, rgba(255,122,0,.95), rgba(196,37,214,.95));
  box-shadow: 0 14px 40px rgba(120,30,160,.45); animation: rise .4s cubic-bezier(.2,.9,.3,1); pointer-events: none;
}
.panel-toggle {
  position: fixed; z-index: 11; right: var(--gap); bottom: var(--gap); height: 52px; padding: 0 20px 0 16px; display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 30px; font: 800 15px var(--ml); color: #1a0b4a;
  background: linear-gradient(135deg, #ffd23a, #ff9d00); box-shadow: 0 14px 34px rgba(255,140,0,.45); transition: transform .2s, opacity .2s;
}
.panel-toggle b { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--ink); color: #fff; font: 800 12px/26px var(--en); text-align: center; }
.panel-toggle:hover { transform: translateY(-2px); }
body.panel-open .panel-toggle { opacity: 0; pointer-events: none; transform: translateX(30px); }

.maplibregl-popup-content {
  background: #fff; color: var(--ink); border-radius: 10px; padding: 6px 12px; font: 700 12.5px var(--ml);
  box-shadow: 0 8px 22px rgba(60,30,140,.3); border: 1px solid var(--line);
}
.maplibregl-popup-tip { display: none; }

/* glowing dots + poster avatars */
.pin { position: relative; width: var(--pin, 56px); height: var(--pin, 56px); cursor: pointer; }
.pin .ava {
  position: absolute; inset: 0; border-radius: 50%; padding: 3px; cursor: pointer;
  background: conic-gradient(from 200deg, var(--yellow), var(--orange), var(--magenta), var(--blue), var(--yellow));
  box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 8px 22px rgba(60,20,120,.4), 0 0 26px rgba(255,140,0,.55);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4);
}
.pin .ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #2a1a9a; }
.pin:hover .ava { transform: scale(1.18); }
.pin .cnt {
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--ink); color: #fff; font: 800 11px/20px var(--en); text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.pin.sel .ava { transform: scale(1.25); box-shadow: 0 0 0 4px #fff, 0 0 40px rgba(255,122,0,.9); }
/* ---------- glass frames ---------- */
.glass {
  background: var(--glass); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(60,30,140,.16);
}

/* ---------- top bar ---------- */
@media (min-width: 821px) { body.panel-open .topbar { right: calc(var(--panel-w) + var(--gap) * 2); } }
.topbar {
  position: fixed; z-index: 10; top: var(--gap); left: var(--gap); right: var(--gap);
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.bar-row { display: flex; align-items: center; gap: 10px; pointer-events: none; flex-wrap: wrap; }
.bar-row > * { pointer-events: auto; }
.brand, .stat-chip, .filters {
  background: var(--glass); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(60,30,140,.16);
}
.brand {
  display: flex; align-items: center; gap: 12px; padding: 10px 26px 10px 12px; --cut: 14px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  border: 0; background: linear-gradient(135deg, #fff 45%, #ffe6cf 80%, #ffd0f2); box-shadow: none; filter: drop-shadow(0 8px 18px rgba(60,30,140,.22));
}
.mark { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 4px 12px rgba(255,120,0,.5)); }
.brand h1 { font: 800 26px/1 var(--ml); letter-spacing: -.005em; }
.brand small { display: block; margin-top: 4px; font: 500 12px var(--ml); color: var(--ink-2); }
.brand small b { color: #e8650a; font-weight: 800; }
.stat-chip { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px; border-radius: 16px; font: 500 14px var(--ml); }
.stat-chip b { font-size: 22px; font-weight: 800; margin-right: 3px; }
.stat-chip i { font-style: normal; opacity: .6; margin-right: 5px; }
.stat-chip .sep { width: 1px; height: 24px; background: var(--line); }
.cta {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; border: 0; text-decoration: none; white-space: nowrap;
  font-family: var(--ml), var(--en); font-weight: 800; font-size: 16px; color: #1a0b4a;
  background: linear-gradient(135deg, #ffd23a, #ff9d00);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .15s, filter .15s; margin-left: auto;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:disabled { opacity: .6; cursor: progress; }
.cta.small { height: 38px; padding: 0 16px; font-size: 14px; margin: 0; }
.icon-btn { display: none; width: 46px; height: 46px; border-radius: 14px; place-items: center; background: var(--glass); border: 1px solid var(--line); }
.ghost { height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--soft-2); background: rgba(255,255,255,.7); font-family: var(--ml), var(--en); font-weight: 600; }
.ghost:hover { background: #fff; }
.ghost.small { height: 38px; padding: 0 14px; font-size: 14px; }

.filters { padding: 10px 12px; border-radius: 18px; align-items: flex-end; width: fit-content; max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1 1 150px; position: relative; }
.field span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-family: var(--ml), var(--en); }
.field.search { flex: 1.5 1 220px; }
select, input[type=search] {
  appearance: none; -webkit-appearance: none; width: 100%; height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--soft-2); outline: none; font-family: var(--ml), var(--en); font-size: 14.5px;
  transition: border-color .15s, background .15s;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231d1445' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; text-overflow: ellipsis;
}
select option { color: #111; background: #fff; }
select:disabled { opacity: .45; }
select:focus-visible, input:focus-visible { border-color: var(--orange); background-color: #fff; }
input::placeholder { color: var(--ink-2); }
.clear { height: 42px; width: 42px; border-radius: 12px; border: 1px solid var(--soft-2); background: transparent; flex: none; }
.clear:hover { background: var(--soft); }
.results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; list-style: none; padding: 6px; border-radius: 14px; max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(60,30,140,.28);
}
.results li { padding: 9px 12px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; font-family: var(--ml), var(--en); text-transform: none; letter-spacing: 0; opacity: 1; font-size: 14px; font-weight: 600; }
.results li small { font-size: 12px; font-weight: 400; opacity: .7; }
.results li:hover, .results li.on { background: var(--soft); }
.results li.none { cursor: default; opacity: .7; }

/* ---------- legend ---------- */
.legend {
  position: fixed; z-index: 10; left: var(--gap); bottom: var(--gap); display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 14px; font: 600 12px var(--ml);
  background: var(--glass); border: 1px solid var(--line);
}
.legend i { width: 130px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #3b2bff, #8a2cff, #e11fc0, #ff7a00, #ffd21a); }

/* ---------- side panel / bottom sheet ---------- */
.panel {
  position: fixed; z-index: 12; top: var(--gap); right: var(--gap); bottom: var(--gap); width: var(--panel-w);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(170deg, rgba(255,255,255,.94), rgba(247,242,255,.92) 60%, rgba(255,238,226,.92));
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(60,30,140,.28);
}
.grab { display: none; }
.head-btns { display: flex; gap: 8px; flex: none; }
@media (min-width: 821px) {
  .panel { transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .4s; }
  .panel.closed { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
}
.panel-head { padding: 20px 20px 12px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; font: 600 11.5px var(--ml); color: var(--ink-2); min-height: 0; }
.crumbs:not(:empty) { margin-bottom: 8px; }
.crumbs button { background: var(--soft); color: var(--ink); border: 0; border-radius: 20px; padding: 3px 10px; font: inherit; }
.crumbs button:hover { background: var(--soft-2); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title h2 { font: 800 28px/1.1 var(--ml); min-width: 0; }
.panel-sub { margin-top: 6px; font: 500 13px var(--ml); color: var(--ink-2); }
.small-x { position: static; flex: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -20px 0; padding: 2px 20px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips:empty { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 30px; border: 1px solid var(--soft-2);
  background: #fff; font: 600 12.5px var(--ml); max-width: 220px;
}
.chip:hover { background: var(--soft); }
.chip .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 11px var(--en); background: var(--soft-2); overflow: hidden; }
.chip .dot img { width: 100%; height: 100%; object-fit: cover; }
.chip.has .dot { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #1a0b4a; }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.off { opacity: .6; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 20px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(80,50,170,.3) transparent; }

/* poster masonry */
.grid { display: flex; gap: 10px; align-items: flex-start; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.card {
  position: relative; display: block; border-radius: 14px; overflow: hidden; cursor: zoom-in; text-decoration: none; color: #fff;
  background: linear-gradient(110deg, rgba(80,50,170,.07) 30%, rgba(80,50,170,.16) 50%, rgba(80,50,170,.07) 70%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite; box-shadow: 0 8px 22px rgba(60,30,140,.22);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.card.loaded { animation: none; background: var(--soft); }
.card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 34px rgba(60,30,140,.34); }
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.card.loaded img { opacity: 1; }
.card .meta {
  position: absolute; inset: auto 0 0 0; padding: 30px 10px 8px; display: flex; flex-direction: column; font-size: 11px;
  background: linear-gradient(180deg, transparent, rgba(5,3,30,.9)); font-family: var(--ml), var(--en);
}
.card .meta b { font-size: 13px; font-weight: 800; }
.card .meta span { opacity: .75; }
.card.fresh { animation: pop .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.empty { text-align: center; padding: 40px 12px; }
.empty-big { font: 800 26px var(--ml); margin-bottom: 8px; }
.empty p { opacity: .8; margin-bottom: 20px; font-size: 14px; }
.empty .cta { margin: 0 auto; }
.sentinel { height: 1px; }
.foot-credit { margin-top: 26px; font-size: 12.5px; opacity: .75; text-align: center; line-height: 1.6; }
.foot-credit b { font-weight: 800; }
.foot-credit small { opacity: .7; }

/* ---------- modal / sheet ---------- */
.modal, .lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40,24,100,.42); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet, .lb-body {
  position: relative; --cut: 18px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.sheet { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; background: linear-gradient(150deg, #fff, #f4eeff 60%, #ffeee0); color: var(--ink); animation: rise .3s cubic-bezier(.2,.9,.3,1); }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.sheet h2 { font: 800 28px/1.1 var(--ml); margin-bottom: 20px; }
.sheet h2 small { display: block; font-family: var(--en); font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.x { position: absolute; top: 14px; right: 18px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); font-size: 14px; }
.x:hover { background: var(--soft-2); }
.row3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.drop {
  display: grid; place-items: center; min-height: 190px; margin-top: 16px; border-radius: 16px; cursor: pointer; overflow: hidden;
  border: 2px dashed rgba(80,50,170,.35); background: var(--soft); transition: .15s; text-align: center;
}
.drop:hover, .drop.over { border-color: var(--orange); background: rgba(255,160,40,.12); }
.drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; }
.drop-empty b { font: 600 19px var(--ml); }
.drop-empty span { font-size: 12.5px; color: var(--ink-2); }
.drop img { max-width: 100%; max-height: 340px; object-fit: contain; }
.progress { height: 6px; border-radius: 6px; background: var(--soft-2); margin-top: 14px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .15s; }
.form-msg { min-height: 22px; margin-top: 12px; font-size: 14px; color: #c0262d; font-weight: 600; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.actions .cta { margin-left: 0; }

/* ---------- lightbox ---------- */
.lightbox { z-index: 60; padding: 0; }
.lb-body { width: min(1000px, 100% - 24px); max-height: 100vh; display: flex; flex-direction: column; background: rgba(255,255,255,.96); color: var(--ink); padding: 16px; }
.lb-img { display: grid; place-items: center; min-height: 0; flex: 1; }
.lb-img img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(60,30,140,.35); }
figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 14px; }
.lb-info { display: flex; flex-direction: column; font-family: var(--ml), var(--en); }
.lb-info b { font-size: 20px; font-weight: 800; }
.lb-info span { color: var(--ink-2); font-size: 14px; }
.lb-info small { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-nav { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(60,30,140,.3); font-size: 30px; line-height: 1; }
.lb-nav:hover { background: var(--soft); }
.lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; }
.lb-nav[disabled] { opacity: .25; cursor: default; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; translate: -50% 20px; opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-family: var(--ml), var(--en); box-shadow: 0 10px 40px rgba(60,30,140,.4); transition: .3s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }


/* ---------- spot viewer (full-screen, Snap-style) ---------- */
.spot { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 70% at 50% 0%, #34207f 0%, #150b38 60%, #0b0520 100%); animation: rise .35s cubic-bezier(.2,.9,.3,1); }
.spot-head { display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 12px; }
.spot-back { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.spot-back:hover { background: rgba(255,255,255,.24); }
.spot-titles { flex: 1; min-width: 0; }
.spot-titles h2 { font: 800 24px/1.15 var(--ml); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-titles p { margin-top: 2px; font: 500 13px var(--ml); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-scroll { flex: 1; overflow-y: auto; padding: 4px 12px calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.spot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 560px) { .spot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .spot-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } .spot-scroll { padding: 8px 28px 32px; } }
.spot-tile {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(110deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite;
  box-shadow: 0 10px 28px rgba(0,0,0,.4); transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.spot-tile.loaded { animation: none; background: rgba(255,255,255,.08); }
.spot-tile:hover { transform: translateY(-3px) scale(1.015); }
.spot-tile:active { transform: scale(.97); }
.spot-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.spot-tile.loaded img { opacity: 1; }
.spot-tile span { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; padding: 34px 12px 10px; background: linear-gradient(180deg, transparent, rgba(8,4,28,.85)); font-family: var(--ml), var(--en); }
.spot-tile b { font-size: 14px; font-weight: 800; }
.spot-tile i { font-style: normal; font-size: 11.5px; opacity: .75; }

/* ---------- lightbox: full-screen viewer ---------- */
.lightbox { background: #0b0520; }
.lb-body { width: 100%; height: 100dvh; max-height: none; padding: 0; clip-path: none; background: transparent; color: #fff; }
.lb-body .x { top: max(14px, env(safe-area-inset-top)); right: 16px; width: 42px; height: 42px; background: rgba(255,255,255,.16); color: #fff; font-size: 16px; }
.lb-img { padding: max(64px, calc(env(safe-area-inset-top) + 52px)) 8px 0; touch-action: pan-y; }
.lb-img img { max-height: calc(100dvh - 190px); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.lb-body figcaption { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
.lb-info span, .lb-info small { color: rgba(255,255,255,.72); }
.lb-body .ghost { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.lb-body .ghost:hover { background: rgba(255,255,255,.24); }
.lb-nav { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.lb-nav:hover { background: rgba(255,255,255,.3); }
@media (max-width: 820px) { .lb-nav { top: 50%; bottom: auto; translate: 0 -50%; width: 40px; height: 40px; font-size: 26px; } .lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; } .spot-head .cta span { display: none; } .spot-head .cta { padding: 0 14px; } }

/* ---------- responsive ---------- */
@media (min-width: 640px) { .row3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) { :root { --panel-w: 360px; } .stat-chip { display: none; } }
@media (max-width: 820px) {
  :root { --gap: 10px; }
  .topbar { right: var(--gap); }
  .brand { padding: 8px 22px 8px 10px; flex: 1; min-width: 0; }
  .mark { width: 36px; height: 36px; }
  .brand h1 { font-size: 21px; }
  .brand small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .icon-btn { display: grid; }
  .cta { margin-left: 0; height: 46px; padding: 0 16px; }
  .cta#open-upload span { display: none; }
  .cta#open-upload { padding: 0 14px; width: 46px; justify-content: center; }
  .filters { display: none; width: 100%; padding: 10px; gap: 8px; }
  .filters.open { display: flex; }
  .field, .field.search { min-width: 44%; flex: 1 1 44%; }
  .field.search { flex-basis: 100%; }
  .legend { display: none; }
  #p-close { rotate: 90deg; }
  .ctl { bottom: 150px; }
  .ctl button { width: 42px; height: 42px; border-radius: 13px; }
  #c-in, #c-out { display: none; }
  .panel-toggle { display: none; }
  .attrib { bottom: 136px; font-size: 9.5px; }
  .tour-label { bottom: 190px; font-size: 18px; padding: 10px 20px; }

  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 92dvh; border-radius: 24px 24px 0 0; border-bottom: 0;
    transform: translateY(var(--sy, calc(92dvh - 130px))); transition: transform .35s cubic-bezier(.2,.9,.3,1); will-change: transform;
  }
  .panel.dragging { transition: none; }
  .grab { display: grid; place-items: center; height: 26px; flex: none; touch-action: none; cursor: grab; }
  .grab i { width: 44px; height: 5px; border-radius: 3px; background: var(--soft-2); }
  .panel-head { padding: 0 16px 10px; touch-action: pan-x; }
  .panel-title h2 { font-size: 22px; }
  .chips { margin: 10px -16px 0; padding: 2px 16px 4px; }
  .panel-scroll { padding: 12px 10px calc(20px + env(safe-area-inset-bottom)); }
  .sheet { padding: 22px 18px; }
  .lb-nav { top: auto; bottom: 12px; translate: 0 0; }
  .toast { width: max-content; text-align: center; font-size: 14px; bottom: auto; top: calc(var(--gap) + 78px); translate: -50% -12px; }
  .toast.show { translate: -50% 0; }
  .ctl { transition: opacity .2s; }
  body:has(.panel:not([data-snap="peek"])) .ctl, body:has(.panel:not([data-snap="peek"])) .attrib { opacity: 0; pointer-events: none; }
  .brand small { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- root page is just the full-screen map; photos open in the spot viewer ---------- */
.panel, .panel-toggle { display: none !important; }
.ctl { bottom: 56px; }
@media (max-width: 820px) { .ctl { bottom: max(34px, env(safe-area-inset-bottom)); } .attrib { bottom: 6px; } .toast { bottom: auto; } }

/* ---------- /upload page ---------- */
html:has(body.upload-page) { height: auto; overflow: auto; }
body.upload-page { height: auto; min-height: 100dvh; background-attachment: fixed; overflow: auto; background: radial-gradient(120% 60% at 50% 0%, #ffe9d6 0%, #efe6ff 55%, #f5f2ff 100%); }
.up-wrap { max-width: 680px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 40px; }
.up-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 8px 16px 8px 12px; border-radius: 30px; background: var(--glass); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 700 14px var(--ml); }
.up-card { max-height: none; animation: none; }
.up-cancel { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- search + filters: floating pills ---------- */
.filters { padding: 0; gap: 8px; width: 100%; background: none; border: 0; box-shadow: none; align-items: center; }
.filters .field { min-width: 0; flex: 0 1 auto; }
.filters .field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* labels stay for screen readers */
.filters .field.search { flex: 1 1 200px; max-width: 300px; }
.filters select, .filters input[type=search] {
  height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); background-color: rgba(255,255,255,.95);
  box-shadow: 0 8px 22px rgba(60,30,140,.18), inset 0 0 0 1px var(--line); font-weight: 700; font-size: 14.5px; transition: box-shadow .15s, background .15s, transform .15s;
}
.filters input[type=search] {
  padding: 0 18px 0 46px; font-weight: 600;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c425d6' stroke-width='2.6' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
  background-repeat: no-repeat; background-position: 16px center;
}
.filters select { padding: 0 38px 0 18px; width: auto; min-width: 120px; max-width: 180px; cursor: pointer; text-overflow: ellipsis; }
.filters select:not(:disabled):hover { transform: translateY(-1px); }
.filters select:disabled { opacity: .5; cursor: default; }
.filters select:has(option:checked:not([value=""])) {
  background-color: #ffc21a; background-image: linear-gradient(135deg, #ffd23a, #ff9d00), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231a0b4a' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: 0 0, right 16px center; background-size: auto, 12px 8px; border-color: transparent; color: #1a0b4a;
  box-shadow: 0 8px 22px rgba(255,140,0,.38);
}
.filters select:focus-visible, .filters input:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.22), 0 8px 22px rgba(60,30,140,.18); }
.filters .clear { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.95); box-shadow: 0 8px 22px rgba(60,30,140,.18), inset 0 0 0 1px var(--line); font-weight: 800; }
.filters .clear:hover { background: #fff; }
.results { border-radius: 20px; padding: 8px; box-shadow: 0 24px 60px rgba(60,30,140,.3); }
.results li { border-radius: 14px; }
@media (max-width: 820px) {
  .filters { padding: 2px 0 0; }
  .filters .field.search { flex: 1 1 100%; max-width: none; }
  .filters .field:not(.search) { flex: 1 1 calc(50% - 8px); }
  .filters select { width: 100%; min-width: 0; max-width: none; }
}
@media (max-width: 820px) { .attrib { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; font-size: 9px; padding: 2px 8px; } }

/* ---------- compass + satellite ---------- */
#c-north { width: 62px; height: 74px; border-radius: 22px; flex-direction: column; gap: 0; padding: 4px 0 6px; align-content: center; }
#c-north svg { display: block; }
#compass-dial { transform-box: view-box; transform-origin: 32px 32px; transition: transform .12s linear; }
#compass-deg { font: 800 10.5px/1 var(--en); letter-spacing: .02em; color: var(--ink-2); margin-top: 3px; }
#c-sat { font-size: 12px; letter-spacing: .04em; }
#c-sat.on { background: linear-gradient(135deg, #2a1a8a, #6a3ad6); color: #fff; border: 0; }
@media (max-width: 820px) { #c-north { width: 54px; height: 66px; } #c-north svg { width: 46px; height: 46px; } }
.sat-credit { display: none; } body.sat .sat-credit { display: inline; }

/* ---------- "locations are not exact" notice ---------- */
.notice { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(20,10,50,.5); animation: nfade .2s; }
.notice-card { width: min(440px, 100%); padding: 28px 26px 24px; border-radius: 26px; background: #fff; color: #1d1445; box-shadow: 0 30px 80px rgba(20,10,60,.45); text-align: center; animation: npop .28s cubic-bezier(.2,1.2,.3,1); font-family: 'Plus Jakarta Sans', 'Anek Malayalam', system-ui, sans-serif; }
.notice-ico { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb000, #c425d6); color: #fff; }
.notice-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notice-card h2 { font: 800 22px/1.2 inherit; margin-bottom: 10px; }
.notice-card p { font: 500 15px/1.55 inherit; color: rgba(29,20,69,.82); }
.notice-card .notice-ml { margin-top: 8px; font-family: 'Anek Malayalam', system-ui, sans-serif; font-weight: 600; }
.notice-check { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 16px; padding: 14px 16px; border-radius: 16px; background: #f4effc; text-align: left; cursor: pointer; font: 700 14px/1.4 inherit; }
.notice-check small { font: 500 13px 'Anek Malayalam', system-ui, sans-serif; color: rgba(29,20,69,.65); }
.notice-check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: #c425d6; cursor: pointer; }
.notice-go { width: 100%; height: 48px; border: 0; border-radius: 24px; background: linear-gradient(135deg, #ffd23a, #ff9d00); color: #1a0b4a; font: 800 16px inherit; cursor: pointer; transition: opacity .15s, transform .15s; }
.notice-go:disabled { opacity: .4; cursor: not-allowed; }
.notice-go:not(:disabled):hover { transform: translateY(-1px); }
@keyframes nfade { from { opacity: 0; } }
@keyframes npop { from { opacity: 0; transform: translateY(14px) scale(.96); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 820px) { .bar-row:first-child { justify-content: flex-start; } }