/* ============================================
   LEGENDS iL - Premium Gaming Platform
   Neon Cyberpunk Luxury Design System
   ============================================ */

:root {
    /* Tri-color core: orange + blue + purple (neon luxury) */
    --orange: #ff7a18;
    --orange-light: #ffa542;
    --orange-hot: #ff4d00;
    --orange-deep: #d94500;
    --orange-glow: rgba(255, 122, 24, 0.65);

    --blue: #2e7dff;
    --blue-light: #5aa0ff;
    --blue-deep: #0040cc;
    --blue-glow: rgba(46, 125, 255, 0.65);

    --purple: #9333ff;
    --purple-light: #b366ff;
    --purple-deep: #6b1fdb;
    --purple-glow: rgba(147, 51, 255, 0.65);

    /* Neon accents */
    --cyan: #00e5ff;
    --cyan-glow: rgba(0, 229, 255, 0.6);
    --neon: #00ff9d;
    --neon-glow: rgba(0, 255, 157, 0.55);

    /* Luxury gold */
    --gold: #ffd700;
    --gold-glow: rgba(255, 215, 0, 0.5);

    /* Primary — purple (main luxury accent) */
    --primary: #9333ff;

    /* Deep midnight-purple backgrounds */
    --bg-dark: #060514;
    --bg-darker: #03020a;
    --bg-card: #0d0b1f;
    --bg-light: #17142e;

    --border: rgba(147, 51, 255, 0.2);
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-orange: rgba(255, 122, 24, 0.3);
    --border-blue: rgba(46, 125, 255, 0.3);
    --border-purple: rgba(147, 51, 255, 0.35);

    --text: #ffffff;
    --text-muted: #a0a5c0;
    --text-dim: #606080;

    --shadow-neon: 0 0 40px var(--purple-glow);
    --shadow-orange: 0 0 40px var(--orange-glow);
    --shadow-blue: 0 0 40px var(--blue-glow);
    --shadow-purple: 0 0 40px var(--purple-glow);
    --shadow-tri: 0 20px 60px rgba(147, 51, 255, 0.25), 0 0 40px rgba(46, 125, 255, 0.2), 0 0 60px rgba(255, 122, 24, 0.2);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.85);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tri-color gradients */
    --gradient-main: linear-gradient(135deg, #ff7a18 0%, #9333ff 50%, #2e7dff 100%);
    --gradient-reverse: linear-gradient(135deg, #2e7dff 0%, #9333ff 50%, #ff7a18 100%);
    --gradient-luxe: linear-gradient(135deg, #ff7a18 0%, #ff4d00 25%, #9333ff 55%, #2e7dff 100%);
    --gradient-fire: linear-gradient(135deg, #ff7a18 0%, #ff4d00 50%, #9333ff 100%);
    --gradient-neon: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--orange) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, #ff9500 100%);
    --gradient-luxe-dark: linear-gradient(135deg, #060514 0%, #17142e 50%, #060514 100%);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Heebo', 'Rubik', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Global living background — tri-color floating blobs */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 122, 24, 0.25) 0%, transparent 35%),
        radial-gradient(circle at 80% 25%, rgba(147, 51, 255, 0.28) 0%, transparent 38%),
        radial-gradient(circle at 50% 80%, rgba(46, 125, 255, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(255, 77, 0, 0.2) 0%, transparent 35%),
        radial-gradient(circle at 10% 70%, rgba(179, 102, 255, 0.2) 0%, transparent 40%);
    z-index: -2;
    animation: blobDrift 30s ease-in-out infinite alternate;
    pointer-events: none;
    filter: blur(25px);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(147, 51, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 125, 255, 0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    z-index: -1;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    animation: gridFloat 40s linear infinite;
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1); }
    20%  { transform: translate(-50px, -30px) scale(1.05); }
    40%  { transform: translate(40px, -25px) scale(0.95); }
    60%  { transform: translate(30px, 50px) scale(1.03); }
    80%  { transform: translate(-40px, 35px) scale(1.02); }
    100% { transform: translate(20px, -15px) scale(0.98); }
}

@keyframes gridFloat {
    from { background-position: 0 0; }
    to { background-position: 80px 80px; }
}

@keyframes bgDrift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-30px, -20px); }
    100% { transform: translate(30px, 20px); }
}

/* Particle canvas */
#particleCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.accent {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

/* ============================================
   Container
   ============================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}

/* ============================================
   Premium Logo Component
   ============================================ */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    text-decoration: none;
    position: relative;
    padding: 0.25rem 0;
}

.logo-icon {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff7a18, #9333ff, #2e7dff, #ff7a18);
    opacity: 0.5;
    filter: blur(10px);
    animation: logoHalo 6s linear infinite;
    z-index: -1;
    transition: opacity 0.4s;
}

.logo-icon:hover::before {
    opacity: 1;
    filter: blur(15px);
}

/* Glass shatter shards — DRAMATIC explosion */
.logo-shard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    pointer-events: none;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1.3, 0.36, 1),
        opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(179, 102, 255, 0.85) 35%, rgba(147, 51, 255, 0.8) 55%, rgba(255, 122, 24, 0.75) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 0 20px rgba(147, 51, 255, 0.85),
        0 0 12px rgba(255, 122, 24, 0.6),
        0 0 8px rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 5;
}

/* 18 sharp triangular shard shapes */
.logo-shard.s1  { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.logo-shard.s2  { clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
.logo-shard.s3  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.logo-shard.s4  { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
.logo-shard.s5  { clip-path: polygon(100% 0%, 100% 100%, 0% 50%); }
.logo-shard.s6  { clip-path: polygon(20% 0%, 100% 100%, 0% 100%); }
.logo-shard.s7  { clip-path: polygon(0% 0%, 100% 50%, 50% 100%); }
.logo-shard.s8  { clip-path: polygon(50% 0%, 100% 50%, 0% 100%); }
.logo-shard.s9  { clip-path: polygon(0% 0%, 100% 80%, 0% 100%); }
.logo-shard.s10 { clip-path: polygon(100% 0%, 100% 100%, 50% 50%); }
.logo-shard.s11 { clip-path: polygon(0% 50%, 100% 0%, 50% 100%); }
.logo-shard.s12 { clip-path: polygon(50% 0%, 100% 70%, 0% 70%); }
.logo-shard.s13 { clip-path: polygon(0% 0%, 80% 50%, 0% 100%); }
.logo-shard.s14 { clip-path: polygon(100% 20%, 100% 80%, 0% 50%); }
.logo-shard.s15 { clip-path: polygon(30% 0%, 100% 30%, 70% 100%, 0% 70%); }
.logo-shard.s16 { clip-path: polygon(50% 10%, 90% 90%, 10% 90%); }
.logo-shard.s17 { clip-path: polygon(0% 20%, 100% 0%, 80% 100%); }
.logo-shard.s18 { clip-path: polygon(20% 0%, 100% 40%, 80% 100%, 0% 60%); }

/* HOVER - logo truly shatters: shards fly far, SVG blurs & fades */
.logo-icon:hover .logo-shard { opacity: 1; }

.logo-icon:hover .logo-shard.s1  { transform: translate(-50%, -50%) translate(0, -75px) rotate(180deg) scale(1.3); }
.logo-icon:hover .logo-shard.s2  { transform: translate(-50%, -50%) translate(55px, -55px) rotate(140deg) scale(1.2); }
.logo-icon:hover .logo-shard.s3  { transform: translate(-50%, -50%) translate(80px, -10px) rotate(220deg) scale(1.4); }
.logo-icon:hover .logo-shard.s4  { transform: translate(-50%, -50%) translate(60px, 55px) rotate(310deg) scale(1.2); }
.logo-icon:hover .logo-shard.s5  { transform: translate(-50%, -50%) translate(10px, 75px) rotate(-160deg) scale(1.35); }
.logo-icon:hover .logo-shard.s6  { transform: translate(-50%, -50%) translate(-55px, 60px) rotate(-260deg) scale(1.15); }
.logo-icon:hover .logo-shard.s7  { transform: translate(-50%, -50%) translate(-80px, 10px) rotate(-200deg) scale(1.35); }
.logo-icon:hover .logo-shard.s8  { transform: translate(-50%, -50%) translate(-60px, -50px) rotate(-110deg) scale(1.2); }
.logo-icon:hover .logo-shard.s9  { transform: translate(-50%, -50%) translate(35px, -68px) rotate(95deg) scale(1.1); }
.logo-icon:hover .logo-shard.s10 { transform: translate(-50%, -50%) translate(-35px, -68px) rotate(-95deg) scale(1.1); }
.logo-icon:hover .logo-shard.s11 { transform: translate(-50%, -50%) translate(70px, 35px) rotate(240deg) scale(1.25); }
.logo-icon:hover .logo-shard.s12 { transform: translate(-50%, -50%) translate(-70px, 35px) rotate(-240deg) scale(1.25); }
.logo-icon:hover .logo-shard.s13 { transform: translate(-50%, -50%) translate(45px, 40px) rotate(60deg) scale(1.05); }
.logo-icon:hover .logo-shard.s14 { transform: translate(-50%, -50%) translate(-45px, 40px) rotate(-60deg) scale(1.05); }
.logo-icon:hover .logo-shard.s15 { transform: translate(-50%, -50%) translate(20px, -40px) rotate(30deg) scale(0.9); }
.logo-icon:hover .logo-shard.s16 { transform: translate(-50%, -50%) translate(-20px, -40px) rotate(-30deg) scale(0.9); }
.logo-icon:hover .logo-shard.s17 { transform: translate(-50%, -50%) translate(20px, 40px) rotate(160deg) scale(0.9); }
.logo-icon:hover .logo-shard.s18 { transform: translate(-50%, -50%) translate(-20px, 40px) rotate(-160deg) scale(0.9); }

/* SVG logo itself shatters — fades out with blur, scale down, rotate */
.logo-icon svg {
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-icon:hover svg {
    transform: scale(0.55) rotate(8deg);
    filter: drop-shadow(0 0 40px var(--purple-glow)) drop-shadow(0 0 25px var(--orange-glow)) blur(2px) brightness(1.5);
    opacity: 0.25;
}

/* Flash of white light during shatter */
.logo-icon:hover::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(147, 51, 255, 0.3) 30%, transparent 60%);
    pointer-events: none;
    animation: logoFlash 0.6s ease-out forwards;
    z-index: 4;
}

@keyframes logoFlash {
    0% { opacity: 0; transform: scale(0.2); }
    30% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.8); }
}

@keyframes logoHalo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.logo-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 14px var(--orange-glow));
    animation: logoPulse 4s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 14px var(--orange-glow)); }
    33% { filter: drop-shadow(0 0 22px var(--purple-glow)); }
    66% { filter: drop-shadow(0 0 20px var(--blue-glow)); }
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    position: relative;
}

.logo-text-wrap::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--purple) 50%, transparent 100%);
    opacity: 0.6;
}

.logo-text {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #ff7a18 0%, #ffa542 20%, #b366ff 45%, #9333ff 65%, #2e7dff 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    animation: logoShimmer 4s ease infinite;
    filter: drop-shadow(0 0 20px rgba(147, 51, 255, 0.4)) drop-shadow(0 0 10px rgba(255, 122, 24, 0.3));
}

@keyframes logoShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.logo-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 8px;
    color: var(--gold);
    margin-top: 5px;
    text-shadow: 0 0 14px var(--gold-glow), 0 0 6px var(--gold);
    font-weight: 700;
}

/* ============================================
   Ultra Premium Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    background: linear-gradient(180deg, rgba(6, 5, 20, 0.88) 0%, rgba(6, 5, 20, 0.72) 100%);
    backdrop-filter: blur(35px) saturate(220%);
    -webkit-backdrop-filter: blur(35px) saturate(220%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.5), 0 0 80px rgba(147, 51, 255, 0.08);
}

/* TOP running neon line */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #ff7a18 10%,
        #ffa542 20%,
        #9333ff 35%,
        #b366ff 45%,
        #2e7dff 55%,
        #5aa0ff 65%,
        #9333ff 80%,
        #ff7a18 92%,
        transparent 100%);
    background-size: 250% 100%;
    animation: navShimmer 14s linear infinite;
    box-shadow:
        0 0 15px rgba(147, 51, 255, 0.8),
        0 0 30px rgba(255, 122, 24, 0.6),
        0 0 45px rgba(46, 125, 255, 0.5),
        0 2px 20px rgba(147, 51, 255, 0.5);
    filter: blur(0.3px);
}

@keyframes navShimmer {
    0% { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}

/* BOTTOM running neon line (mirror) */
.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #2e7dff 10%,
        #5aa0ff 20%,
        #9333ff 35%,
        #b366ff 45%,
        #ff7a18 55%,
        #ffa542 65%,
        #9333ff 80%,
        #2e7dff 92%,
        transparent 100%);
    background-size: 250% 100%;
    animation: navShimmerReverse 14s linear infinite;
    box-shadow:
        0 0 15px rgba(147, 51, 255, 0.8),
        0 0 30px rgba(46, 125, 255, 0.6),
        0 0 45px rgba(255, 122, 24, 0.5),
        0 -2px 20px rgba(147, 51, 255, 0.5);
    filter: blur(0.3px);
}

@keyframes navShimmerReverse {
    0% { background-position: -250% 0; }
    100% { background-position: 250% 0; }
}

.navbar.scrolled {
    padding: 1rem 0;
    background: linear-gradient(180deg, rgba(3, 2, 10, 0.96) 0%, rgba(3, 2, 10, 0.88) 100%);
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.7), 0 0 80px rgba(147, 51, 255, 0.15);
}

.nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.nav-links {
    display: flex;
    gap: 0.8rem;
    list-style: none;
    align-items: center;
    padding: 0 1rem;
    position: relative;
}

/* Decorative separators flanking the nav links */
.nav-links::before,
.nav-links::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, transparent 0%, rgba(147, 51, 255, 0.6) 50%, transparent 100%);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(147, 51, 255, 0.4);
}

.nav-links::before { right: -8px; }
.nav-links::after { left: -8px; }

.nav-links a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-family: 'Rajdhani', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.65rem 1.4rem;
    text-shadow: 0 0 12px rgba(147, 51, 255, 0.25);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(147, 51, 255, 0.06) 100%);
    border: 1px solid rgba(147, 51, 255, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 12px rgba(0, 0, 0, 0.3);
    display: inline-block;
    line-height: 1.3;
    overflow: hidden;
}

.nav-links a::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 50%;
    width: 5px;
    height: 5px;
    background: var(--gold);
    border-radius: 50%;
    transform: translateX(50%) scale(0);
    box-shadow: 0 0 10px var(--gold-glow), 0 0 5px var(--gold);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.95;
    z-index: 2;
}

.nav-links a::after { display: none; }

.nav-links a:hover,
.nav-links a.active {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(147, 51, 255, 0.7), 0 0 10px rgba(255, 122, 24, 0.5);
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.22) 0%, rgba(255, 122, 24, 0.16) 50%, rgba(46, 125, 255, 0.2) 100%);
    border-color: rgba(147, 51, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 25px rgba(147, 51, 255, 0.4),
        0 0 15px rgba(255, 122, 24, 0.3),
        0 4px 18px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.nav-links a:hover::before,
.nav-links a.active::before {
    transform: translateX(50%) scale(1);
}

/* LIVE button — ultra premium red */
.nav-live {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.3rem !important;
    background: linear-gradient(135deg, #ff3040 0%, #ff0050 50%, #d10038 100%) !important;
    background-size: 200% 200% !important;
    color: #fff !important;
    border-radius: 100px;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2.2px !important;
    box-shadow: 0 6px 30px rgba(255, 0, 64, 0.55), 0 0 40px rgba(255, 0, 64, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    animation: liveGlow 2.5s ease-in-out infinite, btnShine 5s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.nav-live::before,
.nav-live::after { display: none !important; }

.nav-live .live-dot {
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px #fff, 0 0 18px #fff;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes liveGlow {
    0%, 100% { box-shadow: 0 4px 25px rgba(255, 0, 64, 0.5), 0 0 30px rgba(255, 0, 64, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 6px 35px rgba(255, 0, 64, 0.8), 0 0 50px rgba(255, 0, 64, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

@keyframes livePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
    }
    50% {
        transform: scale(1.4);
        opacity: 0.8;
        box-shadow: 0 0 0 4px rgba(255, 59, 59, 0);
    }
}

.nav-live:hover {
    transform: scale(1.08) translateY(-1px);
    color: #fff !important;
    text-shadow: none !important;
    filter: brightness(1.1);
}

.nav-auth {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 0 0.3rem;
    /* Hidden until JS sets the correct state — prevents purple FOUC on refresh */
    visibility: hidden;
    /* Failsafe: reveal automatically after 1.2s even if JS never adds the
       ready class (requestAnimationFrame is suspended when the tab loads
       in the background). CSS animations keep running in background tabs. */
    animation: navAuthFailsafe 0.01s linear 1.2s forwards;
}

@keyframes navAuthFailsafe {
    to { visibility: visible; }
}

.nav-auth.nav-auth-ready {
    visibility: visible;
    animation: none;
}

.nav-user-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem !important;
}

.nav-mini-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-main);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 0 12px rgba(147, 51, 255, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--purple));
    box-shadow: 0 0 8px var(--purple-glow);
    transition: var(--transition);
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary,
.btn-outline,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    font-family: 'Rajdhani', 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #ff7a18 0%, #9333ff 50%, #2e7dff 100%);
    background-size: 250% 250%;
    color: var(--text);
    box-shadow:
        0 6px 30px rgba(147, 51, 255, 0.5),
        0 0 35px rgba(255, 122, 24, 0.35),
        0 0 25px rgba(46, 125, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: btnShine 5s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes btnShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 45px rgba(147, 51, 255, 0.6), 0 0 35px rgba(255, 122, 24, 0.5), 0 0 30px rgba(46, 125, 255, 0.5);
    filter: brightness(1.15);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--orange);
    box-shadow: 0 0 20px var(--orange-glow), inset 0 0 20px rgba(255, 122, 24, 0.06);
}

.btn-outline:hover {
    background: var(--orange);
    color: var(--bg-dark);
    box-shadow: 0 0 30px var(--orange-glow);
    transform: translateY(-2px);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.9rem 1.8rem;
    border: 1px solid rgba(147, 51, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 700;
    letter-spacing: 2.2px;
    font-size: 0.88rem;
}

.btn-ghost:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.22) 0%, rgba(46, 125, 255, 0.18) 100%);
    border-color: var(--purple);
    box-shadow: 0 0 30px rgba(147, 51, 255, 0.45), 0 4px 20px rgba(147, 51, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 0.9rem;
}

.hero-btn-guest[hidden],
.hero-btn-member[hidden] {
    display: none;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8rem 2rem 4rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) saturate(1.4) hue-rotate(-10deg);
    z-index: 0;
    animation: heroBgZoom 30s ease-in-out infinite alternate;
}

@keyframes heroBgZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Hero Action Video — embedded as part of background */
.hero-video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    max-width: 70vw;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-video-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hero-video-frame::before { display: none; }

.hero-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.4) contrast(1.1) brightness(0.9);
    /* Fade the video into the background on the right and edges */
    -webkit-mask-image:
        linear-gradient(to right, black 0%, black 35%, transparent 95%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image:
        linear-gradient(to right, black 0%, black 35%, transparent 95%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(6, 5, 20, 0.4) 70%, rgba(6, 5, 20, 0.85) 100%),
        linear-gradient(135deg, rgba(147, 51, 255, 0.15) 0%, transparent 50%, rgba(255, 122, 24, 0.1) 100%);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image:
        linear-gradient(to right, black 0%, black 50%, transparent 100%);
    mask-image:
        linear-gradient(to right, black 0%, black 50%, transparent 100%);
}

/* Hide card-style elements (badges/stats) — video is now background */
.hero-video-badge,
.hero-video-stats { display: none; }

@media (max-width: 1100px) {
    .hero-video { display: none; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 122, 24, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(147, 51, 255, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(46, 125, 255, 0.38) 0%, transparent 50%),
        radial-gradient(circle at 90% 15%, rgba(179, 102, 255, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, rgba(6, 5, 20, 0.55) 0%, rgba(6, 5, 20, 0.88) 70%, var(--bg-dark) 100%);
    z-index: 1;
    animation: heroOverlayDrift 25s ease-in-out infinite alternate;
}

@keyframes heroOverlayDrift {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 10% 15%, -10% 20%, 20% -10%, -15% 10%, 0% 0%; }
}

.hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 122, 24, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 24, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 15s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    animation: fadeInUp 1s ease-out;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.3rem;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.18) 0%, rgba(255, 77, 0, 0.18) 100%);
    border: 1px solid var(--orange);
    border-radius: 100px;
    font-size: 0.8rem;
    color: var(--orange);
    margin-bottom: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 25px rgba(255, 122, 24, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--orange);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
    50% { box-shadow: 0 0 0 12px transparent; }
}

.hero-title {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.title-line {
    display: block;
    text-shadow: 0 0 40px rgba(255, 122, 24, 0.35);
}

.title-accent {
    background: linear-gradient(135deg, #ff7a18 0%, #b366ff 35%, #9333ff 60%, #2e7dff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 25px rgba(147, 51, 255, 0.55)) drop-shadow(0 0 40px rgba(255, 122, 24, 0.35));
    animation: gradientShift 8s ease infinite;
}

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

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 640px;
    margin-inline: auto;
    font-weight: 300;
}

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

.hero-stats {
    display: flex;
    gap: 4rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
    position: relative;
}

.hero-stats::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: var(--gradient-main);
    box-shadow: 0 0 20px var(--orange-glow);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: 0 0 30px var(--orange-glow);
    filter: drop-shadow(0 0 15px var(--orange-glow));
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
    font-weight: 700;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 3;
}

.scroll-arrow {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--orange), transparent);
    box-shadow: 0 0 10px var(--orange-glow);
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.5; }
}

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

/* ============================================
   Section Headers
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-tag {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.4rem 1.2rem;
    background: rgba(255, 122, 24, 0.1);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-shadow: 0 0 10px var(--orange-glow);
}

.section-title {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 620px;
    margin-inline: auto;
}

/* ============================================
   Featured Games
   ============================================ */
.featured {
    padding: 8rem 0;
    position: relative;
}

.games-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    min-height: 640px;
}

.game-card {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.featured-card {
    grid-row: span 2;
}

.game-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: saturate(1.2);
}

.game-1 {
    background-image: url('https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=1200&q=80');
}

.game-2 {
    background-image: url('https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?w=800&q=80');
}

.game-3 {
    background-image: url('https://images.unsplash.com/photo-1614294148960-9aa740632a87?w=800&q=80');
}

.game-4 {
    background-image: url('https://images.unsplash.com/photo-1536152470836-b943b246224c?w=800&q=80');
}

.game-5 {
    background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&q=80');
}

.game-6 {
    background-image: url('https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=800&q=80');
}

.game-7 {
    background-image: url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=800&q=80');
}

.game-8 {
    background-image: url('https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=800&q=80');
}

.game-9 {
    background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&q=80');
}

.game-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(5, 5, 15, 0.95) 100%);
}

.game-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0) 0%, rgba(255, 122, 24, 0.12) 100%);
    opacity: 0;
    transition: opacity 0.4s;
}

.game-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 2rem;
    z-index: 2;
}

.game-category {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    background: rgba(255, 122, 24, 0.12);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-shadow: 0 0 8px var(--orange-glow);
}

.game-title {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.featured-card .game-title {
    font-size: 3rem;
}

.game-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    transition: var(--transition);
}

.game-link {
    color: var(--orange);
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
    display: inline-block;
    text-shadow: 0 0 10px var(--orange-glow);
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.3), 0 0 40px rgba(255, 77, 0, 0.25);
    border-color: var(--purple);
}

.game-card:hover .game-image {
    transform: scale(1.1);
    filter: saturate(1.4) brightness(1.1);
}

.game-card:hover .game-link {
    opacity: 1;
    transform: translateX(0);
}

.game-card:hover .game-overlay::after {
    opacity: 1;
}

/* ============================================
   About Section
   ============================================ */
.about-section {
    padding: 8rem 0;
    position: relative;
}

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

.about-content .section-tag { margin-bottom: 1rem; }

.about-content .section-title {
    text-align: right;
    margin-bottom: 2rem;
}

.about-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 122, 24, 0.04);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: var(--transition);
}

.feature:hover {
    border-color: var(--purple);
    background: rgba(255, 122, 24, 0.08);
    transform: translateX(-5px);
    box-shadow: 0 10px 30px rgba(255, 122, 24, 0.18);
}

.feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.18) 0%, rgba(30, 107, 255, 0.1) 100%);
    border: 1px solid var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    box-shadow: 0 0 20px rgba(255, 122, 24, 0.25);
}

.feature-icon svg { width: 22px; height: 22px; }

.feature h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature p {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.about-visual {
    position: relative;
    height: 500px;
}

.visual-card {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: var(--transition);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.visual-card:hover {
    border-color: var(--purple);
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.35), 0 0 40px rgba(255, 77, 0, 0.25);
}

.card-year {
    font-family: 'Rajdhani', 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    filter: drop-shadow(0 0 15px var(--orange-glow));
}

.card-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.card-1 { top: 0; right: 0; width: 260px; }

.card-2 {
    top: 180px;
    left: 0;
    width: 220px;
    background: linear-gradient(135deg, rgba(255, 77, 0, 0.15) 0%, rgba(109, 58, 255, 0.08) 100%);
    border-color: rgba(255, 77, 0, 0.35);
}

.card-3 { bottom: 0; right: 40px; width: 240px; }

/* ============================================
   News Section
   ============================================ */
.news-section {
    padding: 8rem 0;
    position: relative;
}

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

.news-card {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
}

.news-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-main);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s;
}

.news-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.35), 0 0 40px rgba(255, 77, 0, 0.25);
}

.news-image {
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    filter: saturate(1.2);
    transition: transform 0.6s;
}

.news-card:hover .news-image {
    transform: scale(1.08);
}

.news-1 { background-image: url('https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80'); }
.news-2 { background-image: url('https://images.unsplash.com/photo-1614294148960-9aa740632a87?w=800&q=80'); }
.news-3 { background-image: url('https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?w=800&q=80'); }

