/* =========================================================
   GLOBAL RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #020204;
    color: #ffffff;
    overflow-x: hidden;
}

section {
    scroll-margin-top: 90px;
}


/* =========================================================
   SPACE BACKGROUND
========================================================= */

.space {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(110, 30, 180, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(80, 20, 150, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 70%,
            rgba(150, 30, 210, 0.10),
            transparent 30%
        ),
        #020204;
}


/* =========================================================
   STARS
========================================================= */

.stars,
.stars2,
.stars3 {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    pointer-events: none;
}

.stars {
    background-image:
        radial-gradient(circle, white 1px, transparent 1.5px),
        radial-gradient(circle, rgba(190,130,255,.8) 1px, transparent 1.5px);

    background-size:
        90px 90px,
        150px 150px;

    animation: starsMove 90s linear infinite;
    opacity: .65;
}

.stars2 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1.5px);

    background-size: 220px 220px;

    animation: starsMove 130s linear infinite reverse;
    opacity: .35;
}

.stars3 {
    background-image:
        radial-gradient(circle, rgba(160,80,255,.9) 1px, transparent 2px);

    background-size: 320px 320px;

    animation: starsMove 160s linear infinite;
    opacity: .28;
}

@keyframes starsMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(300px);
    }
}


/* =========================================================
   NEBULA
========================================================= */

.nebula {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -10;
    opacity: .18;
}

.nebula.one {
    width: 500px;
    height: 300px;
    background: #6f18a8;
    top: 10%;
    left: -150px;
    transform: rotate(-25deg);
}

.nebula.two {
    width: 500px;
    height: 300px;
    background: #36106d;
    right: -160px;
    bottom: 15%;
    transform: rotate(30deg);
}

.nebula.three {
    width: 400px;
    height: 250px;
    background: #8b27bd;
    left: 35%;
    top: 45%;
    opacity: .08;
}


/* =========================================================
   FLOATING MATHEMATICAL SYMBOLS
========================================================= */

.math-symbol {
    position: fixed;

    color: rgba(190,110,255,.12);

    font-weight: bold;

    pointer-events: none;
    user-select: none;

    z-index: -5;

    text-shadow:
        0 0 15px rgba(160,80,255,.35),
        0 0 35px rgba(140,60,255,.15);

    animation:
        floatingMath
        12s
        ease-in-out
        infinite
        alternate;
}

.symbol-1 {
    top: 13%;
    left: 4%;
    font-size: 100px;
}

.symbol-2 {
    top: 21%;
    right: 6%;
    font-size: 115px;
    animation-delay: -4s;
}

.symbol-3 {
    bottom: 16%;
    left: 6%;
    font-size: 105px;
    animation-delay: -7s;
}

.symbol-4 {
    bottom: 11%;
    right: 7%;
    font-size: 95px;
    animation-delay: -3s;
}

.symbol-5 {
    top: 48%;
    left: 17%;
    font-size: 55px;
}

.symbol-6 {
    top: 66%;
    right: 18%;
    font-size: 70px;
}

.symbol-7 {
    top: 36%;
    left: 45%;
    font-size: 45px;
    animation-delay: -5s;
}

.symbol-8 {
    bottom: 35%;
    right: 42%;
    font-size: 42px;
    animation-delay: -8s;
}

@keyframes floatingMath {

    from {
        transform:
            translateY(-15px)
            rotate(-5deg);
    }

    to {
        transform:
            translateY(25px)
            rotate(5deg);
    }
}


/* =========================================================
   FLOATING FORMULAS
========================================================= */

.formula {
    position: fixed;

    color: rgba(200,145,255,.10);

    font-family: Georgia, serif;

    white-space: nowrap;

    pointer-events: none;

    z-index: -4;

    animation:
        formulaFloat
        15s
        ease-in-out
        infinite
        alternate;
}

.formula-1 {
    top: 25%;
    left: 18%;
    font-size: 20px;
}

.formula-2 {
    bottom: 20%;
    left: 23%;
    font-size: 19px;
    animation-delay: -4s;
}

.formula-3 {
    top: 59%;
    right: 17%;
    font-size: 21px;
    animation-delay: -7s;
}

.formula-4 {
    top: 74%;
    left: 42%;
    font-size: 17px;
    animation-delay: -9s;
}

.formula-5 {
    top: 17%;
    left: 38%;
    font-size: 15px;
    animation-delay: -3s;
}

@keyframes formulaFloat {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-25px);
    }
}


/* =========================================================
   SHOOTING STARS
========================================================= */

.shooting-star {
    position: fixed;

    width: 120px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8a7ff,
            white
        );

    transform: rotate(-35deg);

    opacity: 0;

    z-index: -3;

    animation:
        shooting 8s
        linear
        infinite;
}

.shooting-star.one {
    top: 18%;
    left: 72%;
    animation-delay: 2s;
}

.shooting-star.two {
    top: 50%;
    left: 15%;
    animation-delay: 6s;
}

@keyframes shooting {

    0% {
        transform:
            translate(0,0)
            rotate(-35deg);

        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    25% {
        transform:
            translate(-250px,180px)
            rotate(-35deg);

        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    padding: 0 6%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background:
        rgba(2,2,4,.78);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid
        rgba(180,100,255,.12);

    z-index: 1000;
}


/* =========================================================
   INTERACTIVE MATHSIGHT LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 13px;

    text-decoration: none;

    cursor: pointer;

    transition: .4s ease;
}

.logo:hover {
    transform: scale(1.04);
}


/* Universe */

.logo-universe {
    position: relative;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Core */

.logo-core {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: bold;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f2ddff,
            #a347ff 40%,
            #42076e 75%
        );

    color: white;

    box-shadow:
        0 0 12px #a84dff,
        0 0 30px rgba(150,60,255,.7),
        0 0 55px rgba(130,40,255,.3);

    z-index: 5;

    transition: .4s;
}

.logo:hover .logo-core {
    transform: scale(1.18);

    box-shadow:
        0 0 18px #c071ff,
        0 0 45px rgba(170,70,255,.9),
        0 0 80px rgba(130,40,255,.5);
}


/* Rings */

.logo-ring {
    position: absolute;

    border:
        1px solid
        rgba(195,125,255,.55);

    border-radius: 50%;
}

.logo-ring.one {
    width: 48px;
    height: 20px;

    transform: rotate(25deg);

    animation:
        logoRingOne
        5s
        linear
        infinite;
}

.logo-ring.two {
    width: 52px;
    height: 22px;

    transform: rotate(-35deg);

    animation:
        logoRingTwo
        7s
        linear
        infinite;
}

@keyframes logoRingOne {

    to {
        transform: rotate(385deg);
    }
}

@keyframes logoRingTwo {

    to {
        transform: rotate(325deg);
    }
}


/* Orbiting symbols */

.logo-orbit {
    position: absolute;

    inset: 0;

    animation:
        logoOrbit
        6s
        linear
        infinite;
}

.logo-orbit span {
    position: absolute;

    top: -1px;
    left: 17px;

    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 9px;

    color: #f2ddff;

    background: #13051e;

    border:
        1px solid
        rgba(200,140,255,.7);

    box-shadow:
        0 0 10px
        rgba(170,80,255,.8);
}

@keyframes logoOrbit {

    to {
        transform: rotate(360deg);
    }
}


/* Wordmark */

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.5px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #c78aff,
            #ffffff,
            #9845ff
        );

    background-size: 250%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        logoGradient
        5s
        linear
        infinite;
}

.logo-subtitle {
    font-size: 6px;

    letter-spacing: 2px;

    color:
        rgba(220,190,255,.6);
}

@keyframes logoGradient {

    from {
        background-position: 0%;
    }

    to {
        background-position: 250%;
    }
}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    position: relative;

    color: #aaa5b0;

    text-decoration: none;

    font-size: 13px;

    transition: .3s;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #8d3fff,
            #d09aff
        );

    transition: .3s;
}

.nav-links a:hover {
    color: white;
}

.nav-links a:hover::after {
    width: 100%;
}


/* =========================================================
   GENERAL BUTTON
========================================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        14px 26px;

    border-radius: 30px;

    text-decoration: none;

    border: 1px solid
        rgba(190,110,255,.35);

    background:
        linear-gradient(
            135deg,
            #8b3fff,
            #501181
        );

    color: white;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 0 25px
        rgba(140,50,255,.25);

    transition: .3s;
}

.btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 35px
        rgba(150,60,255,.55);
}


/* =========================================================
   HOME
========================================================= */

#home {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
        130px 7%
        80px;
}

.hero {
    width: 100%;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items: center;

    gap: 60px;

    max-width: 1400px;

    margin: auto;
}


/* Hero text */

.hero-label {
    display: inline-block;

    padding:
        8px 17px;

    border:
        1px solid
        rgba(180,100,255,.3);

    border-radius: 30px;

    color: #c99aff;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 22px;

    background:
        rgba(100,30,160,.08);
}

.hero h1 {
    font-size:
        clamp(
            55px,
            8vw,
            105px
        );

    line-height: .88;

    letter-spacing: -6px;

    margin-bottom: 28px;
}

.hero h1 .purple {
    display: block;

    background:
        linear-gradient(
            120deg,
            #7f2eff,
            #d7b1ff,
            #9140ff,
            #e4c8ff
        );

    background-size: 250%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        titleGradient
        6s
        ease
        infinite;
}

@keyframes titleGradient {

    0% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }

    100% {
        background-position: 0%;
    }
}

.hero p {
    max-width: 620px;

    color: #a09aa8;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.btn.secondary {
    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow: none;
}

.btn.secondary:hover {
    border-color:
        rgba(180,100,255,.5);
}


/* =========================================================
   HERO MATHEMATICAL ORBIT
========================================================= */

.hero-universe {
    position: relative;

    width: min(470px, 85vw);
    height: min(470px, 85vw);

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-glow {
    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(175,80,255,.45),
            rgba(100,30,160,.15),
            transparent 70%
        );

    filter: blur(20px);

    animation:
        corePulse
        4s
        ease-in-out
        infinite;
}

