/**
 * LOBBYNITE - Cinematic site-wide skin
 * Visual-only layer: shared public pages, content, forms and data views.
 */

:root {
    --cinematic-ink: #020617;
    --cinematic-panel: rgba(5, 11, 30, 0.88);
    --cinematic-panel-strong: rgba(3, 8, 24, 0.96);
    --cinematic-line: rgba(80, 207, 255, 0.23);
    --cinematic-line-hot: rgba(177, 73, 255, 0.45);
    --cinematic-cyan: #31dcff;
    --cinematic-blue: #2877ff;
    --cinematic-violet: #8b4dff;
    --cinematic-magenta: #e13cff;
    --cinematic-copy: #d5e2f5;
    --cinematic-muted: #8fa3bf;
    --cinematic-radius: 18px;
    --cinematic-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), 0 0 18px rgba(40, 119, 255, 0.06);
}

html {
    background: var(--cinematic-ink);
    scrollbar-color: rgba(49, 220, 255, 0.58) rgba(2, 6, 23, 0.9);
}

body {
    isolation: isolate;
    background: var(--cinematic-ink);
    color: var(--cinematic-copy);
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(1, 5, 18, 0.74), rgba(2, 6, 23, 0.9)),
        radial-gradient(circle at 12% 18%, rgba(31, 192, 255, 0.15), transparent 34%),
        radial-gradient(circle at 88% 24%, rgba(166, 56, 255, 0.16), transparent 35%),
        linear-gradient(rgba(49, 220, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 220, 255, 0.018) 1px, transparent 1px),
        url('../images/auth-cinematic-v2.png') center / cover no-repeat;
    background-size: cover, cover, cover, 52px 52px, 52px 52px, cover;
    contain: strict;
    pointer-events: none;
    content: '';
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

::selection {
    background: var(--cinematic-magenta);
    color: #fff;
}

/* Shared frame */
.main-content {
    position: relative;
    z-index: 1;
    padding-top: clamp(1.35rem, 3vw, 2.75rem);
    padding-bottom: clamp(3.25rem, 7vw, 6rem);
}

/* Full-bleed showcases own the complete content area. Removing the shared
   page padding prevents a second copy of the backdrop from peeking through
   as a horizontal strip below the creator banner. */
.main-content:has(.auth-cinematic-page),
.main-content:has(.set-locker-page) {
    padding-top: 0;
    padding-bottom: 0;
}

/* Login uses the same artwork as the site shell: keep one continuous image
   and let its page overlay provide the focused, darker reading area. */
body .auth-cinematic-page {
    background: transparent;
}

body .auth-cinematic-page::before {
    background: transparent;
    filter: none;
}

.main-content > .container,
.main-content > section > .container,
.main-content > div > .container {
    position: relative;
}

.container {
    width: min(100% - 2rem, var(--container-max));
    padding-inline: 0;
}

/* Typography */
h1,
h2,
h3,
.page-title,
.section-title,
.hero-title,
.card-title,
.empty-state-title {
    font-family: 'Outfit', 'Poppins', sans-serif;
    font-weight: 700;
    text-wrap: balance;
}

h1,
.page-title,
.hero-title {
    color: #f8fbff;
    letter-spacing: -0.035em;
    text-shadow: 0 0 30px rgba(53, 189, 255, 0.14);
}

h1 {
    font-size: clamp(2.15rem, 5vw, 4.55rem);
    line-height: 0.98;
}

h2,
.section-title {
    color: #eef6ff;
    letter-spacing: -0.02em;
}

