/* ========================================
   Page Templates - Additional Styles
   ======================================== */

/* ========================================
   Game-Specific Accent Colors (Play Hub)
   ======================================== */

/* CS2 - Gold/Yellow accent */
.play-hub[data-active-game="cs2"] {
    --game-accent: #FFD700;
    --game-accent-hover: #FFDF33;
    --game-accent-dark: #B8860B;
    --game-accent-glow: rgba(255, 215, 0, 0.2);
}

/* Smash Bros - Blue/Teal accent (default site color) */
.play-hub[data-active-game="smash"] {
    --game-accent: #3dbdaa;
    --game-accent-hover: #4dd4c0;
    --game-accent-dark: #18534c;
    --game-accent-glow: rgba(61, 189, 170, 0.2);
}

/* Valorant - Red accent */
.play-hub[data-active-game="valorant"] {
    --game-accent: #FF4655;
    --game-accent-hover: #FF6B77;
    --game-accent-dark: #BD2E3A;
    --game-accent-glow: rgba(255, 70, 85, 0.2);
}

/* Default to CS2 colors */
.play-hub {
    --game-accent: #FFD700;
    --game-accent-hover: #FFDF33;
    --game-accent-dark: #B8860B;
    --game-accent-glow: rgba(255, 215, 0, 0.2);
}

/* Apply game accent to primary elements within play-hub */
.play-hub .btn-primary {
    background: var(--game-accent);
    border-color: var(--game-accent);
    color: #000;
}

.play-hub .btn-primary:hover {
    background: var(--game-accent-hover);
    border-color: var(--game-accent-hover);
}

.play-hub .play-hub-tabs .tab-btn.active {
    color: var(--game-accent);
    border-bottom-color: var(--game-accent);
}

.play-hub .play-hub-tabs .tab-btn:hover {
    color: var(--game-accent);
}

.play-hub .event-status.live {
    background: var(--game-accent);
}

.play-hub .match-status.live {
    background: var(--game-accent);
}

.play-hub .cup-card:hover {
    border-color: var(--game-accent);
}

.play-hub .leaderboard-card .rank.top-1,
.play-hub .leaderboard-card .rank.top-2,
.play-hub .leaderboard-card .rank.top-3 {
    background: var(--game-accent-glow);
    color: var(--game-accent);
}

.play-hub .section-title::after {
    background: var(--game-accent);
}

.play-hub .view-all-link {
    color: var(--game-accent);
}

.play-hub .view-all-link:hover {
    color: var(--game-accent-hover);
}

.play-hub .game-card.active {
    border-color: var(--game-accent);
    box-shadow: 0 0 20px var(--game-accent-glow);
}

.play-hub .stat-value {
    color: var(--game-accent);
}

.play-hub .highlight-accent {
    color: var(--game-accent);
}

/* Quick action buttons */
.play-hub .quick-action-btn:hover {
    border-color: var(--game-accent);
    color: var(--game-accent);
}

.play-hub .quick-action-btn:hover svg {
    color: var(--game-accent);
}

/* Event cards */
.play-hub .event-card:hover {
    border-color: var(--game-accent);
}

.play-hub .event-card .event-title a:hover {
    color: var(--game-accent);
}

/* Tournament cards */
.play-hub .tournament-card:hover,
.play-hub .cup-card:hover {
    border-color: var(--game-accent);
}

/* Links within play-hub */
.play-hub a:not(.btn):hover {
    color: var(--game-accent);
}

/* Badge accents */
.play-hub .badge-accent,
.play-hub .tag-accent {
    background: var(--game-accent-glow);
    color: var(--game-accent);
    border-color: var(--game-accent);
}

/* Sub nav active states */
.play-hub .sub-nav-tab.active {
    color: var(--game-accent);
    border-bottom-color: var(--game-accent);
}

.play-hub .sub-nav-tab:hover {
    color: var(--game-accent);
}

/* Rotating text in hero */
.play-hub .ecv-rotating-text .ecv-word {
    color: var(--game-accent) !important;
}

/* ========================================
   Region Badge Component (Legacy - Unused)
   ======================================== */
.benelux-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.benelux-badge img {
    width: 24px;
    height: auto;
    object-fit: contain;
}

.benelux-badge.small img {
    width: 18px;
}

.benelux-badge.large img {
    width: 32px;
}

.benelux-badge.xl img {
    width: 48px;
}

/* Flag Inline (Legacy - Unused) */
.benelux-flag {
    display: inline-block;
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin: 0 0.25rem;
}

.benelux-flag.small {
    width: 16px;
}

.benelux-flag.large {
    width: 28px;
}

/* Region Tag (Legacy - Unused) */
.benelux-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(61, 189, 170, 0.1);
    border: 1px solid rgba(61, 189, 170, 0.2);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.benelux-tag img {
    width: 16px;
    height: auto;
}

/* CS2 Style Region Badge (Legacy - Unused) */
.cs2-benelux-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(242, 169, 0, 0.1);
    border: 1px solid rgba(242, 169, 0, 0.3);
    padding: 0.5rem 1rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cs2-yellow, #F2A900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cs2-benelux-badge img {
    width: 20px;
    height: auto;
}

/* Page Hero */
.page-hero {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--surface) 100%);
    padding: 10rem 0 5rem;
    text-align: center;
    position: relative;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(61, 189, 170, 0.1) 0%, transparent 50%);
}

.page-hero .hero-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--secondary);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    position: relative;
}

.page-title span {
    color: var(--primary);
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Hero Actions - Frontpage Buttons */
.hero-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: #fff;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(61, 189, 170, 0.3);
}

.btn-hero-primary:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(61, 189, 170, 0.4);
}

.btn-hero-primary svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.btn-hero-primary:hover svg {
    transform: translateX(4px);
}

.btn-hero-discord {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #5865F2;
    color: #fff;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
}

.btn-hero-discord:hover {
    background: #4752c4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(88, 101, 242, 0.4);
}

.btn-hero-discord svg {
    flex-shrink: 0;
}

/* Legacy class support */
.hero-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #5865F2;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.hero-discord-btn:hover {
    background: #4752c4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.4);
}

.hero-discord-btn svg {
    flex-shrink: 0;
}

/* ========================================
   ECVesports Footer Banner
   ======================================== */