.news-body {
    padding: 1.5rem;
}

.news-date {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-shadow: 0 0 8px var(--orange-glow);
}

.news-card h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.news-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    padding: 6rem 0;
    position: relative;
}

.cta-box {
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.1) 0%, rgba(255, 77, 0, 0.1) 100%);
    border: 1px solid var(--orange);
    border-radius: 8px;
    padding: 5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(255, 122, 24, 0.18);
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 122, 24, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 24, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: gridMove 12s linear infinite;
}

.cta-box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 122, 24, 0.25) 0%, transparent 30%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cta-box > * {
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cta-box p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-darker);
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
    max-width: 300px;
}

.footer-col h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.2rem;
    color: var(--orange);
    text-shadow: 0 0 10px var(--orange-glow);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--orange);
    text-shadow: 0 0 10px var(--orange-glow);
}

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

.footer-bottom p {
    color: var(--text-dim);
    font-size: 0.85rem;
}

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

.social-links a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--gradient-main);
    color: var(--text);
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(255, 122, 24, 0.45);
}

/* ============================================
   Auth Pages (Login / Register)
   ============================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem 2rem;
    position: relative;
    overflow: hidden;
}

.auth-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.25) saturate(1.5);
    z-index: 0;
}

.auth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 77, 0, 0.35) 0%, transparent 50%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.7) 0%, rgba(5, 5, 15, 0.9) 100%);
}

.auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 122, 24, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 24, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    animation: gridMove 20s linear infinite;
}

.auth-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    background: rgba(13, 13, 28, 0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3rem;
    animation: fadeInUp 0.8s ease-out;
    box-shadow: 0 0 60px rgba(255, 122, 24, 0.25), 0 0 120px rgba(30, 107, 255, 0.1);
}

.auth-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-hot) 40%, var(--orange) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    animation: borderGlow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-header .logo {
    justify-content: center;
    margin-bottom: 1.5rem;
}

.auth-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

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

.form-label {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    background: rgba(3, 3, 8, 0.6);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.18), 0 0 25px rgba(255, 122, 24, 0.3);
    background: rgba(255, 122, 24, 0.04);
}

.form-input::placeholder { color: var(--text-dim); }

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
    cursor: pointer;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-link {
    color: var(--orange);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    transition: var(--transition);
    text-shadow: 0 0 8px var(--orange-glow);
}

.form-link:hover {
    color: var(--pink);
    text-shadow: 0 0 10px var(--pink-glow);
}

.btn-submit {
    width: 100%;
    padding: 1.2rem;
    background: var(--gradient-main);
    background-size: 200% 200%;
    color: var(--text);
    border: none;
    border-radius: 4px;
    font-family: 'Rajdhani', 'Heebo', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 30px rgba(255, 122, 24, 0.45), 0 0 30px rgba(255, 77, 0, 0.35);
    animation: btnShine 3s ease infinite;
    position: relative;
    overflow: hidden;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0, 217, 255, 0.6), 0 0 40px rgba(30, 107, 255, 0.5);
    filter: brightness(1.15);
}

.btn-submit:hover::before { left: 100%; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Rajdhani', sans-serif;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.auth-footer a {
    color: var(--orange);
    text-decoration: none;
    font-weight: 700;
    text-shadow: 0 0 8px var(--orange-glow);
}

.auth-footer a:hover { color: var(--pink); }

.auth-message {
    padding: 1rem 1.2rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    display: none;
}

.auth-message.show {
    display: block;
    animation: fadeInUp 0.4s ease;
}

.auth-message.success {
    background: rgba(0, 255, 128, 0.1);
    border: 1px solid rgba(0, 255, 128, 0.3);
    color: #00ff80;
    box-shadow: 0 0 20px rgba(0, 255, 128, 0.2);
}

.auth-message.error {
    background: rgba(255, 50, 80, 0.1);
    border: 1px solid rgba(255, 50, 80, 0.3);
    color: #ff5070;
    box-shadow: 0 0 20px rgba(255, 50, 80, 0.2);
}

/* ============================================
   Dashboard (Personal Area)
   ============================================ */
.dashboard {
    padding: 8rem 2rem 4rem;
    min-height: 100vh;
    position: relative;
}

.dashboard-hero {
    position: relative;
    padding: 3rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
    z-index: 0;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(30, 107, 255, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, rgba(13, 13, 28, 0.3) 0%, rgba(13, 13, 28, 0.9) 100%);
    z-index: 1;
}

.dashboard-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.dash-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--gradient-main);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--text);
    box-shadow: 0 0 50px rgba(147, 51, 255, 0.55), 0 0 80px rgba(255, 122, 24, 0.4), 0 0 100px rgba(46, 125, 255, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.15);
    position: relative;
    animation: avatarGlow 4s ease-in-out infinite;
    cursor: pointer;
    overflow: hidden;
}

.dash-avatar.has-image {
    color: transparent;
    text-shadow: none;
}

.dash-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 50%;
    text-transform: uppercase;
    pointer-events: none;
    gap: 0.3rem;
}

.dash-avatar-overlay svg {
    width: 28px;
    height: 28px;
}

.dash-avatar:hover .dash-avatar-overlay {
    opacity: 1;
}

.dash-avatar.no-edit {
    cursor: default;
}
.dash-avatar.no-edit:hover .dash-avatar-overlay {
    opacity: 0;
}

@keyframes avatarGlow {
    0%, 100% { box-shadow: 0 0 50px rgba(147, 51, 255, 0.55), 0 0 80px rgba(255, 122, 24, 0.4), 0 0 100px rgba(46, 125, 255, 0.3); }
    50% { box-shadow: 0 0 80px rgba(46, 125, 255, 0.6), 0 0 100px rgba(147, 51, 255, 0.5), 0 0 60px rgba(255, 122, 24, 0.4); }
}

.dash-info h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dash-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.dash-info .level {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--gold);
    border-radius: 100px;
    color: var(--gold);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    text-shadow: 0 0 10px var(--gold-glow);
    margin-top: 0.5rem;
}

.dash-stats {
    display: flex;
    gap: 2rem;
    margin-right: auto;
    flex-wrap: wrap;
}

.dash-stat {
    text-align: center;
}

.dash-stat-num {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.dash-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0.3rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.dash-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    opacity: 0.7;
}

.dash-card h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-card h2 svg {
    width: 22px;
    height: 22px;
    color: var(--orange);
    filter: drop-shadow(0 0 6px var(--orange-glow));
}

.search-box {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1.2rem;
    background: rgba(3, 3, 8, 0.6);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.18), 0 0 25px rgba(255, 122, 24, 0.3);
}

.search-input::placeholder { color: var(--text-dim); }

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orange);
    pointer-events: none;
    filter: drop-shadow(0 0 6px var(--orange-glow));
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 122, 24, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: var(--transition);
}

.user-result:hover {
    border-color: var(--purple);
    background: rgba(255, 122, 24, 0.08);
    transform: translateX(-5px);
    box-shadow: 0 5px 20px rgba(255, 122, 24, 0.18);
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-main);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(147, 51, 255, 0.35);
    overflow: hidden;
}

.user-avatar.has-image { color: transparent; }

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

.user-info .name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.user-info .detail {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.btn-add {
    padding: 0.6rem 1.2rem;
    background: var(--gradient-main);
    color: var(--text);
    border: none;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    box-shadow: 0 2px 15px rgba(255, 122, 24, 0.35);
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(255, 122, 24, 0.55);
    filter: brightness(1.1);
}

.btn-add.added {
    background: rgba(0, 255, 128, 0.15);
    color: #00ff80;
    border: 1px solid #00ff80;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.3);
    cursor: default;
}

.btn-remove {
    padding: 0.5rem 1rem;
    background: rgba(255, 50, 80, 0.1);
    color: #ff5070;
    border: 1px solid rgba(255, 50, 80, 0.3);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.btn-remove:hover {
    background: rgba(255, 50, 80, 0.2);
    box-shadow: 0 0 15px rgba(255, 50, 80, 0.4);
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.3;
    color: var(--orange);
}

.side-card {
    margin-bottom: 1.5rem;
}

.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.achievement {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 4px;
}

.achievement-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.achievement-text {
    font-size: 0.85rem;
}

.achievement-text strong {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    margin-bottom: 0.1rem;
}

.achievement-text span {
    color: var(--text-dim);
    font-size: 0.75rem;
}

/* ============================================
   Leaderboard / Champions Section
   ============================================ */
.champions-section {
    padding: 8rem 0;
    position: relative;
}

.champions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.champion-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.champion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-gold);
    box-shadow: 0 0 20px var(--gold-glow);
    z-index: 3;
}

.champion-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
    z-index: 0;
    transition: transform 0.8s;
}

.champion-card.shooting::after {
    background-image: url('https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=1200&q=80');
}

.champion-card.racing::after {
    background-image: url('https://images.unsplash.com/photo-1614294148960-9aa740632a87?w=1200&q=80');
}

.champion-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.25), 0 0 40px rgba(255, 122, 24, 0.25);
}

.champion-card:hover::after {
    transform: scale(1.08);
}

.champion-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(5, 5, 15, 0.5) 0%, rgba(5, 5, 15, 0.92) 100%);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.champion-category {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.champion-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 149, 0, 0.1));
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.champion-category-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 700;
    text-shadow: 0 0 8px var(--gold-glow);
    display: block;
    margin-bottom: 2px;
}

.champion-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.trophy {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: trophyShine 3s ease-in-out infinite;
}

@keyframes trophyShine {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); }
    50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)); }
}

.trophy svg {
    width: 100%;
    height: 100%;
    color: var(--gold);
}

.champion-player {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.champion-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text);
    box-shadow: 0 0 30px rgba(255, 122, 24, 0.55);
    border: 2px solid var(--gold);
    position: relative;
    flex-shrink: 0;
}

.champion-avatar::after {
    content: '👑';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px var(--gold));
}

.champion-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, var(--gold) 0%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.champion-handle {
    color: var(--orange);
    font-size: 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    text-shadow: 0 0 8px var(--orange-glow);
}

.champion-score {
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 149, 0, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.score-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
    line-height: 1;
}

.score-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    margin-top: 0.2rem;
    display: block;
}

.score-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

.champion-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.champion-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Rajdhani', sans-serif;
}

.champion-meta-item svg {
    width: 14px;
    height: 14px;
    color: var(--orange);
}

.runners-up {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}

.runners-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 0.8rem;
}

.runner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.runner-position {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.runner-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: var(--text-dim);
    min-width: 20px;
    font-weight: 700;
}

.runner-name {
    color: var(--text-muted);
    font-weight: 700;
}

.runner-score {
    font-family: 'Rajdhani', sans-serif;
    color: var(--orange);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ============================================
   Blog Page
   ============================================ */
.blog-hero {
    padding: 10rem 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
}

.blog-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 122, 24, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.6) 0%, var(--bg-dark) 100%);
}

.blog-hero .container { position: relative; z-index: 2; }

.blog-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 1px;
    margin: 1rem 0;
    text-transform: uppercase;
    font-weight: 900;
}

.blog-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}

.blog-list { padding: 5rem 0; }

.blog-search-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
}

.blog-search-input {
    width: 100%;
    padding: 0.9rem 3rem 0.9rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.blog-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.blog-search-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(147, 51, 255, 0.2);
    background: rgba(20, 15, 35, 0.9);
}

.blog-search-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: rgba(147, 51, 255, 0.75);
    pointer-events: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.blog-search-wrapper:focus-within .blog-search-icon {
    color: var(--purple);
}

.blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}

.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.blog-card.featured { grid-row: span 2; }

.blog-card:hover {
    transform: translateY(-10px);
    border-color: var(--purple);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.3), 0 0 40px rgba(255, 77, 0, 0.18);
}

.blog-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    filter: saturate(1.2);
    transition: transform 0.6s;
    position: relative;
    aspect-ratio: 36 / 25;
}

.blog-card.featured .blog-img { height: 340px; }

.blog-card:hover .blog-img { transform: scale(1.08); }

.blog-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 5, 15, 0.8) 100%);
}

.blog-1 { background-image: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1200&q=80'); }
.blog-2 { background-image: url('https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80'); }
.blog-3 { background-image: url('https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?w=800&q=80'); }
.blog-4 { background-image: url('https://images.unsplash.com/photo-1614294148960-9aa740632a87?w=800&q=80'); }
.blog-5 { background-image: url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=800&q=80'); }
.blog-6 { background-image: url('https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=800&q=80'); }

.blog-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card.featured .blog-body { padding: 2rem; }

.blog-tag {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 122, 24, 0.12);
    border: 1px solid var(--orange);
    border-radius: 3px;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.8rem;
    align-self: flex-start;
    text-shadow: 0 0 8px var(--orange-glow);
}

.blog-card h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    line-height: 1.3;
}

.blog-card.featured h3 { font-size: 2rem; }

.blog-card p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-meta .reading {
    color: var(--orange);
    text-shadow: 0 0 6px var(--orange-glow);
}

@media (max-width: 968px) {
    .champions-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card.featured { grid-row: auto; }
    .blog-card { min-height: 400px; }
    .blog-img { aspect-ratio: auto; }
}

/* ============================================
   Dashboard Extras: Password change + Admin
   ============================================ */
.dash-card.full {
    margin-top: 2rem;
}

.dash-card.admin {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 149, 0, 0.02) 100%);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.08);
    margin-top: 2rem;
}

.dash-card.admin::before {
    background: var(--gradient-gold);
    box-shadow: 0 0 20px var(--gold-glow);
}

.dash-card.admin h2 {
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold-glow);
}

.dash-card.admin h2 svg {
    color: var(--gold);
    filter: drop-shadow(0 0 6px var(--gold-glow));
}

.admin-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    margin-right: 0.5rem;
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #000;
    border-radius: 100px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.user-role-badge .admin-badge-wrapper {
    display: inline-flex;
    align-items: center;
    order: 1;
}

.user-role-badge .admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 149, 0, 0.12);
    border: 1px solid rgba(255, 149, 0, 0.35);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: #ff9500;
    text-transform: none;
    font-family: inherit;
    margin: 0;
    box-shadow: none;
}

.user-role-badge .admin-badge .admin-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9500;
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
    display: inline-block;
    flex-shrink: 0;
}

.user-role-badge .teammate-badge-wrapper {
    display: inline-flex;
    align-items: center;
    order: 1;
}

.user-role-badge .teammate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 179, 71, 0.12);
    border: 1px solid rgba(255, 179, 71, 0.35);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: #ffb347;
    text-transform: none;
    font-family: inherit;
    margin: 0;
    box-shadow: none;
}

.user-role-badge .teammate-badge .teammate-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 8px rgba(255, 179, 71, 0.5);
    display: inline-block;
    flex-shrink: 0;
}

.profile-main-info .user-role-badge #userAge,
.profile-main-info .user-role-badge .user-age-label {
    order: 2;
}

.profile-main-info .user-role-badge .role-pill {
    order: 3;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.password-form .form-input {
    width: 100%;
}

.password-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.password-message {
    padding: 0.8rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    display: none;
}

.password-message.show { display: block; }

.password-message.success {
    background: rgba(0, 255, 128, 0.1);
    border: 1px solid rgba(0, 255, 128, 0.3);
    color: #00ff80;
}

.password-message.error {
    background: rgba(255, 50, 80, 0.1);
    border: 1px solid rgba(255, 50, 80, 0.3);
    color: #ff5070;
}

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

.admin-stat {
    padding: 1.2rem;
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    text-align: center;
}

.admin-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.admin-stat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0.5rem;
    display: block;
}

.admin-search {
    position: relative;
    margin-bottom: 1.5rem;
}

.admin-search input {
    width: 100%;
    padding: 0.9rem 3rem 0.9rem 1rem;
    background: rgba(3, 3, 8, 0.6);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: var(--transition);
}

.admin-search input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}

.admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.admin-users-list::-webkit-scrollbar { width: 6px; }
.admin-users-list::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.admin-user-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: var(--transition);
}

.admin-user-row:hover {
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.03);
}

.admin-user-row.blocked {
    opacity: 0.5;
    border-color: rgba(255, 50, 80, 0.3);
}

.admin-user-row.blocked:hover {
    border-color: rgba(255, 50, 80, 0.5);
}

.admin-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-main);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(147, 51, 255, 0.4);
    overflow: hidden;
}

.admin-user-row.admin-row .admin-user-avatar {
    background: var(--gradient-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.admin-user-info {
    min-width: 0;
}

.admin-user-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-user-email {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.admin-user-status {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
}

.admin-user-status.active {
    background: rgba(0, 255, 128, 0.1);
    color: #00ff80;
    border: 1px solid rgba(0, 255, 128, 0.3);
}

.admin-user-status.blocked-status {
    background: rgba(255, 50, 80, 0.1);
    color: #ff5070;
    border: 1px solid rgba(255, 50, 80, 0.3);
}

.admin-actions {
    display: flex;
    gap: 0.4rem;
}

.admin-btn {
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 700;
    white-space: nowrap;
}

.admin-btn:hover:not(:disabled) {
    border-color: var(--purple);
    color: var(--orange);
}

.admin-btn.danger:hover:not(:disabled) {
    border-color: #ff5070;
    color: #ff5070;
    box-shadow: 0 0 15px rgba(255, 50, 80, 0.25);
}

.admin-btn.success:hover:not(:disabled) {
    border-color: #00ff80;
    color: #00ff80;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.25);
}

.admin-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.admin-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

@media (max-width: 968px) {
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .admin-user-row {
        grid-template-columns: auto 1fr;
        gap: 0.7rem;
    }
    .admin-user-status, .admin-actions {
        grid-column: 1 / -1;
    }
    .admin-actions { justify-content: flex-start; }
}

/* ============================================
   Live Streams Page
   ============================================ */
.live-hero {
    padding: 10rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.live-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.28) saturate(1.3);
}

.live-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 0, 64, 0.2) 0%, transparent 60%),
        linear-gradient(180deg, rgba(4, 8, 21, 0.6) 0%, var(--bg-dark) 100%);
}

.live-hero .container { position: relative; z-index: 2; }

.live-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 1px;
    margin: 1rem 0;
    text-transform: uppercase;
    font-weight: 700;
}

.live-hero .live-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.3rem;
    background: linear-gradient(135deg, #ff3b3b 0%, #ff0040 100%);
    color: #fff;
    border-radius: 100px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 30px rgba(255, 0, 64, 0.6);
    margin-bottom: 1rem;
    animation: liveGlow 2.5s ease-in-out infinite;
}

.live-hero .live-tag .live-dot {
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff;
    animation: livePulse 1.5s ease-in-out infinite;
}

.live-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}

.live-section { padding: 3rem 0 6rem; }

.platform-tabs {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.platform-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 8px;
    transition: var(--transition);
    font-weight: 700;
}

.platform-tab svg { width: 20px; height: 20px; }

.platform-tab:hover {
    color: var(--text);
    border-color: var(--purple);
    background: rgba(255, 122, 24, 0.06);
}

.platform-tab.active {
    background: var(--gradient-main);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 25px rgba(255, 122, 24, 0.45);
}

.platform-tab.youtube.active {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    box-shadow: 0 6px 25px rgba(255, 0, 0, 0.5);
}

.platform-tab.discord.active {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    box-shadow: 0 6px 25px rgba(88, 101, 242, 0.5);
}

.platform-tab.twitch.active {
    background: linear-gradient(135deg, #9146ff 0%, #6441a5 100%);
    box-shadow: 0 6px 25px rgba(145, 70, 255, 0.5);
}

.streams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2rem;
}

.stream-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.stream-card:hover {
    transform: translateY(-8px);
    border-color: var(--purple);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.3), 0 0 40px rgba(255, 77, 0, 0.18);
}

.stream-thumb {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
    filter: saturate(1.15);
    transition: transform 0.5s;
}

.stream-card:hover .stream-thumb { transform: scale(1.05); }

.stream-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(4, 8, 21, 0.85) 100%);
}

.stream-1 { background-image: url('https://legendsil.com/wp-content/uploads/2026/05/legendsil-live-stream-1-v2.jpg'); }
.stream-2 { background-image: url('https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80'); }
.stream-3 { background-image: url('https://legendsil.com/wp-content/uploads/2026/05/legendsil-live-stream-3.jpg'); }
.stream-4 { background-image: url('https://legendsil.com/wp-content/uploads/2026/05/legendsil-live-stream-4.jpg'); }
.stream-5 { background-image: url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=800&q=80'); }
.stream-6 { background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&q=80'); }

.stream-live-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, #ff3b3b 0%, #ff0040 100%);
    color: #fff;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.5);
}

.stream-live-badge .dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.stream-viewers {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 2;
    padding: 0.3rem 0.7rem;
    background: rgba(4, 8, 21, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stream-viewers svg { width: 13px; height: 13px; color: var(--orange); }

.stream-duration {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.3rem 0.7rem;
    background: rgba(4, 8, 21, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--orange);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-shadow: 0 0 6px var(--orange-glow);
}

.stream-body {
    padding: 1.55rem 1.5rem;
}

.stream-streamer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.stream-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(255, 122, 24, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.stream-streamer-info h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    line-height: 1.15;
    margin-bottom: 0.2rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--text);
}

.stream-streamer-info span {
    color: var(--orange);
    font-size: 0.88rem;
    text-shadow: 0 0 6px var(--orange-glow);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.stream-title {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.stream-game {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.stream-watch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 122, 24, 0.12);
    border: 1px solid var(--orange);
    color: var(--orange);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.stream-watch:hover {
    background: var(--orange);
    color: var(--bg-dark);
    box-shadow: 0 0 20px var(--orange-glow);
}

.stream-watch svg { width: 12px; height: 12px; }

/* Platform-specific stream card tints */
.stream-card.youtube .stream-live-badge {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}
.stream-card.discord .stream-live-badge {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
}
.stream-card.twitch .stream-live-badge {
    background: linear-gradient(135deg, #9146ff 0%, #6441a5 100%);
}

/* Upcoming schedule */
.schedule-section {
    margin-top: 5rem;
}

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

.schedule-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.3rem 1.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: var(--transition);
}

.schedule-item:hover {
    border-color: var(--purple);
    background: rgba(255, 122, 24, 0.04);
    transform: translateX(-5px);
}

.schedule-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.6rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    min-width: 80px;
    text-align: center;
    filter: drop-shadow(0 0 10px var(--orange-glow));
}

.schedule-info h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    font-weight: 700;
}

.schedule-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.schedule-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 122, 24, 0.1);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--orange);
    font-weight: 700;
}

.schedule-platform.youtube {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4444;
}

.schedule-platform.discord {
    background: rgba(88, 101, 242, 0.1);
    border-color: rgba(88, 101, 242, 0.3);
    color: #7983f7;
}

.schedule-platform.twitch {
    background: rgba(145, 70, 255, 0.1);
    border-color: rgba(145, 70, 255, 0.3);
    color: #a66eff;
}

.schedule-platform svg { width: 14px; height: 14px; }

.btn-notify {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-notify:hover {
    border-color: var(--purple);
    color: var(--orange);
    box-shadow: 0 0 15px var(--orange-glow);
}

.btn-notify svg { width: 14px; height: 14px; }

@media (max-width: 968px) {
    .streams-grid { grid-template-columns: 1fr 1fr; }
    .schedule-item {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .schedule-info { grid-column: span 2; }
}

@media (max-width: 600px) {
    .streams-grid { grid-template-columns: 1fr; }
    .schedule-item { grid-template-columns: 1fr; text-align: center; }
    .schedule-info { grid-column: auto; }
}

/* ============================================
   Forum Page
   ============================================ */
.forum-hero {
    padding: 10rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.forum-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1587202372775-e229f172b9d7?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
}

.forum-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(109, 58, 255, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.6) 0%, var(--bg-dark) 100%);
}

.forum-hero .container {
    position: relative;
    z-index: 2;
}

.forum-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 1px;
    margin: 1rem 0;
    text-transform: uppercase;
    font-weight: 900;
}

.forum-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}

.forum-section {
    padding: 3rem 0 5rem;
}

.forum-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.forum-main { min-width: 0; }

.forum-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.forum-toolbar .search-box {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0;
}

.forum-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cat-btn {
    padding: 0.6rem 1.3rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
    font-weight: 700;
}

.cat-btn:hover,
.cat-btn.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: var(--text);
    box-shadow: 0 4px 20px rgba(255, 122, 24, 0.45);
}

.post-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.post-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.post-form h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: var(--orange);
    letter-spacing: 1px;
}

.post-form .form-input {
    margin-bottom: 1rem;
}

.post-form textarea.form-input {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.post-form select.form-input {
    cursor: pointer;
}

#blogTag option {
    background: #0d0b1f !important;
    color: #fff !important;
}

.post-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.post-form-actions .login-notice {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.post-form-actions .login-notice a {
    color: var(--orange);
    text-decoration: none;
    font-weight: 700;
}

.threads-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.thread-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.thread-card::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-main);
    transform: scaleY(0);
    transition: transform 0.3s;
    transform-origin: top;
}

.thread-card:hover {
    border-color: var(--purple);
    transform: translateX(-5px);
    box-shadow: 0 10px 40px rgba(255, 122, 24, 0.18);
}

.thread-card:hover::before { transform: scaleY(1); }

.thread-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.thread-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--gradient-main);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    box-shadow: 0 0 15px rgba(147, 51, 255, 0.4);
    overflow: hidden;
}

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

.thread-meta-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.thread-author {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    color: var(--orange);
    font-weight: 700;
    text-shadow: 0 0 6px var(--orange-glow);
}

.thread-time {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.thread-cat {
    padding: 0.2rem 0.7rem;
    background: rgba(109, 58, 255, 0.15);
    border: 1px solid rgba(109, 58, 255, 0.4);
    border-radius: 100px;
    font-size: 0.65rem;
    color: #7c6fff;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.thread-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.thread-body {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thread-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.8rem;
}

.thread-stats {
    display: flex;
    gap: 1.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.thread-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

.thread-stat svg {
    width: 15px;
    height: 15px;
    color: var(--orange);
}

.thread-reply-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 122, 24, 0.1);
    border: 1px solid var(--border);
    color: var(--orange);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 700;
}

