:root { 
    --dark-bg: #101010;
    --panel-bg: #1A1A1A;
    --border-color: #444444;
    --text-color: #F5F5F5;
    --text-muted: #888888;
    --primary-accent: #FFFF00; /* زرد نئونی */
    --secondary-accent: #FF003C; /* قرمز/صورتی تند */
    --winner-color: #00FF7F; /* سبز نئونی */
    --vibrant-blue: #3b82f6;
    --vibrant-purple: var(--secondary-accent);
    --vibrant-green: var(--winner-color);
    --vibrant-red: #ef4444;
    --vibrant-gold: var(--primary-accent);
}
body {
    font-family: 'Vazirmatn', sans-serif; 
    margin: 0; 
    background-color: #000;
    color: var(--text-color); 
    padding: 20px 20px 90px 20px;
}

#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.container { max-width: 1200px; margin: 0 auto; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }

.page-header h1 { 
    font-size: 2rem; 
    font-weight: 900; 
    color: var(--primary-accent); 
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-logo {
    height: 13.8rem;
    width: auto;
}

@media (max-width: 768px) {
    body {
        padding-top: 10px; 
    }
    
    .page-header {
        flex-direction: row; 
        margin-bottom: 1rem;
        padding: 0 5px;
        justify-content: center;
    }

    .page-header h1 {
        font-size: 1.4rem; 
        gap: 0.5rem;
    }

    .header-logo {
        height: 3.5rem; 
        width: auto;
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        margin-bottom: 1rem;
    }
    
    .tab-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}
.page-header h1 {
    position: relative;
    text-shadow: 2px 2px 0px var(--secondary-accent);
    animation: text-flicker 3s linear infinite;
}

@keyframes text-flicker {
    0% { opacity: 1; text-shadow: 2px 2px 0 var(--secondary-accent); }
    5% { opacity: 0.8; text-shadow: -2px -2px 0 var(--primary-accent); }
    10% { opacity: 1; text-shadow: 2px 2px 0 var(--secondary-accent); }
    100% { opacity: 1; }
}
.tabs {
    position: sticky;
    top: 0;
    background: rgba(16, 16, 16, 0.95); 
    backdrop-filter: blur(10px);
    z-index: 900;
    padding-top: 10px;
}

.tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem; }
.tab-btn { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0.8rem 1.2rem; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; }
.tab-btn.active { color: var(--primary-accent); border-bottom-color: var(--primary-accent); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tournaments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

.tournament-card {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 12px; 
    display: flex; 
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.tournament-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 0 15px rgba(255, 255, 0, 0.2);
}

.card-logo-container {
    width: 100%; height: 150px; background-color: rgba(42, 54, 71, 0.5);
    display: flex; align-items: center; justify-content: center;
}
.card-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.card-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.card-header { padding-bottom: 1rem; margin-bottom: 1rem; }
.card-header h3 { margin: 0; font-size: 1.4rem; color: var(--primary-accent); display: flex; align-items: center; gap: 0.5rem; }
.card-body { flex-grow: 1; }
.info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.95rem; }
.info-row .label { color: var(--text-muted); }
.info-row .value { font-weight: 700; }
.prize-value { color: var(--primary-accent); }
.status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: #111; }
.status-registration { background-color: var(--vibrant-green); }
.status-active { background-color: var(--vibrant-blue); }
.status-finished { background-color: var(--text-muted); }

.card-footer { margin-top: 1.5rem; }
.cta-button { 
    padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 700; 
    border-radius: 8px; text-decoration: none; color: #111; 
    transition: all 0.3s ease; cursor: pointer; border: none;
    width: 100%; display: block; text-align: center;
}
.btn-primary { background-color: var(--primary-accent); }
.btn-secondary { background-color: var(--vibrant-blue); color: white; }
.btn-success { background-color: var(--vibrant-green); }
.btn-disabled { background-color: var(--border-color); cursor: not-allowed; color: var(--text-muted); }

.notification-toast {
    position: fixed; bottom: -100px;
    left: 50%; transform: translateX(-50%);
    background-color: var(--secondary-accent); color: white; padding: 1rem 2rem;
    border-radius: 8px; z-index: 2000; transition: bottom 0.5s ease;
    opacity: 0;
}
.notification-toast.show { bottom: 90px; opacity: 1; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: none; justify-content: center;
    align-items: center; z-index: 1000;
}
.modal-overlay.show { display: flex; }
.modal-content {
    background-color: var(--panel-bg); border-radius: 12px;
    padding: 2rem; width: 90%; max-width: 1100px;
    border: 1px solid var(--border-color);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-header h2 { margin: 0; color: var(--primary-accent); }
.modal-close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
.modal-body { max-height: 80vh; overflow-y: auto; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.form-group input {
    width: 100%; box-sizing: border-box; background-color: var(--dark-bg); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 0.75rem; color: var(--text-color); font-family: inherit;
}
.modal-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }

.modal-results-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; }
.modal-results-tab-btn { background: none; border: none; color: var(--text-muted); font-size: 1rem; padding: 0.8rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 700; }
.modal-results-tab-btn.active { color: var(--primary-accent); border-bottom-color: var(--primary-accent); }
.modal-results-tab-content { display: none; }
.modal-results-tab-content.active { display: block; animation: fadeIn 0.5s; }

.verified-badge { color: var(--vibrant-blue); font-size: 1.1rem; vertical-align: middle; }

.bracket-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1.5rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-accent) var(--panel-bg);
}
.bracket-container::-webkit-scrollbar { height: 8px; }
.bracket-container::-webkit-scrollbar-track { background: var(--panel-bg); }
.bracket-container::-webkit-scrollbar-thumb { background-color: var(--primary-accent); border-radius: 6px; }

