:root {
    --bg: #efe2cf;
    --bg-deep: #dbc2a6;
    --paper: #fbf4ea;
    --paper-soft: rgba(251, 244, 234, 0.84);
    --surface: #fffdf8;
    --ink: #171712;
    --text: #403f37;
    --muted: #756d60;
    --line: rgba(23, 23, 18, 0.1);
    --line-strong: rgba(23, 23, 18, 0.18);
    --accent: #304737;
    --accent-strong: #1a271f;
    --accent-soft: #d9e0d4;
    --warm: #c56d36;
    --warm-soft: #efd5ba;
    --warm-deep: #9b4e22;
    --signal: #d97541;
    --shadow-sm: 0 18px 40px rgba(31, 28, 22, 0.1);
    --shadow-md: 0 30px 68px rgba(31, 28, 22, 0.15);
    --radius-xl: 36px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --radius-pill: 999px;
    --theme-spark-rgb: 255, 211, 168;
    --theme-spark-alt-rgb: 233, 150, 96;
    --theme-comet-rgb: 255, 235, 209;
    --theme-orb-rgb: 247, 200, 149;
    --theme-orb-alt-rgb: 217, 117, 65;
    --theme-line-rgb: 126, 167, 141;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    line-height: 1.7;
    background:
        radial-gradient(circle at 8% 12%, rgba(197, 109, 54, 0.18), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(48, 71, 55, 0.1), transparent 22%),
        radial-gradient(circle at 78% 78%, rgba(217, 117, 65, 0.09), transparent 20%),
        linear-gradient(180deg, #f5ecdf 0%, #eedfca 44%, #e3d0b7 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 18%),
        radial-gradient(circle at 20% 100%, rgba(255, 247, 235, 0.34), transparent 22%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.hero-starfield-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.72;
    mix-blend-mode: screen;
}

body.no-scroll {
    overflow: hidden;
}

body.eva-night {
    background:
        radial-gradient(circle at 15% 12%, rgba(197, 109, 54, 0.12), transparent 24%),
        linear-gradient(180deg, #e7d9c7 0%, #dcc8b1 100%);
}

body.eva-overdrive::after {
    opacity: 0.5;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 6px),
        radial-gradient(circle at 50% 18%, rgba(var(--theme-spark-rgb), 0.22), transparent 0 28%);
    mix-blend-mode: soft-light;
}

body.eva-cocoon-mode {
    background:
        radial-gradient(circle at 14% 15%, rgba(217, 117, 65, 0.2), transparent 20%),
        radial-gradient(circle at 86% 18%, rgba(48, 71, 55, 0.16), transparent 22%),
        linear-gradient(180deg, #f9efe0 0%, #ead7bc 100%);
}

body.eva-cocoon-mode::before {
    background:
        radial-gradient(circle at 22% 16%, rgba(255, 239, 213, 0.42), transparent 0 18%),
        radial-gradient(circle at 78% 20%, rgba(255, 218, 181, 0.28), transparent 0 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 18%);
}

body.eva-matrix-mode {
    background:
        radial-gradient(circle at 18% 10%, rgba(91, 255, 174, 0.12), transparent 22%),
        linear-gradient(180deg, #eef5ef 0%, #dce7df 100%);
}

body.eva-matrix-mode::after {
    opacity: 0.58;
    background:
        repeating-linear-gradient(180deg, rgba(82, 255, 160, 0.12) 0 2px, transparent 2px 6px),
        linear-gradient(90deg, rgba(11, 44, 26, 0.08), transparent 22%, rgba(11, 44, 26, 0.08));
    mix-blend-mode: multiply;
}

body.eva-vortex-mode {
    background:
        radial-gradient(circle at 50% 18%, rgba(118, 194, 255, 0.22), transparent 20%),
        radial-gradient(circle at 22% 80%, rgba(126, 109, 255, 0.12), transparent 18%),
        linear-gradient(180deg, #eef0fb 0%, #dfe4f6 100%);
}

body.eva-vortex-mode::before {
    background:
        radial-gradient(circle at 50% 14%, rgba(118, 194, 255, 0.3), transparent 0 18%),
        radial-gradient(circle at 50% 14%, rgba(126, 109, 255, 0.18), transparent 0 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 20%);
}

body.eva-jedi-mode {
    background:
        radial-gradient(circle at 18% 12%, rgba(177, 255, 201, 0.14), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(160, 205, 255, 0.1), transparent 20%),
        linear-gradient(180deg, #eff4ee 0%, #dce3d8 100%);
}

body.eva-jedi-mode::after {
    opacity: 0.34;
    background:
        radial-gradient(circle at 18% 52%, rgba(152, 255, 184, 0.22), transparent 0 14%),
        radial-gradient(circle at 82% 46%, rgba(129, 198, 255, 0.18), transparent 0 14%);
}

body.eva-tron-mode {
    background:
        radial-gradient(circle at 50% 14%, rgba(110, 214, 255, 0.16), transparent 20%),
        linear-gradient(180deg, #eef7fb 0%, #dae8f0 100%);
}

body.eva-tron-mode::after {
    opacity: 0.44;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(59, 180, 255, 0.08) 8% 8.4%, transparent 8.4% 16%),
        linear-gradient(180deg, transparent 0 10%, rgba(59, 180, 255, 0.08) 10% 10.4%, transparent 10.4% 20%);
    background-size: 120px 120px, 120px 120px;
    mix-blend-mode: screen;
}

body.eva-vader-mode {
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 98, 98, 0.16), transparent 18%),
        radial-gradient(circle at 80% 12%, rgba(63, 28, 28, 0.1), transparent 18%),
        linear-gradient(180deg, #f1e4e0 0%, #dbc9c5 100%);
}

body.eva-vader-mode::after {
    opacity: 0.36;
    background:
        linear-gradient(90deg, transparent 0 46%, rgba(157, 23, 23, 0.14) 46% 54%, transparent 54%),
        radial-gradient(circle at 50% 14%, rgba(255, 124, 124, 0.16), transparent 0 16%);
}

body.premium-endgame::before {
    background:
        radial-gradient(circle at 20% 14%, rgba(255, 224, 173, 0.38), transparent 0 18%),
        radial-gradient(circle at 80% 18%, rgba(160, 205, 255, 0.28), transparent 0 22%),
        radial-gradient(circle at 50% 88%, rgba(123, 168, 139, 0.22), transparent 0 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 18%);
}

body.archive-endgame::after {
    opacity: 0.38;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 236, 195, 0.18), transparent 0 18%),
        radial-gradient(circle at 18% 76%, rgba(120, 190, 255, 0.14), transparent 0 16%),
        radial-gradient(circle at 82% 72%, rgba(255, 151, 110, 0.16), transparent 0 16%);
    animation: archiveEndgamePulse 6.2s ease-in-out infinite;
}

.secret-cinematic {
    position: fixed;
    inset: 0;
    z-index: 72;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(5, 8, 12, 0.54);
    backdrop-filter: blur(12px) saturate(118%);
}

.secret-cinematic.is-active {
    opacity: 1;
    visibility: visible;
}

.secret-cinematic__wash,
.secret-cinematic__rings,
.secret-cinematic__beam,
.secret-cinematic__content,
.secret-cinematic__shards {
    position: absolute;
    inset: 0;
}

.secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 232, 196, 0.2), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(4, 6, 10, 0.18), transparent 0 28%),
        linear-gradient(180deg, rgba(3, 6, 9, 0.82), rgba(5, 8, 12, 0.56) 34%, rgba(4, 7, 10, 0.86));
    opacity: 0;
}

