:root {
  --theme-gold: #fdc803;
  --theme-blue: #0aa2fd;
  --theme-violet: #b22df8;
  --theme-cyan: #03d5fc;
  --sky-top: #f4fbff;
  --sky-mid: #dcf4ff;
  --sky-bottom: #fff4cf;
  --ground-height: clamp(10rem, 22vh, 15rem);
  --scene-sky-top: var(--sky-top);
  --scene-sky-mid: var(--sky-mid);
  --scene-sky-bottom: var(--sky-bottom);
  --scene-sun-core: rgba(255, 247, 198, 0.96);
  --scene-sun-mid: rgba(253, 200, 3, 0.86);
  --scene-sun-fade: rgba(253, 200, 3, 0.1);
  --scene-glow-left: rgba(3, 213, 252, 0.26);
  --scene-glow-right: rgba(178, 45, 248, 0.18);
  --scene-sky-pattern: none;
  --scene-sky-pattern-size: auto;
  --scene-sky-pattern-opacity: 0;
  --scene-ground-overlay: linear-gradient(180deg, rgba(163, 230, 53, 0.86), rgba(16, 185, 129, 0.76) 48%, rgba(6, 95, 70, 0.92));
  --scene-ground-pattern-size: 100% 100%;
  --scene-ground-border: rgba(217, 249, 157, 0.5);
  --scene-ground-overlay-opacity: 0.86;
  --scene-filter: saturate(1) brightness(1);
  --scene-cloud-filter: none;
  --scene-mountain-filter: none;
  --scene-tree-filter: none;
  --scene-ground-filter: drop-shadow(0 -10px 18px rgba(253, 200, 3, 0.1));
  --site-header-height: 4.75rem;
  --readable-text: #0f172a;
  --readable-muted: rgba(51, 65, 85, 0.82);
  --readable-subtle: rgba(71, 85, 105, 0.62);
  --readable-panel: rgba(255, 255, 255, 0.76);
  --readable-panel-strong: rgba(255, 255, 255, 0.9);
  --readable-border: rgba(15, 23, 42, 0.16);
  --readable-divider: rgba(15, 23, 42, 0.14);
  --readable-link: #0369a1;
  --readable-hover: rgba(15, 23, 42, 0.08);
  --scrollbar-track: var(--scene-sun-fade);
  --scrollbar-thumb: var(--scene-sun-mid);
  --scrollbar-thumb-hover: var(--scene-sun-core);
}

* {
  box-sizing: border-box;
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover), var(--scrollbar-thumb));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[class~="overflow-y-auto"],
[class~="overflow-auto"] {
  scrollbar-gutter: stable;
}

[class~="overflow-x-auto"] {
  scrollbar-gutter: stable;
}

html,
body,
#app-root,
.site-main,
button,
a,
[role="button"] {
  touch-action: manipulation;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  position: relative;
  overflow: hidden;
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  color: #17314f;
  background: linear-gradient(180deg, var(--scene-sky-top) 0%, var(--scene-sky-mid) 58%, var(--scene-sky-bottom) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(253, 200, 3, 0.32), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(178, 45, 248, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 36%);
  pointer-events: none;
}

body[data-route="game"] {
  overflow: hidden;
}

body[data-route="game"] .scene__band--ground {
  display: none;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(180deg, var(--scene-sky-top) 0%, var(--scene-sky-mid) 60%, var(--scene-sky-bottom) 100%);
  filter: var(--scene-filter, none);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--scene-sky-pattern);
  background-size: var(--scene-sky-pattern-size);
  opacity: var(--scene-sky-pattern-opacity);
  pointer-events: none;
}

.scene__sun,
.scene__glow {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}

.scene__sun {
  top: clamp(2rem, 4vw, 4rem);
  right: clamp(2rem, 10vw, 10rem);
  width: clamp(7rem, 16vw, 12rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--scene-sun-core) 0%, var(--scene-sun-mid) 52%, var(--scene-sun-fade) 74%, transparent 76%);
  box-shadow: 0 0 70px rgba(253, 200, 3, 0.3);
  animation: sun-float 10s ease-in-out infinite;
}

.scene__glow--left {
  top: 12%;
  left: -8rem;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, var(--scene-glow-left), transparent 72%);
}

