html.theme-classic,
body.theme-classic,
.theme-preview.theme-classic {
  --app-bg: #f6dd9f;
  --app-bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 38%);
  --app-texture: none;
  --app-pattern-opacity: 1;
  --system-bar-color: #f6dd9f;
  --theme-surface: #fffaf0;
  --theme-surface-strong: #f6dd9f;
  --theme-accent: #2f8f83;
  --theme-accent-contrast: #ffffff;
  --theme-title: var(--theme-accent);
}

html.theme-rainforest,
body.theme-rainforest,
.theme-preview.theme-rainforest {
  --app-bg: #78b85e;
  --app-bg-overlay:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(35, 109, 72, 0.28) 0 16%, transparent 16% 46%, rgba(243, 202, 93, 0.18) 46% 58%, transparent 58%),
    linear-gradient(45deg, transparent 0 32%, rgba(43, 132, 74, 0.3) 32% 43%, transparent 43% 100%);
  --app-texture:
    repeating-linear-gradient(32deg, transparent 0 18px, rgba(32, 95, 55, 0.16) 18px 20px, transparent 20px 42px),
    repeating-linear-gradient(118deg, transparent 0 24px, rgba(228, 201, 99, 0.14) 24px 26px, transparent 26px 54px);
  --app-pattern-opacity: 1;
  --system-bar-color: #78b85e;
  --theme-surface: #fff8de;
  --theme-surface-strong: #cfe487;
  --theme-accent: #287a57;
  --theme-accent-contrast: #ffffff;
  --theme-title: #226f52;
}

body.theme-rainforest::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(130deg, transparent 0 13%, rgba(31, 104, 60, 0.18) 13% 18%, transparent 18% 100%),
    linear-gradient(38deg, transparent 0 24%, rgba(245, 211, 103, 0.12) 24% 29%, transparent 29% 100%),
    repeating-linear-gradient(96deg, transparent 0 42px, rgba(255, 255, 255, 0.08) 42px 44px, transparent 44px 92px);
  opacity: 0.72;
}

html.theme-sunset-lagoon,
body.theme-sunset-lagoon,
.theme-preview.theme-sunset-lagoon {
  --app-bg: #f08f78;
  --app-bg-overlay:
    radial-gradient(ellipse at 18% 16%, rgba(255, 190, 129, 0.42), transparent 34%),
    radial-gradient(ellipse at 78% 20%, rgba(255, 118, 135, 0.36), transparent 34%),
    linear-gradient(180deg, rgba(255, 220, 183, 0.32) 0%, rgba(242, 126, 122, 0.2) 42%, rgba(63, 196, 202, 0.52) 100%),
    linear-gradient(135deg, #f07d72 0%, #e76f8a 48%, #43c3c8 100%);
  --app-texture:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 226, 214, 0.18) 31px 33px, transparent 33px 70px),
    repeating-linear-gradient(92deg, transparent 0 42px, rgba(43, 150, 158, 0.18) 42px 45px, transparent 45px 92px);
  --app-pattern-opacity: 1;
  --system-bar-color: #f08f78;
  --theme-surface: #fff1eb;
  --theme-surface-strong: #ff9f98;
  --theme-accent: #168b94;
  --theme-accent-contrast: #ffffff;
  --theme-title: #cf5572;
  --difficulty-card-bg: rgba(255, 241, 235, 0.94);
  --difficulty-card-border: rgba(207, 85, 114, 0.28);
  --difficulty-card-shadow: 0 12px 26px rgba(98, 63, 72, 0.22);
  --difficulty-featured-bg: #ffb1a0;
  --difficulty-featured-border: #cf5572;
  --difficulty-icon-bg: rgba(255, 220, 211, 0.76);
  --difficulty-icon-border: rgba(207, 85, 114, 0.24);
  --home-secondary-bg: rgba(255, 241, 235, 0.94);
  --home-secondary-color: #cf5572;
}

body.theme-sunset-lagoon::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(214, 251, 250, 0.16) 0 3px, transparent 3px 18px),
    linear-gradient(180deg, transparent 0%, rgba(60, 190, 196, 0.28) 38%, rgba(31, 139, 148, 0.34) 100%);
  opacity: 0.82;
}

