/* Grandstander (SIL Open Font Licence), bundled so the app works offline. */
@font-face {
  font-family: 'Grandstander'; font-weight: 700 800; font-display: swap;
  src: url(fonts/grandstander-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Grandstander'; font-weight: 700 800; font-display: swap;
  src: url(fonts/grandstander-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #0d1b4d;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: 'Grandstander', ui-rounded, -apple-system, system-ui, sans-serif;
}

/* Night sky: a soft glow behind the globe and a scatter of round stars. */
#sky {
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, #2a4fa8 0%, #16307a 38%, #0d1b4d 75%),
    #0d1b4d;
}
#sky::before, #sky::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, #fff 60%, transparent),
    radial-gradient(3px 3px at 22% 78%, #fff8c4 60%, transparent),
    radial-gradient(2px 2px at 35% 24%, #fff 60%, transparent),
    radial-gradient(2px 2px at 52% 8%, #fff 60%, transparent),
    radial-gradient(3px 3px at 68% 88%, #fff 60%, transparent),
    radial-gradient(2px 2px at 81% 18%, #fff8c4 60%, transparent),
    radial-gradient(2px 2px at 92% 62%, #fff 60%, transparent),
    radial-gradient(3px 3px at 12% 52%, #fff 60%, transparent),
    radial-gradient(2px 2px at 44% 94%, #fff 60%, transparent),
    radial-gradient(2px 2px at 88% 40%, #fff 60%, transparent);
  opacity: .85;
}
#sky::after { transform: translate(37%, 23%) scale(1.1); opacity: .5; }

#globe { position: fixed; inset: 0; }

/* ---------------------------------------------------------------- pins
   CSS2DRenderer positions the outer element on the point (and owns its
   transform), so the badge and label live inside it. Pins never take pointer
   events: a finger that lands on one must still be able to spin the globe.
   Taps are matched to pins in spike.js by screen distance instead. */
.pin { width: 0; height: 0; pointer-events: none; }
.pin .body {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, calc(var(--size) * -0.5)) scale(var(--s, 1));
  transform-origin: 50% calc(var(--size) * 0.5);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .25s;
}
.pin .badge {
  width: var(--size); height: var(--size); border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(13, 27, 77, .25), 0 8px 18px rgba(0, 0, 0, .3);
  border: 3px solid #fff;
}
.pin .badge img { width: 78%; height: 78%; }
.pin .label {
  margin-top: 4px; padding: 2px 10px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1d2a5c;
  font-weight: 800; font-size: calc(var(--size) * .24); white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.pin.decor .body img { width: var(--size); height: var(--size); filter: drop-shadow(0 4px 4px rgba(13, 27, 77, .3)); }
.pin.dot .dot {
  width: 14px; height: 14px; border-radius: 50%; margin: 2px;
  background: #ffd23f; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.pin.dot .label { font-size: 13px; opacity: 0; }
body.near .pin.dot .label { opacity: 1; }
.pin.off .body, .pin.crowd .body { opacity: 0; transform: translate(-50%, calc(var(--size) * -0.5)) scale(.2); }
.pin.pop .body { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop {
  0% { transform: translate(-50%, calc(var(--size) * -0.5)) scale(var(--s, 1)); }
  30% { transform: translate(-50%, calc(var(--size) * -0.8)) scale(calc(var(--s, 1) * 1.25)); }
  100% { transform: translate(-50%, calc(var(--size) * -0.5)) scale(var(--s, 1)); }
}
/* Far out, pins shrink and drop their labels so neighbours (Mimi & Poppy in
   Florida, Amma & Affi in North Carolina) do not pile on top of each other. */
body.far .pin { --s: .72; }
body.far .pin .label, .pin.nolabel .label { opacity: 0; }
.pin .label { transition: opacity .25s; }

/* ---------------------------------------------------------------- name bubble */
#bubble {
  position: fixed; left: 50%; top: max(18px, env(safe-area-inset-top));
  transform: translate(-50%, -20px) scale(.8); opacity: 0;
  background: #fff; color: #1d2a5c; border-radius: 26px; padding: 10px 26px 12px;
  font-weight: 800; font-size: 30px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 5px 0 rgba(13, 27, 77, .25), 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; z-index: 3;
}
#bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#bubble { text-align: center; }
#bubble small {
  display: block; font-size: 17px; font-weight: 700; color: #4a5a8c; margin: 2px auto 0;
  white-space: normal; max-width: min(78vw, 440px); line-height: 1.25;
}

/* ---------------------------------------------------------------- buttons */
#buttons {
  position: fixed; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3;
  display: flex; gap: 14px;
}
#buttons button {
  width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; padding: 0;
  background: #ffe9a8; display: grid; place-items: center;
  box-shadow: 0 5px 0 rgba(13, 27, 77, .35), 0 10px 20px rgba(0, 0, 0, .35);
}
#buttons button:active { transform: translateY(3px) scale(.96); }
#buttons img { width: 72%; height: 72%; }
#btn-world { background: #bfe6ff; }

#debug {
  position: fixed; left: 8px; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 3;
  color: rgba(255, 255, 255, .55); font: 11px/1.3 -apple-system, system-ui, sans-serif;
  pointer-events: none; font-variant-numeric: tabular-nums;
}

/* Map credit, required by OpenStreetMap's licence. Faint, out of her way. */
#credit {
  position: fixed; left: 8px; bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)); z-index: 2;
  color: rgba(255, 255, 255, .4); font: 10px/1.2 -apple-system, system-ui, sans-serif; pointer-events: none;
}

/* ---------------------------------------------------------------- splash
   The start button is the tap that unlocks sound on iOS. */
#splash {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(42, 79, 168, .55), rgba(13, 27, 77, .9) 70%);
  transition: opacity .5s;
}
#splash.gone { opacity: 0; pointer-events: none; }
#start {
  border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 22px;
  font-family: 'Grandstander', ui-rounded, system-ui, sans-serif; cursor: pointer;
  animation: bob 2.4s ease-in-out infinite;
}
#start img {
  width: min(52vw, 300px); height: min(52vw, 300px); border-radius: 26%;
  box-shadow: 0 0 0 8px #fff, 0 14px 40px rgba(0, 0, 0, .45);
}
#start span {
  background: #ffd23f; color: #1d2a5c; font-weight: 800; font-size: 38px; padding: 12px 34px 16px;
  border-radius: 999px; box-shadow: 0 6px 0 #c99a12, 0 12px 26px rgba(0, 0, 0, .35);
}
#start:active { transform: scale(.96); }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---------------------------------------------------------------- stamp + credits */
#stamp {
  position: fixed; right: 10px; top: max(8px, env(safe-area-inset-top)); z-index: 4;
  color: rgba(255, 255, 255, .35); font: 11px -apple-system, system-ui, sans-serif;
  padding: 6px; -webkit-user-select: none; user-select: none;
}
#credits {
  position: fixed; inset: 0; z-index: 20; display: none; place-items: center;
  background: rgba(13, 27, 77, .75); padding: 20px;
}
#credits.show { display: grid; }
#credits .card {
  background: #fff; color: #1d2a5c; border-radius: 24px; padding: 22px 26px; max-width: 520px;
  font: 15px/1.45 -apple-system, system-ui, sans-serif; max-height: 85vh; overflow: auto;
}
#credits h2 { font-family: 'Grandstander', sans-serif; margin: 0 0 4px; font-size: 30px; }
#credits h3 { margin: 14px 0 2px; font-size: 15px; }
#credits p { margin: 0; }
#credits button {
  margin-top: 18px; border: 0; border-radius: 999px; background: #1d2a5c; color: #fff;
  font: 600 16px -apple-system, system-ui; padding: 10px 22px;
}