:root {
  color-scheme: dark;
  --ink: #fff9f1;
  --quiet-ink: rgba(255, 246, 235, 0.82);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  background: #314d82;
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #314d82;
}

body {
  min-width: 0;
  min-height: 100%;
}

button {
  font: inherit;
}

.experience {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #314d82 0%, #596f9c 54%, #f4ae91 100%);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.experience:focus-visible {
  outline: none;
}

.experience[data-state="climb"] {
  touch-action: none;
  overscroll-behavior: none;
}

.atmosphere {
  position: absolute;
  z-index: -1;
  inset: -22% -10%;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter;
  background-image:
    linear-gradient(180deg, rgba(31, 43, 75, 0.06) 0%, rgba(44, 51, 77, 0.03) 52%, rgba(34, 44, 72, 0.12) 100%),
    url("./images/far-away-sky.png");
  background-position: center 56%;
  background-size: cover;
}

.world-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.cloud-cap-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.waveform {
  position: absolute;
  z-index: 1;
  left: 0;
  top: auto;
  bottom: 4%;
  width: 100%;
  height: 24%;
  overflow: visible;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1200ms cubic-bezier(0.2, 0.7, 0.15, 1);
  pointer-events: none;
}

.player-ball {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 247, 0.8) 13%, rgba(239, 241, 255, 0.7) 36%, rgba(199, 220, 255, 0.44) 68%, rgba(255, 213, 179, 0.34) 100%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.96),
    inset 0 -3px 5px rgba(120, 154, 207, 0.22),
    0 0 0 1px rgba(255, 248, 232, 0.34),
    0 0 12px 6px rgba(255, 244, 226, 0.4),
    0 0 36px 16px rgba(189, 214, 255, 0.27);
  -webkit-backdrop-filter: blur(2px) saturate(1.24);
  backdrop-filter: blur(2px) saturate(1.24);
  transition: opacity 420ms ease, filter 180ms ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.player-ball::before {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 12px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  filter: blur(1.4px);
  animation: orb-glint 2.1s ease-in-out infinite;
  content: "";
  pointer-events: none;
}

.player-ball::after {
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 245, 230, 0.38);
  border-right-color: transparent;
  border-bottom-color: rgba(255, 215, 185, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(255, 226, 198, 0.38);
  animation: orb-orbit 4s linear infinite;
  content: "";
  pointer-events: none;
}

.player-ball[data-motion="steering"] {
  filter: drop-shadow(-8px 1px 10px rgba(205, 222, 255, 0.55));
}

.player-ball[data-motion="falling"] {
  filter: drop-shadow(0 9px 12px rgba(255, 179, 153, 0.62));
}

