/* HellRaiser eSports Platform Styles */

/* CSS Variables */
:root {
    --hellraiser-red: #dc2626;
    --hellraiser-red-light: #ef4444;
    --hellraiser-red-dark: #b91c1c;
    --hellraiser-gold: #f59e0b;
    --hellraiser-black: #0f0f0f;
    --hellraiser-dark: #1a1a1a;
    --hellraiser-gray: #2a2a2a;
    --text-white: #ffffff;
    --text-gray: #9ca3af;
    --text-light: #f3f4f6;
    
    --gradient-primary: linear-gradient(135deg, var(--hellraiser-red) 0%, var(--hellraiser-red-light) 50%, var(--hellraiser-gold) 100%);
    --gradient-red: linear-gradient(135deg, var(--hellraiser-red-dark) 0%, var(--hellraiser-red) 100%);
    --shadow-card: 0 4px 12px rgba(220, 38, 38, 0.15);
    --shadow-button: 0 2px 8px rgba(220, 38, 38, 0.25);
    
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
    --border-radius: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background: #0f0f0f;
    position: relative;
    overflow-x: hidden;
    color: var(--text-white);
    line-height: 1.7;
}

/* Force dark themed native dropdown controls site-wide */
html {
    color-scheme: dark;
}

select,
select option,
select optgroup {
    background-color: #141419 !important;
    color: #f3f4f6 !important;
}

select:focus,
select:hover {
    background-color: #141419 !important;
}

select option:checked,
select option:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(245, 158, 11, 0.28)) !important;
    color: #ffffff !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--hellraiser-black);
}

::-webkit-scrollbar-thumb {
    background: var(--hellraiser-red);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hellraiser-gold);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--hellraiser-red);
    box-shadow: 0 2px 20px rgba(220, 38, 38, 0.3);
    z-index: 1000;
    padding: 0.4rem 0;
}

.nav-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 0.5rem;
    gap: 0.75rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.brand-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    transition: var(--transition);
    filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.3));
}

.brand-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(220, 38, 38, 0.5));
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.brand-subtitle {
    font-size: 0.6rem;
    color: var(--text-gray);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
}

.nav-link {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: var(--hellraiser-red-light);
    background: rgba(220, 38, 38, 0.15);
}

/* Chat unread badge in navbar */
.chat-nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(220,38,38,0.4);
    animation: chatBadgePulse 2s ease-in-out infinite;
}

.nav-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
    color: #fcd34d;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: middle;
}

@keyframes chatBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.nav-toggle {
    display: none;
    color: var(--text-white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Nav Features */
.nav-features {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Dropdown Menus */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .nav-link i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-link i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 0.5rem;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    text-decoration: none;
    transition: background 0.3s ease;
    border-radius: 6px;
    margin: 0.25rem;
}

.dropdown-menu a:hover {
    background: rgba(220, 38, 38, 0.2);
    color: var(--hellraiser-red-light);
}

/* Live Status - Default (Inactive) */
.live-status {
    display: flex; /* Always visible */
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(60, 60, 60, 0.3);
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-radius: 20px;
    transition: all 0.3s ease;
    opacity: 0.6;
}

/* Live Status - Active (20:00-22:30 Romania Time) */
.live-status.active-live {
    display: flex !important;
    background: rgba(220, 38, 38, 0.3);
    border: 1px solid #dc2626;
    box-shadow: 
        0 0 20px rgba(220, 38, 38, 0.5),
        0 0 40px rgba(220, 38, 38, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: rgba(120, 120, 120, 0.8);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.live-status.active-live .live-dot {
    background: #dc2626;
    box-shadow: 0 0 10px #dc2626;
}

.live-text {
    color: rgba(160, 160, 160, 0.8);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.live-status.active-live .live-text {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.8);
}



/* Tournament Live Status */
.tournament-live-status {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    align-self: flex-start;
}

/* Language Selector */
.language-selector {
    position: relative;
    cursor: pointer;
}

.current-lang {
    font-size: 1.2rem;
    padding: 0.5rem;
    transition: transform 0.3s ease;
}

.current-lang:hover {
    transform: scale(1.1);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-width: 100px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.language-selector:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-white);
    text-decoration: none;
    transition: background 0.3s ease;
}

.lang-dropdown a:hover {
    background: rgba(220, 38, 38, 0.2);
}

/* Social Media Icons */
.nav-social {
    display: flex;
    gap: 1rem;
}

.nav-social a {
    color: var(--text-gray);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 50%;
}

.nav-social a:hover {
    color: var(--hellraiser-red-light);
    background: rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

/* Toast notifications */
.ecel-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 10000;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 90vw;
}
.ecel-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.ecel-toast i {
    font-size: 1.1rem;
    color: #f59e0b;
}

/* Notifications */
.nav-notifications {
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-gray);
    transition: color 0.3s ease;
}

.nav-notifications:hover {
    color: var(--text-white);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 1.2rem;
    text-align: center;
}

/* CTA Button */
.cta-button-nav {
    background: linear-gradient(135deg, #dc2626 0%, #fbbf24 100%);
    color: white;
    padding: 0.45rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    white-space: nowrap;
}

.cta-button-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5);
}

/* User Profile */
.user-profile {
    position: relative;
    cursor: pointer;
}

.user-profile__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    border-radius: 50px;
    border: 0;
    background: transparent;
    transition: all 0.25s ease;
}
.user-profile:hover .user-profile__trigger {
    background: rgba(220,38,38,0.08);
    border-color: transparent;
}

.user-profile__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.user-profile__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
}
.user-profile__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,38,38,0.2);
    color: #dc2626;
    font-weight: 800;
    font-size: 0.8rem;
}
.user-profile__vip-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 3px rgba(245,158,11,0.7));
}

.user-profile__chevron {
    font-size: 0.6rem;
    color: #666;
    transition: transform 0.25s ease, color 0.25s ease;
}
.user-profile:hover .user-profile__chevron {
    color: #dc2626;
    transform: rotate(180deg);
}

.user-profile:hover {
    /* keep for compatibility, no extra bg needed */
}

.username {
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.82rem;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verified-badge-nav {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Profile Dropdown ── */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #111114;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    z-index: 1000;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(220,38,38,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.user-profile:hover .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Header */
.pd-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
    background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(245,158,11,0.05) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pd-header__avatar-wrap {
    flex-shrink: 0;
}
.pd-header__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(220,38,38,0.4);
    box-shadow: 0 0 16px rgba(220,38,38,0.15);
}
.pd-header__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,38,38,0.15);
    color: #dc2626;
    font-weight: 800;
    font-size: 1.1rem;
}
.pd-header__info {
    overflow: hidden;
}
.pd-header__name {
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.pd-header__vip {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pd-header__role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.pd-role {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pd-role--admin {
    background: rgba(220,38,38,0.15);
    color: #ef4444;
    border: 1px solid rgba(220,38,38,0.3);
}
.pd-role--captain {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.25);
}
.pd-role--player {
    background: rgba(99,102,241,0.1);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.2);
}
.pd-header__flag {
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Links */
.pd-links {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pd-links--admin {
    background: rgba(220,38,38,0.04);
}
.pd-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    color: #bbb;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.pd-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.pd-link i {
    width: 16px;
    text-align: center;
    font-size: 0.82rem;
    color: #555;
    transition: color 0.2s ease;
}
.pd-link:hover i {
    color: #dc2626;
}
.pd-link--admin {
    color: #ef4444;
    font-weight: 600;
}
.pd-link--admin i {
    color: #ef4444;
}
.pd-link--admin:hover {
    background: rgba(220,38,38,0.1);
    color: #f87171;
}

/* Footer */
.pd-footer {
    padding: 0.4rem 0.5rem;
}
.pd-link--logout {
    color: #666;
}
.pd-link--logout:hover {
    color: #ef4444;
    background: rgba(220,38,38,0.08);
}
.pd-link--logout:hover i {
    color: #ef4444;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding-top: 5rem;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
}

.mobile-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.3s ease;
}

.mobile-link:hover {
    color: var(--hellraiser-red-light);
}

.mobile-link--coming-soon {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav-coming-soon-badge--mobile {
    margin-left: 0;
}

.mobile-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--hellraiser-red);
    padding: 0.5rem 0 0;
    margin-top: 0.5rem;
    border-bottom: none;
}

.mobile-features {
    margin-top: 2rem;
    text-align: center;
}

.mobile-social {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.mobile-social a {
    color: var(--text-gray);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

/* Navbar language selector */
.language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.current-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.lang-dropdown {
    position: absolute;
    top: 125%;
    right: 0;
    background: #141419;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 0.5rem;
    display: none;
    z-index: 20;
    min-width: 160px;
}

.language-selector:hover .lang-dropdown {
    display: block;
}

.lang-option {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lang-option.active,
.lang-option:hover {
    background: rgba(255, 60, 60, 0.12);
}

.nav-notifications {
    position: relative;
}

.notifications-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    position: relative;
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #ff3c3c;
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.notifications-dropdown {
    position: absolute;
    top: 130%;
    right: 0;
    width: 300px;
    background: #141419;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
    display: none;
    z-index: 30;
    overflow: hidden;
}

.notifications-dropdown.open {
    display: block;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .8rem;
    font-weight: 600;
    color: #e5e7eb;
}

.notif-dropdown-header .mark-all-read {
    margin: 0;
    width: auto;
    background: none;
    color: #ef4444;
    border: none;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: .3rem 0;
    max-height: 260px;
    overflow-y: auto;
}

.notification-item {
    padding: .5rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background .15s;
}

.notification-item:hover {
    background: rgba(255,255,255,.04);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.unread .notification-message {
    color: #fff;
    font-weight: 600;
}

.notification-item.unread {
    border-left: 3px solid #ef4444;
}

.notification-item.read .notification-message {
    color: #9ca3af;
}

.notification-meta {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: .15rem;
}

.notification-empty {
    color: #6b7280;
    text-align: center;
    padding: 1.4rem 0;
    font-size: .85rem;
}

.notif-see-all {
    display: block;
    text-align: center;
    padding: .6rem;
    font-size: .78rem;
    color: #ef4444;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.07);
    font-weight: 500;
    transition: background .15s;
}

.notif-see-all:hover {
    background: rgba(239,68,68,.07);
}

.mobile-social a:hover {
    color: var(--hellraiser-red-light);
}

.mobile-cta {
    background: linear-gradient(135deg, #dc2626 0%, #fbbf24 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.mobile-cta:hover {
    transform: translateY(-2px);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 12rem 2rem 4rem;
    overflow: hidden;
    /* Fallback background când video-ul nu se încarcă */
    background: 
        radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(185, 28, 28, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.1) 0%, transparent 70%),
        var(--hellraiser-black);
}

/* Video Background */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 1;
}

/* Video Overlay */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 49%, rgba(220, 38, 38, 0.05) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(185, 28, 28, 0.03) 50%, transparent 51%);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    max-width: 1200px;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 3;
}

.hero-title {
    margin-bottom: 1.5rem;
}

.title-main {
    display: block;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    font-family: 'Exo 2', 'Rajdhani', 'Impact', 'Arial Black', sans-serif;
    font-style: italic;
    background: linear-gradient(135deg, #ffffff 0%, #ff0000 25%, #dc2626 50%, #ffffff 75%, #ff4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 12px rgba(255, 0, 0, 0.6);
    line-height: 0.85;
    text-transform: uppercase;
    transform: skewX(-5deg);
}

.title-sub {
    display: block;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-family: 'Exo 2', 'Rajdhani', 'Impact', 'Arial Black', sans-serif;
    font-style: italic;
    background: linear-gradient(135deg, #ff4444 0%, #ffffff 30%, #dc2626 60%, #ff0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    text-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
    transform: skewX(-3deg);
}

.hero-subtitle {
    font-size: 1.2rem;
    font-family: 'Rajdhani', 'Exo 2', 'Arial', sans-serif;
    font-weight: 600;
    background: linear-gradient(90deg, #ffffff 0%, #ff9999 20%, #ffffff 40%, #ff6666 60%, #ffffff 80%, #ff4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: textShimmer 3s ease-in-out infinite;
    margin-bottom: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.3);
}

@keyframes textShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}



.hero-description {
    font-size: clamp(1.18rem, 2.7vw, 1.72rem);
    color: #ffffff;
    margin-bottom: 2.4rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(12, 15, 25, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}

.hero-description-highlight {
    display: block;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 16px rgba(220, 38, 38, 0.38);
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Stats Section */
.stats-section {
    width: 100%;
    position: relative;
    z-index: 3;
}

.stats-container {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
}

.stat-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.8));
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--border-radius);
    padding: 2.25rem 1.75rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: var(--transition);
    box-shadow: var(--shadow-card);
}

.stat-card:hover {
    border-color: var(--hellraiser-red);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.4), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.stat-number {
    font-size: clamp(2.3rem, 5vw, 3.2rem);
    font-weight: 700;
    font-family: var(--font-heading);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    line-height: 1;
}

.stat-label {
    color: var(--text-gray);
    font-weight: 500;
    font-size: 0.9rem;
    font-family: var(--font-primary);
}

@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 1rem;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-white);
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--hellraiser-red-light);
    border: 2px solid var(--hellraiser-red);
}

.btn-secondary:hover {
    background: var(--hellraiser-red);
    color: var(--text-white);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

/* Share Card Button */
.btn-share-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #1a0a2e, #16213e);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-share-card:hover {
    background: linear-gradient(135deg, #2a1048, #1a2d55);
    border-color: #ffd700;
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}
.btn-share-card:active { transform: translateY(0); }
.btn-share-card.btn-loading {
    opacity: 0.6;
    pointer-events: none;
}
.btn-share-card.btn-loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid transparent;
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: spin-card-btn 0.6s linear infinite;
    margin-left: 0.3rem;
}
@keyframes spin-card-btn { to { transform: rotate(360deg); } }

/* Booyah variant — celebratory red→gold gradient for the 1st-place card button */
.btn-share-card--booyah {
    background: linear-gradient(135deg, #6a0d1a, #b8860b);
    color: #fff8d6;
    border-color: rgba(255, 210, 74, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(255, 46, 74, 0.25) inset,
                0 4px 14px rgba(255, 46, 74, 0.25);
}
.btn-share-card--booyah:hover {
    background: linear-gradient(135deg, #8a1226, #e0a610);
    border-color: #ffd24a;
    box-shadow: 0 4px 22px rgba(255, 210, 74, 0.45);
}
.btn-share-card--booyah i { color: #ffd24a; }

.btn-share-card--sm {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    min-width: auto;
    width: fit-content;
    max-width: fit-content;
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center;
    gap: 0.3rem;
}
@media (max-width: 720px) {
    .btn-share-card--sm {
        width: 26px;
        height: 26px;
        min-width: 26px;
        max-width: 26px;
        padding: 0;
        flex-shrink: 0;
        flex-grow: 0;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
    }
    .btn-share-card--sm span { display: none; }
    .btn-share-card--sm i { font-size: 0.68rem; margin: 0; }
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
}

/* Sections */
.features,
.tournament-section,
.cta-section {
    padding: 6rem 2rem;
}

.features-container,
.tournament-container,
.cta-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.2rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

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

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.8));
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-card);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--hellraiser-red);
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.3), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-red);
    border: 2px solid var(--hellraiser-red-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--text-white);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    position: relative;
}

.feature-card h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--hellraiser-red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.feature-card:hover h3::after {
    width: 80%;
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
    font-family: var(--font-primary);
}

/* Tournament Section */
.tournament-section {
    background: linear-gradient(135deg, var(--hellraiser-dark) 0%, var(--hellraiser-black) 100%);
}

.tournament-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(42, 42, 42, 0.8));
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--border-radius);
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.live-badge {
    display: inline-block;
    background: var(--hellraiser-red);
    color: var(--text-white);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.tournament-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    margin-bottom: 2rem;
    color: var(--text-white);
}

.tournament-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-light);
    font-size: 1.1rem;
    font-family: var(--font-primary);
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.detail-item:hover {
    color: var(--text-white);
    transform: translateX(5px);
}

.detail-item i {
    color: var(--hellraiser-gold);
    width: 20px;
}

.tournament-countdown {
    text-align: center;
}