.thread-reply-btn:hover {
    background: var(--gradient-main);
    color: var(--text);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(255, 122, 24, 0.45);
}

.thread-replies {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.reply {
    padding: 0.9rem;
    background: rgba(255, 122, 24, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.reply-header {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
}

.reply-author {
    font-family: 'Rajdhani', sans-serif;
    color: var(--orange);
    font-weight: 700;
    text-shadow: 0 0 6px var(--orange-glow);
}

.reply-time {
    color: var(--text-dim);
    font-size: 0.72rem;
}

.reply-body {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.reply-form {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.6rem;
}

.reply-form input {
    flex: 1;
    padding: 0.7rem 1rem;
    background: rgba(3, 3, 8, 0.6);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
}

.reply-form input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 2px rgba(255, 122, 24, 0.18);
}

.reply-form button {
    padding: 0.7rem 1.2rem;
    background: var(--gradient-main);
    border: none;
    color: var(--text);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    font-weight: 700;
    transition: var(--transition);
}

.reply-form button:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 15px rgba(255, 122, 24, 0.45);
}

.forum-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.sidebar-card h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--orange);
}

.sidebar-card.discord {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.05) 100%);
    border-color: #5865f2;
    box-shadow: 0 0 30px rgba(88, 101, 242, 0.2);
}

.sidebar-card.discord::before {
    background: #5865f2;
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.6);
}

.discord-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #5865f2;
    color: #fff;
    box-shadow: 0 0 30px rgba(88, 101, 242, 0.5);
}

.discord-logo svg { width: 32px; height: 32px; }

.sidebar-card.discord h3 {
    text-align: center;
    color: #fff;
}

.sidebar-card.discord p {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.btn-discord {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem;
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

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

.btn-discord svg {
    width: 18px;
    height: 18px;
}

.forum-stats {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

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

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

.forum-stat-row .label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.forum-stat-row .value {
    font-family: 'Rajdhani', sans-serif;
    color: var(--orange);
    font-weight: 700;
}

.top-contributors {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.contributor {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem;
    background: rgba(255, 122, 24, 0.04);
    border-radius: 6px;
    transition: var(--transition);
}

.contributor:hover {
    background: rgba(255, 122, 24, 0.1);
    transform: translateX(-3px);
}

.contributor-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--text);
}

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

.contributor-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

.contributor-posts {
    font-size: 0.7rem;
    color: var(--text-dim);
}

/* Discord notice banner */
.discord-banner {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    max-width: 340px;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    padding: 1.3rem;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(88, 101, 242, 0.5), 0 0 40px rgba(88, 101, 242, 0.3);
    z-index: 9999;
    animation: discordSlide 0.5s ease-out;
    color: #fff;
}

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

.discord-banner-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.discord-banner-header svg { width: 24px; height: 24px; }

.discord-banner h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.discord-banner p {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    opacity: 0.9;
    line-height: 1.5;
}

.discord-banner-actions {
    display: flex;
    gap: 0.5rem;
}

.discord-banner-actions a,
.discord-banner-actions button {
    flex: 1;
    padding: 0.6rem;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.discord-banner-actions a {
    background: #fff;
    color: #5865f2;
}

.discord-banner-actions a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

.discord-banner-actions button {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.discord-banner-actions button:hover {
    background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 968px) {
    .forum-layout { grid-template-columns: 1fr; }
    .forum-sidebar {
        order: -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .sidebar-card.discord { grid-column: span 2; }
}

@media (max-width: 600px) {
    .forum-sidebar { grid-template-columns: 1fr; }
    .sidebar-card.discord { grid-column: auto; }
}

/* ============================================
   About Me Page
   ============================================ */
.about-hero {
    padding: 10rem 2rem 5rem;
    position: relative;
    overflow: hidden;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
}

.about-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 40%, rgba(255, 122, 24, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 30% 60%, rgba(255, 77, 0, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.6) 0%, var(--bg-dark) 100%);
}

.about-hero .container {
    position: relative;
    z-index: 2;
}

.about-hero-content {
    max-width: 900px;
}

.about-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 1rem 0;
    line-height: 0.95;
    text-transform: uppercase;
}

.about-hero p {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 700px;
    line-height: 1.8;
}

.story-section { padding: 6rem 0; }

.story-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

.story-side {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.story-side h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.story-side .section-tag { margin-bottom: 1rem; }

.story-content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.story-content p strong { color: var(--text); }

.timeline {
    margin-top: 3rem;
    position: relative;
    padding-right: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-main);
    box-shadow: 0 0 10px var(--orange-glow);
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    right: -2.4rem;
    top: 0.3rem;
    width: 14px;
    height: 14px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 122, 24, 0.25), 0 0 15px var(--orange-glow);
}

.timeline-year {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.3rem;
}

.timeline-item h4 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.timeline-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.values-section { padding: 6rem 0; }

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

.value-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.value-card:hover {
    border-color: var(--purple);
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.25), 0 0 40px rgba(255, 77, 0, 0.18);
}

.value-card:hover::before { transform: scaleX(1); }

.value-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 4rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.4;
}

.value-card h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.value-card p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ============================================
   Games Page
   ============================================ */
.games-hero {
    padding: 10rem 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.games-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
}

.games-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 122, 24, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.6) 0%, var(--bg-dark) 100%);
}

.games-hero .container {
    position: relative;
    z-index: 2;
}

.games-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 1px;
    margin: 1rem 0;
    text-transform: uppercase;
    font-weight: 900;
}

.games-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}

.games-list { padding: 5rem 0; }

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

.games-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transition);
    font-weight: 700;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: var(--text);
    box-shadow: 0 4px 20px rgba(255, 122, 24, 0.45);
}

.game-item {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
}

.game-item:hover {
    transform: translateY(-10px);
    border-color: var(--purple);
    box-shadow: 0 20px 60px rgba(255, 122, 24, 0.3), 0 0 40px rgba(255, 77, 0, 0.18);
}

.game-item-image {
    height: 260px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    filter: saturate(1.2);
    transition: transform 0.6s;
}

.game-item:hover .game-item-image { transform: scale(1.08); }

.game-item-body { padding: 1.5rem; }

.game-item h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.game-item p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.game-rating {
    color: var(--gold);
    font-size: 0.85rem;
    text-shadow: 0 0 8px var(--gold-glow);
}

.game-price {
    font-family: 'Rajdhani', sans-serif;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    font-size: 1.1rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 968px) {
    .nav-links,
    .nav-auth {
        display: none;
    }

    .hamburger { display: flex; }

    .games-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .featured-card {
        grid-column: span 2;
        grid-row: auto;
    }

    .about-grid,
    .story-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .story-side { position: static; }

    .about-visual { height: 400px; }

    .news-grid,
    .values-grid,
    .games-list-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-stats { gap: 2rem; }

    .stat-num { font-size: 2.2rem; }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .dashboard-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .dash-stats { margin-right: 0; }
}

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

    .auth-container {
        padding: 2rem 1.5rem;
    }

    .cta-box { padding: 3rem 1.5rem; }

    .dashboard-hero {
        padding: 2rem 1.5rem;
    }

    .dash-info h1 { font-size: 2rem; }

    .dash-avatar {
        width: 90px;
        height: 90px;
        font-size: 2.2rem;
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--orange), var(--pink));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.2);
}

/* ============================================
   Reveal Animation
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   ELITE CHAMPIONS PODIUM - Ultra Premium Design
   ============================================ */
.elite-champions {
    padding: 8rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.elite-champions-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 215, 0, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(147, 51, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(46, 125, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.elite-champions-particles {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 215, 0, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 215, 0, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 30%, rgba(255, 215, 0, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 70%, rgba(255, 215, 0, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 40%, rgba(255, 215, 0, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 80%, rgba(255, 149, 0, 0.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 15%, rgba(255, 149, 0, 0.3) 0%, transparent 100%);
    animation: eliteParticleFloat 20s linear infinite;
    pointer-events: none;
}

@keyframes eliteParticleFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.elite-tag {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 149, 0, 0.15)) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
}

.elite-title {
    background: linear-gradient(135deg, #fff 30%, #ffd700 50%, #ff9500 70%, #fff 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eliteTitleShimmer 4s ease-in-out infinite;
}

@keyframes eliteTitleShimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* Category Header */
.podium-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.podium-category-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.podium-category-icon.shooting-icon {
    background: linear-gradient(135deg, rgba(255, 48, 64, 0.2), rgba(255, 0, 80, 0.2));
    border: 2px solid rgba(255, 48, 64, 0.4);
    color: #ff3040;
    box-shadow: 0 0 20px rgba(255, 48, 64, 0.15);
}

.podium-category-icon.racing-icon {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(46, 125, 255, 0.2));
    border: 2px solid rgba(0, 229, 255, 0.4);
    color: #00e5ff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.podium-category-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.podium-category-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), transparent);
    max-width: 200px;
}

/* Podium Layout */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.podium-1st { order: 2; }
.podium-2nd { order: 1; }
.podium-3rd { order: 3; }

/* Podium Card */
.podium-card {
    width: 260px;
    background: rgba(13, 11, 31, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.podium-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 215, 0, 0.05);
}

.podium-card-gold {
    background: linear-gradient(170deg, rgba(255, 215, 0, 0.08), rgba(13, 11, 31, 0.8) 40%, rgba(255, 149, 0, 0.06));
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.08),
        0 0 80px rgba(255, 215, 0, 0.04),
        inset 0 1px 0 rgba(255, 215, 0, 0.15);
}

.podium-card-gold:hover {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(255, 215, 0, 0.12),
        0 0 120px rgba(255, 215, 0, 0.06),
        inset 0 1px 0 rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.35);
}

/* Podium Glow (1st place only) */
.podium-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: conic-gradient(from 0deg, #ffd700, #ff9500, #ffd700, #fff5cc, #ffd700);
    opacity: 0.12;
    z-index: -1;
    animation: podiumGlowSpin 8s linear infinite;
    filter: blur(2px);
}

@keyframes podiumGlowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Rank Badge */
.podium-rank-badge {
    position: absolute;
    top: -22px;
    right: 50%;
    transform: translateX(50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.podium-rank-badge.gold {
    width: 54px;
    height: 54px;
    top: -28px;
    font-size: 1.9rem;
    background: linear-gradient(135deg, #ffe066 0%, #ffd700 45%, #ff9500 100%);
    color: #1a0a00;
    border: 2.5px solid rgba(255, 240, 180, 0.7);
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.15),
        0 0 25px rgba(255, 215, 0, 0.65),
        0 0 55px rgba(255, 215, 0, 0.3),
        inset 0 2px 6px rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
    animation: goldBadgePulse 2.8s ease-in-out infinite;
}

@keyframes goldBadgePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15), 0 0 25px rgba(255, 215, 0, 0.65), 0 0 55px rgba(255, 215, 0, 0.3), inset 0 2px 6px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.25), 0 0 35px rgba(255, 215, 0, 0.85), 0 0 75px rgba(255, 215, 0, 0.45), inset 0 2px 6px rgba(255, 255, 255, 0.55); }
}

.podium-rank-badge.silver {
    background: linear-gradient(135deg, #f2f2f2 0%, #c0c0c0 50%, #9a9a9a 100%);
    color: #222;
    border: 2.5px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 0 0 3px rgba(192, 192, 192, 0.12),
        0 0 20px rgba(220, 220, 220, 0.5),
        0 0 40px rgba(192, 192, 192, 0.2),
        inset 0 2px 5px rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.podium-rank-badge.bronze {
    background: linear-gradient(135deg, #f5b97b 0%, #cd7f32 50%, #8a5020 100%);
    color: #2a1200;
    border: 2.5px solid rgba(255, 210, 160, 0.6);
    box-shadow:
        0 0 0 3px rgba(205, 127, 50, 0.12),
        0 0 20px rgba(205, 127, 50, 0.5),
        0 0 40px rgba(205, 127, 50, 0.2),
        inset 0 2px 5px rgba(255, 220, 180, 0.5);
    text-shadow: 0 1px 2px rgba(255, 220, 180, 0.4);
}

/* Crown */
.podium-crown {
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.podium-crown svg {
    width: 36px;
    height: 36px;
}

.podium-1st .podium-crown svg {
    width: 56px;
    height: 56px;
}

.gold-crown {
    color: #ffd700;
    filter:
        drop-shadow(0 0 14px rgba(255, 215, 0, 0.75))
        drop-shadow(0 0 6px rgba(255, 180, 60, 0.6));
    animation: crownGoldGlow 3s ease-in-out infinite;
}

@keyframes crownGoldGlow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 6px rgba(255, 180, 60, 0.6)); transform: translateY(0); }
    50% { filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 10px rgba(255, 180, 60, 0.75)); transform: translateY(-2px); }
}

.silver-crown {
    color: #e0e0e0;
    filter:
        drop-shadow(0 0 10px rgba(220, 220, 220, 0.6))
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.bronze-crown {
    color: #e8a665;
    filter:
        drop-shadow(0 0 10px rgba(205, 127, 50, 0.55))
        drop-shadow(0 0 4px rgba(255, 180, 120, 0.4));
}

/* Avatar */
.podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    position: relative;
}

.podium-1st .podium-avatar {
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
}

.gold-ring {
    background: linear-gradient(135deg, #1a1030, #2a1840);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.6),
        0 0 25px rgba(255, 215, 0, 0.3),
        0 0 50px rgba(255, 215, 0, 0.1),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    animation: goldRingPulse 3s ease-in-out infinite;
}

@keyframes goldRingPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.3), 0 0 50px rgba(255, 215, 0, 0.1); }
    50% { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.8), 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15); }
}

.silver-ring {
    background: linear-gradient(135deg, #1a1a2a, #2a2a3a);
    box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.5), 0 0 20px rgba(192, 192, 192, 0.2);
}

.bronze-ring {
    background: linear-gradient(135deg, #1a1520, #2a2030);
    box-shadow: 0 0 0 3px rgba(205, 127, 50, 0.5), 0 0 20px rgba(205, 127, 50, 0.2);
}

/* Name */
.podium-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.podium-name-gold {
    background: linear-gradient(135deg, #ffd700, #fff5cc, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.podium-handle {
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.75rem;
    unicode-bidi: isolate;
    direction: ltr;
}

/* Champion Title Badge (1st only) */
.podium-title-badge {
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 149, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.3);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #ffd700;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Stats */
.podium-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.podium-stat {
    text-align: center;
}

.podium-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    display: block;
}

.podium-stat-value.gold-text {
    background: linear-gradient(135deg, #ffd700, #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25rem;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}

.podium-stat-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.podium-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* Wins breakdown row — "ניצח ב-X משחקים" per place */
.podium-wins {
    margin-top: 0.55rem;
    padding: 0.55rem 0.6rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.podium-wins-label {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2.2px;
    color: var(--text-dim);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.podium-wins-medals {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
}

.podium-card-gold .podium-wins {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 149, 0, 0.04));
    border-color: rgba(255, 215, 0, 0.22);
}

.wins-medal {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    cursor: default;
}

.wins-icon {
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.15));
}

.wins-count {
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.podium-card-gold .wins-count {
    color: #fff1a8;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
}

/* Podium Pillars */
.podium-pillar {
    width: 100%;
    max-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 12px 12px;
    margin-top: -1px;
    position: relative;
    overflow: hidden;
}

.podium-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.pillar-gold {
    height: 150px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.18), rgba(255, 215, 0, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-top: none;
    box-shadow: inset 0 5px 25px rgba(255, 215, 0, 0.12);
}

.pillar-silver {
    height: 115px;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.14), rgba(192, 192, 192, 0.03));
    border: 1px solid rgba(192, 192, 192, 0.18);
    border-top: none;
    box-shadow: inset 0 5px 18px rgba(192, 192, 192, 0.08);
}

.pillar-bronze {
    height: 90px;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.14), rgba(205, 127, 50, 0.03));
    border: 1px solid rgba(205, 127, 50, 0.18);
    border-top: none;
    box-shadow: inset 0 5px 18px rgba(205, 127, 50, 0.08);
}

.pillar-number {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 6.5rem;
    font-weight: 900;
    opacity: 0.4;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}

.pillar-gold .pillar-number {
    font-size: 7.5rem;
    opacity: 0.75;
    background: linear-gradient(180deg, #fff1a8 0%, #ffd700 45%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.55)) drop-shadow(0 0 6px rgba(255, 180, 40, 0.35));
}
.pillar-silver .pillar-number {
    opacity: 0.65;
    background: linear-gradient(180deg, #ffffff 0%, #d4d4d4 50%, #9a9a9a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(220, 220, 220, 0.35));
}
.pillar-bronze .pillar-number {
    opacity: 0.65;
    background: linear-gradient(180deg, #f5c08a 0%, #cd7f32 50%, #8a5020 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.35));
}

/* Podium Game Tag */
.podium-game-tag {
    display: none;
}

/* Responsive */
@media (max-width: 900px) {
    .podium {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .podium-1st, .podium-2nd, .podium-3rd { order: unset; }
    .podium-pillar { display: none; }
    .podium-card { width: 100%; max-width: 320px; }
}

/* ============================================
   Round LIVE Button (navbar)
   ============================================ */
.nav-live-round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3040, #ff0050, #d10038);
    box-shadow: 0 0 15px rgba(255, 0, 80, 0.5), 0 0 30px rgba(255, 0, 80, 0.2);
    animation: liveGlow 2.5s ease-in-out infinite;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
}

.nav-live-round .live-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

.nav-live-round.is-live {
    box-shadow: 0 0 20px rgba(255, 0, 80, 0.7), 0 0 40px rgba(255, 0, 80, 0.4), 0 0 60px rgba(255, 0, 80, 0.2);
}

.nav-live-round.is-live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(255, 0, 80, 0.6);
    animation: livePulse 1.5s ease-in-out infinite;
}

/* ============================================
   Notification Bell
   ============================================ */
.nav-notification-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
}

.nav-notification-bell svg {
    width: 22px;
    height: 22px;
}

.nav-notification-bell:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 122, 24, 0.4);
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #ff3040, #ff0050);
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-family: 'Rajdhani', sans-serif;
}

.notif-badge.hidden {
    display: none;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: rgba(13, 11, 31, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 2000;
    padding: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.notif-dropdown.hidden {
    display: none;
}

.notif-item {
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notif-icon {
    font-size: 1.15rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.notif-text strong {
    color: #fff;
}

.notif-time {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

.notif-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ============================================
   LIVE Modal
   ============================================ */
.live-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 2, 10, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.live-modal {
    background: rgba(13, 11, 31, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.live-modal h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.live-modal-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.live-modal-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.platform-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.live-modal .form-input {
    margin-bottom: 1.5rem;
}

.live-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-danger {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    background: rgba(255, 48, 64, 0.15);
    border: 1px solid rgba(255, 48, 64, 0.3);
    color: #ff3040;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-danger:hover {
    background: rgba(255, 48, 64, 0.25);
}

/* ============================================
   User Role Badge / Pills
   ============================================ */
.user-role-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.role-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    background: rgba(147, 51, 255, 0.15);
    border: 1px solid rgba(147, 51, 255, 0.3);
    color: #b366ff;
}

.role-pill.role-admin {
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.2), rgba(255, 0, 80, 0.2));
    border: 1px solid rgba(255, 122, 24, 0.4);
    color: #ff9d4a;
}

.role-pill.role-teammate {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    font-weight: 500;
    font-size: 0.78rem;
}

.role-pill.role-donor {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ============================================
   Password Card Fix
   ============================================ */
.dash-card.full {
    margin-top: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Role Picker (Registration)
   ============================================ */
.auth-container--wide {
    max-width: 900px;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}

.register-grid .form-group--full {
    grid-column: 1 / -1;
}

.date-input-group {
    display: flex;
    gap: 0.5rem;
}

.date-select {
    flex: 1;
    min-width: 0;
}

.role-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.role-tag {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--text-muted);
    transition: all 0.3s ease;
    user-select: none;
}

.role-tag input[type="checkbox"] {
    display: none;
}

.role-tag:hover {
    background: rgba(147, 51, 255, 0.1);
    border-color: rgba(147, 51, 255, 0.3);
    color: #fff;
}

.role-tag.active,
.role-tag:has(input:checked) {
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.2), rgba(46, 125, 255, 0.2));
    border-color: rgba(147, 51, 255, 0.5);
    color: #fff;
    box-shadow: 0 0 10px rgba(147, 51, 255, 0.2);
}

/* ============================================
   Game Supporters Section
   ============================================ */
.supporters-section {
    padding: 6rem 0;
}

.supporters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
}

.supporter-category-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    text-align: center;
}

.game-carousel {
    display: flex;
    gap: 1rem;
    overflow: hidden;
    position: relative;
}

.supporter-card {
    min-width: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}

.supporter-card-image {
    height: 300px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.supporter-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
}

.supporter-game-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.news-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.news-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.coming-soon-badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.3), rgba(255, 0, 80, 0.3));
    border: 1px solid rgba(255, 122, 24, 0.5);
    font-size: 0.75rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: #ff9d4a;
    letter-spacing: 1px;
    z-index: 1;
}

/* ============================================
   Achievements Dynamic
   ============================================ */
.achievement.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.achievement.earned .achievement-icon {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 149, 0, 0.2));
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* ============================================
   Rating System
   ============================================ */
.rating-stars {
    display: flex;
    gap: 0.25rem;
    direction: ltr;
}

.rating-star {
    cursor: pointer;
    color: var(--text-dim);
    transition: color 0.2s;
    font-size: 1.2rem;
}

.rating-star.filled {
    color: #ffd700;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
    color: #ffd700;
}

.rating-avg {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
}

.rating-count {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.rating-review {
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.5rem;
}

.rating-review-author {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

.rating-review-text {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ============================================
   Birthday Banner
   ============================================ */
.birthday-banner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 122, 24, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    animation: birthdayPulse 3s ease-in-out infinite;
}

.birthday-banner h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    color: #ffd700;
}

@keyframes birthdayPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.25); }
}

/* ============================================
   Email Verification Banner
   ============================================ */
.verification-banner {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.verification-banner p {
    color: #ffc107;
    font-size: 0.85rem;
}

.verification-banner .btn-verify {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s;
}

.verification-banner .btn-verify:hover {
    background: rgba(255, 193, 7, 0.3);
}

/* Verification code input flow (UI simulation) */
.verify-code-wrap { width: 100%; }
.verify-code-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.verify-code-input {
    flex: 0 0 auto;
    width: 8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.05);
    color: #ffc107;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.25rem;
    text-align: center;
    direction: ltr;
}
.verify-code-input:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.15);
}
.verify-code-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.verify-code-email {
    color: #ffc107;
    font-size: 0.78rem;
    margin-top: 0.4rem;
    opacity: 0.85;
}
.verify-code-sim {
    opacity: 0.7;
    font-size: 0.72rem;
}
.verify-code-error {
    color: #ff6b6b;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}
.verify-success-msg {
    color: #4caf50;
    font-weight: 600;
    text-align: center;
    padding: 0.2rem 0;
}

/* ============================================
   WordPress Connect Button
   ============================================ */
.wp-connect-card {
    margin-top: 1.5rem;
    text-align: center;
}

.wp-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    background: rgba(33, 117, 155, 0.15);
    border: 1px solid rgba(33, 117, 155, 0.3);
    color: #21759b;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.wp-connect-btn:hover {
    background: rgba(33, 117, 155, 0.25);
    box-shadow: 0 0 15px rgba(33, 117, 155, 0.2);
}

/* ============================================
   Chat System
   ============================================ */
.chat-page {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 2rem;
}

.chat-container {
    max-width: 900px;
    margin: 0 auto;
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    background: rgba(13, 11, 31, 0.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.chat-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-admin-bar {
    display: flex;
    gap: 0.5rem;
}

.chat-admin-btn {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    font-size: 0.7rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-admin-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.chat-admin-btn.danger:hover {
    background: rgba(255, 48, 64, 0.15);
    border-color: rgba(255, 48, 64, 0.3);
    color: #ff3040;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem;
    border-radius: 8px;
    transition: background 0.2s;
}

.chat-message:hover {
    background: rgba(255, 255, 255, 0.03);
}

.chat-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

.chat-msg-content {
    flex: 1;
    min-width: 0;
}

.chat-msg-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.chat-msg-author {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

.chat-msg-author.admin {
    color: #ff9d4a;
}

.chat-msg-author.teammate {
    color: #06b6d4;
}

.chat-msg-time {
    font-size: 0.65rem;
    color: var(--text-dim);
}

.chat-msg-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: break-word;
}

.chat-msg-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-message:hover .chat-msg-actions {
    opacity: 1;
}

.chat-msg-delete {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.chat-msg-delete:hover {
    background: rgba(255, 48, 64, 0.15);
    color: #ff3040;
}

.chat-input-area {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 0.75rem;
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s;
}

.chat-input:focus {
    border-color: rgba(147, 51, 255, 0.5);
}

.chat-input::placeholder {
    color: var(--text-dim);
}

.chat-send-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    border: none;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.chat-send-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 15px rgba(255, 122, 24, 0.3);
}

.chat-login-notice {
    padding: 2rem;
    text-align: center;
    color: var(--text-dim);
}

.chat-login-notice a {
    color: var(--orange);
}

.chat-guest-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    margin: 0 0 0.75rem 0;
    background: linear-gradient(135deg, rgba(147,51,255,0.12), rgba(255,122,24,0.12));
    border: 1px solid var(--border-purple, rgba(147,51,255,0.35));
    border-radius: 10px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    cursor: pointer;
}

.chat-guest-banner:hover {
    background: linear-gradient(135deg, rgba(147,51,255,0.22), rgba(255,122,24,0.22));
    border-color: var(--purple, #9333ff);
    transform: translateY(-1px);
}

.chat-guest-banner-icon {
    font-size: 1rem;
    line-height: 1;
}

.chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Chat Layout with Sidebar */
.chat-layout {
    display: flex;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    height: calc(100vh - 160px);
}

.chat-layout .chat-container {
    flex: 1;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
}

/* Chat Sidebar */
.chat-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: rgba(13, 11, 31, 0.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-sidebar-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff9d;
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
    display: inline-block;
}

.online-count {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: #00ff9d;
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid rgba(0, 255, 157, 0.2);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
}

.chat-online-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.online-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: default;
    transition: background 0.2s;
    position: relative;
}

.online-user:hover {
    background: rgba(255, 255, 255, 0.05);
}

.online-user.is-self {
    opacity: 0.7;
}

.online-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
    flex-shrink: 0;
}

.online-user-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-dot-small {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff9d;
    flex-shrink: 0;
}

.dm-btn {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0.2rem;
}

.online-user:hover .dm-btn {
    opacity: 1;
}

.chat-sidebar-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.75rem;
}

