/* Full scene themes for every existing Kamelenrace theme. */
:root {
    --world-ink: #172033;
    --world-muted: #59657a;
    --world-panel: rgba(255, 255, 255, 0.82);
    --world-panel-strong: rgba(255, 255, 255, 0.94);
    --world-edge: rgba(255, 255, 255, 0.66);
    --world-accent: #0ea5e9;
    --world-accent-2: #14b8a6;
    --world-accent-3: #facc15;
    --world-glow: rgba(14, 165, 233, 0.24);
    --world-button: linear-gradient(135deg, var(--world-accent), var(--world-accent-2));
    --world-track: rgba(255, 255, 255, 0.72);
    --world-track-line: var(--world-accent);
    --world-track-texture: repeating-linear-gradient(90deg, transparent 0 84px, rgba(255, 255, 255, 0.28) 84px 86px);
    --world-badge: rgba(255, 255, 255, 0.78);
    --world-finish-dark: #172033;
    --world-finish-light: #ffffff;
    --world-bg: linear-gradient(135deg, #dbeafe, #99f6e4);
    --world-scene:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.42), transparent 18%),
        linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    --world-scene-size: 100% 100%, 56px 56px, 56px 56px;
    --world-scene-opacity: 0.9;
    --world-atmosphere: linear-gradient(to top, rgba(15, 23, 42, 0.16), transparent 55%);
    --world-atmosphere-size: 100% 100%;
    --world-atmosphere-opacity: 0.78;
    --world-speed: 28s;
    --world-float-speed: 8s;
    --world-scan: rgba(255, 255, 255, 0.3);
    --sprite-emoji: "🐪";
}

body[class*="theme-"] {
    min-height: 100vh;
    color: var(--world-ink);
    background: var(--world-bg) fixed;
    background-size: cover;
    overflow-x: hidden;
    transition: background 0.75s ease, color 0.35s ease;
}

body[class*="theme-"]::before,
body[class*="theme-"]::after {
    content: "";
    position: fixed;
    inset: -14%;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}

body[class*="theme-"]::before {
    background: var(--world-scene);
    background-size: var(--world-scene-size);
    opacity: var(--world-scene-opacity);
    animation: world-scene-drift var(--world-speed) linear infinite;
}

body[class*="theme-"]::after {
    background: var(--world-atmosphere);
    background-size: var(--world-atmosphere-size);
    opacity: var(--world-atmosphere-opacity);
    animation: world-atmosphere-float var(--world-float-speed) ease-in-out infinite alternate;
}

body[class*="theme-"] .site-hero,
body[class*="theme-"] .container {
    position: relative;
    z-index: 1;
}

body[class*="theme-"] .site-hero,
body[class*="theme-"] .panel,
body[class*="theme-"] #lobby,
body[class*="theme-"] #waitingScreen,
body[class*="theme-"] #quiz-container,
body[class*="theme-"] .track-container {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--world-edge);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 46%),
        var(--world-panel);
    color: var(--world-ink);
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.2),
        0 0 44px var(--world-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(19px) saturate(1.18);
}

body[class*="theme-"] .site-hero,
body[class*="theme-"] .track-container {
    overflow: hidden;
}

body[class*="theme-"] .site-hero::before,
body[class*="theme-"] .site-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

body[class*="theme-"] .site-hero::before {
    inset: 0;
    background:
        linear-gradient(102deg, transparent 0 28%, rgba(255, 255, 255, 0.34) 45%, transparent 62% 100%),
        radial-gradient(circle at 14% 24%, var(--world-glow), transparent 24%),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--world-accent-2) 30%, transparent), transparent 24%);
    transform: translateX(-120%);
    animation: world-hero-sweep 7.2s ease-in-out infinite;
}

body[class*="theme-"] .site-hero::after {
    right: -9%;
    top: -48%;
    width: 34%;
    height: 190%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--world-accent) 28%, transparent), transparent 62%),
        radial-gradient(circle at 62% 34%, color-mix(in srgb, var(--world-accent-3) 22%, transparent), transparent 36%);
    filter: blur(2px);
    animation: world-hero-orbit 10s ease-in-out infinite alternate;
}

body[class*="theme-"] .site-hero > *,
body[class*="theme-"] .panel > *,
body[class*="theme-"] #lobby > *,
body[class*="theme-"] #waitingScreen > *,
body[class*="theme-"] #quiz-container > *,
body[class*="theme-"] .track-container > * {
    position: relative;
    z-index: 1;
}

body[class*="theme-"] h1,
body[class*="theme-"] .eyebrow {
    color: #ffffff;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.32);
}

body[class*="theme-"] h2,
body[class*="theme-"] h3,
body[class*="theme-"] h4,
body[class*="theme-"] .field-label {
    color: var(--world-ink);
}

body[class*="theme-"] .hero-stats span,
body[class*="theme-"] .race-meta span,
body[class*="theme-"] #selectedCategoryCount,
body[class*="theme-"] .progress-badge,
body[class*="theme-"] .player-label {
    border-color: color-mix(in srgb, var(--world-accent) 34%, var(--world-edge));
    background: var(--world-badge);
    color: var(--world-ink);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14), 0 0 20px var(--world-glow);
}

body[class*="theme-"] input[type="text"],
body[class*="theme-"] select,
body[class*="theme-"] input[type="password"],
body[class*="theme-"] input[type="number"],
body[class*="theme-"] .cat-item {
    border-color: color-mix(in srgb, var(--world-accent) 24%, var(--world-edge));
    background: color-mix(in srgb, var(--world-panel-strong) 82%, transparent);
    color: var(--world-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

body[class*="theme-"] input::placeholder {
    color: color-mix(in srgb, var(--world-muted) 78%, transparent);
}

body[class*="theme-"] input:focus,
body[class*="theme-"] select:focus {
    border-color: var(--world-accent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--world-accent) 24%, transparent),
        0 0 24px var(--world-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body[class*="theme-"] input[type="checkbox"] {
    accent-color: var(--world-accent);
}

body[class*="theme-"] button,
body[class*="theme-"] .option-btn {
    border: 1px solid color-mix(in srgb, #ffffff 24%, var(--world-accent));
    background: var(--world-button);
    color: #ffffff;
    box-shadow:
        0 16px 34px color-mix(in srgb, var(--world-accent) 27%, transparent),
        0 0 24px var(--world-glow);
    animation: world-button-glow 4.4s ease-in-out infinite alternate;
}

body[class*="theme-"] button:hover,
body[class*="theme-"] .option-btn:hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.12) saturate(1.12);
}

body[class*="theme-"] .panel-title > span {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.46), transparent 32%),
        color-mix(in srgb, var(--world-accent) 22%, transparent);
    box-shadow: 0 12px 30px var(--world-glow), inset 0 0 0 1px var(--world-edge);
}

