@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body,
body * {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
    -webkit-user-select: text;
    user-select: text;
}

img,
svg,
video {
    -webkit-user-drag: none;
}

:root {
    --brown: hsl(280, 60%, 45%);
    --darkerBrown: hsl(280, 60%, 35%);
    --darkestBrown: hsl(280, 60%, 25%);
    --hover-color: hsl(280, 65%, 50%);
    --primary-background-color: hsl(260, 40%, 8%);
    --primary-font-color: hsl(0, 0%, 100%);
}

.purple-theme{
    --brown: hsl(280, 60%, 45%);        /* main purple */
    --darkerBrown: hsl(280, 60%, 35%);  /* hover / darker */
    --darkestBrown: hsl(280, 60%, 25%); /* pressed / darkest */
    --hover-color: hsl(280, 65%, 50%);

    --primary-background-color: hsl(260, 40%, 8%);  /* dark purple background */
    --primary-font-color: hsl(0, 0%, 100%);
}
.midnight-theme{
    --brown: hsl(230, 60%, 50%);
    --darkerBrown: hsl(230, 60%, 38%);
    --darkestBrown: hsl(230, 60%, 28%);
    --hover-color: hsl(230, 65%, 45%);
    --primary-background-color: hsl(230, 35%, 6%);
    --primary-font-color: white;
}
.sunset-theme{
    --brown: hsl(25, 85%, 50%);
    --darkerBrown: hsl(25, 85%, 40%);
    --darkestBrown: hsl(25, 85%, 30%);
    --hover-color: hsl(25, 90%, 55%);
    --primary-background-color: hsl(25, 35%, 8%);
    --primary-font-color: white;
}
.green-theme{
    --brown: hsl(150, 60%, 40%);
    --darkerBrown: hsl(150, 60%, 30%);
    --darkestBrown: hsl(150, 60%, 22%);
    --hover-color: hsl(150, 65%, 45%);
    --primary-background-color: hsl(150, 30%, 8%);
    --primary-font-color: white;
}
.dark-theme{
    --brown: hsl(220, 10%, 28%);        /* buttons */
    --darkerBrown: hsl(220, 10%, 20%);  /* hover */
    --darkestBrown: hsl(220, 10%, 14%); /* pressed */
    --hover-color: hsl(200, 70%, 36%);
    --primary-background-color: hsl(220, 15%, 6%);  /* main background */
    --primary-font-color: hsl(220, 15%, 92%);       /* soft white text */
}
.red-theme,
:root {
    --red-brown: hsl(0, 59%, 41%);
}
.red-theme {
    --brown: hsl(0, 59%, 41%);
    --darkerBrown: hsl(0, 59%, 32%);
    --darkestBrown: hsl(0, 59%, 24%);
    --hover-color: hsl(0, 65%, 47%);
    --primary-background-color: hsl(0, 25%, 8%);
    --primary-font-color: hsl(0, 0%, 100%);
}

