/* ============ Font ============ */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
}


/* ============================================================
   شطرنجستان - استایل جدید (تم تیره مدرن)
   ============================================================ */

:root {
    --bg: #f5f5f5;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-elevated: #fafafa;
    --text: #1a1a1a;
    --text-muted: #6b6b6b;
    --text-dim: #9e9e9e;
    --gold: #629924;
    --gold-light: #7bb833;
    --blue: #2c7bbf;
    --border: #e0e0e0;
    --border-light: #ececec;
    --success: #629924;
    --danger: #c0392b;
    --warning: #d4a843;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
    --radius: 8px;
    --radius-sm: 4px;
}

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

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ============ Header ============ */
.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 700;
    transition: color 0.2s;
}

.logo:hover { color: var(--gold-light); }
.logo-img { width: 28px; height: 28px; }
.logo-text {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.6;
    padding-top: 4px;
}

.main-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.main-nav a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* ============ Hero ============ */
.hero {
    text-align: center;
    padding: 80px 20px 60px;
    background: radial-gradient(ellipse at top, rgba(212, 168, 67, 0.1) 0%, transparent 60%);
    border-radius: var(--radius);
    margin: 20px 0 40px;
}

.hero h1 {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 2.2em;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.3;
}

.hero p {
    font-size: 1.15em;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ============ Stats Grid ============ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--blue));
    opacity: 0;
    transition: opacity 0.25s;
}

.stat-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.stat-card:hover::before { opacity: 1; }

.stat-number {
    font-size: 2.4em;
    font-weight: 800;
    color: var(--gold);
    line-height: 1.1;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.95em;
    font-weight: 500;
}

/* ============ Sections ============ */
.section {
    margin-bottom: 50px;
}

.section h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* ============ Lists ============ */
.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    transition: all 0.2s;
    flex-wrap: wrap;
}

.list-item:hover {
    background: var(--bg-hover);
    border-color: var(--gold);
}

.list-title {
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.list-meta {
    color: var(--text-muted);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.empty {
    color: var(--text-muted);
    text-align: center;
    padding: 30px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
}

/* ============ Badges ============ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-upcoming {
    background: rgba(63, 185, 80, 0.15);
    color: var(--success);
    border-color: rgba(63, 185, 80, 0.3);
}

.badge-done {
    background: rgba(125, 133, 144, 0.15);
    color: var(--text-muted);
}

/* ============ CTA ============ */
.cta {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 50px 30px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '♔';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 150px;
    color: var(--gold);
    opacity: 0.05;
    pointer-events: none;
}

.cta h2 {
    border: none;
    justify-content: center;
    font-size: 1.6em;
    margin-bottom: 12px;
}

.cta p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--gold);
    color: #0d1117;
}

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

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--gold);
}

/* ============ Footer ============ */
.site-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 30px 0;
    margin-top: auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
}

.site-footer a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--gold-light);
}

.site-footer p {
    margin: 6px 0;
}

/* ============ Mobile ============ */
@media (max-width: 768px) {
    .hero { padding: 50px 16px 40px; }
    .hero h1 { font-size: 1.9em; }
    .hero p { font-size: 1em; }
    .site-header .container { flex-direction: column; align-items: flex-start; }
    .main-nav { width: 100%; justify-content: center; }
    .main-nav a { padding: 6px 10px; font-size: 0.85em; }
    .stat-card { padding: 20px 15px; }
    .stat-number { font-size: 1.9em; }
    .list-item { padding: 14px 16px; }
    .cta { padding: 35px 20px; }
    .cta::before { font-size: 100px; }
}

/* ============ Slider ============ */
.slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    margin: 20px 0 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.slider-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.slide {
    min-width: 100%;
    flex-shrink: 0;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.slide-icon {
    font-size: 4em;
    margin-bottom: 16px;
    line-height: 1;
}

.slide h2 {
    font-size: 1.8em;
    margin-bottom: 12px;
    color: var(--gold);
    font-weight: 700;
}

.slide p {
    font-size: 1.05em;
    color: var(--text-muted);
    max-width: 600px;
    line-height: 1.8;
}

.slide-1 { background: linear-gradient(135deg, rgba(212, 168, 67, 0.08), transparent); }
.slide-2 { background: linear-gradient(135deg, rgba(88, 166, 255, 0.08), transparent); }
.slide-3 { background: linear-gradient(135deg, rgba(248, 81, 73, 0.08), transparent); }
.slide-4 { background: linear-gradient(135deg, rgba(63, 185, 80, 0.08), transparent); }
.slide-5 { background: linear-gradient(135deg, rgba(212, 168, 67, 0.08), transparent); }
.slide-6 { background: linear-gradient(135deg, rgba(88, 166, 255, 0.08), transparent); }
.slide-7 { background: linear-gradient(135deg, rgba(63, 185, 80, 0.08), transparent); }
.slide-8 { background: linear-gradient(135deg, rgba(248, 81, 73, 0.08), transparent); }

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    padding: 0;
}