body[class*="theme-"] .track-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent),
        var(--world-track-texture),
        var(--world-track);
}

body[class*="theme-"] .track-container::before,
body[class*="theme-"] .track-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body[class*="theme-"] .track-container::before {
    background:
        radial-gradient(circle at 12% 20%, var(--world-glow), transparent 18%),
        radial-gradient(circle at 86% 62%, color-mix(in srgb, var(--world-accent-2) 20%, transparent), transparent 18%);
    opacity: 0.78;
}

body[class*="theme-"] .track-container::after {
    background:
        linear-gradient(90deg, transparent, var(--world-scan), transparent),
        repeating-linear-gradient(90deg, transparent 0 108px, color-mix(in srgb, var(--world-accent) 14%, transparent) 108px 110px);
    background-size: 42% 100%, 220px 100%;
    background-position: -45% 0, 0 0;
    opacity: 0.62;
    animation: world-track-scan 4.1s ease-in-out infinite;
}

body[class*="theme-"] .track {
    position: relative;
    overflow: visible;
    border-bottom-color: var(--world-track-line);
}

body[class*="theme-"] .track::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: min(calc(var(--progress, 0%) + 2px), calc(100% - 16px));
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--world-accent-2), var(--world-accent), var(--world-accent-3));
    box-shadow: 0 0 20px var(--world-glow), 0 0 36px var(--world-glow);
    animation: world-progress 1.9s ease-in-out infinite alternate;
}

body[class*="theme-"] .track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 34px;
    bottom: 9px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--world-scan), transparent);
    opacity: 0.88;
}

body[class*="theme-"] #finish {
    background:
        repeating-linear-gradient(45deg, var(--world-finish-dark), var(--world-finish-dark) 8px, var(--world-finish-light) 8px, var(--world-finish-light) 16px);
    box-shadow: 0 0 18px var(--world-glow), 0 0 34px color-mix(in srgb, var(--world-accent) 18%, transparent);
    animation: world-finish 1.9s ease-in-out infinite alternate;
}

body[class*="theme-"] .camel {
    visibility: hidden;
    transform: translateZ(0);
}

body[class*="theme-"] .camel img,
body[class*="theme-"] .camel span {
    display: none !important;
}

body[class*="theme-"] .camel::after {
    content: var(--sprite-emoji, "🐪");
    visibility: visible;
    position: absolute;
    display: block;
    font-size: 52px;
    line-height: 1;
    filter:
        drop-shadow(0 8px 8px color-mix(in srgb, var(--world-accent) 44%, rgba(0, 0, 0, 0.48)))
        drop-shadow(0 0 12px var(--world-glow));
}

body[class*="theme-"] .camel:not(.stepping)::after {
    animation: world-racer-breathe 2.4s ease-in-out infinite;
}

body[class*="theme-"] .camel.stepping::after {
    animation: world-racer-step 0.45s ease-in-out;
}

body[class*="theme-"] .big-timer {
    border-color: color-mix(in srgb, var(--world-accent) 26%, transparent);
    color: var(--world-accent);
    box-shadow:
        0 16px 34px var(--world-glow),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    animation: world-timer 1.6s ease-in-out infinite alternate;
}

body[class*="theme-"] #winnerBanner {
    background: var(--world-button);
    box-shadow: 0 18px 40px var(--world-glow);
}

body.theme-hacker,
body.theme-space,
body.theme-neon,
body.theme-ocean,
body.theme-volcano,
body.theme-jungle,
body.theme-luxury,
body.theme-cyberpunk,
body.theme-arcade,
body.theme-circuit,
body.theme-royal,
body.theme-midnight,
body.theme-wolfpack,
body.theme-dragonden,
body.theme-lynxnight,
body.theme-therianmoon,
body.theme-datacenter,
body.theme-terminal,
body.theme-securityops,
body.theme-retrocrt,
body.theme-quantum {
    --world-ink: #f8fafc;
    --world-muted: #cbd5e1;
    --world-panel: rgba(8, 13, 28, 0.78);
    --world-panel-strong: rgba(18, 27, 48, 0.84);
    --world-edge: rgba(255, 255, 255, 0.18);
    --world-badge: rgba(15, 23, 42, 0.72);
    --world-finish-dark: #f8fafc;
    --world-finish-light: #0f172a;
}

