:root {
  color-scheme: dark light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --logo-font: "Fira Code", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  background: #050505;
  color: #f4f4ef;
  --panel: rgba(14, 15, 16, 0.92);
  --ink: #f4f4ef;
  --muted: #a7a7a0;
  --cyan: #36e2ff;
  --pink: #ff4fd8;
  --gold: #ffd100;
  --red: #ff3338;
  --blue: #7ad7ff;
  --button-blue: #4d8dff;
  --deep-blue: #1f5fff;
  --lavender: #d9c2ff;
  --violet: #9d79ff;
  --purple: #704cff;
  --deep-violet: #5b35c8;
  --phone-frame: 430px;
  --screen-gutter: 6px;
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fira-code-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/fira-code-bold.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
.shop-button {
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-weight: 780;
  letter-spacing: 0;
  text-decoration: none;
  touch-action: manipulation;
}

.app {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: linear-gradient(180deg, #060508 0%, #0d0916 52%, #050505 100%);
}

.screen {
  position: relative;
  min-height: 100dvh;
  width: min(100vw, var(--phone-frame));
}

.menu-screen,
.game-screen,
.sunset-screen {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(230, 191, 255, 0.48), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(165, 96, 255, 0.46), transparent 31%),
    radial-gradient(circle at 66% 20%, rgba(244, 202, 255, 0.3), transparent 25%),
    linear-gradient(180deg, rgba(4, 4, 8, 0.62), rgba(8, 6, 18, 0.68));
  background-size: 230% 230%, 220% 220%, 250% 250%, 100% 100%;
  animation: menuColorFlow 12s ease-in-out infinite alternate;
}

.screen::before,
.screen::after {
  position: absolute;
  z-index: 0;
  width: 150vmin;
  height: 150vmin;
  border-radius: 48% 52% 43% 57%;
  content: "";
  filter: blur(48px) saturate(1.28);
  opacity: 0.36;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  animation: smokeDrift 9s ease-in-out infinite alternate;
}

.screen::before {
  top: -18vmin;
  left: -52vmin;
  background:
    radial-gradient(circle at 35% 38%, rgba(236, 199, 255, 0.82), transparent 34%),
    radial-gradient(circle at 62% 58%, rgba(151, 82, 255, 0.7), transparent 42%);
}

.screen::after {
  right: -54vmin;
  bottom: -20vmin;
  background:
    radial-gradient(circle at 42% 44%, rgba(210, 124, 255, 0.82), transparent 36%),
    radial-gradient(circle at 64% 56%, rgba(132, 68, 238, 0.72), transparent 44%);
  animation-duration: 13s;
  animation-delay: -5s;
}

.screen > * {
  position: relative;
  z-index: 1;
}

.menu-screen {
  display: grid;
  justify-items: center;
  align-items: start;
  padding: max(6px, env(safe-area-inset-top)) var(--screen-gutter) max(10px, env(safe-area-inset-bottom));
  text-align: center;
}

.title-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  padding-top: 2px;
}

.brand-logo {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--logo-font);
  font-size: clamp(52px, 14vw, 68px);
  font-weight: 400;
  line-height: 0.9;
  color: #ffffff;
  text-shadow: 0 0 22px rgba(187, 151, 255, 0.28);
}

.brand-logo::before,
.brand-logo::after {
  content: none;
}

.brand-logo::before {
  top: 14%;
  transform: rotate(-7deg);
}

.brand-logo::after {
  bottom: 18%;
  transform: rotate(5deg);
}

.logo-r {
  color: inherit;
  font-weight: 700;
}

.logo-rest {
  color: inherit;
  font-weight: 400;
}

.tagline {
  margin: 8px 0 22px;
  color: var(--muted);
  font-size: 16px;
}

.menu-actions {
  display: grid;
  width: 100%;
  gap: 24px;
  margin-top: 92px;
}

