:root {
  color-scheme: light;
  font-family: "Helvetica Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

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

/* Hide the scrollbar entirely so it never affects layout — page stays
   scrollable via wheel/touch. Apply to BOTH html and body because the
   actual scrolling element varies across browsers (Chrome scrolls html,
   some configs scroll body). Without this the centered time bar shifts
   right when the scrollbar disappears on entering an interior. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: #b8e0ff;
  color: #1a2030;
  overflow-x: hidden;
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

body.locked { overflow: hidden; }
/* Hide hero text overlays while inside any interior — but keep <main> in
   layout so scroll height is preserved (otherwise exiting resets scroll to 0). */
body.locked .hero-card,
body.locked .hint,
body.locked .tagline { visibility: hidden; }

/* Initial-load splash: full-screen sky-blue with a small spinner. Fades out
   the moment the 3D scene's first frame is rendered. While loading, hide the
   hero card so it doesn't peek through during the gap. */
#splash {
  position: fixed;
  inset: 0;
  background: #b8e0ff;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.spinner {
  width: 36px; height: 36px;
  border: 4px solid rgba(74, 40, 24, 0.18);
  border-top-color: #4a2818;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body:not(.loading) #splash { opacity: 0; pointer-events: none; }
body.loading main { visibility: hidden; }

/* Visible JS error overlay — only shows when scripts addClass("visible") on it. */
#err-overlay {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 50vh;
  overflow: auto;
  background: rgba(40, 0, 0, 0.92);
  color: #ffd0d0;
  font: 12px/1.45 ui-monospace, Menlo, monospace;
  padding: 10px 14px;
  z-index: 99;
  display: none;
  white-space: pre-wrap;
  border-top: 2px solid #ff5050;
}
#err-overlay.visible { display: block; }
#err-overlay div { padding: 4px 0; border-bottom: 1px solid rgba(255, 80, 80, 0.2); }

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
  touch-action: pan-y;
}

#fader {
  position: fixed;
  inset: 0;
  background: #000;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

#enter-hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: #1a2030;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

#enter-hint.visible { opacity: 0.85; }

#exit-btn {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 3;
  background: rgba(255, 245, 220, 0.92);
  color: #4a2818;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  user-select: none;
  display: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

#exit-btn.visible { display: block; }

/* "drag to look around" — shown once on first interior entry, dismissed on
   first drag. Uses localStorage so returning visitors don't see it. */
#look-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(255, 245, 220, 0.92);
  color: #4a2818;
  padding: 10px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
#look-hint.visible { display: block; opacity: 1; }
@media (max-width: 560px) {
  #look-hint { font-size: 0.85rem; padding: 8px 14px; }
}

/* "↑ space station" label — projects to the ISS's screen position each
   frame. Shown until the user clicks the ISS once, then localStorage hides
   it on future visits. */
#iss-label {
  position: fixed;
  z-index: 3;
  background: rgba(255, 250, 230, 0.94);
  color: #2a3a4e;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "Fredoka", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 0 0 2px rgba(120, 140, 180, 0.35);
  display: none;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  transition: opacity 0.4s ease;
  opacity: 0;
}
#iss-label.visible { display: block; opacity: 1; }
@media (max-width: 560px) {
  #iss-label { font-size: 0.78rem; padding: 5px 10px; }
}

/* Freecam easter-egg banner — top center. Click the header to collapse
   to just a one-line pill so it doesn't take up screen real estate. */
#freecam-banner {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(20, 22, 30, 0.92);
  color: #f4ead6;
  padding: 10px 18px;
  border-radius: 14px;
  font-family: "Fredoka", "Helvetica Neue", system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-align: center;
  max-width: 480px;
  display: none;
  pointer-events: auto; /* needs to be clickable for collapse toggle */
  user-select: none;
}
#freecam-banner.visible { display: block; }
#freecam-banner .freecam-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
#freecam-banner .freecam-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffe070;
}
#freecam-banner .freecam-toggle {
  font-size: 0.78rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
#freecam-banner.collapsed .freecam-toggle {
  transform: rotate(-90deg);
}
#freecam-banner .freecam-body {
  margin-top: 6px;
  margin-bottom: 8px;
  opacity: 0.85;
}
#freecam-banner .freecam-controls {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  opacity: 0.9;
}
#freecam-banner.collapsed .freecam-body,
#freecam-banner.collapsed .freecam-controls { display: none; }
#freecam-banner.collapsed { padding: 7px 14px; }
#freecam-banner kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.76rem;
  font-weight: 500;
}

#time-bar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(255, 245, 220, 0.92);
  color: #4a2818;
  padding: 8px 14px;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  font: inherit;
  font-size: 0.9rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  user-select: none;
}

#time-bar .cities {
  display: flex;
  gap: 2px;
}

#time-bar .cities button {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #6a4530;
  cursor: pointer;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