.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 300px;
}

.bracket-round-title {
    font-family: 'Black Ops One', cursive;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-accent);
    text-shadow: 0 0 5px var(--primary-accent), 0 0 10px var(--secondary-accent);
}

.bracket-matchup {
    background-color: var(--panel-bg);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 2.5rem;
    position: relative;
    transition: all 0.3s ease;
    background-image: linear-gradient(rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.9)), url(https://www.transparenttextures.com/patterns/noisy-grid.png);
}
.bracket-matchup:hover {
    border-color: var(--primary-accent);
}

.bracket-matchup::after {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    background-color: var(--primary-accent);
    color: #000;
    padding: 4px 8px;
    font-family: 'Black Ops One', cursive;
    font-size: 1rem;
    border-radius: 4px;
    z-index: 10;
}
.bracket-round:first-child .bracket-matchup::after {
    display: none;
}

.bracket-participant {
    padding: 1rem 1.2rem;
}
.bracket-participant:first-child {
    border-bottom: 2px dashed var(--border-color);
}

.bracket-participant.winner .bracket-username {
    color: var(--winner-color);
    text-shadow: 0 0 8px var(--winner-color);
}
.bracket-participant.winner .bracket-avatar {
    border-color: var(--winner-color);
    box-shadow: 0 0 10px var(--winner-color);
}

.champion {
    text-align: center;
    padding: 2rem;
    background-color: var(--panel-bg);
    border: 2px solid var(--primary-accent);
    border-radius: 4px;
    box-shadow: 0 0 20px var(--primary-accent);
}
.champion .fa-trophy {
    font-size: 4rem;
    color: var(--primary-accent);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px var(--primary-accent);
}
.champion-name {
    font-size: 1.8rem;
    font-weight: 900;
}

.bracket-participant-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.bracket-participant-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bracket-avatar-wrapper {
    position: relative; width: 44px; height: 44px; flex-shrink: 0;
}
.bracket-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background-size: cover; background-position: center;
    border: 2px solid var(--border-color);
}
.bracket-avatar-frame {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;
}
.bracket-participant-info:hover .bracket-username {
    color: var(--primary-accent);
}
.bracket-username {
    font-weight: 700;
    font-size: 1.1rem;
}
.play-entry-btn {
    background-color: var(--primary-accent);
    color: var(--dark-bg);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: background-color 0.3s ease;
}
.play-entry-btn:hover {
    background-color: var(--winner-color);
}
#video-player-container video {
    width: 100%;
    border-radius: 8px;
}

.entries-list { list-style: none; padding: 0; }
.entries-list li {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); gap: 1rem;
}
.entries-list li:last-child { border-bottom: none; }
.entry-user-info { display: flex; align-items: center; gap: 1rem; }
.entry-avatar-wrapper { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.entry-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background-size: cover; background-position: center; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.entry-avatar-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.entry-username { font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; }
.entry-username:hover { color: var(--primary-accent); }
.entry-video-player { width: 100%; max-width: 720px; border-radius: 8px; background-color: #000; }

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--panel-bg);
    border-radius: 10px;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}