/* Premium shop themes: applied only when equipped on Personalise. */
.gatekeep-shop-night{
    --brown:hsl(210,72%,54%);
    --darkerBrown:hsl(210,72%,43%);
    --darkestBrown:hsl(210,72%,30%);
    --hover-color:hsl(195,90%,62%);
    --primary-background-color:hsl(221,46%,7%);
    --primary-font-color:hsl(210,35%,96%);
}
.gatekeep-shop-arcade{
    --brown:hsl(305,70%,52%);
    --darkerBrown:hsl(305,70%,41%);
    --darkestBrown:hsl(305,70%,29%);
    --hover-color:hsl(35,95%,60%);
    --primary-background-color:hsl(268,44%,7%);
    --primary-font-color:hsl(0,0%,100%);
}
.gatekeep-shop-sunset{--brown:#df7651;--darkerBrown:#b75246;--darkestBrown:#743b42;--hover-color:#f1aa57;--primary-background-color:#211817;--primary-font-color:#fff5eb}
.gatekeep-shop-forest{--brown:#538c68;--darkerBrown:#3e704f;--darkestBrown:#294c3b;--hover-color:#8fbd72;--primary-background-color:#101b16;--primary-font-color:#eff8ed}
.gatekeep-shop-ocean{--brown:#348b9c;--darkerBrown:#286c80;--darkestBrown:#1b485e;--hover-color:#62c9c2;--primary-background-color:#101b22;--primary-font-color:#eaf8fa}
.gatekeep-shop-sakura{--brown:#c96f97;--darkerBrown:#a64e7d;--darkestBrown:#713c68;--hover-color:#ee9ab0;--primary-background-color:#21161f;--primary-font-color:#fff1f5}
.gatekeep-shop-aurora{--brown:#43a890;--darkerBrown:#328575;--darkestBrown:#245d62;--hover-color:#80dbad;--primary-background-color:#101b1a;--primary-font-color:#effcf4}
.gatekeep-shop-monochrome{--brown:#788893;--darkerBrown:#596974;--darkestBrown:#3a474f;--hover-color:#c3d0d4;--primary-background-color:#171b1e;--primary-font-color:#f3f5f4}
.gatekeep-shop-midas{--brown:#8C6D18;--darkerBrown:#654C12;--darkestBrown:#45330C;--hover-color:#D4AF37;--interactive-hover-ink:#0A0A0A;--primary-background-color:#0A0A0A;--primary-font-color:#F5F5F0;--lightBrown:#1A1914}
.gatekeep-shop-game-on{--brown:#087885;--darkerBrown:#075965;--darkestBrown:#063541;--hover-color:#00F5FF;--interactive-hover-ink:#0B0F1E;--primary-background-color:#0B0F1E;--primary-font-color:#F3F7FF;--gatekeep-neon:#00F5FF;--gatekeep-neon-ink:#0B0F1E;--gatekeep-pink:#FF00E5}
.gatekeep-shop-crow{--brown:#B02A2A;--darkerBrown:#721D22;--darkestBrown:#48171B;--hover-color:#FF554F;--interactive-hover-ink:#08080A;--primary-background-color:#08080A;--primary-font-color:#E7E7E9;--lightBrown:#1A1A1E}
.gatekeep-shop-abyssal-sage{--brown:#136579;--darkerBrown:#0B4658;--darkestBrown:#082C3A;--hover-color:#7EE8FA;--interactive-hover-ink:#06141F;--primary-background-color:#06141F;--primary-font-color:#E6F7FA;--lightBrown:#0B2E3C}
.gatekeep-shop-forest-sanctuary{--brown:#547A5B;--darkerBrown:#36543B;--darkestBrown:#263D2B;--hover-color:#A8C3A0;--interactive-hover-ink:#1A2E1A;--primary-background-color:#1A2E1A;--primary-font-color:#F5F7F3;--lightBrown:#253B29}

html.gatekeep-font-space-grotesk body{font-family:'Space Grotesk',sans-serif!important}
html.gatekeep-font-jetbrains-mono body{font-family:'JetBrains Mono',monospace!important}
html.gatekeep-font-cinzel body{font-family:'Cinzel',serif!important}
html.gatekeep-font-instrument-serif body{font-family:'Instrument Serif',serif!important}
html.gatekeep-font-inter body{font-family:'Inter',sans-serif!important}
html.gatekeep-font-satoshi body{font-family:'Inter',sans-serif!important}
html.gatekeep-shop-crow body{isolation:isolate;background:#08080a url('/assets/prem_themes/crows.jpg') center center/cover fixed no-repeat}
html.gatekeep-shop-game-on body{isolation:isolate;background:#0b0f1e url('/assets/prem_themes/game_bg.jpg') center center/cover fixed no-repeat}
html.gatekeep-shop-abyssal-sage body{isolation:isolate;background-color:#06141f;background-image:linear-gradient(180deg,rgba(3,22,32,.24),rgba(6,20,31,.68)),radial-gradient(ellipse at 50% 0,rgba(77,208,225,.24),transparent 54%),url('/api/quiz-image/generalImages/barrierreef.jpg');background-size:cover,cover,cover;background-position:center;background-attachment:fixed}
html.gatekeep-shop-forest-sanctuary body{isolation:isolate;background-color:#1a2e1a;background-image:linear-gradient(180deg,rgba(20,42,25,.26),rgba(17,39,22,.65)),radial-gradient(ellipse at 18% 0,rgba(249,226,175,.28),transparent 38%),url('/api/quiz-image/generalImages/amazon.jpg');background-size:cover,cover,cover;background-position:center;background-attachment:fixed}
html.gatekeep-shop-abyssal-sage :is(#choicesContainer,.choices-container) button:active,html.gatekeep-shop-abyssal-sage :is(#choicesContainer,.choices-container) button:focus-visible{animation:jellyPulse .75s ease-in-out infinite alternate}
.gatekeep-theme-effect{position:fixed;top:-48px;z-index:16000;pointer-events:none;animation:themeEffectFall 3.2s ease-in forwards}
.theme-feather-effect{width:13px;height:42px;border-radius:90% 0 90% 0;background:linear-gradient(115deg,#08080a 0 42%,#424248 46% 50%,#111115 56%);transform:rotate(25deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.theme-leaf-effect{width:19px;height:29px;border-radius:90% 0 90% 0;background:linear-gradient(135deg,#a8c3a0,#547a5b);transform:rotate(35deg)}
.theme-bubble-effect{width:22px;height:22px;border:1px solid rgba(126,232,250,.82);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.76),rgba(77,208,225,.16) 38%,rgba(77,208,225,.04));box-shadow:0 0 18px rgba(77,208,225,.45)}
.font-preview-space-grotesk{font-family:'Space Grotesk',sans-serif}.font-preview-jetbrains-mono{font-family:'JetBrains Mono',monospace}.font-preview-cinzel{font-family:'Cinzel',serif}.font-preview-instrument-serif{font-family:'Instrument Serif',serif}.font-preview-inter,.font-preview-satoshi{font-family:'Inter',sans-serif}
@keyframes themeEffectFall{to{transform:translateY(110vh) rotate(300deg);opacity:0}}
@keyframes jellyPulse{to{box-shadow:0 0 26px rgba(77,208,225,.72);filter:brightness(1.16)}}
@media(prefers-reduced-motion:reduce){.gatekeep-theme-effect,html.gatekeep-shop-abyssal-sage :is(#choicesContainer,.choices-container) button{animation:none}}
html.gatekeep-shop-game-on :is(.store-filter:hover,.store-filter.is-active,.filter-button:hover,.filter-button.is-active,.shop-link:hover,.equip-item:hover,.secondary-link:hover,.store-card .shop-buy:hover:not(:disabled)){background:var(--gatekeep-neon);border-color:var(--gatekeep-neon);color:var(--gatekeep-neon-ink);box-shadow:0 0 0 1px rgba(0,245,255,.24),0 0 18px rgba(0,245,255,.3)}
html:is(.gatekeep-shop-midas,.gatekeep-shop-game-on,.gatekeep-shop-crow,.gatekeep-shop-abyssal-sage,.gatekeep-shop-forest-sanctuary) body :is(.store-filter:hover,.store-filter.is-active,.filter-button:hover,.filter-button.is-active,.shop-link:hover,.equip-item:hover,.secondary-link:hover,.store-card .shop-buy:hover:not(:disabled)){background-color:var(--hover-color);border-color:var(--hover-color);color:var(--interactive-hover-ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--hover-color) 42%,transparent),0 0 18px color-mix(in srgb,var(--hover-color) 35%,transparent)}