@font-face {
  font-family: "Berkshire Swash";
  src: url("./fonts/berkshire-swash.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: dark;
  --ink: #fff1cf;
  --ink-deep: #252044;
  --sky: #4e5da9;
  --plum: #4c4861;
  --night: #202e35;
  --moss: #4e6548;
  --mint: #8fbf78;
  --rose: #db7b7c;
  --gold: #f4c65f;
  --cream: #fff0c9;
  --control: rgba(29, 39, 66, .78);
  --focus: #fff6d9;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-right: max(18px, env(safe-area-inset-right));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(18px, env(safe-area-inset-left));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sky);
}

body {
  font-family: ui-rounded, "Trebuchet MS", "Avenir Next", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

::selection { color: var(--ink-deep); background: var(--gold); }
button { font: inherit; }
button, canvas { -webkit-tap-highlight-color: transparent; }

.world {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: radial-gradient(circle at 68% 12%, #8b83cf 0, #5966b3 30%, #3a477f 72%, #252b55 100%);
}

#world-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
  outline: none;
  transition: opacity 1200ms var(--ease-out);
}

#world-canvas:focus-visible::after { content: ""; }
.world:has(#world-canvas:focus-visible) { box-shadow: inset 0 0 0 4px var(--focus); }

.world-stage-plate {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1300ms var(--ease-out);
}

.world-stage-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.world:not(.is-awake) #world-canvas { opacity: 0; }
.world.is-awake #world-canvas { opacity: 1; }
.world.is-awake .world-stage-plate { opacity: 0; }

.title-lockup,
.scene-controls,
.star-progress,
.unicorn-message {
  transition: opacity 480ms ease;
}

.world:not(.is-awake) .title-lockup,
.world:not(.is-awake) .scene-controls,
.world:not(.is-awake) .star-progress,
.world:not(.is-awake) .unicorn-message {
  opacity: 0;
}

.paper-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.34) 0 1px, transparent 1.4px);
  background-size: 9px 9px;
}

.vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -16vh 18vh rgba(13, 23, 39, .3), inset 0 0 14vw rgba(23, 25, 58, .25);
}

.title-lockup {
  position: absolute;
  z-index: 5;
  top: var(--safe-top);
  left: var(--safe-left);
  max-width: min(66rem, 72vw);
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(28, 28, 67, .32));
}

.title-lockup h1 {
  margin: 0;
  color: var(--cream);
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(3.8rem, 6.45vw, 6.2rem);
  font-weight: 400;
  letter-spacing: .006em;
  line-height: .76;
  text-wrap: balance;
  text-shadow: 0 3px 0 rgba(64, 53, 96, .28);
}

.title-lockup p {
  margin: .45rem 0 0 clamp(4rem, 10vw, 10rem);
  color: #f7d8ac;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 1.65vw, 1.65rem);
  font-weight: 400;
  letter-spacing: .01em;
  text-shadow: 0 2px 8px rgba(26, 29, 67, .58);
}

.scene-controls {
  position: absolute;
  z-index: 7;
  top: var(--safe-top);
  right: var(--safe-right);
  display: flex;
  gap: 10px;
}

.round-control,
.replay-button {
  color: var(--cream);
  background: var(--control);
  border: 2px solid rgba(255, 224, 153, .9);
  box-shadow: 0 4px 8px rgba(18, 20, 49, .28), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform 220ms var(--ease-out), background-color 220ms ease, box-shadow 220ms ease;
}

.round-control {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
}

.round-control:hover,
.replay-button:hover { transform: translateY(-3px); background: rgba(45, 54, 91, .94); }
.round-control:active,
.replay-button:active { transform: translateY(0) scale(.94); }
.round-control[aria-pressed="true"] { color: #2e3154; background: var(--cream); }

button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 4px;
}

.icon {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sound-off { display: none; }
#sound-toggle[aria-pressed="false"] .icon-sound-on { display: none; }
#sound-toggle[aria-pressed="false"] .icon-sound-off { display: block; }

.star-progress {
  position: absolute;
  z-index: 6;
  bottom: max(2rem, var(--safe-bottom));
  left: max(2rem, var(--safe-left));
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(23, 25, 52, .6);
  pointer-events: none;
}

.star-row { display: flex; gap: 6px; }
.star-row svg {
  width: clamp(28px, 3.2vw, 48px);
  fill: rgba(35, 43, 77, .38);
  stroke: var(--cream);
  stroke-width: 1.8;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(24, 28, 61, .45));
  transition: fill 560ms var(--ease-out), transform 560ms var(--ease-out), filter 560ms ease;
}
.star-row svg.found {
  fill: var(--gold);
  stroke: #fff4c5;
  transform: translateY(-3px) rotate(8deg) scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255, 215, 107, .9));
}
.star-progress output { font-family: Georgia, serif; font-size: clamp(1rem, 1.6vw, 1.45rem); white-space: nowrap; }