/* Chat Tabs */
.chat-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1rem 0;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-tab {
    padding: 0.4rem 0.8rem;
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.chat-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.chat-tab.active {
    background: rgba(147, 51, 255, 0.1);
    border-color: rgba(147, 51, 255, 0.2);
    color: #fff;
}

.close-tab {
    margin-right: 0.3rem;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;
}

.close-tab:hover {
    opacity: 1;
    color: #ff3040;
}

.dm-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e5ff;
    display: inline-block;
}

/* Chat Toolbar (emoji + color) */
.chat-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem 0;
}

.chat-tool-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.chat-tool-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 122, 24, 0.3);
}

.color-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.color-picker-wrap input[type="color"] {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.color-preview {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* Emoji Picker */
.emoji-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.15rem;
    padding: 0.5rem 1.5rem;
    max-height: 120px;
    overflow-y: auto;
}

.emoji-picker.hidden {
    display: none;
}

.emoji-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.15s;
    line-height: 1;
}

.emoji-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .chat-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 160px);
    }
    .chat-sidebar {
        width: 100%;
        max-height: 150px;
    }
    .emoji-picker {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ============================================
   Forum Rules Overlay
   ============================================ */
.forum-rules-overlay {
    background: rgba(13, 11, 31, 0.95);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.forum-rules-overlay h4 {
    font-family: 'Rajdhani', sans-serif;
    color: #ffc107;
    margin-bottom: 0.75rem;
}

.forum-rules-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.forum-rules-overlay li {
    padding: 0.4rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.forum-rules-overlay li::before {
    content: '•';
    color: #ffc107;
    margin-left: 0.5rem;
    font-weight: 700;
}

/* ============================================
   Admin Role Management Modal
   ============================================ */
.role-manage-modal {
    position: fixed;
    inset: 0;
    background: rgba(3, 2, 10, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-manage-content {
    background: rgba(13, 11, 31, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
}

.role-manage-content h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
}

/* ============================================
   Nav auth spacing
   ============================================ */
.nav-auth {
    gap: 0.6rem;
}

/* ============================================
   Responsive: Registration & Supporters
   ============================================ */
/* ============================================
   User Live Section
   ============================================ */
.user-live-section {
    margin-bottom: 3rem;
}

.user-live-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.user-live-title .live-dot {
    width: 10px;
    height: 10px;
    background: #ff3040;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 48, 64, 0.5);
}

/* ============================================
   Terms Page
   ============================================ */
.terms-hero {
    padding: 10rem 0 3rem;
    text-align: center;
    position: relative;
}

.terms-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.terms-hero p {
    color: var(--text-muted);
    margin-top: 0.75rem;
    font-size: 1rem;
}

.terms-section {
    padding: 2rem 0 6rem;
}

.terms-content {
    max-width: 820px;
    margin: 0 auto;
}

.terms-block {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: rgba(13, 11, 31, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: border-color 0.3s;
}

.terms-block:hover {
    border-color: rgba(147, 51, 255, 0.2);
}

.terms-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.12), rgba(147, 51, 255, 0.12));
    border: 1px solid rgba(255, 122, 24, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ff9d4a;
}

.terms-body h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
}

.terms-body h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--orange-light, #ffa542);
    margin: 1.25rem 0 0.5rem;
}

.terms-body p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.terms-subtitle {
    font-size: 0.8rem !important;
    color: var(--text-dim) !important;
    font-style: italic;
}

.terms-body ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.terms-body li {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    padding-right: 1.2rem;
    position: relative;
}

.terms-body li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.7rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a18, #9333ff);
}

.terms-divider {
    text-align: center;
    margin: 3.5rem 0;
    position: relative;
}

.terms-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 24, 0.3), rgba(147, 51, 255, 0.3), transparent);
}

.terms-divider span {
    position: relative;
    background: var(--bg-dark, #060514);
    padding: 0 1.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff9d4a;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .terms-block {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem;
    }
    .terms-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
    }
}

/* ============================================
   Online Status Badge
   ============================================ */
.online-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #00ff9d;
    background: rgba(0, 255, 157, 0.1);
    border: 1px solid rgba(0, 255, 157, 0.2);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    vertical-align: middle;
    margin-right: 0.5rem;
    letter-spacing: 0.5px;
}

.online-status-badge .online-dot {
    width: 6px;
    height: 6px;
}

/* ============================================
   Nav User Dropdown (opens LEFT)
   ============================================ */
.nav-user-wrap {
    position: relative;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 180px;
    background: rgba(13, 11, 31, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 2000;
    padding: 0.4rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.user-dropdown.hidden {
    display: none;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: 'Heebo', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: right;
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.user-dropdown-item svg {
    flex-shrink: 0;
    color: var(--text-dim);
}

/* ============================================
   Clickable Usernames
   ============================================ */
.clickable-user {
    cursor: pointer;
    transition: color 0.2s;
}

.clickable-user:hover {
    color: var(--orange, #ff7a18) !important;
    text-decoration: underline;
}

/* ============================================
   User Profile Popup
   ============================================ */
.user-profile-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 2, 10, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.user-profile-popup {
    background: rgba(13, 11, 31, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.popup-close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.popup-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 auto 1rem;
    box-shadow: 0 0 0 3px rgba(147, 51, 255, 0.4), 0 0 20px rgba(147, 51, 255, 0.2);
}

.popup-username {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.popup-roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.popup-rating-display {
    margin-bottom: 1.25rem;
}

.popup-rating-display .rating-stars {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.popup-rate-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.popup-rate-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.popup-rate-stars {
    font-size: 1.6rem !important;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.popup-rate-stars .rating-star {
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.popup-rate-stars .rating-star:hover {
    transform: scale(1.2);
}

.popup-rate-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1.5rem;
}

/* ============================================
   Logo Text Shard Effect
   ============================================ */
.logo-text-shard {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.22, 1.3, 0.36, 1);
}

.logo-text-shard.ts1 { background: rgba(255, 122, 24, 0.15); clip-path: polygon(0 0, 30% 0, 15% 50%); }
.logo-text-shard.ts2 { background: rgba(147, 51, 255, 0.15); clip-path: polygon(30% 0, 60% 0, 45% 60%); }
.logo-text-shard.ts3 { background: rgba(46, 125, 255, 0.15); clip-path: polygon(60% 0, 100% 0, 80% 40%); }
.logo-text-shard.ts4 { background: rgba(255, 122, 24, 0.12); clip-path: polygon(0 50%, 25% 100%, 0 100%); }
.logo-text-shard.ts5 { background: rgba(147, 51, 255, 0.12); clip-path: polygon(25% 60%, 55% 100%, 20% 100%); }
.logo-text-shard.ts6 { background: rgba(46, 125, 255, 0.12); clip-path: polygon(55% 40%, 100% 100%, 60% 100%); }
.logo-text-shard.ts7 { background: rgba(255, 0, 80, 0.1); clip-path: polygon(80% 0, 100% 30%, 90% 60%); }
.logo-text-shard.ts8 { background: rgba(0, 229, 255, 0.1); clip-path: polygon(15% 20%, 40% 40%, 10% 70%); }
.logo-text-shard.ts9 { background: rgba(255, 215, 0, 0.08); clip-path: polygon(45% 30%, 70% 50%, 35% 80%); }
.logo-text-shard.ts10 { background: rgba(255, 122, 24, 0.1); clip-path: polygon(70% 20%, 95% 50%, 65% 70%); }
.logo-text-shard.ts11 { background: rgba(147, 51, 255, 0.1); clip-path: polygon(10% 0, 50% 20%, 30% 45%); }
.logo-text-shard.ts12 { background: rgba(46, 125, 255, 0.1); clip-path: polygon(50% 50%, 100% 70%, 70% 100%); }

.logo:hover .logo-text-shard {
    opacity: 1;
}
.logo:hover .logo-text-shard.ts1 { transform: translate(-15px, -10px) rotate(-15deg); }
.logo:hover .logo-text-shard.ts2 { transform: translate(5px, -18px) rotate(10deg); }
.logo:hover .logo-text-shard.ts3 { transform: translate(18px, -8px) rotate(20deg); }
.logo:hover .logo-text-shard.ts4 { transform: translate(-12px, 15px) rotate(-20deg); }
.logo:hover .logo-text-shard.ts5 { transform: translate(8px, 12px) rotate(15deg); }
.logo:hover .logo-text-shard.ts6 { transform: translate(15px, 10px) rotate(-10deg); }
.logo:hover .logo-text-shard.ts7 { transform: translate(20px, -5px) rotate(25deg); }
.logo:hover .logo-text-shard.ts8 { transform: translate(-8px, 8px) rotate(-12deg); }
.logo:hover .logo-text-shard.ts9 { transform: translate(3px, -14px) rotate(8deg); }
.logo:hover .logo-text-shard.ts10 { transform: translate(12px, 6px) rotate(-18deg); }
.logo:hover .logo-text-shard.ts11 { transform: translate(-10px, -12px) rotate(22deg); }
.logo:hover .logo-text-shard.ts12 { transform: translate(10px, 14px) rotate(-15deg); }

.logo:hover .logo-text,
.logo:hover .logo-sub {
    opacity: 0.7;
    filter: blur(0.5px);
    transition: all 0.4s ease;
}

@media (max-width: 768px) {
    .register-grid {
        grid-template-columns: 1fr;
    }
    .supporters-grid {
        grid-template-columns: 1fr;
    }
    .notif-dropdown {
        width: 280px;
        left: -100px;
    }
    .live-modal {
        margin: 1rem;
    }
}

/* ============================================
   ADMIN PANEL (admin.html) + SYSTEM MESSAGES
   ============================================ */
.admin-shell { padding: 7rem 2rem 3rem; max-width: 1400px; min-height: calc(100vh - 200px); }

.admin-denied { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 2rem; }
.admin-denied-card { background: var(--bg-card); border: 1px solid var(--border); padding: 3rem 2.5rem; border-radius: 18px; text-align: center; max-width: 420px; }
.admin-denied-card svg { color: var(--orange); margin-bottom: 1rem; }
.admin-denied-card h1 { font-size: 1.8rem; margin-bottom: 0.6rem; color: var(--text); }
.admin-denied-card p { color: var(--text-muted); margin-bottom: 1.6rem; }

.admin-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.admin-title { display: flex; align-items: center; gap: 0.7rem; font-size: 1.7rem; background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 0.3rem; }
.admin-title svg { color: var(--orange); }
.admin-subtitle { color: var(--text-muted); font-size: 0.9rem; }
.admin-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.admin-tab { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 0.7rem 1.1rem; font-family: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; border-radius: 10px 10px 0 0; transition: all 0.2s; position: relative; }
.admin-tab:hover { color: var(--text); background: rgba(147, 51, 255, 0.06); }
.admin-tab.active { color: var(--text); background: var(--bg-card); border-color: var(--border); border-bottom-color: var(--bg-card); }
.admin-tab.active::after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--orange); border-radius: 10px 10px 0 0; pointer-events: none; }

.admin-section { display: none; }
.admin-section.active { display: block; }

.admin-section-head { margin-bottom: 1.2rem; }
.admin-section-head h2 { font-size: 1.3rem; color: var(--text); margin: 0 0 0.3rem; }
.admin-section-head p { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

.admin-subhead { font-size: 1rem; color: var(--orange); margin: 1.8rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-soft); }

.admin-toolbar { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }

.admin-input { flex: 1; min-width: 180px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.92rem; padding: 0.7rem 1rem; border-radius: 10px; transition: border-color 0.2s; }
.admin-input:focus { outline: none; border-color: var(--purple); }
.admin-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.admin-label { display: block; color: var(--text-muted); font-size: 0.82rem; margin: 0.7rem 0 0.3rem; font-weight: 500; }
.admin-hint { color: var(--text-dim); font-size: 0.82rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.admin-stat { background: var(--bg-card); border: 1px solid var(--border); padding: 1rem 1.2rem; border-radius: 12px; }
.admin-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--orange); margin-bottom: 0.2rem; font-family: Rajdhani, sans-serif; }
.admin-stat-label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }

.admin-list { display: flex; flex-direction: column; gap: 0.6rem; }

.admin-row { background: var(--bg-card); border: 1px solid var(--border-soft); padding: 0.9rem 1rem; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: border-color 0.2s; flex-wrap: wrap; }
.admin-row:hover { border-color: var(--border); }
.admin-empty { background: var(--bg-card); border: 1px dashed var(--border-soft); color: var(--text-dim); padding: 1.5rem; text-align: center; border-radius: 12px; }
.admin-empty.small { padding: 0.8rem; font-size: 0.85rem; }

.admin-btn { background: var(--bg-light); border: 1px solid var(--border); color: var(--text); padding: 0.5rem 0.85rem; border-radius: 8px; font-family: inherit; font-size: 0.82rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.admin-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--text); background: rgba(147, 51, 255, 0.1); }
.admin-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-btn.primary { background: linear-gradient(135deg, var(--orange), var(--purple)); border-color: transparent; }
.admin-btn.primary:hover:not(:disabled) { filter: brightness(1.15); }
.admin-btn.danger { border-color: rgba(255, 80, 112, 0.35); color: #ff7080; }
.admin-btn.danger:hover:not(:disabled) { background: rgba(255, 80, 112, 0.12); color: #ff90a0; border-color: #ff7080; }
.admin-btn.success { border-color: rgba(80, 220, 140, 0.35); color: #70e0a0; }
.admin-btn.success:hover:not(:disabled) { background: rgba(80, 220, 140, 0.12); color: #80ffb0; }
.admin-btn.tiny { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

.user-row-main { display: flex; align-items: center; gap: 0.9rem; flex: 1; min-width: 240px; }
.user-row-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--purple)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-family: Rajdhani, sans-serif; font-size: 1.2rem; flex-shrink: 0; }
.user-row-info { min-width: 0; flex: 1; }
.user-row-name { display: flex; align-items: center; gap: 0.4rem; color: var(--text); font-weight: 600; flex-wrap: wrap; margin-bottom: 0.2rem; }
.user-row-meta { color: var(--text-muted); font-size: 0.82rem; }
.user-row-meta.small { color: var(--text-dim); font-size: 0.72rem; margin-top: 0.2rem; }
.user-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.u-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 20px; line-height: 1; white-space: nowrap; }
.u-tag.active { background: rgba(80, 220, 140, 0.12); color: #70e0a0; border: 1px solid rgba(80, 220, 140, 0.3); }
.u-tag.blocked { background: rgba(255, 160, 50, 0.12); color: #ffb060; border: 1px solid rgba(255, 160, 50, 0.3); }
.u-tag.banned { background: rgba(255, 80, 112, 0.12); color: #ff7080; border: 1px solid rgba(255, 80, 112, 0.35); }
.u-tag.muted { background: rgba(147, 51, 255, 0.12); color: #b080ff; border: 1px solid rgba(147, 51, 255, 0.35); }
.u-tag.warn { background: rgba(255, 220, 50, 0.1); color: #ffd060; border: 1px solid rgba(255, 220, 50, 0.3); }
.u-tag.admin { background: linear-gradient(135deg, var(--orange), var(--purple)); color: white; border: 0; }
.u-tag.editor { background: rgba(0, 229, 255, 0.12); color: var(--cyan); border: 1px solid rgba(0, 229, 255, 0.35); }

.content-group { margin-bottom: 1.8rem; }
.content-group-title { font-size: 1rem; color: var(--orange); margin: 0.8rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.content-item { background: var(--bg-card); border: 1px solid var(--border-soft); padding: 0.9rem 1rem; border-radius: 12px; margin-bottom: 0.6rem; }
.content-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.6rem; flex-wrap: wrap; }
.content-item-label { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.content-item-key { color: var(--text-dim); font-size: 0.72rem; font-family: monospace; direction: ltr; }
.content-item-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.55rem; gap: 0.5rem; flex-wrap: wrap; }
.content-item-actions { display: flex; gap: 0.35rem; }
.content-item-flag { font-size: 0.72rem; color: var(--orange); background: rgba(255, 122, 24, 0.1); padding: 0.25rem 0.6rem; border-radius: 12px; border: 1px solid rgba(255, 122, 24, 0.25); }
.content-item-flag.default { color: var(--text-dim); background: transparent; border-color: var(--border-soft); }

.content-image-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.content-image-preview { width: 180px; height: 110px; background: var(--bg-dark); border: 1px solid var(--border-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.content-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.preview-empty { color: var(--text-dim); font-size: 0.78rem; }
.content-image-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.gallery-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.gallery-group { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 1.2rem; }
.gallery-group h3 { color: var(--text); margin: 0 0 0.8rem; font-size: 1.1rem; }
.gallery-upload { display: block; border: 2px dashed var(--border); border-radius: 10px; padding: 0.9rem; text-align: center; cursor: pointer; color: var(--text-muted); transition: all 0.15s; margin-bottom: 0.9rem; }
.gallery-upload:hover { border-color: var(--purple); color: var(--text); background: rgba(147, 51, 255, 0.04); }
.gallery-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.gallery-item { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-remove { position: absolute; bottom: 6px; left: 6px; background: rgba(0, 0, 0, 0.7); color: white; border: 0; padding: 0.25rem 0.55rem; border-radius: 6px; font-size: 0.7rem; cursor: pointer; }
.gallery-remove:hover { background: rgba(255, 80, 112, 0.8); }

.forum-row-main { flex: 1; min-width: 260px; }
.forum-row-head { display: flex; gap: 0.6rem; align-items: center; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.3rem; flex-wrap: wrap; }
.forum-row-cat { background: rgba(147, 51, 255, 0.15); color: var(--purple-light); padding: 0.15rem 0.5rem; border-radius: 10px; }
.forum-row-author { color: var(--cyan); }
.forum-row-title { color: var(--text); font-weight: 600; margin-bottom: 0.3rem; }
.forum-row-body { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.forum-row-stats { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.4rem; }
.forum-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.blog-row-main { flex: 1; min-width: 260px; }
.blog-row-tag { display: inline-block; background: linear-gradient(135deg, var(--orange), var(--purple)); color: white; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 10px; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-row-title { color: var(--text); font-weight: 600; margin-bottom: 0.3rem; }
.blog-row-desc { color: var(--text-muted); font-size: 0.85rem; }
.blog-row-date { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.3rem; }
.blog-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.admin-row.hidden-row { opacity: 0.55; }

.broadcast-form { background: var(--bg-card); border: 1px solid var(--border); padding: 1.3rem; border-radius: 14px; }
.broadcast-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; flex-wrap: wrap; gap: 0.6rem; }
.broadcast-row-main { flex: 1; min-width: 240px; }
.broadcast-row-title { color: var(--text); font-weight: 600; margin-bottom: 0.25rem; }
.broadcast-row-body { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.broadcast-row-meta { color: var(--text-dim); font-size: 0.72rem; margin-top: 0.3rem; }

.role-suggest { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
.role-suggest-row { background: var(--bg-card); border: 1px solid var(--border-soft); padding: 0.55rem 0.8rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.warnings-list { background: var(--bg-dark); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.6rem; margin-bottom: 0.6rem; max-height: 220px; overflow-y: auto; }
.warn-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.warn-item:last-child { border-bottom: 0; }
.warn-date { color: var(--text-dim); font-size: 0.75rem; }
.warn-reason { color: var(--text-muted); font-size: 0.85rem; flex: 1; min-width: 120px; }

.admin-modal-overlay { position: fixed; inset: 0; background: rgba(3, 2, 10, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; }
.admin-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; max-width: 640px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px var(--purple-glow); }
.modal-head { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; color: var(--text); font-size: 1.15rem; }
.modal-close { background: transparent; border: 0; color: var(--text-muted); font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0; width: 32px; height: 32px; border-radius: 50%; }
.modal-close:hover { background: rgba(255, 80, 112, 0.12); color: #ff7080; }
.modal-body { padding: 1.1rem 1.3rem; overflow-y: auto; flex: 1; }
.modal-foot { padding: 1rem 1.3rem; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 0.5rem; }

/* FIX D.4.4 — Modal sub-tabs (used inside game edit modal) */
.modal-subtabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.modal-subtab { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; border-radius: 8px 8px 0 0; transition: all 0.2s; position: relative; }
.modal-subtab:hover { color: var(--text); background: rgba(147, 51, 255, 0.08); }
.modal-subtab.active { color: var(--text); background: var(--bg-dark); border-color: var(--border-soft); border-bottom-color: var(--bg-dark); }
.modal-subtab.active::after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--orange); border-radius: 8px 8px 0 0; pointer-events: none; }

.modal-subpanel { display: none; }
.modal-subpanel.active { display: block; }

/* FIX D.4.4 — Dynamic list (tips, keyFeatures) */
.dyn-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.dyn-list-item { display: flex; gap: 0.4rem; align-items: stretch; }
.dyn-list-item .admin-input { flex: 1; min-width: 0; }
.dyn-list-remove { background: transparent; border: 1px solid rgba(255, 80, 112, 0.35); color: #ff7080; padding: 0 0.7rem; border-radius: 8px; cursor: pointer; font-size: 0.95rem; transition: all 0.15s; line-height: 1; }
.dyn-list-remove:hover { background: rgba(255, 80, 112, 0.12); }
.dyn-list-add { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); padding: 0.55rem 0.9rem; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 0.85rem; transition: all 0.2s; align-self: flex-start; margin-top: 0.5rem; }
.dyn-list-add:hover { border-color: var(--purple); color: var(--text); background: rgba(147, 51, 255, 0.06); }

/* FIX D.4.4 — Screenshots grid in modal */
.screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; margin-top: 0.4rem; }
.screenshot-card { background: var(--bg-dark); border: 1px solid var(--border-soft); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.screenshot-card-preview { aspect-ratio: 16/9; border-radius: 6px; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.3); }
.screenshot-card-meta { font-size: 0.72rem; color: var(--text-dim); text-align: center; }
.screenshot-card-remove { background: transparent; border: 1px solid rgba(255, 80, 112, 0.35); color: #ff7080; padding: 0.3rem 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.75rem; transition: all 0.15s; }
.screenshot-card-remove:hover { background: rgba(255, 80, 112, 0.12); }

.screenshot-add-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.screenshot-url-input { flex: 1; min-width: 200px; }

/* FIX D.4.4 — Color pickers row + platforms checkboxes */
.color-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; margin-top: 0.4rem; }
.color-field { display: flex; flex-direction: column; gap: 0.3rem; }
.color-field > span { color: var(--text-muted); font-size: 0.78rem; }
.color-field input[type="color"] { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; }
.color-field .icon-input { width: 70px; text-align: center; font-size: 1.1rem; min-width: 70px; }

.platforms-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.platforms-row > label { display: flex; gap: 0.4rem; align-items: center; cursor: pointer; color: var(--text); font-size: 0.9rem; }
.platforms-row input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

.reply-admin-row { background: var(--bg-dark); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.5rem; }
.reply-admin-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; }
.reply-admin-head strong { color: var(--cyan); }
.reply-admin-head span { color: var(--text-dim); }
.reply-admin-row textarea { margin-bottom: 0.4rem; min-height: 70px; }

.nav-admin-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; background: linear-gradient(135deg, var(--orange), var(--purple)); color: white !important; border-radius: 8px; font-weight: 600; font-size: 0.85rem; text-decoration: none; box-shadow: 0 0 20px rgba(255, 122, 24, 0.35); transition: transform 0.2s; }
.nav-admin-link:hover { transform: translateY(-1px); filter: brightness(1.1); }

.sys-msg-overlay { position: fixed; inset: 0; background: rgba(3, 2, 10, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.sys-msg-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px var(--orange-glow); overflow: hidden; }
.sys-msg-head { padding: 1.2rem 1.3rem; display: flex; gap: 0.9rem; align-items: center; border-bottom: 1px solid var(--border-soft); background: linear-gradient(135deg, rgba(255, 122, 24, 0.12), rgba(147, 51, 255, 0.08)); }
.sys-msg-icon { font-size: 1.8rem; line-height: 1; }
.sys-msg-head > div:not(.sys-msg-icon) { flex: 1; }
.sys-msg-head h3 { margin: 0 0 0.2rem; color: var(--text); font-size: 1.15rem; }
.sys-msg-date { color: var(--text-dim); font-size: 0.78rem; }
.sys-msg-close { background: transparent; border: 0; color: var(--text-muted); font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.sys-msg-close:hover { background: rgba(255, 80, 112, 0.12); color: #ff7080; }
.sys-msg-body { padding: 1.5rem 1.3rem; color: var(--text); line-height: 1.7; font-size: 0.95rem; max-height: 60vh; overflow-y: auto; white-space: pre-wrap; }
.sys-msg-foot { padding: 1rem 1.3rem; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 0.82rem; }

.notif-item.clickable { cursor: pointer; }
.notif-item.clickable:hover { background: rgba(147, 51, 255, 0.08); }

@media (max-width: 768px) {
    .admin-shell { padding: 6rem 1rem 2rem; }
    .gallery-groups { grid-template-columns: 1fr; }
    .admin-header { flex-direction: column; align-items: stretch; }
    .admin-row { flex-direction: column; align-items: stretch; }
    .user-row-actions, .forum-row-actions, .blog-row-actions { justify-content: flex-start; }
}

/* ============================================
   Blog/Updates — publish form, modal, show-all
   ============================================ */
.blog-publish-section { padding: 2rem 0 1rem; }
.blog-publish-section .post-form h3 { color: var(--cyan); }

.blog-image-upload { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.blog-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(46, 125, 255, 0.08);
    border: 1px dashed rgba(46, 125, 255, 0.4);
    border-radius: 8px;
    color: var(--cyan);
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    width: fit-content;
    transition: background 0.15s, border-color 0.15s;
}
.blog-image-btn:hover { background: rgba(46, 125, 255, 0.15); border-color: var(--cyan); }
.blog-image-btn svg { width: 18px; height: 18px; }
.blog-image-preview {
    width: 100%;
    max-width: 360px;
    height: 160px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.blog-image-clear {
    background: rgba(255, 80, 112, 0.08);
    border: 1px solid rgba(255, 80, 112, 0.3);
    color: #ff7080;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    width: fit-content;
}
.blog-image-clear:hover { background: rgba(255, 80, 112, 0.15); }

.blog-card.clickable { cursor: pointer; }
.blog-card.user-post .blog-tag {
    background: linear-gradient(135deg, rgba(46, 125, 255, 0.2), rgba(147, 51, 255, 0.2));
    color: var(--cyan);
    border-color: rgba(46, 125, 255, 0.4);
}

.blog-show-all-wrap {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.blog-show-all-wrap[hidden] { display: none; }

/* Modal */
.blog-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 12, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: blogModalFade 0.2s ease-out;
}
.blog-modal[hidden] { display: none; }
@keyframes blogModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.blog-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 820px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.blog-modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-main);
    z-index: 1;
}
.blog-modal-close {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.blog-modal-close:hover { background: rgba(255, 80, 112, 0.35); }
.blog-modal-img {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2a;
    flex-shrink: 0;
}
.blog-modal-content {
    padding: 1.8rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
}
.blog-modal-content .blog-tag {
    display: inline-block;
    margin-bottom: 1rem;
}
.blog-modal-content h2 {
    font-family: 'Rajdhani', 'Heebo', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 0.8rem;
    color: var(--text);
    line-height: 1.25;
}
.blog-modal-meta {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.blog-modal-body {
    color: var(--text);
    line-height: 1.8;
    font-size: 0.98rem;
}
.blog-modal-body p { margin: 0 0 1rem; }
.blog-modal-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
}
.btn-modal-del {
    background: rgba(255, 80, 112, 0.08);
    border: 1px solid rgba(255, 80, 112, 0.3);
    color: #ff7080;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.btn-modal-del:hover { background: rgba(255, 80, 112, 0.2); }
.btn-modal-like {
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.btn-modal-like:hover {
    color: #ff7080;
    border-color: rgba(255, 80, 112, 0.3);
}
.btn-modal-like.is-liked {
    color: #ff5070;
    background: rgba(255, 80, 112, 0.12);
    border-color: rgba(255, 80, 112, 0.3);
    cursor: default;
}
.btn-modal-like.is-liked svg {
    fill: currentColor;
}

@media (max-width: 768px) {
    .blog-modal { padding: 0.5rem; }
    .blog-modal-box { max-height: 95vh; }
    .blog-modal-img { height: 180px; }
    .blog-modal-content { padding: 1.2rem 1rem 1.5rem; }
    .blog-modal-content h2 { font-size: 1.4rem; }
}

/* ============================================
   v14 Updates
   ============================================ */

/* Nav live dot */

.nav-links li a


/* Supporter card images */
.supporter-card-image { position:relative;height:220px;overflow:hidden;border-radius:12px; }
.supporter-card-image img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease; }
.supporter-card:hover .supporter-card-image img { transform:scale(1.05); }
.supporter-card-overlay { position:absolute;inset:0;background:linear-gradient(to top, rgba(6,5,20,0.85) 0%, rgba(6,5,20,0.2) 60%, transparent 100%);z-index:1; }
.supporter-game-name { position:absolute;bottom:1rem;right:1rem;left:1rem;font-family:'Rajdhani',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:0.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.8);z-index:2; }
.coming-soon-badge { position:absolute;top:0.75rem;left:0.75rem;background:var(--gradient-main);color:#fff;padding:0.25rem 0.65rem;border-radius:20px;font-size:0.72rem;font-weight:700;z-index:2; }

/* Carousel dots */
.carousel-dots { display:flex;justify-content:center;gap:0.5rem;margin-top:1rem; }
.carousel-dot { width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:var(--transition);padding:0; }
.carousel-dot.active { background:var(--purple);transform:scale(1.35); }

/* Truck icon */
.truck-icon { background:rgba(255,122,24,0.15);border:1px solid rgba(255,122,24,0.3);color:var(--orange); }

/* News cards as links */
.news-card { display:block;text-decoration:none;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:var(--transition);cursor:pointer; }
.news-card:hover { transform:translateY(-6px);border-color:var(--border-purple);box-shadow:var(--shadow-neon); }

/* Back to top */
.back-to-top { position:fixed;bottom:2rem;left:2rem;width:48px;height:48px;border-radius:50%;background:var(--gradient-main);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;z-index:900;opacity:0;visibility:hidden;transform:translateY(12px);transition:var(--transition);box-shadow:0 4px 20px rgba(147,51,255,0.4); }
.back-to-top.visible { opacity:1;visibility:visible;transform:translateY(0); }
.back-to-top:hover { transform:translateY(-3px);box-shadow:0 8px 30px rgba(147,51,255,0.6); }

/* Hero image (replaces video) */
.hero-video-frame { border-radius:20px;overflow:hidden; }


/* ============================================================
   HERO — Full atmospheric background (no split image)
   ============================================================ */
.hero-fullbg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8rem 2rem 5rem;
    overflow: hidden;
}

.hero-fullbg-img {
    position: absolute;
    inset: 0;
    background:
        url('https://images.unsplash.com/photo-1511512578047-dfb367046420?w=1600&q=80') center/cover no-repeat;
    opacity: 0.12;
    z-index: 0;
    filter: saturate(0.4) brightness(0.6);
}

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

.hero-eyebrow {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: rgba(147,51,255,0.12);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple-light);
    margin-bottom: 1.5rem;
}

.hero-badge-wrap { margin-bottom: 0.5rem; }

.hero-content-center .hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    margin-bottom: 1.5rem;
}

.hero-content-center .hero-subtitle {
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
}

.hero-content-center .hero-cta {
    justify-content: center;
    margin-bottom: 3rem;
}

.hero-content-center .hero-stats {
    justify-content: center;
    gap: 3rem;
}

/* ============================================================
   PULSE — "מה קורה עכשיו"
   ============================================================ */
.pulse-section {
    padding: 1.5rem 0 2rem;
    position: relative;
    z-index: 1;
}

.pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 860px;
    margin: 0 auto;
}

.pulse-card {
    background: rgba(13,11,31,0.8);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: var(--transition);
    position: relative;
}

.pulse-card-online[hidden] {
    display: none;
}

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

.pulse-card:hover {
    border-color: var(--border-purple);
    transform: translateY(-2px);
}

.pulse-icon { font-size: 1.4rem; flex-shrink: 0; }

.pulse-info { flex: 1; }

.pulse-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}

.pulse-forum {
    font-size: 0.9rem !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 600 !important;
}

.pulse-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    display: block;
}

.pulse-link {
    position: absolute;
    bottom: 0.75rem;
    left: 1rem;
    font-size: 0.75rem;
    color: var(--purple-light);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.pulse-link:hover { color: var(--text); }

/* ============================================================
   GAMES — upgraded card design
   ============================================================ */
.game-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.game-item:hover {
    transform: translateY(-6px);
    border-color: var(--border-purple);
    box-shadow: var(--shadow-neon);
}

.game-item-image {
    height: 200px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.game-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.game-item:hover .game-item-image img {
    transform: scale(1.06);
}

.game-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,5,20,0.9) 0%, transparent 55%);
    pointer-events: none;
}

.game-item-cat-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
}

.badge-sim    { background: rgba(255,122,24,0.25); color: #ffb060; }
.badge-shoot  { background: rgba(255,59,59,0.25);  color: #ff7070; }

.game-item-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.game-category {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    display: block;
}

.game-item-body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.game-item-body p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.game-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

.game-rating-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-stars { color: var(--gold); font-size: 0.85rem; }
.game-score { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.game-score-soon { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); font-style: italic; opacity: 0.85; }

.game-rate-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.game-rate-btn:hover { border-color: var(--gold); color: var(--gold); }
.game-rate-btn.rated { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); }

.steam-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.steam-link:hover {
    background: rgba(147,51,255,0.15);
    border-color: var(--purple);
    color: var(--text);
}

/* Rating modal */
.rating-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-tri);
}

.rating-modal h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.rating-modal p  { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.5rem; }

.rating-stars-pick {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.rating-stars-pick .star-pick {
    font-size: 2rem;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s;
    line-height: 1;
}

.rating-stars-pick .star-pick.lit { color: var(--gold); }

/* ============================================================
   ABOUT — read more
   ============================================================ */
.about-text-preview { margin-bottom: 0.75rem; }

/* ============================================================
   CHAT — upgraded wrapper
   ============================================================ */
.chat-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - 80px);
    margin-top: 80px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.chat-sidebar-inner {
    background: rgba(13,11,31,0.95);
    border-left: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-sidebar-head {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-sidebar-head h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chat-online-count {
    font-size: 0.75rem;
    color: #00e676;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.chat-users-list { flex: 1; overflow-y: auto; padding: 0.5rem; }

.chat-user-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.chat-user-row:hover { background: rgba(147,51,255,0.1); }

.chat-user-row[data-username] { cursor: context-menu; }

.chat-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
    position: relative;
}

.chat-av-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    border: 2px solid var(--bg-card);
}

.chat-user-name-row { font-size: 0.86rem; font-weight: 600; }
.chat-user-role-row { font-size: 0.7rem; color: var(--text-muted); }

.chat-main-inner {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    overflow: hidden;
}

.chat-main-head {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(13,11,31,0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.chat-main-head h2 { font-size: 1rem; font-weight: 700; }
.chat-main-head p  { font-size: 0.78rem; color: var(--text-muted); }

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.chat-bubble {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    animation: bubbleIn 0.2s ease;
}

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

.chat-bubble-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-bubble-body { flex: 1; }

.chat-bubble-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.chat-bubble-author {
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
}

.chat-bubble-author:hover { color: var(--purple-light); }

.chat-bubble-time { font-size: 0.68rem; color: var(--text-dim); }

.chat-bubble-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-radius: 0 10px 10px 10px;
    padding: 0.5rem 0.85rem;
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--border-soft);
}

.chat-input-bar {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: rgba(13,11,31,0.6);
}

.chat-input-field {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 25px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    direction: rtl;
    transition: var(--transition);
    resize: none;
}

.chat-input-field:focus { outline: none; border-color: var(--purple); background: rgba(147,51,255,0.06); }
.chat-input-field:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-main);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: var(--transition);
    flex-shrink: 0;
}

.chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 15px rgba(147,51,255,0.4); }

/* ============================================================
   DASHBOARD — upgrades
   ============================================================ */
.dash-social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.dash-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.dash-social-link:hover { border-color: var(--purple); color: var(--purple-light); }

.dash-about-user {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 0.85rem;
    border: 1px solid var(--border-soft);
    cursor: pointer;
    transition: var(--transition);
    min-height: 60px;
}

.dash-about-user:hover { border-color: var(--border-purple); }
.dash-about-user[contenteditable="true"] { outline: none; border-color: var(--purple); }

.recent-activity-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    font-size: 0.83rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.recent-activity-icon { font-size: 1rem; flex-shrink: 0; }
.recent-activity-time { font-size: 0.7rem; color: var(--text-dim); margin-right: auto; white-space: nowrap; }

/* PM thread */
.pm-compose-btn {
    width: 100%;
    padding: 0.6rem;
    background: rgba(147,51,255,0.1);
    border: 1px solid var(--border-purple);
    border-radius: 10px;
    color: var(--purple-light);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    margin-bottom: 1rem;
}

.pm-compose-btn:hover { background: rgba(147,51,255,0.2); }

/* Status input limit */
.status-char-count { font-size: 0.7rem; color: var(--text-dim); text-align: left; margin-top: 0.2rem; }

/* ============================================================
   Responsive additions
   ============================================================ */
@media (max-width: 768px) {
    .pulse-grid { grid-template-columns: 1fr; }
    .chat-shell { grid-template-columns: 1fr; }
    .chat-sidebar-inner { display: none; }
}

/* ============================================================
   FONT — Bebas Neue לכותרות (professional gaming font)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

h1, h2, h3,
.hero-title,
.section-title,
.elite-title,
.podium-name,
.supporter-game-name,
.footer-col h4,
.auth-title,
.dash-info h1 {
    font-family: 'Rubik', 'Heebo', sans-serif !important;
    letter-spacing: 0.04em;
}

/* Subtitles, body, labels — Heebo נשאר */
p, label, span, a, button, input, select, textarea,
.hero-subtitle, .section-desc, .about-text,
.form-label, .nav-links a, .footer-col a,
.auth-subtitle, .stream-title {
    font-family: 'Heebo', 'Rubik', sans-serif;
}

/* ============================================================
   LOGO — נקי, גלו, ללא shards
   ============================================================ */
.logo-shard,
.logo-text-shard { display: none !important; }

.logo-icon svg {
    filter: drop-shadow(0 0 10px rgba(147,51,255,0.55));
    transition: filter 0.3s ease;
}
.logo:hover .logo-icon svg {
    filter: drop-shadow(0 0 18px rgba(147,51,255,0.85))
            drop-shadow(0 0 6px rgba(255,122,24,0.45));
}
.logo-text {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(147,51,255,0.45));
    transition: filter 0.3s ease;
}
.logo:hover .logo-text {
    filter: drop-shadow(0 0 12px rgba(147,51,255,0.75));
}
.logo-sub {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: var(--gold) !important;
    text-transform: uppercase;
}

/* ============================================================
   PULSE / מחוברים עכשיו — לחיץ
   ============================================================ */
.pulse-card { cursor: pointer; }
.pulse-card:hover {
    border-color: var(--border-purple);
    transform: translateY(-3px);
    box-shadow: var(--shadow-neon);
}

/* ============================================================
   SUPPORTER CARDS — equal height, centered image
   ============================================================ */
.supporter-card-image {
    position: relative;
    overflow: hidden;
    height: 100% !important;
    min-height: 0 !important;
}
.supporter-card-image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}
.supporter-card-image > div { position: absolute; inset: 0; }
.supporter-card-image .supporter-game-name {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.coming-soon-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
}

/* Modal — רשימת מחוברים */
.online-users-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.online-users-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 2rem;
    width: min(92vw, 900px);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-tri);
    display: flex;
    flex-direction: column;
}

/* User list grid - auto-expands to show all users */
#onlineUsersList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Each row adapts to grid cell */
.online-user-row {
    min-width: 0;
}

.online-user-row .online-user-name,
.online-user-row .online-user-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar for the modal */
.online-users-modal::-webkit-scrollbar { width: 8px; }
.online-users-modal::-webkit-scrollbar-track { background: transparent; }
.online-users-modal::-webkit-scrollbar-thumb { background: var(--border-purple); border-radius: 4px; }

/* Category separator (online / offline) */
.online-users-section {
    grid-column: 1 / -1;
    padding: 0.5rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-soft);
    margin-top: 0.5rem;
}
.online-users-section:first-child { margin-top: 0; }
.online-users-section.online-sect { color: #00e676; }
.online-users-section.offline-sect { color: #ff8a8a; }

@media (max-width: 600px) {
    .online-users-modal {
        width: 94vw;
        padding: 1.25rem;
    }
    #onlineUsersList {
        grid-template-columns: 1fr;
    }
}
.online-users-modal h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
.online-user-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft);
    transition: var(--transition);
}
.online-user-row:hover {
    background: rgba(147, 51, 255, 0.12);
    border-color: var(--border-purple);
    transform: translateY(-1px);
}
.online-user-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.online-user-name { font-size: 0.9rem; font-weight: 600; }
.online-user-role { font-size: 0.72rem; color: var(--text-muted); }
.online-dot-sm {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00e676;
    flex-shrink: 0;
    animation: onlinePulse 2s ease-in-out infinite;
}