.leaderboard-item:hover {
    transform: translateX(5px);
    background-color: #374151;
}
.leaderboard-rank {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-muted);
    width: 50px;
    flex-shrink: 0;
    text-align: center;
}
.leaderboard-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
    text-decoration: none;
    color: var(--text-color);
}
.leaderboard-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.leaderboard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.leaderboard-avatar-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
.leaderboard-username {
    font-weight: 700;
    font-size: 1.1rem;
}
.leaderboard-item.rank-1 { border-left-color: var(--primary-accent); background: linear-gradient(to right, #1A1A1A, #3a3221); }
.leaderboard-item.rank-1 .leaderboard-rank { color: var(--primary-accent); }
.leaderboard-item.rank-2 { border-left-color: #c0c0c0; background: linear-gradient(to right, #1A1A1A, #31373e); }
.leaderboard-item.rank-2 .leaderboard-rank { color: #c0c0c0; }
.leaderboard-item.rank-3 { border-left-color: #cd7f32; background: linear-gradient(to right, #1A1A1A, #3a2d21); }
.leaderboard-item.rank-3 .leaderboard-rank { color: #cd7f32; }

.judges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1rem; }
.judge-card { background-color: var(--panel-bg); padding: 1.5rem; border-radius: 12px; text-align: center; }
.judge-avatar-wrapper { width: 116px; height: 116px; position: relative; margin: 0 auto 1rem; }
.judge-avatar { 
    width: 80px; height: 80px; border-radius: 50%; 
    background-size: cover; background-position: center; 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.judge-avatar-frame { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.judge-username { font-weight: 700; font-size: 1.1rem; }
.judge-username a { color: inherit; text-decoration: none; }
.judge-username a:hover { color: var(--primary-accent); }
.judge-opinion { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-muted); text-align: right; white-space: pre-wrap; }
.judge-opinion.not-submitted { font-style: italic; }

.opinion-form-container { margin-top: 2rem; background-color: rgba(0, 255, 127, 0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--winner-color); }
.opinion-form-container h4 { margin: 0 0 1rem 0; color: var(--winner-color); }
.opinion-form-container textarea { width: 100%; min-height: 120px; padding: 0.8rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: #374151; color: white; font-family: inherit; box-sizing: border-box; resize: vertical; }

.matchup-voting-section { padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); }
.vote-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.vote-count { font-size: 0.9rem; color: var(--text-muted); }
.vote-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-vote { font-size: 0.9rem; padding: 0.5rem; background-color: var(--vibrant-blue); color: white; }
.btn-vote.voted { background-color: var(--winner-color); color: #111; }
.btn-vote:disabled:not(.voted) { background-color: var(--border-color); }
.hidden { display: none; }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background: rgba(17, 24, 39, 0.85); backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; align-items: center; z-index: 1000; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; transition: color 0.2s ease; gap: 4px; flex: 1; }
.nav-item i { font-size: 1.4rem; }
.nav-item.active { color: var(--vibrant-blue); }
.nav-item:hover { color: var(--text-color); }

/* --- بهینه‌سازی کانتینر اصلی درخت رقابت‌ها --- */
.bracket-container {
    display: flex;
    gap: 2.5rem; /* فاصله بیشتر برای خطوط فرضی */
    overflow-x: auto;
    padding: 2rem 1rem 3rem 1rem;
    scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
    -ms-overflow-style: none; /* مخفی کردن در IE */
    scroll-snap-type: x mandatory; /* فعال‌سازی اسکرول روان و قفل‌شونده در موبایل */
    scroll-behavior: smooth;
}
.bracket-container::-webkit-scrollbar { 
    display: none; /* مخفی کردن کامل اسکرول‌بار برای تمیزی UI */
}

/* --- ستون‌های هر مرحله --- */
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: center; /* مرکزچین کردن مسابقات در ستون */
    gap: 1.5rem;
    min-width: 280px;
    scroll-snap-align: center; /* قفل شدن صفحه روی این ستون در موبایل */
}

/* نمای مدرن کارت‌های تقابل (VS) */
.bracket-matchup {
    background: rgba(30, 35, 45, 0.6);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; /* گوشه‌های گردتر */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bracket-matchup:hover {
    border-color: var(--primary-accent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(255, 255, 0, 0.15);
}

/* نشان VS حرفه‌ای‌تر */
.bracket-matchup::after {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary-accent), #d4d400);
    color: #000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Black Ops One', cursive;
    font-size: 1rem;
    border-radius: 50%; /* دایره‌ای کردن نشان VS */
    z-index: 10;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.4), inset 0 0 5px rgba(255,255,255,0.5);
    border: 3px solid var(--dark-bg);
}

.bracket-participant {
    padding: 0.8rem 1rem;
    transition: background 0.3s ease;
}
.bracket-participant:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px 16px 0 0;
}
.bracket-participant:last-child {
    border-radius: 0 0 16px 16px;
}

/* برجسته کردن برنده */
.bracket-participant.winner {
    background: linear-gradient(90deg, rgba(0, 255, 127, 0.1) 0%, transparent 100%);
}
.bracket-participant.winner .bracket-username {
    color: var(--winner-color);
    text-shadow: 0 0 10px rgba(0, 255, 127, 0.4);
}

/* ریسپانسیو کردن براکت برای موبایل */
@media (max-width: 768px) {
    .bracket-round {
        min-width: 85vw; /* در موبایل هر مرحله 85 درصد عرض را می‌گیرد تا مرحله بعدی کمی دیده شود */
    }
    .bracket-matchup::after {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        /* انتقال نشان VS به وسط کارت در موبایل برای صرفه‌جویی در فضا */
    }
}

/* --- جدول رده‌بندی (Leaderboard) --- */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* فاصله یکدست */
    padding: 0.5rem;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 45px auto 1fr; /* استفاده از گرید برای نظم دقیق ستون‌ها */
    align-items: center;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.leaderboard-item:hover {
    transform: scale(1.01) translateX(5px);
    background: rgba(255, 255, 255, 0.08);
}

.leaderboard-rank {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-muted);
    text-align: center;
}

/* --- استایل اختصاصی 3 نفر برتر (VIP Look) --- */
.leaderboard-item.rank-1, 
.leaderboard-item.rank-2, 
.leaderboard-item.rank-3 {
    padding: 1rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* افکت نور پس‌زمینه برای نفرات برتر */
.leaderboard-item.rank-1::before,
.leaderboard-item.rank-2::before,
.leaderboard-item.rank-3::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
}

/* نفر اول (طلا) */
.leaderboard-item.rank-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    transform: scale(1.03);
    margin: 0.5rem 0 1rem 0;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.1);
    z-index: 3;
}
.leaderboard-item.rank-1::before { background-color: #ffd700; }
.leaderboard-item.rank-1 .leaderboard-rank { color: #ffd700; font-size: 1.8rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }

/* نفر دوم (نقره) */
.leaderboard-item.rank-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(192, 192, 192, 0.3);
    margin-bottom: 0.5rem;
}
.leaderboard-item.rank-2::before { background-color: #c0c0c0; }
.leaderboard-item.rank-2 .leaderboard-rank { color: #c0c0c0; font-size: 1.5rem; }

/* نفر سوم (برنز) */
.leaderboard-item.rank-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(205, 127, 50, 0.3);
    margin-bottom: 1rem;
}
.leaderboard-item.rank-3::before { background-color: #cd7f32; }
.leaderboard-item.rank-3 .leaderboard-rank { color: #cd7f32; font-size: 1.3rem; }

/* جلوگیری از بهم ریختن نام‌های طولانی در موبایل */
.leaderboard-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* تنظیم برای موبایل */
    display: inline-block;
    vertical-align: middle;
}
@media (min-width: 768px) {
    .leaderboard-username { max-width: 300px; }
}
/* --- باکس‌های ثابت راهنما (Info Panels) --- */
.info-panel {
    background: rgba(59, 130, 246, 0.08); /* پس‌زمینه شیشه‌ای آبی */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 4px solid var(--vibrant-blue); /* خط رنگی سمت راست برای زبان فارسی */
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeInDown 0.5s ease forwards;
}

.info-panel i {
    color: var(--vibrant-blue);
    font-size: 1.5rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.info-panel strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #fff;
    font-size: 1rem;
}

/* استایل مخصوص بخش ثبت‌نام (تم زرد/هشدار) */
.info-panel.warning-panel {
    background: rgba(255, 255, 0, 0.05);
    border-right-color: var(--primary-accent);
}
.info-panel.warning-panel i {
    color: var(--primary-accent);
}

/* استایل مخصوص بخش پایان‌یافته (تم سبز) */
.info-panel.success-panel {
    background: rgba(0, 255, 127, 0.05);
    border-right-color: var(--winner-color);
}
.info-panel.success-panel i {
    color: var(--winner-color);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .info-panel {
        padding: 1rem;
        font-size: 0.9rem;
    }
    .info-panel i {
        font-size: 1.2rem;
    }
}
/* =========================================================
   کاهش طول و فشرده‌سازی حداکثری براکت‌های فعال در صفحه
   ========================================================= */

/* کاهش فاصله بین ستون‌ها (راندها) */
.inline-bracket-wrapper .bracket-container {
    padding: 1.5rem;
    gap: 1rem; 
}

/* طول/عرض هر باکس مسابقه به شدت کاهش یافت */
.inline-bracket-wrapper .bracket-round {
    min-width: 170px; 
    gap: 0.8rem;
}

/* کاهش پدینگ داخلی باکس‌ها */
.inline-bracket-wrapper .bracket-participant {
    padding: 0.5rem 0.6rem; 
}

/* فاصله بین مسابقات عمودی کمتر شد */
.inline-bracket-wrapper .bracket-matchup {
    margin-bottom: 1rem; 
    border-radius: 10px;
}

/* کنترل اسم‌های طولانی تا باکس رو کش ندن */
.inline-bracket-wrapper .bracket-username {
    font-size: 0.85rem;
    max-width: 75px; /* محدود کردن طول اسم */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* سایز نشان VS رو متناسب با براکت‌های جدید کوچک‌تر کردیم */
.inline-bracket-wrapper .bracket-matchup::after {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
    left: -11px;
}

/* دکمه پلی ویدیو و آواتارها بسیار جمع‌وجور */
.inline-bracket-wrapper .play-entry-btn {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
    margin-left: 0;
}

.inline-bracket-wrapper .bracket-avatar-wrapper {
    width: 28px;
    height: 28px;
    gap: 0.4rem;
}

.inline-bracket-wrapper .bracket-avatar {
    width: 20px;
    height: 20px;
}

.inline-bracket-wrapper .champion .fa-trophy {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.inline-bracket-wrapper .champion-name {
    font-size: 1.1rem;
}

/* ---------------------------------------------------
   تنظیمات اختصاصی موبایل برای براکت‌های جدید
----------------------------------------------------- */
@media (max-width: 768px) {
    .inline-bracket-wrapper .bracket-round {
        min-width: 230px; /* در موبایل خیلی مینیمال و گیمینگ‌تر شد */
    }
    
    .inline-bracket-wrapper .bracket-username {
        max-width: 65px; 
    }
}
/* ایجاد موقعیت نسبی برای راندها جهت کنترل خطوط */
.inline-bracket-wrapper .bracket-round {
    position: relative;
}

/* خط خروجی از سمت چپ هر مسابقه */
.inline-bracket-wrapper .bracket-matchup {
    position: relative;
}

.inline-bracket-wrapper .bracket-matchup::before {
    content: '';
    position: absolute;
    left: -16px; /* اتصال به وسط فاصله بین دو ستون */
    top: 50%;
    width: 16px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}

/* حذف خط برای راند آخر (قهرمان) */
.inline-bracket-wrapper .bracket-round:last-child .bracket-matchup::before {
    display: none;
}
/* نمایش مجدد اسکرول‌بار فقط برای براکت‌ها */
.inline-bracket-wrapper .bracket-container::-webkit-scrollbar { 
    display: block; 
    height: 6px; 
}

/* پس‌زمینه مسیر اسکرول */
.inline-bracket-wrapper .bracket-container::-webkit-scrollbar-track { 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
    margin: 0 1rem; /* فاصله از لبه‌ها */
}

/* خود نوار اسکرول (رنگ زرد نئونی با سایه) */
.inline-bracket-wrapper .bracket-container::-webkit-scrollbar-thumb { 
    background-color: var(--primary-accent); 
    border-radius: 10px; 
    box-shadow: 0 0 10px var(--primary-accent);
}
/* --- کانتینر جذاب شرکت‌کنندگان درون کارت تورنمنت --- */
.participants-preview-container {
    background: rgba(16, 16, 16, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1.2rem;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.participants-preview-container.empty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1.2rem 1rem;
}

.participants-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.preview-title {
    color: var(--text-color);
    font-weight: 700;
}

.preview-capacity {
    color: var(--primary-accent);
    font-weight: 900;
    background: rgba(255, 255, 0, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* اسکرول افقی مخفی برای راحتی در صفحات موبایل */
.participants-avatar-list {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.participants-avatar-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* استایل آواتارهای کوچک گیمینگ */
.participant-mini-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.participant-mini-avatar:hover {
    transform: scale(1.15) translateY(-3px);
    z-index: 2;
}

.participant-mini-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--dark-bg);
}

.participant-mini-avatar i {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.85rem;
    background: var(--dark-bg);
    border-radius: 50%;
    padding: 2px;
}

/* کاربران تایید شده - سبز نئونی */
.participant-mini-avatar.approved {
    border-color: var(--winner-color);
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.4);
}
.participant-mini-avatar.approved i {
    color: var(--winner-color);
}

/* کاربران در انتظار - زرد/نارنجی هشدار */
.participant-mini-avatar.pending {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.participant-mini-avatar.pending i {
    color: #f59e0b;
}
/* تنظیمات نگه‌دارنده آواتار و متن وضعیت */
.participant-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* استایل دهی به متن زیر آواتار */
.participant-status-text {
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

/* رنگ‌بندی اختصاصی وضعیت‌ها */
.text-approved {
    color: var(--winner-color);
    text-shadow: 0 0 5px rgba(0, 255, 127, 0.3);
}

.text-pending {
    color: #f59e0b;
    text-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
}

/* اصلاح تنظیمات تراز بندی در لیست اصلی آواتارها */
.participants-avatar-list {
    align-items: flex-start; /* جلوگیری از کشیده شدن آواتارها */
}
:root { 
    --dark-bg: #0b0f19; /* پس‌زمینه عمیق‌تر و مدرن‌تر */
    --panel-bg: rgba(20, 25, 35, 0.65); /* حالت شیشه‌ای برای پنل‌ها */
    --border-color: rgba(255, 255, 255, 0.1);
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    
    /* رنگ‌های جدید و مدرن به جای زرد مسخره */
    --primary-accent: #06b6d4; /* فیروزه‌ای مدرن (Cyan) */
    --primary-accent-glow: rgba(6, 182, 212, 0.4);
    --secondary-accent: #8b5cf6; /* بنفش نئونی */
    
    --winner-color: #10b981; /* سبز زمردی آرام‌بخش */
    --vibrant-blue: #3b82f6;
    --vibrant-purple: var(--secondary-accent);
    --vibrant-green: var(--winner-color);
    --vibrant-red: #ef4444;
    --vibrant-gold: #fbbf24;
}

/* بک‌گراند متحرک مثل جمینی */
body {
    font-family: 'Vazirmatn', sans-serif; 
    margin: 0; 
    color: var(--text-color); 
    padding: 20px 20px 90px 20px;
    
    /* گرادیانت ملایم و متحرک */
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #312e81, #081426);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh;
}

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

/* آپدیت دکمه‌ها برای حس اپلیکیشنی */
.cta-button { 
    padding: 0.8rem 1.5rem; 
    font-size: 1rem; 
    font-weight: 700; 
    border-radius: 12px; /* لبه‌های گردتر و مدرن */
    text-decoration: none; 
    color: #fff; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer; 
    border: none;
    width: 100%; 
    display: block; 
    text-align: center;
    background-size: 200% auto;
}

.btn-primary { 
    background-image: linear-gradient(to right, #06b6d4 0%, #3b82f6 51%, #06b6d4 100%);
    box-shadow: 0 4px 15px var(--primary-accent-glow);
    color: #fff; 
}

.btn-primary:hover {
    background-position: right center;
    box-shadow: 0 6px 20px var(--primary-accent-glow);
    transform: translateY(-2px);
}

.btn-secondary { 
    background: rgba(59, 130, 246, 0.15); 
    border: 1px solid var(--vibrant-blue);
    color: #fff; 
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background: var(--vibrant-blue);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}
/* =========================================
   بک‌گراند گرادیانت متحرک واقعی RGB (استایل جمینی)
   ========================================= */

/* ۱. شیشه‌ای و شفاف کردن پس‌زمینه اصلی برای دیدن لایه زیرین */
html, body {
    background: transparent !important;
}

/* ۲. ایجاد لایه متحرک RGB در پشت تمام المان‌ها */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    
    /* طیف رنگی RGB مدرن شبیه به جمینی (ترکیب فیروزه‌ای، بنفش، صورتی و سرمه‌ای تیره) */
    background-image: linear-gradient(-45deg, #090d16, #1e1b4b, #4c1d95, #06b6d4, #b5179e, #090d16) !important;
    background-size: 400% 400% !important;
    
    /* سرعت را روی ۸ ثانیه گذاشتم تا حرکت رنگ‌ها کاملاً واضح و سریع‌تر دیده شود */
    -webkit-animation: geminiRGB 8s ease infinite !important;
    animation: geminiRGB 8s ease infinite !important;
}

/* مخفی کردن قطعی پارتیکل‌های قدیمی */
#particle-canvas {
    display: none !important;
}

/* تعریف انیمیشن حرکت روان رنگ‌ها */
@-webkit-keyframes geminiRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes geminiRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* =========================================
   استایل شیشه‌ای و مدرن برای تب‌ها (Glassmorphism)
   ========================================= */
.tabs {
    background: rgba(15, 23, 42, 0.4) !important; /* پس‌زمینه نیمه‌شفاف تیره */
    backdrop-filter: blur(12px) !important; /* افکت تاری شیشه */
    -webkit-backdrop-filter: blur(12px) !important; /* سازگاری با آیفون و سافاری */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* خط مرزی بسیار باریک و شفاف */
    border-radius: 16px !important; /* لبه‌های گرد و اپلیکیشنی */
    padding: 6px !important;
    display: flex !important;
    gap: 8px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.tab-btn {
    background: transparent !important;
    color: #94a3b8 !important; /* رنگ متن خنثی و مدرن */
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

/* حالت هاور (وقتی موس روی تب‌های غیرفعال می‌رود) */
.tab-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}

/* تب فعال (Active) - هماهنگ با تم فیروزه‌ای نئونی جمینی */
.tab-btn.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15)) !important;
    color: #06b6d4 !important; /* رنگ فیروزه‌ای درخشان */
    border: 1px solid rgba(6, 182, 212, 0.4) !important; /* مرز نئونی ملایم */
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.2) !important; /* هاله نورانی زیر تب */
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.4) !important; /* درخشش ملایم متن */
}
/* =========================================
   حل نهایی و قطعی تراز وسط منوی پایینی
   ========================================= */
.bottom-nav {
    position: fixed !important;
    bottom: 16px !important; /* فاصله شیک از پایین صفحه */
    
    /* تکنیک طلایی برای وسط‌چین کردن ۱۰۰٪ در محیط RTL */
    left: 0 !important;
    right: 0 !important;
    width: 90% !important; /* اشغال ۹۰ درصد از عرض صفحه گوشی */
    max-width: 460px !important; /* حداکثر عرض در دسکتاپ */
    margin: 0 auto !important; /* جادوی وسط‌چین کردن خودکار مرورگر */
    transform: none !important; /* جلوگیری از تداخل گلیچ */
    
    /* افکت شیشه‌ای جمینی */
    background: rgba(15, 23, 42, 0.52) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    
    /* لبه‌ها و سایه سه‌بعدی مدرن */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 10px 12px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
    z-index: 10000 !important;
    
    /* چینش آیتم‌های داخلی */
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    box-sizing: border-box !important; /* جلوگیری از بیرون‌زدگی به دلیل پدینگ */
}

/* استایل آیتم‌های داخلی */
.bottom-nav .nav-item {
    color: #94a3b8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    padding: 6px 12px !important;
    border-radius: 14px !important;
}

/* افکت هاور مدرن */
.bottom-nav .nav-item:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* استایل حالت فعال (مثل بخش تورنمنت) */
.bottom-nav .nav-item.active {
    color: #06b6d4 !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(59, 130, 246, 0.12)) !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1) !important;
}

.bottom-nav .nav-item.active i {
    color: #06b6d4 !important;
    filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.4)) !important;
}
/* استایل‌های لایک و کامنت */
.interaction-bar {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-color);
}

.interaction-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.interaction-btn:hover {
    color: var(--text-color);
}

.interaction-btn.btn-like.liked {
    color: var(--vibrant-red);
}
.interaction-btn.btn-like.liked i {
    font-weight: 900; /* توپر شدن قلب */
}

/* استایل لیست کامنت ها داخل مدال */
.comments-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 5px;
}

.comment-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.comment-author {
    color: var(--primary-accent);
    font-weight: bold;
}

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

.comment-input-area textarea {
    width: 100%;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 8px;
    padding: 0.8rem;
    font-family: inherit;
    resize: vertical;
}
.interaction-bar {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.5rem;
    width: 100%;
}

.interaction-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.interaction-btn:hover {
    color: var(--primary-accent);
    border-color: var(--primary-accent);
    background: rgba(6, 182, 212, 0.1);
}
/* =========================================
   استایل‌های فشرده و تراز دقیق لایک و کامنت
   ========================================= */
.inline-interactions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
}