html.theme-candy-picnic,
body.theme-candy-picnic,
.theme-preview.theme-candy-picnic {
  --app-bg: #f7bfd3;
  --app-bg-overlay:
    radial-gradient(circle at 16% 18%, rgba(255, 244, 187, 0.68) 0 42px, transparent 43px),
    radial-gradient(circle at 80% 20%, rgba(188, 228, 247, 0.62) 0 58px, transparent 59px),
    radial-gradient(circle at 26% 82%, rgba(255, 226, 145, 0.42) 0 68px, transparent 69px),
    radial-gradient(circle at 78% 76%, rgba(255, 146, 184, 0.28) 0 76px, transparent 77px),
    linear-gradient(180deg, #ffd4e3 0%, #f8c0d4 48%, #bde7f5 100%);
  --app-texture:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.44) 0 5px, transparent 6px),
    radial-gradient(circle at 28% 64%, rgba(255, 245, 188, 0.58) 0 7px, transparent 8px),
    radial-gradient(circle at 46% 34%, rgba(255, 255, 255, 0.38) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 58%, rgba(255, 238, 167, 0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 30%, rgba(255, 255, 255, 0.42) 0 5px, transparent 6px);
  --app-pattern-opacity: 1;
  --system-bar-color: #f7bfd3;
  --theme-surface: #fff9e6;
  --theme-surface-strong: #ffe8a8;
  --theme-accent: #74aee1;
  --theme-accent-contrast: #ffffff;
  --theme-title: #e478a3;
  --difficulty-card-bg: rgba(255, 249, 230, 0.95);
  --difficulty-card-border: rgba(228, 120, 163, 0.24);
  --difficulty-card-shadow: 0 12px 26px rgba(105, 72, 88, 0.18);
  --difficulty-featured-bg: #ffe8a8;
  --difficulty-featured-border: #e478a3;
  --difficulty-icon-bg: rgba(255, 226, 239, 0.78);
  --difficulty-icon-border: rgba(116, 174, 225, 0.22);
  --home-secondary-bg: rgba(255, 249, 230, 0.95);
  --home-secondary-color: #e478a3;
}

body.theme-candy-picnic::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 38%, rgba(255, 255, 255, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 23% 35%, rgba(255, 245, 158, 0.56) 0 4px, transparent 5px),
    radial-gradient(circle at 26% 38%, rgba(255, 255, 255, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 23% 41%, rgba(255, 245, 158, 0.56) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.7) 0 3px, transparent 4px),
    radial-gradient(circle at 73% 21%, rgba(255, 232, 168, 0.54) 0 4px, transparent 5px),
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.7) 0 3px, transparent 4px),
    radial-gradient(circle at 73% 27%, rgba(255, 232, 168, 0.54) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 82%, rgba(255, 255, 255, 0.64) 0 3px, transparent 4px),
    radial-gradient(circle at 61% 79%, rgba(189, 231, 245, 0.58) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 82%, rgba(255, 255, 255, 0.64) 0 3px, transparent 4px),
    radial-gradient(circle at 61% 85%, rgba(189, 231, 245, 0.58) 0 4px, transparent 5px);
  opacity: 0.86;
}

html.theme-rainbow,
body.theme-rainbow,
.theme-preview.theme-rainbow {
  --app-bg: #9be5ff;
  --app-bg-overlay:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.62) 0 46px, transparent 47px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.5) 0 62px, transparent 63px),
    radial-gradient(circle at 16% 72%, rgba(255, 255, 255, 0.96) 0 5px, transparent 6px),
    conic-gradient(from 218deg at 16% 72%, transparent 0deg 224deg, rgba(255, 98, 112, 0.62) 224deg 234deg, rgba(255, 180, 54, 0.62) 234deg 244deg, rgba(255, 241, 74, 0.58) 244deg 254deg, rgba(83, 210, 103, 0.56) 254deg 264deg, rgba(67, 176, 238, 0.6) 264deg 274deg, rgba(147, 102, 234, 0.58) 274deg 284deg, transparent 284deg 360deg),
    linear-gradient(180deg, #bdf2ff 0%, #9ee5ff 48%, #ffc6ea 100%);
  --app-texture:
    radial-gradient(circle at 32% 36%, rgba(255, 232, 78, 0.46) 0 4px, transparent 5px),
    radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.54) 0 6px, transparent 7px),
    radial-gradient(circle at 74% 66%, rgba(255, 107, 168, 0.42) 0 5px, transparent 6px),
    radial-gradient(circle at 90% 42%, rgba(255, 255, 255, 0.48) 0 4px, transparent 5px);
  --app-pattern-opacity: 1;
  --system-bar-color: #9be5ff;
  --theme-surface: #fffaf0;
  --theme-surface-strong: #d9f3fb;
  --theme-accent: #7b72d6;
  --theme-accent-contrast: #ffffff;
  --theme-title: #ea7e9d;
  --difficulty-card-bg: rgba(255, 250, 240, 0.95);
  --difficulty-card-border: rgba(123, 114, 214, 0.22);
  --difficulty-card-shadow: 0 12px 26px rgba(82, 78, 128, 0.18);
  --difficulty-featured-bg: #d9f3fb;
  --difficulty-featured-border: #7b72d6;
  --difficulty-icon-bg: rgba(248, 215, 235, 0.68);
  --difficulty-icon-border: rgba(123, 114, 214, 0.2);
  --home-secondary-bg: rgba(255, 250, 240, 0.95);
  --home-secondary-color: #ea7e9d;
}