/* ============================================================
   LOGO — Realistic glass crack (single line across icon+text)
   ============================================================ */
.logo { position: relative; }

.logo-crack-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 3px rgba(147,51,255,0.6));
}

.logo-crack-main {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: crackDraw 2.5s ease-out 0.5s forwards,
               crackGlow 4s ease-in-out 3s infinite;
}

.logo-crack-branch {
    opacity: 0;
    animation: crackBranchFade 1.5s ease-out 2.2s forwards;
}

@keyframes crackDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes crackBranchFade {
    to { opacity: 1; }
}

@keyframes crackGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(147,51,255,0.4)); }
    50%      { filter: drop-shadow(0 0 6px rgba(255,122,24,0.7)); }
}

.logo:hover .logo-crack-main {
    animation: crackGlow 1s ease-in-out infinite;
}


/* ============================================================
   SUPPORTER CARDS — custom poster style, emphasized frame
   ============================================================ */
.supporters-section {
    padding: 5rem 0;
    position: relative;
}

.supporters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

.supporter-column {
    background: linear-gradient(145deg, rgba(147,51,255,0.06) 0%, rgba(13,11,31,0.4) 100%);
    border: 1px solid var(--border-purple);
    border-radius: 24px;
    padding: 1.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

.supporter-column::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(147,51,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.supporter-column h3.supporter-category-title {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.game-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-carousel {
    flex: 1;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 3/4;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.supporter-card {
    display: none;
    width: 100%;
    height: 100%;
}

.supporter-card.active {
    display: block;
    animation: posterFade 0.45s ease;
}

@keyframes posterFade {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

.supporter-card-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.supporter-card-link:hover {
    transform: scale(1.02);
}

.game-poster-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.supporter-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(6,5,20,0.92) 0%,
        rgba(6,5,20,0.3) 45%,
        transparent 75%);
    pointer-events: none;
}

.supporter-card-content {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.supporter-game-sub {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

.supporter-game-name {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}

.coming-soon-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    padding: 0.35rem 0.85rem;
    background: rgba(255,122,24,0.9);
    color: #fff;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(255,122,24,0.4);
}

/* Carousel arrows */
.carousel-arrow {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(147,51,255,0.15);
    border: 1px solid var(--border-purple);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
}

.carousel-arrow:hover {
    background: rgba(147,51,255,0.3);
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(147,51,255,0.3);
}

/* Carousel dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1rem;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.carousel-dot.active {
    background: var(--purple);
    transform: scale(1.35);
    box-shadow: 0 0 10px rgba(147,51,255,0.6);
}

/* Responsive */
@media (max-width: 900px) {
    .supporters-grid { grid-template-columns: 1fr; }
    .supporter-game-name { font-size: 1.5rem; }
}

/* Old shard system fully disabled — replaced by logo-crack-svg */
.logo-shard, .logo-text-shard { display: none !important; }

/* ============================================================
   LIVE NAV LINK — identical to other nav buttons
   Only add the red dot; everything else inherits from .nav-links a
   ============================================================ */
.nav-links a.nav-live-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b3b;
    flex-shrink: 0;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255,59,59,0.6);
}


/* ============================================================
   GAME PAGE — individual game page styles
   ============================================================ */
.game-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.game-hero-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.game-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,5,20,0.95) 0%, rgba(6,5,20,0.4) 50%, transparent 100%);
    z-index: 1;
}

.game-hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    width: 100%;
}

.game-category-tag {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: rgba(147,51,255,0.2);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--purple-light);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.game-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.game-tagline {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-weight: 500;
}

.game-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.game-content-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5rem;
    align-items: start;
}

.game-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.game-section-title {
    font-size: 1.35rem;
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-summary {
    color: var(--text-muted);
    line-height: 1.85;
    font-size: 0.95rem;
}

.game-trailer-wrap {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.game-trailer-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.game-tips-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.game-tip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.game-tip-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient-main);
    color: #fff;
    font-weight: 900;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* FIX D.4.4 — Game private page: screenshots gallery (main + thumbnails) */
.game-screenshots-main {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-dark);
    cursor: zoom-in;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border-soft);
}
.game-screenshots-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.game-screenshots-main:hover img {
    transform: scale(1.02);
}
.game-screenshots-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.game-screenshots-thumb {
    flex: 1 1 0;
    min-width: 80px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--bg-dark);
    padding: 0;
    transition: border-color 0.2s, transform 0.15s;
}
.game-screenshots-thumb:hover {
    transform: translateY(-2px);
}
.game-screenshots-thumb.active {
    border-color: var(--orange);
    box-shadow: 0 0 12px rgba(255,122,24,0.35);
}
.game-screenshots-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* FIX D.4.4 — Game private page: full-screen lightbox */
.game-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}
.game-lightbox-overlay.open {
    display: flex;
}
.game-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    cursor: default;
}
.game-lightbox-close {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.game-lightbox-close:hover {
    background: rgba(255,80,112,0.25);
    border-color: #ff7080;
}

/* FIX D.4.4 — Game private page: key features (✓ green) */
.game-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.game-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: rgba(80, 220, 140, 0.05);
    border: 1px solid rgba(80, 220, 140, 0.2);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}
.game-feature-check {
    color: #70e0a0;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1.2;
}

/* FIX D.4.4 — Game private page: platforms row */
.game-platforms-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.game-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
}
.game-platform-pill svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--orange);
}

/* FIX D.4.4 — Game private page: system requirements (pre-formatted) */
.game-sysreq {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: var(--text-muted);
    line-height: 1.65;
    font-size: 0.92rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 0;
}

.game-rating-card {
    position: sticky;
    top: 90px;
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 16px;
    padding: 1.75rem;
}

.game-rating-current {
    text-align: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 1.25rem;
}

.game-rating-score {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 3rem;
    line-height: 1;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-rating-stars {
    color: var(--gold);
    font-size: 1.4rem;
    margin: 0.25rem 0;
    letter-spacing: 0.15em;
}

.game-rating-count {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.game-rating-pick {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.game-rating-pick .star-pick {
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s;
    line-height: 1;
    user-select: none;
}

.game-rating-pick .star-pick.lit,
.game-rating-pick .star-pick:hover {
    color: var(--gold);
}

.game-rating-textarea {
    width: 100%;
    min-height: 70px;
    padding: 0.65rem 0.85rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    direction: rtl;
    resize: vertical;
    box-sizing: border-box;
}

.game-rating-textarea:focus {
    outline: none;
    border-color: var(--purple);
}

.game-review-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.game-review-item:last-child { border-bottom: 0; }

.game-review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.game-review-user {
    font-weight: 700;
    font-size: 0.85rem;
}

.game-review-item p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Share modal */
.game-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-tri);
}

.share-btn-social {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.75rem;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transition);
}

.share-btn-social:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
    .game-content-grid { grid-template-columns: 1fr; }
    .game-rating-card { position: static; }
    .game-hero-content { padding: 1.75rem; }
}


/* ============================================================
   GAMES LIST — fixed hover zoom (no bottom flicker)
   ============================================================ */
.game-item-image {
    position: relative;
    overflow: hidden;
    height: 220px;
    border-radius: 14px 14px 0 0;
    background: var(--bg-card);
}

.game-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.game-item:hover .game-item-image img {
    transform: scale(1.08);
}

.game-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,5,20,0.75) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.game-item-cat-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.game-item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border-radius: 14px;
}

.game-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(147,51,255,0.15);
}


/* ============================================================
   CHAT — Redesigned: wider, professional, better spacing
   ============================================================ */
.chat-page {
    padding-top: 100px !important;
    padding-bottom: 2rem !important;
    min-height: 100vh;
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.chat-page .chat-shell {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    height: calc(100vh - 130px) !important;
    margin-top: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

.chat-sidebar-inner,
.chat-page .chat-sidebar {
    background: rgba(13,11,31,0.6) !important;
    border-left: 1px solid var(--border-soft) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.chat-sidebar-header {
    padding: 1.35rem 1.5rem !important;
    border-bottom: 1px solid var(--border-soft) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(147,51,255,0.05);
}

.chat-sidebar-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

.online-count {
    background: rgba(0,230,118,0.15);
    color: #00e676;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.chat-online-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.chat-container {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-dark) !important;
    overflow: hidden !important;
    position: relative !important;
}

.chat-tabs {
    display: flex;
    padding: 0.5rem 1rem 0;
    gap: 0.3rem;
    background: rgba(13,11,31,0.6);
    border-bottom: 1px solid var(--border-soft);
}

.chat-tab {
    padding: 0.55rem 1rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
}

.chat-tab.active {
    color: var(--text);
    background: rgba(147,51,255,0.08);
    border-bottom-color: var(--purple);
}

.chat-header {
    padding: 1.15rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(147,51,255,0.03);
}

.chat-header h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chat-header h2 svg {
    color: var(--purple);
    -webkit-text-fill-color: initial;
}

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.chat-msgs::-webkit-scrollbar { width: 6px; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

#chatInputArea {
    padding: 1rem 1.75rem 1.25rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(13,11,31,0.4);
}

/* TOS overlay — enhance */
.chat-tos-overlay {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

.chat-tos-overlay h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.04em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 900px) {
    .chat-page .chat-shell { grid-template-columns: 1fr !important; }
    .chat-page .chat-sidebar,
    .chat-sidebar-inner { display: none !important; }
}


/* ============================================================
   DASHBOARD — new blocks + styled buttons
   ============================================================ */

/* Status add button — match site design */
.dash-status-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0.9rem !important;
    background: rgba(147,51,255,0.08) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    color: var(--purple-light) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.dash-status-add::before {
    content: '+';
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

.dash-status-add:hover {
    background: rgba(147,51,255,0.18) !important;
    border-color: var(--purple) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Schedule live form */
#scheduleLiveForm .form-input {
    background: rgba(13,11,31,0.95) !important;
    color-scheme: dark;
}
#scheduleLiveForm input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.5);
    cursor: pointer;
    opacity: 0.8;
}
/* Cross-browser clock icon for time input (Firefox has no native indicator) */
#scheduleLiveForm input[type="time"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bb86fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important;
    padding-left: 2rem;
    position: relative;
}
#scheduleLiveForm input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
/* Firefox: has no calendar-picker-indicator and no floating time picker (only inline spinners),
   so the purple clock icon is misleading (looks clickable but nothing happens). Hide it there. */
@-moz-document url-prefix() {
    #scheduleLiveForm input[type="time"] {
        background-image: none !important;
        padding-left: 0.75rem;
    }
}
#scheduleLiveForm select option {
    background: #0d0b1f !important;
    color: #fff !important;
}