.score-readout {
  position: absolute;
  z-index: 4;
  top: calc(18px + var(--safe-top));
  left: calc(22px + var(--safe-left));
  display: grid;
  gap: 3px;
  color: rgba(255, 250, 243, 0.94);
  text-shadow: 0 1px 12px rgba(35, 45, 73, 0.5);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.score-readout span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.score-readout strong {
  font-size: 24px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.experience[data-state="climb"] .score-readout,
.experience[data-state="summit-hold"] .score-readout {
  opacity: 0.9;
}

.climb-hint {
  position: absolute;
  z-index: 4;
  top: calc(22px + var(--safe-top));
  left: 50%;
  width: max-content;
  max-width: calc(100% - 100px);
  margin: 0;
  color: rgba(255, 249, 239, 0.86);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.17em;
  text-align: center;
  text-shadow: 0 1px 8px rgba(29, 43, 76, 0.54);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
  pointer-events: none;
}

.experience[data-state="climb"] .climb-hint {
  opacity: 0.9;
}

.experience[data-state="climb"][data-steered="true"] .climb-hint {
  transform: translate(-50%, -5px);
  opacity: 0;
}

.listen {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 23px;
  width: 100%;
  min-height: 100%;
  padding:
    calc(28px + var(--safe-top))
    calc(24px + var(--safe-right))
    calc(28px + var(--safe-bottom))
    calc(24px + var(--safe-left));
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(27, 43, 82, 0.4);
  transition: opacity 1200ms cubic-bezier(0.22, 0.7, 0.18, 1);
  touch-action: manipulation;
}

.listen:focus-visible,
.final-replay:focus-visible {
  outline: 1px solid rgba(255, 247, 234, 0.85);
  outline-offset: 5px;
}

.wordmark,
.end-title {
  display: block;
  padding-left: 0.29em;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(21px, 3.2vw, 27px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.29em;
  color: #fffaf4;
  text-shadow: 0 2px 18px rgba(42, 51, 86, 0.35);
  white-space: nowrap;
}

.listen-prompt {
  display: block;
  padding-left: 0.2em;
  color: var(--quiet-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.end-title {
  position: absolute;
  z-index: 4;
  top: 54%;
  left: 50%;
  max-width: calc(100% - 40px);
  padding-left: 0.29em;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: 0.29em;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1500ms cubic-bezier(0.2, 0.68, 0.2, 1);
  pointer-events: none;
}

.release-info {
  position: absolute;
  z-index: 4;
  top: calc(54% + 38px);
  left: 50%;
  margin: 0;
  padding-left: 0.2em;
  color: rgba(255, 246, 234, 0.9);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(38, 44, 74, 0.46);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1300ms ease;
  pointer-events: none;
}

.final-replay {
  position: absolute;
  z-index: 5;
  top: auto;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%;
  display: grid;
  place-items: center;
  min-width: min(280px, calc(100vw - 48px));
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 248, 237, 0.46);
  border-radius: 999px;
  color: rgba(255, 249, 238, 0.94);
  background: rgba(35, 53, 88, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 8px rgba(38, 44, 74, 0.4);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1200ms ease, background 250ms ease;
  pointer-events: none;
  cursor: pointer;
  touch-action: manipulation;
}

.final-replay:hover {
  background: rgba(255, 245, 229, 0.12);
}

.leaderboard-panel {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    calc(20px + var(--safe-top))
    calc(18px + var(--safe-right))
    calc(20px + var(--safe-bottom))
    calc(18px + var(--safe-left));
  background: rgba(29, 42, 72, 0.24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 650ms ease;
  pointer-events: none;
}

.experience[data-state="leaderboard"] .leaderboard-panel,
.experience[data-state="game-over"][data-mode="score"] .leaderboard-panel {
  opacity: 1;
  pointer-events: auto;
}

.leaderboard-card {
  width: min(440px, 100%);
  max-height: min(680px, 90dvh);
  overflow: auto;
  padding: clamp(20px, 6vw, 32px);
  border: 1px solid rgba(255, 249, 238, 0.33);
  border-radius: 16px;
  color: #fff9f0;
  background: linear-gradient(150deg, rgba(39, 54, 84, 0.92), rgba(77, 79, 106, 0.88));
  box-shadow: 0 20px 70px rgba(22, 32, 57, 0.24);
}

.leaderboard-kicker {
  margin: 0 0 8px;
  color: rgba(255, 226, 203, 0.86);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
}

.leaderboard-title {
  margin: 0 0 24px;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(21px, 5vw, 27px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-align: center;
}

.score-form label {
  display: block;
  margin: 0 0 8px;
  color: rgba(255, 247, 235, 0.8);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.score-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.score-form input,
.score-form button,
.play-again {
  min-height: 46px;
  border: 1px solid rgba(255, 248, 237, 0.36);
  border-radius: 8px;
  color: #fff9f0;
  background: rgba(255, 250, 242, 0.08);
  font: inherit;
}

.score-form input {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  outline: none;
}

.score-form input:focus-visible {
  border-color: rgba(255, 229, 204, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 229, 204, 0.22);
}

.score-form button,
.play-again {
  padding: 0 14px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.leaderboard-list {
  display: grid;
  gap: 0;
  max-height: 235px;
  overflow: auto;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.leaderboard-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 249, 238, 0.13);
  color: rgba(255, 249, 238, 0.9);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.leaderboard-list li.leaderboard-empty {
  display: block;
  padding: 16px 4px;
  color: rgba(255, 249, 238, 0.7);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.leaderboard-rank {
  color: rgba(255, 226, 203, 0.72);
}

.leaderboard-notice {
  min-height: 18px;
  margin: 12px 0 0;
  color: rgba(255, 226, 203, 0.9);
  font-size: 11px;
  text-align: center;
}

.play-again {
  display: block;
  min-width: 132px;
  margin: 16px auto 0;
}

.play-again[hidden] {
  display: none;
}

.audio-error {
  position: absolute;
  z-index: 6;
  right: 20px;
  bottom: calc(24px + var(--safe-bottom));
  left: 20px;
  margin: 0;
  color: #fff5ea;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 8px rgba(33, 45, 77, 0.75);
  letter-spacing: 0.025em;
}

.source-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.experience[data-state="climb"] .world-canvas,
.experience[data-state="summit-hold"] .world-canvas,
.experience[data-state="silence"] .world-canvas {
  opacity: 1;
}

.experience[data-state="game-over"] .world-canvas {
  opacity: 0.42;
}

.experience[data-state="climb"] .waveform,
.experience[data-state="summit-hold"] .waveform,
.experience[data-state="silence"] .waveform,
.experience[data-state="game-over"] .waveform {
  opacity: 1;
}

.experience[data-state="climb"] .player-ball,
.experience[data-state="summit-hold"] .player-ball {
  opacity: 1;
}

.experience[data-state="intro"] .listen {
  opacity: 1;
  pointer-events: auto;
}

.experience[data-starting="true"] .listen {
  opacity: 0;
  pointer-events: none;
}

.experience[data-state="climb"] .listen,
.experience[data-state="summit-hold"] .listen,
.experience[data-state="silence"] .listen,
.experience[data-state="title-reveal"] .listen,
.experience[data-state="release-reveal"] .listen,
.experience[data-state="final"] .listen,
.experience[data-state="game-over"] .listen {
  opacity: 0;
  pointer-events: none;
}

.experience[data-state="title-reveal"] .waveform,
.experience[data-state="release-reveal"] .waveform,
.experience[data-state="final"] .waveform,
.experience[data-state="game-over"] .waveform {
  opacity: 0.72;
}

.experience[data-state="title-reveal"] .end-title,
.experience[data-state="release-reveal"] .end-title,
.experience[data-state="final"] .end-title,
.experience[data-state="game-over"] .end-title {
  opacity: 1;
}

.experience[data-state="release-reveal"] .release-info,
.experience[data-state="final"] .release-info,
.experience[data-state="game-over"] .release-info {
  opacity: 1;
}

.experience[data-state="final"][data-replay-visible="true"] .final-replay,
.experience[data-state="game-over"][data-replay-visible="true"] .final-replay {
  opacity: 0.94;
  pointer-events: auto;
}

@keyframes orb-glint {
  0%, 100% { opacity: 0.74; transform: translate3d(0, 0, 0) scale(0.94); }
  50% { opacity: 1; transform: translate3d(2px, -1px, 0) scale(1.1); }
}

@keyframes orb-orbit {
  from { transform: rotate(0deg) scaleX(0.88); }
  to { transform: rotate(360deg) scaleX(0.88); }
}

@media (max-width: 380px) {
  .climb-hint {
    top: calc(18px + var(--safe-top));
    max-width: calc(100% - 116px);
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .listen {
    gap: 21px;
  }

  .wordmark {
    font-size: 20px;
  }

  .end-title {
    font-size: clamp(20px, 5.3vw, 25px);
    letter-spacing: 0.24em;
  }

  .release-info {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .waveform {
    bottom: 2%;
    height: 28%;
  }

  .climb-hint {
    top: calc(12px + var(--safe-top));
  }

  .end-title {
    top: 49%;
  }

  .release-info {
    top: calc(49% + 34px);
  }

  .listen {
    gap: 16px;
  }

  .final-replay {
    bottom: calc(8px + var(--safe-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .atmosphere {
    transform: none !important;
  }
}