body.theme-desert {
    --sprite-emoji: "🐪";
    --world-ink: #3a2617;
    --world-muted: #704b2d;
    --world-accent: #d97706;
    --world-accent-2: #0f766e;
    --world-accent-3: #fde68a;
    --world-glow: rgba(217, 119, 6, 0.34);
    --world-bg:
        radial-gradient(circle at 78% 15%, rgba(255, 241, 171, 0.92) 0 6%, rgba(255, 241, 171, 0.34) 7%, transparent 16%),
        linear-gradient(180deg, #7dd3fc 0%, #fbbf77 42%, #df7d39 100%);
    --world-scene:
        radial-gradient(ellipse at 18% 78%, rgba(123, 74, 35, 0.22) 0 22%, transparent 23%),
        radial-gradient(ellipse at 68% 82%, rgba(255, 226, 147, 0.48) 0 24%, transparent 25%),
        repeating-linear-gradient(170deg, rgba(115, 69, 29, 0.14) 0 2px, transparent 2px 34px);
    --world-scene-size: 120% 100%, 120% 100%, 180px 140px;
    --world-atmosphere:
        linear-gradient(to top, rgba(125, 74, 32, 0.34), transparent 44%),
        repeating-radial-gradient(ellipse at 50% 104%, rgba(255, 225, 145, 0.36) 0 30px, transparent 31px 78px);
    --world-track: rgba(255, 241, 199, 0.86);
    --world-track-line: #9a5a25;
    --world-track-texture: repeating-linear-gradient(100deg, rgba(154, 90, 37, 0.14) 0 12px, transparent 12px 42px);
    --world-speed: 18s;
}

body.theme-hacker {
    --sprite-emoji: "🤖";
    --world-accent: #00ff80;
    --world-accent-2: #22d3ee;
    --world-accent-3: #bbf7d0;
    --world-glow: rgba(0, 255, 128, 0.4);
    --world-bg:
        radial-gradient(circle at 70% 18%, rgba(0, 255, 128, 0.16), transparent 28%),
        linear-gradient(135deg, #000 0%, #00170a 52%, #003b19);
    --world-scene:
        repeating-linear-gradient(90deg, rgba(0, 255, 128, 0.16) 0 1px, transparent 1px 20px),
        repeating-linear-gradient(0deg, rgba(0, 255, 128, 0.12) 0 1px, transparent 1px 13px),
        linear-gradient(180deg, rgba(0, 255, 128, 0.24), transparent 24%);
    --world-scene-size: 90px 90px, 90px 90px, 100% 180px;
    --world-atmosphere:
        repeating-linear-gradient(180deg, rgba(0, 255, 128, 0.16) 0 2px, transparent 2px 38px),
        radial-gradient(circle at 50% 110%, rgba(0, 255, 128, 0.24), transparent 42%);
    --world-track: rgba(0, 20, 10, 0.86);
    --world-track-texture: repeating-linear-gradient(90deg, rgba(0, 255, 128, 0.12) 0 1px, transparent 1px 22px);
    --world-speed: 7s;
}

body.theme-space {
    --sprite-emoji: "🚀";
    --world-accent: #38bdf8;
    --world-accent-2: #a78bfa;
    --world-accent-3: #f9a8d4;
    --world-glow: rgba(56, 189, 248, 0.36);
    --world-bg:
        radial-gradient(circle at 74% 18%, rgba(125, 211, 252, 0.24), transparent 20%),
        radial-gradient(circle at 18% 72%, rgba(168, 85, 247, 0.28), transparent 28%),
        linear-gradient(135deg, #020617 0%, #10113c 48%, #050510);
    --world-scene:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 62%, rgba(125, 211, 252, 0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 82%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 28%, rgba(168, 85, 247, 0.22) 0 72px, transparent 74px);
    --world-scene-size: 150px 110px, 230px 180px, 310px 240px, 100% 100%;
    --world-atmosphere:
        radial-gradient(ellipse at 50% 118%, rgba(56, 189, 248, 0.22), transparent 44%),
        linear-gradient(to top, rgba(2, 6, 23, 0.76), transparent 58%);
    --world-track: rgba(15, 23, 42, 0.8);
    --world-track-texture: repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.16) 0 1px, transparent 1px 80px);
    --world-speed: 48s;
}

body.theme-neon {
    --sprite-emoji: "🦄";
    --world-accent: #ff1493;
    --world-accent-2: #00bfff;
    --world-accent-3: #facc15;
    --world-glow: rgba(255, 20, 147, 0.42);
    --world-bg:
        radial-gradient(circle at 20% 16%, rgba(255, 20, 147, 0.32), transparent 24%),
        radial-gradient(circle at 78% 72%, rgba(0, 191, 255, 0.26), transparent 26%),
        linear-gradient(145deg, #050011, #170026 54%, #010101);
    --world-scene:
        linear-gradient(rgba(255, 20, 147, 0.28) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 191, 255, 0.28) 2px, transparent 2px),
        repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 28px);
    --world-scene-size: 50px 50px, 50px 50px, 180px 140px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 20, 147, 0.2), transparent 48%),
        repeating-linear-gradient(90deg, transparent 0 48px, rgba(0, 191, 255, 0.1) 48px 50px);
    --world-track: rgba(15, 5, 35, 0.82);
    --world-track-texture: repeating-linear-gradient(90deg, rgba(255, 20, 147, 0.16) 0 2px, transparent 2px 64px);
    --world-speed: 10s;
}

body.theme-ocean {
    --sprite-emoji: "🦈";
    --world-accent: #7fdbff;
    --world-accent-2: #0ea5e9;
    --world-accent-3: #99f6e4;
    --world-glow: rgba(127, 219, 255, 0.38);
    --world-bg:
        radial-gradient(circle at 50% -10%, rgba(127, 219, 255, 0.48), transparent 38%),
        linear-gradient(180deg, #00699d 0%, #00345c 48%, #00101f);
    --world-scene:
        radial-gradient(circle at 18px 80px, rgba(127, 219, 255, 0.34) 0 3px, transparent 4px),
        radial-gradient(circle at 86px 38px, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
        repeating-radial-gradient(circle at 50% -20%, transparent 0, rgba(255, 255, 255, 0.09) 2px, transparent 5px, transparent 18px),
        linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.12) 46%, transparent 52%);
    --world-scene-size: 130px 100px, 130px 100px, 100% 100%, 240px 180px;
    --world-atmosphere:
        radial-gradient(ellipse at 50% 110%, rgba(0, 16, 31, 0.78), transparent 46%),
        linear-gradient(to top, rgba(0, 16, 31, 0.68), transparent 62%);
    --world-track: rgba(0, 52, 88, 0.8);
    --world-track-texture: repeating-linear-gradient(120deg, rgba(127, 219, 255, 0.14) 0 8px, transparent 8px 42px);
    --world-speed: 15s;
}

body.theme-volcano {
    --sprite-emoji: "🐉";
    --world-accent: #ff4136;
    --world-accent-2: #ffb020;
    --world-accent-3: #fee2e2;
    --world-glow: rgba(255, 65, 54, 0.46);
    --world-bg:
        radial-gradient(circle at 26% 84%, rgba(255, 65, 54, 0.46), transparent 30%),
        radial-gradient(circle at 80% 14%, rgba(255, 133, 27, 0.28), transparent 22%),
        linear-gradient(145deg, #111 0%, #2b0f0a 52%, #080506);
    --world-scene:
        radial-gradient(circle at 30px 30px, rgba(255, 65, 54, 0.42) 0 4px, transparent 6px),
        linear-gradient(135deg, rgba(255, 133, 27, 0.2) 0 2px, transparent 2px 34px),
        repeating-linear-gradient(60deg, rgba(0, 0, 0, 0.28) 0 18px, transparent 18px 38px);
    --world-scene-size: 96px 96px, 72px 72px, 180px 160px;
    --world-atmosphere:
        radial-gradient(ellipse at 48% 112%, rgba(255, 65, 54, 0.34), transparent 48%),
        linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 58%);
    --world-track: rgba(31, 17, 12, 0.84);
    --world-track-texture: repeating-linear-gradient(110deg, rgba(255, 65, 54, 0.14) 0 6px, transparent 6px 38px);
    --world-speed: 11s;
}

