/* ==========================================================================
   QuizArena – front-end theme (Bootstrap 5.3 dark + custom tokens)
   ========================================================================== */

:root {
    --qa-bg: #07061a;
    --qa-bg-soft: #0f0d2b;
    --qa-surface: rgba(255, 255, 255, 0.04);
    --qa-surface-strong: rgba(255, 255, 255, 0.07);
    --qa-border: rgba(255, 255, 255, 0.09);
    --qa-text-muted: #a5a3c7;
    --qa-violet: #7c3aed;
    --qa-pink: #db2777;
    --qa-amber: #f59e0b;
    --qa-cyan: #06b6d4;
    --qa-green: #10b981;
    --qa-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
    --qa-gradient-soft: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(219, 39, 119, .12) 55%, rgba(245, 158, 11, .1));
    --qa-gold: linear-gradient(135deg, #fde68a, #f59e0b 55%, #b45309);
    --qa-silver: linear-gradient(135deg, #f1f5f9, #94a3b8 60%, #475569);
    --qa-bronze: linear-gradient(135deg, #fed7aa, #ea580c 60%, #7c2d12);
    --qa-radius: 1.25rem;
    --qa-shadow: 0 20px 60px -20px rgba(124, 58, 237, .45);

    --bs-body-bg: var(--qa-bg);
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color-rgb: 196, 181, 253;
    --bs-link-hover-color-rgb: 233, 213, 255;
    --bs-border-color: var(--qa-border);
    --bs-secondary-color: var(--qa-text-muted);
}

[data-bs-theme=dark] {
    --bs-body-bg: var(--qa-bg);
    --bs-tertiary-bg: var(--qa-bg-soft);
    --bs-border-color: var(--qa-border);
    --bs-secondary-color: var(--qa-text-muted);
}

body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(124, 58, 237, .22), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(219, 39, 119, .14), transparent 60%),
        var(--qa-bg);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, .display-font {
    font-family: 'Space Grotesk', var(--bs-body-font-family);
    letter-spacing: -0.02em;
}

.text-muted, .text-body-secondary { color: var(--qa-text-muted) !important; }

.text-gradient {
    background: var(--qa-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gold {
    background: var(--qa-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

::selection { background: rgba(124, 58, 237, .5); }

/* ---------- Buttons ---------- */
.btn { border-radius: .85rem; font-weight: 600; padding: .6rem 1.2rem; }
.btn-lg { padding: .85rem 1.6rem; border-radius: 1rem; }
.btn-sm { padding: .35rem .8rem; border-radius: .65rem; }

.btn-gradient {
    background: var(--qa-gradient);
    background-size: 200% 200%;
    color: #fff;
    border: 0;
    box-shadow: 0 10px 30px -10px rgba(219, 39, 119, .7);
    transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-gradient:hover, .btn-gradient:focus {
    color: #fff;
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(219, 39, 119, .85);
}

.btn-glass {
    background: var(--qa-surface-strong);
    color: #fff;
    border: 1px solid var(--qa-border);
    backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.btn-check:checked + .btn-glass, .btn-glass.active { background: var(--qa-gradient); border-color: transparent; color: #fff; }

/* ---------- Navbar ---------- */
.qa-navbar {
    background: rgba(7, 6, 26, .72);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--qa-border);
}
.qa-navbar .nav-link { color: #d4d2f0; font-weight: 500; border-radius: .7rem; padding: .5rem .9rem !important; }
.qa-navbar .nav-link:hover, .qa-navbar .nav-link.active { color: #fff; background: var(--qa-surface-strong); }

.brand-mark {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-grid; place-items: center;
    background: var(--qa-gradient);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 8px 24px -8px rgba(219, 39, 119, .8);
}
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.35rem; color: #fff; }

.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--qa-gradient);
    color: #fff; font-weight: 700; font-size: .85rem;
    flex-shrink: 0;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }

/* ---------- Glass cards ---------- */
.glass {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius);
    backdrop-filter: blur(14px);
}
.glass-strong { background: var(--qa-surface-strong); }

.card-hover { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-6px); border-color: rgba(167, 139, 250, .45); box-shadow: var(--qa-shadow); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 6rem 0 5rem; }
.hero .blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; z-index: -1;
    animation: float 14s ease-in-out infinite;
}
.hero .blob-1 { width: 420px; height: 420px; background: #7c3aed; top: -120px; left: -80px; }
.hero .blob-2 { width: 360px; height: 360px; background: #db2777; top: 40px; right: -100px; animation-delay: -4s; }
.hero .blob-3 { width: 300px; height: 300px; background: #f59e0b; bottom: -140px; left: 40%; opacity: .3; animation-delay: -8s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.06); }
    66% { transform: translate(-20px, 20px) scale(.96); }
}

.hero-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; line-height: 1.05; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .9rem .4rem .45rem;
    border-radius: 999px;
    background: var(--qa-surface-strong);
    border: 1px solid var(--qa-border);
    font-size: .875rem; color: #e9e7ff;
}
.hero-badge .pill { background: var(--qa-gradient); border-radius: 999px; padding: .15rem .6rem; font-weight: 700; font-size: .75rem; }

.trophy-stage { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; }
.trophy-stage .ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .15);
    animation: spin 40s linear infinite;
}
.trophy-stage .ring-2 { inset: 12%; animation-duration: 28s; animation-direction: reverse; border-style: solid; border-color: rgba(124, 58, 237, .25); }
.trophy-stage .core {
    position: absolute; inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(253, 230, 138, .35), rgba(124, 58, 237, .25) 60%, transparent 70%);
    display: grid; place-items: center;
}
.trophy-stage .core i { font-size: clamp(5rem, 12vw, 8rem); filter: drop-shadow(0 18px 40px rgba(245, 158, 11, .55)); }
.trophy-stage .orbit {
    position: absolute; padding: .6rem .9rem; border-radius: 1rem;
    background: rgba(15, 13, 43, .85); border: 1px solid var(--qa-border);
    backdrop-filter: blur(10px); font-size: .85rem; white-space: nowrap;
    animation: float 9s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Stats ---------- */
.stat-tile { padding: 1.5rem; text-align: center; }
.stat-tile .value { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; }

/* ---------- Section headings ---------- */
.section { padding: 5rem 0; }
.eyebrow {
    text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 700;
    color: #c4b5fd;
}

/* ---------- Quiz cards ---------- */
.quiz-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.quiz-card .banner { position: relative; aspect-ratio: 16 / 8; background: var(--qa-gradient-soft); overflow: hidden; }
.quiz-card .banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.quiz-card:hover .banner img { transform: scale(1.06); }
.quiz-card .banner .placeholder-icon {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 4rem; color: rgba(255, 255, 255, .25);
}
.quiz-card .banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7, 6, 26, .9));
}
.quiz-card .banner .badges { position: absolute; top: .9rem; left: .9rem; right: .9rem; z-index: 2; display: flex; justify-content: space-between; }
.quiz-card .fee-tag {
    position: absolute; bottom: .9rem; right: .9rem; z-index: 2;
    background: rgba(7, 6, 26, .75); border: 1px solid var(--qa-border);
    border-radius: .75rem; padding: .3rem .75rem; font-weight: 700;
}
.quiz-card .meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--qa-text-muted); }
.quiz-card .prize-strip {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .85rem; border-radius: .9rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .03));
    border: 1px solid rgba(245, 158, 11, .2);
    font-size: .875rem;
}