body.theme-rainbow::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 26%, rgba(255, 98, 112, 0.46) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 18%, rgba(255, 241, 74, 0.44) 0 5px, transparent 6px),
    radial-gradient(circle at 58% 76%, rgba(83, 210, 103, 0.42) 0 6px, transparent 7px),
    radial-gradient(circle at 74% 34%, rgba(67, 176, 238, 0.46) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 68%, rgba(147, 102, 234, 0.44) 0 6px, transparent 7px),
    radial-gradient(ellipse at 50% 96%, rgba(255, 255, 255, 0.44), transparent 40%);
  opacity: 0.9;
}

html.theme-cozy-campfire,
body.theme-cozy-campfire,
.theme-preview.theme-cozy-campfire {
  --app-bg: #241a18;
  --app-bg-overlay:
    radial-gradient(ellipse at 50% 86%, rgba(255, 151, 54, 0.5), transparent 34%),
    radial-gradient(ellipse at 18% 22%, rgba(183, 67, 50, 0.22), transparent 32%),
    radial-gradient(ellipse at 82% 24%, rgba(240, 174, 79, 0.18), transparent 30%),
    linear-gradient(180deg, #1d1818 0%, #30201c 54%, #5b3221 100%);
  --app-texture:
    repeating-linear-gradient(24deg, transparent 0 26px, rgba(130, 76, 45, 0.16) 26px 29px, transparent 29px 62px),
    repeating-linear-gradient(116deg, transparent 0 34px, rgba(255, 182, 83, 0.09) 34px 36px, transparent 36px 72px);
  --app-pattern-opacity: 1;
  --system-bar-color: #241a18;
  --theme-surface: #fff0cf;
  --theme-surface-strong: #d89a55;
  --theme-accent: #b84d38;
  --theme-accent-contrast: #fff8e9;
  --theme-title: #e1893f;
}

body.theme-cozy-campfire::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 72%, rgba(255, 188, 86, 0.36) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 84%, rgba(214, 78, 48, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 76%, rgba(255, 214, 113, 0.32) 0 1.8px, transparent 3px),
    radial-gradient(circle at 78% 88%, rgba(227, 102, 48, 0.3) 0 2px, transparent 3px),
    linear-gradient(180deg, transparent 0%, rgba(255, 151, 54, 0.12) 100%);
  opacity: 0.86;
}

html.theme-forest,
body.theme-forest,
.theme-preview.theme-forest {
  --app-bg: #6aa161;
  --app-bg-overlay:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(36, 83, 57, 0.18));
  --app-texture: url("../images/bgs/forest.svg");
  --app-bg-size: cover, auto, auto;
  --app-bg-position: center, center, center;
  --app-pattern-opacity: 1;
  --system-bar-color: #6aa161;
  --theme-surface: #fff8de;
  --theme-surface-strong: #c8df85;
  --theme-accent: #2b7553;
  --theme-accent-contrast: #ffffff;
  --theme-title: #245f45;
  --difficulty-card-bg: rgba(255, 248, 222, 0.94);
  --difficulty-card-border: rgba(43, 117, 83, 0.26);
  --difficulty-card-shadow: 0 12px 26px rgba(33, 76, 54, 0.2);
  --difficulty-featured-bg: #c8df85;
  --difficulty-featured-border: #2b7553;
  --difficulty-icon-bg: rgba(255, 248, 222, 0.68);
  --difficulty-icon-border: rgba(43, 117, 83, 0.2);
  --home-secondary-bg: rgba(255, 248, 222, 0.94);
  --home-secondary-color: #245f45;
}