.ecvisualize-footer-banner {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ecv-partnership {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.ecv-partnership-logo {
    flex-shrink: 0;
}

.ecv-logo-img {
    height: 60px;
    width: auto;
    filter: brightness(0) saturate(100%);
    opacity: 0.85;
    transition: var(--transition);
}

/* Dark mode logo */
[data-theme="dark"] .ecv-logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ecv-logo-img:hover {
    opacity: 1;
}

.ecv-partnership-text {
    flex: 1;
}

.partnership-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.ecv-partnership-text p {
    margin: 0;
    color: var(--text-secondary);
}

.ecv-partnership-text a {
    color: var(--primary);
    font-weight: 600;
}

.ecv-partnership-cta {
    flex-shrink: 0;
}

.btn-sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* ========================================
   ECVisualize Banner (Join CTA Section)
   ======================================== */
.ecvisualize-banner {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(61, 189, 170, 0.08) 100%);
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ecv-banner-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.ecv-banner-logo {
    flex-shrink: 0;
}

.ecv-logo {
    height: 50px;
    width: auto;
    filter: brightness(0);
    opacity: 0.85;
    transition: var(--transition);
}

[data-theme="dark"] .ecv-logo {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ecv-logo:hover {
    opacity: 1;
}

.ecv-banner-text {
    flex: 1;
}

.ecv-banner-text .ecv-tagline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.ecv-banner-text h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.ecv-banner-text .ecv-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.ecv-banner-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .ecv-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .ecv-banner-buttons {
        justify-content: center;
    }
}

/* Footer ECVesports Credit */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.footer-bottom-left p,
.footer-bottom-right p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.ecv-credit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-ecv-logo {
    height: 24px;
    width: auto;
    /* Filter handled by theme-aware styles in style.css */
    opacity: 0.7;
    transition: var(--transition);
}

.footer-ecv-logo:hover {
    opacity: 1;
}

.footer-tagline {
    color: var(--primary);
    font-style: italic;
    margin-bottom: 0.5rem !important;
}

/* ========================================
   Events Page Styles
   ======================================== */
.event-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--secondary);
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.event-card-large {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: var(--transition);
}

.event-card-large:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.event-date-block {
    background: var(--primary);
    color: var(--secondary);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px;
}

.event-date-block .day {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}

.event-date-block .month {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.event-date-block .year {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.event-details {
    flex: 1;
    padding: 1.5rem 2rem;
}

.event-category-tag {
    margin-bottom: 0.75rem;
}

.event-category-tag span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-game-night {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.tag-tournament {
    background: rgba(61, 189, 170, 0.2);
    color: var(--primary);
}

.tag-stream {
    background: rgba(145, 70, 255, 0.15);
    color: #9146FF;
}

.event-details h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.event-details > p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.event-meta-large {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.meta-item svg {
    color: var(--primary);
}

.event-action {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: var(--surface-light);
}

/* Past Events */
.past-event {
    opacity: 0.7;
}

.past-event-date {
    font-size: 0.75rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.past-event h4 {
    margin-bottom: 0.5rem;
}

.past-event p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ========================================
   Contact Page Styles
   ======================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info h2 {
    margin-bottom: 1rem;
}

.contact-info .lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-method {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    flex-shrink: 0;
}

.contact-details h4 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.contact-details p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.contact-link {
    color: var(--primary);
    font-weight: 500;
}

.contact-ecv {
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-align: center;
}

.ecv-logo-contact {
    height: 40px;
    margin: 0 auto 1rem;
    filter: brightness(0);
    opacity: 0.8;
}

[data-theme="dark"] .ecv-logo-contact {
    filter: brightness(0) invert(1);
}

.contact-ecv p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Contact Form */
.contact-form-wrapper .card {
    padding: 2rem;
}

.contact-form-wrapper h3 {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(61, 189, 170, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

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

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    color: var(--primary);
}

.faq-icon {
    transition: transform 0.3s ease;
    color: var(--primary);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0;
    color: var(--text-secondary);
}

/* ========================================
   Rules Page Styles
   ======================================== */
.rules-intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

.rules-intro .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.rules-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--border);
}

.rules-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.rules-icon {
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
}

.rules-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rule-item {
    display: flex;
    gap: 1rem;
}

.rule-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.rule-content h4 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.rule-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Sanctions */
.sanctions-section {
    margin-bottom: 2rem;
}

.sanctions-section h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.sanctions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.sanction-item {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.sanction-item h4 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.sanction-item p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.sanction-item.warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #FBBF24;
}

.sanction-item.mute {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #FB923C;
}

.sanction-item.temp-ban {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.sanction-item.perm-ban {
    background: rgba(185, 28, 28, 0.15);
    border: 1px solid rgba(185, 28, 28, 0.3);
    color: #DC2626;
}

.rules-footer {
    text-align: center;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.rules-footer p {
    margin-bottom: 1rem;
}

/* ========================================
   About Page Styles
   ======================================== */
.about-intro {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    margin-bottom: 1.5rem;
}

.about-text .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.about-stats-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--border);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row .stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-row .stat-label {
    color: var(--text-secondary);
}

/* Value Cards */
.value-card {
    text-align: center;
}

.value-card .card-icon {
    margin: 0 auto 1.5rem;
    font-size: 2rem;
}

/* ECVesports Section */
.ecv-section {
    background: linear-gradient(135deg, var(--surface) 0%, var(--secondary) 100%);
}

.ecv-about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
}

.ecv-logo-large img {
    max-width: 250px;
    filter: brightness(0);
    opacity: 0.85;
}

[data-theme="dark"] .ecv-logo-large img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.ecv-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--secondary);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.ecv-text h2 {
    margin-bottom: 1rem;
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.team-member {
    text-align: center;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.member-avatar {
    margin-bottom: 1rem;
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    background: var(--surface-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
}

.team-member h4 {
    margin-bottom: 0.25rem;
}

.member-role {
    color: var(--primary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem !important;
}

.member-bio {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.join-team {
    text-align: center;
    padding: 3rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.join-team h3 {
    margin-bottom: 0.5rem;
}

.join-team p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

/* ========================================
   Post Styles
   ======================================== */
.post-hero {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--surface) 100%);
    padding: 10rem 0 4rem;
    text-align: center;
}

.post-meta-top {
    margin-bottom: 1rem;
}

.post-category {
    background: var(--primary);
    color: var(--secondary);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 1rem;
}

.post-date {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.post-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.post-excerpt {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.post-featured-image {
    margin: -2rem 0 0;
    position: relative;
    z-index: 1;
}

.post-featured-image img {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px var(--shadow);
}

.post-content {
    max-width: 800px;
    margin: 0 auto;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

.post-tags .tag {
    display: inline-block;
    background: var(--surface-light);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

.post-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.share-btn {
    padding: 0.5rem 1rem;
    background: var(--surface-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.share-btn:hover {
    background: var(--primary);
    color: var(--secondary);
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
}

.post-navigation a {
    color: var(--text-secondary);
}

.post-navigation a:hover {
    color: var(--primary);
}

/* ========================================
   ECVesports Home Section (Front Page)
   ======================================== */
.section-ecv {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(61, 189, 170, 0.05) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ecv-home-section {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}

.ecv-home-content .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.ecv-home-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.ecv-cta-buttons {
    margin-top: 2rem;
}

.ecv-home-logo {
    text-align: center;
}

.ecv-home-logo img {
    max-width: 280px;
    /* Filter handled by theme-aware styles in style.css */
    opacity: 0.9;
    margin: 0 auto;
}

.ecv-tagline {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Hero subtitle */
.hero-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* ECVesports Home Section (About Page) */
.section-ecv-home {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(61, 189, 170, 0.08) 100%);
}

.ecv-home-about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

.ecv-home-text .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.ecv-values {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ecv-value {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ecv-value .value-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ecv-value h4 {
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.ecv-value p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Button large */
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* ECVesports Feature Image */
.ecv-home-image {
    position: relative;
}

.ecv-feature-image {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
}

/* Community Showcase */
.community-showcase {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
}

.showcase-image img {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
}

.showcase-social h3 {
    margin-bottom: 0.5rem;
}

.showcase-social > p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

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

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 600;
    transition: var(--transition);
}

.social-link:hover {
    transform: translateX(5px);
    border-color: var(--primary);
}

.social-link.youtube:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: #FF0000;
    color: #FF0000;
}

.social-link.instagram:hover {
    background: rgba(225, 48, 108, 0.1);
    border-color: #E1306C;
    color: #E1306C;
}

.social-link.discord:hover {
    background: rgba(88, 98, 168, 0.1);
    border-color: var(--discord);
    color: var(--discord);
}

.social-link.tiktok:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #000000;
    color: #000000;
}

.social-link.twitter:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: #000000;
    color: #000000;
}

.social-link.facebook:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: #1877F2;
    color: #1877F2;
}

.social-link svg {
    flex-shrink: 0;
}

/* ========================================
   Discord CTA Banner
   ======================================== */
.discord-cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 0;
}

.discord-cta-banner {
    padding: 3rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.discord-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.discord-cta-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.discord-icon-large {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.discord-cta-text h3 {
    font-size: 1.75rem;
    color: white;
    margin-bottom: 0.5rem;
}

.discord-cta-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.discord-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.discord-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.stat-dot.online {
    background: #3ba55c;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.btn-discord {
    background: white;
    color: var(--primary);
    padding: 1rem 2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-discord:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-discord svg {
    fill: var(--primary);
}

@media (max-width: 1024px) {
    .discord-cta-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .discord-icon-large {
        margin: 0 auto;
    }

    .discord-stats {
        justify-content: center;
    }

    .discord-cta-button {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .discord-cta-banner {
        padding: 2rem 1.5rem;
    }

    .discord-cta-text h3 {
        font-size: 1.5rem;
    }

    .discord-stats {
        flex-direction: column;
        gap: 0.75rem;
    }

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

/* ========================================
   Word Lid Page - Welkom Pagina
   ======================================== */
.word-lid-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 100px;
    text-align: center;
}

.word-lid-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgba(232, 228, 224, 0.94) 0%,
        rgba(221, 217, 213, 0.88) 40%,
        rgba(221, 217, 213, 0.65) 70%,
        rgba(221, 217, 213, 0.35) 100%);
    pointer-events: none;
}

[data-theme="dark"] .word-lid-hero .hero-overlay {
    background: linear-gradient(90deg,
        rgba(26, 31, 38, 0.95) 0%,
        rgba(26, 31, 38, 0.85) 40%,
        rgba(26, 31, 38, 0.6) 70%,
        rgba(26, 31, 38, 0.4) 100%);
}

.word-lid-hero-content {
    position: relative;
    z-index: 2;
}

.word-lid-hero .hero-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.word-lid-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.word-lid-hero h1 span {
    color: var(--primary);
}

.word-lid-hero .hero-tagline {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

/* Welkom Content Section */
.welkom-content {
    max-width: 1000px;
    margin: 0 auto;
}

.welkom-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.section-badge {
    display: inline-block;
    background: rgba(217, 123, 42, 0.15);
    color: var(--primary);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.welkom-intro h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.welkom-intro h2 span {
    color: var(--primary);
}

.welkom-intro .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.welkom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.welkom-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: var(--transition);
}

.welkom-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.welkom-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(217, 123, 42, 0.1) 0%, var(--surface) 100%);
    border-color: rgba(217, 123, 42, 0.3);
}

.welkom-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.welkom-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.welkom-card p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.7;
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.benefit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
}

.benefit-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
}

.benefit-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.benefit-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* Testimonial Section */
.testimonial-section {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(217, 123, 42, 0.05) 100%);
}

.testimonial-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0;
}

.quote-icon {
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 1rem;
}

.testimonial-content blockquote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.testimonial-content cite {
    color: var(--primary);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
}

/* CTA Section */
.section-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.section-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
}

.cta-content > p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

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

.section-cta .btn-primary {
    background: white;
    color: var(--primary);
}

.section-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.section-cta .btn-discord {
    background: var(--primary);
    color: white;
}

.section-cta .btn-discord:hover {
    background: var(--primary-hover);
}

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.cta-note svg {
    color: white;
}

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

@media (max-width: 768px) {
    .word-lid-hero h1 {
        font-size: 2.5rem;
    }

    .word-lid-hero .hero-tagline {
        font-size: 1.2rem;
    }

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

    .welkom-card.featured {
        grid-column: span 1;
    }

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

    .testimonial-content blockquote {
        font-size: 1.2rem;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 1024px) {
    .contact-grid,
    .about-intro,
    .ecv-about,
    .ecv-home-section,
    .ecv-home-about,
    .community-showcase,
    .rules-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ecv-home-logo,
    .ecv-home-image {
        order: -1;
    }

    .showcase-image {
        order: -1;
    }

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

    .ecv-partnership {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 8rem 0 3rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .event-card-large {
        flex-direction: column;
    }

    .event-date-block {
        flex-direction: row;
        gap: 0.5rem;
        padding: 1rem;
    }

    .event-date-block .day {
        font-size: 1.5rem;
    }

    .event-action {
        padding: 1rem;
    }

    .team-grid,
    .sanctions-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .ecv-credit {
        flex-direction: column;
    }
}

/* ========================================
   Events Archive Page - Enhanced Styles
   ======================================== */

/* Keyframe Animations */
@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(217, 123, 42, 0.2),
                    0 0 20px rgba(217, 123, 42, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(217, 123, 42, 0.3),
                    0 0 30px rgba(217, 123, 42, 0.15);
    }
}

@keyframes neon-green {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.3),
                    0 0 10px rgba(34, 197, 94, 0.15);
    }
    50% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.4),
                    0 0 15px rgba(34, 197, 94, 0.2);
    }
}

@keyframes neon-blue {
    0%, 100% {
        box-shadow: 0 0 5px rgba(43, 108, 176, 0.3),
                    0 0 10px rgba(43, 108, 176, 0.15);
    }
    50% {
        box-shadow: 0 0 8px rgba(43, 108, 176, 0.4),
                    0 0 15px rgba(43, 108, 176, 0.2);
    }
}

@keyframes border-glow {
    0%, 100% { border-color: rgba(43, 108, 176, 0.5); }
    50% { border-color: rgba(43, 108, 176, 0.9); }
}

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

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--surface) 100%);
    padding: 4rem 0;
    text-align: center;
    margin-top: -110px; /* Offset site-main padding */
    padding-top: calc(110px + 4rem); /* Header offset + desired padding */
}

.page-header-content {
    max-width: 700px;
    margin: 0 auto;
}

.page-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-header h1 span {
    color: var(--primary);
}

.page-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Event Highlight Section - Opening Cup */
.event-highlight-section {
    background: var(--surface);
    padding: 3rem 0;
    border-bottom: 2px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.event-highlight {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* CS2 Agent Image */
.event-highlight-agent {
    flex-shrink: 0;
    width: 140px;
    height: 180px;
    position: relative;
}

.event-highlight-agent img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.event-highlight-content {
    flex: 1;
}

.highlight-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.event-highlight-content h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.event-highlight-content > p {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.event-highlight-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.event-highlight-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.event-highlight-meta .meta-item svg {
    color: var(--primary);
}

.event-highlight-meta .meta-prize {
    color: var(--primary);
    font-weight: 600;
}

/* Events Grid */
.events-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.event-card-large {
    display: flex;
    background: linear-gradient(135deg, var(--surface) 0%, rgba(26, 31, 38, 0.95) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.event-card-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.event-card-large:hover {
    transform: translateX(8px) translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Tournament Cards - Orange/Gold Glow */
.event-card-large.type-tournament {
    border-left: 4px solid var(--primary);
}

.event-card-large.type-tournament::before {
    background: linear-gradient(135deg, rgba(217, 123, 42, 0.05) 0%, transparent 50%);
}

.event-card-large.type-tournament:hover {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(217, 123, 42, 0.3),
                0 15px 40px rgba(0, 0, 0, 0.3);
}

.event-card-large.type-tournament:hover::before {
    opacity: 1;
}

/* Game Night Cards - Blue Glow */
.event-card-large.type-game {
    border-left: 4px solid var(--info);
}

.event-card-large.type-game::before {
    background:
        linear-gradient(135deg, rgba(43, 108, 176, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 0% 50%, rgba(43, 108, 176, 0.1) 0%, transparent 50%);
}

.event-card-large.type-game:hover {
    border-color: var(--info);
    animation: neon-blue 2s ease-in-out infinite;
}

.event-card-large.type-game:hover::before {
    opacity: 1;
}

/* Game Night - Glowing Date Block */
.event-card-large.type-game .event-card-date {
    background: linear-gradient(180deg, var(--info) 0%, #1E5A9E 100%);
    position: relative;
}

.event-card-large.type-game:hover .event-card-date {
    box-shadow: 0 0 15px rgba(43, 108, 176, 0.25);
}

.event-card-large.type-game .event-card-date::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Game Night - Glowing Type Label */
.event-card-large.type-game .type-label {
    color: var(--info);
    text-shadow: 0 0 10px rgba(43, 108, 176, 0.5);
}

.event-card-large.type-game .type-icon {
    filter: drop-shadow(0 0 8px rgba(43, 108, 176, 0.6));
}

/* Stream Cards - Purple Glow */
.event-card-large.type-stream {
    border-left: 4px solid var(--stream);
}

.event-card-large.type-stream::before {
    background: linear-gradient(135deg, rgba(107, 91, 142, 0.08) 0%, transparent 40%);
}

.event-card-large.type-stream:hover {
    border-color: var(--stream);
    box-shadow: 0 0 15px rgba(107, 91, 142, 0.2),
                0 15px 40px rgba(0, 0, 0, 0.2);
}

.event-card-large.type-stream:hover::before {
    opacity: 1;
}

.event-card-large.type-stream .event-card-date {
    background: linear-gradient(180deg, var(--stream) 0%, var(--stream-hover) 100%);
}

/* Special Cards - Red Glow */
.event-card-large.type-special {
    border-left: 4px solid #ef4444;
}

.event-card-large.type-special::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, transparent 40%);
}

.event-card-large.type-special:hover {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3),
                0 15px 40px rgba(0, 0, 0, 0.3);
}

.event-card-large.type-special:hover::before {
    opacity: 1;
}

.event-card-large.type-special .event-card-date {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.event-card-date {
    background: var(--primary);
    color: white;
    padding: 1.5rem;
    text-align: center;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-day {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.event-month {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
}

.event-weekday {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: capitalize;
    display: block;
    margin-top: 0.25rem;
}

.event-card-content {
    flex: 1;
    padding: 1.5rem;
}

.event-card-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.type-icon {
    font-size: 1rem;
}

.type-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}

.event-card-content h3 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.event-card-content > p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.event-card-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.event-card-action {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: var(--surface-light);
    position: relative;
    z-index: 1;
}

.event-card-action .btn {
    transition: all 0.3s ease;
}

/* Game Night Action Button - Blue */
.event-card-large.type-game .event-card-action .btn-primary {
    background: linear-gradient(135deg, var(--info) 0%, #1E5A9E 100%);
    border-color: var(--info);
}

.event-card-large.type-game .event-card-action .btn-primary:hover {
    box-shadow: 0 0 20px rgba(43, 108, 176, 0.5),
                0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Stream Action Button - Purple */
.event-card-large.type-stream .event-card-action .btn-primary {
    background: linear-gradient(135deg, var(--stream) 0%, var(--stream-hover) 100%);
    border-color: var(--stream);
}

.event-card-large.type-stream .event-card-action .btn-primary:hover {
    box-shadow: 0 0 15px rgba(107, 91, 142, 0.25),
                0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Gaming Scanline Effect for Game Night Cards */
.event-card-large.type-game::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(43, 108, 176, 0.02) 2px,
        rgba(43, 108, 176, 0.02) 4px
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.event-card-large.type-game:hover::after {
    opacity: 1;
}

/* Gaming Icon Glow Animation */
@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.event-card-large.type-game:hover .type-icon {
    animation: icon-pulse 1s ease-in-out infinite;
}

/* Schedule Grid */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.schedule-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.schedule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.schedule-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Wednesday Game Night - Special Neon Green Glow */
.schedule-card.active {
    border-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, var(--surface) 100%);
}

.schedule-card.active::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(34, 197, 94, 0.15) 0%, transparent 60%);
    opacity: 1;
}

.schedule-card.active:hover {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.15);
}

.schedule-card.active .schedule-day {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
}

.schedule-card.active .schedule-icon {
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.3));
}

.schedule-day {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.schedule-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
}

.schedule-event h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.schedule-event p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.schedule-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--surface-light);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.schedule-card.active .schedule-badge {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

/* Events CTA Box */
.events-cta-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.events-cta-box h3 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.events-cta-box > p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

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

/* No Events */
.no-events {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.no-events p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .event-highlight {
        flex-direction: column;
        text-align: center;
    }

    .event-highlight-agent {
        width: 100px;
        height: 130px;
    }

    .event-highlight-meta {
        justify-content: center;
    }

    .event-highlight-content .btn {
        width: 100%;
    }

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

@media (max-width: 768px) {
    .page-header {
        padding: 3rem 0;
        padding-top: calc(110px + 3rem);
    }

    .page-header h1 {
        font-size: 2.25rem;
    }

    .event-card-large {
        flex-direction: column;
    }

    .event-card-date {
        flex-direction: row;
        gap: 0.75rem;
        padding: 1rem;
    }

    .event-day {
        font-size: 1.75rem;
    }

    .event-card-action {
        justify-content: center;
    }

    .events-cta-buttons {
        flex-direction: column;
    }

    .events-cta-buttons .btn {
        width: 100%;
    }
}

/* ========================================
   Light Theme - Events Page (Default)
   ======================================== */

/* Page Header - uses CSS variables, works in both themes */

/* Event Highlight Section - Light Mode keeps dark for contrast */
/* Already dark by default - no overrides needed */

.event-highlight-badge .badge-new {
    box-shadow: none;
}

.event-highlight-prize {
    background: linear-gradient(135deg, rgba(200, 109, 31, 0.08) 0%, rgba(200, 109, 31, 0.03) 100%);
    border: 2px solid rgba(200, 109, 31, 0.25);
}

.event-highlight-prize::before {
    display: none;
}

.event-highlight-prize .prize-label {
    color: var(--primary);
}

.event-highlight-prize .prize-amount {
    background: linear-gradient(135deg, var(--primary) 0%, #A85A18 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none;
}

/* Events Grid - Light Mode Default */
.event-card-large {
    background: linear-gradient(135deg, var(--surface-light) 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
}

.event-card-large:hover {
    box-shadow: var(--shadow-md);
}

/* Game Night Cards - Light Mode (No Glow) */
.event-card-large.type-game:hover {
    animation: none;
    box-shadow: 0 8px 25px rgba(43, 108, 176, 0.12);
}

.event-card-large.type-game .event-card-date {
    box-shadow: none;
}

.event-card-large.type-game:hover .event-card-date {
    box-shadow: none;
}

.event-card-large.type-game .type-label {
    text-shadow: none;
}

.event-card-large.type-game .type-icon {
    filter: none;
}

/* Tournament Cards - Light Mode */
.event-card-large.type-tournament:hover {
    box-shadow: 0 8px 25px rgba(200, 109, 31, 0.12);
}

/* Stream Cards - Light Mode */
.event-card-large.type-stream:hover {
    box-shadow: 0 8px 25px rgba(107, 91, 142, 0.1);
}

.event-card-action {
    background: var(--surface);
}

/* Game Night Button - Light Mode */
.event-card-large.type-game .event-card-action .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.2);
}

/* Scanline effect - hidden by default */
.event-card-large.type-game::after {
    display: none;
}

/* Schedule Grid - Light Mode Default */
.schedule-card {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
}

.schedule-card:hover {
    box-shadow: var(--shadow-md);
}

.schedule-card.active {
    background: linear-gradient(135deg, rgba(43, 108, 176, 0.05) 0%, var(--surface-light) 100%);
    border-color: var(--info);
}

.schedule-card.active:hover {
    box-shadow: 0 8px 25px rgba(43, 108, 176, 0.12);
}

.schedule-card.active .schedule-day {
    color: var(--info);
    text-shadow: none;
}

.schedule-card.active .schedule-icon {
    filter: none;
}

.schedule-card.active .schedule-badge {
    box-shadow: none;
}

.schedule-badge {
    background: var(--surface-lighter);
}

/* Events CTA Box - Light Mode Default */
.events-cta-box {
    background: linear-gradient(145deg, var(--surface-light) 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
}

/* No Events - Light Mode */
.no-events {
    background: var(--surface-light);
}

/* ========================================
   Dark Theme - Events Page Overrides
   ======================================== */

/* Event Highlight is always dark - no overrides needed */

/* Events Grid - Dark Mode */
[data-theme="dark"] .event-card-large {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(26, 31, 38, 0.95) 100%);
    box-shadow: none;
}

[data-theme="dark"] .event-card-large:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Game Night Cards - Dark Mode (Neon Glow) */
[data-theme="dark"] .event-card-large.type-game:hover {
    animation: neon-blue 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(43, 108, 176, 0.3), 0 15px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .event-card-large.type-game:hover .event-card-date {
    box-shadow: 0 0 15px rgba(43, 108, 176, 0.25);
}

[data-theme="dark"] .event-card-large.type-game .type-label {
    text-shadow: 0 0 10px rgba(43, 108, 176, 0.5);
}

[data-theme="dark"] .event-card-large.type-game .type-icon {
    filter: drop-shadow(0 0 8px rgba(43, 108, 176, 0.6));
}

/* Tournament Cards - Dark Mode */
[data-theme="dark"] .event-card-large.type-tournament:hover {
    box-shadow: 0 0 20px rgba(217, 123, 42, 0.3), 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Stream Cards - Dark Mode */
[data-theme="dark"] .event-card-large.type-stream:hover {
    box-shadow: 0 0 15px rgba(107, 91, 142, 0.2), 0 15px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .event-card-action {
    background: var(--surface-light);
}

/* Game Night Button - Dark Mode */
[data-theme="dark"] .event-card-large.type-game .event-card-action .btn-primary:hover {
    box-shadow: 0 0 20px rgba(43, 108, 176, 0.5), 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Scanline effect - visible in dark mode */
[data-theme="dark"] .event-card-large.type-game::after {
    display: block;
}

/* Schedule Grid - Dark Mode */
[data-theme="dark"] .schedule-card {
    background: var(--surface);
    box-shadow: none;
}

[data-theme="dark"] .schedule-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .schedule-card.active {
    background: linear-gradient(135deg, rgba(43, 108, 176, 0.08) 0%, var(--surface) 100%);
}

[data-theme="dark"] .schedule-card.active:hover {
    box-shadow: 0 0 12px rgba(43, 108, 176, 0.15), 0 10px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .schedule-card.active .schedule-day {
    color: var(--info);
    text-shadow: 0 0 8px rgba(43, 108, 176, 0.25);
}

[data-theme="dark"] .schedule-card.active .schedule-icon {
    filter: drop-shadow(0 0 5px rgba(43, 108, 176, 0.3));
}

[data-theme="dark"] .schedule-card.active .schedule-badge {
    box-shadow: 0 0 8px rgba(43, 108, 176, 0.2);
}

[data-theme="dark"] .schedule-badge {
    background: var(--surface-light);
}

/* Events CTA Box - Dark Mode */
[data-theme="dark"] .events-cta-box {
    background: var(--surface);
    box-shadow: none;
}

/* No Events - Dark Mode */
[data-theme="dark"] .no-events {
    background: var(--surface);
}

/* ========================================
   Twitch Stream Section
======================================== */

.twitch-stream-section {
    background: var(--surface);
    padding: 4rem 0;
}

.twitch-embed-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}

.twitch-embed-wrapper {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.twitch-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
    display: block;
}

.twitch-info {
    background: var(--surface-light);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.twitch-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.twitch-icon {
    color: var(--primary);
}

.twitch-brand span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.twitch-info p {
    color: var(--text-muted);
    line-height: 1.6;
}

.btn-twitch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
}

.btn-twitch:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-twitch svg {
    fill: currentColor;
}

/* Twitch Section - Dark Mode */
[data-theme="dark"] .twitch-stream-section {
    background: var(--bg-dark);
}

[data-theme="dark"] .twitch-info {
    background: var(--surface);
}

/* Twitch Section - Responsive */
@media (max-width: 900px) {
    .twitch-embed-container {
        grid-template-columns: 1fr;
    }

    .twitch-embed-wrapper {
        min-height: 300px;
    }

    .twitch-embed-wrapper iframe {
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    .twitch-embed-wrapper {
        min-height: 220px;
    }

    .twitch-embed-wrapper iframe {
        min-height: 220px;
    }

    .twitch-info {
        padding: 1.5rem;
    }
}

/* ========================================
   PLAY Page - Tournaments Hub
   ======================================== */
.play-page {
    background: var(--surface);
    min-height: 100vh;
}

/* Hero */
.play-hero {
    background: var(--surface-lighter);
    padding: 8rem 0 3rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.play-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, var(--primary-glow) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--primary-glow) 0%, transparent 40%);
    pointer-events: none;
}

.play-hero .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.play-hero-content {
    max-width: 600px;
}

.play-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.play-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.play-hero p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    color: var(--success);
    font-size: 0.875rem;
    font-weight: 600;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Sections */
.play-section {
    padding: 3rem 0;
}

.play-section:first-of-type {
    padding-top: 2rem;
}

.section-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header-compact h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.section-title-row .live-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.section-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Twitch Watch Button */
.watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.watch-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* Live Tournament Cards */
.tournaments-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.tournament-live-card {
    display: block;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.05) 0%, var(--surface-light) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: liveBorderPulse 2s ease-in-out infinite;
}

@keyframes liveBorderPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.35);
    }
}

.tournament-live-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success), var(--primary), var(--success));
    background-size: 200% 100%;
    animation: gradientShift 3s linear infinite;
}

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

.tournament-live-card:hover {
    border-color: var(--success);
    transform: translateY(-4px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(34, 197, 94, 0.25);
}

.live-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.live-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.live-badge-small .pulse {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.prize-tag {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary);
}

.tournament-live-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
}

.live-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.live-card-meta .dot {
    opacity: 0.4;
}

.live-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
}

/* Tournament Cards Grid */
.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* CS2 Style Tournament Cards */
.tournament-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.tournament-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 50px;
    background: linear-gradient(180deg, var(--cs2-yellow, var(--primary)), transparent);
    opacity: 0.7;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.tournament-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(225deg, var(--cs2-yellow, var(--primary)) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tournament-card:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateY(-4px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 0 20px var(--game-accent-glow, rgba(61, 189, 170, 0.2));
}

.tournament-card:hover::before {
    opacity: 1;
    height: 70px;
}

.tournament-card:hover::after {
    opacity: 0.6;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* CS2 Card Status Badges */
.card-top .status-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 2px;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.card-top .status-badge.open {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.card-top .status-badge.seeding {
    background: rgba(242, 169, 0, 0.15);
    color: var(--cs2-yellow, var(--primary));
}

.prize-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
}

.tournament-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
}

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

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
}

.detail-row .label {
    color: var(--text-secondary);
}

.detail-row .value {
    font-weight: 600;
    color: var(--text-primary);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
}

.slots-left {
    color: var(--success);
    font-weight: 600;
}

.slots-full {
    color: var(--error);
    font-weight: 600;
}

.deadline {
    color: var(--text-secondary);
}

/* Empty State */
.play-empty {
    padding: 4rem 0;
}

.empty-state {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.empty-state svg {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.empty-state p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Community Grid */
.community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.community-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.community-card.discord {
    background: linear-gradient(135deg, var(--discord) 0%, var(--discord-hover) 100%);
    border: 1px solid var(--border);
}

.community-card.twitch {
    background: linear-gradient(135deg, var(--twitch) 0%, var(--twitch-hover) 100%);
    border: 1px solid var(--border);
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.community-card .card-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.community-card .card-content {
    flex: 1;
}

.community-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.community-card p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.community-card .card-arrow {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.community-card:hover .card-arrow {
    transform: translateX(4px);
}

/* Results List */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.result-row:hover {
    border-color: var(--primary);
    background: var(--surface);
}

.result-info {
    flex: 1;
}

.result-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.result-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.result-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.result-row svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* CTA Section */
.play-cta {
    padding-bottom: 4rem;
}

.cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-lighter);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 2.5rem;
}

.cta-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.cta-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Discord CTA Button */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: var(--primary);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.cta-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
    .play-hero .container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .play-hero h1 {
        font-size: 2.25rem;
    }

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

    .cta-box {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .play-hero {
        padding: 7rem 0 2rem;
    }

    .play-hero h1 {
        font-size: 1.75rem;
    }

    .play-section {
        padding: 2rem 0;
    }

    .tournaments-live-grid,
    .tournaments-grid {
        grid-template-columns: 1fr;
    }

    .section-header-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ========================================
   UPCOMING EVENTS CARDS - Front Page
   ======================================== */
.upcoming-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.upcoming-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.upcoming-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.upcoming-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.upcoming-card.gamenight .upcoming-card-label {
    color: var(--info);
}

.upcoming-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.upcoming-card:hover .upcoming-date {
    background: var(--primary);
}

.upcoming-card.gamenight:hover .upcoming-date {
    background: var(--info);
}

.upcoming-card.gamenight:hover {
    border-color: var(--info);
}

.upcoming-card:hover .upcoming-day,
.upcoming-card:hover .upcoming-month {
    color: white;
}

.upcoming-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    transition: color 0.2s ease;
}

.upcoming-month {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.upcoming-info {
    flex: 1;
    min-width: 0;
}

.upcoming-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-info p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .upcoming-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .upcoming-card {
        padding: 1.25rem;
    }

    .upcoming-date {
        width: 50px;
        height: 50px;
    }

    .upcoming-day {
        font-size: 1.25rem;
    }

    .upcoming-info h4 {
        font-size: 0.9375rem;
    }
}

/* ========================================
   PLAY HUB PAGE - CS2 INSPIRED DASHBOARD
   ======================================== */

/* CS2 Color Palette */
.play-hub {
    --cs2-yellow: #F2A900;
    --cs2-yellow-glow: rgba(242, 169, 0, 0.3);
    --cs2-gold: #D4A84B;
    --cs2-dark: #001522;
    --cs2-darker: #080808;
    --cs2-gray: #1A1A1A;
    --cs2-light-gray: #2A2A2A;
    --cs2-accent: #3D3D3D;
    background: var(--secondary);
    min-height: 100vh;
}

/* CS2 Crosshair Icon Styles */
.cs2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs2-icon svg {
    stroke: currentColor;
    fill: none;
}

.cs2-icon.filled svg {
    fill: currentColor;
    stroke: none;
}

/* CS2 Decorative Crosshair */
.cs2-crosshair-decor {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.15;
    pointer-events: none;
}

.cs2-crosshair-decor::before,
.cs2-crosshair-decor::after {
    content: '';
    position: absolute;
    background: var(--cs2-yellow);
}

.cs2-crosshair-decor::before {
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    transform: translateY(-50%);
}

.cs2-crosshair-decor::after {
    left: 50%;
    top: 10%;
    bottom: 10%;
    width: 2px;
    transform: translateX(-50%);
}

.cs2-crosshair-decor .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--cs2-yellow);
    transform: translate(-50%, -50%);
}

/* CS2 Section Icons */
.cs2-section-icon {
    width: 24px;
    height: 24px;
    color: var(--cs2-yellow);
    opacity: 0.9;
}

/* CS2 Logo Wrapper with Crosshair */
.play-hub-logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs2-logo-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--cs2-yellow);
    animation: cs2CrosshairRotate 20s linear infinite;
    pointer-events: none;
}