.scheduled-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(147,51,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

.scheduled-info { flex: 1; min-width: 0; }
.scheduled-title {
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}
.scheduled-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.btn-sm {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.78rem !important;
}

/* Feedback form */
.feedback-form textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

.feedback-image-input {
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(13,11,31,0.95);
    border: 1px dashed var(--border-purple);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.feedback-image-input:hover {
    border-color: var(--purple);
    background: rgba(147,51,255,0.05);
}

.feedback-image-input::file-selector-button {
    background: rgba(147,51,255,0.15);
    color: var(--purple-light);
    border: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    margin-left: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
}

/* User rate box */
.user-rate-box {
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    margin-top: 1rem;
}

.rate-pick {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.rate-pick .star-pick {
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s;
    line-height: 1;
    user-select: none;
}

.rate-pick .star-pick.lit,
.rate-pick .star-pick:hover {
    color: var(--gold);
}

/* Final override: logo sub gold */
.logo-sub { color: var(--gold) !important; }


/* ============================================================
   STREAM MODAL (live page)
   ============================================================ */
.stream-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.stream-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-tri);
}

.stream-modal-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stream-modal-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.stream-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 0;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    line-height: 1;
}

.stream-modal-close:hover {
    background: rgba(255,59,59,0.15);
    color: #ff6b6b;
}

.stream-modal-player {
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.stream-modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.stream-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: center;
    padding: 2rem;
}

/* Armed (saved) notify button */
.btn-notify.is-armed {
    border-color: #ff7a18 !important;
    color: #ff7a18 !important;
    background: rgba(255, 122, 24, 0.12) !important;
}
.btn-notify.is-armed:hover {
    background: rgba(255, 122, 24, 0.2) !important;
}

.stream-modal-body {
    padding: 1.5rem 1.75rem;
}

.stream-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.stream-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: rgba(147,51,255,0.08);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    color: var(--purple-light);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.stream-action-btn:hover {
    background: rgba(147,51,255,0.18);
    transform: translateY(-1px);
}

.stream-action-btn.report {
    background: rgba(255,59,59,0.08);
    border-color: rgba(255,59,59,0.25);
    color: #ff6b6b;
}

.stream-action-btn.report:hover {
    background: rgba(255,59,59,0.18);
}

.stream-rate-area,
.stream-report-area,
.stream-share-area {
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-top: 0.75rem;
}

/* Locked notice when user already rated */
.stream-rate-prev.locked {
    display: block;
    padding: 0.75rem 1rem;
    background: rgba(0, 188, 212, 0.08);
    border: 1px solid rgba(0, 188, 212, 0.25);
    border-radius: 8px;
    color: #4dd0e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Public comments block ("תגובות מהצופים") */
.stream-comments-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.stream-comments-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.stream-comments-list {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 0.25rem;
}

.stream-comment-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}

.stream-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}

.stream-comment-user {
    font-weight: 600;
    color: var(--text-primary);
}

.stream-comment-stars {
    color: #ffb020;
    letter-spacing: 1px;
    font-size: 0.88rem;
}

.stream-comment-time {
    color: var(--text-muted);
    font-size: 0.76rem;
    margin-inline-start: auto;
}

.stream-comment-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #c9d1d9);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.stream-comments-empty {
    margin: 0.25rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.9rem;
}

/* Platform tabs: kick/facebook/tiktok */
.platform-tab.kick { border-color: rgba(83,254,87,0.3); }
.platform-tab.kick.active { background: rgba(83,254,87,0.15); color: #53fe57; }
.platform-tab.facebook { border-color: rgba(24,119,242,0.3); }
.platform-tab.facebook.active { background: rgba(24,119,242,0.15); color: #3a86f5; }
.platform-tab.tiktok { border-color: rgba(255,255,255,0.2); }
.platform-tab.tiktok.active { background: rgba(255,255,255,0.1); color: #fff; }

@media (max-width: 640px) {
    .stream-actions { flex-direction: column; }
    .stream-action-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   PROFILE / DASHBOARD — PROFESSIONAL REDESIGN
   ============================================================ */
main.dashboard {
    padding-top: 110px !important;
    padding-bottom: 4rem !important;
    max-width: 1280px !important;
    margin: 0 auto;
}

/* --- Profile Hero --- */
.profile-hero {
    position: relative;
    background: linear-gradient(145deg, rgba(147,51,255,0.1) 0%, rgba(46,125,255,0.06) 100%);
    border: 1px solid var(--border-purple);
    border-radius: 24px;
    padding: 2.5rem 2.5rem 2rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}

.profile-hero-bg {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(147,51,255,0.22) 0%, transparent 70%);
    pointer-events: none;
}

.profile-hero-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.profile-avatar-wrap { flex-shrink: 0; }
.profile-hero .dash-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    font-size: 3rem !important;
    box-shadow: 0 12px 30px rgba(147,51,255,0.3) !important;
}

.profile-main-info { min-width: 0; }

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.profile-main-info h1 {
    font-family: 'Rubik', 'Heebo', sans-serif !important;
    font-size: 2.3rem !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.profile-main-info .online-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0,230,118,0.12);
    border: 1px solid rgba(0,230,118,0.35);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: #00e676;
}

.profile-main-info .user-role-badge {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.profile-status-display {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    font-size: 0.88rem;
    color: var(--text);
    max-width: 100%;
}

.profile-status-display .status-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.profile-status-display #dashStatus {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

/* Stats */
.profile-stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.profile-stat {
    text-align: center;
    min-width: 70px;
}

.profile-stat-num {
    display: block;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 2rem;
    line-height: 1;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.3rem;
}

.profile-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Action Buttons Bar — unified */
.profile-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    position: relative;
    z-index: 1;
}

.profile-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 40px;
    line-height: 1;
}

.profile-action-btn:hover {
    background: rgba(147,51,255,0.12);
    border-color: var(--border-purple);
    color: var(--text);
    transform: translateY(-1px);
}

.profile-action-btn svg {
    flex-shrink: 0;
    opacity: 0.75;
}

/* Social links display on profile hero */
.profile-social-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
    position: relative;
    z-index: 1;
}

.profile-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    background: rgba(147,51,255,0.08);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transition);
}

.profile-social-link:hover {
    background: rgba(147,51,255,0.18);
    transform: translateY(-1px);
}

.profile-social-link .social-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* --- Sections --- */
.profile-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    margin-bottom: 2rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.profile-section:hover {
    border-color: var(--border-purple);
}

.profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(147,51,255,0.03);
}

.profile-section-title {
    font-family: 'Rubik', 'Heebo', sans-serif !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-section-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: rgba(147,51,255,0.1);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    color: var(--purple-light);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.profile-section-action:hover {
    background: rgba(147,51,255,0.2);
    color: #fff;
}

.profile-section-body {
    padding: 1.5rem 1.75rem;
}

.profile-section-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

.profile-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

.user-age-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    background: rgba(0, 188, 212, 0.12);
    border: 1px solid rgba(0, 188, 212, 0.3);
    color: #4dd0e1;
}
.user-age-label:empty {
    display: none;
}

/* About display */
.dash-about-user {
    min-height: 60px;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    outline: none;
    transition: border-color 0.2s ease;
    white-space: pre-wrap;
}

/* --- Grid layout --- */
.profile-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2rem;
    align-items: start;
}

.profile-grid-col { min-width: 0; }

/* --- Profile forms (schedule, feedback) --- */
.profile-form .form-group {
    margin-bottom: 1rem;
}

.profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.profile-form .form-input {
    background: rgba(13,11,31,0.95) !important;
    color: #fff !important;
    color-scheme: dark;
}
.profile-form select.form-input option {
    background: #0d0b1f !important;
    color: #fff !important;
}

/* --- Scheduled lives --- */
.scheduled-lives-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.scheduled-lives-list h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1rem !important;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.5rem !important;
}

/* --- Recent activity --- */
.recent-activity-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}

.recent-activity-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(147,51,255,0.08);
    border-radius: 50%;
}

.recent-activity-text {
    flex: 1;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-activity-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* --- Rating summary --- */
.rating-summary {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}

.rating-summary .rating-avg {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 2.8rem;
    line-height: 1;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rating-summary .rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    color: var(--gold);
    font-size: 1.15rem;
    margin: 0.35rem 0;
}

.rating-summary .rating-count {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.user-rate-box {
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    margin-top: 1rem;
}

.rate-pick {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.rate-pick .star-pick {
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s;
    user-select: none;
}

.rate-pick .star-pick.lit,
.rate-pick .star-pick:hover {
    color: var(--gold);
}

.rate-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rate-actions .btn-primary { flex: 1; justify-content: center; }

.profile-rate-open {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

/* --- PM compose --- */
.pm-item {
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.6rem;
}

.pm-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.pm-item-from {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--purple-light);
    cursor: pointer;
}

.pm-item-from:hover { text-decoration: underline; }

.pm-item-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.pm-item-body {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}

.pm-view-meta-time {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-top: 0.3em;
}

.pm-view-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

/* --- Profile Modals --- */
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.profile-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-tri);
}

.profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(147,51,255,0.04);
}

.profile-modal-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.profile-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 0;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.profile-modal-close:hover {
    background: rgba(255,59,59,0.15);
    color: #ff6b6b;
}

.profile-modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.profile-modal-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.profile-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1.25rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.profile-modal-footer > div {
    display: flex;
    gap: 0.5rem;
}

.profile-char-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Social modal input groups */
.social-input-group {
    margin-bottom: 1rem;
}

.social-input-group .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.social-icon-label {
    font-size: 1.1rem;
}

/* --- Achievements --- */
.achievement-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .profile-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .profile-stats {
        justify-content: center;
    }
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-form-row {
        grid-template-columns: 1fr;
    }
    .profile-hero {
        padding: 2rem 1.5rem 1.5rem;
    }
    .profile-actions-bar {
        justify-content: center;
    }
}


/* ============================================================
   Ensure live nav button doesn't wrap to 2 lines
   ============================================================ */
.nav-links a.nav-live-link {
    white-space: nowrap !important;
}
.nav-links li a {
    white-space: nowrap !important;
}


/* ============================================================
   FINAL TWEAKS v18 — section titles, live button, logo heartbeat
   ============================================================ */

/* Larger, clearer section titles */
.profile-section-title {
    font-size: 1.55rem !important;
    letter-spacing: 0.06em !important;
}

.profile-section-header {
    padding: 1.35rem 1.85rem !important;
}

/* Live nav button - vertical alignment fix */
.nav-links a.nav-live-link {
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

/* The pulse dot inside live button — make sure it stays inline */
.nav-links a.nav-live-link .nav-live-dot {
    display: inline-block !important;
    vertical-align: middle;
    margin-top: -1px;
}

/* ============================================================
   LOGO — heartbeat pulse animation on icon
   ============================================================ */
@keyframes logoHeartbeat {
    0%, 100%  { transform: scale(1); }
    25%       { transform: scale(1.05); }
    50%       { transform: scale(1); }
    75%       { transform: scale(1.03); }
}

.logo-icon {
    animation: logoHeartbeat 2.4s ease-in-out infinite;
    transform-origin: center center;
}

.logo:hover .logo-icon {
    animation-duration: 1.2s;
}

/* Make sure SVG inside keeps its own drop-shadow glow */
.logo-icon svg {
    transition: filter 0.3s ease;
}


/* ============================================================
   CHAT — Professional wide redesign (final override)
   ============================================================ */
main.chat-page {
    padding-top: 100px !important;
    padding-bottom: 2rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

main.chat-page .chat-shell {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 1.5rem !important;
    height: calc(100vh - 130px) !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

/* Sidebar */
main.chat-page .chat-sidebar-inner,
main.chat-page #chatSidebar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
}

main.chat-page .chat-sidebar-header {
    padding: 1.35rem 1.5rem !important;
    border-bottom: 1px solid var(--border-soft) !important;
    background: linear-gradient(135deg, rgba(147,51,255,0.08) 0%, rgba(46,125,255,0.04) 100%) !important;
}

main.chat-page .chat-sidebar-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

main.chat-page .online-count {
    float: left;
    background: rgba(0,230,118,0.15);
    color: #00e676;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

main.chat-page .chat-online-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.6rem !important;
}

/* Main chat container */
main.chat-page .chat-container {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
    position: relative !important;
}

main.chat-page .chat-tabs {
    padding: 0.75rem 1rem 0 !important;
    gap: 0.4rem !important;
    background: rgba(147,51,255,0.03) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

main.chat-page .chat-tab {
    padding: 0.6rem 1.1rem !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted) !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 10px 10px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    transition: var(--transition) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
}

main.chat-page .chat-tab.active {
    color: var(--text) !important;
    background: rgba(147,51,255,0.1) !important;
    border-bottom-color: var(--purple) !important;
}

main.chat-page .chat-header {
    padding: 1.2rem 1.85rem !important;
    border-bottom: 1px solid var(--border-soft) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, rgba(147,51,255,0.05) 0%, rgba(46,125,255,0.02) 100%) !important;
}

main.chat-page .chat-header h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.45rem !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    background: var(--gradient-main) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

main.chat-page .chat-header h2 svg {
    color: var(--purple) !important;
    -webkit-text-fill-color: initial !important;
    opacity: 0.85;
}

main.chat-page .chat-msgs {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.75rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

main.chat-page .chat-msgs::-webkit-scrollbar { width: 6px; }
main.chat-page .chat-msgs::-webkit-scrollbar-thumb {
    background: var(--border-purple);
    border-radius: 3px;
}

main.chat-page #chatInputArea {
    padding: 1.15rem 1.85rem 1.4rem !important;
    border-top: 1px solid var(--border-soft) !important;
    background: linear-gradient(180deg, rgba(147,51,255,0.02) 0%, rgba(13,11,31,0.4) 100%) !important;
}

/* Online users list items */
main.chat-page .chat-online-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 0.25rem;
}

main.chat-page .chat-online-user:hover {
    background: rgba(147,51,255,0.1);
}

/* Responsive */
@media (max-width: 900px) {
    main.chat-page .chat-shell {
        grid-template-columns: 1fr !important;
    }
    main.chat-page .chat-sidebar-inner,
    main.chat-page #chatSidebar {
        display: none !important;
    }
}


/* ============================================================
   PM recipient autocomplete
   ============================================================ */
.pm-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.pm-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.88rem;
}

.pm-autocomplete-item:hover,
.pm-autocomplete-item.active {
    background: rgba(147,51,255,0.12);
}

.pm-autocomplete-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
    color: #fff;
    flex-shrink: 0;
}

.pm-autocomplete-empty {
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}


/* ============================================================
   NAV LIVE BUTTON — perfect alignment with other nav items
   ============================================================ */
.nav-links {
    align-items: center !important;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a,
.nav-links a.nav-live-link {
    height: 44px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    box-sizing: border-box;
}

.nav-links a.nav-live-link {
    padding: 0.65rem 1.1rem !important;
    gap: 0.5rem;
}

.nav-links a.nav-live-link .nav-live-dot {
    margin: 0;
    flex-shrink: 0;
}


/* ============================================================
   LOGO — Clean icon (no blur/glow), only heartbeat — v24 crisper
   ============================================================ */
.logo-icon svg {
    filter: none !important;
    shape-rendering: geometricPrecision;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.logo-icon {
    background: transparent !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Remove the blurry halo that made the mark look fuzzy */
.logo-icon::before {
    display: none !important;
}

/* Keep a subtle, crisp heartbeat animation */
.logo-icon {
    animation: logoHeartbeat 2.4s ease-in-out infinite;
    transform-origin: center center;
}


/* ============================================================
   CHAT — FINAL WIDE LAYOUT (overrides all previous)
   ============================================================ */
body:has(main.chat-page) {
    overflow-x: hidden;
}

main.chat-page {
    padding-top: 90px !important;
    padding-bottom: 1rem !important;
    max-width: none !important;
    width: calc(100% - 4rem) !important;
    margin: 0 2rem !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

main.chat-page .chat-shell {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 1.5rem !important;
    height: calc(100vh - 110px) !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    width: 100% !important;
}

main.chat-page .chat-container {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
}

main.chat-page .chat-msgs {
    padding: 2rem 2.5rem !important;
}

main.chat-page #chatInputArea {
    padding: 1.25rem 2.5rem 1.5rem !important;
}

/* Message bubble — wider */
main.chat-page .chat-msg {
    max-width: 75% !important;
}

/* Chat input should be full width of body */
main.chat-page #chatInputArea form,
main.chat-page #chatInputArea > div:not(.emoji-picker) {
    width: 100%;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

main.chat-page #chatInputArea input[type="text"],
main.chat-page #chatInputArea textarea {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

main.chat-page #chatInputArea input[type="text"]:focus,
main.chat-page #chatInputArea textarea:focus {
    outline: none;
    border-color: var(--purple);
    background: rgba(147,51,255,0.04);
}

@media (max-width: 1100px) {
    main.chat-page { margin: 0 1rem !important; width: calc(100% - 2rem) !important; }
    main.chat-page .chat-shell { grid-template-columns: 240px 1fr !important; }
}

@media (max-width: 768px) {
    main.chat-page .chat-shell { grid-template-columns: 1fr !important; }
    main.chat-page #chatSidebar,
    main.chat-page .chat-sidebar-inner { display: none !important; }
}


/* ============================================================
   GAME PAGE — VOICE CHAT BLOCK
   ============================================================ */
.voice-placeholder-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.voice-placeholder-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-align: center;
    font-style: italic;
    opacity: 0.7;
    line-height: 1.5;
}

.voice-room {
    background: rgba(13,11,31,0.6);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}

.voice-room-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.voice-room-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 10px rgba(0,230,118,0.6);
    animation: voicePulse 2s ease-in-out infinite;
}

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

.voice-participants {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 84px;
    margin-bottom: 0.5rem;
}

.voice-participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.3rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    transition: all 0.2s ease;
}

.voice-participant.speaking {
    border-color: #00e676;
    background: rgba(0,230,118,0.08);
    box-shadow: 0 0 12px rgba(0,230,118,0.3);
}

.voice-participant.muted {
    opacity: 0.6;
}

.voice-participant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: #fff;
    position: relative;
}

.voice-participant.speaking .voice-participant-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #00e676;
    animation: voicePulse 1.2s ease-in-out infinite;
}

.voice-participant-name {
    font-size: 0.72rem;
    color: var(--text-muted);
    max-width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.voice-participant-mic {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1.5px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.voice-participant.muted .voice-participant-mic {
    background: #ff5252;
    color: #fff;
}

.voice-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.voice-controls {
    display: none;
    gap: 0.5rem;
}

.voice-control-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem;
    background: rgba(147,51,255,0.1);
    border: 1px solid var(--border-purple);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.voice-control-btn:hover {
    background: rgba(147,51,255,0.2);
}

.voice-control-btn.voice-leave {
    background: rgba(255,82,82,0.1);
    border-color: rgba(255,82,82,0.3);
    color: #ff5252;
}

.voice-control-btn.voice-leave:hover {
    background: rgba(255,82,82,0.25);
}

.voice-control-btn.muted {
    background: rgba(255,82,82,0.15);
    color: #ff5252;
    border-color: rgba(255,82,82,0.3);
}

.voice-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}


/* ============================================================
   Profile additions: PM tabs, friend requests, quick-pick,
   blocked-user screen
   ============================================================ */
.pm-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 0.6rem;
}

.pm-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.pm-tab:hover {
    color: var(--text);
    background: rgba(147,51,255,0.08);
}

.pm-tab.active {
    background: rgba(147,51,255,0.15);
    color: var(--text);
    border-color: var(--border-purple);
}

.pm-tab-count {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    min-width: 1.4rem;
    text-align: center;
}

.pm-tab.active .pm-tab-count {
    background: var(--accent-purple, #9333ff);
    color: #fff;
}

.profile-section-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-weight: 600;
}

/* PM compose — friends quick-pick chips */
.pm-quickpick {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pm-quickpick:empty { display: none; }

.pm-quickpick-label {
    width: 100%;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}

.pm-quickpick-empty {
    width: 100%;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 0.5rem 0;
}

.pm-quickpick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(147,51,255,0.08);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.pm-quickpick-chip:hover {
    background: rgba(147,51,255,0.18);
    border-color: var(--border-purple);
}

.pm-quickpick-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a18, #9333ff);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Friend requests list */
/* Anchor-scroll offset: navbar is fixed 120px; plus ~96px from section top
   to this inner list — total ~216px needed so section header stays visible
   below the navbar when navigating via dashboard.html#friendRequestsList. */
#friendRequestsList {
    scroll-margin-top: 220px;
}

/* Pending friend-requests badge next to "החברים שלי" title.
   Parent h2 has gradient text — opt out by forcing solid colors here. */
.profile-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.friend-req-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-family: 'Heebo', 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff !important;
    background: linear-gradient(135deg, #ff7a18, #ff3d6e);
    -webkit-text-fill-color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(255, 61, 110, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.friend-req-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 61, 110, 0.5);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
.friend-req-badge[hidden] { display: none !important; }
.friend-req-badge #friendReqBadgeCount {
    font-size: 0.78rem;
    font-weight: 800;
}

.friend-request-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.friend-request-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a18, #9333ff);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.friend-request-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.friend-request-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.92rem;
    text-decoration: none;
}

.friend-request-name:hover { text-decoration: underline; }

.friend-request-time {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.friend-request-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

/* "is-active-state" — used on add-friend btn when already friends / pending */
.profile-action-btn.is-active-state {
    background: rgba(147,51,255,0.15);
    border-color: var(--border-purple);
    color: var(--text);
    cursor: default;
    opacity: 0.85;
}

/* Blocked-user screen */
.profile-blocked-screen {
    margin: 3rem auto;
    max-width: 520px;
    text-align: center;
}

.profile-blocked-card {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.profile-blocked-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255,82,82,0.12);
    color: #ff6b6b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.profile-blocked-card h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.6rem;
    margin: 0;
    color: var(--text);
}

.profile-blocked-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.profile-blocked-username {
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
}

.profile-blocked-card .btn-primary,
.profile-blocked-card .btn-ghost {
    margin-top: 0.5rem;
    min-width: 180px;
    justify-content: center;
}


/* ============================================================
   OAuth signup buttons (register page)
   ============================================================ */
.oauth-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.oauth-btn:hover {
    background: rgba(147,51,255,0.1);
    border-color: var(--border-purple);
    transform: translateY(-1px);
}

.oauth-btn.oauth-discord:hover {
    background: rgba(88,101,242,0.15);
    border-color: rgba(88,101,242,0.5);
}

.oauth-btn.oauth-google:hover {
    background: rgba(66,133,244,0.1);
    border-color: rgba(66,133,244,0.4);
}

.oauth-btn svg {
    flex-shrink: 0;
}

.oauth-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.oauth-divider::before,
.oauth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 100px);
    height: 1px;
    background: var(--border-soft);
}

.oauth-divider::before { right: 0; }
.oauth-divider::after { left: 0; }

.oauth-divider span {
    background: var(--bg-card);
    padding: 0 1rem;
}

.auth-message.info {
    background: rgba(147,51,255,0.1) !important;
    border: 1px solid var(--border-purple) !important;
    color: var(--text) !important;
}

@media (max-width: 500px) {
    .oauth-buttons { grid-template-columns: 1fr; }
}


/* ============================================================
   CROSS-BROWSER COMPATIBILITY
   Firefox / Edge / Chrome support
   ============================================================ */

/* Gradient text fallback for browsers that don't support background-clip */
@supports not (-webkit-background-clip: text) {
    .profile-section-title,
    .game-section-title,
    .accent,
    .logo-text {
        color: var(--purple-light) !important;
        background: none !important;
    }
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-purple) transparent;
}

/* Firefox backdrop-filter fallback */
@-moz-document url-prefix() {
    .profile-modal-overlay,
    .game-modal-overlay,
    .stream-modal-overlay,
    .chat-tos-overlay {
        background: rgba(0,0,0,0.92) !important;
    }
}

/* Firefox: aspect-ratio fallback */
@supports not (aspect-ratio: 16 / 9) {
    .game-trailer-wrap {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 */
    }
    .game-carousel {
        height: 0;
        padding-bottom: 133.33%; /* 3:4 */
    }
}

/* IE/Edge Legacy: @supports not */
@supports not (-webkit-appearance: none) {
    select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%239333ff' d='M6 8L0 0h12z'/></svg>");
        background-position: left 1rem center;
        background-repeat: no-repeat;
        padding-left: 2.5rem;
    }
}

/* Webkit/Blink — ensure -webkit-background-clip is always present where needed */
.accent,
.profile-section-title,
.game-section-title,
.logo-text,
.rating-avg {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Date/time input browser-specific fixes */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.5);
    cursor: pointer;
}

/* Firefox specifically: style date input placeholder */
input[type="date"],
input[type="time"] {
    color: var(--text);
    font-family: inherit;
}

/* Ensure flex gap works in older Safari */
@supports not (gap: 1rem) {
    .profile-actions-bar > * + * { margin-right: 0.6rem; }
    .nav-links > li + li { margin-right: 0.5rem; }
    .stream-actions > * + * { margin-right: 0.75rem; }
}

/* Prevent iOS zoom on input focus */
input, textarea, select {
    font-size: 16px;
}
@media (min-width: 768px) {
    input, textarea, select {
        font-size: inherit;
    }
}