.scene__glow--right {
  top: 26%;
  right: -6rem;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, var(--scene-glow-right), transparent 72%);
}

.scene__band {
  position: absolute;
  left: -2vw;
  width: 104vw;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.scene__band--clouds {
  top: 4%;
  height: 27vh;
  min-height: 10rem;
}

.scene__band--mountains {
  bottom: 22vh;
  height: 30vh;
  min-height: 12rem;
}

.scene__band--trees {
  bottom: 11vh;
  height: 26vh;
  min-height: 11rem;
}

.scene__band--ground {
  bottom: 0;
  height: var(--ground-height);
  border-top: 2px solid var(--scene-ground-border);
}

.scene__band--ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--scene-ground-overlay);
  background-size: var(--scene-ground-pattern-size);
  opacity: var(--scene-ground-overlay-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.scene__track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: max-content;
  animation: layer-drift var(--drift-duration) linear infinite;
  animation-play-state: paused;
  --tile-count: 10;
  --layer-scale: 1;
}

body[data-game-phase="playing"] .scene__track {
  animation-play-state: running;
}

.scene__track img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: calc(100% * var(--layer-scale));
  object-fit: contain;
  object-position: bottom left;
}

.scene__track--clouds {
  --layer-scale: 1;
  --drift-duration: var(--scene-cloud-drift-duration, 54s);
  opacity: 0.92;
  filter: var(--scene-cloud-filter, none);
}

.scene__track--mountains {
  --layer-scale: 1.08;
  --drift-duration: var(--scene-mountain-drift-duration, 32s);
  opacity: 0.96;
  filter: var(--scene-mountain-filter, none);
}

.scene__track--trees {
  --layer-scale: 1.18;
  --drift-duration: var(--scene-tree-drift-duration, 18s);
  opacity: 0.96;
  filter: var(--scene-tree-filter, none);
}

.scene__track--ground {
  --layer-scale: 1;
  --drift-duration: var(--scene-ground-drift-duration, 8s);
  filter: var(--scene-ground-filter, drop-shadow(0 -10px 18px rgba(253, 200, 3, 0.1)));
}

.scene__track--mountains img {
  /* Compensates the 255px mountain canvas increase from 420px to 675px. */
  transform: translateY(37.78%);
}

body[data-skin="bit8"] .scene__track--ground img,
body[data-skin="cyber"] .scene__track--ground img {
  image-rendering: pixelated;
}

.site-main {
  position: relative;
  z-index: 5;
  min-height: calc(100vh - var(--ground-height));
  padding: clamp(1.25rem, 3vh, 2rem) 1rem 0;
}

body[data-route="game"] .site-main {
  min-height: 100vh;
  padding: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-height);
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  pointer-events: auto;
}

body[data-route="login"] .site-main,
body[data-route="register"] .site-main,
body[data-route="forgot"] .site-main {
  display: grid;
  place-items: center;
}

#app-root {
  width: 100%;
}

.readable-text {
  color: var(--readable-text);
}

.readable-muted {
  color: var(--readable-muted);
}

.readable-subtle {
  color: var(--readable-subtle);
}

.readable-link {
  color: var(--readable-link);
}

.readable-panel {
  color: var(--readable-text);
  background: var(--readable-panel);
  border-color: var(--readable-border);
}

.readable-panel-strong {
  color: var(--readable-text);
  background: var(--readable-panel-strong);
  border-color: var(--readable-border);
}

.readable-divider {
  background: var(--readable-divider);
}

.readable-hover:hover {
  background: var(--readable-hover);
}

@keyframes layer-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / var(--tile-count)));
  }
}

@keyframes sun-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .site-main {
    min-height: calc(100dvh - var(--ground-height));
    padding: 1.2rem 1rem 0;
  }

  .scene__band--clouds {
    height: 22vh;
  }

  .scene__band--mountains {
    bottom: 20vh;
    height: 24vh;
  }

  .scene__band--trees {
    bottom: 11vh;
    height: 21vh;
  }

  .scene__band--ground {
    height: clamp(8rem, 17vh, 10rem);
  }

  .scene__track--clouds {
    --layer-scale: 1;
  }

  .scene__track--mountains {
    --layer-scale: 1.02;
  }

  .scene__track--trees {
    --layer-scale: 1.08;
  }

  .scene__track--ground {
    --layer-scale: 1;
  }
}

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