.secret-cinematic__rings {
    display: grid;
    place-items: center;
}

.secret-cinematic__rings span {
    position: absolute;
    width: 160px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 248, 239, 0.54);
    opacity: 0;
    transform: scale(0.42);
}

.secret-cinematic__rings span:nth-child(2) {
    width: 250px;
}

.secret-cinematic__rings span:nth-child(3) {
    width: 360px;
}

.secret-cinematic__beam {
    inset: 18% 38% auto;
    height: 46vh;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(255, 218, 164, 0.26), rgba(120, 170, 255, 0.08));
    filter: blur(0.5px);
    opacity: 0;
    transform: translateY(-26px) scaleY(0.82);
}

.secret-cinematic__content {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 12vh 1.25rem 1.25rem;
    text-align: center;
}

.secret-cinematic__content::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(92vw, 860px);
    min-height: min(44vh, 360px);
    transform: translate(-50%, -50%);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 231, 187, 0.1), transparent 0 24%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.94), rgba(10, 14, 19, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform-origin: center;
}

.secret-cinematic__eyebrow,
.secret-cinematic__title,
.secret-cinematic__lead {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    position: relative;
    z-index: 1;
}

.secret-cinematic__eyebrow {
    margin: 0;
    color: rgba(255, 248, 239, 0.78);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.secret-cinematic__title {
    margin: 0.5rem 0 0;
    max-width: min(90vw, 720px);
    color: #fff8ef;
    font-size: clamp(2rem, 6vw, 4.8rem);
    line-height: 0.96;
    text-shadow:
        0 20px 48px rgba(0, 0, 0, 0.62),
        0 4px 12px rgba(0, 0, 0, 0.36);
}

.secret-cinematic__lead {
    margin: 0.9rem 0 0;
    max-width: min(84vw, 700px);
    color: rgba(255, 248, 239, 0.92);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.65;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.secret-cinematic__shards {
    display: grid;
    place-items: center;
}

.secret-cinematic__shard {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 38px;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff8ef;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    backdrop-filter: blur(10px);
    transform: rotate(var(--cinematic-angle)) translateY(0) translateX(0) scale(0.7);
}

.secret-cinematic--minecraft .secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(118, 255, 149, 0.16), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(3, 11, 6, 0.22), transparent 0 28%),
        linear-gradient(180deg, rgba(5, 11, 7, 0.84), rgba(6, 13, 9, 0.58) 34%, rgba(5, 11, 7, 0.88));
}