.slider-dot.active {
    background: var(--gold);
    width: 28px;
    border-radius: 5px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(22, 27, 34, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    z-index: 2;
    transition: all 0.2s;
}

.slider-arrow:hover {
    background: var(--bg-hover);
    border-color: var(--gold);
}

.slider-prev { right: 16px; }
.slider-next { left: 16px; }

/* ============ Slider — Mobile Fix ============ */
@media (max-width: 768px) {
    .slide {
        padding: 30px 15px 50px;
        min-height: auto;
    }
    .slide h2 {
        font-size: 1.2em;
        margin-bottom: 10px;
        padding: 0 40px;
        line-height: 1.5;
    }
    .slide p {
        font-size: 0.9em;
        padding: 0 10px;
        line-height: 1.7;
    }
    .slide-icon {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
    .slider-arrow {
        width: 34px;
        height: 34px;
        font-size: 0.9em;
    }
    .slider-prev { right: 6px; }
    .slider-next { left: 6px; }
    .slider-dots {
        bottom: 10px;
        gap: 6px;
    }
    .slider-dot {
        width: 8px;
        height: 8px;
    }
    .slider-dot.active {
        width: 20px;
    }
}

/* ============ Slider — Final Fix ============ */
.slider {
    width: 100%;
    max-width: 100%;
}
.slider-track {
    display: flex;
    width: 100%;
}
.slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

}

/* ============ Nav Dropdown ============ */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-toggle {
    cursor: pointer;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 160px;
    padding: 6px;
    box-shadow: var(--shadow-hover);
    z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    white-space: nowrap;
    transition: background 0.15s;
}
.nav-dropdown-menu a:hover {
    background: var(--bg-hover);
    color: var(--gold);
}

/* ============ Auto Scroll Lists ============ */
.auto-scroll {
    max-height: 320px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 6px;
}
.auto-scroll:hover .auto-scroll-inner {
    animation-play-state: paused;
}
.auto-scroll-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: autoScrollUp 40s linear infinite;
}
@keyframes autoScrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.auto-scroll .list-item {
    text-decoration: none;
    color: inherit;
    margin: 0;
}

/* ============ Detail Card ============ */
.section-link {
    color: inherit;
    text-decoration: none;
}
.section-link:hover {
    color: var(--gold);
}
.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.detail-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    color: var(--text-muted);
    min-width: 80px;
}

/* ============ Detail Card ============ */
.section-link {
    color: inherit;
    text-decoration: none;
}
.section-link:hover {
    color: var(--gold);
}
.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.detail-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    color: var(--text-muted);
    min-width: 80px;
}

/* ============ Auth ============ */
.auth-form {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-form label {
    color: var(--text-muted);
    font-size: 0.9em;
}
.auth-form input {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
}
.auth-form button {
    margin-top: 8px;
}
.flash {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    text-align: center;
}
.flash-error {
    background: rgba(192, 57, 43, 0.12);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.3);
}
.flash-success {
    background: rgba(98, 153, 36, 0.12);
    color: var(--success);
    border: 1px solid rgba(98, 153, 36, 0.3);
}
.auth-link {
    color: var(--text);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    font-weight: 500;
    background: var(--gold);
    color: #fff;
}
.auth-link:hover {
    background: var(--gold-light);
}

/* ============ Auth ============ */
.auth-form {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-form label {
    color: var(--text-muted);
    font-size: 0.9em;
}
.auth-form input {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
}
.auth-form button {
    margin-top: 8px;
}
.flash {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    text-align: center;
}
.flash-error {
    background: rgba(192, 57, 43, 0.12);
    color: var(--danger);
    border: 1px solid rgba(192, 57, 43, 0.3);
}
.flash-success {
    background: rgba(98, 153, 36, 0.12);
    color: var(--success);
    border: 1px solid rgba(98, 153, 36, 0.3);
}
.auth-link {
    color: var(--text);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.95em;
    font-weight: 500;
    background: var(--gold);
    color: #fff;
}
.auth-link:hover {
    background: var(--gold-light);
}

/* ============ Auth Nav ============ */
.auth-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 0;
    margin-left: auto;
    order: 99;
}
.auth-link-secondary {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9em;
    padding: 6px 10px;
}
.auth-link-secondary:hover {
    color: var(--text);
}

/* ============ Auth Nav ============ */
.auth-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 0;
    margin-left: auto;
    order: 99;
}
.auth-link-secondary {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9em;
    padding: 6px 10px;
}
.auth-link-secondary:hover {
    color: var(--text);
}

/* ============ Report View ============ */
.report-text {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    white-space: pre-wrap;
    line-height: 2;
    font-size: 0.95em;
    color: var(--text);
    direction: rtl;
}

/* ============ Panel Tabs ============ */
.panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 30px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.panel-tab {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.panel-tab:hover {
    color: var(--text);
    background: var(--bg-hover);
}
.panel-tab.active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* ============ Data Table ============ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.data-table th, .data-table td {
    padding: 10px 14px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.data-table th {
    background: var(--bg-hover);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9em;
}
.data-table tr:last-child td { border-bottom: none; }

/* ============ Promo Modal ============ */
.promo-btn {
    background: var(--gold);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}
.promo-btn:hover { background: var(--gold-light); }
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; color: var(--gold); font-size: 1.1em; }
.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px 10px;
}
.modal-close:hover { color: var(--danger); }
.modal-body {
    padding: 20px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.9;
    font-size: 0.95em;
    color: var(--text);
}

/* ============ Promo Button Small ============ */
.promo-btn-sm {
    background: var(--gold);
    color: #fff;
    border: none;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.75em;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
}
.promo-btn-sm:hover { background: var(--gold-light); }

/* ============ Filter Bar ============ */
.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filter-item label {
    color: var(--text-muted);
    font-size: 0.88em;
    font-weight: 500;
}
.filter-item select,
.filter-item input {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95em;
}
.filter-item select:focus,
.filter-item input:focus {
    outline: none;
    border-color: var(--gold);
}