.primary-button,
.secondary-button,
.shop-button,
.save-button,
.action-grid button {
  min-height: 54px;
  padding: 0 18px;
}

.primary-button {
  background: linear-gradient(135deg, #5d94ff, #0d55ff);
  color: #f8fbff;
  box-shadow: 0 10px 40px rgba(77, 141, 255, 0.24);
}

.secondary-button {
  background: rgba(255, 255, 255, 0.11);
}

.free-menu-button {
  background: linear-gradient(135deg, #8f69f2, #4e2bb8);
  color: #ffffff;
}

.shop-button {
  display: grid;
  place-items: center;
  border: 2px solid rgba(230, 205, 255, 0.96);
  background: linear-gradient(135deg, var(--lavender), var(--violet));
  color: #130a24;
}

.game-screen,
.sunset-screen {
  display: grid;
  gap: 6px;
  height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) var(--screen-gutter) max(10px, env(safe-area-inset-bottom));
}

.game-screen {
  grid-template-rows: auto auto auto;
  align-content: start;
  padding-top: max(6px, env(safe-area-inset-top));
}

.sunset-screen {
  align-content: start;
  grid-template-rows: auto auto auto;
  padding-top: max(6px, env(safe-area-inset-top));
}

.randomizer-panel {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 116px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: var(--panel);
}

.free-header {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 0;
  padding: 0 4px;
  text-align: center;
}

.randomizer-panel {
  grid-template-columns: 1fr 96px;
}

.free-randomizer-panel {
  grid-template-columns: auto;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sunset-header {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 0;
  padding: 0 4px;
  text-align: center;
}

.back-button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.09);
}

.screen-subtitle {
  margin: 0 0 6px;
  color: rgba(244, 244, 239, 0.72);
  font-size: 16px;
  line-height: 1.2;
}

.randomizer-canvas {
  width: 116px;
  height: 116px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #050506;
}

.canvas-wrap,
.sunset-canvas-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.canvas-wrap {
  background: #ffffff;
  align-self: center;
  width: min(100%, max(240px, calc(100dvh - 405px)));
  min-width: 0;
  aspect-ratio: 1;
  justify-self: center;
}

.sunset-canvas-wrap {
  align-self: center;
  width: min(100%, calc(100dvh - 174px));
  aspect-ratio: 1;
  justify-self: center;
  background: #000000;
}

#paintCanvas,
#sunsetCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.target-marker {
  --target-progress: 1;
  --target-angle: 1turn;
  --target-color: var(--pink);
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(circle, #ffffff 0 42%, transparent 43%),
    conic-gradient(var(--target-color) calc(var(--target-progress) * 1turn), rgba(17, 17, 17, 0.1) 0);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.56), 0 0 24px rgba(0, 0, 0, 0.18);
}

.target-marker::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--target-color);
  content: "";
  transform: translate(-50%, -50%) rotate(var(--target-angle)) translateY(-24px);
}

.controls,
.sunset-controls {
  display: grid;
  gap: 8px;
}

.controls {
  align-content: start;
  align-self: start;
  justify-self: center;
  width: min(100%, 430px);
}