#time-bar .cities button:hover {
  background: rgba(74, 40, 24, 0.08);
}

#time-bar .cities button.active {
  background: #4a2818;
  color: #fff5dc;
}

#time-slider {
  width: 160px;
  accent-color: #4a2818;
}

#time-display {
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
  text-align: center;
  font-weight: 600;
  color: #4a2818;
}

#time-reset {
  padding: 4px 10px;
  background: #4a2818;
  color: #fff5dc;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

#time-reset.dirty { opacity: 1; }

@media (max-width: 560px) {
  #time-bar {
    top: 14px;
    padding: 6px 10px;
    gap: 8px;
    font-size: 0.78rem;
  }
  #time-slider { width: 110px; }
  #time-bar .cities button { padding: 3px 6px; font-size: 0.74rem; }
  /* On narrow phones the time bar takes the full top row, so put the back
     button at the bottom instead of the top-left where it would overlap. */
  #exit-btn {
    top: auto;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    padding: 8px 18px;
  }
  /* Compact hero on mobile — smaller text + tighter padding so the card
     doesn't dominate the viewport vertically. */
  h1 {
    font-size: clamp(1.7rem, 9vw, 3.2rem);
  }
  .hero-card {
    padding: 1rem 1.4rem 0.9rem;
    border-radius: 22px;
  }
  .hero-card::before, .hero-card::after {
    width: 20px; height: 20px; top: -7px;
  }
  .hero-card::before { left: 12px; }
  .hero-card::after { right: 12px; }
  .tagline {
    font-size: 0.85rem;
    margin-top: 0.3rem;
  }
  #enter-hint {
    font-size: 0.85rem;
    bottom: 22px;
  }
  .hint {
    font-size: 0.85rem;
    margin-top: 1.2rem;
  }
  /* Speech bubble shrunk for phone — narrower max width + smaller text so
     the expanded "about me" card doesn't dominate the viewport. */
  .bubble {
    font-size: 0.82rem;
    padding: 9px 14px;
    border-radius: 18px;
    max-width: 240px;
  }
  .bubble.expanded {
    font-size: 0.78rem;
    max-width: 250px;
    padding: 11px 14px;
    line-height: 1.4;
  }
  .bubble:not(.expanded) #fisherman-bubble-text {
    font-size: 0.86rem;
  }
}

main {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

section {
  /* Use small-viewport-height so the section size doesn't jump when iOS
     Safari's bottom URL bar shows/hides on scroll. Falls back to 100vh on
     older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
}

h1 {
  font-family: "Fredoka", "Helvetica Neue", system-ui, sans-serif;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: #2a1810;
}

/* Hero card — wood-grain feel so the title is readable against any sky */
.hero-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255, 250, 230, 0.95) 0%, rgba(248, 232, 200, 0.92) 60%, rgba(232, 210, 170, 0.88) 100%);
  padding: 1.6rem 2.4rem 1.4rem;
  border-radius: 28px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.18),
    inset 0 0 0 3px rgba(120, 80, 40, 0.18);
  pointer-events: auto;
  display: inline-block;
  max-width: 90vw;
}
/* Pinned-leaf decorations on the corners (subtle) */
.hero-card::before, .hero-card::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50% 0;
  background: #6a8a45;
  opacity: 0.7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.hero-card::before { top: -10px; left: 18px; transform: rotate(-30deg); }
.hero-card::after  { top: -10px; right: 18px; transform: rotate(30deg) scaleX(-1); }


.tagline {
  font-family: "Fredoka", "Helvetica Neue", system-ui, sans-serif;
  margin: 0.4rem 0 0;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.04em;
  color: #5a3a20;
  font-weight: 400;
}

.hint {
  margin-top: 2.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  opacity: 0.95;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.4);
  animation: bob 2.2s ease-in-out infinite;
}

/* Fisherman speech bubble — Animal Crossing style */
.bubble {
  font-family: "Fredoka", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 500;
  position: fixed;
  background: rgba(255, 250, 230, 0.97);
  color: #3a2010;
  padding: 12px 20px;
  border-radius: 22px;
  font-size: 1.0rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 320px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 0 0 3px rgba(140, 90, 40, 0.18);
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.6);
  transform-origin: center bottom;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: none;
  white-space: nowrap;
}
.bubble.visible {
  display: block;
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}
.bubble.expanded {
  font-size: 0.98rem;
  max-width: 380px;
  padding: 16px 22px;
  white-space: normal;
}
/* Teaser: friendly invite, not the old spaced dots */
.bubble:not(.expanded) #fisherman-bubble-text {
  font-weight: 600;
  font-size: 1.05rem;
  color: #5a3a20;
}
.bubble-tail {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 12px solid rgba(255, 250, 230, 0.97);
  filter: drop-shadow(0 2px 1px rgba(140, 90, 40, 0.18));
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; }
}