body.theme-jungle {
    --sprite-emoji: "🐒";
    --world-accent: #2ecc40;
    --world-accent-2: #14b8a6;
    --world-accent-3: #fde68a;
    --world-glow: rgba(46, 204, 64, 0.38);
    --world-bg:
        radial-gradient(circle at 18% 18%, rgba(46, 204, 64, 0.2), transparent 22%),
        radial-gradient(circle at 88% 70%, rgba(61, 153, 112, 0.22), transparent 24%),
        linear-gradient(135deg, #061b08, #0a290a 48%, #102f16);
    --world-scene:
        radial-gradient(ellipse at 18px 20px, rgba(46, 204, 64, 0.26) 0 14px, transparent 15px),
        radial-gradient(ellipse at 74px 50px, rgba(61, 153, 112, 0.22) 0 18px, transparent 19px),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0 5px, transparent 5px 38px);
    --world-scene-size: 120px 88px, 150px 110px, 240px 180px;
    --world-atmosphere:
        linear-gradient(to top, rgba(4, 47, 24, 0.74), transparent 62%),
        radial-gradient(ellipse at 50% 112%, rgba(46, 204, 64, 0.2), transparent 42%);
    --world-track: rgba(4, 47, 24, 0.8);
    --world-track-texture: repeating-linear-gradient(95deg, rgba(46, 204, 64, 0.16) 0 6px, transparent 6px 50px);
    --world-speed: 20s;
}

body.theme-candy {
    --sprite-emoji: "🍰";
    --world-ink: #4a1532;
    --world-muted: #8a4a68;
    --world-accent: #ff1493;
    --world-accent-2: #38bdf8;
    --world-accent-3: #facc15;
    --world-glow: rgba(236, 72, 153, 0.34);
    --world-bg:
        radial-gradient(circle at 22% 24%, rgba(255, 105, 180, 0.32), transparent 22%),
        radial-gradient(circle at 78% 72%, rgba(125, 211, 252, 0.32), transparent 24%),
        linear-gradient(135deg, #ffe6ea, #fff7ad 46%, #ffd1eb);
    --world-scene:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 0 18px, rgba(255, 105, 180, 0.22) 18px 36px),
        radial-gradient(circle at 24px 24px, rgba(255, 20, 147, 0.24) 0 5px, transparent 6px),
        radial-gradient(circle at 72px 54px, rgba(56, 189, 248, 0.24) 0 4px, transparent 5px);
    --world-scene-size: auto, 92px 92px, 92px 92px;
    --world-atmosphere:
        radial-gradient(ellipse at 50% 112%, rgba(255, 20, 147, 0.16), transparent 46%),
        linear-gradient(to top, rgba(255, 255, 255, 0.34), transparent 55%);
    --world-track: rgba(255, 255, 255, 0.88);
    --world-track-texture: repeating-linear-gradient(100deg, rgba(255, 20, 147, 0.13) 0 10px, transparent 10px 48px);
    --world-speed: 13s;
}

body.theme-luxury {
    --sprite-emoji: "💎";
    --world-accent: #ffd700;
    --world-accent-2: #b8860b;
    --world-accent-3: #ffffff;
    --world-glow: rgba(255, 215, 0, 0.4);
    --world-bg:
        radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.28), transparent 28%),
        linear-gradient(135deg, #050505 0%, #17120a 55%, #0b0b0b);
    --world-scene:
        linear-gradient(120deg, rgba(255, 215, 0, 0.22) 0 2px, transparent 2px 40px),
        linear-gradient(60deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 22% 30%, rgba(255, 215, 0, 0.18), transparent 20%);
    --world-scene-size: 120px 120px, 90px 90px, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(0, 0, 0, 0.74), transparent 60%),
        radial-gradient(ellipse at 50% 112%, rgba(255, 215, 0, 0.16), transparent 44%);
    --world-track: rgba(27, 22, 12, 0.84);
    --world-track-texture: repeating-linear-gradient(90deg, rgba(255, 215, 0, 0.14) 0 1px, transparent 1px 68px);
}

body.theme-cyberpunk {
    --sprite-emoji: "🏍️";
    --world-accent: #01cdfe;
    --world-accent-2: #ff71ce;
    --world-accent-3: #fef08a;
    --world-glow: rgba(255, 113, 206, 0.42);
    --world-bg:
        radial-gradient(circle at 16% 18%, rgba(1, 205, 254, 0.26), transparent 22%),
        radial-gradient(circle at 84% 74%, rgba(255, 113, 206, 0.3), transparent 26%),
        linear-gradient(135deg, #0b001a, #180028 55%, #05000d);
    --world-scene:
        linear-gradient(rgba(1, 205, 254, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 113, 206, 0.24) 1px, transparent 1px),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(1, 205, 254, 0.16) 54px 58px, transparent 58px 96px);
    --world-scene-size: 38px 38px, 38px 38px, 220px 160px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 113, 206, 0.2), transparent 50%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 20px, transparent 20px 42px);
    --world-track: rgba(18, 5, 38, 0.84);
    --world-track-texture: repeating-linear-gradient(90deg, rgba(1, 205, 254, 0.16) 0 2px, transparent 2px 60px);
    --world-speed: 9s;
}

body.theme-arctic {
    --sprite-emoji: "⛸️";
    --world-ink: #163447;
    --world-muted: #477286;
    --world-accent: #0284c7;
    --world-accent-2: #14b8a6;
    --world-accent-3: #ffffff;
    --world-glow: rgba(14, 165, 233, 0.34);
    --world-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.78), transparent 24%),
        linear-gradient(135deg, #effcff, #9de9ff 52%, #7dd3fc);
    --world-scene:
        linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0 2px, transparent 2px 32px),
        radial-gradient(circle at 76px 36px, rgba(2, 132, 199, 0.17) 0 10px, transparent 11px),
        linear-gradient(120deg, rgba(20, 184, 166, 0.18), transparent 42%);
    --world-scene-size: 92px 92px, 150px 110px, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.52), transparent 54%),
        radial-gradient(ellipse at 50% 112%, rgba(2, 132, 199, 0.16), transparent 44%);
    --world-track: rgba(240, 253, 255, 0.9);
    --world-track-texture: repeating-linear-gradient(95deg, rgba(2, 132, 199, 0.12) 0 8px, transparent 8px 46px);
}

body.theme-sunset {
    --sprite-emoji: "🏎️";
    --world-ink: #2d2440;
    --world-muted: #5f4c73;
    --world-accent: #f97316;
    --world-accent-2: #7c3aed;
    --world-accent-3: #fef3c7;
    --world-glow: rgba(249, 115, 22, 0.38);
    --world-bg:
        radial-gradient(circle at 70% 14%, rgba(255, 213, 128, 0.62), transparent 18%),
        linear-gradient(180deg, #ffb86b 0%, #ee6b6e 42%, #3b2b7a);
    --world-scene:
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(45, 36, 64, 0.14) 38px 40px),
        linear-gradient(100deg, rgba(255, 255, 255, 0.18), transparent 42%),
        radial-gradient(ellipse at 20% 66%, rgba(255, 255, 255, 0.16) 0 18%, transparent 20%);
    --world-scene-size: 100% 100%, 100% 100%, 120% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(59, 43, 122, 0.62), transparent 58%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 30px, transparent 30px 78px);
    --world-track: rgba(255, 245, 226, 0.88);
}