@keyframes corePulse {

    0%, 100% {
        transform: scale(.9);
        opacity: .7;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

.hero-core {
    position: relative;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 65px;

    font-family: Georgia, serif;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f3ddff,
            #ad4fff 38%,
            #4b087d 72%,
            #13001e
        );

    box-shadow:
        0 0 30px #9e40ff,
        0 0 90px rgba(150,50,255,.7),
        0 0 160px rgba(110,30,200,.4);

    z-index: 4;

    animation:
        heroCoreFloat
        5s
        ease-in-out
        infinite;
}

@keyframes heroCoreFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.hero-orbit {
    position: absolute;

    border:
        1px solid
        rgba(190,110,255,.35);

    border-radius: 50%;
}

.hero-orbit.one {
    width: 280px;
    height: 100px;

    transform: rotate(25deg);

    animation:
        heroOrbitOne
        12s
        linear
        infinite;
}

.hero-orbit.two {
    width: 350px;
    height: 130px;

    transform: rotate(-40deg);

    animation:
        heroOrbitTwo
        16s
        linear
        infinite;
}

.hero-orbit.three {
    width: 410px;
    height: 160px;

    transform: rotate(70deg);

    animation:
        heroOrbitThree
        20s
        linear
        infinite;
}

@keyframes heroOrbitOne {
    to {
        transform:
            rotate(385deg);
    }
}

@keyframes heroOrbitTwo {
    to {
        transform:
            rotate(320deg);
    }
}

@keyframes heroOrbitThree {
    to {
        transform:
            rotate(430deg);
    }
}

.orbit-symbol {
    position: absolute;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(10,3,15,.9);

    border:
        1px solid
        rgba(190,110,255,.5);

    color: #d7b0ff;

    box-shadow:
        0 0 18px
        rgba(150,60,255,.5);

    font-family: Georgia, serif;
}

.hero-orbit.one .orbit-symbol {
    top: -19px;
    left: 50%;
}

.hero-orbit.two .orbit-symbol {
    bottom: -19px;
    left: 20%;
}

.hero-orbit.three .orbit-symbol {
    top: 50%;
    right: -19px;
}


/* =========================================================
   SECTION COMMON
========================================================= */

.section {
    min-height: 100vh;

    padding:
        110px 7%
        100px;

    position: relative;
}

.section-header {
    text-align: center;

    max-width: 760px;

    margin:
        0 auto
        55px;
}

.section-label {
    display: inline-block;

    color: #bd82ff;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 15px;
}

.section-header h2 {
    font-size:
        clamp(
            38px,
            6vw,
            65px
        );

    letter-spacing: -3px;

    margin-bottom: 18px;
}

.section-header h2 span {
    color: #a85aff;
}

.section-header p {
    color: #928b9b;

    line-height: 1.8;
}


/* =========================================================
   FUN FACT
========================================================= */

.fact-section {
    display: flex;

    align-items: center;

    justify-content: center;
}

.fact-card {
    position: relative;

    width: 100%;

    max-width: 1000px;

    padding:
        65px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(70,20,110,.04)
        );

    border:
        1px solid
        rgba(180,100,255,.16);

    backdrop-filter:
        blur(20px);

    overflow: hidden;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.4);
}

.fact-card::before {
    content: "π";

    position: absolute;

    right: 30px;
    top: -60px;

    font-size: 250px;

    color:
        rgba(150,70,255,.04);

    font-family: Georgia, serif;
}

.fact-icon {
    font-size: 45px;

    margin-bottom: 25px;

    color: #b76aff;

    text-shadow:
        0 0 25px
        rgba(170,70,255,.7);
}

.fact-card h3 {
    font-size: 13px;

    color: #bd82ff;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.fact-card h2 {
    font-size:
        clamp(
            28px,
            5vw,
            48px
        );

    line-height: 1.2;

    margin-bottom: 22px;
}

.fact-card p {
    color: #9a94a3;

    line-height: 1.8;

    max-width: 750px;
}

.fact-number {
    margin-top: 25px;

    font-family: Georgia, serif;

    font-size: 24px;

    color: #c28aff;
}


/* =========================================================
   QUIZ
========================================================= */

.quiz-section {
    display: flex;

    align-items: center;

    justify-content: center;
}

.quiz-container {
    width: 100%;

    max-width: 900px;

    margin: auto;
}

.quiz-progress-info {
    display: flex;

    justify-content: space-between;

    color: #8f8997;

    font-size: 13px;

    margin-bottom: 8px;
}

.quiz-progress-bar {
    width: 100%;

    height: 5px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.06);

    overflow: hidden;

    margin-bottom: 20px;
}

.quiz-progress {
    height: 100%;

    width: 0%;

    background:
        linear-gradient(
            90deg,
            #6c1ed1,
            #bb69ff
        );

    box-shadow:
        0 0 15px
        rgba(180,80,255,.8);

    transition:
        width .4s ease;
}

.quiz-card {
    position: relative;

    padding:
        45px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(80,20,120,.035)
        );

    border:
        1px solid
        rgba(180,100,255,.16);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);

    overflow: hidden;
}

.quiz-card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(145,50,255,.07);

    filter: blur(60px);

    top: -140px;
    right: -100px;

    pointer-events: none;
}

.quiz-label {
    color: #a85aff;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 18px;
}

.quiz-question-number {
    color: #9e55ef;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.quiz-question {
    font-size:
        clamp(
            25px,
            4vw,
            36px
        );

    line-height: 1.35;

    font-weight: 600;

    margin-bottom: 30px;
}

.quiz-answers {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}

.quiz-answer {
    position: relative;

    padding:
        18px 20px;

    border-radius: 14px;

    border:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.025);

    color: #d1ccd6;

    cursor: pointer;

    transition:
        .3s ease;

    text-align: left;

    overflow: hidden;
}

.quiz-answer:hover {
    border-color:
        rgba(175,90,255,.5);

    background:
        rgba(140,50,220,.08);

    transform:
        translateY(-3px);
}

.quiz-answer.correct {
    border-color:
        rgba(80,255,170,.6);

    background:
        rgba(30,180,100,.12);

    color:
        #8dffc4;
}

.quiz-answer.wrong {
    border-color:
        rgba(255,80,100,.6);

    background:
        rgba(180,30,60,.12);

    color:
        #ff9ba8;
}

.quiz-answer.disabled {
    pointer-events: none;
}

.quiz-feedback {
    min-height: 28px;

    margin-top: 23px;

    font-size: 14px;

    font-weight: 600;
}

.quiz-feedback.correct {
    color: #8dffc4;
}

.quiz-feedback.wrong {
    color: #ff9ba8;
}

.quiz-next {
    display: none;

    border: none;

    padding:
        13px 28px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #8b3fff,
            #58139b
        );

    color: white;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 0 25px
        rgba(140,50,255,.3);

    transition: .3s;
}

.quiz-next:hover {
    transform:
        translateY(-3px);
}

.quiz-result {
    display: none;

    text-align: center;
}

.result-symbol {
    width: 100px;
    height: 100px;

    margin:
        0 auto 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 45px;

    background:
        radial-gradient(
            circle,
            #c084ff,
            #6c1eb8 65%,
            #26063b
        );

    box-shadow:
        0 0 30px
        rgba(170,70,255,.8),
        0 0 80px
        rgba(130,40,255,.35);
}

.quiz-result h3 {
    font-size: 38px;

    margin-bottom: 10px;
}

.result-score {
    color: #bb70ff;

    font-size: 25px;

    margin-bottom: 15px;
}

.result-message {
    color: #9c96a5;

    line-height: 1.7;

    max-width: 600px;

    margin:
        0 auto 25px;
}

.quiz-restart {
    border: none;

    padding:
        14px 30px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #8d3fff,
            #58139b
        );

    color: white;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.quiz-restart:hover {
    transform:
        translateY(-3px);
}


/* =========================================================
   MINI GAME
========================================================= */

.game-section {
    display: flex;

    align-items: center;

    justify-content: center;
}

.game-container {
    width: 100%;

    max-width: 1050px;

    margin: auto;
}

.game-card {
    position: relative;

    padding:
        45px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(70,20,110,.04)
        );

    border:
        1px solid
        rgba(180,100,255,.16);

    backdrop-filter:
        blur(20px);
}

.game-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.game-score {
    color: #bd82ff;

    font-weight: 600;
}

.game-timer {
    color: #9b94a3;

    font-size: 13px;
}

.game-question {
    text-align: center;

    font-size:
        clamp(
            30px,
            6vw,
            60px
        );

    margin:
        30px 0;

    font-weight: 700;

    letter-spacing: -2px;
}

.game-input-area {
    display: flex;

    gap: 12px;

    justify-content: center;

    flex-wrap: wrap;
}

.game-input {
    width: 200px;

    padding:
        15px 18px;

    border-radius: 12px;

    border:
        1px solid
        rgba(190,110,255,.2);

    background:
        rgba(0,0,0,.3);

    color: white;

    font-size: 18px;

    outline: none;

    text-align: center;
}

.game-input:focus {
    border-color:
        rgba(190,110,255,.7);

    box-shadow:
        0 0 20px
        rgba(150,60,255,.2);
}

.game-message {
    text-align: center;

    min-height: 30px;

    margin-top: 20px;

    color: #aaa;
}

.game-start {
    display: block;

    margin:
        25px auto 0;

    border: none;

    padding:
        14px 30px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #8d3fff,
            #58139b
        );

    color: white;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.game-start:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 0 30px
        rgba(150,60,255,.5);
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
    min-height: auto;
}

.about-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.about-card {
    padding:
        35px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(180,100,255,.13);

    transition: .35s;
}

.about-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(180,100,255,.35);

    background:
        rgba(140,50,220,.06);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.3);
}

.about-icon {
    font-size: 35px;

    margin-bottom: 20px;

    color: #b96dff;
}

.about-card h3 {
    margin-bottom: 12px;

    font-size: 20px;
}

.about-card p {
    color: #928b9b;

    line-height: 1.7;

    font-size: 14px;
}


/* =========================================================
   CALL TO ACTION
========================================================= */

.cta {
    max-width: 1100px;

    margin:
        90px auto 0;

    padding:
        65px 40px;

    text-align: center;

    border-radius: 30px;

    border:
        1px solid
        rgba(180,100,255,.17);

    background:
        radial-gradient(
            circle at center,
            rgba(120,30,190,.13),
            rgba(255,255,255,.015)
        );
}

.cta h2 {
    font-size:
        clamp(
            35px,
            6vw,
            60px
        );

    margin-bottom: 15px;
}

.cta p {
    color: #938d9b;

    max-width: 650px;

    margin:
        0 auto 25px;

    line-height: 1.8;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding:
        45px 20px;

    text-align: center;

    border-top:
        1px solid
        rgba(180,100,255,.1);

    color: #77717f;

    font-size: 12px;
}

.footer-logo {
    font-size: 20px;

    font-weight: 800;

    color: #b36cff;

    margin-bottom: 10px;
}



/* =========================================================
   SINGLE-PAGE QUIZ CATEGORY CENTER
========================================================= */