html.theme-ice-mountain,
body.theme-ice-mountain,
.theme-preview.theme-ice-mountain {
  --app-bg: #9bd2ff;
  --app-bg-overlay:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(70, 105, 145, 0.14));
  --app-texture: url("../images/bgs/ice-mountain.svg");
  --app-bg-size: cover, auto, auto;
  --app-bg-position: center, center, center;
  --app-pattern-opacity: 1;
  --system-bar-color: #9bd2ff;
  --theme-surface: #f4fbff;
  --theme-surface-strong: #cfefff;
  --theme-accent: #326b98;
  --theme-accent-contrast: #ffffff;
  --theme-title: #2f5f89;
  --difficulty-card-bg: rgba(244, 251, 255, 0.95);
  --difficulty-card-border: rgba(50, 107, 152, 0.24);
  --difficulty-card-shadow: 0 12px 26px rgba(46, 88, 124, 0.18);
  --difficulty-featured-bg: #cfefff;
  --difficulty-featured-border: #326b98;
  --difficulty-icon-bg: rgba(255, 255, 255, 0.72);
  --difficulty-icon-border: rgba(50, 107, 152, 0.2);
  --home-secondary-bg: rgba(244, 251, 255, 0.95);
  --home-secondary-color: #2f5f89;
}

html.theme-painted-sunset,
body.theme-painted-sunset,
.theme-preview.theme-painted-sunset {
  --app-bg: #eeb9ad;
  --app-bg-overlay:
    linear-gradient(180deg, rgba(255, 246, 230, 0.12), rgba(157, 79, 83, 0.16));
  --app-texture: url("../images/bgs/sunset.svg");
  --app-bg-size: cover, auto, auto;
  --app-bg-position: center, center, center;
  --app-pattern-opacity: 1;
  --system-bar-color: #eeb9ad;
  --theme-surface: #fff4ed;
  --theme-surface-strong: #efb79b;
  --theme-accent: #9a5861;
  --theme-accent-contrast: #ffffff;
  --theme-title: #8e4d5a;
  --difficulty-card-bg: rgba(255, 244, 237, 0.95);
  --difficulty-card-border: rgba(154, 88, 97, 0.24);
  --difficulty-card-shadow: 0 12px 26px rgba(104, 65, 68, 0.2);
  --difficulty-featured-bg: #efb79b;
  --difficulty-featured-border: #9a5861;
  --difficulty-icon-bg: rgba(255, 235, 222, 0.76);
  --difficulty-icon-border: rgba(154, 88, 97, 0.2);
  --home-secondary-bg: rgba(255, 244, 237, 0.95);
  --home-secondary-color: #8e4d5a;
}

html.theme-starry,
body.theme-starry,
.theme-preview.theme-starry {
  --app-bg: #08091d;
  --app-bg-overlay:
    radial-gradient(ellipse at 18% 24%, rgba(255, 116, 172, 0.24), transparent 32%),
    radial-gradient(ellipse at 82% 18%, rgba(255, 157, 80, 0.18), transparent 30%),
    radial-gradient(ellipse at 72% 82%, rgba(115, 153, 255, 0.24), transparent 34%),
    radial-gradient(circle at 50% 118%, rgba(71, 116, 158, 0.42), transparent 34%),
    linear-gradient(180deg, #060816 0%, #111632 48%, #17264a 100%);
  --app-texture:
    radial-gradient(circle at 11% 17%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle at 19% 73%, rgba(255, 255, 255, 0.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 42%, rgba(255, 255, 255, 0.86) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 47% 13%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.7px),
    radial-gradient(circle at 54% 88%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 67% 34%, rgba(255, 255, 255, 0.9) 0 1.3px, transparent 2px),
    radial-gradient(circle at 79% 61%, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 27%, rgba(255, 255, 255, 0.84) 0 1px, transparent 1.8px);
  --app-pattern-opacity: 1;
  --system-bar-color: #08091d;
  --theme-surface: #fffaf0;
  --theme-surface-strong: #d8c0ff;
  --theme-accent: #6f75d8;
  --theme-accent-contrast: #ffffff;
  --theme-title: var(--theme-accent);
}

body.theme-starry::before,
body.theme-starry::after,
body.theme-starry .game::before,
body.theme-starry .app-shell::before,
body.theme-starry .app-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body.theme-starry::before {
  inset: 0;
  z-index: 0;
  opacity: var(--app-pattern-opacity);
  background-image:
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 17% 46%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 26% 79%, rgba(255, 255, 255, 0.78) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 38% 25%, rgba(255, 255, 255, 0.64) 0 1px, transparent 1.7px),
    radial-gradient(circle at 49% 58%, rgba(255, 255, 255, 0.92) 0 1.3px, transparent 2px),
    radial-gradient(circle at 61% 11%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.8px),
    radial-gradient(circle at 73% 42%, rgba(255, 255, 255, 0.82) 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 70%, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 19%, rgba(255, 255, 255, 0.86) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 6% 63%, rgba(255, 255, 255, 0.42) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 14% 84%, rgba(255, 255, 255, 0.72) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 33% 8%, rgba(255, 255, 255, 0.48) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 44% 81%, rgba(255, 244, 206, 0.86) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 57% 37%, rgba(255, 255, 255, 0.4) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 69% 88%, rgba(210, 226, 255, 0.76) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 82% 9%, rgba(255, 240, 220, 0.68) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 96% 83%, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 1.6px);
  animation: starTwinkle 6.5s ease-in-out infinite alternate;
}

body.theme-starry .game::before {
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(255, 245, 220, 0.92) 0 1.9px, rgba(255, 202, 156, 0.22) 2.8px, transparent 5px),
    radial-gradient(circle at 29% 67%, rgba(210, 226, 255, 0.9) 0 1.7px, rgba(139, 181, 255, 0.22) 2.8px, transparent 5px),
    radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.86) 0 1.5px, rgba(255, 255, 255, 0.18) 2.6px, transparent 4.8px),
    radial-gradient(circle at 77% 76%, rgba(255, 220, 235, 0.88) 0 1.8px, rgba(255, 116, 172, 0.2) 2.9px, transparent 5.2px),
    radial-gradient(circle at 91% 39%, rgba(255, 247, 212, 0.82) 0 1.6px, rgba(255, 180, 92, 0.2) 2.7px, transparent 4.8px);
  animation: brightStarPulse 3.8s ease-in-out infinite alternate;
}