.interaction-btn.mini-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 0 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    
    /* تراز مرکزی دقیق برای جلوگیری از پایین افتادن آیکون */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px; /* ارتفاع ثابت برای هم‌تراز شدن با سایر دکمه‌ها */
    box-sizing: border-box;
    gap: 4px;
    line-height: 1;
    transition: all 0.2s ease;
}

.interaction-btn.mini-btn i {
    color: var(--primary-accent);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.interaction-btn.mini-btn span {
    display: flex;
    align-items: center;
    line-height: 1;
    /* گاهی فونت فارسی به صورت پیش‌فرض کمی بالاتر/پایین‌تر است. اگر نیاز بود با margin-top: 1px تنظیمش کنید */
}

.interaction-btn.mini-btn:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

/* ریسپانسیو اختصاصی برای دکمه‌ها و اسم‌ها */
@media (max-width: 768px) {
    .interaction-btn.mini-btn {
        padding: 0 4px;
        height: 24px; /* در موبایل کمی جمع‌وجورتر */
        font-size: 0.65rem;
    }
    .interaction-btn.mini-btn i {
        font-size: 0.7rem;
    }
    /* در موبایل عرض اسم را به شدت محدود می‌کنیم تا دکمه‌ها بیرون نزنند */
    .bracket-participant-info .bracket-username {
        max-width: 60px; 
    }
}
/* ========================================================
   استایل جدید براکت‌ها: تقارن آینه‌ای، تم آتیشی و نام وسط‌چین روی لبه
   ======================================================== */

/* ۱. ایجاد موقعیت نسبی برای شرکت‌کننده‌ها */
.inline-bracket-wrapper .bracket-participant {
    position: relative;
    /* بک‌گراند تیره شیشه‌ای برای کادر هر شخص */
    background: rgba(15, 23, 42, 0.4); 
    transition: all 0.3s ease;
}

/* نفر اول (بالا): دادن فضای خالی در بالا برای قرارگیری نام */
.inline-bracket-wrapper .bracket-participant:first-child {
    padding: 1.5rem 0.8rem 0.8rem 0.8rem !important;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(255, 69, 0, 0.2);
}

/* نفر دوم (پایین): دادن فضای خالی در پایین برای قرارگیری نام */
.inline-bracket-wrapper .bracket-participant:last-child {
    padding: 0.8rem 0.8rem 1.5rem 0.8rem !important;
    border-radius: 0 0 12px 12px;
}

/* ۲. استایل اصلی و تم آتیشی برای نام کاربری */
.bracket-username {
    position: absolute;
    
    /* فرمول طلایی برای وسط‌چین کردن نام روی لبه (RTL) */
    right: 50%;
    transform: translateX(50%);
    
    /* کادر شیشه‌ای و حاشیه داغ */
    background: rgba(20, 5, 5, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 15px;
    border: 1px solid rgba(255, 69, 0, 0.6);
    border-radius: 6px;
    z-index: 10;
    
    font-size: 0.9rem !important;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap; /* جلوگیری از شکستن خط اسم‌های طولانی */
    
    /* گرادیانت آتیشی برای متن */
    background-image: linear-gradient(90deg, #ff1a1a, #ff7b00, #ffea00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* درخشش و هاله آتش */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(255, 69, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ۳. تعیین جایگاه نام نفر اول و دوم روی لبه‌ها */
.inline-bracket-wrapper .bracket-participant:first-child .bracket-username {
    top: -14px; /* کشیده شده به مرکز لبه بالایی */
    bottom: auto;
}

.inline-bracket-wrapper .bracket-participant:last-child .bracket-username {
    bottom: -14px; /* کشیده شده به مرکز لبه پایینی */
    top: auto;
}

/* ۴. افکت داغ‌تر موقع هاور شدن روی نام */
.bracket-participant:hover .bracket-username {
    /* ترکیب حفظ وسط‌چین بودن با زوم شدن (اسکیل) */
    transform: translateX(50%) scale(1.1); 
    
    border-color: #ffea00; /* حاشیه زرد درخشان */
    box-shadow: 0 6px 15px rgba(255, 69, 0, 0.7), inset 0 0 15px rgba(255, 123, 0, 0.6);
}

/* ۵. بزرگ‌تر کردن آواتارها و هماهنگی با تم آتش */
.bracket-avatar-wrapper {
    width: 54px !important;
    height: 54px !important;
}

.bracket-avatar {
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #ff7b00 !important; /* فریم آواتار نارنجی */
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.4);
    transition: all 0.3s ease;
}

/* افکت زوم روی آواتار هنگام هاور */
.bracket-participant:hover .bracket-avatar {
    transform: scale(1.05);
    border-color: #ffea00 !important;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.6);
}
/* ========================================================
   استایل بخش قهرمان (Champion): نام روی لبه بالا، کاپ و آواتار مرکزی
   ======================================================== */

/* ۱. استایل کلی باکس قهرمان */
.inline-bracket-wrapper .champion {
    position: relative;
    text-align: center;
    /* پدینگ بیشتر در بالا برای جا دادن نام روی لبه و کاپ */
    padding: 2.5rem 1.5rem 1.5rem 1.5rem !important; 
    
    background: rgba(30, 25, 5, 0.6); /* بک‌گراند تیره با هاله طلایی */
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 215, 0, 0.4); /* حاشیه طلایی برای قهرمان */
    border-radius: 16px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
}

/* ۲. نام قهرمان چسبیده به لبه بالا (دقیقاً مثل براکت‌ها) */
.inline-bracket-wrapper .champion .bracket-username {
    position: absolute;
    top: -16px; /* کشیده شده به لبه بالا */
    right: 50%;
    transform: translateX(50%);
    
    /* استایل پادشاهی و طلایی */
    background: rgba(20, 15, 0, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.8); 
    padding: 5px 22px;
    border-radius: 8px;
    z-index: 10;
    
    font-size: 1.1rem !important; /* کمی بزرگ‌تر از بقیه شرکت‌کننده‌ها */
    font-weight: 900;
    white-space: nowrap;
    
    /* گرادیانت آتش طلایی برای متن */
    background-image: linear-gradient(90deg, #ffea00, #ffbb00, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* درخشش طلایی */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ۳. کاپ قهرمانی در وسط و بالای آواتار */
.inline-bracket-wrapper .champion .fa-trophy {
    font-size: 2.5rem;
    color: #ffd700; /* رنگ طلایی خالص */
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.8); /* نورانی شدن کاپ */
    margin-bottom: 1rem; /* فاصله بین کاپ و آواتار */
    z-index: 2;
    /* یک انیمیشن ریز برای شناور بودن کاپ (اختیاری) */
    animation: floatTrophy 3s ease-in-out infinite; 
}

/* ۴. آواتار قهرمان (بزرگ‌تر و باشکوه‌تر) */
.inline-bracket-wrapper .champion .bracket-avatar-wrapper {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto;
}

.inline-bracket-wrapper .champion .bracket-avatar {
    width: 100% !important;
    height: 100% !important;
    border: 3px solid #ffd700 !important; /* فریم طلایی ضخیم‌تر */
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

/* ۵. افکت هاور برای کل باکس قهرمان */
.inline-bracket-wrapper .champion:hover {
    transform: scale(1.02);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.25);
}

/* بزرگ‌نمایی نام قهرمان موقع هاور */
.inline-bracket-wrapper .champion:hover .bracket-username {
    transform: translateX(50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.7), inset 0 0 20px rgba(255, 255, 0, 0.6);
}

/* انیمیشن شناور موندن کاپ */
@keyframes floatTrophy {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); text-shadow: 0 0 25px rgba(255, 215, 0, 1); }
    100% { transform: translateY(0px); }
}
/* ========================================================
   شکستن ساختار یک‌سطری و ستونی کردن محتوای قهرمان
   ======================================================== */

/* تبدیل باکس محتوای قهرمان از حالت افقی به عمودی */
.inline-bracket-wrapper .champion .bracket-participant-content {
    display: flex !important;
    flex-direction: column !important; /* چینش از بالا به پایین */
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important; /* فاصله بین عکس پروفایل و دکمه‌ها */
    width: 100% !important;
}

/* تنظیم بخش عکس پروفایل (وسط‌چین کردن دقیق) */
.inline-bracket-wrapper .champion .bracket-participant-info {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* تنظیم نوار دکمه‌ها (لایک، کامنت، کارت و پلی) در سطر پایین */
.inline-bracket-wrapper .champion .bracket-participant-content > div:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.6rem !important; /* فاصله بین دکمه‌ها */
    flex-wrap: wrap !important;
    
    /* یک بک‌گراند خیلی محو برای نوار دکمه‌های قهرمان (اختیاری برای زیبایی بیشتر) */
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px !important;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

/* بزرگ‌تر کردن دکمه‌ها برای شخص قهرمان که جذاب‌تر بشه */
.inline-bracket-wrapper .champion .interaction-btn.mini-btn,
.inline-bracket-wrapper .champion .bracket-card-btn,
.inline-bracket-wrapper .champion .play-entry-btn {
    transform: scale(1.1); /* ۱۰ درصد بزرگ‌تر از براکت‌های معمولی */
    margin: 0 3px !important;
}

/* حذف نام کاربری از جریان عادی که تداخل نکنه (چون از قبل فرستادیمش روی لبه) */
.inline-bracket-wrapper .champion .bracket-participant-info .bracket-username {
    position: absolute !important;
}
/* ========================================================
   اصلاح و فیت کردن قاب پروفایل (Frame) روی آواتار
   ======================================================== */

/* ۱. بزرگ کردن محفظه اصلی برای جا دادن قاب‌های گرافیکی */
.inline-bracket-wrapper .bracket-avatar-wrapper {
    position: relative !important;
    width: 66px !important; /* فضای کافی برای قاب */
    height: 66px !important;
}

/* ۲. تنظیم خود عکس پروفایل (کوچک‌تر از محفظه و دقیقاً وسط‌چین شده) */
.inline-bracket-wrapper .bracket-avatar {
    position: absolute !important;
    width: 48px !important; /* عکس کوچک‌تر از قاب تا قاب بیرون بزند */
    height: 48px !important;
    top: 50% !important;
    left: 50% !important;
    
    /* وسط‌چین کردن دقیق عکس */
    transform: translate(-50%, -50%) !important; 
    
    border: 2px solid #ff7b00 !important;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.4);
    transition: all 0.3s ease;
    
    z-index: 1 !important; /* عکس باید زیر قاب باشد */
}

/* ۳. تنظیم قاب تا کل محفظه را بپوشاند و روی عکس بیفتد */
.inline-bracket-wrapper .bracket-avatar-frame {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important; /* قاب می‌آید روی عکس */
    pointer-events: none;
}

/* ۴. افکت زوم موقع هاور (حفظ مرکزیت عکس) */
.inline-bracket-wrapper .bracket-participant:hover .bracket-avatar {
    transform: translate(-50%, -50%) scale(1.1) !important;
    border-color: #ffea00 !important;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.6);
}

/* ========================================================
   تنظیم قاب برای بخش قهرمان (بزرگ‌تر و حماسی‌تر)
   ======================================================== */
   
.inline-bracket-wrapper .champion .bracket-avatar-wrapper {
    width: 90px !important; /* محفظه بسیار بزرگ برای قاب قهرمان */
    height: 90px !important;
}

.inline-bracket-wrapper .champion .bracket-avatar {
    width: 66px !important; /* عکس قهرمان متناسب با قاب */
    height: 66px !important;
    border: 3px solid #ffd700 !important; 
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

/* زوم شدن عکس قهرمان موقع هاور */
.inline-bracket-wrapper .champion:hover .bracket-avatar {
    transform: translate(-50%, -50%) scale(1.1) !important;
}
/* حذف دکمه لایک و کامنت از کارت قهرمان */
.champion .interaction-bar {
    display: none !important;
}
.bottom-nav {
    display: none !important;
}

/* ========================================================
   ۱. پس‌زمینه متحرک RGB با پوشش کامل و یکپارچه صفحه
   ======================================================== */

html, body {
    background: transparent !important;
}

#particle-canvas {
    display: none !important;
}

body::before {
    content: "";
    position: fixed !important;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: -1 !important;
    pointer-events: none; 
    
    /* استفاده از دو رنگ هم‌خانواده نزدیک به هم برای پوشش یکدست و کامل صفحه */
    background-image: linear-gradient(135deg, #ff0055, #ff5500) !important;
    background-size: 100% 100% !important;
    
    /* انیمیشن چرخش چرخه رنگ روی کل صفحه */
    -webkit-animation: rgbFullPage 12s linear infinite !important;
    animation: rgbFullPage 12s linear infinite !important;
}

/* انیمیشن چرخش رنگ که کل صفحه را با هم تغییر رنگ می‌دهد */
@-webkit-keyframes rgbFullPage {
    0% { -webkit-filter: hue-rotate(0deg); }
    100% { -webkit-filter: hue-rotate(360deg); }
}

@keyframes rgbFullPage {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}


/* ========================================================
   ۲. استایل شیشه‌ای تیره و شفاف برای کانتینر راهنماها (Info Panels)
   ======================================================== */

.info-panel {
    /* پس‌زمینه دارک شیشه‌ای غلیظ برای خنثی کردن حرکت رنگ‌های پشت سرش */
    background: rgba(10, 12, 18, 0.85) !important; 
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    
    /* حاشیه بسیار ظریف برای حس سه‌بعدی */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: 4px solid var(--vibrant-blue) !important; /* خط رنگی اختصاصی سمت راست */
    
    border-radius: 16px !important;
    padding: 1.2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

/* لود متن‌های قوی‌تر برای خوانایی ۱۰۰٪ */
.info-panel strong {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* تم تیره شیشه‌ای مخصوص بخش ثبت‌نام (هشدار/زرد) */
.info-panel.warning-panel {
    background: rgba(20, 18, 10, 0.88) !important;
    border-right-color: var(--primary-accent) !important;
    border-left: 1px solid rgba(255, 255, 0, 0.05) !important;
}

/* تم تیره شیشه‌ای مخصوص بخش پایان‌یافته (موفقیت/سبز) */
.info-panel.success-panel {
    background: rgba(10, 20, 15, 0.88) !important;
    border-right-color: var(--winner-color) !important;
    border-left: 1px solid rgba(0, 255, 127, 0.05) !important;
}