/* Box-sizing everywhere */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow on all browsers */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Image rendering */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Edge/IE button reset */
button {
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Safari: smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Edge legacy: use flex instead of grid fallback */
@supports not (display: grid) {
    .profile-grid,
    .dashboard-grid,
    .supporters-grid,
    .game-content-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .profile-grid > *,
    .dashboard-grid > * {
        flex: 1 1 calc(50% - 1rem);
        min-width: 280px;
    }
}


/* ============================================================
   SUPPORTER CAROUSEL — realistic image posters
   ============================================================ */
.game-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.supporter-card.active .game-poster-img {
    animation: none;
}

@keyframes posterKenBurns {
    0%   { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(1.08) translate(-2%, -1%); }
}

.supporter-card-link:hover .game-poster-img {
    transform: scale(1.03);
    animation: none;
}


/* ============================================================
   TERMS page — structured cards
   ============================================================ */
.terms-page {
    padding-top: 7rem;
    padding-bottom: 4rem;
    max-width: 920px;
}

.terms-hero {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.terms-eyebrow {
    display: inline-block;
    background: rgba(147,51,255,0.12);
    color: var(--purple-light, #b084ff);
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    border: 1px solid var(--border-purple);
}

.terms-title {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: 0.04em;
    margin: 0 0 0.85rem;
    line-height: 1.1;
}

.terms-title .accent {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.terms-intro {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 640px;
    margin: 0 auto 1.4rem;
    line-height: 1.7;
}

.terms-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.terms-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}

/* TOC chips — quick navigation */
.terms-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin: 0 0 2.5rem;
    padding: 1rem;
    background: rgba(13,11,31,0.5);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
}

.terms-toc-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transition);
}

.terms-toc-chip:hover {
    background: var(--gradient-main);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}

/* Terms cards */
.terms-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
    scroll-margin-top: 100px;
}

.terms-card:hover {
    border-color: var(--border-purple);
    transform: translateY(-2px);
}

.terms-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.5rem;
    background: linear-gradient(135deg, rgba(147,51,255,0.06) 0%, rgba(46,125,255,0.02) 100%);
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.terms-card-num {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: 0.05em;
    min-width: 26px;
}

.terms-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(147,51,255,0.12);
    color: var(--purple, #9333ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-purple);
}

.terms-card-head h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--text);
    flex: 1;
    min-width: 200px;
}

.terms-card-tag {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.terms-card-body {
    padding: 1.4rem 1.6rem 1.6rem;
}

.terms-card-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0 0 0.85rem;
}

.terms-card-body p:last-child { margin-bottom: 0; }

.terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.terms-list li {
    position: relative;
    padding: 0.7rem 1rem 0.7rem 2.4rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.93rem;
    line-height: 1.6;
}

.terms-list li::before {
    content: '';
    position: absolute;
    inset-inline-end: 0.95rem;
    top: 1.05rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradient-main);
    box-shadow: 0 0 8px rgba(147,51,255,0.45);
}

.terms-list li.terms-list-warn {
    background: rgba(255,82,82,0.06);
    border-color: rgba(255,82,82,0.25);
    color: var(--text);
}

.terms-list li.terms-list-warn::before {
    background: #ff6b6b;
    box-shadow: 0 0 8px rgba(255,82,82,0.55);
}

.terms-note {
    background: rgba(46,125,255,0.06);
    border-inline-start: 3px solid #2e7dff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.terms-highlight {
    background: rgba(147,51,255,0.08);
    border-inline-start: 3px solid var(--purple, #9333ff);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    color: var(--text);
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.7;
}

.terms-subnote {
    margin-top: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--border-soft);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.terms-subnote strong {
    color: var(--text);
    margin-inline-end: 0.3rem;
}

.terms-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.terms-badge {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid;
}

.terms-badge-soft  { background: rgba(255,193,7,0.1);  color: #ffc107; border-color: rgba(255,193,7,0.3); }
.terms-badge-warn  { background: rgba(255,140,0,0.1);  color: #ff8c00; border-color: rgba(255,140,0,0.3); }
.terms-badge-danger{ background: rgba(255,82,82,0.1);  color: #ff6b6b; border-color: rgba(255,82,82,0.3); }

/* CTA contact card */
.terms-card-cta {
    background: linear-gradient(135deg, rgba(147,51,255,0.12) 0%, rgba(255,122,24,0.08) 100%);
    border-color: var(--border-purple);
}

.terms-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    background: var(--gradient-main);
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.terms-contact-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(147,51,255,0.35);
}

@media (max-width: 640px) {
    .terms-page { padding-top: 5.5rem; }
    .terms-card-head { padding: 1rem 1.1rem; }
    .terms-card-body { padding: 1.1rem 1.2rem 1.3rem; }
    .terms-card-head h2 { font-size: 1.1rem; min-width: 0; }
    .terms-card-icon { width: 38px; height: 38px; }
    .terms-toc { padding: 0.75rem; }
}


/* ============================================================
   HOME — Site-wide quick search
   ============================================================ */
.home-search-section {
    padding: 2rem 0 1rem;
    position: relative;
    z-index: 5;
}

.home-search-card {
    max-width: 820px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(147,51,255,0.08) 0%, rgba(46,125,255,0.04) 100%);
    border: 1px solid var(--border-purple);
    border-radius: 24px;
    padding: 1.5rem 1.75rem 1.75rem;
    box-shadow: 0 16px 50px rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: relative;
}

.home-search-head {
    text-align: center;
    margin-bottom: 1.1rem;
}

.home-search-title {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-search-title svg {
    color: var(--purple, #9333ff);
    -webkit-text-fill-color: initial;
    opacity: 0.9;
}

.home-search-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}

.home-search-filters {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.home-search-pill {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.home-search-pill:hover {
    background: rgba(147,51,255,0.1);
    color: var(--text);
}

.home-search-pill.active {
    background: var(--gradient-main);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(147,51,255,0.35);
}

.home-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.home-search-icon {
    position: absolute;
    inset-inline-start: 1rem;
    color: var(--text-muted);
    pointer-events: none;
}

.home-search-input {
    width: 100%;
    padding: 0.95rem 3rem 0.95rem 2.8rem;
    background: rgba(13,11,31,0.7);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}

.home-search-input:focus {
    outline: none;
    border-color: var(--border-purple);
    box-shadow: 0 0 0 4px rgba(147,51,255,0.12);
    background: rgba(13,11,31,0.85);
}

.home-search-input::placeholder {
    color: var(--text-muted);
}

.home-search-clear {
    position: absolute;
    inset-inline-end: 0.75rem;
    background: rgba(255,255,255,0.05);
    border: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.home-search-clear:hover {
    background: rgba(255,82,82,0.15);
    color: #ff6b6b;
}

.home-search-results {
    margin-top: 0.85rem;
    max-height: 420px;
    overflow-y: auto;
    background: rgba(13,11,31,0.65);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 0.3rem;
}

.home-search-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.home-search-group + .home-search-group {
    border-top: 1px solid var(--border-soft);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

.home-search-group-title {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 0.85rem 0.3rem;
}

.home-search-result {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease;
}

.home-search-result:hover {
    background: rgba(147,51,255,0.12);
}

.home-search-result-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a18, #9333ff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.home-search-result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-search-result-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-search-result-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-search-result-pill {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .home-search-card {
        padding: 1.25rem 1rem 1.35rem;
        border-radius: 18px;
    }
    .home-search-title { font-size: 1.15rem; }
    .home-search-input { font-size: 0.88rem; padding: 0.85rem 2.8rem 0.85rem 2.6rem; }
}


/* ============================================================
   CHAT — Final clean polish (single topbar, refined sidebar)
   ============================================================ */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Unified topbar — tabs on the start, admin actions on the end */
main.chat-page .chat-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
    background: linear-gradient(135deg, rgba(147,51,255,0.06) 0%, rgba(46,125,255,0.03) 100%) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    flex-shrink: 0;
    min-height: 48px;
    box-sizing: border-box;
    overflow: hidden;
}

main.chat-page .chat-topbar .chat-tabs {
    flex: 1 1 auto;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.3rem !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

main.chat-page .chat-topbar .chat-tabs::-webkit-scrollbar { display: none; }

main.chat-page .chat-topbar .chat-tab {
    padding: 0.5rem 1rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted) !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 12px 12px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    transition: var(--transition) !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
}

main.chat-page .chat-topbar .chat-tab:hover {
    color: var(--text) !important;
    background: rgba(147,51,255,0.06) !important;
}

main.chat-page .chat-topbar .chat-tab.active {
    color: var(--text) !important;
    background: linear-gradient(180deg, rgba(147,51,255,0.18) 0%, rgba(147,51,255,0.08) 100%) !important;
    border-bottom-color: var(--purple, #9333ff) !important;
    box-shadow: inset 0 -2px 0 var(--purple, #9333ff);
}

main.chat-page .chat-topbar .chat-tab.active svg {
    opacity: 1;
}

main.chat-page .chat-topbar .chat-tab svg {
    color: var(--purple, #9333ff);
    opacity: 0.85;
}

main.chat-page .chat-topbar .close-tab {
    margin-right: 0.35rem;
    color: var(--text-muted);
    opacity: 0.6;
    cursor: pointer;
    padding: 0 0.2rem;
    border-radius: 4px;
    transition: var(--transition);
}

main.chat-page .chat-topbar .close-tab:hover {
    color: #ff6b6b;
    background: rgba(255,82,82,0.1);
    opacity: 1;
}

main.chat-page .chat-topbar .dm-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple, #9333ff);
    box-shadow: 0 0 8px rgba(147,51,255,0.6);
}

main.chat-page .chat-admin-bar {
    align-self: center;
    padding: 0;
    flex-shrink: 0;
}

main.chat-page .chat-admin-btn {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(255,82,82,0.3);
    background: rgba(255,82,82,0.1);
    color: #ff6b6b;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

main.chat-page .chat-admin-btn.danger:hover {
    background: rgba(255,82,82,0.22);
    border-color: rgba(255,82,82,0.5);
}

/* Sidebar header — clean two-row layout with prominent count */
main.chat-page .chat-sidebar-header {
    padding: 1.2rem 1.35rem !important;
    border-bottom: 1px solid var(--border-soft) !important;
    background: linear-gradient(135deg, rgba(147,51,255,0.08) 0%, rgba(46,125,255,0.03) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-shrink: 0;
}

main.chat-page .chat-sidebar-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.07em !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--text) !important;
}

main.chat-page .chat-sidebar-header .online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 10px rgba(0,230,118,0.6);
    flex-shrink: 0;
}

main.chat-page .online-count {
    float: none !important;
    background: rgba(0,230,118,0.12) !important;
    color: #00e676 !important;
    padding: 0.25rem 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border: 1px solid rgba(0,230,118,0.25);
    min-width: 1.6rem;
    text-align: center;
}

/* Online users list items */
main.chat-page .online-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 0.15rem;
}

main.chat-page .online-user:hover {
    background: rgba(147,51,255,0.1);
}

main.chat-page .online-user.is-self {
    opacity: 0.7;
    cursor: default;
}

main.chat-page .online-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a18, #9333ff);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

main.chat-page .online-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main.chat-page .online-dot-small {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 6px rgba(0,230,118,0.55);
    flex-shrink: 0;
}

main.chat-page .dm-btn {
    position: absolute;
    inset-inline-start: 0.5rem;
    background: rgba(147,51,255,0.15);
    border: 0;
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    color: var(--text);
}

main.chat-page .online-user:hover .dm-btn {
    opacity: 1;
}

main.chat-page .dm-btn:hover {
    background: rgba(147,51,255,0.3);
}

main.chat-page .chat-sidebar-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Hide the old standalone chat-header completely (we collapsed it into topbar) */
main.chat-page .chat-header {
    display: none !important;
}

/* Responsive: stack on small screens, sidebar collapses to a sheet */
@media (max-width: 900px) {
    main.chat-page .chat-shell {
        grid-template-columns: 1fr !important;
    }
    main.chat-page #chatSidebar,
    main.chat-page .chat-sidebar-inner {
        display: none !important;
    }
}


/* ============================================================
   ONLINE/OFFLINE STATUS DOTS (v22)
   ============================================================ */
.online-dot-sm {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
    flex-shrink: 0;
    display: inline-block;
}

.online-dot-sm.offline {
    background: #ff5252;
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.4);
}


/* ============================================================
   GAMES PAGE — Game Request Form (v22)
   ============================================================ */
.game-request-form {
    text-align: right;
    margin-top: 1.5rem;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
}

.game-request-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.game-request-form .form-group {
    margin-bottom: 1rem;
}

.game-request-form .form-input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(13, 11, 31, 0.95);
    border: 1.5px solid rgba(147, 51, 255, 0.25);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color-scheme: dark;
    box-sizing: border-box;
}

.game-request-form .form-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(147, 51, 255, 0.15);
}

.game-request-form select.form-input option {
    background: #0d0b1f;
    color: #fff;
}

.game-request-form textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

.game-request-form .btn-primary {
    margin-top: 0.5rem;
}

.game-request-msg {
    margin-top: 1.25rem;
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    font-size: 0.95rem;
    text-align: center;
}

.game-request-msg.success {
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.4);
    color: #00e676;
}

.game-request-msg.error {
    background: rgba(255, 82, 82, 0.12);
    border: 1px solid rgba(255, 82, 82, 0.4);
    color: #ff5252;
}

@media (max-width: 600px) {
    .game-request-row { grid-template-columns: 1fr; }
}


/* ============================================================
   DATE/TIME INPUTS — Hebrew locale + consistent icons (v22)
   ============================================================ */
#scheduleDate,
#scheduleTime {
    direction: rtl;
    text-align: right;
    color-scheme: dark;
}

/* Ensure both date and time show a clickable picker icon on the left (RTL) */
#scheduleDate::-webkit-calendar-picker-indicator,
#scheduleTime::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.4) sepia(0.3) hue-rotate(220deg);
    cursor: pointer;
    opacity: 0.85;
    margin-right: 0;
    margin-left: auto;
    padding: 2px;
    width: 18px;
    height: 18px;
    background-size: contain;
}

#scheduleDate::-webkit-calendar-picker-indicator:hover,
#scheduleTime::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Force Hebrew date/time display */
#scheduleDate,
#scheduleTime {
    unicode-bidi: plaintext;
}


/* ============================================================
   LIVE SCHEDULE — LTR date + divider (v22)
   ============================================================ */
.schedule-time {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-width: 110px !important;
    padding: 0.5rem 0.75rem !important;
}

.sched-time-part {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text);
    letter-spacing: 0.04em;
}

.sched-date-part {
    font-family: 'Rajdhani', 'Heebo', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: 0.02em;
}

.sched-divider {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-purple), transparent);
    margin: 0.1rem 0;
}


/* ============================================================
   STREAM BAN BUTTON (v22 — admin/teammate only)
   ============================================================ */
.stream-action-btn.ban-stream {
    background: rgba(255, 59, 59, 0.1);
    border-color: rgba(255, 59, 59, 0.3);
    color: #ff5252;
}

.stream-action-btn.ban-stream:hover {
    background: rgba(255, 59, 59, 0.25);
    border-color: rgba(255, 59, 59, 0.5);
    transform: translateY(-1px);
}

.stream-ban-area {
    padding: 1rem;
    background: rgba(255, 59, 59, 0.06);
    border: 1px solid rgba(255, 59, 59, 0.25);
    border-radius: 10px;
    margin-top: 0.75rem;
}


/* ============================================================
   STREAM TOS MODAL (v22)
   ============================================================ */
.stream-tos-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stream-tos-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-tri);
    overflow: hidden;
}

.stream-tos-header {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.1) 0%, rgba(46, 125, 255, 0.04) 100%);
    text-align: center;
}

.stream-tos-header h2 {
    margin: 0;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-tos-body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
}

.tos-rule {
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.tos-rule strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--purple-light);
    font-size: 0.95rem;
}

.tos-rule p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.tos-rule.highlight {
    background: rgba(147, 51, 255, 0.08);
    border-color: var(--border-purple);
}

.tos-rule.highlight strong {
    color: var(--gold);
}

.stream-tos-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(13, 11, 31, 0.6);
}


/* ============================================================
   CHAT — fix collision with navbar + consistent sidebar/main (v22)
   ============================================================ */
main.chat-page {
    padding-top: 1rem !important; /* FIX D.4.2.5 — ב — צמצום מרווח עליון של בלוק הצ'אט */
    padding-bottom: 1.5rem !important;
    max-width: 1400px !important;
    width: calc(100% - 3rem) !important;
    margin: 0 auto !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

main.chat-page .chat-shell {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 1.5rem !important;
    height: calc(100vh - 140px) !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    width: 100% !important;
}

main.chat-page .chat-sidebar-inner,
main.chat-page #chatSidebar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    min-height: 0 !important;
}

main.chat-page .chat-container {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Harmonize sidebar header with main header */
main.chat-page .chat-sidebar-header,
main.chat-page .chat-header {
    padding: 1.15rem 1.5rem !important;
    border-bottom: 1px solid var(--border-soft) !important;
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.06) 0%, rgba(46, 125, 255, 0.02) 100%) !important;
    min-height: 64px;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
}

main.chat-page .chat-sidebar-header h3,
main.chat-page .chat-header h2 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

main.chat-page .chat-header h2 {
    background: var(--gradient-main) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

main.chat-page .chat-online-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.6rem !important;
}

main.chat-page .chat-msgs {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    min-height: 0 !important;
}

main.chat-page #chatInputArea {
    padding: 1rem 2rem 1.25rem !important;
    border-top: 1px solid var(--border-soft) !important;
    background: rgba(13, 11, 31, 0.4) !important;
    flex-shrink: 0;
}

/* Ensure tabs row doesn't overflow */
main.chat-page .chat-tabs {
    padding: 0.6rem 1rem 0 !important;
    background: rgba(13, 11, 31, 0.5) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    main.chat-page {
        padding-top: 90px !important;
        width: calc(100% - 2rem) !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    main.chat-page .chat-shell {
        grid-template-columns: 1fr !important;
        height: calc(100vh - 120px) !important;
    }
    main.chat-page #chatSidebar,
    main.chat-page .chat-sidebar-inner {
        display: none !important;
    }
}


/* ============================================================
   TEAMMATE ROLE TAG (v22)
   ============================================================ */
.u-tag.teammate {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: white;
    border: 0;
}
.u-tag.editor {
    /* Legacy class - same styling as teammate */
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* ============================================================
   ADMIN INBOX (v22)
   ============================================================ */
.inbox-item {
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.inbox-item:hover {
    border-color: var(--border-purple);
}

.inbox-item.read {
    opacity: 0.7;
}

.inbox-item-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}

.inbox-cat {
    padding: 0.25rem 0.65rem;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(147, 51, 255, 0.12);
    border: 1px solid rgba(147, 51, 255, 0.3);
    color: var(--purple-light);
}

.inbox-cat.cat-bug { background: rgba(255, 82, 82, 0.12); border-color: rgba(255, 82, 82, 0.3); color: #ff5252; }
.inbox-cat.cat-feature { background: rgba(0, 230, 118, 0.12); border-color: rgba(0, 230, 118, 0.3); color: #00e676; }
.inbox-cat.cat-complaint { background: rgba(255, 165, 0, 0.12); border-color: rgba(255, 165, 0, 0.3); color: #ffa500; }
.inbox-cat.cat-user-report, .inbox-cat.cat-stream-report { background: rgba(255, 82, 82, 0.12); border-color: rgba(255, 82, 82, 0.3); color: #ff5252; }
.inbox-cat.cat-stream-ban { background: rgba(128, 0, 128, 0.15); border-color: rgba(128, 0, 128, 0.4); color: #b969d4; }
.inbox-cat.cat-game-request { background: rgba(46, 125, 255, 0.12); border-color: rgba(46, 125, 255, 0.3); color: #2e7dff; }

.inbox-from {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.inbox-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-right: auto;
}

.inbox-new {
    padding: 0.15rem 0.55rem;
    background: var(--purple);
    color: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.inbox-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    background: rgba(147, 51, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.inbox-item-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.inbox-image {
    max-width: 240px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.inbox-image img {
    width: 100%;
    height: auto;
    display: block;
}

.inbox-item-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-soft);
}


/* ============================================================
   BLOCK PAGINATION CONTROLS (v23 - site-wide)
   ============================================================ */
.block-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.85rem 0.25rem 0.25rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-soft);
}

.block-pag-btn {
    padding: 0.45rem 0.95rem;
    background: rgba(147, 51, 255, 0.08);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.block-pag-btn:hover:not(:disabled) {
    background: rgba(147, 51, 255, 0.18);
    border-color: var(--purple);
    transform: translateY(-1px);
}

.block-pag-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.block-pag-info {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    min-width: 110px;
    text-align: center;
}

/* ============================================================
   PM DELETE BUTTON (v23)
   ============================================================ */
.pm-item {
    position: relative;
}

.pm-item-delete {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 24px;
    height: 24px;
    background: rgba(255, 82, 82, 0.08);
    border: 1px solid rgba(255, 82, 82, 0.2);
    color: #ff5252;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: all 0.2s ease;
}

.pm-item:hover .pm-item-delete {
    opacity: 1;
}

.pm-item-delete:hover {
    background: rgba(255, 82, 82, 0.25);
    transform: scale(1.1);
}

/* PM item gets a slight left-padding for delete spot */
.pm-item {
    padding-left: 2.5rem !important;
}

.pm-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin: 0.15rem 0 0.35rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pm-item-title:hover {
    color: var(--purple-light);
}

.pm-item-body-preview {
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


/* ============================================================
   CHAT CONTEXT MENU (v23)
   ============================================================ */
.chat-ctx-menu {
    position: fixed;
    z-index: 5000;
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 12px;
    padding: 0.4rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    min-width: 180px;
    animation: ctxMenuFade 0.15s ease-out;
}

@keyframes ctxMenuFade {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    text-align: right;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.chat-ctx-item:hover {
    background: rgba(147, 51, 255, 0.12);
}

.chat-ctx-item svg {
    color: var(--purple-light);
    flex-shrink: 0;
}

.chat-ctx-item.chat-ctx-danger {
    color: #ff5252;
}

.chat-ctx-item.chat-ctx-danger svg {
    color: #ff5252;
}

.chat-ctx-item.chat-ctx-danger:hover {
    background: rgba(255, 82, 82, 0.12);
}

/* Right-click hint on user rows */
.online-user {
    cursor: context-menu;
}

/* ============================================================
   CHAT SIDEBAR — NATURAL INTEGRATION WITH CHAT CONTAINER (v23)
   ============================================================ */
main.chat-page .chat-shell {
    gap: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

main.chat-page .chat-sidebar-inner,
main.chat-page #chatSidebar {
    border: 0 !important;
    border-left: 1px solid var(--border-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(13, 11, 31, 0.4) !important;
}

main.chat-page .chat-container {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Seamless header alignment */
main.chat-page .chat-sidebar-header,
main.chat-page .chat-header {
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.08) 0%, rgba(46, 125, 255, 0.03) 100%) !important;
}

@media (max-width: 900px) {
    main.chat-page .chat-sidebar-inner {
        border-left: 0 !important;
    }
}


/* ============================================================
   ABOUT PAGE — 2-col grid with video placeholder (v23)
   ============================================================ */
.story-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.story-video-side {
    position: sticky;
    top: 110px;
}

.video-placeholder {
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.1) 0%, rgba(46, 125, 255, 0.05) 100%);
    border: 1.5px solid var(--border-purple);
    border-radius: 20px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(147, 51, 255, 0.04) 30px, rgba(147, 51, 255, 0.04) 60px);
    pointer-events: none;
}

.video-placeholder::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.5), transparent 40%, transparent 60%, rgba(255, 122, 24, 0.3));
    border-radius: 20px;
    z-index: -1;
    filter: blur(12px);
    opacity: 0.6;
}

.video-placeholder-inner {
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.video-play-btn {
    background: transparent;
    border: 0;
    color: var(--purple-light);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    padding: 0;
    display: inline-flex;
    filter: drop-shadow(0 0 20px rgba(147, 51, 255, 0.5));
}

.video-play-btn:hover {
    color: var(--purple);
    transform: scale(1.08);
    filter: drop-shadow(0 0 30px rgba(147, 51, 255, 0.8));
}

.video-placeholder-title {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    margin: 0 0 0.35rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-placeholder-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 1.25rem;
    font-style: italic;
}

.video-placeholder-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.video-placeholder-tags span {
    padding: 0.3rem 0.7rem;
    background: rgba(147, 51, 255, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 900px) {
    .story-grid-2col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .story-video-side {
        position: static;
        order: -1;
    }
}


/* ============================================================
   HERO STATS — 5 items (v23)
   ============================================================ */
/* FIX D.4.2 (F-06) — 3+2 layout on desktop using 6-column grid for visual centering. */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}
.hero-stats-grid .stat:nth-child(1) { grid-column: 1 / span 2; }
.hero-stats-grid .stat:nth-child(2) { grid-column: 3 / span 2; }
.hero-stats-grid .stat:nth-child(3) { grid-column: 5 / span 2; }
.hero-stats-grid .stat:nth-child(4) { grid-column: 2 / span 2; }
.hero-stats-grid .stat:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
    .hero-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-stats-grid .stat:nth-child(1),
    .hero-stats-grid .stat:nth-child(2),
    .hero-stats-grid .stat:nth-child(3),
    .hero-stats-grid .stat:nth-child(4),
    .hero-stats-grid .stat:nth-child(5) {
        grid-column: auto;
    }
}

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


/* ============================================================
   SITE EXPERIENCE RATING POPUP (v23)
   ============================================================ */
.site-rating-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 4500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.site-rating-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 2.25rem 2rem 1.75rem;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(147, 51, 255, 0.2);
    animation: ratingModalPop 0.4s cubic-bezier(0.25, 1.5, 0.5, 1);
}

@keyframes ratingModalPop {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.site-rating-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.site-rating-close:hover {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
}

.site-rating-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.site-rating-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

.site-rating-header h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-rating-header p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0;
}

.site-rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    direction: ltr;
}

.site-rating-star {
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.site-rating-star:hover,
.site-rating-star.lit {
    color: #ffd700;
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
}

.site-rating-star.selected {
    color: #ffd700;
}

.site-rating-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 1.25rem;
    min-height: 1.25rem;
}

.site-rating-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(13, 11, 31, 0.5);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.site-rating-textarea:focus {
    outline: none;
    border-color: var(--purple);
}

.site-rating-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-rating-footer button {
    flex: 1;
    justify-content: center;
}

.site-rating-avg-display {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 1rem 0 0;
    opacity: 0.8;
}


/* ============================================================
   KO-FI DONATION BUTTON + MODAL (v23)
   ============================================================ */
.nav-kofi-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.15), rgba(255, 71, 87, 0.1));
    border: 1px solid rgba(255, 122, 24, 0.4);
    border-radius: 10px;
    color: #ffaa55;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-kofi-btn:hover {
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.3), rgba(255, 71, 87, 0.2));
    border-color: rgba(255, 122, 24, 0.7);
    color: #ffcc88;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 122, 24, 0.25);
}