/* ============ Scroll Box ============ */
.scroll-box {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scroll-box::-webkit-scrollbar { width: 8px; }
.scroll-box::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.scroll-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.scroll-box::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Teams table */
.data-table td a {
    font-weight: 600;
}

/* ============ Teams Auto Scroll ============ */
.teams-scroll {
    max-height: 400px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 6px;
}
.teams-scroll:hover .auto-scroll-inner {
    animation-play-state: paused;
}
.teams-scroll .auto-scroll-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: autoScrollUpTeams 60s linear infinite;
}
@keyframes autoScrollUpTeams {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.teams-scroll .list-item {
    text-decoration: none;
    color: inherit;
    margin: 0;
}

/* ========== Hero Main (صفحه اصلی) ========== */
.hero-main {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
    padding: 40px 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.hero-main::before {
    content: "";
    position: absolute;
    top: 0;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(249,199,79,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-main-inner {
    max-width: 900px;
    margin: 0 auto;
}

.hero-main-content {
    text-align: center;
    color: #fff;
}

.hero-main-icon {
    margin-bottom: 16px;
}

.hero-main-icon img {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.hero-main-title {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
    color: #fff;
}

.hero-main-subtitle {
    font-size: 1em;
    margin: 0 0 24px 0;
    opacity: 0.9;
    line-height: 1.7;
}

.hero-main-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-main-cta-primary {
    display: inline-flex;
    align-items: center;
    background: #F9C74F;
    color: #1B5E20;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-main-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.hero-main-cta-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    border: 1px solid rgba(255,255,255,0.4);
    transition: background 0.2s;
}

.hero-main-cta-secondary:hover {
    background: rgba(255,255,255,0.1);
}

.hero-main-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.hero-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s, transform 0.2s;
}

.hero-feature:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.hero-feature img {
    margin-bottom: 8px;
    filter: brightness(0) invert(1);
}

.hero-feature-title {
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 4px;
}

.hero-feature-sub {
    font-size: 0.75em;
    opacity: 0.75;
    text-align: center;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .hero-main {
        padding: 60px 32px;
    }
    .hero-main-title {
        font-size: 2.2em;
    }
    .hero-main-subtitle {
        font-size: 1.15em;
    }
    .hero-main-features {
        gap: 20px;
        margin-top: 24px;
    }
    .hero-feature {
        padding: 24px 16px;
    }
    .hero-feature-title {
        font-size: 1.1em;
    }
    .hero-feature-sub {
        font-size: 0.9em;
    }
}

/* Video library: isolated styles to avoid affecting existing pages */
.video-library { padding: 24px 0 60px; }
.video-library-hero { padding: clamp(28px, 5vw, 64px); background: linear-gradient(135deg,#183f32,#27624b); color:#fff; border-radius:18px; }
.video-library-eyebrow { color:#c9e8d7; font-size:.9rem; margin-bottom:8px; }
.video-library-hero h1 { font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:12px; }
.video-library-hero p { max-width:640px; }
.video-library-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); gap:20px; margin-top:24px; }
.video-library-panel { background:var(--bg-card,#fff); border:1px solid var(--border,#ddd); border-radius:14px; padding:24px; min-width:0; }
.video-library-panel h2 { font-size:1.2rem; margin-bottom:18px; }
.video-library-empty { text-align:center; border:1px dashed var(--border,#ddd); border-radius:12px; padding:38px 18px; }
.video-library-empty span { display:block; font-size:3rem; color:#427b53; }
.video-library-empty h3 { margin:8px 0; }
.video-library-empty p,.video-library-note { color:var(--text-muted,#666); font-size:.95rem; }
.video-library-topics { padding-right:22px; line-height:2.3; }
.video-library-note { margin-top:20px; }
@media(max-width:760px) { .video-library-grid { grid-template-columns:1fr; } .video-library-panel { padding:18px; } }

/* ===== Unified site navigation and home v2 ===== */
.container{max-width:1320px}
.site-header .container{gap:12px 24px}
.main-nav{flex:1 0 100%;justify-content:center;gap:2px}
.main-nav a{padding:8px 11px;font-size:.89rem}
.main-nav a:focus-visible,.home-v2 a:focus-visible{outline:3px solid #78b66a;outline-offset:3px}
.home-v2{padding:20px 0 48px}
.home-v2 a{text-decoration:none}
.home-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:20px;align-items:center;background:linear-gradient(125deg,#102d24,#206b46);color:#fff;border-radius:22px;padding:clamp(26px,5vw,70px);overflow:hidden}
.home-eyebrow{display:block;color:#5da94a;font-size:.9rem;font-weight:700;margin-bottom:10px}
.home-hero .home-eyebrow{color:#b9e5b3}
.home-hero h1{font-size:clamp(2rem,4.1vw,3.6rem);line-height:1.35;max-width:780px;margin:0 0 16px}
.home-hero h1 em{font-style:normal;color:#b9e5b3}
.home-hero p{font-size:1.08rem;color:#e2eee7;max-width:640px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:11px 20px;font-weight:700}
.home-btn-primary{background:#78bd59;color:#102c22}
.home-btn-outline{border:1px solid #b5d5c0;color:inherit}
.home-hero-visual{display:flex;align-items:center;justify-content:center;min-height:210px;position:relative;direction:ltr}
.home-hero-visual span{font-size:clamp(6rem,12vw,12rem);line-height:1;color:#d3eac7;text-shadow:0 20px 35px #061b16;opacity:.85}
.home-hero-visual span:nth-child(2){font-size:clamp(4rem,7vw,7rem);color:#81c46d;margin:0 -28px;z-index:1;transform:translateY(25px)}
.home-quicklinks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:22px 0 44px}
.home-quicklinks a,.home-feature,.home-panel{background:#fff;border:1px solid var(--border);border-radius:14px}
.home-quicklinks a{padding:17px 12px;display:flex;flex-direction:column;gap:6px;color:#173b2b;transition:transform .2s,border-color .2s}
.home-quicklinks a:hover,.home-feature:hover{transform:translateY(-3px);border-color:#8bbf7c}
.home-quicklinks small{color:var(--text-muted);font-size:.8rem}
.home-block{margin:0 0 48px}
.home-section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:17px}
.home-section-heading h2,.home-learning h2,.home-bots h2{font-size:clamp(1.35rem,2.5vw,1.85rem);margin:0}
.home-section-heading>a,.home-panel-more{color:#2d7545;font-weight:700}
.home-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.home-panel{padding:22px;min-width:0}
.home-panel h3{font-size:1.05rem;margin-bottom:12px;color:#244b34}
.home-event{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e9eee9;font-size:.94rem}
.home-event:last-of-type{border-bottom:0}
.home-event a{color:#1b3326;font-weight:600;overflow-wrap:anywhere}
.home-event time,.home-event>span{flex-shrink:0;color:#68756b;font-size:.82rem}
.home-rank{display:inline-flex;align-items:center;justify-content:center;background:#eaf3e8;color:#32723f;border-radius:7px;width:25px;height:25px;margin-left:7px}
.home-empty{color:#667568;padding:20px 0}
.home-panel-more{display:inline-block;margin-top:12px}
.home-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.home-feature{display:block;color:#1d3929;padding:25px 20px;transition:transform .2s,border-color .2s}
.home-feature>span{font-size:2rem}
.home-feature h3{font-size:1.05rem;margin:13px 0 7px}
.home-feature p{color:#657568;font-size:.9rem}
.home-learning{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:clamp(25px,4vw,50px);background:#edf5e9;border-radius:18px;margin-bottom:48px}
.home-learning>div{max-width:660px}
.home-learning p{color:#516855;margin:12px 0 20px}
.home-learning-piece{font-size:clamp(6rem,13vw,12rem);color:#37744a;line-height:1}
.home-bots{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#173a2d;color:white;border-radius:18px;padding:32px}
.home-bots p{color:#d3e5d8;margin-top:9px}
.home-bots .home-actions{margin:0}
@media(max-width:1050px){.home-quicklinks{grid-template-columns:repeat(3,minmax(0,1fr))}.home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.container{padding:0 15px}.site-header .container{align-items:center}.main-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:thin;padding-bottom:3px}.main-nav a{flex:0 0 auto}.home-hero{grid-template-columns:1fr}.home-hero-visual{display:none}.home-columns{grid-template-columns:1fr}.home-quicklinks{grid-template-columns:repeat(2,minmax(0,1fr))}.home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-learning-piece{display:none}.home-event{align-items:start;flex-direction:column;gap:3px}.home-bots{padding:24px}}
@media(max-width:420px){.home-feature-grid{grid-template-columns:1fr}.home-quicklinks a{padding:14px 10px}.home-hero h1{font-size:1.85rem}}
@media(prefers-reduced-motion:reduce){.home-v2 *, .home-v2 *::before{transition:none!important;animation:none!important}}

/* ===== Published video catalog ===== */
.video-v2{padding:25px 0 55px}
.video-v2-hero{background:linear-gradient(125deg,#143b2b,#2e6d45);border-radius:20px;padding:clamp(28px,5vw,65px);color:#fff}
.video-v2-hero .home-eyebrow{color:#b7e2ad}
.video-v2-hero h1{font-size:clamp(1.7rem,3vw,2.7rem);margin-bottom:12px}
.video-v2-hero p{color:#e4f0e7;max-width:650px}
.video-v2-filters{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0}
.video-v2-filters a{display:inline-flex;padding:9px 15px;border-radius:25px;background:#fff;border:1px solid #d9e5da;color:#28523b;text-decoration:none;font-size:.9rem}
.video-v2-filters a[aria-current=page]{background:#246a3e;color:#fff;border-color:#246a3e}
.video-v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.video-v2-card{border:1px solid #e0e8df;background:#fff;border-radius:15px;overflow:hidden}
.video-v2-card a{display:block;color:inherit;text-decoration:none}
.video-v2-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.video-v2-card-body{padding:20px}
.video-v2-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#43744b;font-size:.78rem}
.video-v2-card h2{font-size:1.13rem;margin:10px 0 7px}
.video-v2-card p{font-size:.9rem;color:#617164}
.video-v2-watch{display:inline-block;color:#247542;font-weight:700;margin-top:13px}
.video-v2-empty{text-align:center;background:#fff;border:1px solid #e0e8df;border-radius:18px;padding:55px 25px}
.video-v2-empty>span{display:block;font-size:4rem;color:#54934e}
.video-v2-empty h2{font-size:1.4rem;margin:10px 0}
.video-v2-empty p{color:#657568;max-width:570px;margin:0 auto 20px}
.video-v2-detail{max-width:1020px;margin:auto}
.video-v2-back{display:inline-block;color:#286b3e;margin:0 0 22px;text-decoration:none}
.video-v2-detail h1{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:12px}
.video-v2-detail header p{color:#64736a;margin-bottom:22px}
.video-v2-detail video{display:block;width:100%;aspect-ratio:16/9;background:#0c1811;border-radius:14px}
.video-v2-note{margin-top:18px;color:#6c796e;font-size:.88rem}
@media(max-width:950px){.video-v2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.video-v2-grid{grid-template-columns:1fr}}

/* ===== Member panel unified services ===== */
.member-hero{margin-bottom:20px}
.member-tabs{display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto}
.member-tabs .panel-tab{white-space:nowrap}
.member-tools{margin:35px 0 25px}
.member-tools h2{font-size:1.3rem;margin-bottom:16px}
.member-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.member-tools-grid a{display:flex;flex-direction:column;gap:8px;padding:18px 15px;border:1px solid #dbe6db;background:#fff;border-radius:12px;text-decoration:none;color:#234a32}
.member-tools-grid a:hover{border-color:#6da86c}
.member-tools-grid small{color:#69766b}
.member-tools-grid a:focus-visible{outline:3px solid #6da86c;outline-offset:2px}
@media(max-width:900px){.member-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.member-tools-grid{grid-template-columns:1fr}}

/* ===== Approved light brand and profile avatar preview ===== */
.brand-domain{display:block;font-size:.63rem;line-height:1.2;direction:ltr;unicode-bidi:isolate;color:#398a49;letter-spacing:.015em}
.member-default-avatar{display:block;margin:0 auto 12px;border-radius:50%;background:#fff;border:3px solid #cce3c7;object-fit:cover}
.member-avatar-preview{background:#fff;border:1px solid #dce8db;border-radius:16px;padding:22px;margin:24px 0}
.member-avatar-preview h2{font-size:1.2rem;margin:0 0 8px}
.member-avatar-preview p{color:#627367;font-size:.9rem;margin-bottom:16px}
.member-avatar-options{display:flex;flex-wrap:wrap;gap:14px}
.member-avatar-options img{border-radius:50%;border:2px solid #cde2c9;background:#f3f8f0;object-fit:cover}

.profile-settings{background:#fff;border:1px solid #dce8db;border-radius:16px;padding:24px;margin:20px 0}.avatar-fieldset{display:flex;flex-wrap:wrap;gap:16px;border:0;padding:0;margin:0 0 20px}.avatar-choice{display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid #d5e5d2;border-radius:14px;padding:15px;cursor:pointer}.avatar-choice img{border-radius:50%}.avatar-choice input{accent-color:#228044}.avatar-choice:focus-within{outline:3px solid #79ac78;outline-offset:3px}


/* ===== Shatranjestan brand refresh | 2026-10-20 =====
   Uses the approved knight artwork already installed at /static/brand/icon-light.svg.
   Scoped, additive CSS: no backend, routes or live deployment changes. */
:root{
  --bg:#f3f7f2;
  --bg-card:#fff;
  --bg-hover:#edf5eb;
  --gold:#226c45;
  --gold-light:#3d9860;
  --border:#dce8dc;
  --shadow:0 5px 20px rgba(18,54,36,.055);
  --shadow-hover:0 12px 32px rgba(18,54,36,.12);
}
body{
  background-color:#f3f7f2;
  background-image:radial-gradient(ellipse at 95% 3%,rgba(160,199,154,.17),transparent 33%),radial-gradient(ellipse at 4% 65%,rgba(220,189,109,.09),transparent 37%);
  background-attachment:fixed;
}
.site-header{background:rgba(255,255,255,.97);border-bottom-color:#dce9dc;box-shadow:0 2px 14px rgba(19,58,38,.055)}
.logo-img{width:44px;height:44px;object-fit:contain}
.home-hero{
  position:relative;isolation:isolate;min-height:340px;
  background:linear-gradient(112deg,#102b22 0%,#165138 52%,#28724a 100%);
  border:1px solid rgba(228,206,133,.35);
  box-shadow:0 18px 42px rgba(13,52,34,.16);
}
.home-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 78% 38%,rgba(218,183,95,.22),transparent 31%),repeating-linear-gradient(45deg,transparent 0 42px,rgba(255,255,255,.025) 42px 43px);
}
.home-hero::after{
  content:"";position:absolute;bottom:0;left:0;width:48%;height:55%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at bottom left,rgba(104,176,115,.16),transparent 68%);
}
.home-hero h1 em{color:#f1d48a}
.home-hero .home-eyebrow{color:#d7edcf}
.home-hero-visual{min-height:260px}
.home-hero-visual::before{
  content:"";display:block;width:min(100%,300px);aspect-ratio:1;
  background:url("/static/brand/icon-light.svg") center/contain no-repeat;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.2));
}
.home-hero-visual span{display:none}
.home-btn-primary{background:#e7c779;color:#173627}
.home-btn-primary:hover{background:#f1dba4}
.home-btn-outline:hover{background:rgba(255,255,255,.12)}
.home-quicklinks a,.home-feature,.home-panel{box-shadow:var(--shadow)}
.home-quicklinks a:hover,.home-feature:hover{box-shadow:var(--shadow-hover)}
.home-learning{background:linear-gradient(125deg,#e7f3e7,#f8f6e9);border:1px solid #d9e8d5}
.home-bots{background:linear-gradient(115deg,#14392b,#235e41);border:1px solid rgba(222,190,111,.35)}
@media(max-width:720px){
  body{background-attachment:scroll}
  .home-hero{min-height:0}
  .home-hero-visual{min-height:155px}
  .home-hero-visual::before{width:155px}
}
@media(prefers-reduced-motion:reduce){.home-quicklinks a,.home-feature{transition:none}}

/* ===== Brand refresh mobile and accessibility follow-up ===== */
@media(max-width:760px){
  .home-hero{grid-template-columns:1fr;gap:14px;padding:clamp(22px,5vw,35px)}
  .home-hero-visual{display:flex;justify-content:center;align-items:center;min-height:145px;order:-1}
  .home-hero-visual::before{width:clamp(110px,30vw,150px)}
  .home-hero-copy{text-align:center}
  .home-hero .home-actions{justify-content:center}
}
@media(max-width:420px){
  .home-hero-visual{min-height:115px}
  .home-hero-visual::before{width:112px}
  .home-hero .home-actions{gap:9px}
  .home-hero .home-btn{max-width:100%}
}
.home-quicklinks a:focus-visible,.home-feature:focus-visible,.home-btn:focus-visible,.main-nav a:focus-visible{outline:3px solid #c39a39;outline-offset:3px}

/* ===== Chess visual system: showcase cards and member cover =====
   Preserves approved homepage hero, brand logo and banner assets. */
.home-showcase{margin:28px 0 34px}
.home-showcase-heading{margin-bottom:16px}
.home-showcase-heading h2{margin:4px 0 0;color:#173c2b;font-size:clamp(1.35rem,2.5vw,1.85rem)}
.home-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-showcase-slide{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:270px;overflow:hidden;border-radius:19px;border:1px solid rgba(233,202,117,.4);color:#fff;box-shadow:0 12px 28px rgba(15,50,34,.12);background-color:#123d2d}
.home-showcase-slide::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;background:linear-gradient(0deg,rgba(4,22,16,.95),rgba(4,22,16,.04) 85%),repeating-conic-gradient(from 45deg at 72% 42%,rgba(255,255,255,.065) 0 25%,transparent 0 50%) 0 0/70px 70px}
.home-showcase-tournament{background-image:radial-gradient(circle at 78% 18%,#8f7a36 0,transparent 53%),linear-gradient(135deg,#123d2d,#23583c)}
.home-showcase-analysis{background-image:radial-gradient(circle at 78% 18%,#366f60 0,transparent 55%),linear-gradient(135deg,#092e2a,#194d42)}
.home-showcase-learning{background-image:radial-gradient(circle at 78% 18%,#667c9b 0,transparent 55%),linear-gradient(135deg,#102e3b,#24515a)}
.home-showcase-symbol{position:absolute;top:5px;left:18px;font-family:Georgia,serif;font-size:clamp(7rem,13vw,11rem);line-height:1;color:rgba(245,218,149,.22);transform:rotate(-9deg);pointer-events:none}
.home-showcase-copy{position:relative;padding:24px;width:100%}
.home-showcase-kicker{font-size:.82rem;color:#f0d48d;font-weight:700}
.home-showcase-copy h3{font-size:1.45rem;color:#fff;margin:8px 0}
.home-showcase-copy p{font-size:.91rem;line-height:1.9;color:#e8eee9;margin:0 0 14px}
.home-showcase-copy a{display:inline-block;padding:9px 13px;border:1px solid rgba(245,219,158,.65);border-radius:9px;color:#fff;font-weight:700;text-decoration:none}
.home-showcase-copy a:hover,.home-showcase-copy a:focus-visible{background:#f0d48d;color:#173627}
.home-feature{position:relative;overflow:hidden;border:1px solid #dce8dc}
.home-feature::after{content:"";position:absolute;bottom:0;right:0;left:0;height:4px;background:linear-gradient(90deg,#c6a75a,#237447)}
.home-quicklinks a{border:1px solid #dce8dc}
.member-hero{position:relative;isolation:isolate;overflow:hidden;min-height:225px;border-radius:20px;border:1px solid rgba(224,193,109,.4);background:radial-gradient(ellipse at 78% 20%,rgba(157,199,109,.32),transparent 42%),linear-gradient(120deg,#103a2b,#1c6743 65%,#103c30);box-shadow:0 12px 32px rgba(16,57,36,.14)}
.member-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background:repeating-conic-gradient(from 45deg,rgba(244,237,207,.3) 0 25%,transparent 0 50%) 0 0/82px 82px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.member-hero::after{content:"♞";position:absolute;left:4%;bottom:-55px;z-index:-1;font:260px/1 Georgia,serif;color:rgba(234,206,127,.17);pointer-events:none}
.member-hero h1,.member-hero p{position:relative}
.member-default-avatar{position:relative;box-shadow:0 5px 18px rgba(0,0,0,.16)}
@media(max-width:1000px){.home-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-showcase-slide:last-child{grid-column:1/-1}}
@media(max-width:650px){.home-showcase-grid{grid-template-columns:1fr}.home-showcase-slide:last-child{grid-column:auto}.home-showcase-slide{min-height:220px}.member-hero::after{font-size:170px;bottom:-30px;opacity:.65}}
@media(prefers-reduced-motion:reduce){.home-showcase-slide,.home-showcase-copy a{scroll-behavior:auto;transition:none}}

/* ===== Responsive visual QA corrections | 2026-10-20 =====
   Scoped to new cards/profile; approved logo and hero remain unchanged. */
.home-v2,.home-showcase,.home-showcase-grid,.home-showcase-slide,.home-showcase-copy{min-width:0}
.home-showcase-slide{min-width:0}
.home-showcase-copy h3,.home-showcase-copy p{overflow-wrap:anywhere}
.home-showcase-copy a{max-width:100%;overflow-wrap:anywhere}
.home-showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-showcase-slide:last-child{grid-column:auto}
.home-quicklinks{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-quicklinks a,.home-feature{min-width:0}
.home-quicklinks strong,.home-quicklinks small,.home-feature h3,.home-feature p{overflow-wrap:anywhere}
.home-showcase-copy a:focus-visible,.home-quicklinks a:focus-visible,.home-feature:focus-visible,.member-tabs a:focus-visible{outline:3px solid #e8c877;outline-offset:3px}
.member-hero h1{overflow-wrap:anywhere}
.member-hero p{overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1100px){
 .home-showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .home-showcase-slide{min-height:295px}
 .home-showcase-copy{padding:18px}
 .home-showcase-copy h3{font-size:1.25rem}
 .home-quicklinks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 .home-showcase-grid{grid-template-columns:1fr;gap:13px}
 .home-showcase-slide{min-height:205px}
 .home-showcase-copy{padding:20px}
 .home-showcase-symbol{font-size:8rem;left:8px}
 .home-quicklinks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .member-hero{min-height:190px;padding:22px 16px}
}
@media(max-width:380px){
 .home-showcase-copy h3{font-size:1.3rem}
 .home-showcase-copy p{font-size:.86rem}
 .home-quicklinks a{padding:13px 9px}
 .member-hero::after{font-size:135px}
}

/* ===== Showcase image assets from shared GitHub branch ===== */
.home-showcase-tournament{background-image:linear-gradient(0deg,rgba(5,27,18,.80),rgba(5,27,18,.08)),url('/static/brand/showcase/tournaments.svg');background-position:center;background-size:cover}
.home-showcase-analysis{background-image:linear-gradient(0deg,rgba(35,25,12,.84),rgba(35,25,12,.10)),url('/static/brand/showcase/analysis.svg');background-position:center;background-size:cover}
.home-showcase-learning{background-image:linear-gradient(0deg,rgba(8,24,38,.84),rgba(8,24,38,.10)),url('/static/brand/showcase/learning.svg');background-position:center;background-size:cover}
.home-showcase-slide .home-showcase-symbol{opacity:.25}

/* ===== Member profile illustrated cover (isolated from approved site banner) ===== */
.member-hero{
 background-image:linear-gradient(90deg,rgba(9,42,30,.91) 0%,rgba(12,52,39,.84) 52%,rgba(14,55,42,.48) 100%),url('/static/brand/showcase/profile-cover.svg');
 background-size:cover;
 background-position:center;
 color:#fff;
}
.member-hero h1,.member-hero p{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.32)}
.member-hero::after{opacity:.2}
@media(max-width:650px){
 .member-hero{background-position:65% center;background-image:linear-gradient(90deg,rgba(9,42,30,.96),rgba(12,52,39,.83)),url('/static/brand/showcase/profile-cover.svg')}
}

/* ===== Distinct homepage visual release 2026-10-20 =====
   Hero-only refresh: never changes approved logo or banner assets. */
.home-v2 .home-hero{min-height:450px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);align-items:center;gap:26px;padding:clamp(30px,5vw,68px);background:radial-gradient(ellipse at 76% 38%,rgba(212,165,71,.2),transparent 48%),linear-gradient(128deg,#071d1a 0%,#12452e 55%,#1b6845 100%);border-radius:26px}
.home-v2 .home-hero-copy{position:relative;z-index:2}
.home-v2 .home-hero h1{font-size:clamp(2.5rem,4.7vw,4.65rem);line-height:1.3;letter-spacing:-.04em;max-width:690px}
.home-v2 .home-hero-copy>p{font-size:clamp(1rem,1.6vw,1.2rem);line-height:2;max-width:600px}
.home-v2 .home-hero .home-eyebrow{display:inline-flex;padding:8px 16px;background:rgba(238,207,139,.13);border:1px solid rgba(238,207,139,.36);border-radius:99px;color:#ffe5a4}
.home-v2 .home-chess-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:340px}
.home-v2 .home-chess-scene::before{display:none}
.home-v2 .home-chess-scene-label{color:#f3d999;font:700 13px/1.5 sans-serif;letter-spacing:.22em;direction:ltr}
.home-v2 .home-chess-scene-label span{opacity:.65;margin-left:8px}
.home-v2 .home-chess-board{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,320px);aspect-ratio:1;border:10px solid #e5c78d;border-radius:8px;box-shadow:0 22px 45px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.17);transform:rotate(-8deg)}
.home-v2 .home-chess-board span{display:flex;align-items:center;justify-content:center;font:clamp(2.2rem,5vw,3.8rem)/1 Georgia,serif;color:#f9e6bb;text-shadow:0 4px 5px rgba(0,0,0,.6)}
.home-v2 .home-chess-board span:nth-child(8n+1),.home-v2 .home-chess-board span:nth-child(8n+3),.home-v2 .home-chess-board span:nth-child(8n+6),.home-v2 .home-chess-board span:nth-child(8n+8){background:#225b44}
.home-v2 .home-chess-board span:nth-child(8n+2),.home-v2 .home-chess-board span:nth-child(8n+4),.home-v2 .home-chess-board span:nth-child(8n+5),.home-v2 .home-chess-board span:nth-child(8n+7){background:#b8cba7;color:#163c2c}
.home-v2 .home-chess-scene-caption{color:#fff4d9;font-size:.9rem;font-weight:700;letter-spacing:.04em}
.home-v2 .home-showcase-slide{min-height:325px;border-radius:22px;box-shadow:0 18px 34px rgba(10,45,30,.17)}
.home-v2 .home-showcase-slide::before{opacity:.5}
.home-v2 .home-showcase-copy{padding:30px}
.home-v2 .home-showcase-copy h3{font-size:1.65rem}
@media(max-width:760px){.home-v2 .home-hero{grid-template-columns:1fr;gap:18px;padding:28px 18px;min-height:0}.home-v2 .home-hero h1{font-size:clamp(2.15rem,9vw,3.1rem)}.home-v2 .home-chess-scene{min-height:245px;order:0}.home-v2 .home-chess-board{width:210px;border-width:7px}.home-v2 .home-chess-board span{font-size:2.5rem}.home-v2 .home-showcase-slide{min-height:250px}}

/* ===== Graphic design for every homepage section | 2026-10-20 =====
   Additive and scoped to homepage; does not replace approved site branding. */
.home-v2 .home-quicklinks{gap:16px;margin:30px 0 54px}
.home-v2 .home-quicklinks a{position:relative;isolation:isolate;overflow:hidden;min-height:142px;justify-content:flex-end;padding:22px 17px;background:linear-gradient(145deg,#ffffff,#edf5ed);border:1px solid #cbdcca;border-radius:19px;box-shadow:0 12px 28px rgba(21,64,39,.08)}
.home-v2 .home-quicklinks a::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 45deg at 80% 25%,rgba(27,103,67,.075) 0 25%,transparent 0 50%) 0 0/46px 46px;mask-image:linear-gradient(90deg,transparent 5%,#000 100%)}
.home-v2 .home-quicklinks a::after{content:"♞";position:absolute;left:12px;top:3px;color:rgba(30,106,64,.16);font:90px/1 Georgia,serif;transform:rotate(-13deg);pointer-events:none}
.home-v2 .home-quicklinks a:nth-child(2n){background:linear-gradient(145deg,#fff9e9,#f3eddb);border-color:#e5d7ae}
.home-v2 .home-quicklinks a:nth-child(3n){background:linear-gradient(145deg,#e8f2f0,#dbeae5);border-color:#c0d8d1}
.home-v2 .home-quicklinks a:nth-child(2n)::after{content:"♜";color:rgba(137,105,35,.17)}
.home-v2 .home-quicklinks a:nth-child(3n)::after{content:"♛"}
.home-v2 .home-quicklinks strong{position:relative;font-size:1.06rem;color:#163c2b}
.home-v2 .home-quicklinks small{position:relative;color:#55705e}
.home-v2 .home-block{margin-bottom:64px}
.home-v2 .home-section-heading{position:relative;padding:0 18px 15px 0;border-bottom:2px solid #d7e5d4;margin-bottom:24px}
.home-v2 .home-section-heading::before{content:"";position:absolute;right:0;bottom:-2px;width:92px;height:4px;border-radius:10px;background:linear-gradient(90deg,#176b44,#e5bd6e)}
.home-v2 .home-section-heading h2{font-size:clamp(1.6rem,2.8vw,2.2rem);color:#103b2a}
.home-v2 .home-panel{position:relative;isolation:isolate;overflow:hidden;min-height:215px;border:1px solid #d6e4d2;border-radius:21px;padding:26px;background:linear-gradient(145deg,#fff,#f6faf4);box-shadow:0 15px 36px rgba(22,61,40,.08)}
.home-v2 .home-panel::before{content:"♟";position:absolute;left:-14px;bottom:-30px;z-index:-1;color:rgba(28,106,62,.075);font:210px/1 Georgia,serif;pointer-events:none}
.home-v2 .home-panel:nth-child(2)::before{content:"♜";color:rgba(162,125,49,.10)}
.home-v2 .home-panel h3{display:flex;align-items:center;gap:10px;font-size:1.17rem;color:#144c31;padding-bottom:15px;border-bottom:1px solid #e1eae0}
.home-v2 .home-panel h3::before{content:"♟";display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#e0eddf;color:#226d47;font:26px/1 Georgia,serif}
.home-v2 .home-panel:nth-child(2) h3::before{content:"♜";background:#f5ebd0;color:#846424}
.home-v2 .home-event{position:relative;padding:14px 12px;border-bottom:1px solid #e3eae0;border-radius:8px}
.home-v2 .home-event:nth-of-type(even){background:rgba(220,237,217,.32)}
.home-v2 .home-feature-grid{gap:18px}
.home-v2 .home-feature{position:relative;isolation:isolate;min-height:230px;overflow:hidden;padding:30px 24px;border-radius:22px;background:linear-gradient(150deg,#fff,#eaf4e9);border:1px solid #cddfcb;box-shadow:0 14px 30px rgba(22,61,40,.085)}
.home-v2 .home-feature:nth-child(2n){background:linear-gradient(150deg,#fffaf0,#f3e9cf);border-color:#e4d6b3}
.home-v2 .home-feature::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background:repeating-conic-gradient(from 45deg at 80% 15%,rgba(41,108,71,.06) 0 25%,transparent 0 50%) 0 0/50px 50px;mask-image:linear-gradient(90deg,transparent,#000)}
.home-v2 .home-feature>span{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;background:#d8e9d7;box-shadow:inset 0 0 0 1px #c4ddc2;font-size:2.15rem}
.home-v2 .home-feature:nth-child(2n)>span{background:#f0e1ba;box-shadow:inset 0 0 0 1px #e6d39f}
.home-v2 .home-feature h3{font-size:1.24rem;color:#164a30}
.home-v2 .home-feature p{font-size:.95rem;line-height:1.8}
.home-v2 .home-learning{position:relative;isolation:isolate;overflow:hidden;min-height:290px;border-radius:25px;background:linear-gradient(120deg,#e7f3e6,#fff7dc);box-shadow:0 16px 36px rgba(29,69,43,.08)}
.home-v2 .home-learning::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 45deg at 88% 50%,rgba(34,99,62,.07) 0 25%,transparent 0 50%) 0 0/76px 76px;mask-image:linear-gradient(90deg,transparent 45%,#000)}
.home-v2 .home-learning-piece{filter:drop-shadow(9px 13px 0 rgba(32,81,47,.13));transform:rotate(-10deg);color:#1c7148}
.home-v2 .home-bots{position:relative;isolation:isolate;overflow:hidden;min-height:180px;border-radius:23px;background:linear-gradient(120deg,#0d3025,#23684a);border:1px solid #b99d60;box-shadow:0 17px 36px rgba(9,50,32,.17)}
.home-v2 .home-bots::before{content:"♞";position:absolute;left:18%;top:-62px;z-index:-1;font:250px/1 Georgia,serif;color:rgba(239,214,154,.13);pointer-events:none}
.home-v2 .home-bots h2{color:#fff3d4}
@media(max-width:760px){.home-v2 .home-quicklinks{gap:10px;margin:20px 0 36px}.home-v2 .home-quicklinks a{min-height:125px;padding:16px 12px}.home-v2 .home-quicklinks a::after{font-size:70px}.home-v2 .home-panel{padding:19px;min-height:180px}.home-v2 .home-feature{min-height:200px;padding:22px 18px}.home-v2 .home-learning{min-height:0}.home-v2 .home-learning-piece{font-size:6rem}.home-v2 .home-block{margin-bottom:44px}}

/* ===== Shared chessboard background | all pages inheriting base.html =====
   Decorative only, readable across page types, with no brand asset changes. */
html{background-color:#eaf1e8}
body{
  background-color:#eaf1e8;
  background-image:
    radial-gradient(ellipse 68% 48% at 94% 4%,rgba(68,130,91,.15),transparent 75%),
    radial-gradient(ellipse 58% 46% at 5% 96%,rgba(199,163,83,.12),transparent 78%),
    repeating-conic-gradient(from 45deg,rgba(24,89,54,.042) 0 25%,transparent 0 50%);
  background-size:auto,auto,104px 104px;
  background-position:center,center,center top;
  background-repeat:no-repeat,no-repeat,repeat;
  background-attachment:fixed,fixed,fixed;
}
body>main.container{position:relative;z-index:1;min-height:50vh}
body>main.container:not(:has(.home-v2)){padding-top:26px;padding-bottom:40px}
body>main.container:not(:has(.home-v2))>section,
body>main.container:not(:has(.home-v2))>article{isolation:isolate}
@media(max-width:760px){
 body{background-attachment:scroll,scroll,scroll;background-size:auto,auto,76px 76px}
 body>main.container:not(:has(.home-v2)){padding-top:18px;padding-bottom:26px}
}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll,scroll,scroll}}