body.theme-arcade {
    --sprite-emoji: "👾";
    --world-accent: #ff00ff;
    --world-accent-2: #22d3ee;
    --world-accent-3: #a3e635;
    --world-glow: rgba(34, 211, 238, 0.38);
    --world-bg:
        radial-gradient(circle at 24% 18%, rgba(236, 72, 153, 0.32), transparent 22%),
        radial-gradient(circle at 80% 68%, rgba(34, 211, 238, 0.28), transparent 24%),
        linear-gradient(135deg, #111827, #4c1d95 56%, #050008);
    --world-scene:
        linear-gradient(rgba(34, 211, 238, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.22) 2px, transparent 2px),
        radial-gradient(circle at 18px 18px, rgba(163, 230, 53, 0.28) 0 4px, transparent 5px);
    --world-scene-size: 32px 32px, 32px 32px, 96px 96px;
    --world-atmosphere:
        linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 0, 255, 0.12) 18px 20px);
    --world-track: rgba(24, 13, 54, 0.84);
    --world-speed: 8s;
}

body.theme-circuit {
    --sprite-emoji: "⚡";
    --world-accent: #a3e635;
    --world-accent-2: #22d3ee;
    --world-accent-3: #facc15;
    --world-glow: rgba(163, 230, 53, 0.36);
    --world-bg:
        radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.22), transparent 22%),
        radial-gradient(circle at 82% 72%, rgba(163, 230, 53, 0.2), transparent 24%),
        linear-gradient(135deg, #07130f, #164e63);
    --world-scene:
        linear-gradient(rgba(34, 211, 238, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 230, 53, 0.14) 1px, transparent 1px),
        radial-gradient(circle at 22px 22px, rgba(163, 230, 53, 0.28) 0 4px, transparent 5px);
    --world-scene-size: 44px 44px, 44px 44px, 132px 132px;
    --world-atmosphere:
        linear-gradient(to top, rgba(6, 78, 59, 0.5), transparent 56%),
        repeating-linear-gradient(90deg, rgba(163, 230, 53, 0.1) 0 2px, transparent 2px 70px);
    --world-track: rgba(8, 47, 73, 0.78);
}

body.theme-royal {
    --sprite-emoji: "🏰";
    --world-accent: #facc15;
    --world-accent-2: #34d399;
    --world-accent-3: #c4b5fd;
    --world-glow: rgba(250, 204, 21, 0.38);
    --world-bg:
        radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.28), transparent 24%),
        linear-gradient(135deg, #052e2b, #312e81 52%, #031f1e);
    --world-scene:
        linear-gradient(120deg, rgba(250, 204, 21, 0.2) 0 2px, transparent 2px 36px),
        linear-gradient(60deg, rgba(52, 211, 153, 0.14) 0 2px, transparent 2px 42px),
        radial-gradient(circle at 50% 34%, rgba(250, 204, 21, 0.12), transparent 28%);
    --world-scene-size: 116px 116px, 104px 104px, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(3, 31, 30, 0.76), transparent 58%),
        repeating-linear-gradient(90deg, rgba(250, 204, 21, 0.08) 0 16px, transparent 16px 54px);
    --world-track: rgba(16, 36, 48, 0.82);
}

body.theme-festival {
    --sprite-emoji: "🎪";
    --world-ink: #2d2440;
    --world-muted: #665272;
    --world-accent: #f43f5e;
    --world-accent-2: #0ea5e9;
    --world-accent-3: #facc15;
    --world-glow: rgba(244, 63, 94, 0.32);
    --world-bg:
        radial-gradient(circle at 20% 20%, rgba(244, 63, 94, 0.28), transparent 20%),
        radial-gradient(circle at 82% 76%, rgba(14, 165, 233, 0.26), transparent 22%),
        linear-gradient(135deg, #ffe4e6, #bae6fd);
    --world-scene:
        radial-gradient(circle at 18px 18px, rgba(244, 63, 94, 0.4) 0 3px, transparent 4px),
        radial-gradient(circle at 62px 46px, rgba(14, 165, 233, 0.36) 0 3px, transparent 4px),
        radial-gradient(circle at 94px 22px, rgba(250, 204, 21, 0.38) 0 3px, transparent 4px);
    --world-scene-size: 120px 80px, 120px 80px, 120px 80px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.3), transparent 58%),
        repeating-linear-gradient(115deg, rgba(244, 63, 94, 0.16) 0 8px, transparent 8px 34px);
    --world-track: rgba(255, 255, 255, 0.86);
}

body.theme-midnight {
    --sprite-emoji: "🌙";
    --world-accent: #c4b5fd;
    --world-accent-2: #38bdf8;
    --world-accent-3: #f8fafc;
    --world-glow: rgba(196, 181, 253, 0.38);
    --world-bg:
        radial-gradient(circle at 74% 14%, rgba(255, 255, 255, 0.2), transparent 13%),
        radial-gradient(circle at 20% 78%, rgba(96, 165, 250, 0.2), transparent 24%),
        linear-gradient(135deg, #020617, #334155);
    --world-scene:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.74) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 38%, rgba(196, 181, 253, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px);
    --world-scene-size: 150px 110px, 220px 180px, 280px 220px;
    --world-atmosphere:
        linear-gradient(to top, rgba(2, 6, 23, 0.76), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(96, 165, 250, 0.18), transparent 42%);
    --world-track: rgba(15, 23, 42, 0.82);
    --world-speed: 42s;
}

body.theme-botanic {
    --sprite-emoji: "🌿";
    --world-ink: #12352c;
    --world-muted: #3f6c59;
    --world-accent: #16a34a;
    --world-accent-2: #0d9488;
    --world-accent-3: #bef264;
    --world-glow: rgba(22, 163, 74, 0.32);
    --world-bg:
        radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.36), transparent 20%),
        linear-gradient(135deg, #ecfccb, #2dd4bf);
    --world-scene:
        radial-gradient(ellipse at 22px 22px, rgba(22, 163, 74, 0.22) 0 13px, transparent 14px),
        radial-gradient(ellipse at 76px 48px, rgba(13, 148, 136, 0.2) 0 16px, transparent 17px),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 5px, transparent 5px 44px);
    --world-scene-size: 116px 86px, 138px 100px, 180px 180px;
    --world-atmosphere:
        linear-gradient(to top, rgba(22, 163, 74, 0.16), transparent 54%),
        radial-gradient(ellipse at 50% 112%, rgba(13, 148, 136, 0.16), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.86);
}