@keyframes cs2CrosshairRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* CS2 Inline Icon */
.cs2-inline-icon {
    vertical-align: middle;
    margin-right: 0.5rem;
    color: var(--cs2-yellow);
    opacity: 0.7;
}

/* CS2 Tagline Style */
.play-hub-tagline {
    display: flex;
    align-items: center;
}

/* Play Hub Hero - CS2 Tactical Style */
.play-hub-hero {
    position: relative;
    padding: 3rem 0 3.5rem;
    background: var(--cs2-darker);
    border-bottom: 2px solid var(--cs2-yellow);
    overflow: hidden;
}

.play-hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/headerwallpaperbg.jpg') center center / cover no-repeat;
    opacity: 0.5;
    z-index: 0;
}

.play-hub-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 8, 8, 0.9) 0%, rgba(8, 8, 8, 0.4) 50%, rgba(8, 8, 8, 0.95) 100%),
        linear-gradient(90deg, rgba(242, 169, 0, 0.08) 0%, transparent 30%, transparent 70%, rgba(242, 169, 0, 0.05) 100%);
    z-index: 1;
}

/* CS2 Tech Grid Overlay */
.play-hub-hero-bg {
    position: absolute;
    inset: 0;
    background:
        /* Scan lines effect */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(242, 169, 0, 0.03) 2px,
            rgba(242, 169, 0, 0.03) 4px
        ),
        /* Corner accents */
        linear-gradient(135deg, rgba(242, 169, 0, 0.15) 0%, transparent 15%),
        linear-gradient(225deg, rgba(242, 169, 0, 0.1) 0%, transparent 20%);
    pointer-events: none;
    z-index: 2;
}

/* CS2 Corner Brackets */
.play-hub-hero .container::before,
.play-hub-hero .container::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid var(--cs2-yellow);
    opacity: 0.4;
    z-index: 4;
}

.play-hub-hero .container::before {
    top: -20px;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.play-hub-hero .container::after {
    bottom: -20px;
    right: 0;
    border-left: none;
    border-top: none;
}

.play-hub-hero .container {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.play-hub-hero-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.play-hub-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.play-hub-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(61, 189, 170, 0.4));
}