.sunset-controls {
  align-content: start;
  align-self: start;
  grid-template-rows: auto auto auto 70px auto;
  justify-self: center;
  width: min(100%, 430px);
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-grid button {
  background: #17191b;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.controls .action-grid {
  margin-top: 2px;
}

.controls .action-grid button {
  min-height: 44px;
  font-family: var(--logo-font);
  font-size: 16px;
  background: #ffffff;
  color: #101010;
}

.utility-grid {
  display: grid;
  grid-template-columns: 0.7fr 0.7fr 1.2fr;
  gap: 8px;
  margin-top: 22px;
}

.sunset-action {
  display: grid;
  grid-row: 2;
  min-height: 56px;
  width: min(58%, 240px);
  place-items: center;
  justify-self: center;
  padding: 6px 18px;
  border: 3px solid currentColor;
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 8px 0 rgba(255, 255, 255, 0.18), 0 16px 34px rgba(0, 0, 0, 0.28);
}

.sunset-action span {
  font-size: 19px;
  font-weight: 900;
}

.sunset-action small {
  font-size: 14px;
  font-weight: 800;
}

.sun-action {
  border-color: var(--red);
}

.ray-action {
  border-color: var(--gold);
}

.sea-action {
  border-color: var(--blue);
}

.done-action {
  border-color: var(--button-blue);
  background: linear-gradient(135deg, #5d94ff, #0d55ff);
  color: #ffffff;
}

.sunset-reset-button,
.sunset-menu-button {
  min-height: 50px;
  justify-self: center;
  width: min(72%, 280px);
}

.sunset-reset-button {
  grid-row: 3;
  background: linear-gradient(135deg, #5d94ff, #0d55ff);
  color: #ffffff;
}

.sunset-menu-button {
  grid-row: 5;
  align-self: end;
  background: linear-gradient(135deg, var(--lavender), var(--violet));
  color: #130a24;
}

.free-menu-control {
  background: linear-gradient(135deg, var(--lavender), var(--violet));
  color: #130a24;
}

.reset-button {
  background: linear-gradient(135deg, var(--violet), var(--deep-violet));
  color: #ffffff;
}

.action-grid button:active,
.primary-button:active,
.secondary-button:active,
.shop-button:active,
.save-button:active,
.sunset-action:active {
  transform: translateY(1px) scale(0.99);
}

.save-button {
  width: 100%;
  background: linear-gradient(135deg, var(--purple), #4021a8);
  color: #ffffff;
}

#downloadLink {
  display: grid;
  min-height: 52px;
  place-items: center;
  border-radius: 8px;
  background: rgba(54, 226, 255, 0.16);
  color: var(--cyan);
  font-weight: 800;
  text-decoration: none;
}

#sunsetInstruction {
  margin: 0;
  font-size: 18px;
  line-height: 1.05;
}

#sunsetCounter {
  font-size: 18px;
}

.sun-counter {
  color: var(--red);
}

.ray-counter {
  color: var(--gold);
}

.sea-counter {
  color: var(--blue);
}

.done-counter {
  color: var(--button-blue);
}

.sunset-title-row {
  display: flex;
  grid-row: 1;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

@keyframes smokeDrift {
  0% {
    border-radius: 48% 52% 43% 57%;
    opacity: 0.2;
    transform: translate3d(-16%, 6%, 0) scale(0.82) rotate(0deg);
  }

  32% {
    border-radius: 42% 58% 62% 38%;
    opacity: 0.52;
    transform: translate3d(8%, -7%, 0) scale(1.08) rotate(12deg);
  }

  68% {
    border-radius: 62% 38% 44% 56%;
    opacity: 0.44;
    transform: translate3d(18%, 8%, 0) scale(1.22) rotate(-8deg);
  }

  100% {
    border-radius: 38% 62% 56% 44%;
    opacity: 0.3;
    transform: translate3d(-4%, -13%, 0) scale(1.32) rotate(20deg);
  }
}

@keyframes menuColorFlow {
  0% {
    background-position: 0% 0%, 100% 100%, 38% 0%, 0 0;
  }

  28% {
    background-position: 48% 18%, 82% 42%, 12% 58%, 0 0;
  }

  64% {
    background-position: 96% 72%, 20% 18%, 74% 88%, 0 0;
  }

  100% {
    background-position: 42% 100%, 0% 72%, 100% 22%, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-screen,
  .game-screen,
  .sunset-screen,
  .screen::before,
  .screen::after {
    animation: none;
  }
}

[hidden] {
  display: none !important;
}

@media (min-width: 720px) {
  .menu-screen,
  .game-screen,
  .sunset-screen {
    width: min(var(--phone-frame), 100vw);
    max-height: 920px;
  }
}