body.theme-pawprint {
    --sprite-emoji: "🐾";
    --world-ink: #352238;
    --world-muted: #75526f;
    --world-accent: #ef6f6c;
    --world-accent-2: #0f9f8f;
    --world-accent-3: #fde68a;
    --world-glow: rgba(239, 111, 108, 0.32);
    --world-bg:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.4), transparent 20%),
        linear-gradient(135deg, #ffd6c9, #8dd7c7);
    --world-scene:
        radial-gradient(circle at 24px 24px, rgba(53, 34, 56, 0.18) 0 6px, transparent 7px),
        radial-gradient(circle at 42px 14px, rgba(53, 34, 56, 0.18) 0 3px, transparent 4px),
        radial-gradient(circle at 14px 14px, rgba(53, 34, 56, 0.18) 0 3px, transparent 4px),
        radial-gradient(circle at 32px 8px, rgba(53, 34, 56, 0.16) 0 3px, transparent 4px);
    --world-scene-size: 92px 76px, 92px 76px, 92px 76px, 92px 76px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.32), transparent 56%),
        radial-gradient(ellipse at 50% 112%, rgba(239, 111, 108, 0.16), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.86);
}

body.theme-wolfpack {
    --sprite-emoji: "🐺";
    --world-accent: #cbd5e1;
    --world-accent-2: #60a5fa;
    --world-accent-3: #86efac;
    --world-glow: rgba(96, 165, 250, 0.34);
    --world-bg:
        radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.64) 0 34px, transparent 36px),
        linear-gradient(135deg, #08111f, #1f3b4d);
    --world-scene:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px),
        linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(105deg, rgba(4, 18, 32, 0.38) 0 18px, transparent 18px 42px);
    --world-scene-size: 180px 130px, 120px 120px, 170px 120px;
    --world-atmosphere:
        linear-gradient(to top, rgba(2, 6, 23, 0.84), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(96, 165, 250, 0.18), transparent 42%);
    --world-track: rgba(11, 22, 38, 0.84);
}

body.theme-foxfire {
    --sprite-emoji: "🦊";
    --world-ink: #2f2118;
    --world-muted: #6a4d35;
    --world-accent: #f97316;
    --world-accent-2: #0f766e;
    --world-accent-3: #ffedd5;
    --world-glow: rgba(249, 115, 22, 0.36);
    --world-bg:
        radial-gradient(circle at 70% 16%, rgba(255, 237, 213, 0.46), transparent 18%),
        linear-gradient(135deg, #ffb86b, #c7531d 45%, #0f766e);
    --world-scene:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0 12px, transparent 12px 38px),
        radial-gradient(circle at 26% 70%, rgba(249, 115, 22, 0.26), transparent 20%),
        radial-gradient(circle at 82% 28%, rgba(15, 118, 110, 0.22), transparent 22%);
    --world-scene-size: 180px 140px, 100% 100%, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(47, 33, 24, 0.38), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(249, 115, 22, 0.18), transparent 42%);
    --world-track: rgba(255, 243, 218, 0.84);
}

body.theme-dragonden {
    --sprite-emoji: "🐲";
    --world-accent: #fb923c;
    --world-accent-2: #facc15;
    --world-accent-3: #ef4444;
    --world-glow: rgba(251, 146, 60, 0.4);
    --world-bg:
        radial-gradient(circle at 26% 78%, rgba(251, 146, 60, 0.38), transparent 24%),
        radial-gradient(circle at 80% 18%, rgba(220, 38, 38, 0.26), transparent 20%),
        linear-gradient(135deg, #160c0a, #5f1d12);
    --world-scene:
        radial-gradient(circle at 30px 28px, rgba(251, 146, 60, 0.24) 0 14px, transparent 15px),
        radial-gradient(circle at 78px 58px, rgba(250, 204, 21, 0.16) 0 14px, transparent 15px),
        repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.24) 0 10px, transparent 10px 36px);
    --world-scene-size: 112px 86px, 112px 86px, 180px 160px;
    --world-atmosphere:
        linear-gradient(to top, rgba(22, 12, 10, 0.78), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(251, 146, 60, 0.22), transparent 42%);
    --world-track: rgba(43, 21, 14, 0.84);
}

body.theme-lynxnight {
    --sprite-emoji: "🐱";
    --world-accent: #fbbf24;
    --world-accent-2: #a78bfa;
    --world-accent-3: #fef3c7;
    --world-glow: rgba(167, 139, 250, 0.36);
    --world-bg:
        radial-gradient(circle at 20% 16%, rgba(251, 191, 36, 0.24), transparent 18%),
        linear-gradient(135deg, #120a2a, #312e81);
    --world-scene:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 66% 24%, rgba(251, 191, 36, 0.38) 0 2px, transparent 3px),
        radial-gradient(ellipse at 38px 44px, rgba(251, 191, 36, 0.14) 0 9px, transparent 10px);
    --world-scene-size: 140px 110px, 180px 140px, 124px 86px;
    --world-atmosphere:
        linear-gradient(to top, rgba(10, 5, 28, 0.74), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(167, 139, 250, 0.2), transparent 42%);
    --world-track: rgba(22, 13, 49, 0.84);
}

body.theme-therianmoon {
    --sprite-emoji: "🌕";
    --world-accent: #e5e7eb;
    --world-accent-2: #86efac;
    --world-accent-3: #60a5fa;
    --world-glow: rgba(134, 239, 172, 0.32);
    --world-bg:
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.76) 0 30px, transparent 32px),
        linear-gradient(135deg, #07150f, #253d34);
    --world-scene:
        repeating-linear-gradient(90deg, rgba(134, 239, 172, 0.09) 0 4px, transparent 4px 42px),
        radial-gradient(circle at 20% 76%, rgba(134, 239, 172, 0.18), transparent 22%),
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px);
    --world-scene-size: 160px 120px, 100% 100%, 180px 130px;
    --world-atmosphere:
        linear-gradient(to top, rgba(3, 18, 11, 0.82), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(134, 239, 172, 0.16), transparent 42%);
    --world-track: rgba(8, 30, 20, 0.84);
}