.nav-kofi-btn svg {
    color: #ff7a18;
}

@media (max-width: 768px) {
    .nav-kofi-btn .kofi-btn-text {
        display: none;
    }
    .nav-kofi-btn {
        padding: 0.55rem 0.7rem;
    }
}

/* Ko-fi modal */
.kofi-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

.kofi-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: ratingModalPop 0.35s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.kofi-modal-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    z-index: 2;
}

.kofi-modal-close:hover {
    background: rgba(255, 82, 82, 0.18);
    color: #ff5252;
}

.kofi-modal-header {
    text-align: center;
    padding: 2rem 2rem 1rem;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.1) 0%, rgba(255, 71, 87, 0.05) 100%);
    border-bottom: 1px solid var(--border-soft);
}

.kofi-heart {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 20px rgba(255, 71, 87, 0.6));
    animation: heartBeat 1.6s ease-in-out infinite;
}

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

.kofi-modal-header h2 {
    margin: 0;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #ff7a18, #ff4757);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kofi-modal-body {
    padding: 1.75rem 2rem;
    overflow-y: auto;
    flex: 1;
}

.kofi-modal-body p {
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.kofi-highlight {
    padding: 1rem 1.25rem;
    background: rgba(147, 51, 255, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 12px;
    color: var(--text) !important;
    font-weight: 500;
}

.kofi-benefits {
    background: rgba(13, 11, 31, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.kofi-benefits strong {
    color: var(--purple-light);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.kofi-benefits ul {
    margin: 0;
    padding-right: 1.5rem;
    list-style: none;
}

.kofi-benefits li {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.3rem 0;
    position: relative;
    padding-right: 1.2rem;
}

.kofi-benefits li::before {
    content: '✓';
    position: absolute;
    right: 0;
    top: 0.3rem;
    color: #00e676;
    font-weight: 700;
}

.kofi-thanks {
    text-align: center;
    font-style: italic;
    color: var(--text-muted) !important;
    font-size: 0.92rem !important;
}

.kofi-security {
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}

.kofi-security strong {
    display: block;
    color: #00e676;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.kofi-security p {
    margin: 0 !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
}

.kofi-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(13, 11, 31, 0.4);
}

.kofi-modal-footer > * {
    flex: 1;
    justify-content: center;
}

.btn-kofi-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: linear-gradient(135deg, #ff7a18, #ff4757);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(255, 122, 24, 0.3);
}

.btn-kofi-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 122, 24, 0.5);
}


/* ============================================================
   STEAM WIDGET CARD (v23)
   ============================================================ */
.steam-widget-card {
    background: linear-gradient(135deg, rgba(23, 26, 33, 0.6) 0%, rgba(16, 35, 67, 0.4) 100%);
    border-color: rgba(23, 26, 33, 0.5);
}

.steam-widget-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
}

.steam-widget-wrap {
    border-radius: 10px;
    overflow: hidden;
    background: #1b2838;
    border: 1px solid rgba(23, 26, 33, 0.6);
    min-height: 190px;
}

.steam-widget-fallback {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #a0aec0;
    font-size: 0.88rem;
    line-height: 1.6;
}

.steam-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: rgba(102, 192, 244, 0.12);
    border: 1px solid rgba(102, 192, 244, 0.3);
    border-radius: 8px;
    color: #66c0f4;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.85rem;
    transition: all 0.2s ease;
}

.steam-external-link:hover {
    background: rgba(102, 192, 244, 0.22);
    border-color: rgba(102, 192, 244, 0.55);
    transform: translateY(-1px);
}


/* ============================================================
   NOTIFICATION EXTRAS (v23) — delete button, prefs bar, prefs modal
   ============================================================ */
.notif-item {
    position: relative;
    padding-left: 2.25rem;
}

.notif-remove-btn {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
}

.notif-item:hover .notif-remove-btn {
    opacity: 1;
}

.notif-remove-btn:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
    transform: translateY(-50%) scale(1.1);
}

.notif-prefs-bar {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(13, 11, 31, 0.4);
}

.notif-prefs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(147, 51, 255, 0.08);
    border: 1px solid var(--border-purple);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notif-prefs-btn:hover {
    background: rgba(147, 51, 255, 0.2);
}

.notif-prefs-btn.notif-clear-all {
    background: rgba(255, 82, 82, 0.08);
    border-color: rgba(255, 82, 82, 0.3);
    color: #ff8a8a;
}

.notif-prefs-btn.notif-clear-all:hover {
    background: rgba(255, 82, 82, 0.22);
}

/* Notification preferences modal */
.notif-prefs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 5500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

.notif-prefs-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: ratingModalPop 0.35s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.notif-prefs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.08) 0%, rgba(46, 125, 255, 0.03) 100%);
}

.notif-prefs-header h3 {
    margin: 0;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
}

.notif-prefs-close {
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.notif-prefs-close:hover {
    background: rgba(255, 82, 82, 0.18);
    color: #ff5252;
}

.notif-prefs-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.notif-prefs-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.notif-prefs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notif-pref-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notif-pref-item:hover {
    background: rgba(147, 51, 255, 0.08);
    border-color: var(--border-purple);
}

.notif-pref-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--purple);
    cursor: pointer;
    flex-shrink: 0;
}

.notif-pref-label {
    font-size: 0.9rem;
    color: var(--text);
    flex: 1;
}

.notif-prefs-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(13, 11, 31, 0.4);
}

/* ============================================================
   UPCOMING LIVE ITEMS (v23) — for other user's profile
   ============================================================ */
.upcoming-live-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(13, 11, 31, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.6rem;
}

.upcoming-live-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 90px;
    padding-left: 0.85rem;
    border-left: 1px solid var(--border-soft);
}

.ul-time {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}

.ul-divider {
    width: 24px;
    height: 1px;
    background: var(--border-purple);
}

.ul-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    direction: ltr;
    unicode-bidi: isolate;
}

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

.upcoming-live-info h4 {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    color: var(--text);
}

.upcoming-live-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* ============================================================
   NAV LIVE BUTTON — Refined subtle design (v23)
   Match bell sophistication - toned down red, more professional
   ============================================================ */
.nav-live-round {
    background: rgba(255, 82, 82, 0.12) !important;
    border: 1px solid rgba(255, 82, 82, 0.35) !important;
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0) !important;
    animation: none !important;
    transition: all 0.25s ease !important;
    color: #ff7a7a !important;
}

.nav-live-round:hover {
    background: rgba(255, 82, 82, 0.2) !important;
    border-color: rgba(255, 82, 82, 0.55) !important;
    box-shadow: 0 0 12px rgba(255, 82, 82, 0.25) !important;
    transform: translateY(-1px);
}

.nav-live-round .live-dot {
    background: #ff5252 !important;
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.5);
    animation: liveSoftPulse 2s ease-in-out infinite !important;
}

@keyframes liveSoftPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.15); }
}

/* Active live state - only mildly emphasized */
.nav-live-round.is-live {
    background: rgba(255, 82, 82, 0.18) !important;
    border-color: rgba(255, 82, 82, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.3) !important;
}

.nav-live-round.is-live::after {
    border: 1px solid rgba(255, 82, 82, 0.4) !important;
    animation: liveSoftPulse 2s ease-in-out infinite !important;
}

.nav-live-round.is-live .live-dot {
    background: #ff3838 !important;
    box-shadow: 0 0 10px rgba(255, 56, 56, 0.7);
}


/* ============================================================
   AUTH SUPPORT NOTE (v23) — register page
   ============================================================ */
.auth-support-note {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(147, 51, 255, 0.06);
    border: 1px solid var(--border-purple);
    border-radius: 12px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.auth-support-link {
    color: var(--purple-light);
    text-decoration: none;
    font-weight: 600;
    margin-right: 0.25rem;
    transition: color 0.2s ease;
}

.auth-support-link:hover {
    color: var(--purple);
    text-decoration: underline;
}


/* ============================================================
   FOOTER CONTACT EMAIL (v23)
   ============================================================ */
.footer-contact {
    margin-top: 0.5rem !important;
    font-size: 0.85rem;
}

.footer-contact a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px dotted var(--border-soft);
    padding-bottom: 1px;
}

.footer-contact a:hover {
    color: var(--purple-light);
    border-bottom-color: var(--purple);
}


/* ============================================================
   GAMES PAGE — LARGER CARDS & BETTER READABILITY (v24)
   ============================================================ */

/* Wider grid with bigger cards */
.games-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 2.25rem !important;
}

/* Enlarge game items */
.games-list .game-item {
    border-radius: 16px !important;
    border: 1px solid var(--border-purple) !important;
    background: var(--bg-card) !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.games-list .game-item:hover {
    transform: translateY(-8px) !important;
    border-color: var(--purple) !important;
    box-shadow: 0 20px 50px rgba(147, 51, 255, 0.35), 0 0 40px rgba(147, 51, 255, 0.15) !important;
}

/* Larger image area */
/* FIX D.4.2.4 — א — תמונה מלאה במסגרת בבלוקי משחקים */
.games-list .game-item-image {
    aspect-ratio: 3 / 4 !important;
    position: relative !important;
}

.games-list .game-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* end FIX D.4.2.4 — א */

/* FIX D.4.2.6 — א — היפוך חיתוך פארמינג ו-GTA */
.games-list .game-item[data-game-id="fs"] .game-item-image img {
    object-position: 50% 75% !important;
}

.games-list .game-item[data-game-id="gta6"] .game-item-image img {
    object-position: 50% 25% !important;
}
/* end FIX D.4.2.6 — א */

/* FIX D.4.2.10 — ב — חיתוך מותאם ליורו טראק */
.games-list .game-item[data-game-id="ets2"] .game-item-image img {
    object-position: 50% 50% !important;
}
/* end FIX D.4.2.10 — ב */

.games-list .game-item:hover .game-item-image img {
    transform: scale(1.07);
}

/* Bigger body padding */
.games-list .game-item-body {
    padding: 1.75rem 1.75rem 1.5rem !important;
}

/* Much more readable title */
.games-list .game-item h3 {
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important;
    font-size: 1.75rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    margin-bottom: 0.65rem !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}

.games-list .game-item p {
    color: var(--text) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
    opacity: 0.85;
}

/* Category badge - bigger and more prominent */
.games-list .game-item-cat-badge {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    top: 1rem !important;
    right: 1rem !important;
}

/* Meta info row */
.games-list .game-meta {
    padding-top: 1rem !important;
    border-top: 1px solid var(--border-soft) !important;
}

.games-list .game-meta > span {
    font-size: 0.88rem !important;
}

/* Rate button bigger and clearer */
.games-list .game-rate-btn {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

@media (max-width: 900px) {
    .games-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    }
    .games-list .game-item h3 { font-size: 1.55rem !important; }
}

@media (max-width: 600px) {
    .games-list-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   ABOUT VIDEO — Aligned left, in a straight line facing the timeline (v24)
   ============================================================ */
.story-grid-2col {
    align-items: start !important;
    gap: 4rem !important;
}

.story-video-side {
    position: sticky;
    top: 130px;
    /* Match text-side offset: section-tag (~30px) + its mb 1rem + h2 2 lines (~80px) + its mb 1rem + timeline mt 3rem */
    padding-top: 11.25rem !important;
}

@media (max-width: 900px) {
    .story-video-side {
        padding-top: 0 !important;
        position: static;
    }
}


/* ============================================================
   NOTIFICATION PREFS FOOTER — fix Cancel button alignment (v24)
   ============================================================ */
.notif-prefs-footer {
    justify-content: space-between !important;
    gap: 1rem !important;
    align-items: center !important;
}

.notif-prefs-footer > button {
    flex: 1 !important;
    min-width: 120px;
    justify-content: center !important;
    padding: 0.75rem 1.25rem !important;
    text-align: center !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* Make sure Cancel (btn-ghost) has proper size too */
.notif-prefs-footer .btn-ghost {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.notif-prefs-footer .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--border-purple) !important;
}


/* ============================================================
   CAROUSEL POSTER IMAGES — Unified dramatic gaming style (v24)
   Applies the same cinematic filter to all poster images for cohesion
   ============================================================ */
.game-poster-img {
    filter: brightness(0.78) contrast(1.12) saturate(1.1) !important;
    transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.supporter-card.active .game-poster-img {
    filter: brightness(0.82) contrast(1.15) saturate(1.15) !important;
}

.supporter-card-link:hover .game-poster-img {
    filter: brightness(0.95) contrast(1.18) saturate(1.2) !important;
    transform: scale(1.03);
}

/* Games page also gets the dramatic filter */
.games-list .game-item-image img {
    filter: brightness(0.85) contrast(1.12) saturate(1.1) !important;
    transition: filter 0.4s ease, transform 0.6s ease !important;
}

.games-list .game-item:hover .game-item-image img {
    filter: brightness(1) contrast(1.18) saturate(1.2) !important;
}


/* ============================================================
   CHAT TOOLBAR — Divider between emoji and color picker (v24)
   ============================================================ */
.chat-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.chat-toolbar-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, var(--border-purple), transparent);
    margin: 0 0.5rem;
    opacity: 0.6;
}


/* ============================================================
   AD PLACEHOLDERS (v24) — marked slots for WordPress ad integration
   Developer replaces these with AdSense/Ezoic/MediaVine code
   ---
   Ads are DISABLED sitewide via the rule below. To enable ads
   (e.g. from WordPress), either remove the rule, or add the class
   "ads-enabled" to <body>. Markup remains in place as infrastructure.
   ============================================================ */
.ad-slot-wrap,
.ad-slot {
    display: none !important;
}
body.ads-enabled .ad-slot-wrap {
    display: block !important;
}
body.ads-enabled .ad-slot {
    display: flex !important;
}

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5rem auto;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.03) 0%, rgba(46, 125, 255, 0.02) 100%);
    border: 1px dashed rgba(147, 51, 255, 0.2);
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.ad-slot::before {
    content: 'פרסומת';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ad-slot-content {
    opacity: 0.45;
    font-size: 0.78rem;
    padding: 0.5rem 1rem;
    text-align: center;
    line-height: 1.5;
}

/* Leaderboard 728x90 */
.ad-slot.ad-leaderboard {
    max-width: 728px;
    width: 100%;
    height: 90px;
    min-height: 90px;
}

/* Medium Rectangle 300x250 */
.ad-slot.ad-rectangle {
    max-width: 300px;
    width: 100%;
    height: 250px;
    min-height: 250px;
}

/* Large Rectangle 336x280 */
.ad-slot.ad-rectangle-large {
    max-width: 336px;
    width: 100%;
    height: 280px;
    min-height: 280px;
}

/* In-feed Native - matches card dimensions */
.ad-slot.ad-native-card {
    aspect-ratio: 1;
    min-height: 280px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.06) 0%, rgba(255, 122, 24, 0.04) 100%);
    border-style: dashed;
}

/* Responsive in-article */
.ad-slot.ad-in-article {
    max-width: 100%;
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    margin: 2rem 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ad-slot.ad-leaderboard {
        height: 100px;
        min-height: 100px;
    }
}

.ad-slot:hover {
    border-color: rgba(147, 51, 255, 0.35);
    background: linear-gradient(135deg, rgba(147, 51, 255, 0.05) 0%, rgba(46, 125, 255, 0.03) 100%);
}

/* ============================================
   Global select dropdown - dark theme consistency
   Matches the date-select styling used in register.html.
   color-scheme: dark triggers the browser's native dark-mode
   dropdown (including the transparent dark hover highlight).
   ============================================ */
select {
    color-scheme: dark;
}
select option {
    background-color: #0d0b1f;
    color: #ffffff;
}

/* FIX D.4.2.1.ב — friend-section span inherits font from parent h2 */
.profile-section-title span {
    font-family: inherit;
}

/* FIX D.4.2.1.ב — chat tabs unified to Rubik */
.chat-tab {
    font-family: 'Rubik', 'Heebo', sans-serif !important;
}

/* FIX D.4.2.2 (revised) — hide logo-crack-branch on hover, override crackBranchFade animation */
.logo:hover .logo-crack-branch {
    opacity: 0 !important;
    animation: none !important;
    transition: opacity 0.3s ease;
}

/* FIX D.4.2.2 — ה' — chat-hero styles (mirror of forum-hero) */
.chat-hero {
    padding: 10rem 2rem 0; /* FIX D.4.2.4 — ב — הסרת padding-bottom בסקשן הצ'אט */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.chat-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(1.3);
}

.chat-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(109, 58, 255, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 15, 0.6) 0%, var(--bg-dark) 100%);
}

.chat-hero .container {
    position: relative;
    z-index: 2;
}

.chat-hero h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 1px;
    margin: 1rem 0;
    text-transform: uppercase;
    font-weight: 900;
}

.chat-hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}
/* end FIX D.4.2.2 — ה' */


/* === ד.4.6 — Forum body expand === */
.thread-body.expanded {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

.thread-readmore-btn {
    background: transparent;
    border: none;
    color: var(--purple-light);
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-block;
}

.thread-readmore-btn:hover {
    color: var(--purple);
    text-decoration: underline;
}
/* === end ד.4.6 === */
/* FIX — center text inside .btn-ghost when stretched to full width inside modals */
.game-modal-overlay .btn-ghost,
.rating-modal-overlay .btn-ghost,
.site-rating-modal .btn-ghost {
    justify-content: center;
    text-align: center;
}

/* Fix R12.1: blog search input - keep icon clear of placeholder/text in RTL */
.blog-search-wrapper .blog-search-input {
    padding-inline-start: 3rem;
}

/* ============================================
   FIX 14.4: Forum pagination
   ============================================ */
.forum-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 1rem;
    flex-wrap: wrap;
    direction: ltr;
}

.forum-pagination:empty {
    margin: 0;
}

.forum-pagination .pagination-btn {
    background: rgba(147, 51, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(147, 51, 255, 0.3);
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.forum-pagination .pagination-btn:hover:not(:disabled):not(.active) {
    background: rgba(147, 51, 255, 0.25);
    border-color: rgba(147, 51, 255, 0.6);
    color: #fff;
    transform: translateY(-2px);
}

.forum-pagination .pagination-btn.active {
    background: linear-gradient(135deg, var(--purple, #9333ff), var(--orange, #ff7a18));
    border-color: rgba(255, 122, 24, 0.6);
    color: #fff;
    box-shadow: 0 0 15px rgba(147, 51, 255, 0.5);
    cursor: default;
}

.forum-pagination .pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.forum-pagination .pagination-arrow {
    font-size: 1.3rem;
    line-height: 1;
}

.forum-pagination .pagination-ellipsis {
    color: rgba(255, 255, 255, 0.45);
    padding: 0 0.25rem;
    font-weight: 600;
}

/* ============================================
   Round 16.3.1 — User stream thumbnails (platform-themed)
   ============================================ */
.stream-thumb-username {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', 'Rajdhani', sans-serif;
    font-size: 3.2rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    padding: 0 1rem;
    text-align: center;
    word-break: break-word;
    line-height: 1.05;
}

.stream-thumb-logo {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    padding: 7px;
    backdrop-filter: blur(4px);
    z-index: 2;
}
.stream-thumb-logo svg {
    width: 100%;
    height: 100%;
}

/* Platform-specific gradients (same aspect/size as demo thumbs) */
.stream-thumb.stream-platform-youtube {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 50%, #800000 100%);
}
.stream-thumb.stream-platform-twitch {
    background: linear-gradient(135deg, #9146ff 0%, #6441a5 50%, #392e5c 100%);
}
.stream-thumb.stream-platform-kick {
    background: linear-gradient(135deg, #53fc18 0%, #2ecc40 50%, #1a7a26 100%);
}
.stream-thumb.stream-platform-facebook {
    background: linear-gradient(135deg, #1877f2 0%, #0e5dba 50%, #073d80 100%);
}
.stream-thumb.stream-platform-tiktok {
    background: linear-gradient(135deg, #25f4ee 0%, #ff0050 50%, #010101 100%);
}

/* Small responsive tweak — shrink the username text on narrow cards */
@media (max-width: 768px) {
    .stream-thumb-username {
        font-size: 2.4rem;
        letter-spacing: 2px;
    }
}

/* ============================================
   Round 16.3.2 — Fix overlap of "השידור שלי" + LIVE,
   remove redundant large platform logo
   ============================================ */
.stream-thumb .stream-mine-badge {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
}
.stream-thumb .stream-thumb-logo {
    display: none !important;
}

/* ============================================
   Round 16.3.3 — Remove redundant "השידור שלי" badge
   ============================================ */
.stream-thumb .stream-mine-badge {
    display: none !important;
}

/* ============================================
   MOBILE NAV-AUTH FIT + USERNAME CIRCLE + ONLINE BADGE
   Added: append-only, mobile-only (<=900px).
   Does NOT modify any existing rules.
   ============================================ */
@media (max-width: 900px) {
    /* --- Fix 1: nav-auth buttons must all fit on narrow mobile.
       Tighten gaps and paddings so live + bell + kofi + user-avatar
       fit within the viewport without horizontal clipping. */
    .navbar .nav-auth {
        gap: 0.35rem;
        padding: 0;
        flex-wrap: nowrap;
    }
    .navbar .nav-auth .nav-kofi-btn {
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
        flex-shrink: 0;
    }
    .navbar .nav-auth .nav-kofi-btn .kofi-btn-text {
        display: none;
    }
    .navbar .nav-auth .nav-live-round,
    .navbar .nav-auth .nav-notification-bell {
        flex-shrink: 0;
    }

    /* --- Fix 2: collapse the username text on .nav-user-btn while
       keeping the .nav-mini-avatar circle visible (same look as bell/kofi). */
    .navbar .nav-auth .nav-user-btn {
        padding: 0;
        gap: 0;
        font-size: 0;
        line-height: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
    }
    .navbar .nav-auth .nav-user-btn .nav-mini-avatar {
        font-size: 0.85rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0;
        text-indent: 0;
        direction: ltr;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
    }

    /* --- Fix 3: online status badge aligned with name/role row in profile. */
    .profile-main-info .profile-name-row {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .profile-main-info .profile-name-row .online-status-badge {
        order: -1;
        margin: 0;
    }
    .profile-main-info .user-role-badge {
        justify-content: flex-start;
    }
}

/* === Navbar desktop fit (added 2026-05-28) === */
@media (min-width: 901px) and (max-width: 1980px) {
    .nav-container { gap: 1.25rem; padding: 0 1.5rem; }
    .nav-links { gap: 0.4rem; padding: 0 0.5rem; }
    .nav-links a { padding: 0.4rem 0.65rem; font-size: 0.92rem; }
    .nav-auth { gap: 0.45rem; }
    .nav-kofi-btn { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
}

/* === Navbar tighter fit for narrow desktop (added 2026-05-28) === */
@media (min-width: 901px) and (max-width: 1366px) {
    .nav-container { gap: 0.75rem; padding: 0 1rem; }
    .nav-links { gap: 0.25rem; padding: 0 0.25rem; }
    .nav-links a { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
    .nav-auth { gap: 0.35rem; }
    .nav-kofi-btn { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
}
/* ============================================
   Forgot Password Modal (sub-round 2)
   ============================================ */
.fp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 2, 10, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fpFade 0.25s ease;
}
.fp-modal-overlay[hidden] { display: none; }
.fp-modal {
    position: relative;
    background: rgba(13, 11, 31, 0.98);
    border: 1px solid var(--border-purple);
    border-radius: 16px;
    padding: 2.2rem;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-tri), var(--shadow-lg);
    animation: fpRise 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-modal h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.6rem;
}
.fp-modal-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.fp-modal-close {
    position: absolute;
    top: 0.9rem;
    left: 1.1rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.fp-modal-close:hover {
    color: var(--orange);
    transform: rotate(90deg);
}
.fp-modal .form-group { margin-bottom: 1.5rem; }
@keyframes fpFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fpRise {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   DM unread indicator (chat tabs)
   ============================================ */
.chat-tab .dm-tab-dot { display: none; }
.chat-tab.has-unread .dm-tab-dot {
    display: inline-block;
    background: var(--orange, #ff7a18);
    box-shadow: 0 0 8px rgba(255, 122, 24, 0.8);
    animation: dmUnreadPulse 1.2s ease-in-out infinite;
}
@keyframes dmUnreadPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.3); }
}
/* ============================================================
   CHAT SIDEBAR — MOBILE: horizontal compact online list (v24)
   Shows the online-users list on mobile as a scrollable avatar row
   above the chat (it was hidden via display:none in earlier rounds).
   ============================================================ */
@media (max-width: 900px) {
    main.chat-page .chat-shell {
        display: flex !important;
        flex-direction: column !important;
    }
    main.chat-page #chatSidebar,
    main.chat-page .chat-sidebar-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        border-left: 0 !important;
        border-bottom: 1px solid var(--border-soft) !important;
        max-height: none !important;
    }
    main.chat-page .chat-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    main.chat-page .chat-sidebar-header {
        padding: 0.55rem 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        border-bottom: 0 !important;
    }
    main.chat-page .chat-sidebar-header h3 {
        font-size: 0.92rem !important;
    }
    main.chat-page .chat-online-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 0.35rem !important;
        padding: 0.4rem 0.7rem !important;
        flex: 0 0 auto !important;
    }
    main.chat-page .online-user {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding: 0.3rem 0.2rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    main.chat-page .online-user-name {
        font-size: 0.68rem !important;
        flex: none !important;
        width: 100% !important;
        max-width: 54px !important;
        text-align: center !important;
    }
    main.chat-page .online-dot-small {
        display: none !important;
    }
    main.chat-page .chat-sidebar-empty {
        white-space: nowrap !important;
        padding: 0.4rem 0.7rem !important;
    }
}

/* ====== Avatar image inside "registered users" popup circle (home) ====== */
.online-user-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}