:root {
    --page-bg: #f6d365;
    --page-bg-2: #79d8ce;
    --ink: #20313f;
    --muted: #607080;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-solid: #ffffff;
    --line: rgba(32, 49, 63, 0.14);
    --accent: #e8583f;
    --accent-2: #0d9488;
    --button: linear-gradient(135deg, #e8583f, #b83224);
    --button-shadow: rgba(184, 50, 36, 0.28);
    --track-bg: #fff1c7;
    --track-line: #e8583f;
    --finish-dark: #20313f;
    --finish-light: #ffffff;
    --hero-sheen: rgba(255, 255, 255, 0.24);
    --option-bg: linear-gradient(135deg, #0d9488, #2563eb);
    --option-shadow: rgba(37, 99, 235, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.62), transparent 28%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    color: var(--ink);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 70%);
}

body::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: 38vh;
    pointer-events: none;
    background:
        repeating-linear-gradient(-8deg, transparent 0 18px, rgba(255, 255, 255, 0.08) 18px 20px),
        linear-gradient(to top, rgba(32, 49, 63, 0.11), transparent);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

.site-hero {
    width: min(1200px, 100%);
    margin: 0 auto 18px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 8px;
    background:
        linear-gradient(115deg, var(--hero-sheen), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.22)),
        rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 16px 38px rgba(22, 36, 52, 0.13);
}

h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 48px);
    letter-spacing: 0;
    line-height: 1.05;
    text-align: left;
    text-shadow: 0 3px 16px rgba(24, 35, 49, 0.28);
}

.eyebrow {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-stats,
.race-meta,
.category-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hero-stats span,
.race-meta span,
#selectedCategoryCount {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

h2,
h3,
h4 {
    color: var(--ink);
    letter-spacing: 0;
}

.container {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    width: min(1200px, 100%);
    margin-top: 0;
    gap: 18px;
}

.panel,
#lobby,
#waitingScreen,
#quiz-container {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 18px 44px rgba(22, 36, 52, 0.18);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.panel::before,
#lobby::before,
#waitingScreen::before,
#quiz-container::before,
.track-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 44%);
    opacity: 0.65;
}

.left-panel {
    flex: 0 1 290px;
    min-width: 260px;
    padding: 22px;
}

.main-panel {
    flex: 1 1 680px;
    min-width: 320px;
    padding: 0;
}

#lobby {
    max-width: 620px !important;
    padding: 28px;
}

#lobby > *,
.panel > *,
#waitingScreen > *,
#quiz-container > * {
    position: relative;
    z-index: 1;
}

#lobby h2 {
    margin: 0;
    font-size: 30px;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.panel-title > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.12);
    font-size: 22px;
}

.form-stack {
    display: grid;
    gap: 9px;
}

.field-label {
    margin: 2px 0 -2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

input[type="text"],
select,
input[type="password"],
input[type="number"] {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 1px 2px rgba(32, 49, 63, 0.05);
}

#lobby input[type="text"],
#lobby select {
    margin: 0;
}

input[type="text"]:focus,
select:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18);
}

.cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
    scrollbar-color: var(--accent-2) transparent;
}

.category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 8px;
}

.category-heading h4 {
    margin: 0;
}

.category-actions {
    justify-content: flex-end;
}

#selectedCategoryCount {
    min-height: 32px;
    border-color: var(--line);
    background: rgba(13, 148, 136, 0.1);
    color: var(--ink);
}

.category-actions button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 13px;
    box-shadow: none;
}

.cat-item {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink);
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.cat-item:hover {
    border-color: var(--accent-2);
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.82);
}

.cat-item input {
    flex: 0 0 auto;
    accent-color: var(--accent-2);
}

button {
    min-height: 44px;
    border-radius: 8px;
    background: var(--button);
    box-shadow: 0 10px 22px var(--button-shadow);
    letter-spacing: 0;
    text-transform: none;
    position: relative;
    overflow: hidden;
}

button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-120%);
    transition: transform 0.32s ease;
}

button:hover {
    transform: translateY(-2px);
}

button:hover::after {
    transform: translateX(120%);
}

button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.game-header {
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#roomTitle {
    flex: 1 1 260px;
    padding: 13px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff !important;
}

.race-meta {
    flex: 0 1 auto;
    justify-content: flex-end;
}

#btnLeave {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(32, 49, 63, 0.86);
}

#waitingScreen {
    padding: 26px;
    background: rgba(255, 247, 214, 0.93);
}

#waitingScreen p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.big-timer {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    line-height: 1;
    border: 8px solid rgba(232, 88, 63, 0.12);
    color: var(--accent);
}

#quiz-container {
    padding: 26px;
}

#questionText {
    min-height: 96px;
    margin-bottom: 8px;
    padding: 0 8px;
    color: var(--ink);
    font-size: clamp(21px, 2.2vw, 30px);
    line-height: 1.22;
}

.options-grid {
    gap: 12px;
}

.option-btn {
    min-height: 64px;
    padding: 14px 16px;
    background: var(--option-bg);
    box-shadow: 0 10px 22px var(--option-shadow);
    line-height: 1.2;
}

body .option-btn {
    background: var(--option-bg);
    box-shadow: 0 10px 22px var(--option-shadow);
}

.track-container {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)),
        var(--track-bg);
    box-shadow: inset 0 2px 14px rgba(32, 49, 63, 0.1), 0 14px 36px rgba(22, 36, 52, 0.14);
}

.track-container::before {
    background:
        linear-gradient(90deg, transparent 0 78%, rgba(255, 255, 255, 0.42) 78% 79%, transparent 79%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 96px);
    opacity: 0.52;
}

.track {
    height: 64px;
    margin: 26px 0;
    border-bottom: 3px dashed var(--track-line);
    z-index: 1;
    isolation: isolate;
}

.track::before {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: -3px;
    width: min(var(--progress, 0%), 100%);
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    z-index: 0;
}

#finish {
    top: -12px;
    bottom: -7px;
    width: 24px;
    background: repeating-linear-gradient(45deg, var(--finish-dark), var(--finish-dark) 9px, var(--finish-light) 9px, var(--finish-light) 18px);
}

.camel {
    visibility: visible !important;
    width: 70px;
    height: 70px;
    bottom: -2px;
    transform: translateX(-6px);
    transition: left 0.18s ease-out;
}

.camel .flipped-emoji {
    display: none;
}

.camel::after {
    font-size: 52px;
    visibility: visible !important;
    filter: drop-shadow(0 6px 5px rgba(32, 49, 63, 0.22));
}

.camel.stepping {
    animation: none;
}

.camel.stepping::after {
    animation: racer-hop 0.45s ease-out;
}

@keyframes racer-hop {
    0% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    35% { transform: scaleX(-1) translateY(-14px) rotate(-9deg); }
    65% { transform: scaleX(-1) translateY(-4px) rotate(6deg); }
    100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
}

.player-label {
    top: -16px;
    z-index: 3;
    max-width: 120px;
    overflow: hidden;
    border: 1px solid rgba(32, 49, 63, 0.08);
    border-radius: 8px;
    text-overflow: ellipsis;
}

.progress-badge {
    position: absolute;
    top: -18px;
    right: 34px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
}

#leaderboardList li {
    gap: 12px;
    padding: 12px 4px;
    color: var(--ink);
}

#leaderboardList li span:last-child {
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

#winnerBanner {
    border-radius: 8px;
    background: linear-gradient(135deg, #0d9488, #16a34a);
}