body.theme-furrycon {
    --sprite-emoji: "🎨";
    --world-ink: #31243d;
    --world-muted: #735985;
    --world-accent: #8b5cf6;
    --world-accent-2: #ec4899;
    --world-accent-3: #22d3ee;
    --world-glow: rgba(139, 92, 246, 0.34);
    --world-bg:
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.26), transparent 20%),
        radial-gradient(circle at 82% 76%, rgba(236, 72, 153, 0.24), transparent 22%),
        linear-gradient(135deg, #fef3c7, #c4b5fd);
    --world-scene:
        radial-gradient(circle at 18px 24px, rgba(139, 92, 246, 0.32) 0 4px, transparent 5px),
        radial-gradient(circle at 54px 38px, rgba(236, 72, 153, 0.32) 0 4px, transparent 5px),
        linear-gradient(120deg, rgba(34, 211, 238, 0.18) 0 10px, transparent 10px 42px);
    --world-scene-size: 110px 80px, 110px 80px, 180px 140px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.34), transparent 56%),
        radial-gradient(ellipse at 50% 112%, rgba(139, 92, 246, 0.18), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.86);
}

body.theme-meadow {
    --sprite-emoji: "🦌";
    --world-ink: #26351d;
    --world-muted: #52683b;
    --world-accent: #65a30d;
    --world-accent-2: #0d9488;
    --world-accent-3: #fde68a;
    --world-glow: rgba(101, 163, 13, 0.3);
    --world-bg:
        radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.36), transparent 20%),
        linear-gradient(135deg, #f4f7d2, #86efac);
    --world-scene:
        radial-gradient(ellipse at 22px 22px, rgba(101, 163, 13, 0.2) 0 13px, transparent 14px),
        repeating-linear-gradient(150deg, rgba(101, 163, 13, 0.14) 0 8px, transparent 8px 32px),
        radial-gradient(circle at 72px 48px, rgba(250, 204, 21, 0.28) 0 3px, transparent 4px);
    --world-scene-size: 116px 86px, 180px 120px, 116px 86px;
    --world-atmosphere:
        linear-gradient(to top, rgba(101, 163, 13, 0.18), transparent 56%),
        radial-gradient(ellipse at 50% 112%, rgba(13, 148, 136, 0.14), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.84);
}

body.theme-datacenter {
    --sprite-emoji: "🖥️";
    --world-accent: #38bdf8;
    --world-accent-2: #22c55e;
    --world-accent-3: #cbd5e1;
    --world-glow: rgba(56, 189, 248, 0.36);
    --world-bg:
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.22), transparent 22%),
        radial-gradient(circle at 82% 72%, rgba(34, 197, 94, 0.18), transparent 24%),
        linear-gradient(135deg, #0b1220, #155e75);
    --world-scene:
        linear-gradient(rgba(56, 189, 248, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.13) 1px, transparent 1px),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.42) 0 20px, rgba(56, 189, 248, 0.08) 20px 22px, transparent 22px 58px);
    --world-scene-size: 28px 28px, 28px 28px, 190px 140px;
    --world-atmosphere:
        linear-gradient(to top, rgba(6, 20, 34, 0.74), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(56, 189, 248, 0.18), transparent 42%);
    --world-track: rgba(9, 23, 42, 0.82);
}

body.theme-terminal {
    --sprite-emoji: "⌨️";
    --world-accent: #22c55e;
    --world-accent-2: #86efac;
    --world-accent-3: #bbf7d0;
    --world-glow: rgba(34, 197, 94, 0.4);
    --world-bg:
        radial-gradient(circle at 72% 18%, rgba(34, 197, 94, 0.16), transparent 28%),
        linear-gradient(135deg, #020403, #052e16);
    --world-scene:
        repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.13) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.09) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, rgba(34, 197, 94, 0.18), transparent 22%);
    --world-scene-size: 100% 100%, 100% 100%, 100% 180px;
    --world-atmosphere:
        linear-gradient(to top, rgba(2, 4, 3, 0.76), transparent 58%),
        repeating-linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0 2px, transparent 2px 30px);
    --world-track: rgba(2, 24, 12, 0.84);
    --world-speed: 8s;
}

body.theme-blueprint {
    --sprite-emoji: "📐";
    --world-ink: #102a43;
    --world-muted: #376184;
    --world-accent: #2563eb;
    --world-accent-2: #0891b2;
    --world-accent-3: #ffffff;
    --world-glow: rgba(37, 99, 235, 0.28);
    --world-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 30%),
        linear-gradient(135deg, #dbeafe, #60a5fa);
    --world-scene:
        linear-gradient(rgba(37, 99, 235, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.25) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px);
    --world-scene-size: 36px 36px, 36px 36px, 9px 9px, 9px 9px;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.38), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(37, 99, 235, 0.16), transparent 42%);
    --world-track: rgba(240, 249, 255, 0.88);
}

body.theme-hologram {
    --sprite-emoji: "🧊";
    --world-ink: #1e1b4b;
    --world-muted: #554a8d;
    --world-accent: #7c3aed;
    --world-accent-2: #06b6d4;
    --world-accent-3: #ffffff;
    --world-glow: rgba(124, 58, 237, 0.34);
    --world-bg:
        radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.6), transparent 24%),
        linear-gradient(135deg, #e0f2fe, #a78bfa);
    --world-scene:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.36) 0 2px, transparent 2px 26px),
        radial-gradient(circle at 72% 70%, rgba(6, 182, 212, 0.22), transparent 20%),
        linear-gradient(90deg, rgba(124, 58, 237, 0.14), transparent 40%, rgba(6, 182, 212, 0.14));
    --world-scene-size: 160px 130px, 100% 100%, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(124, 58, 237, 0.18), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(6, 182, 212, 0.18), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.84);
}

body.theme-cloudcore {
    --sprite-emoji: "☁️";
    --world-ink: #1f2a44;
    --world-muted: #52607a;
    --world-accent: #3b82f6;
    --world-accent-2: #14b8a6;
    --world-accent-3: #ffffff;
    --world-glow: rgba(59, 130, 246, 0.3);
    --world-bg:
        radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.76), transparent 23%),
        radial-gradient(ellipse at 78% 18%, rgba(255, 255, 255, 0.54), transparent 20%),
        linear-gradient(135deg, #eef2ff, #67e8f9);
    --world-scene:
        radial-gradient(ellipse at 28px 36px, rgba(255, 255, 255, 0.5) 0 18px, transparent 19px),
        radial-gradient(ellipse at 86px 54px, rgba(255, 255, 255, 0.3) 0 14px, transparent 15px),
        linear-gradient(100deg, rgba(59, 130, 246, 0.12), transparent 42%);
    --world-scene-size: 150px 96px, 160px 100px, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(255, 255, 255, 0.42), transparent 56%),
        radial-gradient(ellipse at 50% 112%, rgba(20, 184, 166, 0.14), transparent 42%);
    --world-track: rgba(255, 255, 255, 0.88);
    --world-speed: 24s;
}