.countdown-number {
    font-size: 4rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.countdown-label {
    color: var(--text-gray);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* CTA Section */
.cta-section {
    text-align: center;
}

.cta-container h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.cta-container p {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: var(--hellraiser-dark);
    border-top: 3px solid var(--hellraiser-red);
    padding: 3rem 0 1rem;
    box-shadow: 0 -4px 20px rgba(220, 38, 38, 0.2);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
}

.footer-brand img,
.footer-logo {
    height: 80px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
}

.footer-brand h3 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    color: var(--text-gray);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.footer-section h4 {
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: var(--text-gray);
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--hellraiser-red-light);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(220, 38, 38, 0.15);
    border: 2px solid rgba(220, 38, 38, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hellraiser-red);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--hellraiser-red);
    border-color: var(--hellraiser-red-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    color: var(--text-white);
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid rgba(220, 38, 38, 0.1);
    margin-top: 2rem;
    color: var(--text-gray);
}

/* Registration Section & Container */
.player-register-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,26,26,0.98);
  padding: 3rem 0 2rem 0;
}
.player-register-container {
  background: rgba(34,34,34,0.98);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 1.5px 8px var(--hellraiser-red-dark);
  padding: 2.5rem 2.2rem 2.2rem 2.2rem;
  max-width: 420px;
  width: 100%;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.register-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
  color: var(--hellraiser-red-light);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.form-group label {
  font-weight: 600;
  font-size: 1.08rem;
  margin-bottom: 0.2rem;
  color: var(--text-light);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select {
  background: #232323;
  color: #fff;
  border: 1.5px solid #444;
  border-radius: 7px;
  padding: 0.7rem 1rem;
  font-size: 1.08rem;
  font-family: var(--font-primary);
  outline: none;
  transition: border 0.2s;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus {
  border: 1.5px solid var(--hellraiser-red-light);
}
.form-group small {
  font-size: 0.93rem;
  margin-top: 0.1rem;
}
.form-error {
  color: #ff3c3c;
  background: #2a1818;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: 600;
}

/* --- ESPORTS PROFILE PUBLIC PAGE UPGRADE --- */
.profile-main {
    margin-top: 9.5rem !important;
}
.profile-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
}
.profile-container.social-profile {
    background: rgba(24,26,32,0.98);
    padding: 2.5rem 3.5rem;
    border-radius: 1.2rem;
    box-shadow: 0 2px 32px #000a, 0 0 0 4px #ffd70033;
    min-width: 420px;
    max-width: 700px;
    margin: 2rem auto;
    border: 2px solid #ffd700;
    position: relative;
    overflow: hidden;
}
.profile-card {
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.4);
    border: 2px solid #dc2626;
}
.profile-card::before {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border-radius: 1.7rem;
    background: transparent;
    opacity: 0;
    z-index: 0;
    filter: blur(6px);
}
.profile-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 7px;
    background: linear-gradient(90deg, #dc2626 0%, #ff3c00 100%);
    border-radius: 1.5rem 1.5rem 0 0;
    z-index: 2;
}
.profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 2.2rem;
    border-bottom: 2px solid #ffd70044;
    padding-bottom: 1.2rem;
}
.profile-avatar-large {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--hellraiser-red);
    margin-right: 2.2rem;
    box-shadow: 0 0 32px #dc262655;
    background: black;
    transition: none;
    animation: none;
}

/* Video Background - Profil */
.profile-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
}

.profile-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 1;
}

/* Video Overlay - Profil */
.profile-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

/* Texturi de fundal subtile pentru profil */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: url('/Images/icons8-tiktok-100.svg') repeat 0 0;
    opacity: 0.04;
    mix-blend-mode: lighten;
}

/* Profil - Layout organizat */
.profile-section.organized-profile {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3.5rem;
    max-width: 1400px;
    margin: 0 auto;
}
.profile-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-col-left {
    min-width: 340px;
    max-width: 340px;
    gap: 2.5rem;
}
.profile-col-main {
    flex: 1;
    min-width: 0;
    gap: 2.5rem;
    display: flex;
    flex-direction: column;
}
.profile-info-social.organized {
    align-items: center;
    text-align: center;
    margin-bottom: 2.2rem;
}
.profile-nickname {
    justify-content: center;
}
.profile-position {
    justify-content: center;
    margin-top: 1.2rem;
}
.profile-details-social.organized {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.profile-teams, .profile-trophies {
    flex: 1;
    background: #23243a;
    border-radius: 0.7rem;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 1px 8px #0004;
    border: 1.5px solid #dc262655;
    min-width: 220px;
}
.profile-media-gallery {
    margin-top: 2.5rem;
}
@media (max-width: 1100px) {
    .profile-section.organized-profile {
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
    }
    .profile-col-left, .profile-col-main {
        max-width: 100%;
        min-width: 0;
        align-items: center;
    }
    .profile-details-social.organized {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* Esports vibe & layout pentru profil public */
.profile-section.esports-vibe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: linear-gradient(120deg, #181a20 0%, #23243a 100%);
    min-height: 100vh;
}
.profile-banner {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    margin-bottom: -110px;
}
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
}
.banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.8;
}
.profile-card {
    background: rgba(24,26,32,0.98);
    border-radius: 1.5rem;
    box-shadow: 0 2px 16px #23243a55;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
    border: 2px solid #dc2626;
}
.profile-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-avatar-large {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #dc2626;
    box-shadow: none;
    background: #23243a;
    transition: none;
    animation: none;
}
.verified-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    color: #22d922;
    font-size: 2.2rem;
    filter: none;
    animation: none;
}
.profile-nickname.esports-gradient {
    font-size: 2.7rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff3c00 0%, #dc2626 60%, #ff3c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0.7rem;
    text-shadow: none;
    filter: none;
    animation: none;
}
.profile-country {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.7rem;
}
.flag-icon {
    width: 32px;
    height: 22px;
    display: inline-block;
    background-size: cover;
    border-radius: 3px;
    border: 2px solid #dc2626;
    box-shadow: none;
    animation: none;
}
.profile-like-bar {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.like-btn {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 2.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.12s;
}
.like-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}
.like-btn:hover:not([disabled]) {
    transform: scale(1.15);
    color: #ff3c00;
}
#likeCount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-left: 0.2rem;
}
.profile-position {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}
.position-icon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.15rem;
}
.position-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    background: none;
    border: none;
    box-shadow: none;
}
.profile-bio.esports-bio {
    margin-top: 1.1rem;
    color: #ccc;
    font-size: 1.13rem;
    font-style: italic;
    background: #181a20;
    border-left: 4px solid #dc2626;
    padding: 0.7rem 1.2rem;
    border-radius: 0 0.7rem 0.7rem 0;
    box-shadow: 0 1px 8px #0004;
    width: 100%;
}
.profile-details-social.esports-details {
    display: flex;
    gap: 2.5rem;
    width: 100%;
    margin-bottom: 2.5rem;
}
.profile-teams, .profile-trophies {
    flex: 1;
    background: #23243a;
    border-radius: 0.7rem;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 1px 8px #0004;
    border: 1.5px solid #dc262655;
    min-width: 220px;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.profile-teams:hover, .profile-trophies:hover {
    box-shadow: 0 4px 32px #dc262655;
    border-color: #ff3c00;
}
.profile-teams h3, .profile-trophies h3 {
    color: #dc2626;
    margin-bottom: 1rem;
    font-family: 'Rajdhani', 'Exo 2', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.profile-media-gallery.esports-gallery {
    margin-top: 2.5rem;
    width: 100%;
    background: #23243a;
    border-radius: 0.7rem;
    box-shadow: 0 1px 8px #0004;
    border: 1.5px solid #dc262655;
    min-width: 220px;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.gallery-title {
    color: #dc2626;
    font-family: 'Rajdhani', 'Exo 2', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
}
.media-card {
    background: #181a20;
    border-radius: 0.7rem;
    box-shadow: 0 1px 8px #0004;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.18s, transform 0.18s;
    border: 1.5px solid #dc262655;
}
.media-card:hover {
    box-shadow: 0 4px 24px #dc262655;
    transform: scale(1.08) translateY(-6px);
    z-index: 2;
    border-color: #ff3c00;
}
.media-img, .media-video {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-bottom: 2px solid #dc262655;
    background: #23243a;
}
.media-title {
    color: #dc2626;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    text-align: center;
    width: 100%;
    background: #181a20;
    border-radius: 0 0 0.7rem 0.7rem;
}
.no-media {
    color: #888;
    text-align: center;
    font-style: italic;
    margin-top: 1.2rem;
}
@media (max-width: 900px) {
    .profile-card {
        max-width: 98vw;
        padding: 2rem 0.5rem;
    }
    .profile-details-social.esports-details {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* PRO PLAYER VIBE - esports memorabil, simplu, elegant */
body {
    background: linear-gradient(120deg, #181a20 0%, #23243a 100%);
}
.profile-card {
    background: rgba(24,26,32,0.98);
    border-radius: 1.5rem;
    box-shadow: 0 2px 16px #23243a55;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
    border: 2px solid #dc2626;
}
.profile-avatar-large {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #dc2626;
    box-shadow: none;
    background: #23243a;
    transition: none;
    animation: none;
}
.profile-nickname.esports-gradient {
    font-size: 2.7rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff3c00 0%, #dc2626 60%, #ff3c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0.7rem;
    text-shadow: none;
    filter: none;
    animation: none;
}
.profile-playerid {
    margin-top: -0.7rem;
    margin-bottom: 1.1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: 1px;
    text-align: center;
}
.playerid-label {
    color: #fff;
    font-weight: 600;
    margin-right: 0.3rem;
}
.playerid-value {
    color: #dc2626;
    font-family: 'Rajdhani', 'Exo 2', Arial, sans-serif;
    font-weight: 900;
    font-size: 1.18rem;
}

/* Efecte suplimentare esports incredibile pentru profil public */
.profile-card {
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.4);
    border: 2px solid #dc2626;
}
.profile-avatar-large {
    animation: none;
}
.profile-nickname.esports-gradient {
    text-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}
.profile-playerid {
    color: #dc2626;
}
.profile-teams, .profile-trophies {
    background: rgba(35, 36, 58, 0.6);
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.profile-media-gallery.esports-gallery {
    background: rgba(35, 36, 58, 0.6);
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.media-card {
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Simplifică efectele: elimină glow, shadow și animații excesive pentru un look pro, curat */
.profile-card {
    background: rgba(24,26,32,0.98);
    border-radius: 1.5rem;
    box-shadow: 0 2px 16px #23243a55;
    padding: 3.5rem 2.5rem 2.5rem 2.5rem;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
    border: 2px solid #dc2626;
}
.profile-avatar-large {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #dc2626;
    box-shadow: none;
    background: #23243a;
    transition: none;
    animation: none;
}
.profile-nickname.esports-gradient {
    font-size: 2.7rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff3c00 0%, #dc2626 60%, #ff3c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0.7rem;
    text-shadow: none;
    filter: none;
    animation: none;
}
.verified-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    color: #22d922;
    font-size: 2.2rem;
    filter: none;
    animation: none;
}
.profile-country .flag-icon {
    animation: none;
    box-shadow: none;
    border: 2px solid #dc2626;
}
.profile-like-bar {
    animation: none;
    filter: none;
}
.profile-teams, .profile-trophies, .profile-media-gallery.esports-gallery, .media-card {
    box-shadow: none;
    border-color: #dc2626;
    animation: none;
}
.media-card:hover, .profile-teams:hover, .profile-trophies:hover, .profile-media-gallery.esports-gallery:hover {
    box-shadow: none;
    border-color: #ff3c00;
}

/* ===================== GLOBAL MODAL SYSTEM ===================== */
.hr-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: linear-gradient(135deg, rgba(4,6,16,0.96) 0%, rgba(8,10,26,0.94) 60%, rgba(18,8,12,0.92) 100%);
    backdrop-filter: blur(14px);
    z-index: 1200;
}

.hr-modal-overlay.active {
    display: flex;
}

.hr-modal-overlay.scrollable {
    align-items: flex-start;
    overflow-y: auto;
}

.hr-modal-card {
    width: min(520px, 100%);
    background: linear-gradient(145deg, rgba(13,15,31,1) 0%, rgba(17,19,42,1) 55%, rgba(26,15,31,1) 100%);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.75),
        0 0 40px rgba(220,38,38,0.15);
    padding: clamp(1.5rem, 2.2vw, 2.4rem);
    position: relative;
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hr-modal-card.wide {
    width: min(960px, 100%);
}

.hr-modal-card.full-height {
    min-height: min(80vh, 680px);
}

.hr-modal-overlay.active .hr-modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.hr-modal-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}

.hr-modal-close {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #f8fafc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hr-modal-close:hover {
    transform: rotate(90deg);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
}

.hr-modal-body {
    color: #cbd5f5;
    font-size: 0.97rem;
    line-height: 1.7;
}

.hr-modal-body p {
    margin-bottom: 0.8rem;
}

.hr-modal-body ul {
    margin: 0.4rem 0 0.4rem 1.2rem;
    color: #fca5a5;
}

.hr-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.hr-modal-btn {
    border: none;
    border-radius: 12px;
    padding: 0.8rem 1.8rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.hr-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.hr-modal-btn:active {
    transform: translateY(0);
}

.hr-modal-btn.ghost {
    background: rgba(148,163,184,0.12);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,0.2);
}

.hr-modal-btn.primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #facc15 100%);
    color: #0f0f16;
    box-shadow: 0 18px 28px rgba(249,115,22,0.35);
}

.hr-modal-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 20px 30px rgba(220,38,38,0.35);
}

.hr-modal-tagline {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(248,250,252,0.5);
}

.hr-modal-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.02) 100%);
    margin: 1.5rem 0;
    border: none;
}

.hr-modal-scroll-area {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.hr-modal-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.hr-modal-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
}

.hr-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: rgba(15,118,255,0.08);
    border: 1px solid rgba(59,130,246,0.3);
    color: #93c5fd;
}

.hr-modal-card .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.hr-modal-card .form-field label {
    display: block;
    margin-bottom: 0.45rem;
    color: #cbd5f5;
    font-weight: 600;
}

.hr-modal-card .form-field input,
.hr-modal-card .form-field select,
.hr-modal-card .form-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,12,24,0.8);
    color: #f8fafc;
    font-size: 0.95rem;
}

.hr-modal-card .form-field textarea {
    min-height: 120px;
    resize: vertical;
}

@media (max-width: 768px) {
    .hr-modal-card {
        border-radius: 18px;
        padding: 1.5rem;
    }

    .hr-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .hr-modal-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tournament Manage Workspace */
.manage-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 2, 5, 0.85);
    backdrop-filter: blur(14px);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.manage-shell {
    width: min(1200px, 96vw);
    height: min(900px, 92vh);
    background: #050507;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 120px rgba(0, 0, 0, 0.65);
}

.manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 1rem;
    flex-wrap: wrap;
}

.manage-title {
    font-size: 1.75rem;
    margin: 0.15rem 0 0;
}

.manage-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

.manage-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.manage-stage-select {
    background: #0e0f16;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    min-width: 220px;
}

.manage-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
}

.manage-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.manage-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.manage-sidebar {
    width: 280px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.manage-sidebar-card {
    background: #090a11;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 1rem;
}

.manage-sidebar-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
}

.manage-sidebar-meta {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

.manage-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.manage-group-pill {
    width: 100%;
    background: #0e0f16;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
}

.manage-group-pill.active {
    border-color: var(--hellraiser-red);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.4);
}

