/* "Our World" tab — continent headers, owner admin bar, and Hide controls.
   Everything else (stat strip, map, loc-cards, lightbox) reuses trips.css. */
.world-cont {
  margin-top: 2.2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.01em;
}
.world-cont:first-of-type { margin-top: 1rem; }
#world-map.trip-map-wide { min-height: 460px; }
@media (min-width: 900px) { #world-map.trip-map-wide { min-height: 540px; } }

/* ---- Owner admin bar (only rendered for the owner) ---- */
.world-adminbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px; border-radius: 12px;
  background: #11161d; border: 1px solid #21262d;
}
.wab-state { font: 600 14px/1.3 system-ui, sans-serif; }
.wab-state.is-off { color: #f0883e; }
.wab-state.is-on { color: #3fb950; }
.wab-hint { color: #8b949e; font-size: 13px; flex: 1; min-width: 200px; }
.wab-hint b { color: #c9d1d9; }
.world-pub-btn {
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif; color: #fff;
}
.world-pub-btn.is-pub { background: #238636; border: 1px solid #2ea043; }
.world-pub-btn.is-pub:hover { background: #2ea043; }
.world-pub-btn.is-unpub { background: #6e3a1f; border: 1px solid #f0883e; }
.world-pub-btn.is-unpub:hover { background: #8a4a26; }
.world-pub-btn:disabled { opacity: .6; cursor: default; }

/* ---- Per-photo Hide button (overlay, owner-only) ---- */
.loc-photo { position: relative; }
.world-hide {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 26px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer;
  align-items: center; justify-content: center;
  font: 700 13px/1 system-ui, sans-serif;
  background: rgba(218, 54, 51, 0.92); color: #fff; border: 1px solid #ff7b72;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.world-hide:hover { background: #da3633; }
.world-hide:disabled { opacity: .5; cursor: default; }

/* ---- Per-place Hide button (in the card header, owner-only) ---- */
.world-hide-place {
  margin-left: auto; margin-right: 10px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  font: 600 12px/1 system-ui, sans-serif;
  background: #2b1b1f; color: #ff9a93; border: 1px solid #da3633;
}
.world-hide-place:hover { background: #3a2226; color: #fff; }

/* ---- Globe / map view switch ---- */
.world-viewtabs { display: flex; gap: 8px; margin-bottom: 10px; }
.wv-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif;
  background: #161b22; border: 1px solid #30363d; color: #8b949e;
}
.wv-btn.is-on { color: #fff; border-color: #2ea043; background: #1b2b1f; }
.world-globe { min-height: 540px; display: flex; justify-content: center; align-items: center; }
@media (min-width: 900px) { .world-globe { min-height: 820px; } }
/* display:flex above beats the [hidden] attr, so on Map view the globe box would linger
   as a tall empty band ("blank banner"). This lets it actually collapse when hidden. */
.world-globe[hidden] { display: none !important; }
.world-globe canvas { cursor: grab; }

/* ---- Per-photo Move button (owner-only) + location picker ---- */
.world-move {
  position: absolute; top: 6px; left: 6px; z-index: 5;
  width: 26px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer;
  align-items: center; justify-content: center; font: 700 14px/1 system-ui, sans-serif;
  background: rgba(31, 111, 235, 0.92); color: #fff; border: 1px solid #58a6ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
body.owner-mode .world-move { display: inline-flex !important; }
.world-move:hover { background: #1f6feb; }

.wm-modal { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
/* The class sets display:flex, which would otherwise beat the [hidden] attribute and
   keep the picker permanently on screen — this lets close() (hidden=true) actually hide it. */
.wm-modal[hidden] { display: none; }
.wm-box { width: min(440px, 94vw); max-height: 80vh; display: flex; flex-direction: column;
  gap: 10px; padding: 16px; border-radius: 14px; background: #11161d; border: 1px solid #30363d;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.wm-head { font: 600 15px/1 system-ui, sans-serif; color: #e6edf3; }
.wm-search { padding: 9px 12px; border-radius: 8px; font: inherit; background: #0d1117;
  border: 1px solid #30363d; color: #e6edf3; }
.wm-search:focus { outline: none; border-color: #58a6ff; }
.wm-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.wm-opt { text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font: 500 14px/1.2 system-ui, sans-serif; background: #161b22; border: 1px solid #21262d; color: #c9d1d9; }
.wm-opt:hover { background: #1f6feb; color: #fff; border-color: #58a6ff; }
.wm-cancel { align-self: flex-end; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif; background: transparent; border: 1px solid #30363d; color: #8b949e; }
.wm-cancel:hover { color: #c9d1d9; border-color: #6e7681; }

/* ---- Per-place Merge button (owner-only) ---- */
.world-merge-place {
  margin-left: auto; margin-right: 8px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  font: 600 12px/1 system-ui, sans-serif;
  background: #18233a; color: #9ecbff; border: 1px solid #1f6feb;
}
.world-merge-place:hover { background: #1f6feb; color: #fff; }

/* ---- Manual places (owner-added, no photos yet) ---- */
.loc-cover-pin { display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 8px;
  background: #161b22; border: 1px solid #21262d; font-size: 26px; }
.loc-manual .loc-count { color: #8b949e; }
.loc-note-block { padding: 4px 14px 14px; color: #c9d1d9; line-height: 1.5; }
.world-remove-place { margin-left: auto; margin-right: 10px; padding: 5px 11px; border-radius: 7px;
  cursor: pointer; font: 600 12px/1 system-ui, sans-serif;
  background: #2b1b1f; color: #ff9a93; border: 1px solid #da3633; }
.world-remove-place:hover { background: #3a2226; color: #fff; }
.world-manual-pin { font-size: 22px; line-height: 1; text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* ---- Location pin (gold dot; replaces Leaflet's default PNG marker) ---- */
.world-loc-pin {
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffd24a; border: 2px solid #1b2330;
  box-shadow: 0 0 0 1px rgba(255, 210, 74, .55), 0 1px 3px rgba(0, 0, 0, .6);
}

/* ---- Cooler dark map: glowing circular cover-photo pins ---- */
.wpp-img {
  display: block; width: 36px; height: 36px; border-radius: 50%;
  background-size: cover; background-position: center; cursor: pointer;
  border: 2px solid rgba(255, 210, 74, .9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 9px 1px rgba(255, 210, 74, .55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wpp-img:hover {
  transform: scale(1.28); position: relative; z-index: 600;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 16px 4px rgba(255, 210, 74, .85);
}
/* gold glow on the fallback dot + the manual 📍 pin so they sit in the same family */
.world-loc-pin { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 8px 2px rgba(255, 210, 74, .6) !important; }
.world-manual-pin { filter: drop-shadow(0 0 5px rgba(255, 210, 74, .85)); }

/* ---- Glowing point pins (sized by photo count; mirrors the globe) ---- */
.world-glow-pin {
  border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #e3f1ff 0%, #4ea3ff 42%, rgba(78, 163, 255, 0) 72%);
  box-shadow: 0 0 7px 2px rgba(78, 163, 255, .65);
  transition: box-shadow .12s ease, transform .12s ease;
}
.world-glow-pin:hover { transform: scale(1.4); box-shadow: 0 0 13px 4px rgba(78, 163, 255, .95); }

/* ---- Our World: starfield behind the whole page below the hero (slowly drifting left) ---- */
.wide-band.world-stars {
  background: #05070f url('/static/img/world-stars.png') repeat fixed;
  background-size: 700px 700px;
  animation: world-stardrift 140s linear infinite;
  isolation: isolate;   /* own stacking context so comets sit above the stars, behind content */
  overflow: hidden;     /* keep comets inside this section, never over the hero */
}

/* occasional shooting stars — ABSOLUTE (not fixed) so they live inside this section's sky,
   behind the content, and never streak across the hero above. */
.world-stars .shooting-star {
  position: absolute; width: 120px; height: 2px; border-radius: 2px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(180,216,255,0) 0%, rgba(255,255,255,.95) 100%);
  filter: drop-shadow(0 0 5px rgba(160,200,255,.85)); opacity: 0;
}
.world-stars .ss1 { top: 80px;  left: 6%;  animation: shoot 34s linear infinite; }
.world-stars .ss2 { top: 220px; left: 44%; animation: shoot 47s linear infinite 15s; }
.world-stars .ss3 { top: 40px;  left: 64%; animation: shoot 61s linear infinite 33s; }
@keyframes shoot {
  0%, 95% { opacity: 0; transform: translate(0, 0) rotate(22deg); }
  96%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(36vw, 17vh) rotate(22deg); }
}
@media (prefers-reduced-motion: reduce) {
  .world-stars { animation: none; }
  .world-stars .shooting-star { display: none; }
}
@keyframes world-stardrift {
  from { background-position: 0 0; }
  to   { background-position: -700px 0; }   /* one tile -> seamless loop (toroidal star png) */
}
.wide-band.world-stars .world-globe { background: transparent; }

/* ---- Map: subtle name labels on the states we haven't been to (visible at any zoom) ---- */
.leaflet-tooltip.world-state-label {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: rgba(214, 226, 244, .6); font: 600 10px/1.1 system-ui; letter-spacing: .2px;
  white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .9);
}
.leaflet-tooltip.world-state-label::before { display: none !important; }

/* ---- Custom three.js globe: hover tooltip over a pin ---- */
.wglobe-tip {
  position: absolute; transform: translate(-50%, -145%); pointer-events: none;
  background: rgba(8, 12, 20, .86); border: 1px solid rgba(120, 170, 255, .42);
  border-radius: 9px; padding: 5px 10px; color: #fff; font: 600 12.5px system-ui;
  white-space: nowrap; z-index: 20; box-shadow: 0 5px 16px rgba(0, 0, 0, .55);
}
.wglobe-tip span { display: block; font: 500 11px system-ui; color: #ffd24a; margin-top: 1px; }
.wglobe-tip .wtip-go {
  margin-top: 6px; color: #fff; font: 700 11.5px system-ui; text-align: center;
  background: rgba(78, 163, 255, .9); border-radius: 6px; padding: 7px 10px; cursor: pointer;
}

/* ---- Lightning storms on the globe (HTML element layer) ---- */
/* Real lightning from orbit isn't a pinpoint — it's a wide, soft bloom of light flaring
   up inside a cloud mass and fading. So: a big diffuse glow that flickers from within. */
.wstorm {
  --s: 1; position: relative;
  width: calc(46px * var(--s)); height: calc(46px * var(--s));
  transform: translate(-50%, -50%); pointer-events: none;
}
/* the storm mass — a broad, soft blue-grey cloud the flash lights up from inside */
.wstorm-cloud {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,175,215,.22) 0%, rgba(110,140,195,.08) 50%, rgba(110,140,195,0) 70%);
  filter: blur(3px);
}
/* the bloom — soft white-blue light filling most of the cell, flickering like a flashbulb
   behind clouds. steps() snaps it so it stutters rather than smoothly fades. */
.wstorm-flash {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,250,255,.95) 0%, rgba(176,212,255,.55) 42%, rgba(120,180,255,0) 72%);
  /* --i = per-cell intensity: some storms blaze, some barely glow */
  filter: blur(2px) brightness(var(--i, 1));
  opacity: 0; will-change: opacity, transform;
  animation-iteration-count: infinite; animation-timing-function: steps(1, end);
  /* animation-name + duration + delay are set inline per cell so no two match */
}
/* Four storm "personalities", picked at random per cell. Each is mostly DARK with brief
   activity, so the globe twinkles unevenly instead of pulsing in lockstep. */
/* A — one sharp strike, then long dark */
@keyframes wflash-a {
  0%,100% { opacity:0; transform:scale(.8); }
  1%  { opacity:1;  transform:scale(1.18); }
  3%  { opacity:.12; transform:scale(1); }
  4%  { opacity:.55; transform:scale(1.05); }
  6%  { opacity:0; }
}
/* B — rapid machine-gun flicker burst */
@keyframes wflash-b {
  0%,100% { opacity:0; transform:scale(.85); }
  2% { opacity:.9; } 3% { opacity:.2; }
  4% { opacity:1; transform:scale(1.12); } 5% { opacity:.25; }
  6% { opacity:.8; } 7% { opacity:.3; }
  9% { opacity:.7; } 11% { opacity:0; }
}
/* C — two strikes far apart in the cycle */
@keyframes wflash-c {
  0%,100% { opacity:0; transform:scale(.8); }
  2%  { opacity:.95; transform:scale(1.12); } 5% { opacity:0; }
  49% { opacity:0; }
  51% { opacity:.85; transform:scale(1.08); } 53% { opacity:.1; }
  56% { opacity:.5; } 59% { opacity:0; }
}
/* D — slow distant swell (a faint storm well over the horizon) */
@keyframes wflash-d {
  0%,100% { opacity:0; transform:scale(.9); }
  22% { opacity:.32; transform:scale(1); }
  32% { opacity:.12; }
  42% { opacity:.45; transform:scale(1.04); }
  52% { opacity:0; }
}