.badge-phase { border-radius: 999px; padding: .4rem .75rem; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.badge-live { background: rgba(239, 68, 68, .9); color: #fff; }
.badge-live::before {
    content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
    background: #fff; margin-right: .4rem; animation: pulse 1.4s infinite;
}
.badge-upcoming { background: rgba(6, 182, 212, .85); color: #fff; }
.badge-completed { background: rgba(100, 116, 139, .85); color: #fff; }
.badge-soft { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid var(--qa-border); }
.badge-board { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }

/* Board exams browser */
.filter-step { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: .85rem; }
.filter-step span {
    width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center;
    background: var(--qa-gradient); font-size: .8rem;
}
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
.board-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem 1.1rem;
    color: #fff; text-decoration: none; transition: border-color .2s, background .2s;
}
.board-tile .board-icon {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .35rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, .25), rgba(99, 102, 241, .25)); color: #7dd3fc;
}
.board-tile:hover { color: #fff; }
.board-tile.active { border-color: rgba(14, 165, 233, .7); background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(99, 102, 241, .14)); }
.class-pill {
    min-width: 64px; padding: .55rem .7rem; border-radius: 14px; text-align: center; text-decoration: none;
    color: #fff; font-weight: 700; font-size: 1.1rem; background: var(--qa-surface); border: 1px solid var(--qa-border);
    transition: transform .15s, border-color .2s, background .2s;
}
.class-pill small { display: block; font-size: .62rem; font-weight: 500; color: var(--qa-text-muted); margin-top: .2rem; }
.class-pill:hover { color: #fff; transform: translateY(-2px); border-color: rgba(255, 255, 255, .25); }
.class-pill.is-empty { opacity: .45; }
.class-pill.active { background: var(--qa-gradient); border-color: transparent; opacity: 1; }
.class-pill.active small { color: rgba(255, 255, 255, .85); }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ---------- Countdown ---------- */
.countdown { display: inline-flex; gap: .45rem; }
.countdown .unit {
    min-width: 3.2rem; text-align: center; padding: .45rem .35rem; border-radius: .75rem;
    background: var(--qa-surface-strong); border: 1px solid var(--qa-border);
}
.countdown .unit b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; line-height: 1.1; }
.countdown .unit small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qa-text-muted); }
.countdown-lg .unit { min-width: 4.4rem; padding: .7rem .5rem; }
.countdown-lg .unit b { font-size: 1.9rem; }