/* Shared section headings: plain text, including page-specific variants. */
.section-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(1.35rem, 2.5vw, 2rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--text-primary, #eef6ff) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

p,
.text-secondary,
.card-text {
    color: var(--cinematic-copy);
}

.text-muted,
small,
.field-help,
.form-text {
    color: var(--cinematic-muted) !important;
}

/* Generic page intros and heroes */
:where(.page-header, .section-header, .hero, .dashboard-header, .profile-header, .content-header) {
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(1.35rem, 3vw, 2.4rem);
    border: 1px solid var(--cinematic-line);
    border-radius: clamp(20px, 3vw, 30px);
    background:
        radial-gradient(circle at 82% 20%, rgba(157, 66, 255, 0.2), transparent 32%),
        radial-gradient(circle at 12% 75%, rgba(49, 220, 255, 0.14), transparent 33%),
        linear-gradient(145deg, rgba(9, 20, 48, 0.96), rgba(3, 8, 24, 0.93));
    box-shadow: var(--cinematic-shadow);
}

:where(.page-header, .section-header, .dashboard-header, .content-header) {
    padding: clamp(1.4rem, 4vw, 3.4rem);
}

:where(.page-header, .section-header, .hero, .dashboard-header, .profile-header, .content-header)::after {
    position: absolute;
    right: -90px;
    bottom: -115px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(49, 220, 255, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 36px rgba(139, 77, 255, 0.035), 0 0 0 76px rgba(49, 220, 255, 0.025);
    content: '';
    pointer-events: none;
}

/* Cards and surfaces */
:where(.card, .info-card, .stat-card, .rules-card, .filter-card, .form-card, .panel, .widget, .empty-state, .language-card) {
    border: 1px solid var(--cinematic-line);
    border-radius: var(--cinematic-radius);
    background:
        linear-gradient(145deg, rgba(11, 24, 53, 0.91), rgba(3, 9, 26, 0.94));
    box-shadow: var(--cinematic-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:where(.card, .info-card, .stat-card, .rules-card, .widget) {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
    :where(.card, .info-card, .stat-card, .rules-card, .widget):hover {
        border-color: rgba(49, 220, 255, 0.43);
        box-shadow: var(--cinematic-shadow), 0 0 28px rgba(49, 220, 255, 0.09);
        transform: translateY(-2px);
    }
}

.card-header,
.card-footer,
.panel-header,
.modal-header,
.modal-footer {
    border-color: rgba(115, 185, 255, 0.16) !important;
    background: rgba(2, 7, 22, 0.38);
}

.card-header:first-child {
    border-radius: calc(var(--cinematic-radius) - 1px) calc(var(--cinematic-radius) - 1px) 0 0;
}

.card-body,
.info-card,
.rules-card,
.stat-card {
    color: var(--cinematic-copy);
}

/* Buttons */
.btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.025em;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, filter 160ms ease;
}

.btn-primary,
.btn-info {
    border: 1px solid rgba(75, 229, 255, 0.72) !important;
    background: linear-gradient(135deg, #068ff2, #3167ed 56%, #7359f7) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(49, 220, 255, 0.12), 0 12px 30px rgba(28, 119, 255, 0.3), 0 0 24px rgba(49, 220, 255, 0.14);
}

.btn-secondary {
    border: 1px solid rgba(229, 78, 255, 0.66) !important;
    background: linear-gradient(135deg, #642fe0, #a72adf 62%, #e034d2) !important;
    color: #fff !important;
}

.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-ghost {
    border: 1px solid rgba(49, 220, 255, 0.48) !important;
    background: rgba(5, 14, 37, 0.78) !important;
    color: #bdefff !important;
}

.btn-success {
    border: 1px solid rgba(60, 255, 177, 0.55) !important;
    background: linear-gradient(135deg, #078d70, #08b98d) !important;
    color: #fff !important;
}

.btn-danger {
    border: 1px solid rgba(255, 103, 137, 0.58) !important;
    background: linear-gradient(135deg, #bb2850, #ec3c67) !important;
    color: #fff !important;
}

@media (hover: hover) {
    .btn:hover {
        filter: brightness(1.1) saturate(1.08);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), 0 0 27px rgba(49, 220, 255, 0.18);
        transform: translateY(-2px);
    }
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(49, 220, 255, 0.72);
    outline-offset: 3px;
}

/* Forms */
.form-label,
label {
    color: #e8f2ff;
    font-weight: 700;
}

:where(.form-control, .form-select, .filter-select, input:not([type='checkbox']):not([type='radio']):not([type='range']), textarea, select) {
    min-height: 46px;
    border: 1px solid rgba(110, 164, 230, 0.28) !important;
    border-radius: 11px !important;
    background: rgba(2, 8, 25, 0.84) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

textarea {
    min-height: 120px;
}

:where(.form-control, .form-select, .filter-select, input, textarea, select):focus {
    border-color: rgba(49, 220, 255, 0.72) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 220, 255, 0.12), 0 0 24px rgba(49, 220, 255, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: #71839f !important;
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--cinematic-cyan);
}

/* Tables and data lists */
.table-responsive {
    overflow: auto;
    border: 1px solid var(--cinematic-line);
    border-radius: var(--cinematic-radius);
    background: rgba(3, 9, 27, 0.9);
    box-shadow: var(--cinematic-shadow);
}

table,
.table {
    border-color: rgba(111, 164, 225, 0.16) !important;
    color: var(--cinematic-copy) !important;
}

thead,
.table thead {
    background: linear-gradient(90deg, rgba(26, 72, 137, 0.42), rgba(86, 36, 135, 0.36));
}

th {
    color: #dff7ff !important;
    font-family: 'Outfit', 'Poppins', sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

td,
th {
    border-color: rgba(111, 164, 225, 0.14) !important;
}

tbody tr {
    transition: background-color 150ms ease;
}

tbody tr:hover {
    background: rgba(49, 220, 255, 0.055) !important;
}

/* Tabs, filters and pagination */
:where(.tabs, .nav-tabs, .filter-tabs, .info-nav, .category-pills) {
    gap: 0.55rem;
    border-color: rgba(98, 171, 230, 0.18) !important;
}

:where(.tab-btn, .nav-link, .filter-tab, .info-nav-pill, .category-pill) {
    border: 1px solid rgba(97, 165, 226, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(4, 12, 32, 0.78) !important;
    color: #9db4d2 !important;
    font-weight: 700;
}

:where(.tab-btn, .nav-link, .filter-tab, .info-nav-pill, .category-pill):is(.active, [aria-selected='true']),
:where(.tab-btn, .nav-link, .filter-tab, .info-nav-pill, .category-pill):hover {
    border-color: rgba(49, 220, 255, 0.55) !important;
    background: linear-gradient(135deg, rgba(11, 136, 230, 0.4), rgba(117, 53, 213, 0.43)) !important;
    color: #fff !important;
    box-shadow: 0 0 19px rgba(49, 220, 255, 0.1);
}

.pagination {
    gap: 0.35rem;
}

.page-link {
    border: 1px solid rgba(93, 168, 231, 0.26) !important;
    border-radius: 9px !important;
    background: rgba(4, 12, 32, 0.88) !important;
    color: #bdefff !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #068ff2, #7b42ee) !important;
}

/* Feedback, badges and progress */
.alert {
    border: 1px solid rgba(99, 177, 235, 0.28);
    border-radius: 14px;
    background: rgba(5, 14, 37, 0.92);
    color: #dcecff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.alert-success {
    border-color: rgba(44, 238, 168, 0.36);
    background: rgba(5, 54, 47, 0.82);
}

.alert-danger,
.alert-error {
    border-color: rgba(255, 91, 131, 0.4);
    background: rgba(67, 13, 35, 0.82);
}

.alert-warning {
    border-color: rgba(255, 193, 73, 0.42);
    background: rgba(63, 43, 8, 0.84);
}

.badge {
    border: 1px solid rgba(119, 185, 235, 0.24);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(49, 220, 255, 0.06);
}

.progress {
    overflow: hidden;
    border: 1px solid rgba(91, 166, 225, 0.2);
    border-radius: 999px;
    background: rgba(1, 6, 19, 0.82);
}

.progress-bar {
    background: linear-gradient(90deg, var(--cinematic-cyan), var(--cinematic-violet), var(--cinematic-magenta));
    box-shadow: 0 0 18px rgba(49, 220, 255, 0.3);
}

/* Dialogs and dropdown content */
.modal-content,
.dropdown-menu,
.popover {
    border: 1px solid var(--cinematic-line) !important;
    border-radius: 16px !important;
    background: rgba(3, 9, 27, 0.97) !important;
    color: var(--cinematic-copy) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 35px rgba(49, 220, 255, 0.08) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.dropdown-item {
    border-radius: 9px;
    color: #c7d7ec !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: linear-gradient(90deg, rgba(21, 129, 221, 0.2), rgba(115, 52, 199, 0.18)) !important;
    color: #fff !important;
}

/* Team and Creator navigation */
.nav-dropdown--affiliations .dropdown-menu--affiliations {
    width: 320px;
    min-width: 280px;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    padding: 12px;
}
.dropdown-menu--affiliations .dropdown-section-label {
    padding: 8px 10px 12px;
    color: #8fa6c5;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dropdown-menu--affiliations .dropdown-item {
    min-height: 60px;
    gap: 12px;
    padding: 10px;
    border: 1px solid transparent;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.4;
}
.dropdown-menu--affiliations .dropdown-item + .dropdown-item { margin-top: 4px; }
.dropdown-menu--affiliations .dropdown-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(99, 170, 234, .18);
    border-radius: 11px;
    background: rgba(40, 100, 158, .16);
    font-size: 1.1rem;
}
.dropdown-menu--affiliations .dropdown-item-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dropdown-menu--affiliations .dropdown-item::after {
    content: '›';
    margin-left: auto;
    color: #86accf;
    font-size: 1.4rem;
    line-height: 1;
}
.dropdown-menu--affiliations .dropdown-item:hover,
.dropdown-menu--affiliations .dropdown-item:focus-visible { border-color: rgba(49, 220, 255, .3); }
.dropdown-menu--affiliations .dropdown-item:focus-visible { outline: 2px solid #6de3ff; outline-offset: -2px; }
.dropdown-menu--affiliations .dropdown-divider { margin: 12px 10px 4px; }
.nav-dropdown--affiliations > .dropdown-toggle:focus-visible { outline: 2px solid #6de3ff; outline-offset: 3px; }

/* Empty and loading states */
.empty-state {
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    place-items: center;
    border: 1px solid rgba(49, 220, 255, 0.34);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 133, 218, 0.22), rgba(132, 52, 209, 0.2));
    color: var(--cinematic-cyan);
    box-shadow: 0 0 27px rgba(49, 220, 255, 0.1);
}

.spinner,
.loading-spinner {
    color: var(--cinematic-cyan);
}

/* Header and footer integration */
.navbar,
.site-header {
    border-bottom-color: rgba(49, 220, 255, 0.17) !important;
    background: rgba(2, 7, 23, 0.91) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(127, 56, 255, 0.13) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(49, 220, 255, 0.14);
    background:
        radial-gradient(circle at 50% -30%, rgba(78, 67, 214, 0.12), transparent 42%),
        #030718 !important;
}

.footer-col h2 {
    color: #e6f6ff;
    font-family: 'Outfit', 'Poppins', sans-serif;
}

.footer a:hover {
    color: var(--cinematic-cyan);
    text-shadow: 0 0 13px rgba(49, 220, 255, 0.24);
}

/* Preserve the custom showcase pages as the strongest compositions. */
.set-locker-cinematic,
.auth-cinematic-page {
    isolation: isolate;
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 1rem, var(--container-max));
    }

    h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    :where(.page-header, .section-header, .dashboard-header, .content-header) {
        padding: 1.25rem;
        border-radius: 18px;
    }

    :where(.card, .info-card, .stat-card, .rules-card, .filter-card, .form-card, .panel, .widget, .empty-state) {
        border-radius: 14px;
    }

    .btn {
        min-height: 46px;
    }

    .table-responsive {
        border-radius: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}