.manage-main {
    flex: 1;
    padding: 1.8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.manage-tabs {
    display: inline-flex;
    background: #0a0b12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.25rem;
    gap: 0.4rem;
}

.manage-tabs button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.45rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.manage-tabs button.active {
    background: var(--hellraiser-red);
    color: #fff;
}

.manage-inline-alert {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.manage-inline-alert.info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.manage-inline-alert.success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.manage-inline-alert.warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.manage-inline-alert.danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.manage-loading-state {
    display: none;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.manage-card {
    background: #090a12;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 1.3rem;
}

.manage-card.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.manage-match-card {
    margin-bottom: 1rem;
    background: linear-gradient(130deg, #0b0c14 0%, #111225 70%, #1c0d12 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
}

.match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.match-card-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.2rem 0;
}

.match-card-title {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}

.match-card-count {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.match-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.8rem;
}

.match-pill {
    background: rgba(10, 12, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.75rem 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.match-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(250, 204, 21, 0.5);
}

.match-pill.active {
    border-color: #f87171;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3);
}

.match-pill-map {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.match-pill-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-pill-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.1rem;
}

.match-pill-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.match-pill-title {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
}

.match-pill-info small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.match-pill-status {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-left: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    min-width: 90px;
    max-width: 140px;
    width: fit-content;
    text-align: center;
    white-space: normal;
    line-height: 1.1;
    word-break: break-word;
}

.match-pill-status.status-pending {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.4);
}

.match-pill-status.status-live {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.6);
}

.match-pill-status.status-completed {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.4);
}

.manage-match-panel {
    margin-bottom: 1.2rem;
    background: #0a0c18;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
}

.match-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.match-panel-map {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.match-map-img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.match-map-fallback {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.match-panel-label {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.match-panel-map small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.match-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.match-status-select {
    min-width: 150px;
    background: #0d1020;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.match-table-wrapper {
    margin-top: 0.6rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.manage-match-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.manage-match-table th,
.manage-match-table td {
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.manage-match-table th {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.match-team-labels {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.manage-control-fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.manage-control-fields.button-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.manage-control-fields label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.manage-input {
    width: 100%;
    background: #0d0f18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    padding: 0.45rem 0.65rem;
}

.manage-btn {
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.manage-btn.subtle {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.manage-btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.manage-btn.primary {
    background: var(--hellraiser-red);
    color: #fff;
}

.manage-btn:hover {
    transform: translateY(-1px);
}

.manage-table-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    overflow: hidden;
}

.manage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.manage-table th,
.manage-table td {
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-align: left;
}

.manage-table th {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.manage-table.compact th,
.manage-table.compact td {
    padding: 0.5rem;
}
.manage-table.manage-edit-table {
    border-collapse: collapse;
    border-spacing: 0;
    background: rgba(10, 10, 15, 0.65);
}

.manage-table.manage-edit-table thead th {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.manage-table.manage-edit-table thead th:first-child,
.manage-table.manage-edit-table thead th:nth-child(n+3) {
    text-align: center;
}

.manage-table.manage-edit-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

.manage-table.manage-edit-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.manage-table.manage-edit-table td:first-child {
    text-align: center;
    color: #9ca3af;
    font-weight: 600;
}

.manage-table.manage-edit-table tbody tr:last-child td {
    border-bottom: none;
}

.manage-team-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.manage-team-labels {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.manage-team-labels .team-name-label {
    font-weight: 600;
    color: #fff;
}

.team-country-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.numeric-cell {
    width: 90px;
    text-align: center;
}

.manage-input.numeric {
    text-align: center;
}

.manage-numeric-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0.25rem 0.55rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.manage-row-actions {
    text-align: right;
}

.table-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f87171;
    cursor: pointer;
}

.table-icon-btn:hover {
    background: rgba(248, 113, 113, 0.1);
}

.manage-empty,
.manage-empty-cell {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}

.position-indicator {
    font-weight: 700;
    color: #f87171;
}

.status-pill {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.08);
}

.status-pill.status-completed {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}

.status-pill.status-in-progress {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.manage-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.manage-standings-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.manage-standings-view .group-card {
    background: linear-gradient(140deg, #16161c 0%, #1f1f2a 55%, #25101a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 10px 30px rgba(5, 5, 10, 0.45);
}

.manage-standings-view .group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.6rem;
}

.manage-standings-view .group-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.manage-standings-view .group-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.manage-standings-view .group-status.pending {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.4);
}

.manage-standings-view .group-status.in-progress,
.manage-standings-view .group-status.in_progress {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

.manage-standings-view .group-status.completed {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}

.manage-standings-view .group-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.manage-standings-view .group-table thead th {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.6rem 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.manage-standings-view .group-table thead th:first-child {
    text-align: center;
}

.manage-standings-view .group-table thead th:nth-child(3),
.manage-standings-view .group-table thead th:nth-child(4),
.manage-standings-view .group-table thead th:nth-child(5) {
    text-align: center;
}

.manage-standings-view .group-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

.manage-standings-view .group-table td {
    padding: 0.55rem 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    text-align: left;
}

.manage-standings-view .group-table td:first-child {
    text-align: center;
    color: #aaa;
    font-weight: 600;
}

.manage-standings-view .group-table td:nth-child(3),
.manage-standings-view .group-table td:nth-child(4),
.manage-standings-view .group-table td:nth-child(5) {
    text-align: center;
    font-weight: 600;
}

.manage-standings-view .group-table tbody tr:last-child td {
    border-bottom: none;
}

.manage-standings-view .team-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}


.manage-standings-view .team-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #13131a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ff6b6b;
    overflow: hidden;
    text-transform: uppercase;
    flex-shrink: 0;
}

.manage-standings-view .team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.manage-standings-view .team-name-label {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
}

.manage-standings-view .team-points {
    font-weight: 700;
    color: #ff6b6b;
}

.manage-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.manage-standings-view .clash-preview-layout {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.manage-standings-view .clash-preview-top {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
}

.manage-standings-view .clash-preview-top-header {
    margin-bottom: 0.35rem;
}

.manage-standings-view .clash-preview-note {
    padding: 0;
    color: #aeb7c6;
    font-size: 0.76rem;
    line-height: 1.15;
}

.manage-standings-view .clash-preview-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0.2rem 0 0.55rem;
}

.manage-standings-view .clash-preview-save {
    border: 1px solid #b91c1c;
    background: #dc2626;
    color: #fff;
    padding: 0.2rem 0.52rem;
    font-size: 0.7rem;
    line-height: 1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    cursor: pointer;
}

.manage-standings-view .clash-preview-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.manage-standings-view .clash-preview-card {
    padding: 0.42rem 0.52rem;
    border: 1px solid #273447;
    background: #0d141f;
    border-radius: 10px;
}

.manage-standings-view .clash-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.manage-standings-view .clash-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.manage-standings-view .clash-preview-title {
    font-weight: 700;
    color: #e2e8f0;
    font-size: 0.84rem;
    line-height: 1;
}

.manage-standings-view .clash-preview-mini {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1;
}

.manage-standings-view .clash-preview-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.manage-standings-view .clash-preview-status,
.manage-standings-view .clash-preview-score {
    padding: 0.08rem 0.35rem;
    border-radius: 6px;
    line-height: 1;
    font-size: 0.66rem;
}

.manage-standings-view .clash-preview-status {
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    text-transform: uppercase;
}

.manage-standings-view .clash-preview-score {
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #facc15;
    font-weight: 800;
    font-size: 0.7rem;
}

.manage-standings-view .clash-preview-summary {
    margin-top: 0.28rem;
    font-size: 0.7rem;
    color: #9fb0c7;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.1;
}

.manage-standings-view .clash-preview-summary strong {
    color: #cbd5e1;
    font-weight: 700;
}

.manage-standings-view .clash-preview-summary strong.ok {
    color: #86efac;
}

.manage-standings-view .clash-preview-summary strong.ko {
    color: #fca5a5;
}

.manage-standings-view .clash-preview-table-wrap {
    margin-top: 0.35rem;
    border: 1px solid #243246;
    border-radius: 8px;
    overflow: hidden;
}

.manage-standings-view .clash-preview-table {
    width: 100%;
    font-size: 0.82rem;
}

.manage-standings-view .clash-preview-table th {
    padding: 0.22rem 0.34rem;
}

.manage-standings-view .clash-preview-cell-index,
.manage-standings-view .clash-preview-cell-team,
.manage-standings-view .clash-preview-cell-result {
    padding: 0.2rem 0.34rem;
    line-height: 1;
}

.manage-standings-view .clash-preview-cell-result {
    max-width: 170px;
}

.manage-standings-view .clash-preview-outcome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 0.08rem 0.3rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-weight: 700;
    font-size: 0.67rem;
    line-height: 1;
}

.manage-standings-context {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
}

.manage-table .placeholder-row td {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

@media (max-width: 1024px) {
    .manage-body {
        flex-direction: column;
    }

    .manage-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .manage-main {
        padding: 1.2rem;
    }
}

/* --- Global Responsive Layer --- */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

button,
.btn,
.cta-button,
.cta-button-nav,
.mobile-cta,
.admin-tab,
.nav-link {
    touch-action: manipulation;
}

input,
select,
textarea {
    max-width: 100%;
}

@media (max-width: 1200px) {
    .nav-container {
        padding: 0 0.7rem;
        gap: 0.5rem;
    }

    .nav-menu {
        gap: 0.1rem;
    }

    .nav-link {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }

    .nav-features {
        gap: 0.9rem;
    }

    .hero-container,
    .features-container,
    .tournament-container,
    .cta-container,
    .footer-container,
    .dashboard-container,
    .error-container,
    .player-register-container,
    .register-choice-container,
    .profile-edit-container,
    .profile-container-pro,
    .activate-container,
    .container {
        width: min(100%, 1100px);
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 992px) {
    body {
        line-height: 1.55;
    }

    .navbar {
        padding: 0.75rem 0;
    }

    .brand-logo {
        height: 64px;
    }

    .brand-title {
        font-size: 1.2rem;
    }

    .brand-subtitle {
        font-size: 0.65rem;
    }

    .nav-menu,
    .nav-features {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .mobile-menu {
        max-height: calc(100vh - 78px);
        overflow-y: auto;
    }

    .hero-container,
    .features-container,
    .tournament-container,
    .cta-container,
    .footer-container,
    .dashboard-container,
    .error-container,
    .player-register-container,
    .register-choice-container,
    .profile-edit-container,
    .profile-container-pro,
    .activate-container,
    .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    h1 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    h2 {
        font-size: clamp(1.25rem, 4.2vw, 1.8rem);
    }

    .btn,
    .cta-button,
    .cta-button-nav,
    .mobile-cta {
        min-height: 42px;
        padding: 0.62rem 0.95rem;
        font-size: 0.9rem;
    }

    .stats-container,
    .features-grid,
    .tournaments-grid,
    .leaderboard-grid,
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.6rem 0;
    }

    .nav-container {
        padding: 0 0.7rem;
    }

    .brand-logo {
        height: 54px;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-subtitle {
        letter-spacing: 0.06em;
    }

    .mobile-link,
    .mobile-cta {
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    .stats-container,
    .features-grid,
    .tournaments-grid,
    .leaderboard-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .card,
    .feature-card,
    .tournament-card,
    .leaderboard-card,
    .info-card {
        border-radius: 12px;
        padding: 0.85rem;
    }

    .hero-container,
    .features-container,
    .tournament-container,
    .cta-container,
    .footer-container,
    .dashboard-container,
    .error-container,
    .player-register-container,
    .register-choice-container,
    .profile-edit-container,
    .profile-container-pro,
    .activate-container,
    .container {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .btn,
    .cta-button,
    .cta-button-nav,
    .mobile-cta,
    button[type="submit"],
    input[type="submit"] {
        width: 100%;
    }

    .form-row,
    .input-row,
    .two-col,
    .three-col {
        grid-template-columns: 1fr !important;
    }

    .chart-container,
    .chart-container-compact,
    .value-history-container,
    .teams-timeline-container {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 0.94rem;
    }

    h1 {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    h2 {
        font-size: clamp(1.1rem, 5.8vw, 1.45rem);
    }

    p,
    li,
    label,
    .meta,
    .subtitle {
        font-size: 0.9rem;
    }

    .btn,
    .cta-button,
    .cta-button-nav,
    .mobile-cta,
    .nav-link {
        font-size: 0.84rem;
        min-height: 40px;
    }

    .card,
    .feature-card,
    .tournament-card,
    .leaderboard-card,
    .info-card {
        padding: 0.72rem;
        border-radius: 10px;
    }

    .mobile-menu-content {
        padding: 0.7rem;
    }
}

/* --- Homepage Redesign Layer --- */
.hero-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 10, 18, 0.6);
    backdrop-filter: blur(8px);
}

.hero-pill i {
    color: var(--hellraiser-gold);
}

.stats-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
    display: grid;
    gap: 0.12rem;
}

.stat-label {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.flow-section {
    padding: 5.5rem 0 1rem;
    background: radial-gradient(circle at 50% -10%, rgba(245, 158, 11, 0.08) 0%, transparent 38%);
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.flow-card {
    background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1rem;
    transition: var(--transition);
}

.flow-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.45);
}

.flow-step {
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--hellraiser-red), var(--hellraiser-gold));
    margin-bottom: 0.65rem;
}

.flow-card h3 {
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
}

.flow-card p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
}

.showcase-section {
    padding: 4.2rem 0 1rem;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.showcase-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    padding: 1rem;
    transition: var(--transition);
}

.showcase-card:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 38, 38, 0.45);
}

.showcase-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
    color: #fff;
    background: linear-gradient(135deg, var(--hellraiser-red), var(--hellraiser-gold));
}

.showcase-card h3 {
    margin-bottom: 0.35rem;
    font-size: 1.02rem;
}

.showcase-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

.feature-card,
.flow-card,
.showcase-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, filter;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.22s ease, filter 0.28s ease;
}

.feature-card::before,
.flow-card::before,
.showcase-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        radial-gradient(220px 140px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(125deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.02) 32%, rgba(255,255,255,0.18) 54%, rgba(255,255,255,0.04) 72%, rgba(255,255,255,0.1) 100%);
    opacity: 0.45;
    mix-blend-mode: screen;
    transition: opacity 0.26s ease;
}

.feature-card::after,
.flow-card::after,
.showcase-card::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -45%;
    width: 28%;
    height: 165%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.36) 48%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transform: rotate(18deg) translateX(calc(-120% + var(--sheen-shift, 0%)));
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.feature-card.is-metal-hover,
.flow-card.is-metal-hover,
.showcase-card.is-metal-hover {
    transform: perspective(960px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
    filter: saturate(1.05) contrast(1.03);
    box-shadow: 0 16px 34px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.18) inset;
}

.feature-card.is-metal-hover::before,
.flow-card.is-metal-hover::before,
.showcase-card.is-metal-hover::before {
    opacity: 0.75;
}

.feature-card.is-metal-hover::after,
.flow-card.is-metal-hover::after,
.showcase-card.is-metal-hover::after {
    opacity: 0.58;
    transform: rotate(18deg) translateX(calc(-74% + var(--sheen-shift, 0%)));
}

.feature-card.is-metal-pressed,
.flow-card.is-metal-pressed,
.showcase-card.is-metal-pressed {
    transform: perspective(960px) rotateX(calc(var(--tilt-x, 0deg) * 1.18)) rotateY(calc(var(--tilt-y, 0deg) * 1.18)) translateY(-7px) scale(1.015);
    box-shadow: 0 18px 38px rgba(0,0,0,0.42), 0 0 0 1px rgba(245, 158, 11, 0.34) inset;
}

.feature-card.is-metal-pressed::after,
.flow-card.is-metal-pressed::after,
.showcase-card.is-metal-pressed::after {
    opacity: 1;
    animation: metallicSweep 0.52s ease forwards;
}

@keyframes metallicSweep {
    0% {
        opacity: 0;
        transform: rotate(18deg) translateX(-130%);
    }
    22% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: rotate(18deg) translateX(420%);
    }
}

.feature-card p,
.flow-card p,
.showcase-card p {
    color: rgba(255, 255, 255, 0.86);
}

.feature-card.is-active,
.flow-card.is-active,
.showcase-card.is-active {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(245, 158, 11, 0.32) inset;
    transform: translateY(-4px);
}

.feature-card.is-active.is-metal-hover,
.flow-card.is-active.is-metal-hover,
.showcase-card.is-active.is-metal-hover {
    transform: perspective(960px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
}

.feature-card.is-active.is-metal-pressed,
.flow-card.is-active.is-metal-pressed,
.showcase-card.is-active.is-metal-pressed {
    transform: perspective(960px) rotateX(calc(var(--tilt-x, 0deg) * 1.18)) rotateY(calc(var(--tilt-y, 0deg) * 1.18)) translateY(-8px) scale(1.015);
}

.card-reveal {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.22rem;
    max-height: 48px;
    opacity: 0.68;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

.card-reveal span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
}

.card-reveal i {
    color: var(--hellraiser-gold);
    font-size: 0.7rem;
}

.feature-card.is-active .card-reveal,
.flow-card.is-active .card-reveal,
.showcase-card.is-active .card-reveal {
    max-height: 96px;
    opacity: 1;
    transform: translateY(0);
}

.features-grid .feature-card:first-child .card-reveal,
.flow-grid .flow-card:first-child .card-reveal,
.showcase-grid .showcase-card:first-child .card-reveal {
    max-height: 96px;
    opacity: 1;
    transform: translateY(0);
}

.tournament-mini-tabs {
    margin-top: 0.75rem;
    display: inline-flex;
    gap: 0.34rem;
    padding: 0.24rem;
    border-radius: 999px;
    background: rgba(10, 13, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.mini-tab {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.68rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.mini-tab:hover {
    color: #fff;
}

.mini-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--hellraiser-red), var(--hellraiser-gold));
}

.mini-tab-panels {
    margin-top: 0.45rem;
}

.mini-tab-panel {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    background: rgba(8, 10, 16, 0.55);
    padding: 0.45rem 0.58rem;
    animation: explainerFadeIn 0.22s ease;
}

.tournament-countdown .btn + .btn {
    margin-top: 0.45rem;
}

/* --- Premium Metallic Typography Layer --- */
:is(
    .hero-title .title-main,
    .hero-title .title-sub,
    .section-header h2,
    .feature-card h3,
    .flow-card h3,
    .showcase-card h3,
    .tournament-card h3,
    .cta-container h2,
    .explainer-panel h3,
    .explainer-step strong
) {
    color: #f2e5c3;
    background-image:
        linear-gradient(155deg, #fffdf7 0%, #e7dcc0 22%, #a99a78 37%, #fff1cb 52%, #c6b48e 67%, #fef8e8 82%, #a38f68 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.text-gradient {
    background-image: linear-gradient(145deg, #fffdf8 0%, #f7e7c2 24%, #c9ae74 48%, #fff2ce 67%, #b99657 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title .title-main,
.hero-title .title-sub {
    background-image:
        linear-gradient(155deg, #ffe6e6 0%, #ff8c8c 18%, #b81414 36%, #ff4d4d 52%, #7e0a0a 70%, #ffb3b3 86%, #a10f0f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(255, 215, 215, 0.2), 0 8px 24px rgba(90, 0, 0, 0.45);
}

@media (max-width: 992px) {
    .stats-container,
    .flow-grid,
    .showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .hero-pill-row {
        gap: 0.35rem;
    }

    .hero-pill {
        font-size: 0.7rem;
        padding: 0.32rem 0.58rem;
    }

    .hero-description {
        font-size: clamp(1rem, 4.2vw, 1.22rem);
        padding: 0.72rem 0.8rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .hero-description-highlight {
        margin-bottom: 0.2rem;
    }

    .stats-container,
    .flow-grid,
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .flow-section,
    .showcase-section {
        padding-top: 3.2rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }
}

/* Interactive ECEL Explainer */
.interactive-explainer {
    padding: 4.8rem 0 1.2rem;
    background:
        radial-gradient(circle at 18% 20%, rgba(220, 38, 38, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 84% 76%, rgba(245, 158, 11, 0.14) 0%, transparent 45%);
}

.explainer-shell {
    display: grid;
    grid-template-columns: minmax(230px, 320px) 1fr;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.explainer-nav {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 10, 16, 0.58);
}

.explainer-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 0.65rem;
    padding: 0.68rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.explainer-step:hover {
    border-color: rgba(245, 158, 11, 0.42);
}

.explainer-step.is-active {
    border-color: rgba(220, 38, 38, 0.52);
    background: rgba(220, 38, 38, 0.14);
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.28);
}

.step-index {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    color: #fff;
    background: linear-gradient(135deg, var(--hellraiser-red), var(--hellraiser-gold));
}

.step-copy strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
}

.step-copy small {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.74rem;
    line-height: 1.2;
}

.explainer-content {
    position: relative;
    min-height: 292px;
    padding: 1.2rem 1.25rem;
}

.explainer-panel {
    animation: explainerFadeIn 0.28s ease;
}

.explainer-panel h3 {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    margin-bottom: 0.5rem;
}

.explainer-panel p {
    font-size: 0.96rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 60ch;
}

.explainer-panel ul {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.48rem;
    list-style: none;
    padding: 0;
}

.explainer-panel li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.explainer-panel li i {
    color: var(--hellraiser-gold);
}

@keyframes explainerFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
    .explainer-shell {
        grid-template-columns: 1fr;
    }

    .explainer-nav {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        grid-template-columns: 1fr;
    }

    .explainer-content {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .interactive-explainer {
        padding-top: 3.2rem;
    }

    .explainer-shell {
        border-radius: 14px;
    }

    .explainer-nav,
    .explainer-content {
        padding: 0.8rem;
    }

    .explainer-step {
        grid-template-columns: 40px 1fr;
        padding: 0.55rem;
    }

    .step-index {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 0.78rem;
    }

    .step-copy strong {
        font-size: 0.84rem;
    }

    .step-copy small {
        font-size: 0.7rem;
    }

    .explainer-panel p,
    .explainer-panel li {
        font-size: 0.84rem;
    }

    .tournament-mini-tabs {
        width: 100%;
        justify-content: center;
    }

    .mini-tab {
        font-size: 0.72rem;
        padding: 0.3rem 0.56rem;
    }
}

/* --- Active Tournament card: mobile layout fix --- */
@media (max-width: 768px) {
    .tournament-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.1rem;
        text-align: left;
    }

    .tournament-card h3 {
        font-size: 1.45rem;
        margin-bottom: 1rem;
        line-height: 1.2;
        word-break: break-word;
    }

    .tournament-details {
        gap: 0.55rem;
    }

    .detail-item {
        font-size: 0.92rem;
        gap: 0.65rem;
        padding: 0.25rem 0;
    }

    .detail-item:hover {
        transform: none;
    }

    .tournament-countdown {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 1rem;
    }

    .countdown-number {
        font-size: 2.6rem;
        line-height: 1;
    }

    .countdown-label {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .tournament-countdown .btn {
        width: 100%;
        display: block;
    }

    .tournament-countdown .btn + .btn {
        margin-top: 0.55rem;
    }

    .mini-tab-panel {
        font-size: 0.8rem;
        text-align: left;
    }

    .tournament-live-status {
        margin-bottom: 0.6rem;
    }
}

@media (max-width: 480px) {
    .tournament-card {
        padding: 0.95rem;
    }

    .tournament-card h3 {
        font-size: 1.25rem;
    }

    .countdown-number {
        font-size: 2.25rem;
    }

    .detail-item {
        font-size: 0.88rem;
    }
}

/* --- Navbar + Footer Upgrade Layer --- */
.navbar {
    background:
        linear-gradient(120deg, rgba(10, 12, 20, 0.9) 0%, rgba(14, 17, 28, 0.85) 52%, rgba(35, 8, 8, 0.72) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.25rem 1rem;
    border-radius: 14px;
}

.nav-menu {
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.nav-link {
    padding: 0.38rem 0.6rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.8rem;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(245, 158, 11, 0.22));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.24) inset;
}

.brand-logo {
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.16));
}

.brand-title {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.28);
}

.current-lang-btn,
.notifications-toggle,
.cta-button-nav {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

.user-profile {
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.cta-button-nav {
    border: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.footer {
    border-top: 1px solid rgba(245, 158, 11, 0.36);
    background:
        radial-gradient(circle at 12% 16%, rgba(220, 38, 38, 0.14) 0%, transparent 38%),
        radial-gradient(circle at 88% 74%, rgba(245, 158, 11, 0.14) 0%, transparent 42%),
        linear-gradient(160deg, #0b0d15 0%, #10131f 52%, #120b0b 100%);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.footer-container {
    gap: 2.2rem;
    align-items: start;
}

.footer-brand,
.footer-section {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    padding: 1rem 1.1rem;
}

.footer-brand h3,
.footer-section h4 {
    letter-spacing: 0.02em;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.22s ease, transform 0.22s ease;
}

.footer-section a:hover {
    color: #fff;
    transform: translateX(3px);
}

.social-links a {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(245, 158, 11, 0.24) inset;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.24);
}

@media (max-width: 992px) {
    .nav-container {
        border-radius: 0;
        padding: 0.3rem 0.9rem;
    }

    .nav-menu {
        border-radius: 12px;
    }

    .footer-brand,
    .footer-section {
        padding: 0.82rem 0.86rem;
        border-radius: 12px;
    }
}

/* --- WOW Navbar + Footer Upgrade v2 --- */

.footer {
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(-35deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0) 45%);
}

.footer-container,
.footer-bottom {
    position: relative;
    z-index: 2;
}

/* --- Premium Simplist Refinement --- */

.footer::before {
    opacity: 0.5;
}

.footer-brand,
.footer-section {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}

/* --- Footer Remodel: Compact & Clean --- */
.footer.footer--compact {
    border-top: 1px solid rgba(245, 158, 11, 0.24);
    background: linear-gradient(160deg, #0c0f18 0%, #111525 56%, #10131c 100%);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    padding: 1.15rem 0 0.35rem;
}

.footer.footer--compact::before {
    opacity: 0.22;
}

.footer--compact .footer-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.15rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}

.footer--compact .footer-brandline {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: #fff;
    min-width: 0;
}

.footer--compact .footer-logo {
    width: 42px;
    height: 42px;
    margin: 0;
    object-fit: contain;
}

.footer--compact .footer-brandline__text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.footer--compact .footer-brandline__text strong {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #f8fafc;
}

.footer--compact .footer-brandline__text small {
    font-size: 0.72rem;
    color: #94a3b8;
}

.footer--compact .footer-quicklinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.1rem;
}

.footer--compact .footer-quicklinks a {
    text-decoration: none;
    color: #cbd5e1;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer--compact .footer-quicklinks a:hover {
    color: #fff;
    transform: none;
}

.footer--compact .footer-social-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer--compact .footer-social-compact a {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe2ea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.footer--compact .footer-social-compact a:hover {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.13);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.footer--compact .footer-bottom {
    margin-top: 0.75rem;
    padding: 0.65rem 1rem 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #94a3b8;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .footer.footer--compact {
        padding: 0.7rem 0 0.2rem;
    }

    .footer--compact .footer-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 0.55rem;
        padding: 0 0.9rem;
    }

    .footer--compact .footer-brandline {
        justify-content: center;
        gap: 0.5rem;
    }

    .footer--compact .footer-logo {
        width: 32px;
        height: 32px;
    }

    .footer--compact .footer-brandline__text strong {
        font-size: 0.85rem;
    }

    .footer--compact .footer-brandline__text small {
        font-size: 0.65rem;
    }

    .footer--compact .footer-quicklinks {
        gap: 0.3rem 0.85rem;
    }

    .footer--compact .footer-quicklinks a {
        font-size: 0.78rem;
    }

    .footer--compact .footer-social-compact {
        gap: 0.4rem;
    }

    .footer--compact .footer-social-compact a {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .footer--compact .footer-bottom {
        padding: 0.45rem 1rem 0.3rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .footer--compact .footer-brandline__text small {
        display: none;
    }

    .footer--compact .footer-quicklinks {
        gap: 0.25rem 0.7rem;
    }

    .footer--compact .footer-quicklinks a {
        font-size: 0.74rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   PLAYER DASHBOARD V3 — Home Page (logged-in)
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.hq { position:relative; padding:5.5rem 0 2rem; min-height:100vh; overflow:hidden; }
.hq-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(220,38,38,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(245,158,11,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.03) 0%, transparent 60%);
}
.hq-bg::before {
    content:''; position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0);
    background-size:40px 40px;
}
.hq-bg::after {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(239,68,68,0.02) 90deg, transparent 180deg, rgba(245,158,11,0.02) 270deg, transparent 360deg);
    animation:hqBgSpin 60s linear infinite;
}
@keyframes hqBgSpin { to { transform:rotate(360deg); } }
.hq-wrap { max-width:1260px; margin:0 auto; padding:0 1.25rem; position:relative; z-index:1; }

/* ── Staggered entrance animations ── */
@keyframes hqFadeUp {
    from { opacity:0; transform:translateY(18px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes hqFadeIn {
    from { opacity:0; transform:scale(0.97); }
    to { opacity:1; transform:scale(1); }
}
.hq-welcome { animation:hqFadeUp 0.5s ease both; }
.hq-hud { animation:hqFadeUp 0.5s ease 0.08s both; }
.hq-nav { animation:hqFadeUp 0.5s ease 0.16s both; }
.hq-main > .hq-card:nth-child(1) { animation:hqFadeUp 0.5s ease 0.22s both; }
.hq-main > .hq-card:nth-child(2) { animation:hqFadeUp 0.5s ease 0.30s both; }
.hq-main > .hq-card:nth-child(3) { animation:hqFadeUp 0.5s ease 0.38s both; }
.hq-side > .hq-card:nth-child(1) { animation:hqFadeUp 0.5s ease 0.24s both; }
.hq-side > .hq-card:nth-child(2) { animation:hqFadeUp 0.5s ease 0.32s both; }
.hq-side > .hq-card:nth-child(3) { animation:hqFadeUp 0.5s ease 0.40s both; }
.hq-side > .hq-card:nth-child(4) { animation:hqFadeUp 0.5s ease 0.48s both; }
.hq-side > .hq-card:nth-child(5) { animation:hqFadeUp 0.5s ease 0.56s both; }
.hq-side > .hq-card:nth-child(6) { animation:hqFadeUp 0.5s ease 0.64s both; }

/* ── Welcome Bar ── */
.hq-welcome {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.15rem 1.4rem; margin-bottom:1rem;
    background:rgba(17,20,28,0.65); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.06); border-radius:16px;
    position:relative; overflow:hidden;
}
.hq-welcome::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #ef4444, #f59e0b, transparent);
    background-size:200% 100%;
    animation:hqWelcomeGlow 4s ease infinite;
}
@keyframes hqWelcomeGlow {
    0%,100% { background-position:200% 0; }
    50% { background-position:-200% 0; }
}
.hq-welcome-left { display:flex; align-items:center; gap:1rem; min-width:0; }
.hq-avatar-ring { position:relative; flex-shrink:0; }
.hq-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(239,68,68,0.25); position:relative; z-index:1; }
.hq-avatar--empty { width:52px; height:52px; border-radius:50%; background:rgba(239,68,68,0.08); border:2px solid rgba(239,68,68,0.15); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#4b5563; position:relative; z-index:1; }
.hq-online { position:absolute; bottom:2px; right:2px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #11141c; z-index:2; box-shadow:0 0 8px rgba(34,197,94,0.5); animation:hqOnlinePulse 2s ease-in-out infinite; }
.hq-greeting-flag {
    display:inline-block; width:26px; height:18px; border-radius:3px;
    object-fit:cover; vertical-align:middle; margin-left:0.4rem;
    border:1.5px solid rgba(255,255,255,0.15);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    transition:transform 0.25s ease;
}
.hq-greeting-flag:hover { transform:scale(1.25); }
@keyframes hqOnlinePulse { 0%,100%{box-shadow:0 0 6px rgba(34,197,94,0.4);} 50%{box-shadow:0 0 12px rgba(34,197,94,0.7);} }
.hq-greeting { font-size:1.1rem; font-weight:700; color:#e5e7eb; margin:0 0 0.3rem; line-height:1.25; word-break:break-word; overflow-wrap:anywhere; }
.hq-ign { color:#fff; background:linear-gradient(135deg,#ef4444,#f59e0b,#ef4444); background-size:200% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:hqIgnShift 3s ease infinite; }
@keyframes hqIgnShift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.hq-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
.hq-tag { display:inline-flex; align-items:center; gap:0.3rem; padding:0.18rem 0.5rem; border-radius:6px; font-size:0.7rem; font-weight:600; color:#9ca3af; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); transition:all 0.2s; }
.hq-tag:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); transform:translateY(-1px); }
.hq-tag--accent { color:#f59e0b; border-color:rgba(245,158,11,0.15); background:rgba(245,158,11,0.06); }
.hq-tag--accent:hover { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.25); }
.hq-tag--team { color:#22c55e; border-color:rgba(34,197,94,0.15); background:rgba(34,197,94,0.06); }
.hq-tag--team:hover { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.25); }
.hq-flag { width:22px; height:15px; border-radius:3px; object-fit:cover; border:1px solid rgba(255,255,255,0.12); box-shadow:0 1px 4px rgba(0,0,0,0.3); vertical-align:middle; }
.hq-tlogo { width:14px; height:14px; border-radius:3px; object-fit:contain; }
.hq-welcome-right { display:flex; gap:0.5rem; flex-shrink:0; }
.hq-btn-sm { display:inline-flex; align-items:center; gap:0.35rem; padding:0.42rem 0.8rem; border-radius:8px; font-size:0.76rem; font-weight:600; text-decoration:none; background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.18); transition:all 0.25s; }
.hq-btn-sm:hover { background:rgba(239,68,68,0.18); color:#fff; box-shadow:0 0 16px rgba(239,68,68,0.2); transform:translateY(-1px); }
.hq-btn-sm--ghost { background:transparent; color:#9ca3af; border-color:rgba(255,255,255,0.08); }
.hq-btn-sm--ghost:hover { background:rgba(255,255,255,0.05); color:#d1d5db; box-shadow:0 0 12px rgba(255,255,255,0.05); }

/* ── Platform Stats HUD ── */
.hq-hud {
    display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem;
    margin-bottom:1rem;
}
.hq-hud-item {
    display:flex; align-items:center; gap:0.85rem;
    padding:1rem 1.15rem;
    background:rgba(17,20,28,0.65); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.06); border-radius:14px;
    transition:all 0.3s ease; position:relative; overflow:hidden;
}
.hq-hud-item::after {
    content:''; position:absolute; inset:0; opacity:0;
    background:radial-gradient(circle at 30% 50%, var(--hud-glow, rgba(239,68,68,0.08)), transparent 70%);
    transition:opacity 0.3s;
}
.hq-hud-item:hover::after { opacity:1; }
.hq-hud-item:hover { border-color:rgba(239,68,68,0.18); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.hq-hud-item:nth-child(2) { --hud-glow:rgba(245,158,11,0.08); }
.hq-hud-item:nth-child(2):hover { border-color:rgba(245,158,11,0.18); }
.hq-hud-item:nth-child(3) { --hud-glow:rgba(34,197,94,0.08); }
.hq-hud-item:nth-child(3):hover { border-color:rgba(34,197,94,0.18); }
.hq-hud-item:nth-child(4) { --hud-glow:rgba(139,92,246,0.08); }
.hq-hud-item:nth-child(4):hover { border-color:rgba(139,92,246,0.18); }
.hq-hud-icon {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(239,68,68,0.08); color:#ef4444; font-size:1.05rem;
    border:1px solid rgba(239,68,68,0.12); position:relative; z-index:1;
    transition:all 0.3s;
}
.hq-hud-item:hover .hq-hud-icon { transform:scale(1.1); }
.hq-hud-icon--amber { background:rgba(245,158,11,0.08); color:#f59e0b; border-color:rgba(245,158,11,0.12); }
.hq-hud-icon--green { background:rgba(34,197,94,0.08); color:#22c55e; border-color:rgba(34,197,94,0.12); }
.hq-hud-icon--purple { background:rgba(139,92,246,0.08); color:#a78bfa; border-color:rgba(139,92,246,0.12); }
.hq-hud-val { display:block; font-size:1.4rem; font-weight:800; color:#fff; line-height:1.2; position:relative; z-index:1; }
.hq-hud-lbl { display:block; font-size:0.65rem; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; position:relative; z-index:1; }

/* ── Quick Navigation ── */
.hq-nav { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.hq-nav-link {
    display:inline-flex; align-items:center; gap:0.4rem; position:relative;
    padding:0.55rem 0.95rem; border-radius:10px; font-size:0.8rem; font-weight:600;
    text-decoration:none; color:#d1d5db;
    background:rgba(17,20,28,0.55); border:1px solid rgba(255,255,255,0.06);
    transition:all 0.25s; overflow:hidden;
}
.hq-nav-link::before {
    content:''; position:absolute; inset:0; opacity:0;
    background:linear-gradient(135deg, rgba(239,68,68,0.06), transparent);
    transition:opacity 0.25s;
}
.hq-nav-link:hover::before { opacity:1; }
.hq-nav-link i { font-size:0.78rem; color:#6b7280; transition:all 0.25s; position:relative; z-index:1; }
.hq-nav-link span { position:relative; z-index:1; }
.hq-nav-link:hover { border-color:rgba(239,68,68,0.2); background:rgba(239,68,68,0.04); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.hq-nav-link:hover i { color:#ef4444; transform:scale(1.15); }
.hq-nav-link--cta { border-color:rgba(245,158,11,0.15); background:rgba(245,158,11,0.04); color:#f59e0b; }
.hq-nav-link--cta::before { background:linear-gradient(135deg, rgba(245,158,11,0.06), transparent); }
.hq-nav-link--cta i { color:#f59e0b; }
.hq-nav-link--cta:hover { border-color:rgba(245,158,11,0.25); background:rgba(245,158,11,0.08); }
.hq-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#ef4444; color:#fff; font-size:0.62rem; font-weight:800; position:relative; z-index:1; animation:hqBadgePop 0.4s ease; }
@keyframes hqBadgePop { 0%{transform:scale(0);} 60%{transform:scale(1.2);} 100%{transform:scale(1);} }

/* ── Main Grid ── */
.hq-grid { display:grid; grid-template-columns:1fr 340px; gap:1rem; }
.hq-main { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.hq-side { display:flex; flex-direction:column; gap:1rem; }

/* ── Cards (shared) ── */
.hq-card {
    background:rgba(17,20,28,0.65); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.06); border-radius:16px;
    overflow:hidden; transition:all 0.3s ease; position:relative;
}
.hq-card::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
    transition:none;
}
.hq-card:hover::before { left:100%; transition:left 0.8s ease; }
.hq-card:hover { border-color:rgba(255,255,255,0.12); box-shadow:0 8px 32px rgba(0,0,0,0.2); transform:translateY(-2px); }
.hq-card-top {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.8rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.hq-card-title { font-size:0.8rem; font-weight:700; color:#9ca3af; display:flex; align-items:center; gap:0.4rem; text-transform:uppercase; letter-spacing:0.4px; }
.hq-card-title i { font-size:0.72rem; color:#ef4444; transition:transform 0.3s; }
.hq-card:hover .hq-card-title i { transform:scale(1.15); }
.hq-link-sm { font-size:0.72rem; font-weight:600; color:#6b7280; text-decoration:none; display:flex; align-items:center; gap:0.3rem; transition:all 0.2s; }
.hq-link-sm:hover { color:#ef4444; gap:0.5rem; }
.hq-link-sm i { font-size:0.6rem; }

/* ── Buttons ── */
.hq-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 0.95rem; border-radius:10px; font-size:0.78rem; font-weight:700; text-decoration:none; background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.18); transition:all 0.25s; cursor:pointer; }
.hq-btn:hover { background:rgba(239,68,68,0.22); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,68,68,0.2); }
.hq-btn--ghost { background:transparent; color:#9ca3af; border-color:rgba(255,255,255,0.08); }
.hq-btn--ghost:hover { background:rgba(255,255,255,0.05); color:#d1d5db; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.hq-btn--sm { font-size:0.76rem; padding:0.45rem 0.8rem; }
.hq-btn--full { width:100%; justify-content:center; }
.hq-btn--accent { background:rgba(245,158,11,0.12); color:#f59e0b; border-color:rgba(245,158,11,0.2); }
.hq-btn--accent:hover { background:rgba(245,158,11,0.22); color:#fbbf24; }

/* ── News ── */
.hq-news { padding:0; }
.hq-news-row {
    display:flex; align-items:center; gap:0.85rem;
    padding:0.85rem 1.1rem; text-decoration:none;
    transition:all 0.25s ease; position:relative;
    border-left:3px solid transparent;
}
.hq-news-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,0.04); }
.hq-news-row:hover {
    background:linear-gradient(90deg, rgba(239,68,68,0.04), rgba(255,255,255,0.02) 60%);
    border-left-color:#ef4444;
    padding-left:calc(1.1rem + 4px);
}
.hq-news-icon {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:0.85rem; transition:all 0.25s;
}
.hq-news-row:hover .hq-news-icon { transform:scale(1.1) rotate(-5deg); }
.hq-news-icon--red { background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.12); }
.hq-news-icon--green { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.12); }
.hq-news-icon--amber { background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.12); }
.hq-news-icon--blue { background:rgba(59,130,246,0.1); color:#3b82f6; border:1px solid rgba(59,130,246,0.12); }
.hq-news-row:hover .hq-news-icon--red { box-shadow:0 0 12px rgba(239,68,68,0.25); }
.hq-news-row:hover .hq-news-icon--green { box-shadow:0 0 12px rgba(34,197,94,0.25); }
.hq-news-row:hover .hq-news-icon--amber { box-shadow:0 0 12px rgba(245,158,11,0.25); }
.hq-news-row:hover .hq-news-icon--blue { box-shadow:0 0 12px rgba(59,130,246,0.25); }
.hq-news-body { flex:1; min-width:0; }
.hq-news-body strong { display:block; color:#e5e7eb; font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 0.2s; }
.hq-news-row:hover .hq-news-body strong { color:#fff; }
.hq-news-body p { margin:0.15rem 0 0; color:#6b7280; font-size:0.74rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hq-news-time { font-size:0.68rem; color:#4b5563; font-weight:600; flex-shrink:0; white-space:nowrap; transition:color 0.2s; }
.hq-news-row:hover .hq-news-time { color:#9ca3af; }

/* ── Empty State ── */
.hq-empty-state { padding:2rem 1.15rem; text-align:center; }
.hq-empty-state i { font-size:1.6rem; color:#374151; margin-bottom:0.6rem; display:block; animation:hqEmptyFloat 3s ease-in-out infinite; }
@keyframes hqEmptyFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.hq-empty-state p { color:#6b7280; font-size:0.82rem; margin:0 0 0.85rem; }

/* ── My Tournaments ── */
.hq-tournaments { padding:0.5rem; display:flex; flex-direction:column; gap:0.5rem; }
.hq-tourney-card {
    display:block; text-decoration:none; padding:1rem;
    border-radius:12px; background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.05); transition:all 0.3s ease;
    position:relative; overflow:hidden;
}
.hq-tourney-card::before {
    content:''; position:absolute; inset:0; border-radius:12px;
    background:linear-gradient(135deg, rgba(239,68,68,0.05) 0%, transparent 50%, rgba(245,158,11,0.05) 100%);
    opacity:0; transition:opacity 0.3s ease;
}
.hq-tourney-card:hover::before { opacity:1; }
.hq-tourney-card:hover { border-color:rgba(239,68,68,0.2); background:rgba(255,255,255,0.03); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(239,68,68,0.08); }
.hq-tourney-header { display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; margin-bottom:0.65rem; }
.hq-tourney-title-row { display:flex; align-items:center; gap:0.65rem; min-width:0; }
.hq-tourney-logo { width:36px; height:36px; border-radius:8px; object-fit:contain; flex-shrink:0; transition:transform 0.3s; }
.hq-tourney-card:hover .hq-tourney-logo { transform:scale(1.1) rotate(-3deg); }
.hq-tourney-logo--empty { width:36px; height:36px; border-radius:8px; background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.1); display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:#ef4444; flex-shrink:0; transition:all 0.3s; }
.hq-tourney-card:hover .hq-tourney-logo--empty { background:rgba(239,68,68,0.12); box-shadow:0 0 10px rgba(239,68,68,0.15); }
.hq-tourney-title-row h4 { margin:0; font-size:0.9rem; font-weight:700; color:#e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hq-tourney-type { font-size:0.68rem; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.hq-tourney-status {
    padding:0.2rem 0.55rem; border-radius:6px; font-size:0.65rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; flex-shrink:0;
}
.hq-tourney-status--live { background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.18); animation:hq-pulse 1.5s ease-in-out infinite; box-shadow:0 0 10px rgba(239,68,68,0.2); }
.hq-tourney-status--reg { background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.15); }
.hq-tourney-status--upcoming { background:rgba(59,130,246,0.1); color:#3b82f6; border:1px solid rgba(59,130,246,0.15); }
.hq-tourney-status--done { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.15); }
.hq-tourney-status--draft { background:rgba(107,114,128,0.1); color:#9ca3af; border:1px solid rgba(107,114,128,0.15); }
@keyframes hq-pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.6; } }
.hq-tourney-meta { display:flex; flex-wrap:wrap; gap:0.65rem; }
.hq-tourney-meta span { font-size:0.74rem; color:#9ca3af; display:flex; align-items:center; gap:0.3rem; }
.hq-tourney-meta i { font-size:0.65rem; color:#4b5563; }
.hq-tourney-progress { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; }
.hq-tourney-bar { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden; }
.hq-tourney-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#ef4444,#f59e0b); transition:width 0.4s ease; position:relative; overflow:hidden; }
.hq-tourney-fill::after {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation:hqBarShine 2.5s ease-in-out infinite;
}
@keyframes hqBarShine { 0%{left:-100%;} 100%{left:200%;} }
.hq-tourney-pct { font-size:0.65rem; color:#6b7280; font-weight:700; flex-shrink:0; }

/* ── Calendar ── */
.hq-card--calendar { position:relative; overflow:visible; }
.hq-calendar { padding:0.5rem 1.1rem 0.75rem; }
.hq-cal-nav { display:flex; align-items:center; gap:0.5rem; }
.hq-cal-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:0.7rem; cursor:pointer; transition:all 0.2s; }
.hq-cal-btn:hover { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.15); color:#ef4444; }
.hq-cal-month { font-size:0.82rem; font-weight:700; color:#e5e7eb; min-width:120px; text-align:center; }
.hq-cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.hq-cal-weekdays span { text-align:center; font-size:0.62rem; font-weight:700; color:#4b5563; text-transform:uppercase; letter-spacing:0.4px; padding:0.35rem 0; }
.hq-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }

/* Day cell */
.hq-cal-day {
    position:relative; text-align:center; padding:0.3rem 0.1rem 0.2rem;
    font-size:0.78rem; font-weight:600; color:#4b5563;
    border-radius:8px; cursor:default; transition:all 0.15s;
    min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    border:1px solid transparent;
}
.hq-cal-num { font-size:0.72rem; font-weight:700; line-height:1; margin-bottom:2px; }
.hq-cal-day--blank { visibility:hidden; }
.hq-cal-day--today { color:#fff; background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.2); }
.hq-cal-day--today .hq-cal-num { color:#ef4444; }
.hq-cal-day--event { color:#c9cdd4; cursor:pointer; background:rgba(255,255,255,0.02); }
.hq-cal-day--event:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.08); }
.hq-cal-day--selected { border-color:rgba(255,255,255,0.2) !important; background:rgba(255,255,255,0.05) !important; }

/* Your team's match day — gold accent */
.hq-cal-day--mine {
    background:rgba(245,158,11,0.06); border-color:rgba(245,158,11,0.18);
    box-shadow:inset 0 0 12px rgba(245,158,11,0.06);
}
.hq-cal-day--mine .hq-cal-num { color:#f59e0b; }
.hq-cal-day--mine:hover { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.25); }

/* MATCH DAY — bright, unmissable — team plays on this day */
.hq-cal-day--match {
    background:linear-gradient(135deg, rgba(245,158,11,0.1), rgba(239,68,68,0.06));
    border-color:rgba(245,158,11,0.35);
    box-shadow:inset 0 0 16px rgba(245,158,11,0.08), 0 0 8px rgba(245,158,11,0.1);
}
.hq-cal-day--match .hq-cal-num { color:#f59e0b; font-weight:800; font-size:0.8rem; }
.hq-cal-day--match:hover {
    background:linear-gradient(135deg, rgba(245,158,11,0.18), rgba(239,68,68,0.1));
    border-color:rgba(245,158,11,0.45);
    box-shadow:inset 0 0 18px rgba(245,158,11,0.1), 0 0 12px rgba(245,158,11,0.15);
}

/* Match badge icon */
.hq-cal-match-badge {
    display:flex; align-items:center; justify-content:center;
    font-size:0.55rem; color:#f59e0b;
    margin-top:1px;
    text-shadow:0 0 6px rgba(245,158,11,0.4);
}
.hq-cal-match-badge--won { color:#22c55e; text-shadow:0 0 6px rgba(34,197,94,0.4); }
.hq-cal-match-badge--advanced { color:#22c55e; text-shadow:0 0 6px rgba(34,197,94,0.4); }
.hq-cal-match-badge--lost { color:#ef4444; text-shadow:0 0 6px rgba(239,68,68,0.3); }
.hq-cal-match-badge--eliminated { color:#ef4444; text-shadow:0 0 6px rgba(239,68,68,0.3); }
.hq-cal-match-badge--champion { color:#f59e0b; font-size:0.65rem; text-shadow:0 0 8px rgba(245,158,11,0.5); animation:hq-cal-trophy 2s ease-in-out infinite; }

/* Result-based day accents */
.hq-cal-day--won {
    background:linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03)) !important;
    border-color:rgba(34,197,94,0.3) !important;
}
.hq-cal-day--won .hq-cal-num { color:#22c55e !important; }
.hq-cal-day--advanced {
    background:linear-gradient(135deg, rgba(34,197,94,0.1), rgba(59,130,246,0.05)) !important;
    border-color:rgba(34,197,94,0.35) !important;
    box-shadow:inset 0 0 12px rgba(34,197,94,0.06), 0 0 6px rgba(34,197,94,0.08) !important;
}
.hq-cal-day--advanced .hq-cal-num { color:#22c55e !important; font-weight:800; }
.hq-cal-day--lost {
    background:linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02)) !important;
    border-color:rgba(239,68,68,0.2) !important;
}
.hq-cal-day--lost .hq-cal-num { color:#ef4444 !important; }
.hq-cal-day--eliminated {
    background:linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.03)) !important;
    border-color:rgba(239,68,68,0.3) !important;
    box-shadow:inset 0 0 10px rgba(239,68,68,0.05) !important;
}
.hq-cal-day--eliminated .hq-cal-num { color:#ef4444 !important; font-weight:800; }
.hq-cal-day--champion {
    background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(234,179,8,0.06)) !important;
    border-color:rgba(245,158,11,0.4) !important;
    box-shadow:inset 0 0 14px rgba(245,158,11,0.08), 0 0 8px rgba(245,158,11,0.12) !important;
}
.hq-cal-day--champion .hq-cal-num { color:#f59e0b !important; font-weight:900; }
.hq-cal-day--playing {
    background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.03)) !important;
    border-color:rgba(59,130,246,0.25) !important;
}
.hq-cal-day--playing .hq-cal-num { color:#3b82f6 !important; }

/* Milestone day (registration / stage / tournament dates — no matches) */
.hq-cal-day--milestone {
    background:rgba(139,92,246,0.05); border-color:rgba(139,92,246,0.15);
}
.hq-cal-day--milestone .hq-cal-num { color:#a78bfa; }
.hq-cal-day--milestone:hover { background:rgba(139,92,246,0.1); border-color:rgba(139,92,246,0.22); }

/* LIVE match — pulsing red */
.hq-cal-day--live {
    background:rgba(239,68,68,0.08) !important; border-color:rgba(239,68,68,0.3) !important;
    animation:hqCalLivePulse 2s ease-in-out infinite;
}
.hq-cal-day--live .hq-cal-num { color:#ef4444; font-weight:800; }
@keyframes hqCalLivePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow:0 0 8px 2px rgba(239,68,68,0.15); }
}

/* Indicators row */
.hq-cal-indicators { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin-top:2px; }

/* Tournament logo circle */
.hq-cal-logo-wrap {
    position:relative; width:45px; height:45px; border-radius:50%; overflow:visible;
    border:2px solid #6b7280; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.5); transition:all 0.2s;
}
.hq-cal-logo-wrap:hover { transform:scale(1.15); z-index:2; }
.hq-cal-logo-wrap--mine { border-color:#f59e0b !important; box-shadow:0 0 8px rgba(245,158,11,0.4); }
.hq-cal-logo-wrap--live { border-color:#ef4444 !important; box-shadow:0 0 8px rgba(239,68,68,0.4); }
.hq-cal-logo-wrap--icon { font-size:0.7rem; color:#9ca3af; }
.hq-cal-logo-wrap--mine.hq-cal-logo-wrap--icon { color:#f59e0b; }
.hq-cal-logo { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* LIVE pulse dot on logo */
.hq-cal-pulse {
    position:absolute; top:-2px; right:-2px; width:7px; height:7px;
    background:#ef4444; border-radius:50%; border:1px solid rgba(10,12,18,0.9);
    animation:hqCalDotPulse 1.5s ease-in-out infinite;
}
@keyframes hqCalDotPulse {
    0%,100% { transform:scale(1); opacity:1; }
    50% { transform:scale(1.4); opacity:0.7; }
}

/* Match count badge */
.hq-cal-count {
    position:absolute; top:2px; right:2px;
    font-size:0.5rem; font-weight:800; color:#fff;
    background:#ef4444; border-radius:50%; width:14px; height:14px;
    display:flex; align-items:center; justify-content:center;
    line-height:1; border:1px solid rgba(10,12,18,0.6);
}

/* Legend */
.hq-cal-legend { display:flex; flex-wrap:wrap; gap:0.9rem; padding:0.55rem 1.1rem 0.65rem; border-top:1px solid rgba(255,255,255,0.04); }
.hq-cal-legend-item { display:flex; align-items:center; gap:0.35rem; font-size:0.65rem; color:#6b7280; font-weight:600; }
.hq-cal-legend-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; }
.hq-cal-legend-swatch--mine { background:rgba(245,158,11,0.2); border:1.5px solid #f59e0b; }
.hq-cal-legend-swatch--match { background:linear-gradient(135deg, rgba(245,158,11,0.25), rgba(239,68,68,0.1)); border:1.5px solid #f59e0b; }
.hq-cal-legend-swatch--live { background:rgba(239,68,68,0.2); border:1.5px solid #ef4444; }
.hq-cal-legend-swatch--event { background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.15); }
.hq-cal-legend-swatch--milestone { background:rgba(139,92,246,0.2); border:1.5px solid #8b5cf6; }

/* ── Detail Panel ── */
.hq-cal-detail {
    display:none; border-top:1px solid rgba(255,255,255,0.04);
    padding:0.85rem 1.1rem 1rem; animation:hqCalSlideIn 0.25s ease;
}
@keyframes hqCalSlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Detail header */
.hq-cal-dh {
    display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
    padding-bottom:0.6rem; margin-bottom:0.6rem; border-bottom:1px solid rgba(255,255,255,0.04);
}
.hq-cal-dh-left { display:flex; align-items:center; gap:0.6rem; }
.hq-cal-dh-date { font-size:0.8rem; font-weight:700; color:#e5e7eb; }
.hq-cal-dh-date i { color:#ef4444; margin-right:0.3rem; }
.hq-cal-dh-count { font-size:0.65rem; color:#6b7280; font-weight:600; }
.hq-cal-dh-right { display:flex; align-items:center; gap:0.5rem; }
.hq-cal-dh-close {
    background:none; border:none; color:#6b7280; font-size:1.1rem;
    cursor:pointer; padding:0 0.2rem; transition:color 0.15s;
}
.hq-cal-dh-close:hover { color:#ef4444; }

/* Status tags (LIVE, YOUR TEAM) */
.hq-cal-tag {
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.15rem 0.5rem; border-radius:5px;
    font-size:0.58rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
}
.hq-cal-tag--live {
    background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25); color:#ef4444;
}
.hq-cal-tag-dot {
    width:6px; height:6px; border-radius:50%; background:#ef4444;
    animation:hqCalDotPulse 1.5s ease-in-out infinite;
}
.hq-cal-tag--mine {
    background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.06));
    border:1px solid rgba(245,158,11,0.25); color:#f59e0b;
}
.hq-cal-tag--mine i { font-size:0.5rem; }
.hq-cal-tag--match {
    background:linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.08));
    border:1px solid rgba(245,158,11,0.3); color:#f59e0b;
    font-weight:800;
}
.hq-cal-tag--match i { font-size:0.5rem; margin-right:1px; }

/* Detail list */
.hq-cal-dl { display:flex; flex-direction:column; gap:6px; }

/* Detail item (single match row) */
.hq-cal-di {
    display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.75rem;
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04);
    border-radius:10px; transition:all 0.15s;
}
.hq-cal-di:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }
.hq-cal-di--mine {
    border-left:3px solid #f59e0b; background:rgba(245,158,11,0.03);
}
.hq-cal-di--live {
    border-left:3px solid #ef4444; background:rgba(239,68,68,0.04);
    animation:hqCalItemLive 3s ease-in-out infinite;
}
/* Milestone detail item — purple left border */
.hq-cal-di--milestone {
    border-left:3px solid #8b5cf6; background:rgba(139,92,246,0.03);
}
.hq-cal-di--milestone:hover { background:rgba(139,92,246,0.06); }
@keyframes hqCalItemLive {
    0%,100% { background:rgba(239,68,68,0.04); }
    50% { background:rgba(239,68,68,0.07); }
}

/* Detail logo */
.hq-cal-di-logo {
    width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0;
    border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.3);
}
.hq-cal-di-logo--ph {
    display:flex; align-items:center; justify-content:center;
    color:#6b7280; font-size:0.85rem;
}

/* Detail info */
.hq-cal-di-info { flex:1; min-width:0; }
.hq-cal-di-name {
    font-size:0.8rem; font-weight:700; color:#e5e7eb; text-decoration:none;
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 0.15s;
}
.hq-cal-di-name:hover { color:#ef4444; }
.hq-cal-di-meta { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.25rem; }
.hq-cal-di-chip {
    font-size:0.6rem; font-weight:600; color:#9ca3af;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    border-radius:4px; padding:0.1rem 0.4rem;
    display:inline-flex; align-items:center; gap:0.2rem;
}
.hq-cal-di-chip i { font-size:0.5rem; color:#6b7280; }
.hq-cal-di-chip--stage { color:#ef4444; border-color:rgba(239,68,68,0.15); background:rgba(239,68,68,0.06); }
.hq-cal-di-maps { font-size:0.58rem; color:#6b7280; margin-top:0.2rem; }
.hq-cal-di-maps i { margin-right:0.2rem; font-size:0.5rem; }

/* Match label (CS matchup name) */
.hq-cal-di-matchlabel { font-size:0.72rem; font-weight:700; color:#f59e0b; margin-top:0.25rem; display:flex; align-items:center; gap:0.3rem; }
.hq-cal-di-matchlabel i { font-size:0.6rem; color:#d97706; }

/* Individual games list */
.hq-cal-di-games { margin-top:0.35rem; display:flex; flex-direction:column; gap:0.15rem; }
.hq-cal-di-game { display:flex; align-items:center; gap:0.5rem; padding:0.2rem 0.5rem; border-radius:4px; background:rgba(245,158,11,0.06); border-left:2px solid rgba(245,158,11,0.25); transition:all 0.2s; }
.hq-cal-di-game:hover { background:rgba(245,158,11,0.12); border-left-color:rgba(245,158,11,0.5); }
.hq-cal-di-game-label { font-size:0.65rem; font-weight:700; color:#e5e7eb; white-space:nowrap; }
.hq-cal-di-game-label i { font-size:0.55rem; color:#f59e0b; margin-right:0.2rem; }
.hq-cal-di-game-map { font-size:0.6rem; color:#9ca3af; display:flex; align-items:center; gap:0.2rem; text-transform:capitalize; }
.hq-cal-di-game-map i { font-size:0.5rem; color:#6b7280; }
.hq-cal-di-game-stats { display:flex; align-items:center; gap:0.3rem; margin-left:auto; }
.hq-cal-di-game-stat { font-size:0.58rem; font-weight:700; color:#d1d5db; display:inline-flex; align-items:center; gap:0.15rem; padding:0.1rem 0.3rem; background:rgba(255,255,255,0.05); border-radius:3px; white-space:nowrap; }
.hq-cal-di-game-stat i { font-size:0.5rem; color:#9ca3af; }
.hq-cal-di-game-stat--gold { color:#f59e0b; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.25); }
.hq-cal-di-game-stat--gold i { color:#f59e0b; }
.hq-cal-di-game-stat--top3 { color:#22c55e; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); }
.hq-cal-di-game-stat--top3 i { color:#22c55e; }

/* ── Calendar Performance Styles ── */
.hq-cal-perf { margin-top:0.5rem; padding:0.5rem 0.6rem; background:rgba(255,255,255,0.03); border-radius:6px; border:1px solid rgba(255,255,255,0.06); }
.hq-cal-perf__row { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; }
.hq-cal-perf__row--secondary { margin-top:0.25rem; opacity:0.7; }
.hq-cal-perf__stat { font-size:0.65rem; font-weight:600; color:#d1d5db; display:inline-flex; align-items:center; gap:0.2rem; padding:0.15rem 0.4rem; background:rgba(255,255,255,0.04); border-radius:4px; }
.hq-cal-perf__stat i { font-size:0.55rem; color:#9ca3af; }
.hq-cal-perf__stat--pos { color:#f59e0b; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); font-weight:800; }
.hq-cal-perf__stat--pos i { color:#f59e0b; }
.hq-cal-perf__stat--booyah { color:#ef4444; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); text-transform:uppercase; letter-spacing:0.03em; }
.hq-cal-perf__stat--booyah i { color:#ef4444; }
.hq-cal-perf__stat--sm { font-size:0.58rem; font-weight:500; color:#9ca3af; }
.hq-cal-perf__form { display:flex; gap:0.2rem; margin-top:0.3rem; }
.hq-cal-perf__form-w, .hq-cal-perf__form-l { width:18px; height:18px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:800; }
.hq-cal-perf__form-w { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.3); }
.hq-cal-perf__form-l { background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.25); }
.hq-cal-perf__status { margin-top:0.35rem; font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; display:flex; align-items:center; gap:0.3rem; padding:0.2rem 0.5rem; border-radius:4px; width:fit-content; }
.hq-cal-perf__status i { font-size:0.55rem; }
.hq-cal-perf__status--advanced { color:#22c55e; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); }
.hq-cal-perf__status--eliminated { color:#ef4444; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); }
.hq-cal-perf__cs { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.hq-cal-perf__cs-vs { font-size:0.7rem; color:#d1d5db; }
.hq-cal-perf__cs-vs strong { color:#f3f4f6; }
.hq-cal-perf__score { font-size:0.85rem; font-weight:900; padding:0.15rem 0.5rem; border-radius:4px; letter-spacing:0.05em; }
.hq-cal-perf__score--win { color:#22c55e; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); }
.hq-cal-perf__score--loss { color:#ef4444; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); }
.hq-cal-perf__score--pending { color:#9ca3af; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); font-size:0.7rem; font-weight:600; }
.hq-cal-perf__winner { margin-top:0.4rem; font-size:0.75rem; font-weight:900; color:#f59e0b; background:linear-gradient(135deg, rgba(245,158,11,0.15), rgba(234,179,8,0.08)); border:1px solid rgba(245,158,11,0.3); border-radius:6px; padding:0.3rem 0.7rem; display:flex; align-items:center; gap:0.35rem; width:fit-content; text-transform:uppercase; letter-spacing:0.06em; animation:hq-cal-trophy 2s ease-in-out infinite; }
.hq-cal-perf__winner i { font-size:0.85rem; }
@keyframes hq-cal-trophy { 0%,100%{ text-shadow:0 0 4px rgba(245,158,11,0.3); } 50%{ text-shadow:0 0 12px rgba(245,158,11,0.6); } }

/* Detail right column */
.hq-cal-di-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; flex-shrink:0; }
.hq-cal-di-time { font-size:0.75rem; font-weight:700; color:#e5e7eb; }
.hq-cal-di-time i { color:#6b7280; margin-right:0.2rem; font-size:0.65rem; }
.hq-cal-di-status { font-size:0.62rem; font-weight:700; text-transform:capitalize; }

/* ── Player Stats Card ── */
.hq-stats { padding:0.25rem 0; }
.hq-stat-row { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1.1rem; transition:all 0.25s; position:relative; }
.hq-stat-row::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:0;
    background:linear-gradient(90deg, rgba(239,68,68,0.06), transparent);
    transition:width 0.3s ease; border-radius:0 4px 4px 0;
}
.hq-stat-row:hover::before { width:100%; }
.hq-stat-row:hover { background:transparent; }
.hq-stat-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,0.04); }
.hq-stat-lbl { font-size:0.78rem; color:#9ca3af; display:flex; align-items:center; gap:0.4rem; position:relative; z-index:1; }
.hq-stat-lbl i { font-size:0.68rem; color:#4b5563; width:14px; text-align:center; transition:all 0.25s; }
.hq-stat-row:hover .hq-stat-lbl i { color:#ef4444; transform:scale(1.2); }
.hq-stat-val { font-size:0.86rem; font-weight:700; color:#e5e7eb; transition:all 0.25s; position:relative; z-index:1; }
.hq-stat-row:hover .hq-stat-val { transform:scale(1.08); color:#fff; }
.hq-stat-val--accent { color:#ef4444; }
.hq-stat-row:hover .hq-stat-val--accent { text-shadow:0 0 12px rgba(239,68,68,0.4); }
.hq-stat-val--gold { color:#f59e0b; text-shadow:0 0 10px rgba(245,158,11,0.3); }
.hq-stat-row:hover .hq-stat-val--gold { text-shadow:0 0 16px rgba(245,158,11,0.5); }

/* ── Rank Card ── */
.hq-rank { padding:1rem 1.1rem; position:relative; overflow:hidden; }
.hq-rank::before {
    content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px;
    border-radius:50%; filter:blur(40px); opacity:0.15; pointer-events:none;
    background:currentColor; transition:opacity 0.3s;
}
.hq-rank:hover::before { opacity:0.25; }
.hq-rank-visual { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.6rem; }
.hq-rank-tier { font-size:1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:0.3px; text-shadow:0 0 20px currentColor; transition:all 0.3s; }
.hq-rank:hover .hq-rank-tier { text-shadow:0 0 30px currentColor, 0 0 60px currentColor; transform:scale(1.05); }
.hq-rank-pts { font-size:0.76rem; color:#6b7280; font-weight:600; }
.hq-rank-bar { height:8px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; margin-bottom:0.35rem; position:relative; }
.hq-rank-fill { height:100%; border-radius:4px; transition:width 0.8s ease; position:relative; }
.hq-rank-fill::after {
    content:''; position:absolute; top:0; right:0; height:100%; width:20px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    border-radius:4px; animation:hqRankShine 2s ease-in-out infinite;
}
@keyframes hqRankShine { 0%,100%{opacity:0.3;} 50%{opacity:0.8;} }
.hq-rank-range { display:flex; justify-content:space-between; font-size:0.64rem; color:#4b5563; font-weight:600; }
.hq-rank--bronze { color:#cd7f32; } .hq-rank-fill.hq-rank--bronze { background:linear-gradient(90deg,#92400e,#cd7f32); }
.hq-rank--silver { color:#c0c0c0; } .hq-rank-fill.hq-rank--silver { background:linear-gradient(90deg,#6b7280,#c0c0c0); }
.hq-rank--gold { color:#fcd34d; } .hq-rank-fill.hq-rank--gold { background:linear-gradient(90deg,#b45309,#fcd34d); }
.hq-rank--platinum { color:#93c5fd; } .hq-rank-fill.hq-rank--platinum { background:linear-gradient(90deg,#1e40af,#93c5fd); }
.hq-rank--diamond { color:#a5f3fc; } .hq-rank-fill.hq-rank--diamond { background:linear-gradient(90deg,#155e75,#a5f3fc); }
.hq-rank--heroic { color:#c4b5fd; } .hq-rank-fill.hq-rank--heroic { background:linear-gradient(90deg,#6d28d9,#c4b5fd); }
.hq-rank--grandmaster { color:#fbbf24; } .hq-rank-fill.hq-rank--grandmaster { background:linear-gradient(90deg,#dc2626,#fbbf24); }

/* ── Team Card ── */
.hq-team { padding:1rem 1.1rem; }
.hq-team-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.85rem; }
.hq-team-badge { width:40px; height:40px; border-radius:10px; object-fit:contain; flex-shrink:0; transition:all 0.3s; border:1px solid rgba(255,255,255,0.06); }
.hq-team-row:hover .hq-team-badge { transform:scale(1.1) rotate(-5deg); box-shadow:0 0 14px rgba(34,197,94,0.2); }
.hq-team-badge--empty { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:1rem; color:#4b5563; transition:all 0.3s; }
.hq-team-row:hover .hq-team-badge--empty { border-color:rgba(34,197,94,0.2); color:#22c55e; background:rgba(34,197,94,0.06); }
.hq-team-row strong { display:block; color:#e5e7eb; font-size:0.9rem; transition:color 0.2s; }
.hq-team-row:hover strong { color:#fff; }
.hq-team-row small { color:#6b7280; font-size:0.76rem; }
.hq-team-empty { padding:1.5rem 1.1rem; text-align:center; }
.hq-team-empty i { font-size:1.4rem; color:#374151; margin-bottom:0.5rem; display:block; animation:hqEmptyFloat 3s ease-in-out infinite; }
.hq-team-empty p { color:#6b7280; font-size:0.8rem; margin:0 0 0.85rem; }

/* ── Engagement Card ── */
.hq-engage { display:grid; grid-template-columns:repeat(3,1fr); padding:1rem 0.5rem; }
.hq-engage-item { display:flex; flex-direction:column; align-items:center; gap:0.15rem; padding:0.4rem; transition:all 0.3s; border-radius:10px; cursor:default; }
.hq-engage-item:hover { background:rgba(255,255,255,0.03); transform:translateY(-2px); }
.hq-engage-item i { font-size:0.9rem; color:#4b5563; margin-bottom:0.2rem; transition:all 0.3s; }
.hq-engage-item:nth-child(1):hover i { color:#ef4444; filter:drop-shadow(0 0 6px rgba(239,68,68,0.4)); }
.hq-engage-item:nth-child(2):hover i { color:#3b82f6; filter:drop-shadow(0 0 6px rgba(59,130,246,0.4)); }
.hq-engage-item:nth-child(3):hover i { color:#f59e0b; filter:drop-shadow(0 0 6px rgba(245,158,11,0.4)); }
.hq-engage-item span { font-size:1.15rem; font-weight:800; color:#fff; line-height:1; transition:transform 0.3s; }
.hq-engage-item:hover span { transform:scale(1.15); }
.hq-engage-item small { font-size:0.62rem; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }

/* ── Inbox / Notifications Card ── */
.hq-card--inbox { border-color:rgba(239,68,68,0.12); position:relative; overflow:hidden; }
.hq-card--inbox::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #ef4444, #a78bfa, #ef4444, transparent);
    background-size:300% 100%;
    animation:hqInboxGlow 4s ease infinite;
}
@keyframes hqInboxGlow { 0%,100%{background-position:300% 0;} 50%{background-position:-300% 0;} }

.hq-card--inbox .hq-card-top { display:flex; align-items:center; gap:0.5rem; }

.hq-inbox-badge {
    background:linear-gradient(135deg, #ef4444, #dc2626);
    color:#fff; font-size:0.65rem; font-weight:800; padding:2px 7px;
    border-radius:10px; min-width:18px; text-align:center;
    box-shadow:0 0 10px rgba(239,68,68,0.35);
    animation:hqInboxPulse 2s ease infinite;
}
@keyframes hqInboxPulse {
    0%,100%{box-shadow:0 0 10px rgba(239,68,68,0.35);}
    50%{box-shadow:0 0 18px rgba(239,68,68,0.55);}
}

.hq-inbox-markall {
    margin-left:auto; background:none; border:1px solid rgba(255,255,255,0.08);
    color:#6b7280; font-size:0.7rem; padding:4px 8px; border-radius:6px;
    cursor:pointer; transition:all 0.25s;
}
.hq-inbox-markall:hover { color:#22c55e; border-color:rgba(34,197,94,0.3); background:rgba(34,197,94,0.06); }

.hq-inbox-list { max-height:320px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(239,68,68,0.2) transparent; }
.hq-inbox-list::-webkit-scrollbar { width:4px; }
.hq-inbox-list::-webkit-scrollbar-track { background:transparent; }
.hq-inbox-list::-webkit-scrollbar-thumb { background:rgba(239,68,68,0.2); border-radius:4px; }

.hq-inbox-empty {
    padding:2rem 1rem; text-align:center; color:#4b5563;
}
.hq-inbox-empty i {
    font-size:2rem; margin-bottom:0.5rem; display:block;
    background:linear-gradient(135deg, #4b5563, #374151);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    animation:hqEmptyFloat 3s ease-in-out infinite;
}
@keyframes hqEmptyFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.hq-inbox-empty p { font-size:0.78rem; margin:0; }

.hq-inbox-msg {
    border-bottom:1px solid rgba(255,255,255,0.03);
    transition:all 0.3s ease; position:relative;
}
.hq-inbox-msg:last-child { border-bottom:none; }

/* Clickable row (the preview) */
.hq-inbox-row {
    display:flex; align-items:center; gap:0.65rem; padding:0.7rem 1rem;
    cursor:pointer; transition:all 0.25s ease; user-select:none;
}
.hq-inbox-row:hover { background:rgba(255,255,255,0.025); }

/* Unread state */
.hq-inbox-msg--unread { background:rgba(239,68,68,0.03); border-left:2px solid #ef4444; }
.hq-inbox-msg--unread:hover { background:rgba(239,68,68,0.06); }
.hq-inbox-msg--unread .hq-inbox-text { color:#f3f4f6; font-weight:600; }
.hq-inbox-msg--unread .hq-inbox-icon { box-shadow:0 0 8px rgba(239,68,68,0.15); }

/* Preview text area */
.hq-inbox-preview { flex:1; min-width:0; }
.hq-inbox-text {
    color:#d1d5db; font-size:0.8rem; margin:0 0 3px; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; transition:color 0.2s;
}
.hq-inbox-row:hover .hq-inbox-text { color:#e5e7eb; }
.hq-inbox-time { color:#4b5563; font-size:0.65rem; letter-spacing:0.02em; }

/* Chevron indicator */
.hq-inbox-chevron {
    color:#4b5563; font-size:0.6rem; flex-shrink:0;
    transition:transform 0.3s ease, color 0.3s;
}
.hq-inbox-msg--open .hq-inbox-chevron { transform:rotate(180deg); color:#ef4444; }

/* ── Expanded email view ── */
.hq-inbox-expand {
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.3s ease;
    padding:0 1rem; border-top:0 solid rgba(255,255,255,0.04);
    background:rgba(0,0,0,0.15);
}
.hq-inbox-msg--open .hq-inbox-expand {
    max-height:300px; opacity:1;
    padding:0.85rem 1rem 1rem; border-top-width:1px;
}

.hq-inbox-expand-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:0.65rem; padding-bottom:0.5rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
}

/* Type tag pill */
.hq-inbox-type-tag {
    font-size:0.6rem; font-weight:700; text-transform:uppercase;
    padding:2px 8px; border-radius:4px; letter-spacing:0.05em;
}
.hq-inbox-type-tag--info { background:rgba(59,130,246,0.12); color:#60a5fa; }
.hq-inbox-type-tag--success { background:rgba(34,197,94,0.12); color:#22c55e; }
.hq-inbox-type-tag--warning { background:rgba(245,158,11,0.12); color:#f59e0b; }
.hq-inbox-type-tag--error { background:rgba(239,68,68,0.12); color:#ef4444; }
.hq-inbox-type-tag--tournament { background:rgba(245,158,11,0.12); color:#fbbf24; }
.hq-inbox-type-tag--invite { background:rgba(167,139,250,0.12); color:#a78bfa; }
.hq-inbox-type-tag--team { background:rgba(239,68,68,0.1); color:#ef4444; }

.hq-inbox-expand-time { color:#4b5563; font-size:0.62rem; }

.hq-inbox-expand-content {
    margin-bottom:0.75rem;
}
.hq-inbox-expand-content p {
    color:#d1d5db; font-size:0.82rem; line-height:1.55; margin:0;
    word-break:break-word;
}

.hq-inbox-expand-actions {
    display:flex; gap:0.5rem; flex-wrap:wrap;
}

.hq-inbox-go-btn {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:6px;
    background:linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.08));
    color:#ef4444; border:1px solid rgba(239,68,68,0.2);
    text-decoration:none; transition:all 0.25s;
}
.hq-inbox-go-btn:hover {
    background:linear-gradient(135deg, rgba(239,68,68,0.25), rgba(239,68,68,0.12));
    box-shadow:0 0 12px rgba(239,68,68,0.2); transform:translateY(-1px);
}

.hq-inbox-read-btn {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:6px;
    background:rgba(34,197,94,0.08); color:#22c55e;
    border:1px solid rgba(34,197,94,0.15);
    cursor:pointer; transition:all 0.25s;
}
.hq-inbox-read-btn:hover {
    background:rgba(34,197,94,0.15); box-shadow:0 0 10px rgba(34,197,94,0.2);
    transform:translateY(-1px);
}

/* Active/open state accent */
.hq-inbox-msg--open .hq-inbox-row {
    background:rgba(239,68,68,0.04);
}
.hq-inbox-msg--open .hq-inbox-row .hq-inbox-icon {
    transform:scale(1.08);
}

/* Type icons */
.hq-inbox-icon {
    width:32px; height:32px; border-radius:8px; display:flex;
    align-items:center; justify-content:center; font-size:0.78rem;
    flex-shrink:0; transition:all 0.3s;
}
.hq-inbox-msg:hover .hq-inbox-icon { transform:scale(1.1); }

.hq-inbox-icon--info { background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--info { box-shadow:0 0 10px rgba(59,130,246,0.25); }

.hq-inbox-icon--success { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--success { box-shadow:0 0 10px rgba(34,197,94,0.25); }

.hq-inbox-icon--warning { background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--warning { box-shadow:0 0 10px rgba(245,158,11,0.25); }

.hq-inbox-icon--error { background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--error { box-shadow:0 0 10px rgba(239,68,68,0.25); }

.hq-inbox-icon--tournament { background:rgba(245,158,11,0.1); color:#fbbf24; border:1px solid rgba(245,158,11,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--tournament { box-shadow:0 0 10px rgba(245,158,11,0.25); }

.hq-inbox-icon--invite { background:rgba(167,139,250,0.1); color:#a78bfa; border:1px solid rgba(167,139,250,0.15); }
.hq-inbox-msg:hover .hq-inbox-icon--invite { box-shadow:0 0 10px rgba(167,139,250,0.25); }

.hq-inbox-icon--team { background:rgba(239,68,68,0.08); color:#ef4444; border:1px solid rgba(239,68,68,0.12); }
.hq-inbox-msg:hover .hq-inbox-icon--team { box-shadow:0 0 10px rgba(239,68,68,0.2); }

.hq-inbox-body { flex:1; min-width:0; }

/* Read-fade animation */
.hq-inbox-msg--reading {
    animation:hqMsgRead 0.4s ease forwards;
}
@keyframes hqMsgRead {
    0%{opacity:1; transform:translateX(0);}
    50%{opacity:0.5; transform:translateX(4px);}
    100%{opacity:1; transform:translateX(0); background:transparent; border-left-color:transparent;}
}

/* ── Private Messages (DM) Card ── */
.hq-card--dm {
    border-color:rgba(59,130,246,0.12); position:relative; overflow:hidden;
}
.hq-card--dm::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, transparent);
    opacity:0.8;
}
.hq-dm-badge {
    background:linear-gradient(135deg, #3b82f6, #6366f1);
    color:#fff; font-size:0.6rem; font-weight:800;
    padding:2px 7px; border-radius:8px; min-width:18px; text-align:center;
    box-shadow:0 0 8px rgba(59,130,246,0.3);
    animation:hqDmPulse 2s ease infinite;
}
@keyframes hqDmPulse { 0%,100%{box-shadow:0 0 8px rgba(59,130,246,0.3);} 50%{box-shadow:0 0 14px rgba(59,130,246,0.5);} }
.hq-dm-compose {
    margin-left:auto; background:none; border:1px solid rgba(59,130,246,0.2);
    color:#60a5fa; cursor:pointer; border-radius:6px; padding:3px 8px;
    font-size:0.7rem; transition:all 0.25s;
}
.hq-dm-compose:hover {
    background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.4);
    box-shadow:0 0 10px rgba(59,130,246,0.15);
}

.hq-dm-list { max-height:260px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(59,130,246,0.15) transparent; }
.hq-dm-list::-webkit-scrollbar { width:3px; }
.hq-dm-list::-webkit-scrollbar-thumb { background:rgba(59,130,246,0.2); border-radius:3px; }

.hq-dm-empty {
    padding:1.5rem 1rem; text-align:center; color:#4b5563;
}
.hq-dm-empty i {
    font-size:1.6rem; margin-bottom:0.4rem; display:block;
    background:linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hq-dm-empty p { font-size:0.78rem; margin:0 0 3px; color:#6b7280; }
.hq-dm-empty small { font-size:0.65rem; color:#4b5563; }

.hq-dm-row {
    display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.9rem;
    cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.03);
    transition:all 0.25s; position:relative;
}
.hq-dm-row:last-child { border-bottom:none; }
.hq-dm-row:hover { background:rgba(59,130,246,0.04); }
.hq-dm-row--unread { background:rgba(59,130,246,0.03); border-left:2px solid #3b82f6; }
.hq-dm-row--unread:hover { background:rgba(59,130,246,0.06); }

.hq-dm-avatar-wrap { position:relative; flex-shrink:0; }
.hq-dm-avatar {
    width:32px; height:32px; border-radius:50%; object-fit:cover;
    border:1.5px solid rgba(59,130,246,0.15);
}
.hq-dm-avatar--empty {
    width:32px; height:32px; border-radius:50%;
    background:rgba(59,130,246,0.08); display:flex; align-items:center;
    justify-content:center; color:#60a5fa; font-size:0.75rem;
    border:1.5px solid rgba(59,130,246,0.15);
}
.hq-dm-flag {
    position:absolute; bottom:-2px; right:-4px; width:14px; height:10px;
    border-radius:2px; object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,0.3);
}

.hq-dm-info { flex:1; min-width:0; }
.hq-dm-name-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.hq-dm-name {
    color:#e5e7eb; font-size:0.78rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 0.2s;
}
.hq-dm-row:hover .hq-dm-name { color:#fff; }
.hq-dm-row--unread .hq-dm-name { color:#fff; }
.hq-dm-time { color:#4b5563; font-size:0.6rem; flex-shrink:0; }
.hq-dm-row--unread .hq-dm-time { color:#60a5fa; }

.hq-dm-preview {
    color:#6b7280; font-size:0.7rem; margin:1px 0 0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.3;
}
.hq-dm-row--unread .hq-dm-preview { color:#9ca3af; font-weight:500; }

.hq-dm-team-tag {
    display:inline-flex; align-items:center; gap:3px;
    font-size:0.58rem; color:#4b5563; margin-top:2px;
}
.hq-dm-team-tag i { font-size:0.5rem; }

.hq-dm-unread-dot {
    background:linear-gradient(135deg, #3b82f6, #6366f1);
    color:#fff; font-size:0.55rem; font-weight:800;
    min-width:16px; height:16px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:0 0 6px rgba(59,130,246,0.3);
}

/* DM Chat Panel */
.hq-dm-chat {
    border-top:1px solid rgba(59,130,246,0.1);
}
.hq-dm-chat-header {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.55rem 0.9rem; background:rgba(59,130,246,0.03);
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.hq-dm-back {
    background:none; border:none; color:#60a5fa; cursor:pointer;
    font-size:0.85rem; padding:2px; transition:transform 0.2s;
}
.hq-dm-back:hover { transform:translateX(-2px); }
.hq-dm-chat-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.hq-dm-chat-who { flex:1; min-width:0; }
.hq-dm-chat-who strong { display:block; color:#e5e7eb; font-size:0.78rem; }
.hq-dm-chat-who small { color:#4b5563; font-size:0.62rem; }

.hq-dm-chat-messages {
    max-height:200px; overflow-y:auto; padding:0.6rem 0.8rem;
    display:flex; flex-direction:column; gap:0.35rem;
    scrollbar-width:thin; scrollbar-color:rgba(59,130,246,0.15) transparent;
}
.hq-dm-chat-messages::-webkit-scrollbar { width:3px; }
.hq-dm-chat-messages::-webkit-scrollbar-thumb { background:rgba(59,130,246,0.2); border-radius:3px; }

.hq-dm-bubble {
    max-width:80%; padding:0.4rem 0.65rem; border-radius:10px;
    font-size:0.75rem; line-height:1.35; word-break:break-word;
    animation:hqDmBubbleIn 0.2s ease;
}
@keyframes hqDmBubbleIn { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
.hq-dm-bubble--me {
    align-self:flex-end; background:linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.12));
    color:#e5e7eb; border-bottom-right-radius:3px;
    border:1px solid rgba(59,130,246,0.1);
}
.hq-dm-bubble--other {
    align-self:flex-start; background:rgba(255,255,255,0.04);
    color:#d1d5db; border-bottom-left-radius:3px;
    border:1px solid rgba(255,255,255,0.05);
}
.hq-dm-bubble-time {
    font-size:0.55rem; color:#4b5563; margin-top:1px; display:block;
}

.hq-dm-chat-input {
    display:flex; gap:0.4rem; padding:0.5rem 0.8rem;
    border-top:1px solid rgba(255,255,255,0.04);
    background:rgba(0,0,0,0.1);
}
.hq-dm-chat-input input {
    flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(59,130,246,0.12);
    color:#e5e7eb; border-radius:8px; padding:0.4rem 0.7rem; font-size:0.75rem;
    outline:none; transition:border-color 0.2s;
}
.hq-dm-chat-input input:focus { border-color:rgba(59,130,246,0.35); }
.hq-dm-chat-input input::placeholder { color:#4b5563; }
.hq-dm-send-btn {
    background:linear-gradient(135deg, #3b82f6, #6366f1);
    border:none; color:#fff; border-radius:8px; padding:0 0.7rem;
    cursor:pointer; font-size:0.75rem; transition:all 0.2s;
}
.hq-dm-send-btn:hover { box-shadow:0 0 12px rgba(59,130,246,0.3); transform:scale(1.05); }

/* DM Search Panel */
.hq-dm-search { border-top:1px solid rgba(59,130,246,0.1); }
.hq-dm-search-header {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.55rem 0.9rem; background:rgba(59,130,246,0.03);
    color:#e5e7eb; font-size:0.8rem; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.hq-dm-search-box {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.5rem 0.8rem;
}
.hq-dm-search-box i { color:#4b5563; font-size:0.75rem; }
.hq-dm-search-box input {
    flex:1; background:transparent; border:none; color:#e5e7eb;
    font-size:0.78rem; outline:none;
}
.hq-dm-search-box input::placeholder { color:#4b5563; }
.hq-dm-search-results { max-height:200px; overflow-y:auto; }
.hq-dm-search-result {
    display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.9rem;
    cursor:pointer; transition:background 0.2s; border-bottom:1px solid rgba(255,255,255,0.02);
}
.hq-dm-search-result:hover { background:rgba(59,130,246,0.05); }
.hq-dm-search-result img {
    width:28px; height:28px; border-radius:50%; object-fit:cover;
}
.hq-dm-search-result-info { flex:1; min-width:0; }
.hq-dm-search-result-info strong { display:block; color:#e5e7eb; font-size:0.78rem; }
.hq-dm-search-result-info small { color:#4b5563; font-size:0.62rem; }

/* ── Combined Rank & Team Card ── */
.hq-card--identity {
    border-color:rgba(167,139,250,0.1); position:relative; overflow:hidden;
}
.hq-card--identity::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #a78bfa, #f59e0b, transparent);
    opacity:0.7;
}
.hq-identity-section { padding:0.7rem 1.1rem; }
.hq-identity-divider {
    height:1px; margin:0 1rem;
    background:linear-gradient(90deg, transparent, rgba(167,139,250,0.12), transparent);
}
.hq-identity-team .hq-team-row { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.5rem; }
.hq-identity-team .hq-team-row strong { display:block; color:#e5e7eb; font-size:0.85rem; }
.hq-identity-team .hq-team-row small { color:#6b7280; font-size:0.72rem; }

/* ── Stats Card Themed ── */
.hq-card--stats {
    border-color:rgba(34,197,94,0.1); position:relative; overflow:hidden;
}
.hq-card--stats::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #22c55e, #3b82f6, transparent);
    opacity:0.7;
}

/* ── Engagement Card Themed ── */
.hq-card--engage {
    border-color:rgba(239,68,68,0.08); position:relative; overflow:hidden;
}
.hq-card--engage::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #ef4444, #f59e0b, transparent);
    opacity:0.6;
}

/* ── Results Card Themed ── */
.hq-card--results {
    border-color:rgba(245,158,11,0.08); position:relative; overflow:hidden;
}
.hq-card--results::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #f59e0b, #22c55e, transparent);
    opacity:0.6;
}

/* ── Latest News Spotlight Card ── */
.hq-card--spotlight { border-color:rgba(239,68,68,0.1); position:relative; overflow:hidden; }
.hq-card--spotlight::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #ef4444, #f59e0b, transparent);
}

.hq-spotlight-link {
    display:flex; align-items:flex-start; gap:0.75rem; padding:0.85rem 1.1rem;
    text-decoration:none; color:inherit; transition:all 0.3s ease;
    border-radius:0 0 12px 12px;
}
.hq-spotlight-link:hover { background:rgba(239,68,68,0.04); }

.hq-spotlight-icon {
    width:38px; height:38px; border-radius:10px; display:flex;
    align-items:center; justify-content:center; font-size:0.9rem;
    flex-shrink:0; transition:all 0.35s;
}
.hq-spotlight-link:hover .hq-spotlight-icon { transform:scale(1.12) rotate(-5deg); }
.hq-spotlight-icon--red { background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.15); }
.hq-spotlight-link:hover .hq-spotlight-icon--red { box-shadow:0 0 14px rgba(239,68,68,0.3); }
.hq-spotlight-icon--green { background:rgba(34,197,94,0.12); color:#22c55e; border:1px solid rgba(34,197,94,0.15); }
.hq-spotlight-link:hover .hq-spotlight-icon--green { box-shadow:0 0 14px rgba(34,197,94,0.3); }
.hq-spotlight-icon--amber { background:rgba(245,158,11,0.12); color:#f59e0b; border:1px solid rgba(245,158,11,0.15); }
.hq-spotlight-link:hover .hq-spotlight-icon--amber { box-shadow:0 0 14px rgba(245,158,11,0.3); }
.hq-spotlight-icon--blue { background:rgba(59,130,246,0.12); color:#60a5fa; border:1px solid rgba(59,130,246,0.15); }
.hq-spotlight-link:hover .hq-spotlight-icon--blue { box-shadow:0 0 14px rgba(59,130,246,0.3); }

.hq-spotlight-body { flex:1; min-width:0; }
.hq-spotlight-title {
    display:block; color:#f3f4f6; font-size:0.82rem; font-weight:700;
    margin-bottom:3px; line-height:1.3; transition:color 0.2s;
}
.hq-spotlight-link:hover .hq-spotlight-title { color:#fff; }
.hq-spotlight-desc {
    color:#9ca3af; font-size:0.72rem; margin:0 0 5px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.hq-spotlight-time { color:#4b5563; font-size:0.63rem; }
.hq-spotlight-time i { margin-right:3px; }

/* ── Live Draws Card ── */
.hq-card--draws { border-color:rgba(167,139,250,0.12); position:relative; overflow:hidden; }
.hq-card--draws::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #a78bfa, #ef4444, #a78bfa, transparent);
    background-size:300% 100%;
    animation:hqDrawGlow 5s ease infinite;
}
@keyframes hqDrawGlow { 0%,100%{background-position:300% 0;} 50%{background-position:-300% 0;} }

.hq-draws-count {
    margin-left:auto; font-size:0.6rem; font-weight:600; color:#a78bfa;
    background:rgba(167,139,250,0.1); padding:2px 8px; border-radius:8px;
    letter-spacing:0.03em;
}

.hq-draws-list { max-height:280px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(167,139,250,0.2) transparent; }
.hq-draws-list::-webkit-scrollbar { width:4px; }
.hq-draws-list::-webkit-scrollbar-track { background:transparent; }
.hq-draws-list::-webkit-scrollbar-thumb { background:rgba(167,139,250,0.2); border-radius:4px; }

.hq-draw-row {
    display:flex; align-items:center; gap:0.65rem; padding:0.7rem 1rem;
    text-decoration:none; color:inherit;
    border-bottom:1px solid rgba(255,255,255,0.03);
    transition:all 0.25s ease;
}
.hq-draw-row:last-child { border-bottom:none; }
.hq-draw-row:hover { background:rgba(167,139,250,0.04); }

.hq-draw-row--live {
    background:rgba(239,68,68,0.04); border-left:2px solid #ef4444;
}
.hq-draw-row--live:hover { background:rgba(239,68,68,0.07); }

.hq-draw-row--soon {
    background:rgba(245,158,11,0.03); border-left:2px solid rgba(245,158,11,0.4);
}
.hq-draw-row--soon:hover { background:rgba(245,158,11,0.06); }

.hq-draw-icon {
    width:34px; height:34px; border-radius:8px; display:flex;
    align-items:center; justify-content:center; font-size:0.85rem;
    color:#a78bfa; background:rgba(167,139,250,0.08);
    border:1px solid rgba(167,139,250,0.12); flex-shrink:0;
    transition:all 0.3s;
}
.hq-draw-row:hover .hq-draw-icon { transform:scale(1.08); box-shadow:0 0 10px rgba(167,139,250,0.2); }
.hq-draw-row--live .hq-draw-icon { color:#ef4444; background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.15); }
.hq-draw-logo { width:100%; height:100%; object-fit:cover; border-radius:6px; }

.hq-draw-info { flex:1; min-width:0; }
.hq-draw-info strong {
    display:block; color:#e5e7eb; font-size:0.8rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 0.2s;
}
.hq-draw-row:hover .hq-draw-info strong { color:#fff; }
.hq-draw-info small { color:#6b7280; font-size:0.65rem; }

.hq-draw-when { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.hq-draw-date { color:#9ca3af; font-size:0.68rem; font-weight:500; }
.hq-draw-time { color:#4b5563; font-size:0.6rem; }

.hq-draw-live-tag {
    font-size:0.55rem; font-weight:800; text-transform:uppercase;
    color:#ef4444; letter-spacing:0.06em;
    animation:hqDrawPulse 1.5s ease infinite;
}
.hq-draw-live-tag i { font-size:0.4rem; vertical-align:middle; margin-right:2px; }
@keyframes hqDrawPulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

.hq-draw-soon-tag {
    font-size:0.6rem; font-weight:700; color:#f59e0b;
    background:rgba(245,158,11,0.1); padding:1px 6px; border-radius:4px;
}

.hq-draws-empty {
    padding:1.5rem 1rem; text-align:center; color:#4b5563;
}
.hq-draws-empty i {
    font-size:1.8rem; margin-bottom:0.4rem; display:block;
    background:linear-gradient(135deg, #a78bfa, #6366f1);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    animation:hqEmptyFloat 3s ease-in-out infinite;
}
.hq-draws-empty p { font-size:0.78rem; margin:0 0 2px; color:#6b7280; }
.hq-draws-empty small { font-size:0.65rem; color:#4b5563; }

/* ── Invites Card ── */
.hq-card--invites { border-color:rgba(245,158,11,0.15); position:relative; overflow:hidden; }
.hq-card--invites::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #f59e0b, #ef4444, transparent);
    background-size:200% 100%;
    animation:hqInviteGlow 3s ease infinite;
}
@keyframes hqInviteGlow { 0%,100%{background-position:200% 0;} 50%{background-position:-200% 0;} }
.hq-card--invites:hover { border-color:rgba(245,158,11,0.3); box-shadow:0 0 20px rgba(245,158,11,0.08); }
.hq-invites-body { padding:1rem 1.1rem; }
.hq-invites-body p { color:#9ca3af; font-size:0.8rem; margin:0 0 0.75rem; }

/* ── Recent Activity / Results ── */
.hq-activity { padding:0.35rem 0; }
.hq-activity-row { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 1.1rem; transition:all 0.25s; position:relative; }
.hq-activity-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,0.04); }
.hq-activity-row:hover { background:rgba(255,255,255,0.03); }
.hq-place { min-width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:800; flex-shrink:0; transition:all 0.3s; }
.hq-activity-row:hover .hq-place { transform:scale(1.12); }
.hq-place--1st { background:rgba(245,158,11,0.1); color:#fbbf24; border:1px solid rgba(245,158,11,0.18); }
.hq-activity-row:hover .hq-place--1st { box-shadow:0 0 12px rgba(245,158,11,0.3); }
.hq-place--2nd { background:rgba(156,163,175,0.08); color:#d1d5db; border:1px solid rgba(156,163,175,0.12); }
.hq-activity-row:hover .hq-place--2nd { box-shadow:0 0 12px rgba(156,163,175,0.2); }
.hq-place--3rd { background:rgba(180,83,9,0.08); color:#d97706; border:1px solid rgba(180,83,9,0.12); }
.hq-activity-row:hover .hq-place--3rd { box-shadow:0 0 12px rgba(180,83,9,0.2); }
.hq-place--award { background:rgba(239,68,68,0.08); color:#ef4444; border:1px solid rgba(239,68,68,0.12); font-size:0.9rem; }
.hq-activity-row:hover .hq-place--award { box-shadow:0 0 12px rgba(239,68,68,0.25); }
.hq-activity-info { flex:1; min-width:0; }
.hq-activity-info strong { display:block; color:#e5e7eb; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 0.2s; }
.hq-activity-row:hover .hq-activity-info strong { color:#fff; }
.hq-activity-info small { color:#6b7280; font-size:0.72rem; }
.hq-prize { color:#22c55e; font-weight:700; font-size:0.86rem; flex-shrink:0; text-shadow:0 0 8px rgba(34,197,94,0.25); transition:all 0.3s; }
.hq-activity-row:hover .hq-prize { text-shadow:0 0 14px rgba(34,197,94,0.4); transform:scale(1.05); }
.hq-activity-row--award { border-left:2px solid rgba(239,68,68,0.15); }

/* ── Scroll-Reveal Effect ── */
/* Only apply reveal to elements below the fold — the stagger animations handle initial cards */
.hq-main > .hq-card:nth-child(n+3),
.hq-side > .hq-card:nth-child(n+4) {
    opacity:0; transform:translateY(18px);
    animation:none !important; /* override stagger for far-down cards */
    transition:opacity 0.5s ease, transform 0.5s ease;
}
.hq-main > .hq-card:nth-child(n+3).hq-revealed,
.hq-side > .hq-card:nth-child(n+4).hq-revealed {
    opacity:1; transform:translateY(0);
}
/* ensure initial stagger cards still show */
.hq-card.hq-revealed, .hq-hud-item.hq-revealed, .hq-nav-link.hq-revealed {
    opacity:1; transform:translateY(0);
}

/* ── Ripple click on nav ── */
.hq-nav-link { position:relative; overflow:hidden; }
.hq-ripple {
    position:absolute; width:0; height:0; border-radius:50%;
    background:rgba(239,68,68,0.2); transform:translate(-50%,-50%);
    animation:hqRippleOut 0.6s ease-out forwards; pointer-events:none;
}
@keyframes hqRippleOut { to { width:300px; height:300px; opacity:0; } }

/* ── Glowing separator between main and side ── */
.hq-grid::before {
    content:''; display:none;
}
@media (min-width:1025px) {
    .hq-grid::before {
        content:''; display:block; position:absolute;
        left:calc(66.67% - 0.5rem); top:0; bottom:0; width:1px;
        background:linear-gradient(180deg, transparent, rgba(239,68,68,0.08) 30%, rgba(245,158,11,0.08) 70%, transparent);
        pointer-events:none;
    }
    .hq-grid { position:relative; }
}

/* ── Card title gradient underline on hover ── */
.hq-card-title { position:relative; }
.hq-card-title::after {
    content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px;
    background:linear-gradient(90deg, #ef4444, #f59e0b);
    transition:width 0.3s ease; border-radius:1px;
}
.hq-card:hover .hq-card-title::after { width:100%; }

/* ── Typing blink cursor on greeting ── */
.hq-ign { position:relative; }
.hq-ign::after {
    content:'|'; font-weight:300; -webkit-text-fill-color:#ef4444;
    animation:hqTypeBlink 1s step-end infinite; margin-left:1px;
}
@keyframes hqTypeBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── Responsive ── */
@media (max-width:1024px) {
    .hq-hud { grid-template-columns:repeat(2,1fr); }
    .hq-grid { grid-template-columns:1fr; }
    .hq-side { order:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
    .hq-main { order:1; }
}
@media (max-width:700px) {
    .hq { padding-top:4.5rem; }
    .hq-hud { grid-template-columns:1fr 1fr; gap:0.5rem; }
    .hq-welcome { flex-direction:column; align-items:flex-start; gap:0.7rem; padding:1rem; }
    .hq-welcome-right { width:100%; }
    .hq-welcome-right a { flex:1; justify-content:center; }
    .hq-side { grid-template-columns:1fr; }
    .hq-nav { flex-direction:column; }
    .hq-nav-link { justify-content:flex-start; }
    .hq-greeting { font-size:1.05rem !important; line-height:1.25 !important; word-break:break-word; overflow-wrap:anywhere; white-space:normal !important; }
    .hq-cal-day { padding:0.4rem 0.15rem; font-size:0.7rem; min-height:44px; }
    .hq-cal-logo-wrap { width:32px; height:32px; }
}