body.theme-securityops {
    --sprite-emoji: "🛡️";
    --world-accent: #34d399;
    --world-accent-2: #facc15;
    --world-accent-3: #38bdf8;
    --world-glow: rgba(52, 211, 153, 0.36);
    --world-bg:
        radial-gradient(circle at 18% 18%, rgba(52, 211, 153, 0.22), transparent 22%),
        radial-gradient(circle at 82% 72%, rgba(250, 204, 21, 0.18), transparent 24%),
        linear-gradient(135deg, #111827, #064e3b);
    --world-scene:
        linear-gradient(60deg, rgba(52, 211, 153, 0.18) 0 2px, transparent 2px 30px),
        linear-gradient(90deg, rgba(250, 204, 21, 0.09) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 50% 50%, transparent 0 32px, rgba(52, 211, 153, 0.16) 33px 34px, transparent 35px 72px);
    --world-scene-size: 120px 120px, 120px 120px, 190px 190px;
    --world-atmosphere:
        linear-gradient(to top, rgba(3, 32, 24, 0.76), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(52, 211, 153, 0.18), transparent 42%);
    --world-track: rgba(9, 37, 29, 0.84);
}

body.theme-retrocrt {
    --sprite-emoji: "📺";
    --world-accent: #f472b6;
    --world-accent-2: #22d3ee;
    --world-accent-3: #a3e635;
    --world-glow: rgba(244, 114, 182, 0.38);
    --world-bg:
        radial-gradient(circle at 20% 20%, rgba(244, 114, 182, 0.26), transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(34, 211, 238, 0.22), transparent 24%),
        linear-gradient(135deg, #14051f, #312e81);
    --world-scene:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, rgba(244, 114, 182, 0.13) 1px, transparent 1px),
        radial-gradient(circle at 68% 28%, rgba(34, 211, 238, 0.16), transparent 20%);
    --world-scene-size: 100% 100%, 72px 72px, 100% 100%;
    --world-atmosphere:
        linear-gradient(to top, rgba(4, 2, 12, 0.7), transparent 58%),
        repeating-linear-gradient(90deg, rgba(244, 114, 182, 0.08) 0 2px, transparent 2px 42px);
    --world-track: rgba(24, 10, 48, 0.84);
    --world-speed: 9s;
}

body.theme-quantum {
    --sprite-emoji: "⚛️";
    --world-accent: #a78bfa;
    --world-accent-2: #22d3ee;
    --world-accent-3: #f472b6;
    --world-glow: rgba(139, 92, 246, 0.38);
    --world-bg:
        radial-gradient(circle at 30% 22%, rgba(34, 211, 238, 0.26), transparent 18%),
        radial-gradient(circle at 72% 76%, rgba(167, 139, 250, 0.3), transparent 20%),
        linear-gradient(135deg, #080b2a, #4c1d95);
    --world-scene:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.64) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 38%, rgba(34, 211, 238, 0.48) 0 1px, transparent 2px),
        linear-gradient(120deg, transparent 0 48%, rgba(167, 139, 250, 0.16) 48% 49%, transparent 49%),
        radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(34, 211, 238, 0.16) 35px 36px, transparent 37px 84px);
    --world-scene-size: 170px 130px, 240px 180px, 120px 120px, 220px 220px;
    --world-atmosphere:
        linear-gradient(to top, rgba(8, 11, 42, 0.7), transparent 58%),
        radial-gradient(ellipse at 50% 112%, rgba(34, 211, 238, 0.18), transparent 42%);
    --world-track: rgba(19, 17, 70, 0.84);
    --world-speed: 18s;
}

@keyframes world-scene-drift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        background-position: 130px 70px, -90px 60px, 60px -50px, 20px 20px;
        transform: translate3d(-1.5%, 1%, 0) scale(1.02);
    }
    100% {
        background-position: 260px 140px, -180px 120px, 120px -100px, 40px 40px;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes world-atmosphere-float {
    0% {
        opacity: 0.52;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: var(--world-atmosphere-opacity);
        transform: translateY(12px) scale(1.015);
    }
}

@keyframes world-hero-sweep {
    0%, 36% { transform: translateX(-125%); opacity: 0; }
    50% { opacity: 0.96; }
    68%, 100% { transform: translateX(125%); opacity: 0; }
}

@keyframes world-hero-orbit {
    0% { transform: translateY(-4%) rotate(-5deg); opacity: 0.72; }
    100% { transform: translateY(6%) rotate(5deg); opacity: 1; }
}

@keyframes world-track-scan {
    0%, 15% { background-position: -45% 0, 0 0; opacity: 0.24; }
    48% { opacity: 0.78; }
    82%, 100% { background-position: 145% 0, 220px 0; opacity: 0.34; }
}

@keyframes world-progress {
    0% { filter: brightness(0.92) saturate(1); }
    100% { filter: brightness(1.36) saturate(1.16); }
}

@keyframes world-finish {
    0% { filter: brightness(0.95); transform: scaleY(0.98); }
    100% { filter: brightness(1.28); transform: scaleY(1.02); }
}

@keyframes world-racer-breathe {
    0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
    50% { transform: translateY(-6px) rotate(2deg) scale(1.04); }
}

@keyframes world-racer-step {
    0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
    35% { transform: translateY(-14px) rotate(8deg) scale(1.1); }
    65% { transform: translateY(-4px) rotate(-6deg) scale(1.04); }
}

@keyframes world-timer {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.04); filter: brightness(1.16); }
}

@keyframes world-button-glow {
    0% {
        box-shadow:
            0 14px 28px color-mix(in srgb, var(--world-accent) 18%, transparent),
            0 0 18px var(--world-glow);
    }
    100% {
        box-shadow:
            0 18px 40px color-mix(in srgb, var(--world-accent) 30%, transparent),
            0 0 34px var(--world-glow);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[class*="theme-"]::before,
    body[class*="theme-"]::after,
    body[class*="theme-"] .site-hero::before,
    body[class*="theme-"] .site-hero::after,
    body[class*="theme-"] .track-container::after,
    body[class*="theme-"] .track::before,
    body[class*="theme-"] #finish,
    body[class*="theme-"] button,
    body[class*="theme-"] .option-btn,
    body[class*="theme-"] .camel:not(.stepping)::after,
    body[class*="theme-"] .big-timer {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 820px) {
    body[class*="theme-"] .site-hero,
    body[class*="theme-"] .panel,
    body[class*="theme-"] #lobby,
    body[class*="theme-"] #waitingScreen,
    body[class*="theme-"] #quiz-container,
    body[class*="theme-"] .track-container {
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18), 0 0 24px var(--world-glow);
    }

    body[class*="theme-"]::before,
    body[class*="theme-"]::after {
        inset: -18%;
    }
}