body.theme-starry::after,
body.theme-starry .app-shell::before,
body.theme-starry .app-shell::after {
  width: 180px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 100% 50%, #ffffff 0 3px, rgba(255, 255, 255, 0.82) 4px, transparent 8px),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 24%, rgba(255, 255, 255, 0.58) 76%, #ffffff 100%);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.68)) drop-shadow(0 0 16px rgba(120, 191, 255, 0.42));
  z-index: 0;
  opacity: 0;
  backface-visibility: hidden;
  contain: paint;
  rotate: 22deg;
  translate: 0 0;
  will-change: translate, opacity;
}

body.theme-starry::after {
  inset: 10% auto auto -240px;
  z-index: 0;
  animation: shootingStarMain 10s linear infinite;
}

body.theme-starry .app-shell::before {
  width: 132px;
  height: 12px;
  inset: 32% auto auto -180px;
  rotate: 18deg;
  animation: shootingStarMid 13s linear 2.4s infinite;
}

body.theme-starry .app-shell::after {
  width: 96px;
  height: 10px;
  inset: 4% auto auto -150px;
  rotate: 26deg;
  animation: shootingStarSmall 16s linear 5.8s infinite;
}

@keyframes starTwinkle {
  from {
    opacity: 0.58;
  }

  to {
    opacity: 1;
  }
}

@keyframes brightStarPulse {
  from {
    opacity: 0.38;
    filter: brightness(0.8) saturate(0.9);
  }

  to {
    opacity: 1;
    filter: brightness(1.35) saturate(1.18);
  }
}

@keyframes shootingStarMain {
  0%,
  62% {
    opacity: 0;
    translate: 0 0;
  }

  66% {
    opacity: 1;
  }

  82% {
    opacity: 0;
    translate: 124vw 58vh;
  }

  100% {
    opacity: 0;
    translate: 124vw 58vh;
  }
}

@keyframes shootingStarMid {
  0%,
  48% {
    opacity: 0;
    translate: 0 0;
  }

  52% {
    opacity: 0.88;
  }

  68% {
    opacity: 0;
    translate: 112vw 46vh;
  }

  100% {
    opacity: 0;
    translate: 112vw 46vh;
  }
}

@keyframes shootingStarSmall {
  0%,
  70% {
    opacity: 0;
    translate: 0 0;
  }

  74% {
    opacity: 0.72;
  }

  86% {
    opacity: 0;
    translate: 108vw 60vh;
  }

  100% {
    opacity: 0;
    translate: 108vw 60vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-starry::before,
  body.theme-starry::after,
  body.theme-starry .game::before,
  body.theme-starry .app-shell::before,
  body.theme-starry .app-shell::after {
    animation: none;
  }

  body.theme-starry::after,
  body.theme-starry .app-shell::before,
  body.theme-starry .app-shell::after {
    display: none;
  }
}