/* Play Hub Brand Text Container */
.play-hub-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.play-hub-brand-text h1 {
    font-size: 2.75rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Play Hub rotating text styling - aligned with ECV text */
.play-hub-brand-text h1 .ecv-rotating-text {
    display: inline-block;
    position: relative;
    min-width: 280px;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
}

.play-hub-brand-text h1 .ecv-rotating-text .ecv-word {
    display: block;
    position: absolute;
    top: 0.05em;
    left: 0;
    width: 100%;
    line-height: inherit;
    opacity: 0;
    transform: translateY(100%);
    animation: ecv-rotate-words 6s infinite;
    color: var(--primary);
    font-weight: inherit;
    font-size: inherit;
    white-space: nowrap;
    text-shadow:
        0 0 40px rgba(61, 189, 170, 0.6),
        0 0 80px rgba(61, 189, 170, 0.3),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

.play-hub-brand-text h1 .ecv-rotating-text .ecv-word:nth-child(1) {
    animation-delay: 0s;
}

.play-hub-brand-text h1 .ecv-rotating-text .ecv-word:nth-child(2) {
    animation-delay: 2s;
}

.play-hub-brand-text h1 .ecv-rotating-text .ecv-word:nth-child(3) {
    animation-delay: 4s;
}

.play-hub-tagline {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    padding: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.play-hub-status {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* CS2 Angular Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    position: relative;
}

.status-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    padding: 1px;
    background: linear-gradient(135deg, currentColor, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
}

.status-badge.live {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.25), inset 0 0 20px rgba(34, 197, 94, 0.1);
}

.status-badge.live .pulse {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}

.status-badge.upcoming {
    background: rgba(242, 169, 0, 0.15);
    color: var(--cs2-yellow);
    box-shadow: 0 0 20px rgba(242, 169, 0, 0.2), inset 0 0 20px rgba(242, 169, 0, 0.05);
}

.play-hub-quick-actions {
    display: flex;
    gap: 0.75rem;
}

/* CS2 Angular Buttons */
.quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: relative;
}

.quick-action::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    padding: 1px;
    background: linear-gradient(135deg, currentColor 0%, transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    transition: opacity 0.25s;
}

.quick-action:hover::before {
    opacity: 1;
}

.quick-action.discord {
    background: rgba(88, 101, 242, 0.2);
    color: #7289da;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.15);
}

.quick-action.discord:hover {
    background: rgba(88, 101, 242, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(88, 101, 242, 0.3);
}

.quick-action.twitch {
    background: rgba(145, 70, 255, 0.2);
    color: #bf94ff;
    box-shadow: 0 4px 15px rgba(145, 70, 255, 0.2);
}

.quick-action.twitch:hover {
    background: rgba(145, 70, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(145, 70, 255, 0.3);
}

.quick-action.start {
    background: rgba(61, 189, 170, 0.2);
    color: var(--primary);
    box-shadow: 0 4px 20px rgba(61, 189, 170, 0.15);
}

.quick-action.start:hover {
    background: rgba(61, 189, 170, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(61, 189, 170, 0.3);
}

.action-badge {
    background: var(--primary);
    color: var(--secondary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
}

/* Main Grid Layout */
.play-hub-main {
    padding: 2.5rem 0;
}

/* ========================================
   Play Hub Tabs Navigation
   ======================================== */
.play-hub-tabs {
    background: var(--surface);
    border-bottom: 2px solid var(--game-accent, var(--primary));
    position: sticky;
    top: 70px;
    z-index: 50;
}

.tabs-wrapper {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0;
}

.hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.play-hub .hub-tab:hover {
    color: var(--game-accent, var(--primary));
    background: var(--surface-light);
}

.play-hub .hub-tab.active {
    color: #000;
    background: var(--game-accent, var(--primary));
    box-shadow: 0 0 15px var(--game-accent-glow, rgba(61, 189, 170, 0.3));
}

.hub-tab svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.play-hub .hub-tab.active svg {
    opacity: 1;
}

.tab-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tab-badge.live {
    background: #ef4444;
    color: white;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.play-hub-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

.play-hub-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ========================================
   Hub Stats Grid (Quick Stats Cards)
   ======================================== */
.hub-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hub-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.hub-stat-card:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--game-accent-glow, rgba(61, 189, 170, 0.2));
}

.hub-stat-card .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--surface-light);
    border-radius: 10px;
    color: var(--game-accent, var(--primary));
    flex-shrink: 0;
}

.hub-stat-card .stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hub-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.hub-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

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

@media (max-width: 480px) {
    .hub-stats-grid {
        grid-template-columns: 1fr;
    }

    .hub-stat-card {
        padding: 1rem;
    }
}

/* ========================================
   Event Card Hub (Agenda Cards)
   ======================================== */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-card-hub {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.event-card-hub:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateX(4px);
    box-shadow: 0 4px 20px var(--game-accent-glow, rgba(61, 189, 170, 0.15));
}

/* Event card with background image */
.event-card-hub.has-bg {
    position: relative;
}

.event-card-hub .event-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--event-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.event-card-hub.has-bg:hover .event-card-bg {
    opacity: 0.25;
}

.event-card-hub.has-bg > *:not(.event-card-bg) {
    position: relative;
    z-index: 1;
}

.event-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 0.75rem;
    background: var(--game-accent, var(--primary));
    border-radius: 10px;
    flex-shrink: 0;
}

.event-date-block .event-day {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

.event-date-block .event-month {
    font-size: 0.7rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info {
    flex: 1;
    min-width: 0;
}

.event-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.event-type-badge.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.event-type-badge.orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.event-type-badge.green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.event-type-badge.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.event-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.event-meta svg {
    opacity: 0.7;
}

.event-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.event-action.btn-outline-small {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--game-accent, var(--primary));
    color: var(--game-accent, var(--primary));
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.event-action.btn-outline-small:hover {
    background: var(--game-accent, var(--primary));
    color: #000;
}

@media (max-width: 768px) {
    .event-card-hub {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .event-date-block {
        flex-direction: row;
        gap: 0.5rem;
        min-width: auto;
        padding: 0.5rem 0.75rem;
    }

    .event-date-block .event-day {
        font-size: 1.25rem;
    }

    .event-action.btn-outline-small {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   Leaderboard Preview (Top Spelers)
   ======================================== */
.leaderboard-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.leaderboard-row:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateX(4px);
}

.leaderboard-row.top-3 {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
}

.leaderboard-row .rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.leaderboard-row .rank.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.leaderboard-row .rank.crown {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.leaderboard-row .rank.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
    color: #000;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.leaderboard-row .rank.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

.leaderboard-row .player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.leaderboard-row .player-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.leaderboard-row .player-main {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.leaderboard-row .player-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.leaderboard-row .player-stats .wins {
    color: #22c55e;
}

.leaderboard-row .player-stats .losses {
    color: #ef4444;
}

.leaderboard-row .player-stats .winrate {
    color: var(--game-accent, var(--primary));
    background: var(--game-accent-glow, rgba(61, 189, 170, 0.1));
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* ========================================
   Leaderboard Full (Full Ranglijst Table)
   ======================================== */
.leaderboard-full {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 50px 1fr 80px 60px 60px 70px 80px;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--game-accent, var(--primary));
}

.leaderboard-full .leaderboard-row {
    display: grid;
    grid-template-columns: 50px 1fr 80px 60px 60px 70px 80px;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}

.leaderboard-full .leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-full .leaderboard-row:hover {
    background: var(--surface-light);
}

.leaderboard-full .leaderboard-row.rank-1,
.leaderboard-full .leaderboard-row.rank-2,
.leaderboard-full .leaderboard-row.rank-3 {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
}

.leaderboard-full .player-name {
    font-weight: 600;
    color: var(--text-primary);
}

.leaderboard-full .player-main {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.leaderboard-full .wins {
    color: var(--success, #22c55e);
    font-weight: 600;
}

.leaderboard-full .losses {
    color: var(--error, #ef4444);
    font-weight: 600;
}

.leaderboard-full .winrate {
    color: var(--game-accent, var(--primary));
    font-weight: 600;
}

.leaderboard-full .points {
    color: var(--text-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .leaderboard-header,
    .leaderboard-full .leaderboard-row {
        grid-template-columns: 40px 1fr 60px 60px;
        font-size: 0.8rem;
    }

    .leaderboard-header .col-main,
    .leaderboard-header .col-losses,
    .leaderboard-header .col-winrate,
    .leaderboard-full .player-main,
    .leaderboard-full .losses,
    .leaderboard-full .winrate {
        display: none;
    }
}

/* ========================================
   Team Leaderboard
   ======================================== */
.leaderboard-full.teams .leaderboard-header {
    grid-template-columns: 50px 1fr 60px 60px 70px 80px;
}

.leaderboard-full.teams .leaderboard-row {
    grid-template-columns: 50px 1fr 60px 60px 70px 80px;
    position: relative;
    overflow: hidden;
}

/* Team Col - ensure it fills the grid cell for ECV logo background */
.leaderboard-full.teams .team-col {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 48px;
    position: relative;
}

/* Maps Column */
.leaderboard-full .maps {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .leaderboard-full.teams .leaderboard-header,
    .leaderboard-full.teams .leaderboard-row {
        grid-template-columns: 40px 1fr 50px 60px;
    }

    .leaderboard-full.teams .col-losses,
    .leaderboard-full.teams .col-maps,
    .leaderboard-full.teams .losses,
    .leaderboard-full.teams .maps {
        display: none;
    }
}

/* ========================================
   Past Tournaments List
   ======================================== */
.past-tournaments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.past-tournament-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.past-tournament-item:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateX(4px);
    background: var(--surface-light);
}

.past-tournament-item .view-bracket {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--game-accent, var(--primary));
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.past-tournament-item:hover .view-bracket {
    opacity: 1;
}

.past-tournament-item .tournament-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.past-tournament-item .tournament-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.past-tournament-item .tournament-info .tournament-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.past-tournament-item .tournament-winner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
}

.past-tournament-item .tournament-winner .winner-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.past-tournament-item .tournament-winner .winner-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--game-accent, var(--primary));
}

@media (max-width: 768px) {
    .past-tournament-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .past-tournament-item .tournament-winner {
        text-align: left;
    }
}

/* ========================================
   Recent Matches (Recente Uitslagen)
   ======================================== */
.recent-matches {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.match-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.match-result:hover {
    border-color: var(--game-accent, var(--primary));
}

.match-result .match-players {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.match-result .match-players .player {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.match-result .match-players .player.winner {
    color: var(--text-primary);
    font-weight: 600;
}

.match-result .match-players .player.winner::before {
    content: "👑 ";
    font-size: 0.8rem;
}

.match-result .match-players .vs {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--game-accent, var(--primary));
    background: var(--game-accent-glow, rgba(61, 189, 170, 0.1));
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

.match-result .match-event {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .leaderboard-row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .leaderboard-row .player-stats {
        width: 100%;
        justify-content: flex-start;
        padding-left: 3rem;
    }

    .match-result {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .match-result .match-event {
        text-align: left;
    }
}

/* ========================================
   Tournament Filters & Cards (Toernooien Tab)
   ======================================== */
.tournament-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.filter-tab:hover {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--game-accent, var(--primary));
}

.filter-tab.active {
    background: var(--game-accent, var(--primary));
    color: #000;
    border-color: var(--game-accent, var(--primary));
}

.filter-tab .live-indicator {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Tournaments Full Grid */
.tournaments-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.tournament-full-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-light);
    background-image: url('../images/maps/nuke.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    padding: 1.25rem;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: relative;
}

.tournament-full-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 0;
}

.tournament-full-card > * {
    position: relative;
    z-index: 1;
}

.tournament-full-card:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tournament-full-card.hidden {
    display: none;
}

.tournament-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.tournament-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 2px;
}

.tournament-status.status-active {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tournament-status.status-active .pulse {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

.tournament-status.status-registration,
.tournament-status.status-seeding {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.tournament-status.status-completed {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.tournament-prize {
    background: var(--game-accent, var(--primary));
    color: #000;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
}

.tournament-full-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.tournament-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tournament-card-details .detail {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
}

.tournament-card-details .detail svg {
    opacity: 0.8;
    stroke: rgba(255,255,255,0.85);
}

.tournament-card-details .detail.format {
    background: rgba(255,255,255,0.15);
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
}

.tournament-card-date {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: auto;
}

.no-tournaments {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

/* ========================================
   Agenda Section (Events Tab)
   ======================================== */
.agenda-events-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agenda-event-card {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.agenda-event-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* CS2 Wallpaper Backgrounds for Event Cards */
.agenda-event-card {
    position: relative;
    overflow: hidden;
}

.agenda-event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.agenda-event-card:hover::before {
    opacity: 0.35;
}

/* Default background - Dust2 */
.agenda-event-card::before {
    background-image: url('../images/cs2/dust2-action.jpg');
}

/* Tournament events - Inferno map */
.agenda-event-card.type-tournament::before {
    background-image: url('../images/cs2/inferno-overview.png');
}

/* Game night events - Dust2 action */
.agenda-event-card.type-game-night::before {
    background-image: url('../images/cs2/dust2-action.jpg');
}

/* Stream events - CS2 Steam header */
.agenda-event-card.type-stream::before {
    background-image: url('../images/cs2/steam-header.jpg');
}

/* Special events - CS2 boxart */
.agenda-event-card.type-special::before {
    background-image: url('../images/cs2/cs2-boxart.jpg');
}

/* nth-child variation for visual variety */
.agenda-event-card:nth-child(2)::before {
    background-image: url('../images/cs2/nuke-overview.png');
}

.agenda-event-card:nth-child(3)::before {
    background-image: url('../images/cs2/ancient-overview.png');
}

.agenda-event-card:nth-child(4)::before {
    background-image: url('../images/cs2/cs2-screenshot-1.png');
}

.agenda-event-card:nth-child(5)::before {
    background-image: url('../images/cs2/cs2-screenshot-9.jpg');
}

/* Dark mode: more visible backgrounds */
[data-theme="dark"] .agenda-event-card::before {
    opacity: 0.12;
}

[data-theme="dark"] .agenda-event-card:hover::before {
    opacity: 0.2;
}

/* Ensure content stays above background */
.agenda-event-card > * {
    position: relative;
    z-index: 1;
}

.agenda-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--surface);
    border-radius: 4px;
    text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agenda-date .date-day {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.agenda-date .date-month {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.agenda-date .date-weekday {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.agenda-event-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agenda-event-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.event-type-tag {
    display: inline-block;
    width: fit-content;
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 2px;
}

.event-type-tag.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.event-type-tag.orange {
    background: rgba(61, 189, 170, 0.15);
    color: var(--primary);
}

.event-type-tag.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.event-type-tag.gold {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.agenda-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.agenda-event-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.agenda-event-meta .meta-item svg {
    opacity: 0.6;
}

.agenda-event-excerpt {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.agenda-event-actions {
    display: flex;
    align-items: center;
}

.agenda-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.agenda-btn.primary {
    background: #5865F2;
    color: white;
}

.agenda-btn.primary:hover {
    background: #4752c4;
    transform: translateY(-1px);
}

.agenda-empty {
    text-align: center;
    padding: 3rem 2rem;
}

.agenda-empty p {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.agenda-empty span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Past Events List */
.past-agenda-section {
    margin-top: 1.5rem;
}

.past-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.past-event-item {
    display: grid;
    grid-template-columns: 100px 100px 1fr auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-light);
    border-radius: 4px;
    font-size: 0.875rem;
    align-items: center;
}

.past-event-date {
    color: var(--text-secondary);
}

.past-event-type {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    text-align: center;
}

.past-event-type.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.past-event-type.orange {
    background: rgba(61, 189, 170, 0.1);
    color: var(--primary);
}

.past-event-type.purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.past-event-type.gold {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.past-event-title {
    font-weight: 500;
    color: var(--text-primary);
}

.past-event-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.past-event-status.completed {
    color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
    .agenda-event-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .agenda-date {
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .agenda-date .date-day {
        font-size: 1.5rem;
    }

    .agenda-event-actions {
        justify-content: flex-start;
    }

    .past-event-item {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .past-event-title {
        grid-column: span 2;
    }
}

/* CS2 Style Hub Sections */
.hub-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1.5rem;
    position: relative;
}

/* CS2 Corner Accent */
.hub-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--cs2-yellow, var(--primary)) 0%, transparent 100%);
}

.hub-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 40px;
    background: linear-gradient(180deg, var(--cs2-yellow, var(--primary)) 0%, transparent 100%);
}

.section-header-hub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.section-title-hub {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.section-title-hub svg {
    color: var(--game-accent, var(--primary));
    opacity: 0.9;
}

.section-title-hub h2 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.125rem;
}

.section-title-hub .twitch-icon {
    color: #9146FF;
}

.section-title-hub .live-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.section-title-hub h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.live-indicator-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s;
}

.section-link:hover {
    gap: 0.625rem;
}

.section-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Stream Embed Section */
.stream-embed {
    position: relative;
    background: #18181b;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.stream-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.stream-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.stream-offline-overlay {
    display: none; /* Controlled by JS when stream is offline */
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #18181b 0%, #0e0e10 100%);
    align-items: center;
    justify-content: center;
}

.offline-content {
    text-align: center;
    padding: 2rem;
}

.offline-content svg {
    color: #9146FF;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.offline-content h3 {
    font-size: 1.25rem;
    color: white;
    margin: 0 0 0.5rem;
}

.offline-content p {
    font-size: 0.875rem;
    color: #adadb8;
    margin: 0 0 1.5rem;
}

.btn-stream-follow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #9146FF;
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-stream-follow:hover {
    background: #772ce8;
    color: white;
}

/* Stream Info Bar (when YouTube is shown) */
.stream-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.08) 0%, var(--surface-light) 100%);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.info-bar-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.info-bar-content .youtube-icon-small {
    color: #ff0000;
}

.info-bar-content strong {
    color: var(--text-primary);
}

.follow-twitch-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9146FF;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    background: rgba(145, 70, 255, 0.1);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.follow-twitch-link:hover {
    background: #9146FF;
    color: white;
}

.section-link.youtube {
    color: #ff0000;
}

.section-link.youtube:hover {
    color: #cc0000;
}

.section-title-hub .youtube-icon {
    color: #ff0000;
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.news-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.news-card:hover::after {
    opacity: 1;
}

.news-card.featured {
    grid-column: span 2;
    flex-direction: row;
}

.news-image {
    position: relative;
    overflow: hidden;
}

.news-card.featured .news-image {
    width: 45%;
    flex-shrink: 0;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-card.featured .news-content {
    padding: 1.5rem;
}

.news-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.news-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.news-card.featured h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.news-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Recent Events List */
.recent-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recent-event-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.recent-event-card:hover {
    border-color: var(--primary);
}

.recent-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.recent-event-date .day {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.recent-event-date .month {
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recent-event-info {
    flex: 1;
    min-width: 0;
}

.event-type-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.375rem;
}

.event-type-badge.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.event-type-badge.orange {
    background: var(--primary-glow);
    color: var(--primary);
}

.event-type-badge.purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.event-type-badge.gold {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.recent-event-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-event-info p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-event-status {
    flex-shrink: 0;
}

.completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
}

/* Sidebar */
.play-hub-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Sidebar Cards (used in game-specific sections) */
.sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.sidebar-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.sidebar-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.sidebar-card .discord-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sidebar-card .discord-header svg {
    color: #5865F2;
    flex-shrink: 0;
}

.sidebar-card .discord-header h4 {
    margin: 0;
}

.sidebar-card .btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: #5865F2;
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-card .btn-discord:hover {
    background: #4752C4;
    transform: translateY(-1px);
}

.sidebar-card .rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-card .rules-list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

.sidebar-card .rules-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--game-accent, var(--primary));
    font-weight: bold;
}

.sidebar-card .stages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sidebar-card .stage-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.widget-header svg {
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.widget-header .youtube-icon {
    color: #ff0000;
}

.widget-header h3 {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative;
    top: 1px;
}

.sidebar-widget > p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.widget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.widget-btn:last-of-type {
    margin-bottom: 0;
}

.widget-btn.primary {
    background: var(--primary);
    color: white;
}

.widget-btn.primary:hover {
    background: var(--primary-hover);
    color: white;
}

.widget-btn.discord {
    background: rgba(88, 101, 242, 0.1);
    border: 1px solid rgba(88, 101, 242, 0.2);
    color: #5865F2;
}

.widget-btn.discord:hover {
    background: #5865F2;
    border-color: #5865F2;
    color: white;
}

.widget-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.75rem;
    transition: gap 0.2s;
}

.widget-link:hover {
    gap: 0.625rem;
}

.widget-link.youtube {
    color: #ff0000;
}

/* YouTube Shorts Widget */
.shorts-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.shorts-widget .widget-header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.shorts-widget .widget-header h3 {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.shorts-container {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-light);
}

.shorts-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: none;
}

.shorts-widget .widget-link {
    border-color: var(--border);
}

.shorts-widget .widget-link.youtube {
    background: rgba(255, 0, 0, 0.08);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
    border-top: none;
}

.shorts-widget .widget-link.youtube:hover {
    background: rgba(255, 0, 0, 0.15);
}

/* Events List Widget */
.events-list-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-item-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s;
}

.event-item-widget:hover {
    background: var(--surface-lighter);
}

.event-date-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: white;
}

.event-date-mini .day {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

.event-date-mini .month {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.event-info-mini {
    flex: 1;
    min-width: 0;
}

.event-info-mini h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-info-mini .event-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Results List Widget */
.results-list-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-item-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s;
}

.result-item-widget:hover {
    background: var(--surface-lighter);
}

.result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: var(--primary);
}

.result-info-mini {
    flex: 1;
    min-width: 0;
}

.result-info-mini h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-info-mini .result-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.result-item-widget .result-date {
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Discord Widget Sidebar - Solid Discord Branding */
.sidebar-widget.discord-widget-sidebar {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
    border-color: #5865F2 !important;
}

.sidebar-widget.discord-widget-sidebar .discord-widget-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.sidebar-widget.discord-widget-sidebar .discord-widget-header svg {
    color: white !important;
}

.sidebar-widget.discord-widget-sidebar .discord-widget-header h3,
.sidebar-widget.discord-widget-sidebar h3 {
    font-size: 1rem;
    font-weight: 700;
    color: white !important;
    margin: 0;
}

.sidebar-widget.discord-widget-sidebar .discord-stats {
    margin-bottom: 0.75rem;
}

.sidebar-widget.discord-widget-sidebar .discord-stat,
.sidebar-widget.discord-widget-sidebar .discord-stat span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-widget.discord-widget-sidebar .discord-stat .online-dot {
    width: 8px;
    height: 8px;
    background: #3ba55c;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

.sidebar-widget.discord-widget-sidebar p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.sidebar-widget.discord-widget-sidebar .discord-join-btn {
    display: block;
    text-align: center;
    padding: 0.75rem;
    background: white !important;
    color: #5865F2 !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-widget.discord-widget-sidebar .discord-join-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #4752c4 !important;
    transform: translateY(-1px);
}

/* YouTube Widget */
.youtube-widget {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, var(--surface) 100%);
}

/* ========================================
   Team Leaderboard Section
   ======================================== */
.leaderboard-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.leaderboard-stats-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.leaderboard-stats-mini .stat-divider {
    opacity: 0.5;
}

.leaderboard-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Leaderboard Table */
.leaderboard-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    table-layout: auto;
    border: 1px solid var(--border);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.leaderboard-table thead {
    background: var(--surface-light);
}

.leaderboard-table th {
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--cs2-yellow, var(--primary));
}

.leaderboard-table td {
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

/* Column alignment */
.leaderboard-table .rank-col { text-align: center; white-space: nowrap; }
.leaderboard-table .record-col { text-align: center; white-space: nowrap; }
.leaderboard-table .winrate-col { white-space: nowrap; }
.leaderboard-table .maps-col { text-align: center; white-space: nowrap; }
.leaderboard-table .tournaments-col { text-align: center; white-space: nowrap; }

.leaderboard-row:hover {
    background: var(--surface-light);
}

.leaderboard-row.gold {
    background: rgba(255, 215, 0, 0.05);
}

.leaderboard-row.silver {
    background: rgba(192, 192, 192, 0.05);
}

.leaderboard-row.bronze {
    background: rgba(205, 127, 50, 0.05);
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--surface-light);
    border: 1px solid var(--border);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.rank-badge.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    border-color: #FFD700;
}

.rank-badge.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: #000;
    border-color: #C0C0C0;
}

.rank-badge.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
    color: #fff;
    border-color: #CD7F32;
}

/* Crown Foil for 1st place - replaces rank badge */
.rank-crown {
    width: 36px;
    height: 36px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* Team Info */
.team-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-info .team-name {
    font-weight: 600;
}

.team-info .team-tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ECV Team Styling in Leaderboard */
.leaderboard-row.ecv-team {
    background: linear-gradient(90deg, rgba(61, 189, 170, 0.08) 0%, transparent 70%);
}

.leaderboard-row.ecv-team .team-col {
    position: relative;
    overflow: visible;
}

.leaderboard-row.ecv-team .team-col::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: url('../images/ecvesportslogo80x80.svg') center center no-repeat;
    background-size: contain;
    opacity: 0.25;
    pointer-events: none;
}

/* Light mode - invert logo color for visibility on white */
:root:not([data-theme="dark"]) .leaderboard-row.ecv-team .team-col::before,
[data-theme="light"] .leaderboard-row.ecv-team .team-col::before {
    opacity: 0.15;
    filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1500%) hue-rotate(360deg);
}

.leaderboard-row.ecv-team .team-name {
    color: var(--primary);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.leaderboard-row.ecv-team .team-info {
    position: relative;
    z-index: 1;
}

/* Hide the inline logo since we use background */
.team-ecv-logo {
    display: none;
}

/* ==============================================
   ECV TEAM KEURMERK - Recent Matches
   Zelfde stijl als ranglijst: subtiel en professioneel
   ============================================== */
.match-result-card.ecv-match {
    position: relative;
    background: linear-gradient(90deg, rgba(61, 189, 170, 0.08) 0%, transparent 70%);
    overflow: hidden;
}

.match-result-card.ecv-match::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: url('../images/ecvesportslogo80x80.svg') left center / auto 90% no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

/* Light mode - invert logo color for visibility on white */
:root:not([data-theme="dark"]) .match-result-card.ecv-match::before,
[data-theme="light"] .match-result-card.ecv-match::before {
    opacity: 0.15;
    filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1500%) hue-rotate(360deg);
}

/* Ensure text stays above logo */
.match-result-card.ecv-match .match-teams,
.match-result-card.ecv-match .match-maps {
    position: relative;
    z-index: 1;
}

.match-team.ecv-team .team-name {
    color: var(--primary);
    font-weight: 700;
}

/* Record Column */
.record-col .wins {
    color: #22c55e;
    font-weight: 600;
}

.record-col .losses {
    color: #ef4444;
    font-weight: 600;
}

.record-col .separator {
    color: var(--text-secondary);
    margin: 0 0.25rem;
}

/* Win Rate Bar */
.winrate-bar-wrapper {
    position: relative;
    width: 70px;
    height: 18px;
    background: var(--surface-light);
    border-radius: 2px;
    overflow: hidden;
}

.winrate-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cs2-yellow, var(--primary)) 0%, rgba(242, 169, 0, 0.6) 100%);
    transition: width 0.3s ease;
}

.winrate-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 2px var(--surface);
}

/* Maps Column */
.maps-col .maps-won {
    color: #22c55e;
}

.maps-col .maps-lost {
    color: #ef4444;
}

.maps-col .maps-separator {
    color: var(--text-secondary);
    margin: 0 0.125rem;
}

/* Leaderboard Empty State */
.leaderboard-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.leaderboard-empty p {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.leaderboard-empty span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Recent Matches Panel */
.recent-matches-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    overflow: hidden;
}

/* Maps Banner - Chevron Style */
.maps-banner {
    position: relative;
    height: 70px;
    background: #1e2328;
    overflow: hidden;
}

.maps-banner-inner {
    display: flex;
    height: 100%;
    padding-left: 8px;
}

.map-chevron {
    position: relative;
    flex: 1;
    min-width: 50px;
    height: 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    margin-left: -12px;
}

.map-chevron:first-child {
    margin-left: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* Map backgrounds with optimized positions */
.map-chevron[data-map="dust2"] {
    background-image: url('../images/maps/dust2.jpg');
    background-color: #c4a06a;
    background-position: 60% 50%;
}

.map-chevron[data-map="mirage"] {
    background-image: url('../images/maps/mirage.jpg');
    background-color: #c9a86c;
    background-position: 50% 40%;
}

.map-chevron[data-map="inferno"] {
    background-image: url('../images/maps/inferno.jpg');
    background-color: #9a8a7a;
    background-position: 40% 50%;
}

.map-chevron[data-map="ancient"] {
    background-image: url('../images/maps/ancient.jpg');
    background-color: #6a8a7a;
    background-position: 50% 50%;
}

.map-chevron[data-map="nuke"] {
    background-image: url('../images/maps/nuke.jpg');
    background-color: #6a8a9a;
    background-position: 50% 60%;
}

.map-chevron[data-map="anubis"] {
    background-image: url('../images/maps/anubis.jpg');
    background-color: #8a7a5a;
    background-position: 50% 45%;
}

/* Subtle overlay for cohesion */
.map-chevron::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}

.recent-matches-panel h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.recent-matches-panel h3 svg {
    color: var(--game-accent, var(--primary));
}

.recent-matches-list {
    padding: 0.5rem;
}

/* Match Result Card */
.match-result-card {
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: var(--surface-light);
}

.match-result-card:last-child {
    margin-bottom: 0;
}

.match-teams {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    gap: 0;
}

.match-team {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.match-team:first-child {
    justify-content: flex-end;
}

.match-team:last-child {
    justify-content: flex-start;
}

.match-team .team-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.match-team:first-child .team-name {
    text-align: right;
    padding-right: 0.5rem;
}

.match-team:last-child .team-name {
    text-align: left;
    padding-left: 0.5rem;
}

.match-team .team-score {
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.match-team.winner .team-score {
    color: #22c55e;
}

.match-team.loser .team-score {
    color: #ef4444;
    opacity: 0.7;
}

.match-team.loser .team-name {
    opacity: 0.7;
}

.match-vs {
    font-size: 0.55rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.4;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

.match-maps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.map-result {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--surface-lighter);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
}

.map-name {
    color: var(--text-secondary);
    text-transform: capitalize;
}

.map-score {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-heading);
}

.match-meta {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--border);
}

.match-meta .tournament-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .leaderboard-layout {
        flex-direction: column;
    }

    .recent-matches-panel {
        order: -1;
    }
}

@media (max-width: 768px) {
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.5rem 0.75rem;
    }

    .leaderboard-table .maps-col,
    .leaderboard-table .tournaments-col {
        display: none;
    }

    .winrate-bar-wrapper {
        width: 60px;
    }
}

/* Play Hub CTA */
/* CS2 Style CTA Section */
.play-hub-cta {
    padding: 3rem 0;
    background: var(--surface);
    border-top: 2px solid var(--cs2-yellow, var(--primary));
    position: relative;
}

.play-hub-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(242, 169, 0, 0.03) 0%, transparent 50%),
        linear-gradient(225deg, rgba(242, 169, 0, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

.cta-box-hub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
}

/* CS2 Corner Accents for CTA */
.cta-box-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--cs2-yellow, var(--primary)), transparent);
}