.quiz-category-center {
    margin: 0 auto 28px;
    max-width: 1050px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.category-card {
    position: relative;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid rgba(180,100,255,.13);
    background: rgba(255,255,255,.025);
    cursor: pointer;
    text-align: left;
    transition: .3s ease;
}

.category-card:hover,
.category-card.active {
    transform: translateY(-5px);
    border-color: rgba(180,100,255,.55);
    background: rgba(140,50,220,.09);
    box-shadow: 0 18px 45px rgba(70,20,120,.22);
}

.category-icon {
    font-size: 26px;
    margin-bottom: 12px;
}

.category-card h3 {
    font-size: 17px;
    margin-bottom: 7px;
}

.category-card p {
    color: #8f8997;
    font-size: 12px;
    line-height: 1.55;
}

.category-level {
    display: inline-block;
    margin-top: 12px;
    color: #bd82ff;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.quiz-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.quiz-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid rgba(180,100,255,.2);
    background: rgba(140,50,220,.06);
    color: #c99aff;
    font-size: 11px;
    letter-spacing: 1px;
}

.quiz-tools {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.quiz-tool-btn {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.025);
    color: #bcb5c5;
    border-radius: 25px;
    padding: 8px 13px;
    cursor: pointer;
    transition: .25s;
    font-size: 11px;
}

.quiz-tool-btn:hover {
    border-color: rgba(180,100,255,.45);
    color: white;
}

.quiz-timer {
    color: #bd82ff;
    font-size: 12px;
    letter-spacing: 1px;
}

.quiz-streak {
    color: #e0b8ff;
    font-size: 12px;
}

.fact-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fact-actions .btn {
    border: none;
}

.fact-date {
    margin-top: 10px;
    color: #716b78;
    font-size: 11px;
    letter-spacing: 1px;
}

.game-streak {
    color: #c99aff;
    font-size: 12px;
}

@media (max-width: 850px) {
    .category-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .quiz-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .hero {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-universe {
        margin-top: 20px;
    }

    .about-grid {
        grid-template-columns:
            1fr 1fr;
    }
}


@media (max-width: 700px) {

    .navbar {
        height: 70px;

        padding:
            0 20px;
    }

    .nav-links {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        max-width: 62vw;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        white-space: nowrap;
        font-size: 11px;
    }

    .logo-title {
        font-size: 20px;
    }

    .logo-subtitle {
        display: none;
    }

    #home {
        padding:
            120px 20px 70px;
    }

    .hero h1 {
        letter-spacing: -4px;
    }

    .hero-universe {
        width: 330px;
        height: 330px;
    }

    .hero-core {
        width: 110px;
        height: 110px;

        font-size: 48px;
    }

    .hero-orbit.one {
        width: 210px;
        height: 75px;
    }

    .hero-orbit.two {
        width: 260px;
        height: 95px;
    }

    .hero-orbit.three {
        width: 300px;
        height: 120px;
    }

    .section {
        padding:
            90px 20px;
    }

    .fact-card {
        padding:
            35px 25px;
    }

    .quiz-card {
        padding:
            30px 20px;
    }

    .quiz-answers {
        grid-template-columns:
            1fr;
    }

    .game-card {
        padding:
            30px 20px;
    }

    .about-grid {
        grid-template-columns:
            1fr;
    }

    .math-symbol {
        opacity: .06;
    }

    .formula {
        opacity: .05;
    }
}


/* =========================================================
   QUIZ CENTER — AESTHETIC CATEGORY DESIGN
   Adapted from the supplied Mathsight Quiz Center
========================================================= */

.quiz-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-container {
    width: min(1250px, 92%);
    max-width: 1250px;
    margin: auto;
}

.quiz-back-row {
    width: 100%;
    margin-bottom: 35px;
}

.quiz-back-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 12px;
    background: rgba(125,31,255,.08);
    border: 1px solid rgba(177,82,255,.30);
    color: #cda2ef;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: .3s ease;
}

.quiz-back-home span {
    font-size: 18px;
    line-height: 1;
    transition: .3s ease;
}

.quiz-back-home:hover {
    background: rgba(142,42,255,.18);
    border-color: rgba(197,126,255,.65);
    color: #fff;
    transform: translateX(-3px);
    box-shadow: 0 8px 25px rgba(103,22,170,.20);
}

.quiz-back-home:hover span {
    transform: translateX(-4px);
}

.quiz-page-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.quiz-category-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px;
    border: 1px solid rgba(177,82,255,.35);
    border-radius: 999px;
    background: rgba(125,31,255,.08);
    color: #c88cff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.quiz-category-label::before {
    content: "✦";
    color: #e2c5ff;
    animation: quizLabelStar 2s ease-in-out infinite alternate;
}

@keyframes quizLabelStar {
    to {
        transform: rotate(180deg) scale(1.2);
    }
}

.quiz-page-header h2 {
    margin-top: 25px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -3px;
    background: linear-gradient(
        120deg,
        #fff 10%,
        #e8caff 42%,
        #a64dff 75%,
        #fff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 35px rgba(157,65,255,.18);
}

.quiz-page-header h2 span {
    color: transparent;
}

.quiz-page-header p {
    max-width: 650px;
    margin: 24px auto 0;
    color: #9c8ea9;
    font-size: 16px;
    line-height: 1.8;
}

.quiz-page-header p span {
    color: #d09aff;
}

.quiz-category-center {
    margin: 0 auto 35px;
    max-width: 1250px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.category-card {
    position: relative;
    min-height: 390px;
    padding: 32px;
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(123,31,255,.035)
        );
    border: 1px solid rgba(173,84,255,.20);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.category-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -80px;
    border-radius: 50%;
    background: rgba(157,65,255,.13);
    filter: blur(30px);
    transition: .5s ease;
    pointer-events: none;
}

.category-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #a64dff,
        transparent
    );
    transform: scaleX(0);
    transition: .45s ease;
    pointer-events: none;
}

.category-card:hover,
.category-card.active {
    transform: translateY(-10px);
    border-color: rgba(187,100,255,.65);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(123,31,255,.055)
        );
    box-shadow:
        0 20px 55px rgba(74,0,130,.35),
        0 0 30px rgba(151,51,255,.12);
}

.category-card:hover::before,
.category-card.active::before {
    transform: scale(1.8);
}

.category-card:hover::after,
.category-card.active::after {
    transform: scaleX(1);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.category-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(220,177,255,.30),
            rgba(108,20,180,.18)
        );
    border: 1px solid rgba(197,126,255,.35);
    color: #e0baff;
    font-size: 31px;
    font-weight: 900;
    box-shadow:
        inset 0 0 20px rgba(165,69,255,.12),
        0 0 25px rgba(148,50,255,.08);
    transition: .4s ease;
}

.category-card:hover .category-icon,
.category-card.active .category-icon {
    transform: rotate(-5deg) scale(1.08);
    box-shadow:
        0 0 25px rgba(166,77,255,.3),
        inset 0 0 25px rgba(166,77,255,.2);
}

.game-count {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    color: #a999b6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.category-card h2 {
    position: relative;
    z-index: 1;
    margin-top: 25px;
    font-size: 25px;
    line-height: 1.15;
    color: #fff;
}

.category-card p {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    min-height: 58px;
    color: #94869e;
    font-size: 13px;
    line-height: 1.7;
}

.difficulty-area {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.difficulty-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #807287;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.difficulty-title span:last-child {
    color: #c493e8;
}

.difficulty-bar {
    display: flex;
    gap: 5px;
}

.difficulty-bar span {
    flex: 1;
    height: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
}

.difficulty-bar span.active {
    background: linear-gradient(90deg,#6d1bc7,#b34dff);
    box-shadow: 0 0 8px rgba(172,71,255,.45);
}

.game-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.game-tags span {
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(160,70,255,.06);
    border: 1px solid rgba(160,70,255,.13);
    color: #9e8bab;
    font-size: 9px;
    font-weight: 600;
}

.start-category {
    position: absolute;
    z-index: 2;
    left: 32px;
    right: 32px;
    bottom: 27px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background: linear-gradient(135deg,#6314b5,#9b3fe5);
    border: 1px solid rgba(215,166,255,.3);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 8px 25px rgba(103,22,170,.22);
    overflow: hidden;
    cursor: pointer;
    transition: .35s ease;
}

.start-category::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );
    transition: .6s ease;
}

.start-category:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg,#7920ce,#b456ff);
    box-shadow: 0 12px 30px rgba(133,43,209,.4);
}

.start-category:hover::before {
    left: 100%;
}

.start-category .arrow {
    font-size: 18px;
    transition: .3s ease;
}

.start-category:hover .arrow {
    transform: translateX(5px);
}

