:root {
  --bg: #0c1118;
  --panel: #161c26;
  --panel-2: #1c2330;
  --line: rgba(255, 255, 255, 0.10);
  --text: #e6eaf2;
  --text-dim: rgba(230, 234, 242, 0.60);
  --text-faint: rgba(230, 234, 242, 0.38);
  /* Muted off-white accent — used where we still need a hint of color.
     The active states themselves use translucent white fills, not this. */
  --accent: rgba(230, 234, 242, 0.92);

  --hud-bg: rgba(14, 20, 30, 0.55);
  --hud-bg-strong: rgba(14, 20, 30, 0.72);
  --hud-border: rgba(255, 255, 255, 0.10);
  --hud-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --radius: 10px;
  --radius-lg: 14px;
  --tap: 44px;

  /* Slider season gradient. Loops Dec→Jan visually because the player loops. */
  --season-gradient: linear-gradient(90deg,
    #79a8d4 0%,    /* Jan: winter blue */
    #88c08a 25%,   /* Apr: spring green */
    #e9c466 50%,   /* Jul: summer yellow */
    #c97a4f 75%,   /* Oct: autumn orange */
    #79a8d4 100%); /* Dec: back to winter */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#viewer {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #1a232f 0%, #07090d 75%);
}

#viewer canvas { display: block; }

/* ---------------- HUD: shared surface look ---------------- */

#hud-top,
#hud {
  background: var(--hud-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--hud-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--hud-shadow);
  z-index: 5;
}

/* ---------------- Top player bar (decoupled) ---------------- */

#hud-top {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}

.player-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hud-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, transform 100ms ease,
              border-color 140ms ease;
  touch-action: manipulation;
}

.player-btn:hover  { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.20); }
.player-btn:active { transform: scale(0.96); }
.player-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.player-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: none;
}
.player-btn[data-state="playing"] .player-icon--pause { display: block; }
.player-btn[data-state="paused"]  .player-icon--play  { display: block; }

.player-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Month label: only visible when paused, fades in/out so it doesn't flicker
   as the player auto-advances. The data-state lives on #hud-top, set by JS. */
.player-month {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  height: 16px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

#hud-top[data-state="paused"] .player-month {
  opacity: 1;
  transform: translateY(0);
}

.player-track {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.player-track:focus { outline: none; }
.player-track:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.40);
  outline-offset: 4px;
  border-radius: 6px;
}

.player-track-bg {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  transform: translateY(-50%);
  pointer-events: none;
}

.player-track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 6px;
  background: var(--season-gradient);
  background-size: 680px 100%;        /* gradient stretches across full year */
  background-repeat: no-repeat;
  border-radius: 6px;
  transform: translateY(-50%);
  width: 0;
  transition: width 240ms ease;
  pointer-events: none;
  opacity: 0.92;
}

.player-dots {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

/* Dots are passive markers now — the whole track captures pointer events. */
.player-dot {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 1px;
  flex: 0 0 auto;
  transition: background 160ms ease, height 160ms ease;
}

.player-dot[data-state="past"]    { background: rgba(255, 255, 255, 0.35); }
.player-dot[data-state="current"] {
  height: 14px;
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

.player-hints {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.player-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.player-kbd {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 5px 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.player-hint-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------------- Bottom HUD (scenarios + advanced) ---------------- */

#hud {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
}

/* "Hide UI" mode (toggled by Enter on desktop). Fades the HUD out so the
   user can study the globe without overlays. Pointer events drop too so
   nothing under the cursor accidentally activates an invisible chip. */
#hud-top,
#hud {
  transition: opacity 220ms ease;
}

body.ui-hidden #hud-top,
body.ui-hidden #hud,
body.ui-hidden #download-panel {
  opacity: 0;
  pointer-events: none;
}

/* ---------------- Download panel (right-center, off-axis from HUDs) ----- */

.download-panel {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 320px;
  max-width: calc(100vw - 48px);
  padding: 16px;
  background: var(--hud-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--hud-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--hud-shadow);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 220ms ease;
}

.download-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.download-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.download-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hud-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease,
              transform 100ms ease;
  touch-action: manipulation;
}

.download-link:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}

.download-link:active { transform: scale(0.98); }

.download-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.download-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  object-fit: contain;
  padding: 3px;
}

.download-link-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.download-link-platform {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.download-link-action {
  font-size: 11px;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .download-panel {
    /* Sit directly under the player as a compact two-button row. The
       previous bottom-anchored placement (60vh from bottom) floated the
       panel into the middle of the globe — fixing it to just-under-player
       puts it in the natural CTA spot and leaves the globe unobstructed.
       Vertical real estate is too tight to keep the marketing text. */
    top: calc(max(8px, env(safe-area-inset-top)) + 76px);
    bottom: auto;
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    padding: 8px;
    gap: 6px;
  }
  .download-title,
  .download-desc { display: none; }
  .download-links { flex-direction: row; }
  .download-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
  }
  .download-link-action { display: none; }
}

#hud > * + * {
  border-top: 1px solid var(--hud-border);
}

/* ---------------- Advanced (collapsible) ---------------- */

.hud-advanced { padding: 0; }

.hud-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
  min-height: var(--tap);
  touch-action: manipulation;
}

.hud-advanced > summary::-webkit-details-marker { display: none; }
.hud-advanced > summary::marker { content: ""; }

.hud-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-dim);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.hud-advanced[open] .hud-chevron { transform: rotate(90deg); }

.hud-advanced-body {
  padding: 4px 14px 14px;
  max-height: 280px;
  overflow-y: auto;
}

#continent-toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.toggle-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  padding: 8px 4px;
  min-height: 36px;
  touch-action: manipulation;
  color: var(--text);
}

.toggle-row input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}

.toggle-row input[type=checkbox]:hover {
  border-color: rgba(255, 255, 255, 0.55);
}

.toggle-row input[type=checkbox]:checked {
  background: var(--text);
  border-color: var(--text);
}

.toggle-row input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.toggle-row input[type=checkbox]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.toggle-row--labels {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--hud-border);
}

/* ---------------- 3D label overlay ---------------- */

.region-label {
  color: #fff;
  background: rgba(12, 17, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, -100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#hover-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background: var(--hud-bg-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hud-border);
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  color: var(--text);
}

/* ---------------- Mobile ---------------- */

@media (max-width: 720px) {
  #hud-top {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    padding: 8px 10px;
    gap: 10px;
  }

  .player-btn { width: 52px; height: 52px; border-radius: 12px; }
  .player-btn .player-icon { width: 22px; height: 22px; }
  .player-track { height: 28px; }
  .player-hints { display: none; } /* no keyboards on phones */

  #hud {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    transform: none;
    max-height: 60vh;
    border-radius: var(--radius-lg);
  }

  .hud-advanced > summary { padding: 12px 14px; }
  .hud-advanced-body { padding: 4px 14px 14px; max-height: 240px; }
  .toggle-row { padding: 10px 4px; min-height: 40px; }
}