:root {
  --sky-top: #8FDFFF;
  --sky-low: #FFF6C9;
  --night-top: #1D1F5C;
  --night-low: #5B4AA0;
  --ground: #FFC95C;
  --ground-low: #F7A93D;
  --ink: #20324A;
  --ground-height: 40vh;
}

@media (orientation: landscape) {
  :root { --ground-height: 34vh; }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky-low);
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; width: 100%; height: 100%; overflow: visible; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}

/* The world */
#scene { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(var(--sky-top), var(--sky-low) 62%); }
.sky-night { position: absolute; inset: 0; background: linear-gradient(var(--night-top), var(--night-low) 70%); opacity: 0; transition: opacity 1.4s ease; }
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.stars i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: twinkle 2.4s ease-in-out infinite; }
.sun { position: absolute; top: 5vh; right: 9vw; width: min(22vw, 20vh); height: min(22vw, 20vh); transition: transform 1.4s ease, opacity 1.4s ease; }
.moon { position: absolute; top: 5vh; left: 12vw; width: min(20vw, 18vh); height: min(20vw, 18vh); transform: translateY(-40vh); transition: transform 1.4s ease; }
.cloud { position: absolute; height: auto; opacity: .92; transition: opacity 1.4s ease; }
.cloud-a { top: 11vh; left: 6vw; width: min(30vw, 24vh); aspect-ratio: 200 / 90; animation: drift 26s ease-in-out infinite alternate; }
.cloud-b { top: 24vh; right: 2vw; width: min(22vw, 18vh); aspect-ratio: 200 / 90; animation: drift 34s ease-in-out infinite alternate-reverse; }
.volcano { position: absolute; left: 22%; bottom: calc(var(--ground-height) - 2vh); width: min(64vw, 40vh); height: min(42vw, 26vh); transform: translateX(-50%); }
.puff { transform-box: fill-box; transform-origin: center; animation: puff 5s ease-out infinite; }
.puff-b { animation-delay: 2.5s; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground-height); background: linear-gradient(var(--ground), var(--ground-low)); transition: filter 1.4s ease; }
.ground-edge { position: absolute; left: 0; bottom: 100%; width: 100%; height: 5vh; margin-bottom: -1px; }
.ground-edge path { fill: var(--ground); }
.fern { position: absolute; bottom: calc(100% - 3vh); width: min(18vw, 15vh); height: min(22vw, 19vh); }
.fern-l { left: 2vw; }
.fern-r { right: 3vw; transform: scaleX(-1); }

/* Night falls when the dino sleeps */
body.night .sky-night,
body.night .stars { opacity: 1; }
body.night .sun { transform: translateY(45vh); opacity: 0; }
body.night .moon { transform: none; }
body.night .cloud { opacity: .18; }
body.night .ground { filter: brightness(.48) saturate(.8) hue-rotate(-14deg); }

/* The dinosaur */
.d-eyes-happy, .d-eyes-shut, .d-mouth-open { display: none; }
.dino[data-eyes="happy"] .d-eyes-open,
.dino[data-eyes="shut"] .d-eyes-open { display: none; }
.dino[data-eyes="happy"] .d-eyes-happy { display: block; }
.dino[data-eyes="shut"] .d-eyes-shut { display: block; }
.dino[data-mouth="open"] .d-mouth-smile { display: none; }
.dino[data-mouth="open"] .d-mouth-open { display: block; }

.d-body, .d-head, .d-tail, .d-eyes-open, .d-pupils { transform-box: fill-box; }
.d-body { transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.d-head { transform-origin: 50% 90%; animation: nod 2.6s ease-in-out infinite; }
.d-tail { transform-origin: 0% 70%; animation: wag 1.8s ease-in-out infinite; }
.d-eyes-open { transform-origin: center; animation: blink 4.6s infinite; }
.d-pupils { animation: glance 9s ease-in-out infinite; }

.crack { opacity: 0; }

/* Hold-to-exit button, for grown-ups */
#home {
  position: fixed;
  z-index: 30;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  width: 52px;
  height: 52px;
  opacity: .7;
}
#home path { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
#home .ring { fill: rgb(32 50 74 / .35); stroke: #fff; stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
#home.holding .ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
#home:focus-visible { outline: 4px solid #fff; border-radius: 50%; }

/* Shows that a controller has been found */
#pad-badge {
  position: fixed;
  z-index: 30;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  width: 64px;
  height: 40px;
  margin-left: -32px;
  pointer-events: none;
  animation: pad-in .5s cubic-bezier(.3,1.8,.5,1);
}
#pad-badge .pad-body { fill: #fff; }
.pad-marks { fill: none; stroke: #20324A; stroke-width: 5; stroke-linecap: round; }
.pad-dot { fill: #FF5D87; }

/* Connects a controller Chrome can't find by itself */
#pad-connect {
  position: fixed;
  z-index: 30;
  top: calc(6px + env(safe-area-inset-top));
  left: 50%;
  width: 76px;
  height: 52px;
  margin-left: -38px;
  padding: 6px;
  opacity: .85;
}
#pad-connect .pad-body { fill: rgb(32 50 74 / .6); stroke: #fff; stroke-width: 2.5; }
#pad-connect .pad-marks { stroke: #fff; }
#pad-connect .pad-dot { fill: #fff; }
#pad-connect:hover { opacity: 1; }
#pad-connect:focus-visible { opacity: 1; outline: 4px solid #fff; border-radius: 12px; }
@keyframes pad-in { from { transform: scale(0); } }

/* Music on and off, for grown-ups */
#music {
  position: fixed;
  z-index: 30;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: 52px;
  height: 52px;
  opacity: .7;
}
#music circle { fill: rgb(32 50 74 / .35); }
#music .note { fill: #fff; }
#music .off { display: none; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
#music.muted .off { display: block; }
#music:focus-visible { outline: 4px solid #fff; border-radius: 50%; }

#fx { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.fx-item { position: absolute; }

@keyframes twinkle { 50% { opacity: .35; } }
@keyframes drift { to { transform: translateX(7vw); } }
@keyframes puff {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translateY(-46px) scale(1.5); opacity: 0; }
}
@keyframes breathe { 50% { transform: scale(1.015, .985); } }
@keyframes nod { 50% { transform: translateY(5px) rotate(-1deg); } }
@keyframes wag { 50% { transform: rotate(6deg); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }
@keyframes glance { 0%, 40%, 100% { transform: translate(0, 0); } 48%, 60% { transform: translate(-7px, 2px); } 68%, 80% { transform: translate(6px, -2px); } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .puff, .stars i, .d-body, .d-head, .d-tail, .d-pupils { animation: none; }
}