.cta-box-hub::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 60px;
    background: linear-gradient(180deg, var(--cs2-yellow, var(--primary)), transparent);
}

.cta-content-hub h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cta-content-hub p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.cta-actions-hub {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cta-actions-hub .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    border-radius: 4px;
}

.cta-actions-hub .cta-btn.primary {
    background: var(--primary);
    color: white;
}

.cta-actions-hub .cta-btn.primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(61, 189, 170, 0.3);
}

.cta-actions-hub .cta-btn.secondary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.cta-actions-hub .cta-btn.secondary:hover {
    background: rgba(61, 189, 170, 0.1);
    transform: translateY(-2px);
}

/* CS2 Angular CTA Buttons */
.play-hub-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: relative;
}

.play-hub-cta .cta-btn.primary {
    background: var(--game-accent, var(--primary));
    color: #000;
}

.play-hub-cta .cta-btn.primary:hover {
    background: var(--game-accent-hover, var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--game-accent-glow, rgba(61, 189, 170, 0.3));
}

.play-hub-cta .cta-btn.secondary {
    background: transparent;
    border: 2px solid var(--game-accent, var(--primary));
    color: var(--game-accent, var(--primary));
}

.play-hub-cta .cta-btn.secondary:hover {
    background: var(--game-accent-glow, rgba(61, 189, 170, 0.15));
    transform: translateY(-2px);
}

/* Dark Theme Overrides for Play Hub */
[data-theme="dark"] .play-hub-hero {
    background: var(--surface);
}