body.theme-desert {
    --page-bg: #f4a460;
    --page-bg-2: #79d8ce;
    --track-bg: #fff1c7;
    --track-line: #9a5a25;
    --button: linear-gradient(135deg, #d97706, #b45309);
    --button-shadow: rgba(180, 83, 9, 0.28);
    --option-bg: linear-gradient(135deg, #0f766e, #2563eb);
}

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 {
    --panel: rgba(10, 18, 32, 0.82);
    --panel-solid: #101827;
    --ink: #f8fafc;
    --muted: #cbd5e1;
    --line: rgba(255, 255, 255, 0.18);
    --track-bg: rgba(15, 23, 42, 0.78);
    --finish-dark: #f8fafc;
    --finish-light: #111827;
}

body.theme-arctic,
body.theme-sunset,
body.theme-festival,
body.theme-botanic,
body.theme-pawprint,
body.theme-foxfire,
body.theme-furrycon,
body.theme-meadow,
body.theme-blueprint,
body.theme-hologram,
body.theme-cloudcore {
    --panel: rgba(255, 255, 255, 0.9);
    --line: rgba(32, 49, 63, 0.14);
}

body.theme-candy {
    --panel: rgba(255, 255, 255, 0.9);
    --ink: #4a1532;
    --muted: #8a4a68;
    --line: rgba(138, 74, 104, 0.18);
    --track-bg: rgba(255, 255, 255, 0.72);
    --track-line: #ff4fa2;
    --accent: #d91f76;
    --accent-2: #0d9488;
}

body.theme-arctic {
    --sprite-emoji: "⛸️";
    --page-bg: #dff7ff;
    --page-bg-2: #7dd3fc;
    --ink: #163447;
    --muted: #477286;
    --track-bg: rgba(240, 253, 255, 0.86);
    --track-line: #0891b2;
    --accent: #0284c7;
    --accent-2: #14b8a6;
    --button: linear-gradient(135deg, #06b6d4, #2563eb);
    --button-shadow: rgba(37, 99, 235, 0.22);
    --option-bg: linear-gradient(135deg, #14b8a6, #0284c7);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 28px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-sunset {
    --sprite-emoji: "🏎️";
    --page-bg: #ffb86b;
    --page-bg-2: #3b2b7a;
    --ink: #2d2440;
    --muted: #6f5770;
    --track-bg: rgba(255, 245, 226, 0.9);
    --track-line: #db2777;
    --accent: #ea580c;
    --accent-2: #7c3aed;
    --button: linear-gradient(135deg, #f97316, #7c3aed);
    --button-shadow: rgba(124, 58, 237, 0.25);
    --option-bg: linear-gradient(135deg, #db2777, #7c3aed);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(45, 36, 64, 0.12) 42px 44px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-arcade {
    --sprite-emoji: "👾";
    --page-bg: #111827;
    --page-bg-2: #4c1d95;
    --track-bg: rgba(17, 24, 39, 0.82);
    --track-line: #22d3ee;
    --accent: #f0f;
    --accent-2: #22d3ee;
    --button: linear-gradient(135deg, #f0f, #22d3ee);
    --button-shadow: rgba(34, 211, 238, 0.26);
    --option-bg: linear-gradient(135deg, #7c3aed, #06b6d4);
    --option-shadow: rgba(236, 72, 153, 0.24);
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.14) 2px, transparent 2px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.16) 2px, transparent 2px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 34px 34px, 34px 34px, auto;
}

body.theme-circuit {
    --sprite-emoji: "⚡";
    --page-bg: #07130f;
    --page-bg-2: #164e63;
    --track-bg: rgba(8, 47, 73, 0.72);
    --track-line: #a3e635;
    --accent: #a3e635;
    --accent-2: #22d3ee;
    --button: linear-gradient(135deg, #a3e635, #22d3ee);
    --button-shadow: rgba(163, 230, 53, 0.22);
    --option-bg: linear-gradient(135deg, #65a30d, #0891b2);
    color: #eaffd0;
    background-image:
        linear-gradient(90deg, rgba(163, 230, 53, 0.15) 1px, transparent 1px),
        linear-gradient(rgba(34, 211, 238, 0.12) 1px, transparent 1px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 54px 54px, 54px 54px, auto;
}

body.theme-royal {
    --sprite-emoji: "🏰";
    --page-bg: #052e2b;
    --page-bg-2: #312e81;
    --track-bg: rgba(6, 78, 59, 0.62);
    --track-line: #facc15;
    --accent: #facc15;
    --accent-2: #34d399;
    --button: linear-gradient(135deg, #facc15, #059669);
    --button-shadow: rgba(250, 204, 21, 0.22);
    --option-bg: linear-gradient(135deg, #059669, #4338ca);
    background-image:
        repeating-linear-gradient(45deg, rgba(250, 204, 21, 0.1) 0 2px, transparent 2px 24px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-festival {
    --sprite-emoji: "🎪";
    --page-bg: #ffe4e6;
    --page-bg-2: #bae6fd;
    --ink: #2d2440;
    --muted: #6f5770;
    --track-bg: rgba(255, 255, 255, 0.86);
    --track-line: #f43f5e;
    --accent: #e11d48;
    --accent-2: #0ea5e9;
    --button: linear-gradient(135deg, #f43f5e, #0ea5e9);
    --button-shadow: rgba(244, 63, 94, 0.22);
    --option-bg: linear-gradient(135deg, #f43f5e, #8b5cf6);
    background-image:
        radial-gradient(circle at 18px 18px, rgba(244, 63, 94, 0.34) 0 3px, transparent 4px),
        radial-gradient(circle at 62px 46px, rgba(14, 165, 233, 0.34) 0 3px, transparent 4px),
        radial-gradient(circle at 94px 22px, rgba(250, 204, 21, 0.38) 0 3px, transparent 4px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 120px 80px, 120px 80px, 120px 80px, auto;
}

body.theme-midnight {
    --sprite-emoji: "🌙";
    --page-bg: #020617;
    --page-bg-2: #334155;
    --track-bg: rgba(15, 23, 42, 0.74);
    --track-line: #c4b5fd;
    --accent: #c4b5fd;
    --accent-2: #38bdf8;
    --button: linear-gradient(135deg, #8b5cf6, #38bdf8);
    --button-shadow: rgba(139, 92, 246, 0.26);
    --option-bg: linear-gradient(135deg, #6366f1, #0ea5e9);
    background-image:
        radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 22%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 68%, rgba(255, 255, 255, 0.32) 0 1px, transparent 2px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 180px 140px, 240px 190px, 300px 260px, auto;
}

body.theme-botanic {
    --sprite-emoji: "🌿";
    --page-bg: #ecfccb;
    --page-bg-2: #2dd4bf;
    --ink: #12352c;
    --muted: #497365;
    --track-bg: rgba(255, 255, 255, 0.82);
    --track-line: #16a34a;
    --accent: #16a34a;
    --accent-2: #0d9488;
    --button: linear-gradient(135deg, #16a34a, #0d9488);
    --button-shadow: rgba(22, 163, 74, 0.22);
    --option-bg: linear-gradient(135deg, #0d9488, #16a34a);
    background-image:
        repeating-linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0 12px, transparent 12px 34px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-pawprint {
    --sprite-emoji: "🐾";
    --page-bg: #ffd6c9;
    --page-bg-2: #8dd7c7;
    --ink: #352238;
    --muted: #7a596f;
    --track-bg: rgba(255, 250, 246, 0.88);
    --track-line: #ef6f6c;
    --accent: #ef6f6c;
    --accent-2: #0f9f8f;
    --button: linear-gradient(135deg, #ef6f6c, #0f9f8f);
    --button-shadow: rgba(239, 111, 108, 0.24);
    --option-bg: linear-gradient(135deg, #ef6f6c, #7c3aed);
    background-image:
        radial-gradient(circle at 24px 24px, rgba(53, 34, 56, 0.12) 0 6px, transparent 7px),
        radial-gradient(circle at 42px 14px, rgba(53, 34, 56, 0.12) 0 3px, transparent 4px),
        radial-gradient(circle at 14px 14px, rgba(53, 34, 56, 0.12) 0 3px, transparent 4px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 92px 76px, 92px 76px, 92px 76px, auto;
}

body.theme-wolfpack {
    --sprite-emoji: "🐺";
    --page-bg: #08111f;
    --page-bg-2: #1f3b4d;
    --track-bg: rgba(8, 17, 31, 0.74);
    --track-line: #cbd5e1;
    --accent: #cbd5e1;
    --accent-2: #60a5fa;
    --button: linear-gradient(135deg, #64748b, #2563eb);
    --button-shadow: rgba(37, 99, 235, 0.22);
    --option-bg: linear-gradient(135deg, #475569, #2563eb);
    background-image:
        radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.72) 0 32px, transparent 34px),
        linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0 2px, transparent 2px 26px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-foxfire {
    --sprite-emoji: "🦊";
    --page-bg: #ffb86b;
    --page-bg-2: #0f766e;
    --ink: #2f2118;
    --muted: #75503f;
    --track-bg: rgba(255, 247, 237, 0.88);
    --track-line: #f97316;
    --accent: #f97316;
    --accent-2: #0f766e;
    --button: linear-gradient(135deg, #f97316, #0f766e);
    --button-shadow: rgba(249, 115, 22, 0.24);
    --option-bg: linear-gradient(135deg, #ea580c, #0f766e);
    background-image:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0 12px, transparent 12px 38px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-dragonden {
    --sprite-emoji: "🐲";
    --page-bg: #160c0a;
    --page-bg-2: #5f1d12;
    --track-bg: rgba(31, 17, 12, 0.82);
    --track-line: #fb923c;
    --accent: #fb923c;
    --accent-2: #facc15;
    --button: linear-gradient(135deg, #f97316, #991b1b);
    --button-shadow: rgba(249, 115, 22, 0.26);
    --option-bg: linear-gradient(135deg, #dc2626, #f97316);
    background-image:
        radial-gradient(circle at 22% 20%, rgba(251, 146, 60, 0.32), transparent 18%),
        radial-gradient(circle at 78% 80%, rgba(250, 204, 21, 0.18), transparent 20%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-lynxnight {
    --sprite-emoji: "🐱";
    --page-bg: #120a2a;
    --page-bg-2: #312e81;
    --track-bg: rgba(30, 27, 75, 0.78);
    --track-line: #fbbf24;
    --accent: #fbbf24;
    --accent-2: #a78bfa;
    --button: linear-gradient(135deg, #fbbf24, #7c3aed);
    --button-shadow: rgba(167, 139, 250, 0.24);
    --option-bg: linear-gradient(135deg, #7c3aed, #f59e0b);
    background-image:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px),
        radial-gradient(circle at 66% 24%, rgba(251, 191, 36, 0.34) 0 2px, transparent 3px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 140px 110px, 180px 140px, auto;
}

body.theme-therianmoon {
    --sprite-emoji: "🌕";
    --page-bg: #07150f;
    --page-bg-2: #253d34;
    --track-bg: rgba(7, 21, 15, 0.76);
    --track-line: #d1d5db;
    --accent: #e5e7eb;
    --accent-2: #86efac;
    --button: linear-gradient(135deg, #86efac, #64748b);
    --button-shadow: rgba(134, 239, 172, 0.18);
    --option-bg: linear-gradient(135deg, #16a34a, #64748b);
    background-image:
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.8) 0 28px, transparent 30px),
        repeating-linear-gradient(90deg, rgba(134, 239, 172, 0.08) 0 4px, transparent 4px 42px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-furrycon {
    --sprite-emoji: "🎨";
    --page-bg: #fef3c7;
    --page-bg-2: #c4b5fd;
    --ink: #31243d;
    --muted: #67547c;
    --track-bg: rgba(255, 255, 255, 0.88);
    --track-line: #8b5cf6;
    --accent: #8b5cf6;
    --accent-2: #ec4899;
    --button: linear-gradient(135deg, #8b5cf6, #ec4899);
    --button-shadow: rgba(139, 92, 246, 0.23);
    --option-bg: linear-gradient(135deg, #ec4899, #2563eb);
    background-image:
        radial-gradient(circle at 18px 24px, rgba(139, 92, 246, 0.28) 0 4px, transparent 5px),
        radial-gradient(circle at 54px 38px, rgba(236, 72, 153, 0.28) 0 4px, transparent 5px),
        radial-gradient(circle at 82px 18px, rgba(34, 197, 94, 0.22) 0 4px, transparent 5px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 110px 80px, 110px 80px, 110px 80px, auto;
}

body.theme-meadow {
    --sprite-emoji: "🦌";
    --page-bg: #f4f7d2;
    --page-bg-2: #86efac;
    --ink: #26351d;
    --muted: #65734f;
    --track-bg: rgba(255, 255, 255, 0.84);
    --track-line: #65a30d;
    --accent: #65a30d;
    --accent-2: #0d9488;
    --button: linear-gradient(135deg, #65a30d, #0d9488);
    --button-shadow: rgba(101, 163, 13, 0.2);
    --option-bg: linear-gradient(135deg, #16a34a, #0d9488);
    background-image:
        repeating-linear-gradient(150deg, rgba(101, 163, 13, 0.12) 0 8px, transparent 8px 32px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-datacenter {
    --sprite-emoji: "🖥️";
    --page-bg: #0b1220;
    --page-bg-2: #155e75;
    --track-bg: rgba(15, 23, 42, 0.78);
    --track-line: #38bdf8;
    --accent: #38bdf8;
    --accent-2: #22c55e;
    --button: linear-gradient(135deg, #38bdf8, #22c55e);
    --button-shadow: rgba(56, 189, 248, 0.24);
    --option-bg: linear-gradient(135deg, #0ea5e9, #16a34a);
    background-image:
        linear-gradient(90deg, rgba(56, 189, 248, 0.14) 1px, transparent 1px),
        linear-gradient(rgba(34, 197, 94, 0.10) 1px, transparent 1px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 28px 28px, 28px 28px, auto;
}

body.theme-terminal {
    --sprite-emoji: "⌨️";
    --page-bg: #020403;
    --page-bg-2: #052e16;
    --track-bg: rgba(0, 20, 10, 0.84);
    --track-line: #22c55e;
    --accent: #22c55e;
    --accent-2: #86efac;
    --button: linear-gradient(135deg, #166534, #22c55e);
    --button-shadow: rgba(34, 197, 94, 0.22);
    --option-bg: linear-gradient(135deg, #15803d, #16a34a);
    background-image:
        repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.12) 0 1px, transparent 1px 16px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-blueprint {
    --sprite-emoji: "📐";
    --page-bg: #dbeafe;
    --page-bg-2: #60a5fa;
    --ink: #102a43;
    --muted: #41617c;
    --track-bg: rgba(239, 246, 255, 0.88);
    --track-line: #2563eb;
    --accent: #2563eb;
    --accent-2: #0891b2;
    --button: linear-gradient(135deg, #2563eb, #0891b2);
    --button-shadow: rgba(37, 99, 235, 0.2);
    --option-bg: linear-gradient(135deg, #2563eb, #0e7490);
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    background-size: 36px 36px, 36px 36px, auto;
}

body.theme-hologram {
    --sprite-emoji: "🧊";
    --page-bg: #e0f2fe;
    --page-bg-2: #a78bfa;
    --ink: #1e1b4b;
    --muted: #57518a;
    --track-bg: rgba(255, 255, 255, 0.78);
    --track-line: #06b6d4;
    --accent: #7c3aed;
    --accent-2: #06b6d4;
    --button: linear-gradient(135deg, #06b6d4, #7c3aed);
    --button-shadow: rgba(124, 58, 237, 0.22);
    --option-bg: linear-gradient(135deg, #06b6d4, #8b5cf6);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.52), transparent 24%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 26px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-cloudcore {
    --sprite-emoji: "☁️";
    --page-bg: #eef2ff;
    --page-bg-2: #67e8f9;
    --ink: #1f2a44;
    --muted: #5e6d86;
    --track-bg: rgba(255, 255, 255, 0.86);
    --track-line: #3b82f6;
    --accent: #3b82f6;
    --accent-2: #14b8a6;
    --button: linear-gradient(135deg, #3b82f6, #14b8a6);
    --button-shadow: rgba(59, 130, 246, 0.2);
    --option-bg: linear-gradient(135deg, #2563eb, #0d9488);
    background-image:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.66), transparent 20%),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.46), transparent 18%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-securityops {
    --sprite-emoji: "🛡️";
    --page-bg: #111827;
    --page-bg-2: #064e3b;
    --track-bg: rgba(6, 78, 59, 0.62);
    --track-line: #34d399;
    --accent: #34d399;
    --accent-2: #facc15;
    --button: linear-gradient(135deg, #10b981, #facc15);
    --button-shadow: rgba(52, 211, 153, 0.2);
    --option-bg: linear-gradient(135deg, #059669, #ca8a04);
    background-image:
        linear-gradient(60deg, rgba(52, 211, 153, 0.14) 0 2px, transparent 2px 30px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-retrocrt {
    --sprite-emoji: "📺";
    --page-bg: #14051f;
    --page-bg-2: #312e81;
    --track-bg: rgba(31, 10, 47, 0.78);
    --track-line: #f472b6;
    --accent: #f472b6;
    --accent-2: #22d3ee;
    --button: linear-gradient(135deg, #f472b6, #22d3ee);
    --button-shadow: rgba(244, 114, 182, 0.24);
    --option-bg: linear-gradient(135deg, #db2777, #0891b2);
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-quantum {
    --sprite-emoji: "⚛️";
    --page-bg: #080b2a;
    --page-bg-2: #4c1d95;
    --track-bg: rgba(17, 24, 58, 0.78);
    --track-line: #a78bfa;
    --accent: #a78bfa;
    --accent-2: #22d3ee;
    --button: linear-gradient(135deg, #8b5cf6, #22d3ee);
    --button-shadow: rgba(139, 92, 246, 0.24);
    --option-bg: linear-gradient(135deg, #7c3aed, #06b6d4);
    background-image:
        radial-gradient(circle at 30% 22%, rgba(34, 211, 238, 0.22), transparent 18%),
        radial-gradient(circle at 72% 76%, rgba(167, 139, 250, 0.24), transparent 20%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
}

body.theme-space .camel {
    transform: translateX(-6px) rotate(0deg);
}

body.theme-neon .panel,
body.theme-neon #lobby,
body.theme-neon #waitingScreen,
body.theme-neon #quiz-container {
    box-shadow: 0 0 24px rgba(255, 20, 147, 0.22), 0 18px 44px rgba(0, 0, 0, 0.28);
}

body.theme-hacker input,
body.theme-hacker select,
body.theme-hacker .cat-item,
body.theme-space input,
body.theme-space select,
body.theme-space .cat-item,
body.theme-neon input,
body.theme-neon select,
body.theme-neon .cat-item,
body.theme-ocean input,
body.theme-ocean select,
body.theme-ocean .cat-item,
body.theme-volcano input,
body.theme-volcano select,
body.theme-volcano .cat-item,
body.theme-jungle input,
body.theme-jungle select,
body.theme-jungle .cat-item,
body.theme-luxury input,
body.theme-luxury select,
body.theme-luxury .cat-item,
body.theme-cyberpunk input,
body.theme-cyberpunk select,
body.theme-cyberpunk .cat-item,
body.theme-arcade input,
body.theme-arcade select,
body.theme-arcade .cat-item,
body.theme-circuit input,
body.theme-circuit select,
body.theme-circuit .cat-item,
body.theme-royal input,
body.theme-royal select,
body.theme-royal .cat-item,
body.theme-midnight input,
body.theme-midnight select,
body.theme-midnight .cat-item,
body.theme-wolfpack input,
body.theme-wolfpack select,
body.theme-wolfpack .cat-item,
body.theme-dragonden input,
body.theme-dragonden select,
body.theme-dragonden .cat-item,
body.theme-lynxnight input,
body.theme-lynxnight select,
body.theme-lynxnight .cat-item,
body.theme-therianmoon input,
body.theme-therianmoon select,
body.theme-therianmoon .cat-item,
body.theme-datacenter input,
body.theme-datacenter select,
body.theme-datacenter .cat-item,
body.theme-terminal input,
body.theme-terminal select,
body.theme-terminal .cat-item,
body.theme-securityops input,
body.theme-securityops select,
body.theme-securityops .cat-item,
body.theme-retrocrt input,
body.theme-retrocrt select,
body.theme-retrocrt .cat-item,
body.theme-quantum input,
body.theme-quantum select,
body.theme-quantum .cat-item {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.theme-hacker option,
body.theme-space option,
body.theme-neon option,
body.theme-ocean option,
body.theme-volcano option,
body.theme-jungle option,
body.theme-luxury option,
body.theme-cyberpunk option,
body.theme-arcade option,
body.theme-circuit option,
body.theme-royal option,
body.theme-midnight option,
body.theme-wolfpack option,
body.theme-dragonden option,
body.theme-lynxnight option,
body.theme-therianmoon option,
body.theme-datacenter option,
body.theme-terminal option,
body.theme-securityops option,
body.theme-retrocrt option,
body.theme-quantum option {
    color: #111827;
}

body.theme-hacker input::placeholder,
body.theme-space input::placeholder,
body.theme-neon input::placeholder,
body.theme-ocean input::placeholder,
body.theme-volcano input::placeholder,
body.theme-jungle input::placeholder,
body.theme-luxury input::placeholder,
body.theme-cyberpunk input::placeholder,
body.theme-arcade input::placeholder,
body.theme-circuit input::placeholder,
body.theme-royal input::placeholder,
body.theme-midnight input::placeholder,
body.theme-wolfpack input::placeholder,
body.theme-dragonden input::placeholder,
body.theme-lynxnight input::placeholder,
body.theme-therianmoon input::placeholder,
body.theme-datacenter input::placeholder,
body.theme-terminal input::placeholder,
body.theme-securityops input::placeholder,
body.theme-retrocrt input::placeholder,
body.theme-quantum input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

/* Expanded theme personality layer */
body[class*="theme-"] {
    --theme-glow: rgba(13, 148, 136, 0.22);
    --theme-panel-edge: rgba(255, 255, 255, 0.62);
    --theme-pattern: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    --theme-pattern-size: 52px 52px;
    --theme-floor: linear-gradient(to top, rgba(32, 49, 63, 0.16), transparent);
    --lane-mark: rgba(255, 255, 255, 0.24);
    --timer-ring: rgba(13, 148, 136, 0.18);
    --badge-bg: rgba(255, 255, 255, 0.72);
    --racer-shadow: rgba(32, 49, 63, 0.32);
    --panel-icon-bg: rgba(13, 148, 136, 0.13);
    background-attachment: fixed;
}

body[class*="theme-"]::before {
    background-image: var(--theme-pattern);
    background-size: var(--theme-pattern-size);
    opacity: 0.9;
}

body[class*="theme-"]::after {
    background: var(--theme-floor);
}

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 {
    border-color: var(--theme-panel-edge);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18), 0 0 32px var(--theme-glow);
}

body[class*="theme-"] .panel-title > span {
    background: var(--panel-icon-bg);
    box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px var(--theme-glow);
}

body[class*="theme-"] .hero-stats span,
body[class*="theme-"] .race-meta span {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 18px var(--theme-glow);
}

body[class*="theme-"] #waitingScreen {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 48%),
        var(--panel);
}

body[class*="theme-"] .big-timer {
    border-color: var(--timer-ring);
    box-shadow: 0 12px 28px var(--theme-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

body[class*="theme-"] .track-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent),
        repeating-linear-gradient(90deg, transparent 0 90px, var(--lane-mark) 90px 92px),
        var(--track-bg);
}

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

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

body[class*="theme-"] .camel::after {
    filter: drop-shadow(0 8px 7px var(--racer-shadow));
}

body[class*="theme-"] .player-label,
body[class*="theme-"] .progress-badge {
    background: var(--badge-bg);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.14);
}

body[class*="theme-"] .option-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.theme-desert {
    --theme-glow: rgba(180, 83, 9, 0.25);
    --theme-panel-edge: rgba(255, 244, 214, 0.76);
    --theme-pattern: radial-gradient(circle at 20px 36px, rgba(154, 90, 37, 0.18) 0 11px, transparent 12px), radial-gradient(circle at 62px 36px, rgba(154, 90, 37, 0.15) 0 11px, transparent 12px);
    --theme-pattern-size: 84px 58px;
    --theme-floor: linear-gradient(to top, rgba(154, 90, 37, 0.25), transparent);
    --lane-mark: rgba(154, 90, 37, 0.16);
    --timer-ring: rgba(217, 119, 6, 0.22);
    --panel-icon-bg: rgba(217, 119, 6, 0.14);
}

body.theme-hacker {
    --theme-glow: rgba(0, 255, 128, 0.26);
    --theme-panel-edge: rgba(0, 255, 128, 0.38);
    --theme-pattern: repeating-linear-gradient(90deg, rgba(0, 255, 128, 0.14) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(0, 255, 128, 0.1) 0 1px, transparent 1px 18px);
    --theme-pattern-size: 96px 72px;
    --theme-floor: linear-gradient(to top, rgba(0, 255, 128, 0.14), transparent);
    --lane-mark: rgba(0, 255, 128, 0.22);
    --timer-ring: rgba(0, 255, 128, 0.28);
    --badge-bg: rgba(0, 24, 12, 0.86);
    --racer-shadow: rgba(0, 255, 128, 0.72);
    --panel-icon-bg: rgba(0, 255, 128, 0.1);
}

body.theme-space {
    --theme-glow: rgba(0, 210, 255, 0.26);
    --theme-panel-edge: rgba(125, 211, 252, 0.34);
    --theme-pattern: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(125, 211, 252, 0.58) 0 1px, transparent 2px);
    --theme-pattern-size: 160px 120px, 220px 170px;
    --theme-floor: radial-gradient(circle at 50% 100%, rgba(0, 210, 255, 0.18), transparent 62%);
    --lane-mark: rgba(125, 211, 252, 0.22);
    --timer-ring: rgba(0, 210, 255, 0.28);
    --racer-shadow: rgba(0, 210, 255, 0.65);
}

body.theme-neon,
body.theme-cyberpunk,
body.theme-arcade,
body.theme-retrocrt {
    --theme-glow: rgba(255, 20, 147, 0.3);
    --theme-panel-edge: rgba(255, 113, 206, 0.44);
    --theme-pattern: linear-gradient(rgba(255, 20, 147, 0.2) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 191, 255, 0.2) 2px, transparent 2px);
    --theme-pattern-size: 42px 42px;
    --theme-floor: linear-gradient(to top, rgba(255, 20, 147, 0.18), transparent);
    --lane-mark: rgba(0, 191, 255, 0.24);
    --timer-ring: rgba(255, 20, 147, 0.28);
    --racer-shadow: rgba(255, 20, 147, 0.78);
}

body.theme-ocean {
    --theme-glow: rgba(127, 219, 255, 0.25);
    --theme-panel-edge: rgba(127, 219, 255, 0.4);
    --theme-pattern: radial-gradient(circle at 20px 50px, rgba(127, 219, 255, 0.24) 0 3px, transparent 4px), radial-gradient(circle at 80px 20px, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px);
    --theme-pattern-size: 120px 80px;
    --theme-floor: linear-gradient(to top, rgba(0, 116, 217, 0.22), transparent);
    --lane-mark: rgba(127, 219, 255, 0.22);
    --timer-ring: rgba(127, 219, 255, 0.24);
    --racer-shadow: rgba(127, 219, 255, 0.56);
}

body.theme-volcano,
body.theme-dragonden {
    --theme-glow: rgba(255, 65, 54, 0.32);
    --theme-panel-edge: rgba(255, 133, 27, 0.42);
    --theme-pattern: radial-gradient(circle at 28px 28px, rgba(255, 65, 54, 0.28) 0 4px, transparent 6px), linear-gradient(135deg, rgba(255, 133, 27, 0.16) 0 2px, transparent 2px 32px);
    --theme-pattern-size: 90px 90px, 64px 64px;
    --theme-floor: radial-gradient(circle at 50% 100%, rgba(255, 65, 54, 0.28), transparent 58%);
    --lane-mark: rgba(255, 133, 27, 0.24);
    --timer-ring: rgba(255, 65, 54, 0.3);
    --racer-shadow: rgba(255, 133, 27, 0.78);
}

body.theme-jungle,
body.theme-botanic,
body.theme-meadow {
    --theme-glow: rgba(34, 197, 94, 0.24);
    --theme-panel-edge: rgba(134, 239, 172, 0.42);
    --theme-pattern: radial-gradient(ellipse at 20px 18px, rgba(34, 197, 94, 0.2) 0 12px, transparent 13px), radial-gradient(ellipse at 68px 44px, rgba(13, 148, 136, 0.16) 0 14px, transparent 15px);
    --theme-pattern-size: 110px 82px;
    --theme-floor: linear-gradient(to top, rgba(22, 163, 74, 0.2), transparent);
    --lane-mark: rgba(34, 197, 94, 0.2);
    --timer-ring: rgba(34, 197, 94, 0.26);
    --racer-shadow: rgba(22, 101, 52, 0.5);
}

body.theme-candy,
body.theme-pawprint,
body.theme-furrycon,
body.theme-festival {
    --theme-glow: rgba(236, 72, 153, 0.24);
    --theme-panel-edge: rgba(255, 255, 255, 0.78);
    --theme-pattern: radial-gradient(circle at 22px 22px, rgba(236, 72, 153, 0.24) 0 5px, transparent 6px), radial-gradient(circle at 64px 46px, rgba(14, 165, 233, 0.2) 0 4px, transparent 5px), radial-gradient(circle at 92px 22px, rgba(250, 204, 21, 0.24) 0 4px, transparent 5px);
    --theme-pattern-size: 120px 82px;
    --theme-floor: linear-gradient(to top, rgba(236, 72, 153, 0.16), transparent);
    --lane-mark: rgba(236, 72, 153, 0.16);
    --timer-ring: rgba(236, 72, 153, 0.24);
}

body.theme-luxury,
body.theme-royal {
    --theme-glow: rgba(250, 204, 21, 0.28);
    --theme-panel-edge: rgba(250, 204, 21, 0.42);
    --theme-pattern: linear-gradient(120deg, rgba(250, 204, 21, 0.14) 0 2px, transparent 2px 38px), linear-gradient(60deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 34px);
    --theme-pattern-size: 110px 110px;
    --theme-floor: linear-gradient(to top, rgba(250, 204, 21, 0.16), transparent);
    --lane-mark: rgba(250, 204, 21, 0.2);
    --timer-ring: rgba(250, 204, 21, 0.26);
    --racer-shadow: rgba(250, 204, 21, 0.72);
}

body.theme-arctic,
body.theme-hologram,
body.theme-cloudcore {
    --theme-glow: rgba(14, 165, 233, 0.23);
    --theme-panel-edge: rgba(255, 255, 255, 0.72);
    --theme-pattern: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0 2px, transparent 2px 34px), radial-gradient(circle at 72px 32px, rgba(6, 182, 212, 0.18) 0 9px, transparent 10px);
    --theme-pattern-size: 96px 96px, 140px 90px;
    --theme-floor: linear-gradient(to top, rgba(14, 165, 233, 0.16), transparent);
    --lane-mark: rgba(6, 182, 212, 0.18);
    --timer-ring: rgba(6, 182, 212, 0.24);
}

body.theme-sunset,
body.theme-foxfire {
    --theme-glow: rgba(249, 115, 22, 0.27);
    --theme-panel-edge: rgba(255, 237, 213, 0.72);
    --theme-pattern: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 44px), radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.24), transparent 18%);
    --theme-pattern-size: auto, 100% 100%;
    --theme-floor: linear-gradient(to top, rgba(124, 58, 237, 0.2), transparent);
    --lane-mark: rgba(249, 115, 22, 0.18);
    --timer-ring: rgba(249, 115, 22, 0.24);
}

body.theme-circuit,
body.theme-datacenter,
body.theme-terminal,
body.theme-securityops,
body.theme-quantum {
    --theme-glow: rgba(34, 211, 238, 0.24);
    --theme-panel-edge: rgba(34, 211, 238, 0.36);
    --theme-pattern: linear-gradient(rgba(34, 211, 238, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 230, 53, 0.12) 1px, transparent 1px), radial-gradient(circle at 70% 20%, rgba(34, 211, 238, 0.18), transparent 20%);
    --theme-pattern-size: 46px 46px, 46px 46px, 100% 100%;
    --theme-floor: linear-gradient(to top, rgba(34, 211, 238, 0.12), transparent);
    --lane-mark: rgba(34, 211, 238, 0.2);
    --timer-ring: rgba(34, 211, 238, 0.24);
    --racer-shadow: rgba(34, 211, 238, 0.66);
}

body.theme-blueprint {
    --theme-glow: rgba(37, 99, 235, 0.2);
    --theme-panel-edge: rgba(37, 99, 235, 0.28);
    --theme-pattern: linear-gradient(rgba(37, 99, 235, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.18) 1px, transparent 1px), linear-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
    --theme-pattern-size: 36px 36px, 36px 36px, 9px 9px, 9px 9px;
    --theme-floor: linear-gradient(to top, rgba(37, 99, 235, 0.16), transparent);
}

body.theme-midnight,
body.theme-wolfpack,
body.theme-lynxnight,
body.theme-therianmoon {
    --theme-glow: rgba(167, 139, 250, 0.24);
    --theme-panel-edge: rgba(196, 181, 253, 0.34);
    --theme-pattern: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px), radial-gradient(circle at 70% 38%, rgba(196, 181, 253, 0.42) 0 1px, transparent 2px), radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px);
    --theme-pattern-size: 160px 120px, 220px 180px, 280px 220px;
    --theme-floor: linear-gradient(to top, rgba(96, 165, 250, 0.16), transparent);
    --lane-mark: rgba(196, 181, 253, 0.18);
    --timer-ring: rgba(196, 181, 253, 0.24);
    --racer-shadow: rgba(196, 181, 253, 0.62);
}

/* Cinematic motion layer: existing themes, richer atmosphere */
body[class*="theme-"] {
    --theme-speed: 26s;
    --theme-pulse-speed: 5s;
    --track-scan: rgba(255, 255, 255, 0.2);
    --racer-idle-speed: 2.8s;
    transition: background 0.6s ease, color 0.6s ease;
}

body[class*="theme-"]::before {
    animation: theme-drift var(--theme-speed) linear infinite;
    will-change: background-position, opacity;
}

body[class*="theme-"]::after {
    animation: theme-breathe var(--theme-pulse-speed) 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 {
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

body[class*="theme-"] .site-hero {
    position: relative;
    overflow: hidden;
}

body[class*="theme-"] .site-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.24) 48%, transparent 64% 100%);
    transform: translateX(-120%);
    animation: hero-sweep 7s ease-in-out infinite;
}

body[class*="theme-"] .panel::before,
body[class*="theme-"] #lobby::before,
body[class*="theme-"] #waitingScreen::before,
body[class*="theme-"] #quiz-container::before {
    animation: panel-sheen 8s ease-in-out infinite alternate;
}

body[class*="theme-"] .track-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg, transparent, var(--track-scan), transparent),
        radial-gradient(circle at 14% 50%, var(--theme-glow), transparent 18%),
        radial-gradient(circle at 78% 42%, var(--theme-glow), transparent 16%);
    background-size: 38% 100%, 100% 100%, 100% 100%;
    background-position: -45% 0, 0 0, 0 0;
    opacity: 0.58;
    animation: track-scan 4.8s ease-in-out infinite;
}

body[class*="theme-"] .track::before {
    box-shadow: 0 0 14px var(--theme-glow), 0 0 28px var(--theme-glow);
    animation: progress-glow 2.6s ease-in-out infinite alternate;
}

body[class*="theme-"] .option-btn {
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

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

body[class*="theme-"] .camel:not(.stepping)::after {
    animation: racer-idle var(--racer-idle-speed) ease-in-out infinite;
}

body[class*="theme-"] #finish {
    box-shadow: 0 0 16px var(--theme-glow);
}

body[class*="theme-"] .big-timer {
    animation: timer-pulse 1.8s ease-in-out infinite alternate;
}

body.theme-hacker,
body.theme-terminal {
    --theme-speed: 9s;
    --theme-pulse-speed: 3.5s;
    --track-scan: rgba(34, 197, 94, 0.34);
}

body.theme-hacker::before,
body.theme-terminal::before {
    animation-name: digital-rain;
}

body.theme-space,
body.theme-midnight,
body.theme-wolfpack,
body.theme-lynxnight,
body.theme-therianmoon,
body.theme-quantum {
    --theme-speed: 34s;
    --theme-pulse-speed: 6s;
    --track-scan: rgba(196, 181, 253, 0.28);
}

body.theme-space::before,
body.theme-midnight::before,
body.theme-wolfpack::before,
body.theme-lynxnight::before,
body.theme-therianmoon::before,
body.theme-quantum::before {
    animation-name: star-drift;
}

body.theme-neon,
body.theme-cyberpunk,
body.theme-arcade,
body.theme-retrocrt {
    --theme-speed: 12s;
    --theme-pulse-speed: 2.8s;
    --track-scan: rgba(255, 20, 147, 0.34);
}

body.theme-neon .site-hero,
body.theme-cyberpunk .site-hero,
body.theme-arcade .site-hero,
body.theme-retrocrt .site-hero {
    animation: neon-flicker 5.5s linear infinite;
}

body.theme-ocean {
    --theme-speed: 18s;
    --theme-pulse-speed: 4.8s;
    --track-scan: rgba(127, 219, 255, 0.34);
}

body.theme-ocean::before {
    animation-name: bubble-rise;
}

body.theme-volcano,
body.theme-dragonden {
    --theme-speed: 14s;
    --theme-pulse-speed: 2.8s;
    --track-scan: rgba(255, 133, 27, 0.38);
}

body.theme-volcano::after,
body.theme-dragonden::after {
    animation-name: lava-breathe;
}

body.theme-jungle,
body.theme-botanic,
body.theme-meadow {
    --theme-speed: 24s;
    --theme-pulse-speed: 5.4s;
    --track-scan: rgba(134, 239, 172, 0.3);
}

body.theme-jungle::before,
body.theme-botanic::before,
body.theme-meadow::before {
    animation-name: leaf-sway;
}

body.theme-candy,
body.theme-pawprint,
body.theme-furrycon,
body.theme-festival {
    --theme-speed: 15s;
    --theme-pulse-speed: 3.8s;
    --track-scan: rgba(236, 72, 153, 0.28);
}

body.theme-candy::before,
body.theme-pawprint::before,
body.theme-furrycon::before,
body.theme-festival::before {
    animation-name: confetti-float;
}

body.theme-luxury,
body.theme-royal {
    --theme-speed: 22s;
    --theme-pulse-speed: 4.8s;
    --track-scan: rgba(250, 204, 21, 0.35);
}

body.theme-luxury .site-hero,
body.theme-royal .site-hero {
    animation: gold-glint 6s ease-in-out infinite;
}

body.theme-arctic,
body.theme-hologram,
body.theme-cloudcore,
body.theme-blueprint {
    --theme-speed: 28s;
    --theme-pulse-speed: 5.8s;
    --track-scan: rgba(6, 182, 212, 0.28);
}

body.theme-arctic::before,
body.theme-hologram::before,
body.theme-cloudcore::before {
    animation-name: crystal-drift;
}

body.theme-circuit,
body.theme-datacenter,
body.theme-securityops {
    --theme-speed: 11s;
    --theme-pulse-speed: 3.4s;
    --track-scan: rgba(34, 211, 238, 0.34);
}

body.theme-circuit::before,
body.theme-datacenter::before,
body.theme-securityops::before {
    animation-name: circuit-flow;
}

body.theme-desert,
body.theme-sunset,
body.theme-foxfire {
    --theme-speed: 20s;
    --theme-pulse-speed: 4.2s;
    --track-scan: rgba(249, 115, 22, 0.28);
}

body.theme-desert::before,
body.theme-sunset::before,
body.theme-foxfire::before {
    animation-name: heat-haze;
}

@keyframes theme-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 220px 120px, -180px 160px, 120px -90px, 0 0; }
}

@keyframes theme-breathe {
    0% { opacity: 0.54; transform: translateY(0); }
    100% { opacity: 0.92; transform: translateY(8px); }
}

@keyframes hero-sweep {
    0%, 42% { transform: translateX(-120%); opacity: 0; }
    52% { opacity: 0.95; }
    68%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes panel-sheen {
    0% { opacity: 0.36; transform: translate3d(-2%, -2%, 0); }
    100% { opacity: 0.76; transform: translate3d(2%, 2%, 0); }
}

@keyframes track-scan {
    0%, 18% { background-position: -45% 0, 0 0, 0 0; opacity: 0.22; }
    48% { opacity: 0.72; }
    78%, 100% { background-position: 145% 0, 0 0, 0 0; opacity: 0.3; }
}

@keyframes progress-glow {
    0% { filter: brightness(0.95); }
    100% { filter: brightness(1.35); }
}

@keyframes racer-idle {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes timer-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.035); }
}

@keyframes digital-rain {
    0% { background-position: 0 -120px, 0 0, 0 0; opacity: 0.68; }
    100% { background-position: 0 220px, 120px 0, 0 0; opacity: 0.98; }
}

@keyframes star-drift {
    0% { background-position: 0 0, 40px 20px, 0 0; opacity: 0.72; }
    50% { opacity: 1; }
    100% { background-position: 180px 90px, -120px 150px, 0 0; opacity: 0.78; }
}

@keyframes bubble-rise {
    0% { background-position: 0 120px, 40px 80px, 0 0; opacity: 0.62; }
    100% { background-position: 80px -180px, -60px -130px, 0 0; opacity: 0.92; }
}

@keyframes lava-breathe {
    0% { opacity: 0.5; filter: saturate(1); }
    100% { opacity: 0.96; filter: saturate(1.45); }
}

@keyframes leaf-sway {
    0% { background-position: 0 0, 0 0, 0 0; transform: skewX(0deg); }
    50% { transform: skewX(-1deg); }
    100% { background-position: 90px 30px, -70px 44px, 0 0; transform: skewX(1deg); }
}

@keyframes confetti-float {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 80px 120px, -70px 100px, 100px -80px; }
}

@keyframes gold-glint {
    0%, 100% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.25) brightness(1.12); }
}

@keyframes crystal-drift {
    0% { background-position: 0 0, 0 0, 0 0; opacity: 0.62; }
    100% { background-position: 130px 90px, -110px 80px, 0 0; opacity: 0.92; }
}

@keyframes circuit-flow {
    0% { background-position: 0 0, 0 0, 0 0; opacity: 0.72; }
    100% { background-position: 120px 0, 0 120px, 0 0; opacity: 1; }
}

@keyframes heat-haze {
    0% { background-position: 0 0, 0 0, 0 0; transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { background-position: 120px 40px, -80px 70px, 0 0; transform: translateY(0); }
}

@keyframes neon-flicker {
    0%, 100% { filter: brightness(1); }
    48% { filter: brightness(1.1); }
    50% { filter: brightness(0.9); }
    53% { filter: brightness(1.22); }
    56% { filter: brightness(1); }
}

/* Full theme rebuild: stronger named worlds without adding new theme names */
body[class*="theme-"] {
    --scene-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    --scene-size: auto;
    --scene-overlay: var(--theme-pattern);
    --scene-overlay-size: var(--theme-pattern-size);
    --scene-depth: radial-gradient(circle at 50% 100%, var(--theme-glow), transparent 55%);
    --surface-tint: rgba(255, 255, 255, 0.16);
    --track-texture:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent),
        repeating-linear-gradient(90deg, transparent 0 80px, var(--lane-mark) 80px 82px),
        var(--track-bg);
    --finish-glow: var(--theme-glow);
    --scene-speed: 38s;
    background: var(--scene-bg);
    background-size: var(--scene-size);
    background-attachment: fixed;
}

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

body[class*="theme-"]::after {
    background: var(--scene-depth);
    animation: scene-depth-pulse 6s 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 {
    background:
        linear-gradient(135deg, var(--surface-tint), transparent 42%),
        var(--panel);
}

body[class*="theme-"] .track-container {
    background: var(--track-texture);
}

body[class*="theme-"] #finish {
    background:
        repeating-linear-gradient(45deg, var(--finish-dark), var(--finish-dark) 8px, var(--finish-light) 8px, var(--finish-light) 16px);
    animation: finish-shimmer 2.4s ease-in-out infinite alternate;
}

body[class*="theme-"] button {
    animation: button-aura 4.8s ease-in-out infinite alternate;
}

body[class*="theme-"] .track-container::after {
    animation: track-scan 4.2s ease-in-out infinite, track-ambient 9s ease-in-out infinite alternate;
}

body.theme-desert {
    --scene-bg:
        radial-gradient(circle at 14% 18%, rgba(255, 238, 184, 0.7), transparent 16%),
        linear-gradient(175deg, transparent 0 58%, rgba(154, 90, 37, 0.22) 58% 61%, transparent 61% 100%),
        linear-gradient(145deg, #f8c66d 0%, #e98b45 48%, #8dd3c7 100%);
    --scene-overlay:
        radial-gradient(ellipse at 18px 42px, rgba(126, 73, 27, 0.20) 0 12px, transparent 13px),
        radial-gradient(ellipse at 62px 42px, rgba(126, 73, 27, 0.15) 0 12px, transparent 13px),
        linear-gradient(90deg, transparent 0 94%, rgba(255, 255, 255, 0.14) 94% 95%, transparent 95%);
    --scene-overlay-size: 86px 64px, 86px 64px, 220px 100%;
    --scene-depth: radial-gradient(circle at 18% 8%, rgba(255, 245, 198, 0.42), transparent 22%), linear-gradient(to top, rgba(126, 73, 27, 0.28), transparent);
    --surface-tint: rgba(255, 235, 186, 0.32);
    --track-texture:
        linear-gradient(180deg, rgba(255, 246, 207, 0.58), transparent),
        repeating-linear-gradient(0deg, rgba(154, 90, 37, 0.08) 0 2px, transparent 2px 18px),
        var(--track-bg);
}

body.theme-hacker {
    --scene-bg:
        radial-gradient(circle at 72% 18%, rgba(0, 255, 128, 0.12), transparent 28%),
        linear-gradient(135deg, #000 0%, #00170a 52%, #003b19 100%);
    --scene-overlay:
        repeating-linear-gradient(90deg, rgba(0, 255, 128, 0.13) 0 1px, transparent 1px 19px),
        repeating-linear-gradient(0deg, rgba(0, 255, 128, 0.10) 0 1px, transparent 1px 13px),
        linear-gradient(180deg, rgba(0, 255, 128, 0.14), transparent 24%);
    --scene-overlay-size: 90px 90px, 90px 90px, 100% 180px;
    --scene-depth: linear-gradient(to top, rgba(0, 255, 128, 0.16), transparent);
    --surface-tint: rgba(0, 255, 128, 0.08);
    --scene-speed: 10s;
}

body.theme-space {
    --scene-bg:
        radial-gradient(circle at 72% 18%, rgba(125, 211, 252, 0.22), transparent 20%),
        radial-gradient(circle at 18% 72%, rgba(168, 85, 247, 0.22), transparent 26%),
        linear-gradient(135deg, #020617 0%, #10113c 48%, #050510 100%);
    --scene-overlay:
        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);
    --scene-overlay-size: 150px 110px, 230px 180px, 310px 240px;
    --scene-depth: radial-gradient(ellipse at 50% 100%, rgba(0, 210, 255, 0.20), transparent 58%);
    --surface-tint: rgba(125, 211, 252, 0.10);
    --scene-speed: 46s;
}

body.theme-neon {
    --scene-bg:
        radial-gradient(circle at 20% 16%, rgba(255, 20, 147, 0.26), transparent 24%),
        radial-gradient(circle at 78% 72%, rgba(0, 191, 255, 0.22), transparent 26%),
        linear-gradient(145deg, #050011, #170026 54%, #010101);
    --scene-overlay:
        linear-gradient(rgba(255, 20, 147, 0.22) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 191, 255, 0.22) 2px, transparent 2px),
        linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, 0.12) 44% 45%, transparent 45%);
    --scene-overlay-size: 48px 48px, 48px 48px, 180px 100%;
    --surface-tint: rgba(255, 20, 147, 0.10);
    --scene-speed: 13s;
}

body.theme-ocean {
    --scene-bg:
        radial-gradient(circle at 50% -10%, rgba(127, 219, 255, 0.42), transparent 38%),
        linear-gradient(180deg, #003b69 0%, #001f3f 58%, #00101f 100%);
    --scene-overlay:
        radial-gradient(circle at 18px 80px, rgba(127, 219, 255, 0.28) 0 3px, transparent 4px),
        radial-gradient(circle at 86px 38px, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        repeating-radial-gradient(circle at 50% -20%, transparent 0, rgba(255,255,255,0.07) 2px, transparent 5px, transparent 18px);
    --scene-overlay-size: 130px 100px, 130px 100px, 100% 100%;
    --scene-depth: linear-gradient(to top, rgba(0, 31, 63, 0.38), transparent);
    --surface-tint: rgba(127, 219, 255, 0.10);
    --scene-speed: 18s;
}

body.theme-volcano {
    --scene-bg:
        radial-gradient(circle at 26% 82%, rgba(255, 65, 54, 0.40), transparent 28%),
        radial-gradient(circle at 80% 12%, rgba(255, 133, 27, 0.22), transparent 20%),
        linear-gradient(145deg, #111 0%, #2b0f0a 52%, #080506 100%);
    --scene-overlay:
        radial-gradient(circle at 30px 30px, rgba(255, 65, 54, 0.35) 0 4px, transparent 6px),
        linear-gradient(135deg, rgba(255, 133, 27, 0.16) 0 2px, transparent 2px 34px),
        linear-gradient(45deg, rgba(0, 0, 0, 0.22) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.22) 75%);
    --scene-overlay-size: 96px 96px, 72px 72px, 42px 42px;
    --surface-tint: rgba(255, 65, 54, 0.08);
    --scene-speed: 14s;
}

body.theme-jungle {
    --scene-bg:
        radial-gradient(circle at 18% 18%, rgba(46, 204, 64, 0.16), transparent 22%),
        radial-gradient(circle at 88% 70%, rgba(61, 153, 112, 0.18), transparent 24%),
        linear-gradient(135deg, #061b08, #0a290a 48%, #102f16);
    --scene-overlay:
        radial-gradient(ellipse at 18px 20px, rgba(46, 204, 64, 0.20) 0 14px, transparent 15px),
        radial-gradient(ellipse at 74px 50px, rgba(61, 153, 112, 0.18) 0 18px, transparent 19px),
        linear-gradient(45deg, rgba(13, 51, 13, 0.38) 25%, transparent 25% 75%, rgba(13, 51, 13, 0.38) 75%);
    --scene-overlay-size: 120px 88px, 150px 110px, 56px 56px;
    --surface-tint: rgba(46, 204, 64, 0.08);
}

body.theme-candy {
    --scene-bg:
        radial-gradient(circle at 22% 24%, rgba(255, 105, 180, 0.28), transparent 22%),
        radial-gradient(circle at 78% 72%, rgba(125, 211, 252, 0.28), transparent 24%),
        linear-gradient(135deg, #ffe6ea, #fff7ad 46%, #ffd1eb);
    --scene-overlay:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.68) 0 18px, rgba(255, 105, 180, 0.18) 18px 36px),
        radial-gradient(circle at 24px 24px, rgba(255, 20, 147, 0.22) 0 5px, transparent 6px);
    --scene-overlay-size: auto, 92px 92px;
    --surface-tint: rgba(255, 105, 180, 0.13);
    --scene-speed: 16s;
}

body.theme-luxury {
    --scene-bg:
        radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.22), transparent 28%),
        linear-gradient(135deg, #050505 0%, #17120a 55%, #0b0b0b 100%);
    --scene-overlay:
        linear-gradient(120deg, rgba(255, 215, 0, 0.18) 0 2px, transparent 2px 40px),
        linear-gradient(60deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.18), transparent 16%);
    --scene-overlay-size: 120px 120px, 90px 90px, 100% 100%;
    --surface-tint: rgba(255, 215, 0, 0.08);
}

body.theme-cyberpunk {
    --scene-bg:
        radial-gradient(circle at 16% 18%, rgba(1, 205, 254, 0.22), transparent 22%),
        radial-gradient(circle at 84% 74%, rgba(255, 113, 206, 0.25), transparent 26%),
        linear-gradient(135deg, #0b001a, #180028 55%, #05000d);
    --scene-overlay:
        linear-gradient(rgba(1, 205, 254, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 113, 206, 0.20) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 47%, rgba(255, 255, 255, 0.12) 47% 48%, transparent 48%);
    --scene-overlay-size: 38px 38px, 38px 38px, 160px 100%;
    --surface-tint: rgba(1, 205, 254, 0.08);
    --scene-speed: 12s;
}

body.theme-arctic {
    --scene-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 24%),
        linear-gradient(135deg, #effcff, #9de9ff 52%, #7dd3fc);
    --scene-overlay:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0 2px, transparent 2px 32px),
        radial-gradient(circle at 76px 36px, rgba(2, 132, 199, 0.16) 0 10px, transparent 11px);
    --scene-overlay-size: 92px 92px, 150px 110px;
    --surface-tint: rgba(255, 255, 255, 0.34);
}

body.theme-sunset {
    --scene-bg:
        radial-gradient(circle at 70% 14%, rgba(255, 213, 128, 0.48), transparent 18%),
        linear-gradient(180deg, #ffb86b 0%, #ee6b6e 42%, #3b2b7a 100%);
    --scene-overlay:
        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%);
    --scene-overlay-size: auto, 100% 100%;
    --surface-tint: rgba(255, 184, 107, 0.18);
}

body.theme-arcade {
    --scene-bg:
        radial-gradient(circle at 24% 18%, rgba(236, 72, 153, 0.26), transparent 22%),
        radial-gradient(circle at 80% 68%, rgba(34, 211, 238, 0.22), transparent 24%),
        linear-gradient(135deg, #111827, #4c1d95 56%, #050008);
    --scene-overlay:
        linear-gradient(rgba(34, 211, 238, 0.16) 2px, transparent 2px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.18) 2px, transparent 2px),
        repeating-linear-gradient(45deg, transparent 0 20px, rgba(255, 255, 255, 0.07) 20px 22px);
    --scene-overlay-size: 32px 32px, 32px 32px, 90px 90px;
    --surface-tint: rgba(236, 72, 153, 0.08);
}

body.theme-circuit,
body.theme-datacenter,
body.theme-securityops {
    --scene-bg:
        radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.18), transparent 22%),
        radial-gradient(circle at 82% 72%, rgba(163, 230, 53, 0.16), transparent 24%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    --scene-overlay:
        linear-gradient(rgba(34, 211, 238, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 230, 53, 0.12) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 48%, rgba(34, 211, 238, 0.14) 48% 49%, transparent 49%);
    --scene-overlay-size: 44px 44px, 44px 44px, 110px 110px;
    --surface-tint: rgba(34, 211, 238, 0.08);
}

body.theme-royal {
    --scene-bg:
        radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.24), transparent 24%),
        linear-gradient(135deg, #052e2b, #312e81 52%, #031f1e);
    --scene-overlay:
        linear-gradient(120deg, rgba(250, 204, 21, 0.16) 0 2px, transparent 2px 36px),
        linear-gradient(60deg, rgba(52, 211, 153, 0.12) 0 2px, transparent 2px 42px);
    --scene-overlay-size: 116px 116px, 104px 104px;
    --surface-tint: rgba(250, 204, 21, 0.08);
}

body.theme-festival,
body.theme-furrycon {
    --scene-bg:
        radial-gradient(circle at 20% 20%, rgba(244, 63, 94, 0.24), transparent 20%),
        radial-gradient(circle at 82% 76%, rgba(14, 165, 233, 0.22), transparent 22%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    --scene-overlay:
        radial-gradient(circle at 18px 18px, rgba(244, 63, 94, 0.36) 0 3px, transparent 4px),
        radial-gradient(circle at 62px 46px, rgba(14, 165, 233, 0.32) 0 3px, transparent 4px),
        radial-gradient(circle at 94px 22px, rgba(250, 204, 21, 0.34) 0 3px, transparent 4px);
    --scene-overlay-size: 120px 80px, 120px 80px, 120px 80px;
    --surface-tint: rgba(255, 255, 255, 0.20);
}

body.theme-midnight,
body.theme-wolfpack,
body.theme-lynxnight,
body.theme-therianmoon {
    --scene-bg:
        radial-gradient(circle at 74% 14%, rgba(255, 255, 255, 0.18), transparent 13%),
        radial-gradient(circle at 20% 78%, rgba(96, 165, 250, 0.16), transparent 24%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    --scene-overlay:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 38%, rgba(196, 181, 253, 0.48) 0 1px, transparent 2px),
        radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.34) 0 1px, transparent 2px);
    --scene-overlay-size: 150px 110px, 220px 180px, 280px 220px;
    --surface-tint: rgba(196, 181, 253, 0.08);
}

body.theme-botanic,
body.theme-meadow {
    --scene-bg:
        radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.32), transparent 20%),
        linear-gradient(135deg, var(--page-bg), var(--page-bg-2));
    --scene-overlay:
        radial-gradient(ellipse at 22px 22px, rgba(22, 163, 74, 0.20) 0 13px, transparent 14px),
        radial-gradient(ellipse at 76px 48px, rgba(13, 148, 136, 0.18) 0 16px, transparent 17px),
        repeating-linear-gradient(135deg, rgba(22, 163, 74, 0.10) 0 10px, transparent 10px 34px);
    --scene-overlay-size: 116px 86px, 138px 100px, auto;
    --surface-tint: rgba(255, 255, 255, 0.22);
}

body.theme-pawprint {
    --scene-bg:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.38), transparent 20%),
        linear-gradient(135deg, #ffd6c9, #8dd7c7);
    --scene-overlay:
        radial-gradient(circle at 24px 24px, rgba(53, 34, 56, 0.16) 0 6px, transparent 7px),
        radial-gradient(circle at 42px 14px, rgba(53, 34, 56, 0.16) 0 3px, transparent 4px),
        radial-gradient(circle at 14px 14px, rgba(53, 34, 56, 0.16) 0 3px, transparent 4px);
    --scene-overlay-size: 92px 76px, 92px 76px, 92px 76px;
    --surface-tint: rgba(255, 255, 255, 0.22);
}

body.theme-foxfire {
    --scene-bg:
        radial-gradient(circle at 70% 16%, rgba(255, 237, 213, 0.40), transparent 18%),
        linear-gradient(135deg, #ffb86b, #c7531d 45%, #0f766e 100%);
    --scene-overlay:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.20) 0 12px, transparent 12px 38px),
        radial-gradient(circle at 26% 70%, rgba(249, 115, 22, 0.22), transparent 20%);
    --scene-overlay-size: auto, 100% 100%;
}

body.theme-dragonden {
    --scene-bg:
        radial-gradient(circle at 26% 78%, rgba(251, 146, 60, 0.34), transparent 24%),
        radial-gradient(circle at 80% 18%, rgba(220, 38, 38, 0.22), transparent 20%),
        linear-gradient(135deg, #160c0a, #5f1d12);
}

body.theme-blueprint {
    --scene-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 30%),
        linear-gradient(135deg, #dbeafe, #60a5fa);
    --scene-overlay:
        linear-gradient(rgba(37, 99, 235, 0.24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.24) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.10) 1px, transparent 1px);
    --scene-overlay-size: 36px 36px, 36px 36px, 9px 9px, 9px 9px;
}

body.theme-hologram {
    --scene-bg:
        radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.56), transparent 24%),
        linear-gradient(135deg, #e0f2fe, #a78bfa);
    --scene-overlay:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0 2px, transparent 2px 26px),
        radial-gradient(circle at 72% 70%, rgba(6, 182, 212, 0.20), transparent 20%);
    --scene-overlay-size: auto, 100% 100%;
}

body.theme-cloudcore {
    --scene-bg:
        radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.72), transparent 23%),
        radial-gradient(ellipse at 78% 18%, rgba(255, 255, 255, 0.50), transparent 20%),
        linear-gradient(135deg, #eef2ff, #67e8f9);
    --scene-overlay:
        radial-gradient(ellipse at 28px 36px, rgba(255, 255, 255, 0.48) 0 18px, transparent 19px),
        radial-gradient(ellipse at 86px 54px, rgba(255, 255, 255, 0.28) 0 14px, transparent 15px);
    --scene-overlay-size: 150px 96px, 160px 100px;
}

@media (prefers-reduced-motion: reduce) {
    body[class*="theme-"]::before,
    body[class*="theme-"]::after,
    body[class*="theme-"] .site-hero,
    body[class*="theme-"] .site-hero::after,
    body[class*="theme-"] .panel::before,
    body[class*="theme-"] #lobby::before,
    body[class*="theme-"] #waitingScreen::before,
    body[class*="theme-"] #quiz-container::before,
    body[class*="theme-"] .track-container::after,
    body[class*="theme-"] .track::before,
    body[class*="theme-"] .camel:not(.stepping)::after,
    body[class*="theme-"] .big-timer {
        animation: none !important;
    }
}

@media (max-width: 820px) {
    body {
        padding: 14px;
    }

    h1 {
        text-align: center;
    }

    .site-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        text-align: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .container {
        width: 100%;
    }

    .left-panel {
        order: 2;
        width: 100%;
    }

    .main-panel {
        min-width: 0;
    }

    #lobby,
    #quiz-container,
    #waitingScreen {
        padding: 20px;
    }

    .cat-grid,
    .options-grid {
        grid-template-columns: 1fr;
    }

    .category-heading,
    .game-header {
        align-items: stretch;
        flex-direction: column;
    }

    .category-actions,
    .race-meta {
        justify-content: center;
    }

    .option-btn {
        min-height: 58px;
    }

    .track-container {
        padding: 14px;
    }

    .track {
        height: 58px;
        margin: 24px 0;
    }

    .camel::after {
        font-size: 46px;
    }
}