.unicorn-message {
  position: absolute;
  z-index: 6;
  left: 58%;
  top: 48%;
  max-width: 21rem;
  margin: 0;
  padding: 1rem 1.55rem;
  border: 0;
  border-radius: 52% 48% 48% 44% / 44% 46% 54% 56%;
  color: #38405e;
  background: rgba(255, 240, 201, .94);
  box-shadow: 0 10px 24px rgba(35, 31, 67, .22);
  font-family: Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-1deg);
  transform-origin: 18% 100%;
  transition: opacity 260ms ease, transform 420ms var(--ease-out);
  pointer-events: none;
}
.unicorn-message::after {
  content: "";
  position: absolute;
  left: 20%;
  bottom: -13px;
  width: 22px;
  height: 22px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  transform: rotate(8deg);
}
.unicorn-message.is-changing { opacity: 0; transform: translate(-50%, -44%) scale(.9) rotate(-1deg); }

.celebration {
  position: absolute;
  z-index: 9;
  inset: auto 50% max(3.4rem, calc(var(--safe-bottom) + 2.8rem)) auto;
  width: min(32rem, calc(100vw - 2rem));
  color: #342a58;
  transform: translateX(50%);
  text-align: center;
  filter: drop-shadow(0 12px 24px rgba(27, 26, 59, .3));
}
.celebration[hidden] { display: none; }
.celebration-copy {
  padding: 1rem 1.4rem .9rem;
  background: var(--cream);
  border: 2px solid rgba(247, 200, 99, .88);
  border-radius: 50% 48% 45% 55% / 48% 52% 47% 53%;
}
.celebration h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.8rem); }
.celebration p { margin: .3rem 0 0; font-weight: 650; }
.replay-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  padding: .68rem 1.1rem;
  border-radius: 999px;
  font-weight: 800;
}
.replay-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.loading,
.fallback {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  color: var(--cream);
  background: #4e5da9;
  text-align: center;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}
.loading.is-ready { opacity: 0; visibility: hidden; }
.loading-star {
  width: 42px;
  aspect-ratio: 1;
  background: var(--gold);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 93%,50% 71%,21% 93%,32% 57%,2% 35%,39% 35%);
  animation: loading-turn 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(248, 207, 95, .75));
}
.fallback { z-index: 30; padding: 2rem; }
.fallback[hidden] { display: none; }
.fallback svg { width: 120px; fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.fallback h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; }
.fallback p { max-width: 34ch; margin: 0; line-height: 1.6; }

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

@keyframes loading-turn {
  0%, 100% { transform: rotate(-10deg) scale(.92); }
  50% { transform: rotate(12deg) scale(1.12); }
}

@media (max-width: 780px) {
  .world { min-height: 420px; }
  .world:not(.is-awake) .world-stage-plate { opacity: 1; }
  .world.is-awake .world-stage-plate { opacity: 0; }
  .world:not(.is-awake) .title-lockup,
  .world:not(.is-awake) .scene-controls,
  .world:not(.is-awake) .star-progress,
  .world:not(.is-awake) .unicorn-message { opacity: 1; }
  .title-lockup { max-width: calc(100vw - 8.5rem); }
  .title-lockup h1 { font-size: clamp(3.5rem, 17vw, 6.4rem); line-height: .72; }
  .title-lockup p { margin: .65rem 0 0 .35rem; font-size: .9rem; }
  .round-control { width: 46px; height: 46px; padding: 11px; }
  .unicorn-message { left: 58%; top: 58%; max-width: 12rem; padding: .65rem .9rem; font-size: .82rem; }
  .star-progress { gap: 8px; }
  .star-row { gap: 2px; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .title-lockup { max-width: calc(100vw - 7rem); }
  .title-lockup h1 { font-size: clamp(3.15rem, 15vw, 4.25rem); line-height: .8; }
  .scene-controls { gap: 7px; }
  .round-control { width: 46px; height: 46px; border-width: 1.5px; }
  .star-progress { bottom: calc(var(--safe-bottom) + .1rem); flex-direction: column; align-items: flex-start; gap: 2px; }
  .star-row svg { width: 24px; }
  .unicorn-message { left: 55%; top: 61%; }
  .celebration { bottom: max(5.5rem, calc(var(--safe-bottom) + 4.5rem)); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .title-lockup h1 { font-size: clamp(3rem, 10vw, 5.3rem); }
  .title-lockup p { margin-top: .3rem; }
  .round-control { width: 46px; height: 46px; padding: 11px; }
  .unicorn-message { top: 53%; }
}

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

.world.reduce-motion *,
.world.reduce-motion *::before,
.world.reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}