[data-theme="dark"] .hub-section {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .sidebar-widget {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .news-card,
[data-theme="dark"] .recent-event-card,
[data-theme="dark"] .event-item-widget,
[data-theme="dark"] .result-item-widget {
    background: var(--surface-light);
    border-color: var(--border);
}

[data-theme="dark"] .cta-box-hub {
    background: var(--surface);
    border-color: var(--border);
}

/* Play Hub Responsive */
@media (max-width: 1024px) {
    .play-hub-grid {
        grid-template-columns: 1fr;
    }

    .play-hub-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .registration-widget {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .play-hub-hero .container {
        flex-direction: column;
        text-align: center;
    }

    .play-hub-hero-content {
        flex-direction: column;
        align-items: center;
    }

    .play-hub-brand {
        flex-direction: column;
        text-align: center;
    }

    .play-hub-status {
        justify-content: center;
    }

    /* Tabs responsive */
    .play-hub-tabs {
        top: 60px;
    }

    .tabs-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .hub-tab {
        padding: 0.625rem 1rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .tournaments-full-grid {
        grid-template-columns: 1fr;
    }

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

    .news-card.featured {
        grid-column: span 1;
        flex-direction: column;
    }

    .news-card.featured .news-image {
        width: 100%;
        height: 180px;
    }

    .play-hub-sidebar {
        grid-template-columns: 1fr;
    }

    .registration-widget {
        grid-column: span 1;
    }

    .cta-box-hub {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem;
    }

    .cta-actions-hub {
        flex-direction: column;
        width: 100%;
    }

    .play-hub-cta .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .play-hub-hero {
        padding: 6rem 0 2rem;
    }

    .play-hub-hero::before {
        opacity: 0.4;
    }

    .play-hub-logo {
        width: 56px;
        height: 56px;
    }

    .play-hub-brand-text h1 {
        font-size: 1.75rem;
    }

    .shorts-container {
        height: 320px;
    }

    .play-hub-quick-actions {
        flex-direction: column;
        width: 100%;
    }

    .quick-action {
        width: 100%;
        justify-content: center;
    }

    .hub-section {
        padding: 1rem;
    }

    .section-title-hub h2 {
        font-size: 1rem;
    }

    .recent-event-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .recent-event-status {
        align-self: flex-end;
    }
}

/* ========================================
   COMMUNITY HUB PAGE
   ======================================== */

.community-hub {
    background: var(--secondary);
    min-height: 100vh;
}

/* Community Hero - Legacy (kept for non .community-page contexts) */
.community-hero {
    padding: 10rem 0 3rem;
    position: relative;
    overflow: hidden;
    background: #001522;
}

.community-hero-content {
    text-align: center;
}

.community-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.community-logo {
    width: 80px;
    height: 80px;
}

.community-brand-text h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.community-brand-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0.5rem 0 0;
}

/* Community Tabs Navigation */
.community-tabs {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 70px;
    z-index: 100;
}

.community-tabs .tabs-wrapper {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.community-tabs .tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.community-tabs .hub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.community-tabs .hub-tab:hover {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--primary);
}

.community-tabs .hub-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.community-tabs .hub-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Community Main Content */
.community-main {
    padding: 3rem 0;
}

.community-main .tab-content {
    display: none;
}

.community-main .tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Community Content Grid */
.community-content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

.community-content-single {
    max-width: 800px;
}

/* Community Section */
.community-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.community-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.community-section h2 span {
    color: var(--primary);
}

.community-section .lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.community-section .benelux-flag {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin: 0 0.25rem;
}

.community-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* About Features Grid */
.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.about-feature {
    text-align: center;
    padding: 1.5rem;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.about-feature:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.about-feature h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.about-feature p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ECVesports Section */
.ecvesports-section {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(61, 189, 170, 0.05) 100%);
    border-color: rgba(61, 189, 170, 0.3);
}

.ecv-brand-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ecv-brand-header .ecv-logo {
    width: 64px;
    height: auto;
}

.ecv-brand-header .badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ecv-brand-header h2 {
    margin: 0;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

/* Community Sidebar */
.community-sidebar {
    position: sticky;
    top: 150px;
}

.sidebar-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sidebar-widget h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

/* Social Links Widget */
.socials-widget .social-links {
    display: flex;
    gap: 0.75rem;
}

.social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.social-link:hover {
    transform: translateY(-2px);
}

.social-link.youtube:hover {
    background: #FF0000;
    color: white;
    border-color: #FF0000;
}

.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
    border-color: transparent;
}

.social-link.twitter:hover {
    background: #000;
    color: white;
    border-color: #000;
}

.social-link.facebook:hover {
    background: #1877F2;
    color: white;
    border-color: #1877F2;
}

/* Rules Section */
.rules-section .lead {
    margin-bottom: 2rem;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rule-item {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.rule-item:hover {
    border-color: var(--primary);
}

.rule-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.rule-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.rule-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.rules-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(61, 189, 170, 0.1);
    border: 1px solid rgba(61, 189, 170, 0.3);
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
}

.rules-note svg {
    color: var(--primary);
    stroke: var(--primary);
    fill: none;
    flex-shrink: 0;
    margin-top: 0.125rem;
    width: 20px;
    height: 20px;
}

.rules-note p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Contact Section */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.contact-method:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.contact-method.discord:hover {
    border-color: #5865F2;
}

.contact-method.discord .method-icon {
    color: #5865F2;
}

.contact-method.email .method-icon {
    color: var(--primary);
}

.method-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.method-info {
    flex: 1;
}

.method-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.method-info p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.contact-method .arrow {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.contact-method:hover .arrow {
    transform: translateX(4px);
    color: var(--primary);
}

.contact-note {
    padding: 1.5rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: 2rem;
}

.contact-note h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.contact-note p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* FAQ Widget */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item summary {
    padding: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item[open] summary {
    border-bottom: 1px solid var(--border);
}

.faq-item p {
    padding: 1rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Community Responsive */
@media (max-width: 1024px) {
    .community-content-grid {
        grid-template-columns: 1fr;
    }

    .community-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .sidebar-widget {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .community-hero {
        padding: 7rem 0 1.5rem;
    }

    .community-brand-text h1 {
        font-size: 2rem;
    }

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

    .community-section {
        padding: 1.5rem;
    }

    .community-sidebar {
        grid-template-columns: 1fr;
    }

    .ecv-brand-header {
        flex-direction: column;
        text-align: center;
    }

    .rule-item {
        flex-direction: column;
        gap: 1rem;
    }

    .rule-number {
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .community-hero {
        padding: 6rem 0 1.5rem;
    }

    .community-logo {
        width: 64px;
        height: 64px;
    }

    .community-brand-text h1 {
        font-size: 1.75rem;
    }

    .community-tabs .hub-tab {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .community-section h2 {
        font-size: 1.5rem;
    }

    .contact-method {
        flex-wrap: wrap;
    }

    .contact-method .arrow {
        display: none;
    }
}

/* ========================================
   COMMUNITY PAGE - NEW DESIGN
   ======================================== */

.community-page {
    background: var(--secondary);
    min-height: 100vh;
}

/* Community Hero */
.community-page .community-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0 4rem;
    overflow: hidden;
}

.community-page .hero-bg {
    position: absolute;
    inset: -10px;
    background-size: cover;
    background-position: center top;
    z-index: 0;
    opacity: 1 !important;
    filter: blur(3px);
}

.community-page .hero-bg::after {
    display: none !important;
}

.community-page .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 75%, #001522 100%);
    z-index: 1;
}

.community-page .community-hero .container {
    position: relative;
    z-index: 2;
}

.community-page .hero-content {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.community-page .hero-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.community-page .hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin: 0 0 1rem;
    line-height: 1.1;
}

.community-page .hero-content h1 span {
    color: var(--primary);
}

.community-page .hero-content > p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.community-page .hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.community-page .btn-ghost {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}

.community-page .btn-ghost:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

/* Quick Links */
.community-quick-links {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
}

.community-cta-section {
    padding: 2rem 0;
    background: var(--bg);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
}

.quick-link-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-link-card.discord {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1) 0%, rgba(88, 101, 242, 0.05) 100%);
    border-color: rgba(88, 101, 242, 0.3);
}

.quick-link-card.discord:hover {
    border-color: #5865F2;
}

.quick-link-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border-radius: var(--radius-md);
    color: var(--primary);
    flex-shrink: 0;
}

.quick-link-card.discord .quick-link-icon {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

.quick-link-card.youtube {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.03) 100%);
    border-color: rgba(255, 0, 0, 0.2);
}

.quick-link-card.youtube:hover {
    border-color: #FF0000;
}

.quick-link-card.youtube .quick-link-icon {
    background: rgba(255, 0, 0, 0.12);
    color: #FF0000;
}

.quick-link-card.twitch {
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.08) 0%, rgba(145, 70, 255, 0.03) 100%);
    border-color: rgba(145, 70, 255, 0.2);
}

.quick-link-card.twitch:hover {
    border-color: #9146FF;
}

.quick-link-card.twitch .quick-link-icon {
    background: rgba(145, 70, 255, 0.12);
    color: #9146FF;
}

.quick-link-content {
    flex: 1;
}

.quick-link-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.quick-link-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.quick-link-card > svg {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: var(--transition);
}

.quick-link-card:hover > svg {
    color: var(--primary);
    transform: translateX(3px);
}

/* Navigation Tabs */
.community-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 70px;
    z-index: 50;
}

.community-nav .nav-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.community-nav .nav-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.community-nav .nav-tab:hover {
    color: var(--text-primary);
    background: var(--surface-light);
}

.community-nav .nav-tab.active {
    background: var(--primary);
    color: white;
}

/* Main Content */
.community-content {
    padding: 3rem 0;
}

.community-content .tab-panel {
    display: none;
}

.community-content .tab-panel.active {
    display: block;
    animation: fadeSlideIn 0.4s ease;
}

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

/* Content Section */
.content-section {
    margin-bottom: 3rem;
}

.content-section .section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.content-section .section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.content-section .section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Section Grid */
.section-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.section-main h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.section-main h2 span {
    color: var(--primary);
}

.section-main .lead {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.section-main > p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Feature Cards */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}

.feature-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.feature-card svg {
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Sidebar Cards */
.section-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Play Hub Card - Adventure Style */
.playhub-card-link {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: var(--transition);
    min-height: 140px;
}

.playhub-card-link .playhub-bg {
    position: absolute;
    inset: 0;
    background: url('../images/playhub-bg.png') center/cover;
    transition: var(--transition);
}

.playhub-card-link .playhub-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
}

.playhub-card-link:hover .playhub-bg {
    transform: scale(1.05);
}

.playhub-card-link .playhub-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 140px;
}

.playhub-card-link .playhub-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.playhub-card-link .play-icon-circle {
    fill: white;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
    flex-shrink: 0;
    transition: var(--transition);
}

.playhub-card-link:hover .play-icon-circle {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 16px rgba(255,255,255,0.4));
}

.playhub-card-link .playhub-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.playhub-card-link .playhub-subtitle {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
}

.playhub-card-link .playhub-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
    transition: var(--transition);
}

.playhub-card-link .playhub-cta svg {
    transition: var(--transition);
}

.playhub-card-link:hover .playhub-cta svg {
    transform: translateX(4px);
}

.playhub-card-link:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(200, 109, 31, 0.35);
}

.social-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.social-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

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

.social-card .social-links a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition);
}

.social-card .social-links a:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* ECVesports Section */
.ecv-section {
    margin-top: 2rem;
}

.ecv-card {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: linear-gradient(135deg, var(--surface) 0%, rgba(200,109,31,0.08) 100%);
    border: 1px solid rgba(200,109,31,0.3);
    border-radius: var(--radius-xl);
    padding: 3rem;
}

.ecv-logo {
    flex-shrink: 0;
}

.ecv-logo img {
    width: 120px;
    height: auto;
}

.ecv-content .badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ecv-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.ecv-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

/* Rules Grid */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.rule-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
}

.rule-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.rule-card:hover .rule-icon {
    transform: scale(1.1) rotate(-5deg);
    background: var(--primary);
}

.rule-card:hover .rule-icon svg {
    color: white;
    stroke: white;
}

.rule-card.highlight {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(61, 189, 170, 0.3);
}

.rule-card.highlight:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 32px rgba(61, 189, 170, 0.4);
}

.rule-card.highlight .rule-number,
.rule-card.highlight h3,
.rule-card.highlight p {
    color: white;
}

.rule-card .rule-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(61, 189, 170, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    transition: var(--transition);
}

.rule-card .rule-icon svg {
    color: var(--primary);
    stroke: var(--primary);
    transition: var(--transition);
}

.rule-card.highlight .rule-icon {
    background: rgba(255, 255, 255, 0.2);
}

.rule-card.highlight .rule-icon svg {
    color: white;
    stroke: white;
}

.rule-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.rule-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.contact-card:hover::before {
    transform: scaleY(1);
}

.contact-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.contact-card.primary {
    background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
}

.contact-card.primary::before {
    display: none;
}

.contact-card.primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(88, 101, 242, 0.4);
}

.contact-card.primary .contact-icon,
.contact-card.primary .contact-info h3,
.contact-card.primary .contact-info p,
.contact-card.primary > svg {
    color: white;
}

.contact-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    color: var(--primary);
    flex-shrink: 0;
    transition: var(--transition);
}

.contact-card:hover .contact-icon {
    background: var(--primary);
    color: white;
    transform: rotate(-5deg) scale(1.05);
}

.contact-card.primary .contact-icon {
    background: rgba(255,255,255,0.2);
}

.contact-card.primary:hover .contact-icon {
    background: rgba(255,255,255,0.3);
}

.contact-info {
    flex: 1;
}

.contact-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.contact-info p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.contact-card > svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* FAQ Section */
.faq-section {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-top: 2.5rem;
    position: relative;
    overflow: hidden;
}

.faq-section::before {
    content: '?';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 150px;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.05;
    pointer-events: none;
}

.faq-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-section h3::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--primary);
    border-radius: 2px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.faq-section .faq-item {
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}

.faq-section .faq-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-section .faq-item summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.faq-section .faq-item summary:hover {
    color: var(--primary);
}

.faq-section .faq-item summary::-webkit-details-marker,
.faq-section .faq-item summary::marker {
    display: none;
    content: '';
}

.faq-section .faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--primary);
    transition: transform 0.2s;
}

.faq-section .faq-item[open] summary::after {
    content: '−';
}