.secret-cinematic--campus .secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(120, 190, 255, 0.18), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(4, 9, 16, 0.2), transparent 0 28%),
        linear-gradient(180deg, rgba(6, 10, 17, 0.84), rgba(8, 13, 20, 0.58) 34%, rgba(6, 10, 17, 0.86));
}

.secret-cinematic--brand .secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 178, 108, 0.2), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(15, 8, 4, 0.2), transparent 0 28%),
        linear-gradient(180deg, rgba(15, 9, 6, 0.84), rgba(18, 11, 8, 0.58) 34%, rgba(14, 8, 5, 0.88));
}

.secret-cinematic--roblox .secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 106, 106, 0.16), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(12, 5, 5, 0.22), transparent 0 28%),
        linear-gradient(180deg, rgba(12, 7, 7, 0.84), rgba(14, 8, 8, 0.58) 34%, rgba(11, 6, 6, 0.88));
}

.secret-cinematic--studio .secret-cinematic__wash,
.secret-cinematic--master .secret-cinematic__wash {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 224, 173, 0.2), transparent 0 14%),
        radial-gradient(circle at 50% 50%, rgba(10, 7, 4, 0.22), transparent 0 28%),
        linear-gradient(180deg, rgba(11, 8, 6, 0.84), rgba(12, 9, 7, 0.58) 34%, rgba(10, 8, 5, 0.88));
}

.secret-cinematic.is-active .secret-cinematic__wash {
    animation: secretCinematicWash 2.4s ease forwards;
}

.secret-cinematic.is-active .secret-cinematic__content::before {
    animation: secretCinematicPanel 1.05s cubic-bezier(.2,.8,.2,1) 0.08s forwards;
}

.secret-cinematic.is-active .secret-cinematic__rings span {
    animation: secretCinematicRing 2.2s ease-out forwards;
}

.secret-cinematic.is-active .secret-cinematic__rings span:nth-child(2) {
    animation-delay: 0.08s;
}

.secret-cinematic.is-active .secret-cinematic__rings span:nth-child(3) {
    animation-delay: 0.16s;
}

.secret-cinematic.is-active .secret-cinematic__beam {
    animation: secretCinematicBeam 2.2s ease-out forwards;
}

.secret-cinematic.is-active .secret-cinematic__eyebrow {
    animation: secretCinematicText 0.7s cubic-bezier(.2,.8,.2,1) 0.12s forwards;
}

.secret-cinematic.is-active .secret-cinematic__title {
    animation: secretCinematicText 0.82s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
}

.secret-cinematic.is-active .secret-cinematic__lead {
    animation: secretCinematicText 0.86s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}

.secret-cinematic.is-active .secret-cinematic__shard {
    animation: secretCinematicShard 1.9s ease-out var(--cinematic-delay, 0s) forwards;
}

.secret-minigame-cooldown {
    position: fixed;
    inset: 0;
    z-index: 73;
    display: grid;
    place-items: center;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(4, 7, 10, 0.48);
    backdrop-filter: blur(12px) saturate(118%);
    transition: opacity 180ms ease, visibility 180ms ease;
}

.secret-minigame-cooldown.is-active {
    opacity: 1;
    visibility: visible;
}

.secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(255, 220, 173, 0.9);
    width: min(92vw, 520px);
    padding: 1.2rem 1.1rem 1.35rem;
    border-radius: 28px;
    text-align: center;
    color: #fff8ef;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(10, 14, 18, 0.94), rgba(8, 10, 14, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
    transform: translateY(18px) scale(0.96);
    transition: transform 240ms ease;
}

.secret-minigame-cooldown.is-active .secret-minigame-cooldown__panel {
    transform: translateY(0) scale(1);
}

.secret-minigame-cooldown__eyebrow {
    margin: 0;
    color: var(--cooldown-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.secret-minigame-cooldown__title {
    margin: 0.45rem 0 0;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1;
}

.secret-minigame-cooldown__lead {
    margin: 0.65rem auto 0;
    max-width: 30rem;
    color: rgba(255, 248, 239, 0.82);
    line-height: 1.55;
}

.secret-minigame-cooldown__count {
    margin-top: 0.95rem;
    font-size: clamp(2.6rem, 8vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--cooldown-accent);
    text-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
}

.secret-minigame-cooldown--time .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(148, 207, 255, 0.96);
}

.secret-minigame-cooldown--minecraft .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(151, 240, 168, 0.96);
}

.secret-minigame-cooldown--circuit .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(121, 216, 255, 0.96);
}

.secret-minigame-cooldown--spectral .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(130, 255, 231, 0.96);
}

.secret-minigame-cooldown--combat .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(255, 164, 112, 0.96);
}

.secret-minigame-cooldown--stealth .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(185, 206, 255, 0.96);
}

.secret-minigame-cooldown--rhythm .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(204, 173, 255, 0.96);
}

.secret-minigame-cooldown--retro .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(255, 214, 127, 0.96);
}

.secret-minigame-cooldown--archive .secret-minigame-cooldown__panel {
    --cooldown-accent: rgba(255, 229, 179, 0.96);
}

.pop-burst {
    position: fixed;
    inset: 0;
    z-index: 57;
    pointer-events: none;
    overflow: hidden;
}

.pop-burst__item {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: #fff8ef;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(var(--burst-rotate, 0deg)) scale(0.86);
    animation: popBurstFloat var(--burst-duration, 2.2s) ease-out var(--burst-delay, 0s) forwards;
}

.pop-burst--matrix .pop-burst__item {
    background: rgba(12, 44, 22, 0.82);
    color: #91ffc0;
    box-shadow: 0 0 18px rgba(91, 255, 174, 0.18);
}

.pop-burst--tardis .pop-burst__item {
    background: rgba(24, 49, 92, 0.84);
    color: #d9ecff;
    box-shadow: 0 0 18px rgba(118, 194, 255, 0.22);
}

.pop-burst--vader .pop-burst__item,
.pop-burst--ghostbusters .pop-burst__item {
    background: rgba(68, 18, 18, 0.84);
    color: #ffd3d3;
    box-shadow: 0 0 18px rgba(255, 98, 98, 0.22);
}

.pop-burst--mario .pop-burst__item,
.pop-burst--portal .pop-burst__item,
.pop-burst--zelda .pop-burst__item,
.pop-burst--pokemon .pop-burst__item {
    background: rgba(111, 64, 18, 0.84);
    color: #fff1cf;
    box-shadow: 0 0 18px rgba(255, 194, 110, 0.22);
}

.pop-burst--tron .pop-burst__item,
.pop-burst--jedi .pop-burst__item {
    background: rgba(18, 48, 68, 0.84);
    color: #d8f7ff;
    box-shadow: 0 0 18px rgba(110, 214, 255, 0.22);
}

.pop-burst--kamehameha .pop-burst__item,
.pop-burst--hadouken .pop-burst__item {
    background: rgba(72, 42, 18, 0.84);
    color: #ffe5c2;
    box-shadow: 0 0 18px rgba(255, 157, 106, 0.22);
}

body.effects-off *,
body.effects-off *::before,
body.effects-off *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
}

img {
    max-width: 100%;
    display: block;
}

.responsive-media-picture {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.responsive-media-picture > img {
    width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    color: var(--muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fraunces', serif;
    color: var(--ink);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

ul,
ol {
    list-style: none;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 14px;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--accent-strong);
    color: #fff;
}

.skip-link:focus {
    left: 14px;
}

.site-intro {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: stretch;
    background: #161712;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
