/* =============================================================================
   whereintheworld.com
   ========================================================================== */

:root{
  --ink:#070c18;
  --ink-2:#0d1526;
  --paper:#f4f1ea;
  --muted:rgba(244,241,234,.62);
  --muted-2:rgba(244,241,234,.40);
  --gold:#ffc857;
  --gold-deep:#e8a317;
  --line:rgba(244,241,234,.12);
  --card:rgba(255,255,255,.055);
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%, #16294a 0%, transparent 62%),
    radial-gradient(80% 60% at 90% 10%, rgba(255,200,87,.10) 0%, transparent 60%),
    var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

main{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px 80px}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  max-width:760px; margin:0 auto; padding:22px 20px 6px;
}
.brand{
  font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em;
  color:var(--paper); text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.brand-thin{font-weight:400; opacity:.6}
.brand-tld{color:var(--gold); font-weight:600}
.brand-dot{
  width:11px; height:11px; border-radius:50%;
  background:conic-gradient(from 210deg,#58d68d,#3fa9f5,#ffc857,#e8705a,#58d68d);
  box-shadow:0 0 0 3px rgba(255,200,87,.13);
}
.tagline{margin:0; font-size:13px; color:var(--muted-2); letter-spacing:.01em}

/* ------------------------------------------------------------------- stage */
.stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:min(560px, 78vh);
  margin:6px auto 0;
  cursor:grab;
  touch-action:none;
  outline:none;
  user-select:none; -webkit-user-select:none;
}
.stage.is-grabbing{cursor:grabbing}
.stage:focus-visible{ border-radius:50%; box-shadow:0 0 0 3px rgba(255,200,87,.5) }

#globe{ position:relative; z-index:2; width:100%; height:100%; display:block }

.glow{
  position:absolute; z-index:1; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(120,190,255,.30), transparent 62%);
  filter:blur(38px);
  transition:opacity .5s ease, transform .5s ease;
}
.stage.is-spinning .glow{ opacity:.85; transform:scale(1.06) }

.stage-error{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:0 12%; z-index:3;
}
.stage-error p{ margin:0; font-size:14px; color:var(--muted); line-height:1.6 }
.stage-error b{ color:var(--paper) }

/* Shown when the 2D fallback renderer is in use. Deliberately quiet — the site
   works fine, it's just not using the GPU. */
.stage-note{
  position:absolute; z-index:4; left:8%; right:8%; bottom:-6px;
  margin:0; text-align:center; font-size:11.5px; line-height:1.5;
  color:var(--muted-2); pointer-events:none;
}

.stage-shadow{
  position:absolute; z-index:0; left:16%; right:16%; bottom:2%;
  height:34px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(14px);
}

/* -------------------------------------------------------------------- hint */
.hint{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin:8px 0 0; text-align:center;
  transition:opacity .35s ease;
}
.hint.is-dim{ opacity:.28 }
.hint-line{ font-size:13.5px; color:var(--muted); letter-spacing:.005em }
.hint-line b{ color:var(--paper); font-weight:600 }

.spin-btn{
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  color:#1b1405;
  background:linear-gradient(175deg,#ffd98a,var(--gold) 45%,var(--gold-deep));
  border:0; border-radius:999px;
  padding:13px 30px;
  cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(255,200,87,.75), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .15s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s ease;
}
.spin-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(255,200,87,.9), inset 0 1px 0 rgba(255,255,255,.6) }
.spin-btn:active{ transform:translateY(0) scale(.97) }

.again{
  display:block; margin:14px auto 0;
  font-family:var(--body); font-size:14px; font-weight:500;
  color:var(--paper); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding:9px 20px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.again:hover{ background:rgba(255,255,255,.07); border-color:rgba(244,241,234,.3) }
.again:active{ transform:scale(.97) }

/* A class selector outranks the browser's built-in [hidden] rule, so .again and
   .result would stay visible even with the attribute set. Restore it. */
.again[hidden], .result[hidden]{ display:none !important }

/* ------------------------------------------------------------ result card */
.result{
  margin:26px auto 0;
  padding:26px 24px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.result.is-in{ opacity:1; transform:none }

.r-head{ display:flex; align-items:flex-start; gap:18px; justify-content:space-between }
.r-headtext{ min-width:0 }
.r-photo{
  flex:0 0 96px; width:96px; height:96px; border-radius:16px;
  background:rgba(255,255,255,.05) center/cover no-repeat;
  border:1px solid var(--line);
  opacity:0; transform:scale(.94);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.r-photo.is-in{ opacity:1; transform:none }
.r-eyebrow{
  margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.r-city{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(28px,7vw,42px); line-height:1.05; letter-spacing:-.03em;
}
.r-country{ margin:4px 0 0; font-size:14px; color:var(--muted) }

.r-blurb{ margin:16px 0 0; font-size:15.5px; line-height:1.62; color:rgba(244,241,234,.88) }
.r-blurb.is-loading{ color:var(--muted-2); font-style:italic }
.r-more{
  display:inline-block; margin-left:4px; white-space:nowrap;
  font-size:12.5px; color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(255,200,87,.3);
}
.r-more:hover{ border-bottom-color:var(--gold) }

.r-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0 }
.chip{
  font-size:11.5px; font-weight:500; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--muted);
}
.chip--season{ border-color:rgba(255,200,87,.32); color:var(--gold); background:rgba(255,200,87,.07) }

.r-ctas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 0 }
.cta{
  display:flex; flex-direction:column; gap:2px;
  padding:13px 16px; border-radius:14px; text-decoration:none;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--paper);
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.cta:hover{ background:rgba(255,255,255,.1); border-color:rgba(244,241,234,.28); transform:translateY(-2px) }
.cta:active{ transform:translateY(0) scale(.985) }
.cta-label{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em }
.cta-sub{ font-size:11.5px; color:var(--muted-2) }

.cta--primary{
  grid-column:1 / -1;
  background:linear-gradient(175deg,#ffd98a,var(--gold) 45%,var(--gold-deep));
  border-color:transparent; color:#1b1405;
  box-shadow:0 12px 30px -14px rgba(255,200,87,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.cta--primary .cta-sub{ color:rgba(27,20,5,.66) }
.cta--primary:hover{ background:linear-gradient(175deg,#ffe0a0,#ffcf6d 45%,#f0ac1c); border-color:transparent }

.r-disclosure{ margin:16px 0 0; font-size:11.5px; color:var(--muted-2); line-height:1.5 }

.foot{
  position:relative; z-index:1;
  max-width:760px; margin:0 auto; padding:0 20px 40px;
  font-size:12px; color:var(--muted-2);
}
.foot p{margin:0}

/* ------------------------------------------------------------- responsive */
@media (max-width:520px){
  main{ padding-bottom:56px }
  .stage{ max-width:min(440px, 62vh); margin-top:0 }
  .hint-line{ font-size:12.5px; max-width:300px }
  .result{ padding:22px 18px 18px; border-radius:18px }
  .r-ctas{ grid-template-columns:1fr }
  .r-photo{ flex-basis:72px; width:72px; height:72px; border-radius:14px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}