.faq-section .faq-item[open] summary {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.faq-section .faq-item p {
    padding: 1rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .section-grid {
        grid-template-columns: 1fr;
    }

    .section-aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .ecv-card {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

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

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

@media (max-width: 768px) {
    .community-page .community-hero {
        min-height: 60vh;
        padding: 7rem 0 3rem;
    }

    .community-page .hero-content h1 {
        font-size: 2.5rem;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .feature-cards {
        grid-template-columns: 1fr;
    }

    .section-aside {
        grid-template-columns: 1fr;
    }

    .ecv-card {
        padding: 2rem;
    }

    .ecv-logo img {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .community-page .hero-content h1 {
        font-size: 2rem;
    }

    .community-page .hero-actions {
        flex-direction: column;
    }

    .community-page .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .community-nav .nav-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .community-nav .nav-tabs::-webkit-scrollbar {
        display: none;
    }

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

/* ========================================
   HOMEPAGE - Quick Navigation & ECVesports
   ======================================== */

/* Quick Navigation Section */
.home-quick-nav {
    padding: 4rem 0;
}

.quick-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.quick-nav-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-nav-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.quick-nav-card:hover .arrow {
    transform: translateX(4px);
}

.quick-nav-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Play Hub Card with CS2 Action Background */
.quick-nav-card.play-card {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.3) 100%),
                url('../images/playhub-bg.jpg') center center / cover no-repeat;
    border-color: var(--primary);
    overflow: hidden;
}

.quick-nav-card.play-card .quick-nav-icon {
    background: rgba(61, 189, 170, 0.2);
    color: var(--primary);
    border: 1px solid rgba(61, 189, 170, 0.3);
}

.quick-nav-card.play-card .quick-nav-content h3 {
    color: white;
}

.quick-nav-card.play-card .quick-nav-content p {
    color: rgba(255, 255, 255, 0.8);
}

.quick-nav-card.play-card .arrow {
    color: var(--primary);
}

.quick-nav-card.play-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(61, 189, 170, 0.3);
}

.quick-nav-card.play-card:hover .quick-nav-icon {
    background: var(--primary);
    color: white;
}

/* Community Card with Esports Crowd Background */
.quick-nav-card.community-card {
    position: relative;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.45) 0%, rgba(30, 30, 50, 0.35) 100%),
                url('../images/community-bg.jpg') center center / cover no-repeat;
    border-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.quick-nav-card.community-card .quick-nav-icon {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quick-nav-card.community-card .quick-nav-content h3 {
    color: white;
}

.quick-nav-card.community-card .quick-nav-content p {
    color: rgba(255, 255, 255, 0.8);
}

.quick-nav-card.community-card .arrow {
    color: rgba(255, 255, 255, 0.7);
}

.quick-nav-card.community-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(61, 189, 170, 0.2);
}

.quick-nav-card.community-card:hover .quick-nav-icon {
    background: var(--primary);
    color: white;
}

.quick-nav-card.community-card:hover .arrow {
    color: var(--primary);
}

/* Discord Card with ECVesports Logo Background */
.quick-nav-card.discord-card {
    position: relative;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-color: #5865F2;
    overflow: hidden;
}

.quick-nav-card.discord-card::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 140px;
    height: 140px;
    background: url('../images/ecvlogowit.png') center center / contain no-repeat;
    opacity: 0.15;
    filter: blur(2px);
    pointer-events: none;
}

.quick-nav-card.discord-card .quick-nav-icon {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quick-nav-card.discord-card .quick-nav-content h3 {
    color: white;
}

.quick-nav-card.discord-card .quick-nav-content p {
    color: rgba(255, 255, 255, 0.85);
}

.quick-nav-card.discord-card .arrow {
    color: rgba(255, 255, 255, 0.7);
}

.quick-nav-card.discord-card:hover {
    border-color: #7289DA;
    box-shadow: 0 8px 32px rgba(88, 101, 242, 0.4);
    transform: translateY(-2px);
}

.quick-nav-card.discord-card:hover .quick-nav-icon {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.quick-nav-card.discord-card:hover .arrow {
    color: white;
}

.quick-nav-content {
    flex: 1;
}

.quick-nav-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.quick-nav-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.quick-nav-card .arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.quick-nav-card:hover .arrow {
    color: var(--primary);
}

.quick-nav-card.discord-card:hover .arrow {
    color: #5865F2;
}

/* Social Proof Section */
.home-social-section {
    padding: 4rem 0;
    background: var(--surface);
}

.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.social-proof-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-proof-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-proof-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.social-proof-card:hover::before {
    opacity: 1;
}

.social-proof-card.youtube::before { background: #FF0000; }
.social-proof-card.twitch::before { background: #9146FF; }
.social-proof-card.instagram::before { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-proof-card.tiktok::before { background: #000; }

.social-proof-card.youtube:hover { border-color: rgba(255, 0, 0, 0.3); }
.social-proof-card.twitch:hover { border-color: rgba(145, 70, 255, 0.3); }
.social-proof-card.instagram:hover { border-color: rgba(225, 48, 108, 0.3); }
.social-proof-card.tiktok:hover { border-color: rgba(0, 0, 0, 0.3); }

.social-proof-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.social-proof-card.youtube .social-proof-icon { color: #FF0000; }
.social-proof-card.twitch .social-proof-icon { color: #9146FF; }
.social-proof-card.instagram .social-proof-icon { color: #E1306C; }
.social-proof-card.tiktok .social-proof-icon { color: var(--text-primary); }

.social-proof-card:hover .social-proof-icon {
    transform: scale(1.1);
}

.social-proof-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem;
}

.social-proof-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.social-proof-cta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.social-proof-card:hover .social-proof-cta {
    transform: translateX(4px);
}

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

@media (max-width: 640px) {
    .social-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* ECVesports Homepage Section */
.home-ecv-section {
    padding: 5rem 0;
}

.home-ecv-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: center;
}

.home-ecv-info {
    max-width: 600px;
}

.home-ecv-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.home-ecv-info h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.home-ecv-info h2 span {
    color: var(--primary);
}

.home-ecv-info .lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.home-ecv-info p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.home-ecv-logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.home-ecv-logo {
    width: 120px;
}

.home-ecv-logo img {
    width: 100%;
    height: auto;
    opacity: 0.9;
}

/* ECV-Play logo keeps its colors */
.home-ecv-logo .ecvplay-logo {
    filter: none;
}

/* ECVesports logo follows theme */
.home-ecv-logo .ecvesports-logo {
    filter: brightness(0);
}

[data-theme="dark"] .home-ecv-logo .ecvesports-logo {
    filter: brightness(0) invert(1);
}

.logo-divider {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Video Logo styling */
.home-ecv-video-logo {
    width: 140px;
    height: 140px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(61, 189, 170, 0.25);
    border: 2px solid rgba(61, 189, 170, 0.3);
}

.home-ecv-video-logo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
    .quick-nav-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .home-ecv-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .home-ecv-info {
        max-width: none;
    }

    .home-ecv-logos {
        justify-content: center;
        order: -1;
    }

    .home-ecv-logo {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .home-quick-nav {
        padding: 3rem 0;
    }

    .quick-nav-card {
        padding: 1.25rem;
    }

    .quick-nav-icon {
        width: 48px;
        height: 48px;
    }

    .quick-nav-icon svg {
        width: 24px;
        height: 24px;
    }

    .home-ecv-section {
        padding: 3rem 0;
    }

    .home-ecv-info h2 {
        font-size: 1.75rem;
    }
}

/* ========================================
   HLTV NEWS SECTION - Play Hub
   ======================================== */

/* HLTV Source Link */
.hltv-source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hltv-source-link:hover {
    border-color: #2b6cb0;
    color: #2b6cb0;
}

.hltv-logo {
    height: 16px;
    width: auto;
}

.hltv-title-logo {
    height: 28px;
    width: auto;
}

.hltv-icon {
    height: 28px;
    width: auto;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.hltv-title-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.hltv-title-link:hover {
    color: var(--primary);
}

.hltv-title-link:hover .hltv-icon {
    transform: scale(1.05);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* News Card */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.news-card.featured {
    grid-column: span 2;
}

/* News Image (featured only) */
.news-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

/* News Content */
.news-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.news-time {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.news-time svg {
    opacity: 0.6;
}

.news-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card.featured h3 {
    font-size: 1.125rem;
    -webkit-line-clamp: 3;
}

.news-excerpt {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-source {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 0.5rem;
}

/* News Footer */
.news-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.news-disclaimer {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* News Empty State */
.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--surface-light);
    border-radius: var(--radius-lg);
}

.news-empty p {
    color: var(--text-secondary);
    margin: 0;
}

/* News Responsive */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card.featured {
        grid-column: span 1;
    }

    .news-image {
        height: 160px;
    }
}

@media (max-width: 640px) {
    .hltv-source-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .news-content {
        padding: 1rem;
    }

    .news-card h3 {
        font-size: 0.875rem;
    }
}

/* ========================================
   WORD LID PAGE - Conversion Optimized
   ======================================== */

.word-lid-page {
    background: var(--secondary);
}

/* Hero Section */
.wl-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wl-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.wl-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 50%, rgba(255,107,0,0.15) 100%);
}

.wl-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.wl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 1.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.wl-hero-badge .benelux-flag {
    height: 16px;
    width: auto;
}

.wl-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.wl-hero h1 span {
    color: var(--primary);
}

.wl-hero-sub {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.wl-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.btn-wl-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: #5865F2;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

.btn-wl-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(88, 101, 242, 0.5);
}

.wl-hero-note {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
}

.wl-hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.wl-stat {
    text-align: center;
}

.wl-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
}

.wl-stat-label {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
}

.wl-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
}

/* Sections */
.wl-section {
    padding: 5rem 0;
}

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

.wl-section-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.375rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.wl-section-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.wl-section-header h2 span {
    color: var(--primary);
}

/* Value Props */
.wl-value-props {
    background: var(--surface);
}

.wl-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.wl-value-card {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.wl-value-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.wl-value-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    color: white;
}

.wl-value-icon.discord {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
}

.wl-value-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.wl-value-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Event Teaser */
.wl-event-teaser {
    padding: 3rem 0;
}

.wl-event-card {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(255,107,0,0.05) 100%);
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Decorative background removed - was Benelux flag */

.wl-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.wl-event-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.wl-event-date {
    background: var(--primary);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    min-width: 80px;
}

.wl-event-date .day {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.wl-event-date .month {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
}

.wl-event-info {
    flex: 1;
}

.wl-event-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.wl-event-info p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.wl-event-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.wl-event-miss {
    font-size: 0.8125rem;
    color: var(--primary);
    font-weight: 600;
}

.btn-wl-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-wl-secondary:hover {
    transform: translateX(4px);
}

/* How It Works */
.wl-how-it-works {
    background: var(--surface);
}

.wl-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.wl-step {
    flex: 1;
    max-width: 280px;
    text-align: center;
    padding: 2rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.wl-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--primary);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
}

.wl-step-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.wl-step-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.wl-step-arrow {
    color: var(--primary);
    flex-shrink: 0;
}

/* Testimonial */
.wl-testimonial {
    padding: 4rem 0;
}

.wl-testimonial-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    position: relative;
}

.wl-quote-icon {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.wl-testimonial-card blockquote {
    font-size: 1.25rem;
    color: var(--text-primary);
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 2rem;
}

.wl-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.wl-author-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light);
    border-radius: 50%;
    color: var(--text-secondary);
    overflow: hidden;
}

.wl-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-author-info {
    text-align: left;
}

.wl-author-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.wl-author-since {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Brand Section */
.wl-brand {
    background: var(--surface);
}

.wl-brand-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.wl-brand-logo {
    flex-shrink: 0;
}

.wl-brand-logo img {
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

[data-theme="light"] .wl-brand-logo img {
    filter: brightness(0);
    opacity: 0.85;
}

.wl-brand-info {
    flex: 1;
}

.wl-brand-badge {
    display: inline-block;
    background: rgba(255,107,0,0.1);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wl-brand-info h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.wl-brand-lead {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.wl-brand-info p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.wl-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.wl-brand-link:hover {
    gap: 0.75rem;
}

/* Final CTA */
.wl-final-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    text-align: center;
}

.wl-final-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 1rem;
}

.wl-final-content > p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    margin: 0 0 2rem;
}

.btn-wl-final {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    background: white;
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.btn-wl-final:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.wl-final-trust {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.wl-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
}

/* Word Lid Responsive */
@media (max-width: 1024px) {
    .wl-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wl-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .wl-step {
        max-width: 100%;
    }

    .wl-step-arrow {
        transform: rotate(90deg);
    }

    .wl-brand-content {
        flex-direction: column;
        text-align: center;
    }

    .wl-brand-logo {
        order: -1;
    }
}

@media (max-width: 768px) {
    .wl-hero h1 {
        font-size: 2rem;
    }

    .wl-hero-sub {
        font-size: 1rem;
    }

    .wl-hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .wl-stat-divider {
        width: 60px;
        height: 1px;
    }

    .wl-value-grid {
        grid-template-columns: 1fr;
    }

    .wl-event-content {
        flex-direction: column;
        text-align: center;
    }

    .wl-event-cta {
        align-items: center;
    }

    .wl-section-header h2 {
        font-size: 1.75rem;
    }

    .wl-testimonial-card {
        padding: 2rem;
    }

    .wl-testimonial-card blockquote {
        font-size: 1rem;
    }

    .wl-final-content h2 {
        font-size: 1.75rem;
    }

    .wl-final-content > p {
        font-size: 1rem;
    }

    .btn-wl-final {
        font-size: 1rem;
        padding: 1rem 2rem;
    }

    .wl-final-trust {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .wl-hero h1 {
        font-size: 1.75rem;
    }

    .btn-wl-primary {
        width: 100%;
        justify-content: center;
    }

    .wl-value-card {
        padding: 1.5rem;
    }
}

/* ========================================
   Player & Team Profile Pages
   ======================================== */

/* Profile Hero */
.profile-hero {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--surface) 100%);
    padding: 8rem 0 3rem;
    position: relative;
}

.profile-hero-bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.profile-hero-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(200, 109, 31, 0.3);
}

.profile-avatar .avatar-initials {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    font-family: 'Rajdhani', sans-serif;
}

.profile-avatar .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.team-avatar {
    border-radius: var(--radius-md);
}

.profile-info h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-name-row .team-tag {
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 600;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.profile-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-meta .meta-item svg {
    opacity: 0.7;
}

.profile-meta .meta-item.discord svg {
    color: #5865F2;
    opacity: 1;
}

.profile-meta .meta-item.steam {
    color: var(--text-secondary);
    text-decoration: none;
}

.profile-meta .meta-item.steam:hover {
    color: var(--primary);
}

/* Profile Main Layout */
.profile-main {
    padding: 3rem 0;
    background: var(--background);
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

/* Profile Sections */
.profile-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.profile-section h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
}

.profile-section h2 svg {
    color: var(--primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card {
    background: var(--background);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
}

.stat-card.highlight {
    background: linear-gradient(135deg, rgba(200, 109, 31, 0.1) 0%, rgba(200, 109, 31, 0.05) 100%);
    border: 1px solid rgba(200, 109, 31, 0.2);
}

.stat-card .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
}

.stat-card.highlight .stat-value {
    color: var(--primary);
}

.stat-card .stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Game Tabs for Per-Game Stats */
.profile-game-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.game-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
}

.game-tab::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background 0.2s ease;
}

.game-tab:hover {
    color: var(--text-primary);
    background: var(--surface-light);
}

.game-tab.active {
    color: var(--game-color, var(--primary));
}

.game-tab.active::after {
    background: var(--game-color, var(--primary));
}

.game-tab-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--game-color, var(--primary));
}

.game-tab-icon svg,
.game-tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.game-tab-name {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Game Stats Panels */
.game-stats-panel {
    display: none;
}

.game-stats-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Dynamic highlight color based on game */
.stat-card.highlight[style*="--highlight-color"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--highlight-color) 15%, transparent) 0%, color-mix(in srgb, var(--highlight-color) 5%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--highlight-color) 30%, transparent);
}

.stat-card.highlight[style*="--highlight-color"] .stat-value {
    color: var(--highlight-color);
}

@media (max-width: 640px) {
    .profile-game-tabs {
        gap: 0.375rem;
    }

    .game-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .game-tab-icon {
        width: 18px;
        height: 18px;
    }
}

/* Roster List */
.roster-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.roster-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition);
}

.roster-player:hover {
    background: var(--secondary);
    transform: translateX(4px);
}

.roster-player .player-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.roster-player .player-avatar span {
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.roster-player .player-info {
    flex: 1;
}

.roster-player .player-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.roster-player .player-discord {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.role-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.role-badge.captain {
    background: rgba(200, 109, 31, 0.15);
    color: var(--primary);
}

/* Teams List (on player profile) */
.teams-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.team-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition);
}

.team-card:hover {
    background: var(--secondary);
    transform: translateX(4px);
}

.team-card .team-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-card .team-avatar span {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.team-card .team-info {
    flex: 1;
}

.team-card .team-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-card .team-name {
    font-weight: 600;
    color: var(--text-primary);
}

.team-card .team-tag {
    font-size: 0.85rem;
    color: var(--primary);
}

.team-card .team-tournaments {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Match History */
.matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.match-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--background);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
}

.match-row.win {
    border-left-color: #22c55e;
}

.match-row.loss {
    border-left-color: #ef4444;
}

.match-result-badge {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.match-result-badge.win {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.match-result-badge.loss {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.match-teams .team-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 120px;
}

.match-teams .team-name.is-team {
    font-weight: 600;
    color: var(--primary);
}

.match-teams .match-score {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.match-meta {
    text-align: right;
}

.match-meta .tournament-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Profile Sidebar */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-sidebar .sidebar-widget {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.profile-sidebar .sidebar-widget h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.profile-sidebar .sidebar-widget h3 svg {
    color: var(--primary);
}

/* Quick Stats Widget */
.quick-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--background);
    border-radius: var(--radius-sm);
}

.quick-stat .label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.quick-stat .value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Tournament List Widget */
.tournament-list-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tournament-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--background);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
}

.tournament-item:hover {
    background: var(--secondary);
}

.tournament-item .tournament-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tournament-item .tournament-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.tournament-item .tournament-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.tournament-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.tournament-status.status-completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.tournament-status.status-active {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tournament-status.status-registration,
.tournament-status.status-seeding {
    background: rgba(200, 109, 31, 0.15);
    color: var(--primary);
}

/* Discord CTA Widget */
.discord-cta {
    background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%) !important;
    color: white;
}

.discord-cta .discord-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.discord-cta .discord-header svg {
    color: white;
}

.discord-cta .discord-header h3 {
    color: white;
    margin: 0;
}

.discord-cta p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.discord-cta .discord-btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: white;
    color: #5865F2;
    text-align: center;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition);
}

.discord-cta .discord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Back Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.back-link:hover {
    color: var(--primary);
    background: var(--secondary);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state.small {
    padding: 1rem;
}

.empty-state p {
    margin: 0;
}

/* Responsive Profile Pages */
@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-hero {
        padding: 6rem 0 2rem;
    }

    .profile-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .profile-info h1 {
        font-size: 1.75rem;
    }

    .profile-name-row {
        justify-content: center;
    }

    .profile-meta {
        justify-content: center;
    }

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

    .profile-sidebar {
        grid-template-columns: 1fr;
    }

    .match-row {
        grid-template-columns: 32px 1fr;
    }

    .match-meta {
        grid-column: 2;
        text-align: left;
        margin-top: 0.5rem;
    }

    .match-teams {
        flex-wrap: wrap;
    }

    .match-teams .team-name {
        min-width: auto;
    }
}

/* ========================================
   Leaderboard Team Links
   ======================================== */

.leaderboard-table .team-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: var(--transition);
}

.leaderboard-table .team-link:hover {
    transform: translateX(4px);
}

.leaderboard-table .team-link:hover .team-name {
    color: var(--primary);
}

.leaderboard-table .team-link .team-name {
    transition: color 0.2s ease;
}

/* ========================================
   Loading States & Skeleton Loaders
   ======================================== */

/* Skeleton Base */
.skeleton {
    position: relative;
    background: var(--surface);
    overflow: hidden;
    border-radius: var(--radius-md);
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--surface-light) 50%,
        transparent 100%
    );
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Skeleton Variations */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.small {
    height: 0.75rem;
    width: 60%;
}

.skeleton-title {
    height: 1.5rem;
    width: 70%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 1.5rem;
    min-height: 200px;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
}

/* Card Loading State */
.card-loading {
    pointer-events: none;
    opacity: 0.7;
}

.card-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: skeletonShimmer 1.5s infinite;
}

/* Button Loading State */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Enhanced Focus States (Accessibility)
   ======================================== */

/* Consistent Focus Ring */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Button Focus */
.btn:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-glow);
}

/* Link Focus */
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Card Focus */
.news-card:focus-visible,
.agenda-event-card:focus-visible,
.quick-nav-card:focus-visible,
.hero-event-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-glow);
}

/* Input Focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Skip to Content Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 1rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   Enhanced Micro-Interactions
   ======================================== */

/* Card Hover Lift Effect */
.card-hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Icon Hover Rotation */
.icon-hover-rotate:hover svg,
.icon-hover-rotate:hover .icon {
    animation: iconRotate 0.4s ease;
}

@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

/* Button Arrow Hover */
.btn-arrow-hover svg,
.btn-arrow-hover .arrow {
    transition: transform 0.2s ease;
}

.btn-arrow-hover:hover svg,
.btn-arrow-hover:hover .arrow {
    transform: translateX(4px);
}