/* ---------- Prize list ---------- */
.prize-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1rem; border-radius: 1rem;
    background: var(--qa-surface); border: 1px solid var(--qa-border);
}
.prize-row + .prize-row { margin-top: .6rem; }
.medal {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    font-weight: 800; color: #1f1300; flex-shrink: 0; font-size: 1.1rem;
}
.medal-1 { background: var(--qa-gold); box-shadow: 0 8px 24px -8px rgba(245, 158, 11, .8); }
.medal-2 { background: var(--qa-silver); }
.medal-3 { background: var(--qa-bronze); color: #fff; }
.medal-gift { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }

/* ---------- Steps ---------- */
.step-card { padding: 2rem; position: relative; height: 100%; }
.step-card .step-icon {
    width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
    background: var(--qa-gradient-soft); border: 1px solid rgba(167, 139, 250, .3);
    font-size: 1.5rem; color: #e9d5ff; margin-bottom: 1.25rem;
}
.step-card .step-no {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 700;
    color: rgba(255, 255, 255, .05);
}

/* ---------- Feature list ---------- */
.feature-icon {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(16, 185, 129, .12); color: #34d399; font-size: 1.2rem;
}

/* ---------- Podium ---------- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; }
.podium-col { flex: 1; max-width: 220px; text-align: center; }
.podium-block {
    border-radius: 1.25rem 1.25rem .5rem .5rem; padding: 1.25rem .75rem;
    border: 1px solid var(--qa-border);
}
.podium-1 .podium-block { height: 200px; background: linear-gradient(180deg, rgba(245, 158, 11, .35), rgba(245, 158, 11, .05)); }
.podium-2 .podium-block { height: 160px; background: linear-gradient(180deg, rgba(148, 163, 184, .35), rgba(148, 163, 184, .05)); }
.podium-3 .podium-block { height: 130px; background: linear-gradient(180deg, rgba(234, 88, 12, .35), rgba(234, 88, 12, .05)); }
.podium .crown { font-size: 2rem; color: #fbbf24; filter: drop-shadow(0 6px 16px rgba(245, 158, 11, .6)); }

/* ---------- Tables ---------- */
.table-glass { --bs-table-bg: transparent; --bs-table-border-color: var(--qa-border); margin: 0; }
.table-glass th { color: var(--qa-text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.table-glass td, .table-glass th { padding: .9rem 1rem; vertical-align: middle; }
.table-glass tr.is-me td { background: rgba(124, 58, 237, .14); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--qa-border);
    border-radius: .85rem;
    padding: .75rem 1rem;
    color: #fff;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, .06);
    border-color: #a78bfa;
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25);
    color: #fff;
}
.form-control::placeholder { color: #6f6d92; }
.input-group-text { background: rgba(255, 255, 255, .04); border-color: var(--qa-border); border-radius: .85rem; color: var(--qa-text-muted); }
.form-check-input:checked { background-color: var(--qa-violet); border-color: var(--qa-violet); }

.auth-wrapper { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 3rem 0; }
.auth-card { width: 100%; max-width: 480px; padding: 2.5rem; }

/* ---------- Filter pills ---------- */
.filter-pills .btn { border-radius: 999px; padding: .45rem 1.1rem; }
.filter-pills .btn.active { background: var(--qa-gradient); border-color: transparent; color: #fff; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-bg: var(--qa-surface); --bs-pagination-border-color: var(--qa-border); --bs-pagination-color: #ddd; --bs-pagination-active-bg: var(--qa-violet); --bs-pagination-active-border-color: var(--qa-violet); --bs-pagination-hover-bg: var(--qa-surface-strong); --bs-pagination-disabled-bg: transparent; }

/* ---------- Accordion ---------- */
.accordion-glass .accordion-item { background: var(--qa-surface); border: 1px solid var(--qa-border); border-radius: 1rem !important; overflow: hidden; }
.accordion-glass .accordion-item + .accordion-item { margin-top: .75rem; }
.accordion-glass .accordion-button { background: transparent; color: #fff; font-weight: 600; padding: 1.15rem 1.35rem; box-shadow: none; }
.accordion-glass .accordion-button:not(.collapsed) { background: var(--qa-surface-strong); }

/* ---------- CTA ---------- */
.cta-panel { position: relative; overflow: hidden; padding: 3.5rem; border-radius: 2rem; background: var(--qa-gradient); }
.cta-panel::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px 300px at 90% 10%, rgba(255, 255, 255, .25), transparent 60%);
}

/* ---------- Toasts ---------- */
.toast-container { z-index: 1090; }
.toast { background: rgba(15, 13, 43, .95); border: 1px solid var(--qa-border); border-radius: 1rem; backdrop-filter: blur(10px); }

/* ---------- Footer ---------- */
.qa-footer { border-top: 1px solid var(--qa-border); background: rgba(7, 6, 26, .6); }
.qa-footer a { color: var(--qa-text-muted); text-decoration: none; }
.qa-footer a:hover { color: #fff; }

/* ---------- Misc ---------- */
.icon-chip {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: var(--qa-surface-strong); border: 1px solid var(--qa-border); font-size: 1.15rem; flex-shrink: 0;
}
.divider-dot::before { content: '•'; margin: 0 .5rem; opacity: .5; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
.empty-state { padding: 4rem 1rem; text-align: center; }
.empty-state i { font-size: 3rem; color: rgba(255, 255, 255, .2); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}