.basic .category-icon { color: #b86aff; }
.algebra .category-icon { color: #d08aff; }
.geometry .category-icon { color: #9d73ff; }
.statistics .category-icon { color: #c26fff; }
.logic .category-icon { color: #e1a0ff; }
.number-theory .category-icon { color: #a88aff; }

.quiz-bottom-message {
    text-align: center;
    margin-top: 55px;
    margin-bottom: 10px;
}

.quiz-bottom-message > span {
    display: block;
    margin-bottom: 15px;
    color: #a64dff;
    font-size: 25px;
    animation: quizMiniPulse 2s ease-in-out infinite alternate;
}

@keyframes quizMiniPulse {
    from {
        transform: scale(.9);
        opacity: .5;
    }
    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

.quiz-bottom-message h3 {
    color: #ded0e7;
    font-size: 20px;
    font-weight: 700;
}

.quiz-bottom-message p {
    margin-top: 8px;
    color: #75687e;
    font-size: 13px;
}

@media (max-width: 1050px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .quiz-container {
        width: 92%;
    }

    .quiz-page-header {
        margin-bottom: 50px;
    }

    .quiz-page-header h2 {
        letter-spacing: -2px;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .category-card {
        min-height: 380px;
    }

    .quiz-back-home {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .category-card {
        padding: 25px;
    }

    .start-category {
        left: 25px;
        right: 25px;
    }

    .quiz-page-header p {
        font-size: 14px;
    }
}




        /* =========================================================
           MATHSIGHT QUIZ GAME
           Purple Galaxy Interactive Math Theme
        ========================================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #020204;
            color: #ffffff;
            min-height: 100vh;
            overflow-x: hidden;
        }

        button {
            font-family: inherit;
        }


        /* =========================================================
           GALAXY BACKGROUND
        ========================================================= */

        .space {
            position: fixed;
            inset: 0;
            z-index: -10;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 15% 20%,
                    rgba(123, 31, 255, 0.22),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 85% 25%,
                    rgba(190, 80, 255, 0.15),
                    transparent 25%
                ),
                radial-gradient(
                    circle at 50% 80%,
                    rgba(89, 0, 255, 0.16),
                    transparent 30%
                ),
                #020204;
        }

        .space::before {
            content: "";
            position: absolute;

            width: 750px;
            height: 750px;

            left: 50%;
            top: 50%;

            transform: translate(-50%, -50%);

            background:
                radial-gradient(
                    circle,
                    rgba(148, 53, 255, 0.12),
                    transparent 65%
                );

            filter: blur(35px);

            animation:
                galaxyPulse 8s ease-in-out infinite alternate;
        }

        @keyframes galaxyPulse {

            from {
                transform:
                    translate(-50%, -50%)
                    scale(0.9);

                opacity: 0.5;
            }

            to {
                transform:
                    translate(-50%, -50%)
                    scale(1.15);

                opacity: 1;
            }
        }


        /* =========================================================
           STARS
        ========================================================= */

        .stars,
        .stars2,
        .stars3 {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .stars {
            background-image:
                radial-gradient(circle, #ffffff 1px, transparent 1px),
                radial-gradient(circle, #ffffff 1px, transparent 1px),
                radial-gradient(circle, #ffffff 1px, transparent 1px);

            background-size:
                140px 140px,
                190px 190px,
                230px 230px;

            background-position:
                10px 20px,
                50px 80px,
                120px 30px;

            opacity: 0.55;
        }

        .stars2 {
            background-image:
                radial-gradient(circle, #b987ff 1px, transparent 1px),
                radial-gradient(circle, #ffffff 1px, transparent 1px);

            background-size:
                170px 170px,
                260px 260px;

            background-position:
                80px 40px,
                20px 100px;

            opacity: 0.35;

            animation:
                starMove 30s linear infinite;
        }

        .stars3 {
            background-image:
                radial-gradient(
                    circle,
                    #ffffff 1.5px,
                    transparent 1.5px
                );

            background-size: 300px 300px;

            background-position: 70px 120px;

            opacity: 0.2;

            animation:
                starMoveReverse 45s linear infinite;
        }

        @keyframes starMove {

            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-80px);
            }
        }

        @keyframes starMoveReverse {

            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(70px);
            }
        }


        /* =========================================================
           FLOATING MATH SYMBOLS
        ========================================================= */

        .math-symbol {
            position: fixed;

            color: rgba(190, 130, 255, 0.15);

            font-size: 55px;
            font-weight: 700;

            pointer-events: none;

            z-index: -2;

            animation:
                floatingSymbol 8s ease-in-out infinite alternate,
                symbolGlow 4s ease-in-out infinite alternate;
        }

        .symbol1 {
            top: 15%;
            left: 6%;
        }

        .symbol2 {
            top: 35%;
            right: 6%;
        }

        .symbol3 {
            bottom: 20%;
            left: 8%;
        }

        .symbol4 {
            top: 70%;
            right: 10%;
        }

        .symbol5 {
            top: 12%;
            right: 25%;
        }

        .symbol6 {
            bottom: 8%;
            right: 35%;
        }

        @keyframes floatingSymbol {

            from {
                transform:
                    translateY(-10px)
                    rotate(-5deg);
            }

            to {
                transform:
                    translateY(20px)
                    rotate(5deg);
            }
        }

        @keyframes symbolGlow {

            from {
                text-shadow:
                    0 0 5px
                    rgba(170, 70, 255, 0.1);
            }

            to {
                text-shadow:
                    0 0 25px
                    rgba(170, 70, 255, 0.4);
            }
        }


        /* =========================================================
           NAVBAR
        ========================================================= */

        .navbar {
            position: fixed;

            top: 0;
            left: 0;
            right: 0;

            height: 76px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 6%;

            background:
                rgba(2, 2, 4, 0.82);

            backdrop-filter: blur(18px);

            border-bottom:
                1px solid
                rgba(160, 70, 255, 0.18);

            z-index: 1000;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;

            text-decoration: none;
            color: white;
        }

        .logo-universe {
            position: relative;

            width: 46px;
            height: 46px;

            flex-shrink: 0;
        }

        .logo-core {
            position: absolute;

            width: 23px;
            height: 23px;

            top: 50%;
            left: 50%;

            transform:
                translate(-50%, -50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    circle at 35% 30%,
                    #e9d7ff,
                    #a64dff 45%,
                    #4d008f 100%
                );

            box-shadow:
                0 0 10px
                rgba(168, 70, 255, 0.9),

                0 0 25px
                rgba(168, 70, 255, 0.5);
        }

        .logo-ring {
            position: absolute;

            border:
                1px solid
                rgba(190, 120, 255, 0.7);

            border-radius: 50%;
        }

        .logo-ring.one {
            width: 43px;
            height: 17px;

            top: 14px;
            left: 2px;

            transform: rotate(25deg);
        }

        .logo-ring.two {
            width: 43px;
            height: 17px;

            top: 14px;
            left: 2px;

            transform: rotate(-25deg);
        }

        .logo-orbit {
            position: absolute;

            width: 100%;
            height: 100%;

            animation:
                logoOrbit 8s linear infinite;
        }

        .logo-orbit span {
            position: absolute;

            font-size: 11px;
            font-weight: bold;

            color: #d7a7ff;
        }

        .logo-orbit span:nth-child(1) {
            top: -1px;
            left: 18px;
        }

        .logo-orbit span:nth-child(2) {
            bottom: 0;
            right: 3px;
        }

        .logo-orbit span:nth-child(3) {
            bottom: 0;
            left: 2px;
        }

        @keyframes logoOrbit {

            to {
                transform: rotate(360deg);
            }
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .logo-title {
            font-size: 17px;
            font-weight: 800;
            letter-spacing: 2px;
        }

        .logo-subtitle {
            margin-top: 5px;

            color: #a977d8;

            font-size: 8px;
            letter-spacing: 2px;
        }


        /* =========================================================
           NAV LINKS
        ========================================================= */

        .nav-links {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .nav-links a {
            position: relative;

            color: #b9a9c8;

            text-decoration: none;

            font-size: 13px;
            font-weight: 600;

            transition: 0.3s ease;
        }

        .nav-links a:hover {
            color: white;
        }

        .nav-links a::after {
            content: "";

            position: absolute;

            width: 0;
            height: 2px;

            left: 50%;
            bottom: -8px;

            transform:
                translateX(-50%);

            background: #a84dff;

            box-shadow:
                0 0 10px #a84dff;

            transition: 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }


        /* =========================================================
           MAIN
        ========================================================= */

        .quiz-challenge-main {
            position: relative;

            width: min(1050px, 92%);

            margin: auto;

            padding-top: 125px;
            padding-bottom: 100px;
        }


        /* =========================================================
           QUIZ HEADER
        ========================================================= */

        .quiz-header {
            text-align: center;

            margin-bottom: 35px;
        }

        .category-label {
            display: inline-flex;

            align-items: center;
            gap: 9px;

            padding:
                8px 16px;

            border:
                1px solid
                rgba(177, 82, 255, 0.35);

            border-radius: 999px;

            background:
                rgba(125, 31, 255, 0.08);

            color: #c88cff;

            font-size: 10px;
            font-weight: 800;

            letter-spacing: 2px;
        }

        .quiz-header h1 {
            margin-top: 20px;

            font-size:
                clamp(34px, 5vw, 60px);

            line-height: 1;

            font-weight: 900;

            letter-spacing: -2px;

            background:
                linear-gradient(
                    120deg,
                    #ffffff,
                    #d7a3ff,
                    #a64dff,
                    #ffffff
                );

            -webkit-background-clip: text;
            background-clip: text;

            color: transparent;
        }

        .quiz-header p {
            margin-top: 12px;

            color: #8f829c;

            font-size: 14px;
        }


        /* =========================================================
           GAME STATS
        ========================================================= */

        .game-stats {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 12px;

            margin-bottom: 20px;
        }

        .stat-box {
            padding: 15px;

            border-radius: 15px;

            background:
                rgba(255, 255, 255, 0.035);

            border:
                1px solid
                rgba(173, 84, 255, 0.16);

            text-align: center;
        }

        .stat-label {
            display: block;

            color: #74687d;

            font-size: 8px;
            font-weight: 800;

            letter-spacing: 1.5px;

            text-transform: uppercase;
        }

        .stat-value {
            display: block;

            margin-top: 5px;

            color: #d9b3ff;

            font-size: 20px;
            font-weight: 900;
        }

        #timer.warning {
            color: #ff9de7;
            animation: timerWarning 0.6s infinite alternate;
        }

        @keyframes timerWarning {

            from {
                opacity: 1;
            }

            to {
                opacity: 0.5;
            }
        }


        /* =========================================================
           PROGRESS
        ========================================================= */

        .progress-container {
            margin-bottom: 25px;
        }

        .progress-info {
            display: flex;

            justify-content: space-between;

            margin-bottom: 8px;

            color: #7e7187;

            font-size: 9px;
            font-weight: 800;

            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .progress-info span:last-child {
            color: #c28cff;
        }

        .progress-bar {
            width: 100%;
            height: 6px;

            overflow: hidden;

            border-radius: 20px;

            background:
                rgba(255, 255, 255, 0.07);
        }

        .progress-fill {
            height: 100%;

            width: 0%;

            border-radius: 20px;

            background:
                linear-gradient(
                    90deg,
                    #6415b8,
                    #c05cff
                );

            box-shadow:
                0 0 15px
                rgba(177, 71, 255, 0.5);

            transition:
                width 0.4s ease;
        }


        /* =========================================================
           QUIZ CARD
        ========================================================= */

        .quiz-card {
            position: relative;

            padding: 45px;

            border-radius: 28px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,0.055),
                    rgba(123,31,255,0.035)
                );

            border:
                1px solid
                rgba(173,84,255,0.22);

            box-shadow:
                0 25px 80px
                rgba(0,0,0,0.35);

            overflow: hidden;
        }

        .quiz-card::before {
            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            top: -180px;
            right: -100px;

            border-radius: 50%;

            background:
                rgba(150, 50, 255, 0.12);

            filter: blur(45px);

            pointer-events: none;
        }


        /* =========================================================
           QUIZ START PANEL — timer is paused until Start is pressed
        ========================================================= */

        .quiz-start-panel {
            position: relative;
            z-index: 1;
            min-height: 320px;
            padding: 30px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .quiz-start-kicker {
            color: #c58aff;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .quiz-start-title {
            margin: 14px 0 8px;
            color: #ffffff;
            font-size: clamp(27px, 4vw, 40px);
            line-height: 1.2;
            font-weight: 900;
        }

        .quiz-start-copy {
            margin: 8px 0;
            color: #e0c9f5;
            font-size: 16px;
            font-weight: 700;
        }

        .quiz-start-note {
            max-width: 480px;
            margin: 8px 0 24px;
            color: #bca9ca;
            font-size: 14px;
            line-height: 1.6;
        }

        .quiz-start-button {
            min-height: 58px;
            padding: 16px 32px;
            border: 1px solid rgba(230, 196, 255, 0.38);
            border-radius: 16px;
            background: linear-gradient(135deg, #6518b9, #b54dff);
            color: #ffffff;
            font-size: 15px;
            font-weight: 900;
            letter-spacing: 1px;
            cursor: pointer;
            box-shadow: 0 12px 35px rgba(151, 63, 230, 0.32);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .quiz-start-button:hover {
            transform: translateY(-2px);
            filter: brightness(1.12);
            box-shadow: 0 16px 40px rgba(151, 63, 230, 0.42);
        }

        .quiz-start-button:focus-visible {
            outline: 3px solid #ead4ff;
            outline-offset: 4px;
        }

        @media (max-width: 600px) {
            .quiz-start-panel {
                min-height: 300px;
                padding: 28px 12px;
            }

            .quiz-start-copy {
                font-size: 14px;
            }

            .quiz-start-button {
                width: 100%;
                max-width: 360px;
                padding: 15px 18px;
            }
        }

        /* =========================================================
           QUESTION
        ========================================================= */

        .question-number {
            color: #a66bd3;

            font-size: 10px;
            font-weight: 800;

            letter-spacing: 2px;

            text-transform: uppercase;
        }

        .question {
            margin-top: 18px;

            color: #ffffff;

            font-size:
                clamp(22px, 3vw, 32px);

            line-height: 1.4;

            font-weight: 800;
        }

        .question-math {
            margin-top: 20px;

            padding: 20px;

            border-radius: 15px;

            background:
                rgba(120, 30, 220, 0.08);

            border:
                1px solid
                rgba(170, 80, 255, 0.15);

            color: #dcbaff;

            text-align: center;

            font-family: Georgia, serif;

            font-size: 26px;
        }


        /* =========================================================
           ANSWERS
        ========================================================= */

        .answers {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 14px;

            margin-top: 30px;
        }

        .answer {
            position: relative;

            min-height: 65px;

            padding: 16px 20px;

            display: flex;

            align-items: center;

            gap: 14px;

            border-radius: 15px;

            background:
                rgba(255,255,255,0.035);

            border:
                1px solid
                rgba(173,84,255,0.17);

            color: #d9d0df;

            text-align: left;

            cursor: pointer;

            transition:
                0.3s ease;
        }

        .answer:hover {
            transform:
                translateY(-3px);

            border-color:
                rgba(190,100,255,0.6);

            background:
                rgba(145,50,255,0.10);

            box-shadow:
                0 10px 25px
                rgba(115,30,180,0.18);
        }

        .answer-letter {
            width: 34px;
            height: 34px;

            display: flex;

            align-items: center;
            justify-content: center;

            flex-shrink: 0;

            border-radius: 10px;

            background:
                rgba(160,70,255,0.10);

            border:
                1px solid
                rgba(180,90,255,0.20);

            color: #bd82ed;

            font-size: 12px;
            font-weight: 900;
        }

        .answer-text {
            font-size: 14px;
            font-weight: 600;

            line-height: 1.4;
        }

        .answer.correct {
            border-color:
                rgba(91,255,184,0.65);

            background:
                rgba(35,180,110,0.10);

            color: #baffdd;

            animation:
                correctPulse 0.45s ease;
        }

        .answer.correct
        .answer-letter {
            background:
                rgba(40,200,125,0.18);

            border-color:
                rgba(90,255,180,0.5);

            color: #7dffc0;
        }

        .answer.wrong {
            border-color:
                rgba(255,90,150,0.65);

            background:
                rgba(220,40,100,0.10);

            color: #ffb1ca;

            animation:
                wrongShake 0.45s ease;
        }

        .answer.wrong
        .answer-letter {
            background:
                rgba(220,40,100,0.18);

            border-color:
                rgba(255,100,160,0.5);

            color: #ff8eb3;
        }

        .answer.disabled {
            cursor: default;
        }

        @keyframes correctPulse {

            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes wrongShake {

            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-6px);
            }

            50% {
                transform: translateX(6px);
            }

            75% {
                transform: translateX(-4px);
            }

            100% {
                transform: translateX(0);
            }
        }


        /* =========================================================
           CONTROLS
        ========================================================= */

        .controls {
            display: flex;

            justify-content: space-between;
            align-items: center;

            gap: 15px;

            margin-top: 30px;
        }

        .hint-button {
            height: 45px;

            padding:
                0 18px;

            border-radius: 12px;

            background:
                rgba(160,70,255,0.06);

            border:
                1px solid
                rgba(160,70,255,0.20);

            color: #b990d5;

            font-size: 11px;
            font-weight: 800;

            letter-spacing: 0.5px;

            cursor: pointer;

            transition: 0.3s ease;
        }

        .hint-button:hover {
            background:
                rgba(160,70,255,0.13);

            color: white;
        }

        .next-button {
            height: 48px;

            padding:
                0 28px;

            border: none;

            border-radius: 13px;

            background:
                linear-gradient(
                    135deg,
                    #6314b5,
                    #9b3fe5
                );

            color: white;

            font-size: 11px;
            font-weight: 900;

            letter-spacing: 1px;

            cursor: pointer;

            box-shadow:
                0 8px 25px
                rgba(103,22,170,0.25);

            transition: 0.3s ease;
        }

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

            box-shadow:
                0 12px 30px
                rgba(133,43,209,0.4);
        }

        .next-button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            transform: none;
        }


        /* =========================================================
           HINT
        ========================================================= */

        .hint-box {
            display: none;

            margin-top: 18px;

            padding: 15px 18px;

            border-radius: 13px;

            background:
                rgba(180,100,255,0.06);

            border:
                1px solid
                rgba(180,100,255,0.15);

            color: #bfa6cb;

            font-size: 12px;

            line-height: 1.6;
        }

        .hint-box.show {
            display: block;

            animation:
                fadeIn 0.35s ease;
        }

        @keyframes fadeIn {

            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* =========================================================
           FEEDBACK
        ========================================================= */

        .feedback {
            min-height: 28px;

            margin-top: 20px;

            text-align: center;

            font-size: 13px;
            font-weight: 800;
        }

        .feedback.correct {
            color: #80ffc2;
        }

        .feedback.wrong {
            color: #ff9fbe;
        }


        /* =========================================================
           BACK BUTTON
        ========================================================= */

        .back-section {
            display: flex;

            justify-content: center;

            margin-top: 28px;
        }

        .back-button {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            gap: 9px;

            height: 46px;

            padding:
                0 22px;

            border-radius: 12px;

            border:
                1px solid
                rgba(173,84,255,0.20);

            background:
                rgba(255,255,255,0.035);

            color: #a997b0;

            text-decoration: none;

            font-size: 11px;
            font-weight: 800;

            letter-spacing: 0.5px;

            transition: 0.3s ease;
        }

        .back-button:hover {
            color: white;

            border-color:
                rgba(190,100,255,0.55);

            background:
                rgba(150,50,255,0.09);

            transform:
                translateY(-2px);

            box-shadow:
                0 8px 25px
                rgba(100,30,160,0.2);
        }

        .back-arrow {
            font-size: 17px;
        }


        /* =========================================================
           RESULT SCREEN
        ========================================================= */

        .result-screen {
            display: none;

            text-align: center;

            padding: 55px 35px;
        }

        .result-screen.show {
            display: block;

            animation:
                resultAppear 0.7s ease;
        }

        @keyframes resultAppear {

            from {
                opacity: 0;
                transform: translateY(20px) scale(0.97);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .result-symbol {
            font-size: 65px;

            color: #bd74ff;

            text-shadow:
                0 0 35px
                rgba(170,70,255,0.6);

            animation:
                resultFloat 2s ease-in-out infinite alternate;
        }

        @keyframes resultFloat {

            from {
                transform: translateY(-5px);
            }

            to {
                transform: translateY(8px);
            }
        }

        .result-screen h2 {
            margin-top: 20px;

            font-size:
                clamp(30px, 5vw, 48px);

            font-weight: 900;

            background:
                linear-gradient(
                    120deg,
                    #ffffff,
                    #c48cff,
                    #a64dff
                );

            -webkit-background-clip: text;
            background-clip: text;

            color: transparent;
        }

        .result-message {
            margin-top: 10px;

            color: #9c8ea9;

            font-size: 14px;
        }

        .final-score {
            margin-top: 30px;

            font-size: 65px;

            font-weight: 900;

            color: #d3a1ff;

            text-shadow:
                0 0 30px
                rgba(170,70,255,0.45);
        }

        .score-label {
            color: #75687e;

            font-size: 9px;
            font-weight: 800;

            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .result-buttons {
            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 12px;

            margin-top: 30px;
        }

        .result-button {
            min-width: 160px;

            height: 48px;

            padding:
                0 20px;

            display: inline-flex;

            align-items: center;
            justify-content: center;

            border-radius: 12px;

            text-decoration: none;

            font-size: 11px;
            font-weight: 900;

            letter-spacing: 0.7px;

            cursor: pointer;

            transition: 0.3s ease;
        }

        .play-again {
            border: none;

            background:
                linear-gradient(
                    135deg,
                    #6314b5,
                    #9b3fe5
                );

            color: white;
        }

        .play-again:hover {
            transform:
                translateY(-2px);

            box-shadow:
                0 10px 30px
                rgba(133,43,209,0.35);
        }

        .category-again {
            border:
                1px solid
                rgba(173,84,255,0.25);

            background:
                rgba(255,255,255,0.035);

            color: #b69ac7;
        }

        .category-again:hover {
            color: white;

            border-color:
                rgba(190,100,255,0.6);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            padding: 35px 20px;

            text-align: center;

            border-top:
                1px solid
                rgba(160,70,255,0.12);

            background:
                rgba(0,0,0,0.25);

            color: #655a6d;

            font-size: 11px;
        }

        footer strong {
            color: #9b70ba;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 750px) {

            .navbar {
                height: 68px;
                padding: 0 5%;
            }

            .nav-links {
                gap: 15px;
            }

            .nav-links a {
                font-size: 10px;
            }

            main {
                padding-top: 110px;
            }

            .game-stats {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .quiz-card {
                padding: 28px 22px;
            }

            .answers {
                grid-template-columns: 1fr;
            }

            .controls {
                flex-direction: column;
                align-items: stretch;
            }

            .hint-button,
            .next-button {
                width: 100%;
            }

            .back-button {
                width: 100%;
            }
        }


        @media (max-width: 480px) {

            .logo-universe {
                width: 40px;
                height: 40px;
            }

            .logo-title {
                font-size: 13px;
            }

            .logo-subtitle {
                font-size: 6px;
            }

            .nav-links a:nth-child(3) {
                display: none;
            }

            .quiz-header h1 {
                letter-spacing: -1px;
            }

            .quiz-card {
                padding: 25px 18px;
            }

            .question {
                font-size: 21px;
            }

            .question-math {
                font-size: 21px;
            }

            .result-screen {
                padding: 40px 15px;
            }
        }

    

/* =========================================================
   EMBEDDED QUIZ CATEGORY SWITCHER
========================================================= */

.quiz-category-switcher {
    width: min(1050px, 92%);
    margin: 0 auto 22px;
    text-align: center;
}

.quiz-category-switcher-label {
    margin-bottom: 10px;
    color: #74687d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.quiz-category-switcher-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-category-switcher button {
    padding: 9px 13px;
    border: 1px solid rgba(173,84,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: #9e91a7;
    font: 800 9px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .25s ease;
}

.quiz-category-switcher button:hover,
.quiz-category-switcher button.active {
    color: #fff;
    border-color: rgba(190,100,255,.6);
    background: rgba(145,50,255,.12);
    box-shadow: 0 0 18px rgba(145,50,255,.14);
}

@media (max-width: 480px) {
    .quiz-category-switcher-buttons {
        gap: 6px;
    }

    .quiz-category-switcher button {
        padding: 8px 10px;
        font-size: 8px;
    }
}


/* CLUB ANNOUNCEMENTS */
.announcements-section{position:relative;overflow:hidden}.announcement-layout{width:min(1180px,92%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:28px;align-items:start}.announcement-feed-panel,.announcement-admin-card{border:1px solid rgba(177,116,255,.25);background:linear-gradient(145deg,rgba(19,10,35,.92),rgba(8,7,18,.94));box-shadow:0 20px 70px rgba(0,0,0,.35),inset 0 0 40px rgba(150,80,255,.035);border-radius:24px}.announcement-panel-header{min-height:62px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#fff;font-weight:700}.announcement-panel-header>div{display:flex;align-items:center;gap:9px}.live-dot{width:9px;height:9px;border-radius:50%;background:#c56cff;box-shadow:0 0 14px #c56cff;animation:announcementPulse 1.8s infinite}@keyframes announcementPulse{50%{opacity:.35;transform:scale(.75)}}.announcement-status{color:rgba(255,255,255,.52);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.announcement-feed{padding:22px;display:grid;gap:16px;min-height:310px}.announcement-card{position:relative;padding:20px 21px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(139,72,210,.045));overflow:hidden}.announcement-card:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(#c56cff,#ff6fb7)}.announcement-card.pinned{border-color:rgba(255,170,225,.22);box-shadow:0 0 30px rgba(197,108,255,.08)}.announcement-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.announcement-author{color:#e4b8ff;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.announcement-date{color:rgba(255,255,255,.4);font-size:.73rem}.announcement-card h3{margin:0 0 9px;color:#fff;font-size:1.18rem}.announcement-card p{margin:0;color:rgba(255,255,255,.68);line-height:1.7;white-space:pre-wrap}.announcement-delete-button{margin-top:16px;border:1px solid rgba(255,100,130,.35);background:rgba(255,65,105,.09);color:#ff9bb0;border-radius:10px;padding:8px 12px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}.announcement-delete-button:hover{background:rgba(255,65,105,.18);border-color:rgba(255,100,130,.7)}.announcement-delete-button:disabled{opacity:.55;cursor:wait}.pinned-badge{display:inline-flex;margin-bottom:10px;padding:5px 9px;border-radius:999px;background:rgba(255,120,196,.1);color:#ffacd9;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.announcement-empty{min-height:260px;display:grid;place-content:center;text-align:center;padding:30px}.announcement-empty-icon{font-size:2.2rem;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(197,108,255,.5))}.announcement-empty h3{color:#fff;margin:0 0 7px}.announcement-empty p{margin:0;color:rgba(255,255,255,.48)}.announcement-admin-card{padding:26px;position:sticky;top:95px}.admin-orbit,.admin-modal-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;font-size:1.5rem;border:1px solid rgba(221,145,255,.35);background:radial-gradient(circle,rgba(204,112,255,.22),rgba(255,255,255,.025));box-shadow:0 0 30px rgba(187,100,255,.18)}.announcement-admin-card h3{margin:7px 0 10px;color:#fff;font-size:1.45rem}.announcement-admin-card>p{color:rgba(255,255,255,.58);line-height:1.65}.announcement-admin-button{width:100%;margin-top:9px}.admin-panel{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}.admin-user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;color:rgba(255,255,255,.7);font-size:.8rem}.admin-small-button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);border-radius:9px;padding:7px 10px;cursor:pointer}.announcement-form{display:grid;gap:10px}.announcement-form label{color:rgba(255,255,255,.72);font-size:.76rem;font-weight:700;letter-spacing:.04em}.announcement-form input,.announcement-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.1);outline:none;border-radius:12px;background:rgba(0,0,0,.28);color:#fff;padding:12px 13px;font:inherit;resize:vertical}.announcement-form input:focus,.announcement-form textarea:focus{border-color:rgba(197,108,255,.65);box-shadow:0 0 0 3px rgba(197,108,255,.08)}.pin-check{display:flex!important;align-items:center;gap:8px;margin:4px 0 5px;cursor:pointer}.pin-check input{width:auto}.admin-form-status{min-height:18px;margin:0;color:#d9b5ff;font-size:.76rem}.admin-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.admin-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(9px)}.admin-modal-card{position:relative;z-index:1;width:min(430px,100%);padding:30px;border:1px solid rgba(197,108,255,.3);border-radius:24px;background:linear-gradient(145deg,#160d25,#080711);box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 50px rgba(147,74,255,.12)}.admin-modal-card h2{margin:5px 0 8px;color:#fff}.admin-modal-card>p{color:rgba(255,255,255,.56);line-height:1.6;margin-bottom:22px}.modal-close{position:absolute;top:14px;right:15px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:1.3rem;cursor:pointer}@media(max-width:900px){.announcement-layout{grid-template-columns:1fr}.announcement-admin-card{position:static}}@media(max-width:600px){.announcement-panel-header{padding:0 16px}.announcement-feed{padding:14px}.announcement-card{padding:17px}.announcement-topline{align-items:flex-start;flex-direction:column;gap:4px}.announcement-admin-card{padding:20px}}


/* ===== separated source stylesheet ===== */


/* Mathsight admin visibility fix */
.admin-modal[hidden],
.admin-panel[hidden] {
    display: none !important;
}


/* ===== separated source stylesheet ===== */


/* Hidden for all regular visitors; shown only on the admin-entry URL. */
#adminLoginButton { display: none !important; }
body.admin-entry-enabled #adminLoginButton { display: inline-flex !important; }
#adminLoginModal[hidden], #adminPanel[hidden] { display: none !important; }


/* ===== separated source stylesheet ===== */


/* Clear rounded boxes for every main navigation item */
.navbar .nav-links {
    align-items: center;
    gap: clamp(6px, 1.05vw, 13px);
}

.navbar .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid rgba(174, 112, 255, 0.43);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(132, 65, 206, 0.16), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 0 12px rgba(147, 75, 230, 0.055);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

/* The selected section stands out, while all other links keep their own box. */
.navbar .nav-links a.active,
.navbar .nav-links a:hover {
    color: #fff !important;
    border-color: #c394ff;
    background: linear-gradient(135deg, rgba(154, 75, 255, 0.48), rgba(91, 35, 161, 0.4));
    box-shadow: 0 0 0 2px rgba(168, 77, 255, 0.12), 0 0 18px rgba(168, 77, 255, 0.2), inset 0 0 14px rgba(227, 196, 255, 0.08);
    transform: translateY(-1px);
}

.navbar .nav-links a:focus-visible {
    outline: 2px solid #d6b2ff;
    outline-offset: 3px;
}

/* The individual navigation boxes also work on phones; keep every item visible. */
@media (max-width: 700px) {
    .navbar .nav-links {
        gap: 7px;
        max-width: 62vw;
        overflow-x: auto;
        padding: 5px 3px 8px;
        scrollbar-width: none;
    }

    .navbar .nav-links a {
        padding: 7px 9px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .navbar .nav-links a:nth-child(3) {
        display: inline-flex;
    }
}


/* ===== separated source stylesheet ===== */


/* Clearer, larger question count and more readable progress. */
#questionNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 12px 18px;
    min-height: 48px;
    border: 2px solid rgba(191, 112, 255, .70);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(126, 37, 204, .26), rgba(58, 20, 89, .42));
    box-shadow: 0 0 24px rgba(154, 63, 255, .20), inset 0 0 14px rgba(199, 141, 255, .06);
    color: #f0d9ff;
    font-size: clamp(19px, 2.5vw, 26px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1px;
}
.progress-info {
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    gap: 12px;
}
#progressText {
    font-size: clamp(17px, 2vw, 22px);
    color: #edcfff;
    font-weight: 900;
    letter-spacing: .5px;
}
.progress-bar { height: 10px; }
.final-score {
    font-size: clamp(48px, 7vw, 72px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.score-label {
    max-width: 95%;
    margin: 7px auto 0;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 1px;
}

/* Larger, clearly highlighted Basic / Algebra / Geometry / Statistics / Logic / Number Theory boxes. */
.quiz-category-switcher {
    max-width: 1120px;
    margin-bottom: 30px;
}
.quiz-category-switcher-label {
    margin-bottom: 15px;
    color: #d7b3f5;
    font-size: 12px;
    letter-spacing: 2px;
}
.quiz-category-switcher-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}
.quiz-category-switcher button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 58px;
    padding: 15px 18px;
    border: 2px solid rgba(177, 100, 255, .36);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(110, 54, 150, .20), rgba(255,255,255,.035));
    color: #e0c9f2;
    font: 800 14px/1.25 "Segoe UI", Arial, sans-serif;
    letter-spacing: .35px;
    box-shadow: 0 7px 18px rgba(0,0,0,.14);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.quiz-category-switcher button:hover,
.quiz-category-switcher button:focus-visible {
    outline: none;
    transform: translateY(-2px);
    border-color: #d09aff;
    background: linear-gradient(135deg, rgba(129, 47, 207, .55), rgba(78, 31, 117, .48));
    color: #fff;
    box-shadow: 0 0 0 3px rgba(177, 100, 255, .12), 0 10px 26px rgba(105, 36, 167, .25);
}
.quiz-category-switcher button.active {
    border: 2px solid #dfb4ff;
    background: linear-gradient(135deg, #7022b5, #a54ee5);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(177, 100, 255, .16), 0 0 24px rgba(164, 77, 255, .38);
}
.quiz-category-switcher button.active::before {
    content: "✦";
    margin-right: 9px;
    color: #fff0a8;
    font-size: 15px;
}
.category-card {
    min-height: 440px;
    padding: 36px;
    border-width: 2px;
}
.category-card h2 { font-size: clamp(25px, 2.3vw, 30px); }
.category-icon { width: 78px; height: 78px; font-size: 35px; }
.start-category { min-height: 54px; font-size: 14px; }
@media (max-width: 700px) {
    .quiz-category-switcher-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .quiz-category-switcher button { min-height: 54px; padding: 13px 10px; font-size: 12px; }
    #questionNumber { font-size: 19px; min-height: 44px; padding: 10px 13px; }
    .progress-info { font-size: 11px; }
    #progressText { font-size: 18px; }
    .category-card { min-height: 400px; padding: 27px; }
}
@media (max-width: 380px) {
    .quiz-category-switcher-buttons { grid-template-columns: 1fr 1fr; }
    .quiz-category-switcher button { font-size: 11px; }
}


/* ===== separated source stylesheet ===== */


.club-activities-section{position:relative;isolation:isolate;padding:76px 5vw 92px;overflow:hidden;background:radial-gradient(ellipse at 8% 8%,rgba(129,59,210,.14),transparent 42%),radial-gradient(ellipse at 94% 30%,rgba(211,89,182,.09),transparent 35%)}
.club-feed-section-heading{width:min(1260px,100%);margin:0 auto 30px!important}
.club-feed-section-heading p{max-width:780px;margin-inline:auto}
.club-feed-layout{width:min(1260px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.78fr);gap:24px;align-items:start}
.club-feed-main,.club-admin-composer-card,.club-side-info-card,.club-side-community-card{border:1px solid rgba(174,112,255,.24);background:linear-gradient(145deg,rgba(20,12,37,.96),rgba(8,7,18,.97));border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.27),inset 0 0 35px rgba(151,84,233,.025);min-width:0}
.club-feed-main{overflow:hidden}
.club-feed-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;border-bottom:1px solid rgba(255,255,255,.075)}
.club-feed-panel-title{display:flex;align-items:center;gap:12px;min-width:0}.club-feed-panel-title strong{display:block;color:#fff;font-size:1rem}.club-feed-panel-title small{display:block;color:rgba(255,255,255,.48);font-size:.75rem;margin-top:4px}.club-feed-live-dot{flex:0 0 10px;width:10px;height:10px;background:#bd7bff;border-radius:50%;box-shadow:0 0 15px #bd7bff;animation:clubFeedPulse 1.8s infinite}@keyframes clubFeedPulse{50%{opacity:.42;transform:scale(.78)}}
.club-feed-status{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#cba7ff;text-align:right;white-space:nowrap}
.club-activity-feed{padding:19px;display:grid;gap:18px;min-height:320px}
.club-feed-empty{display:grid;justify-items:center;align-content:center;text-align:center;min-height:280px;padding:28px;color:rgba(255,255,255,.55)}.club-empty-emoji{font-size:2.7rem;margin-bottom:10px;filter:drop-shadow(0 0 14px rgba(183,108,255,.45))}.club-feed-empty h3{color:#fff;margin:0 0 7px;font-size:1.15rem}.club-feed-empty p{margin:0;line-height:1.6;max-width:360px}
.club-post-card{min-width:0;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(112,56,165,.045));box-shadow:0 7px 28px rgba(0,0,0,.17);scroll-margin-top:110px;transition:border-color .2s,box-shadow .2s}.club-post-card:target{border-color:rgba(196,145,255,.8);box-shadow:0 0 0 3px rgba(165,98,255,.18),0 10px 32px rgba(0,0,0,.2)}
.club-post-header{display:flex;align-items:flex-start;gap:12px;padding:19px 19px 10px}.club-post-avatar{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:50%;font-size:1.15rem;color:#f5dfff;border:1px solid rgba(220,160,255,.35);background:radial-gradient(circle at 35% 25%,rgba(224,179,255,.4),rgba(115,52,170,.33) 55%,rgba(30,13,46,.9));box-shadow:0 0 16px rgba(165,90,245,.13)}.club-post-author-area{flex:1;min-width:0}.club-post-author{display:block;color:#fff;font-weight:800;font-size:.9rem}.club-post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:5px;color:rgba(255,255,255,.44);font-size:.72rem}.club-post-category{display:inline-flex;align-items:center;border:1px solid rgba(188,130,255,.23);background:rgba(158,88,227,.12);border-radius:999px;padding:4px 8px;color:#d8b4ff;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.club-post-admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.club-post-small-action{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.75);border-radius:9px;padding:7px 10px;font:inherit;font-size:.72rem;cursor:pointer}.club-post-small-action:hover{border-color:rgba(194,139,255,.5);color:#fff}.club-post-small-action.danger{color:#ff9fb3;border-color:rgba(255,110,141,.2)}
.club-post-caption{padding:3px 20px 17px;margin:0;color:rgba(255,255,255,.83);font-size:.94rem;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.club-post-photo{display:block;width:100%;max-height:620px;object-fit:contain;background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.club-post-stats{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 18px;color:rgba(255,255,255,.5);font-size:.75rem}.club-post-stats .club-liked-count{color:#e4a5ff}.club-post-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.075);border-bottom:1px solid rgba(255,255,255,.075)}.club-post-action-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.68);border-radius:11px;padding:8px 5px;font:inherit;font-size:.81rem;font-weight:750;cursor:pointer;transition:background .18s,color .18s,border-color .18s}.club-post-action-button:hover{background:rgba(168,102,240,.12);color:#fff;border-color:rgba(177,117,255,.16)}.club-post-action-button.is-liked{background:rgba(181,91,255,.13);color:#e1b4ff}.club-post-action-icon{font-size:1.1rem}.club-share-panel{padding:13px 16px 15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;border-bottom:1px solid rgba(255,255,255,.075);background:rgba(0,0,0,.12)}.club-share-panel[hidden]{display:none!important}.club-share-panel input{min-width:0;width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(0,0,0,.25);color:#e5d1ff;padding:10px;font:inherit;font-size:.74rem}.club-share-panel button{border:1px solid rgba(183,129,255,.4);background:rgba(137,76,220,.18);color:#f2e5ff;border-radius:9px;padding:9px 12px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:800}
.club-comments-area{padding:13px 18px 17px}.club-comments-heading{color:rgba(255,255,255,.58);font-size:.73rem;font-weight:800;letter-spacing:.04em;margin:0 0 10px}.club-comments-list{display:grid;gap:9px;margin-bottom:12px}.club-comment{display:flex;gap:9px;align-items:flex-start}.club-comment-avatar{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(154,98,222,.18);border:1px solid rgba(173,117,240,.2);font-size:.72rem}.club-comment-bubble{flex:1;min-width:0;border-radius:13px;padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.055)}.club-comment-topline{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:3px}.club-comment-name{color:#ead8ff;font-weight:800;font-size:.75rem}.club-comment-date{color:rgba(255,255,255,.38);font-size:.65rem}.club-comment-body{margin:0;color:rgba(255,255,255,.76);font-size:.81rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.club-comment-delete{border:0;background:transparent;color:#ff9fb3;font-size:.68rem;cursor:pointer;padding:0 0 0 4px}.club-no-comments{color:rgba(255,255,255,.4);font-size:.75rem;padding:2px 0 8px}.club-comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.club-comment-form textarea{min-width:0;min-height:42px;max-height:120px;resize:vertical;box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.2);color:#fff;padding:11px 12px;font:inherit;font-size:.8rem;line-height:1.5;outline:none}.club-comment-form textarea:focus{border-color:rgba(191,135,255,.7);box-shadow:0 0 0 3px rgba(161,95,235,.1)}.club-comment-form button{min-height:42px;border:1px solid rgba(178,123,255,.36);border-radius:12px;background:rgba(132,69,202,.2);color:#f3e6ff;padding:9px 13px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.club-comment-form button:disabled{opacity:.45;cursor:wait}.club-comment-name-input{grid-column:1/-1;box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.16);color:#eee;border-radius:10px;padding:8px 10px;font:inherit;font-size:.74rem;outline:none}.club-comment-name-input:focus{border-color:rgba(191,135,255,.6)}
.club-feed-sidebar{display:grid;gap:17px;min-width:0}.club-admin-composer-card,.club-side-info-card{padding:22px}.club-sidebar-title-row{display:flex;align-items:center;gap:12px}.club-admin-avatar{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;font-size:1.35rem;border:1px solid rgba(221,145,255,.26);background:radial-gradient(circle,rgba(204,112,255,.22),rgba(255,255,255,.025))}.club-sidebar-eyebrow{display:block;font-size:.61rem;font-weight:900;letter-spacing:.13em;color:#c9a0ff}.club-sidebar-title-row h3{font-size:1.1rem;color:#fff;margin:4px 0 0}.club-sidebar-description{font-size:.8rem;line-height:1.65;color:rgba(255,255,255,.54);margin:13px 0 15px}.club-feed-admin-login{width:100%;justify-content:center}.club-activity-composer{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:18px}.club-activity-composer[hidden]{display:none!important}.club-composer-signed-in{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;color:#c7ffdf;font-size:.74rem}.club-activity-form{display:grid;gap:9px}.club-activity-form label:not(.club-photo-picker){font-size:.74rem;color:rgba(255,255,255,.77);font-weight:800}.club-activity-form select,.club-activity-form textarea{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#100b1b;color:#fff;padding:11px 12px;font:inherit;font-size:.81rem;outline:none}.club-activity-form select:focus,.club-activity-form textarea:focus{border-color:rgba(190,125,255,.7);box-shadow:0 0 0 3px rgba(164,91,233,.09)}.club-activity-form textarea{resize:vertical;line-height:1.6}.club-photo-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.club-photo-picker{display:flex;align-items:center;gap:11px;padding:13px;border:1px dashed rgba(183,125,255,.38);border-radius:13px;background:rgba(143,81,212,.07);cursor:pointer}.club-photo-picker:hover{border-color:rgba(208,165,255,.8);background:rgba(143,81,212,.13)}.club-photo-picker-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(176,111,255,.17);color:#e7ceff;font-size:1.3rem}.club-photo-picker strong{display:block;color:#f5eaff;font-size:.78rem}.club-photo-picker small{display:block;margin-top:3px;color:rgba(255,255,255,.43);font-size:.65rem}.club-photo-preview{position:relative}.club-photo-preview[hidden]{display:none!important}.club-photo-preview img{display:block;max-width:100%;max-height:240px;object-fit:contain;border-radius:12px;border:1px solid rgba(255,255,255,.12)}.club-photo-preview p{font-size:.68rem;color:rgba(255,255,255,.5);margin:6px 0 0}.club-composer-buttons{display:flex;gap:8px;flex-wrap:wrap}.club-composer-buttons .btn{flex:1;justify-content:center;min-width:120px}.club-side-info-icon{font-size:1.5rem}.club-side-info-card h3{color:#fff;font-size:1.08rem;margin:10px 0 7px}.club-side-info-card>p{color:rgba(255,255,255,.55);font-size:.8rem;line-height:1.7;margin:0 0 17px}.club-side-link-row{display:grid;gap:8px}.club-side-link-row a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border:1px solid rgba(181,121,255,.16);background:rgba(143,81,212,.06);border-radius:10px;padding:10px 12px;color:#dcc0ff;font-size:.78rem;font-weight:750}.club-side-link-row a:hover{background:rgba(143,81,212,.15);border-color:rgba(181,121,255,.4)}.club-side-community-card{display:flex;align-items:flex-start;gap:12px;padding:17px}.club-side-community-card>span{font-size:1.25rem}.club-side-community-card strong{display:block;color:#f0e2ff;font-size:.8rem}.club-side-community-card p{color:rgba(255,255,255,.48);font-size:.73rem;line-height:1.6;margin:5px 0 0}.club-feed-toast{position:fixed;z-index:10020;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(520px,calc(100vw - 28px));padding:12px 17px;border:1px solid rgba(197,144,255,.5);border-radius:13px;background:rgba(24,13,39,.97);color:#f4e7ff;box-shadow:0 15px 45px rgba(0,0,0,.45);font-size:.82rem;text-align:center}.club-feed-toast[hidden]{display:none!important}
#clubAdminLoginButton{display:none!important}body.admin-entry-enabled #clubAdminLoginButton:not([hidden]){display:inline-flex!important}#clubAdminLoginButton[hidden]{display:none!important}
@media(max-width:980px){.club-feed-layout{grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:16px}.club-activity-feed{padding:13px}.club-admin-composer-card,.club-side-info-card{padding:17px}}
@media(max-width:760px){.club-activities-section{padding:62px 4vw 72px}.club-feed-layout{grid-template-columns:minmax(0,1fr)}.club-feed-sidebar{grid-template-columns:1fr 1fr;align-items:start}.club-admin-composer-card{grid-row:span 2}.club-feed-panel-header{padding:16px}.club-post-header{padding:15px 14px 9px}.club-post-caption{padding:3px 15px 14px}.club-comments-area{padding:12px 14px 14px}}
@media(max-width:520px){.club-feed-sidebar{grid-template-columns:1fr}.club-admin-composer-card{grid-row:auto}.club-post-header{gap:9px}.club-post-avatar{width:37px;height:37px;flex-basis:37px}.club-post-author{font-size:.83rem}.club-post-admin-actions{gap:4px}.club-post-small-action{padding:6px 7px;font-size:.67rem}.club-post-actions{margin:0 8px}.club-post-action-button{gap:5px;font-size:.72rem}.club-share-panel{grid-template-columns:minmax(0,1fr)}.club-share-panel button{min-height:38px}.club-post-stats{padding:10px 13px}.club-feed-status{font-size:.58rem}.club-feed-panel-title small{font-size:.67rem}}


/* ===== separated source stylesheet ===== */


.mathsight-qr-section{position:relative;isolation:isolate;overflow:hidden;padding:100px 6%;background:radial-gradient(ellipse at 15% 20%,rgba(118,55,255,.18),transparent 35%),radial-gradient(ellipse at 85% 80%,rgba(202,70,255,.13),transparent 32%),linear-gradient(145deg,#070412,#100721 55%,#05030c)}
.mathsight-qr-stars{position:absolute;inset:0;pointer-events:none;color:#d8b8ff;opacity:.6}
.mathsight-qr-stars span{position:absolute;font-size:22px}.mathsight-qr-stars span:nth-child(1){top:10%;left:8%}.mathsight-qr-stars span:nth-child(2){top:24%;left:20%}.mathsight-qr-stars span:nth-child(3){top:12%;right:14%}.mathsight-qr-stars span:nth-child(4){top:48%;right:7%}.mathsight-qr-stars span:nth-child(5){bottom:15%;left:12%}.mathsight-qr-stars span:nth-child(6){bottom:22%;left:30%}.mathsight-qr-stars span:nth-child(7){bottom:10%;right:22%}.mathsight-qr-stars span:nth-child(8){top:65%;right:12%}.mathsight-qr-stars span:nth-child(9){top:28%;right:30%}.mathsight-qr-stars span:nth-child(10){top:8%;left:45%}
.mathsight-qr-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:32px;max-width:1000px;margin:0 auto;align-items:stretch}
.mathsight-qr-card{position:relative;overflow:hidden;min-height:480px;padding:34px 24px 26px;border:1px solid rgba(198,147,255,.42);border-radius:28px;background:radial-gradient(circle at 50% 0%,rgba(135,64,255,.25),transparent 48%),linear-gradient(160deg,rgba(25,13,48,.96),rgba(7,5,18,.98));box-shadow:0 20px 70px rgba(0,0,0,.35),0 0 35px rgba(135,64,255,.12);text-align:center}
.mathsight-qr-heading{position:relative;z-index:1}.mathsight-qr-kicker{font-size:10px;letter-spacing:3px;color:#cba7ff;font-weight:800}.mathsight-qr-heading h3{margin:12px 0 8px;color:#fff;font-size:clamp(24px,3vw,34px);letter-spacing:-.7px}.mathsight-qr-heading p{margin:0;color:#c8bdd8;font-size:13px}
.mathsight-qr-output{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:min(100%,300px);min-height:300px;margin:25px auto 17px;padding:14px;background:#fff;border:8px solid #fff;border-radius:12px;box-shadow:0 0 0 1px #d8c5ff,0 0 30px rgba(180,116,255,.3)}
.mathsight-qr-output canvas,.mathsight-qr-output img{display:block!important;width:100%!important;height:auto!important;max-width:256px!important;image-rendering:pixelated}
.mathsight-qr-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:250px;color:#35224b;text-align:center;padding:12px}.qr-placeholder-icon{font-size:52px;color:#7d35d8}.mathsight-qr-placeholder strong{font-size:15px}.mathsight-qr-placeholder small{font-size:12px;line-height:1.5;color:#6b5b7b}
.mathsight-qr-brand{position:relative;z-index:1;color:#e1caff;font-size:11px;font-weight:800;letter-spacing:5px}
.mathsight-qr-planet{position:absolute;right:20px;top:68px;font-size:35px;filter:drop-shadow(0 0 12px rgba(188,128,255,.65));animation:mathsightQrFloat 5s ease-in-out infinite}
.mathsight-qr-orbit{position:absolute;pointer-events:none;border:1px solid rgba(184,133,255,.15);border-radius:50%;width:320px;height:110px;transform:rotate(-28deg);left:50%;top:54%;margin-left:-160px}.orbit-two{width:390px;height:145px;margin-left:-195px;transform:rotate(35deg);border-color:rgba(134,96,255,.12)}
@keyframes mathsightQrFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(8deg)}}
.mathsight-qr-controls{padding:30px;border-radius:24px;border:1px solid rgba(190,143,255,.23);background:rgba(17,10,31,.9);box-shadow:0 18px 50px rgba(0,0,0,.2);align-self:center}
.mathsight-qr-control-title{display:flex;align-items:center;gap:13px;margin-bottom:25px}.control-orb{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#a45bff,#6025c9);color:white;font-size:22px}.mathsight-qr-control-title h3{margin:0 0 5px;color:#fff;font-size:22px}.mathsight-qr-control-title p{margin:0;color:#b8a8cb;font-size:12px}
.mathsight-qr-controls label{display:block;margin-bottom:9px;color:#e8dcf7;font-size:13px;font-weight:700}.mathsight-qr-controls input{width:100%;padding:14px 13px;border:1px solid #57416f;border-radius:12px;background:#080511;color:#fff;outline:none;font:inherit;font-size:13px}.mathsight-qr-controls input:focus{border-color:#bd83ff;box-shadow:0 0 0 3px rgba(174,111,255,.14)}.mathsight-qr-note{margin:12px 0 20px;color:#b9adc9;font-size:12px;line-height:1.65}.mathsight-qr-note code{color:#e0c3ff;overflow-wrap:anywhere}
.mathsight-qr-controls .mathsight-qr-button,.mathsight-qr-controls .mathsight-qr-download{width:100%;margin:0 0 11px;justify-content:center}.mathsight-qr-button{background:linear-gradient(100deg,#8d42e8,#c05dff)!important;border:0!important;color:white!important}.mathsight-qr-download{background:transparent!important;border:1px solid #9867ca!important;color:#ead7ff!important}.mathsight-qr-download:disabled{opacity:.4;cursor:not-allowed}.mathsight-qr-status{min-height:20px;margin:6px 0 12px;color:#d9c3ff;font-size:12px;line-height:1.5}.mathsight-qr-tip{display:flex;gap:12px;padding:14px;border-radius:13px;background:rgba(131,73,201,.12);border:1px solid rgba(180,131,238,.16)}.mathsight-qr-tip span{font-size:23px;color:#d5a7ff}.mathsight-qr-tip p{margin:0;color:#c7bad7;font-size:11px;line-height:1.6}.mathsight-qr-tip strong{color:#f0e3ff}
@media(max-width:760px){.mathsight-qr-section{padding:75px 5%}.mathsight-qr-layout{grid-template-columns:1fr;gap:22px}.mathsight-qr-card{min-height:440px;padding:28px 18px}.mathsight-qr-controls{padding:23px}.mathsight-qr-output{min-height:280px}.mathsight-qr-planet{right:14px;top:54px}}


/* =========================================================
   CLUB FEED PHOTO GALLERY — multi-photo event posts
========================================================= */
.club-post-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.club-post-gallery .club-post-photo {
    display: block;
    width: 100%;
    height: clamp(170px, 27vw, 360px);
    max-height: 420px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
    border: 0;
}

.club-post-gallery.single-image {
    display: block;
}

.club-post-gallery.single-image .club-post-photo {
    height: auto;
    max-height: 620px;
    object-fit: contain;
    aspect-ratio: auto;
}

.club-post-gallery .club-post-photo:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    height: clamp(200px, 35vw, 460px);
}

.club-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.club-photo-preview-item {
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.club-photo-preview .club-photo-preview-grid img,
.club-photo-preview-grid img {
    display: block;
    width: 100%;
    height: 100px;
    max-width: 100%;
    max-height: 100px;
    border: 0;
    border-radius: 7px;
    object-fit: cover;
}

.club-photo-preview-grid p {
    overflow-wrap: anywhere;
    font-size: 0.62rem;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .club-post-gallery .club-post-photo {
        height: 34vw;
        min-height: 120px;
    }

    .club-photo-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Clear publishing feedback for the club activity composer. */
.club-activity-form .admin-form-status:not(:empty) {
    min-height: 0;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(194, 139, 255, .24);
    border-left: 3px solid #bf83ff;
    border-radius: 10px;
    background: rgba(125, 69, 185, .11);
    color: #ead7ff;
    font-size: .78rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.club-activity-form #clubActivitySubmitButton:disabled {
    opacity: .72;
    cursor: progress;
}


/* ===== Mathsight Club Feed: photo viewer and download ===== */
.club-post-photo[data-club-photo-index] {
    cursor: zoom-in;
}
.club-post-photo[data-club-photo-index]:focus-visible {
    outline: 3px solid #d4a3ff;
    outline-offset: -3px;
}
.club-photo-viewer[hidden] {
    display: none !important;
}
.club-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 18px;
}
.club-photo-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 2, 10, .94);
    backdrop-filter: blur(8px);
}
.club-photo-viewer-dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 96vw);
    height: min(90vh, 900px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(198, 145, 255, .38);
    border-radius: 18px;
    background: #090611;
    box-shadow: 0 25px 90px rgba(0, 0, 0, .65), 0 0 45px rgba(146, 76, 220, .16);
}
.club-photo-viewer-stage {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 56px 66px 16px;
    background: radial-gradient(ellipse at center, #1b102b, #05030a 75%);
}
.club-photo-viewer-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 7px;
}
.club-photo-viewer-close,
.club-photo-viewer-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid rgba(218, 180, 255, .35);
    background: rgba(26, 14, 42, .9);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}
.club-photo-viewer-close {
    top: 12px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 27px;
    line-height: 1;
}
.club-photo-viewer-nav {
    top: 50%;
    width: 48px;
    height: 58px;
    transform: translateY(-50%);
    border-radius: 14px;
    font-size: 38px;
    line-height: 1;
}
.club-photo-viewer-nav.previous { left: 12px; }
.club-photo-viewer-nav.next { right: 12px; }
.club-photo-viewer-close:hover,
.club-photo-viewer-nav:hover,
.club-photo-viewer-download:hover {
    border-color: rgba(226, 190, 255, .8);
    background: rgba(111, 57, 171, .92);
}
.club-photo-viewer-nav:disabled {
    opacity: .35;
    cursor: default;
}
.club-photo-viewer-footer {
    min-height: 66px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    color: #e9d8ff;
    font-size: .85rem;
}
.club-photo-viewer-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-sizing: border-box;
    padding: 9px 16px;
    border: 1px solid rgba(190, 132, 255, .48);
    border-radius: 11px;
    background: linear-gradient(100deg, #7838d5, #9d50e8);
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 800;
}
body.club-photo-viewer-open { overflow: hidden; }
@media (max-width: 600px) {
    .club-photo-viewer { padding: 8px; }
    .club-photo-viewer-dialog { width: 100%; height: 88vh; border-radius: 13px; }
    .club-photo-viewer-stage { padding: 54px 44px 12px; }
    .club-photo-viewer-nav { width: 36px; height: 48px; font-size: 30px; }
    .club-photo-viewer-nav.previous { left: 5px; }
    .club-photo-viewer-nav.next { right: 5px; }
    .club-photo-viewer-footer { min-height: 60px; padding: 10px 12px; }
}