/* Link Underline Animation */
.link-underline {
    position: relative;
    text-decoration: none;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.link-underline:hover::after {
    width: 100%;
}

/* Badge Pulse on Hover */
.badge-pulse:hover {
    animation: badgePop 0.3s ease;
}

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

/* ========================================
   Improved Light Mode Specific Styles
   ======================================== */

/* Better Card Shadows in Light Mode */
:root .news-card,
:root .quick-nav-card,
:root .agenda-event-card,
:root .hero-event-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.08);
}

:root .news-card:hover,
:root .quick-nav-card:hover,
:root .agenda-event-card:hover,
:root .hero-event-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Subtle Border Enhancement in Light Mode */
:root .hero-stats-card,
:root .hero-video-card,
:root .section {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Better Text Contrast for Labels */
:root .stat-label,
:root .event-label,
:root .section-subtitle {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========================================
   Smooth Page Transitions
   ======================================== */

/* Content Fade In */
.fade-in {
    animation: contentFadeIn 0.4s ease-out;
}

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

/* Staggered Fade In for Lists */
.stagger-fade-in > * {
    opacity: 0;
    animation: contentFadeIn 0.4s ease-out forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.3s; }

/* ========================================
   Toast / Notification Styles
   ======================================== */

.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toastSlideIn 0.3s ease;
}

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

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-error {
    border-left: 4px solid var(--error);
}

.toast-info {
    border-left: 4px solid var(--info);
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--text-primary);
}

/* ========================================
   Responsive Improvements
   ======================================== */

/* Better Touch Targets on Mobile */
@media (max-width: 768px) {
    .btn,
    button,
    .nav-link,
    .quick-nav-card,
    .agenda-event-card {
        min-height: 44px;
    }

    /* Larger Click Areas */
    .news-card,
    .quick-nav-card {
        padding: 1rem;
    }

    /* Better Spacing */
    .section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 1.5rem;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton::after {
        animation: none;
    }
}

/* ========================================
   Getting Started Section - Play Hub
   ======================================== */
.getting-started-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.getting-started-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.getting-started-card {
    width: 100%;
}

.getting-started-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.getting-started-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    transition: transform 0.3s ease;
}

.getting-started-card:hover .card-icon {
    transform: scale(1.05);
}

.getting-started-card .card-content h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.375rem 0;
}

.getting-started-card .card-content p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.getting-started-card .card-action {
    margin-top: 0.875rem;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Discord Card */
.getting-started-card.discord-card {
    border-color: rgba(88, 101, 242, 0.3);
}

.getting-started-card.discord-card:hover {
    border-color: #5865f2;
    background: linear-gradient(180deg, rgba(88, 101, 242, 0.1) 0%, var(--surface) 100%);
}

.getting-started-card.discord-card .card-icon {
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: #fff;
}

.getting-started-card.discord-card .card-action {
    background: rgba(88, 101, 242, 0.15);
    color: #7289da;
}

.getting-started-card.discord-card:hover .card-action {
    background: #5865f2;
    color: #fff;
}

/* Agenda Card */
.getting-started-card.agenda-card {
    border-color: rgba(34, 197, 94, 0.3);
}

.getting-started-card.agenda-card:hover {
    border-color: #22c55e;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, var(--surface) 100%);
}

.getting-started-card.agenda-card .card-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.getting-started-card.agenda-card .card-action {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.getting-started-card.agenda-card:hover .card-action {
    background: #22c55e;
    color: #fff;
}

/* Tournament Card */
.getting-started-card.tournament-card {
    border-color: rgba(61, 189, 170, 0.3);
}

.getting-started-card.tournament-card:hover {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(61, 189, 170, 0.1) 0%, var(--surface) 100%);
}

.getting-started-card.tournament-card .card-icon {
    background: linear-gradient(135deg, var(--primary), #ff8533);
    color: #fff;
}

.getting-started-card.tournament-card .card-action {
    background: rgba(61, 189, 170, 0.15);
    color: var(--primary);
}

.getting-started-card.tournament-card:hover .card-action {
    background: var(--primary);
    color: var(--bg);
}

@media (max-width: 768px) {
    .getting-started-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CS2 Content Section - Play Hub
   ======================================== */
.cs2-content-section {
    margin-top: 2rem;
}

.cs2-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cs2-content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.cs2-content-card:hover {
    border-color: rgba(61, 189, 170, 0.3);
}

.cs2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.cs2-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cs2-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    background: rgba(61, 189, 170, 0.15);
    color: var(--primary);
    border-radius: 4px;
}

/* Map Pool Card */
.map-pool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.map-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface-light);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.map-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.map-icon.dust2 { background: linear-gradient(135deg, #c9a85d, #8b7355); }
.map-icon.mirage { background: linear-gradient(135deg, #d4a574, #8b6f4e); }
.map-icon.inferno { background: linear-gradient(135deg, #c47f3b, #7a4f24); }
.map-icon.nuke { background: linear-gradient(135deg, #5a7a8a, #3d5a6a); }
.map-icon.ancient { background: linear-gradient(135deg, #4a7a5a, #2d5a3d); }
.map-icon.anubis { background: linear-gradient(135deg, #8a6a4a, #5a4a3a); }
.map-icon.vertigo { background: linear-gradient(135deg, #6a8a9a, #4a6a7a); }

/* Practice Card */
.practice-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.practice-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--surface-light);
    border-radius: 8px;
}

.practice-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.practice-icon.aim {
    background: linear-gradient(135deg, #3dbdaa, #18534c);
}

.practice-icon.aim::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='22' y2='12'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.practice-icon.utility {
    background: linear-gradient(135deg, #5865f2, #7289da);
}

.practice-icon.utility::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.practice-icon.prefire {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.practice-icon.prefire::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.practice-info h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
}

.practice-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.practice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.practice-link:hover {
    color: var(--primary-hover);
    gap: 0.75rem;
}

/* Modes Card */
.modes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mode-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--surface-light);
    border-radius: 6px;
}

.mode-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mode-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .cs2-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs2-content-card.modes-card {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .cs2-content-grid {
        grid-template-columns: 1fr;
    }

    .cs2-content-card.modes-card {
        grid-column: span 1;
    }
}

/* ========================================
   Home - Testimonial Section
   ======================================== */
.home-testimonial-section {
    background: var(--surface);
    padding: 3rem 0;
}

.home-testimonial-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.testimonial-quote-icon {
    margin-bottom: 1rem;
    color: var(--primary);
}

.home-testimonial-card blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-info {
    text-align: left;
}

.testimonial-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.testimonial-since {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ========================================
   Home - Rules Section (Compact)
   ======================================== */
.home-rules-section {
    padding: 3rem 0;
}

.rules-header {
    text-align: center;
    margin-bottom: 2rem;
}

.rules-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.rules-header h2 span {
    color: var(--primary);
}

.rules-header p {
    color: var(--text-secondary);
}

.rules-compact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.rule-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rule-compact .rule-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rule-compact strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.rule-compact span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Play Hub Full Width Card */
.nav-card-secondary.play-full-width {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .rules-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .home-testimonial-card blockquote {
        font-size: 1rem;
    }
    
    .nav-card-secondary.play-full-width {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .rules-compact-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Home Actions Grid
   ======================================== */
.home-actions-section {
    padding: 3rem 0;
}

.home-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.home-action-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.home-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-action-card:hover::before {
    opacity: 1;
}

.home-action-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(61, 189, 170, 0.15);
}

.home-action-card .action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--surface-light);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.home-action-card.discord .action-icon {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

/* Play Hub Card with Multi-Game Chevron Background */
.home-action-card.play {
    position: relative;
    overflow: hidden;
    border-color: rgba(61, 189, 170, 0.3);
    background: #001522;
}

/* Smash Bros Panel (left) */
.home-action-card.play .game-panel.smash {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    background: url('../images/smashbros.jpg') center center / cover no-repeat;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
    z-index: 1;
}

/* CS2 Panel (middle) - wider */
.home-action-card.play .game-panel.cs2 {
    position: absolute;
    top: 0;
    left: 20%;
    width: 55%;
    height: 100%;
    background: url('../images/cs2-hero.jpg') 100% center / cover no-repeat;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
    z-index: 2;
}

/* Valorant Panel (right) */
.home-action-card.play .game-panel.valorant {
    position: absolute;
    top: 0;
    left: 55%;
    width: 50%;
    height: 100%;
    background: url('../images/valorant.jpg') center center / cover no-repeat;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 3;
}

.home-action-card.play .action-icon,
.home-action-card.play .action-content,
.home-action-card.play .action-arrow {
    position: relative;
    z-index: 5;
}

/* Dark overlay for readability */
.home-action-card.play .action-content::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -200px;
    right: -100px;
    bottom: -100px;
    background: linear-gradient(135deg, rgba(0, 21, 34, 0.75) 0%, rgba(0, 21, 34, 0.6) 100%);
    z-index: -1;
    pointer-events: none;
}

.home-action-card.play .action-icon {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    box-shadow: 0 4px 15px rgba(61, 189, 170, 0.4);
}

.home-action-card.play .action-content h3 {
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-action-card.play .action-content h3 .events-badge {
    background: var(--primary);
    color: var(--secondary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
}

.home-action-card.play .action-content p {
    color: rgba(255, 255, 255, 0.8);
}

.home-action-card.play .action-arrow {
    color: var(--primary);
}

.home-action-card.play:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(61, 189, 170, 0.3);
}

.home-action-card.play:hover .action-icon {
    background: var(--primary);
    color: white;
}

.home-action-card:hover .action-icon {
    transform: scale(1.1);
}

.home-action-card .action-content {
    flex: 1;
    min-width: 0;
}

.home-action-card .action-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
}

.home-action-card .action-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.home-action-card .action-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.home-action-card:hover .action-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .home-actions-grid {
        grid-template-columns: 1fr;
    }

    .home-action-card {
        padding: 1.25rem;
    }

    .home-action-card .action-icon {
        width: 48px;
        height: 48px;
    }

    .home-action-card .action-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* ========================================
   CS2 Chicken Easter Egg
   ======================================== */
.footer-chicken {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: chicken-idle 2s ease-in-out infinite;
}

.footer-chicken:hover {
    transform: scale(1.2) rotate(-5deg);
    animation: chicken-excited 0.3s ease-in-out infinite;
}

.footer-chicken img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes chicken-idle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes chicken-excited {
    0%, 100% {
        transform: scale(1.2) rotate(-5deg);
    }
    50% {
        transform: scale(1.25) rotate(5deg);
    }
}

@media (max-width: 768px) {
    .footer-chicken {
        width: 32px;
        height: 32px;
    }
}

/* ========================================
   GAME SELECTOR
   ======================================== */

.game-selector-section {
    padding: 2rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.game-selector-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-align: center;
}

.game-cards {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.game-card {
    position: relative;
    width: 220px;
    height: 120px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    padding: 0;
}

.game-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    transition: all 0.3s ease;
}

.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.game-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
}

.game-card .game-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.game-card .game-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.game-card .game-stats {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

.game-card .game-stats.coming-soon {
    color: var(--primary);
    font-weight: 600;
}

.play-hub .game-card:hover {
    border-color: var(--game-accent, var(--primary));
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--game-accent-glow, rgba(61, 189, 170, 0.3));
}

.game-card:hover .game-card-bg {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.play-hub .game-card.active {
    border-color: var(--game-accent, var(--primary));
    box-shadow: 0 0 0 3px var(--game-accent-glow, rgba(61, 189, 170, 0.3));
}

.play-hub .game-card.active::before {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    background: var(--game-accent, var(--primary));
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

/* Game-specific content visibility */
.game-content {
    display: none;
}

.game-content.active {
    display: block;
}

/* Game-specific theme colors - tabs use var(--game-accent) from parent */

@media (max-width: 768px) {
    .game-cards {
        flex-direction: column;
        align-items: center;
    }

    .game-card {
        width: 100%;
        max-width: 300px;
        height: 100px;
    }
}

/* Coming Soon Content */
.coming-soon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 4rem 2rem;
    text-align: center;
}

.coming-soon-icon {
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: 2rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.coming-soon-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.coming-soon-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 0 2rem;
    line-height: 1.6;
}

.coming-soon-content .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   Tournament Bracket Page
   ======================================== */

/* Game-specific accent colors for bracket page */
.bracket-page[data-game="cs2"] {
    --game-accent: #FFD700;
    --game-accent-glow: rgba(255, 215, 0, 0.2);
}

.bracket-page[data-game="smash"] {
    --game-accent: #3dbdaa;
    --game-accent-glow: rgba(61, 189, 170, 0.2);
}

.bracket-page[data-game="valorant"] {
    --game-accent: #ff4655;
    --game-accent-glow: rgba(255, 70, 85, 0.2);
}

.bracket-page {
    padding: 2rem 0 4rem;
    min-height: 80vh;
}

.bracket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.bracket-header .back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.bracket-header .back-link:hover {
    color: var(--game-accent, var(--primary));
}

.bracket-header .tournament-title h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.bracket-header .tournament-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tournament-winner-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--game-accent-glow, rgba(61, 189, 170, 0.1));
    border: 1px solid var(--game-accent, var(--primary));
    border-radius: 12px;
}

.tournament-winner-badge .winner-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.tournament-winner-badge .winner-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--game-accent, var(--primary));
}

/* Bracket Container */
.bracket-container {
    overflow-x: auto;
    padding: 1rem 0;
}

.bracket {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: max-content;
    padding: 2rem;
}

/* Bracket Rounds */
.bracket-round {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bracket-round .round-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1rem;
}

.bracket-matches {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Quarter finals spacing */
.round-quarters .bracket-matches {
    gap: 1rem;
}

/* Semi finals spacing */
.round-semis .bracket-matches {
    gap: 5rem;
}

/* Bracket Match */
.bracket-match {
    display: flex;
    flex-direction: column;
    width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.bracket-match .match-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
}

.bracket-match .match-team:last-child {
    border-bottom: none;
}

.bracket-match .match-team.winner {
    background: var(--game-accent-glow, rgba(61, 189, 170, 0.1));
}

.bracket-match .match-team.winner .team-name {
    color: var(--game-accent, var(--primary));
    font-weight: 600;
}

.bracket-match .match-team.loser {
    opacity: 0.6;
}

.bracket-match .match-team .team-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.bracket-match .match-team .team-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
}

.bracket-match .match-team.winner .team-score {
    color: var(--game-accent, var(--primary));
}

/* Finals Match */
.bracket-match.finals-match {
    width: 220px;
    border-color: var(--game-accent, var(--primary));
    box-shadow: 0 0 20px var(--game-accent-glow, rgba(61, 189, 170, 0.2));
}

.bracket-match.finals-match .match-team {
    padding: 1rem 1.25rem;
}

/* Bracket Connectors */
.bracket-connectors {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    align-self: stretch;
}

.bracket-connectors .connector {
    flex: 1;
    border: 2px solid var(--border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

.quarters-to-semis {
    height: 280px;
}

.quarters-to-semis .connector {
    margin: 2rem 0;
}

.semis-to-finals {
    height: 180px;
}

/* Champion Display */
.bracket-champion {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem;
    margin-left: 2rem;
    background: linear-gradient(135deg, var(--game-accent-glow, rgba(61, 189, 170, 0.1)) 0%, transparent 100%);
    border: 2px solid var(--game-accent, var(--primary));
    border-radius: 16px;
    text-align: center;
}

.bracket-champion .champion-trophy {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    animation: trophy-glow 2s ease-in-out infinite;
}

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

.bracket-champion .champion-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--game-accent, var(--primary));
    margin-bottom: 0.25rem;
}

.bracket-champion .champion-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

/* Bracket Not Found */
.bracket-not-found {
    text-align: center;
    padding: 4rem 2rem;
}

.bracket-not-found h1 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.bracket-not-found p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bracket-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tournament-winner-badge {
        width: 100%;
    }

    .bracket {
        padding: 1rem;
    }

    .bracket-match {
        width: 160px;
    }

    .bracket-match .match-team .team-name {
        max-width: 100px;
        font-size: 0.8rem;
    }

    .bracket-champion {
        margin-left: 1rem;
        padding: 1rem 1.5rem;
    }

    .bracket-champion .champion-trophy {
        font-size: 2rem;
    }

    .bracket-champion .champion-name {
        font-size: 1rem;
    }
}