/* فونت یکان: فایل‌های فونت را در assets/fonts/ قرار دهید (راهنما در همان پوشه).
   تا قبل از قرار دادن فایل‌ها، به‌صورت خودکار روی Tahoma/سیستم فال‌بک می‌شود. */
@font-face{font-family:'Yekan';src:url('../fonts/Yekan.woff2') format('woff2'),url('../fonts/Yekan.woff') format('woff'),url('../fonts/Yekan.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Yekan';src:url('../fonts/Yekan-Bold.woff2') format('woff2'),url('../fonts/Yekan-Bold.woff') format('woff'),url('../fonts/Yekan-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

.fpp-matches-wrap,.fpp-ranking-wrap,.fpp-dashboard-wrap,.fpp-predictions-modal,.fpp-questions-wrap{max-width:900px;margin:0 auto;font-family:'Yekan',Tahoma,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.fpp-predictions-modal{max-width:none;}
.btn,.prediction-input,.fpp-ranking-search input,.fpp-toggle-predictions{font-family:inherit;}

/* ============================================================
   متغیرهای رنگی: به‌جای بازتعریف روی هرکدام از رَپِرها (که باعث می‌شد
   جنگ specificity لازم باشد و در برخی مرورگرها هنگام سوییچ زنده‌ی
   روز/شب به‌درستی به‌روزرسانی نشود)، حالا فقط یک‌بار روی :root تعریف
   می‌شوند و طبق ارث‌بری معمولِ CSS به همه‌جای پلاگین می‌رسند — دقیقاً
   همان روشی که خودِ قالب سایت برای --text/--surface استفاده می‌کند و
   قبلاً هم دیده شد که در سوییچ زنده درست کار می‌کند.
   ============================================================ */
:root{
    --fpp-card-border:rgba(255,255,255,.65);
    --fpp-card-shadow-1:rgba(20,20,60,.03);
    --fpp-card-shadow-2:rgba(30,20,90,.07);
    --fpp-text-strong:#1A1A2E;
    --fpp-text-muted:#6C757D;
    --fpp-text-faint:#9AA0A6;
    --fpp-card-text:#1A1A2E;
    --fpp-surface:rgba(244,245,247,.9);
    --fpp-surface-border:rgba(233,236,239,.9);
    --fpp-divider:#E9ECEF;
    --fpp-divider-soft:#F1F1F1;
    --fpp-input-bg:rgba(255,255,255,.85);
    --fpp-modal-bg:#fff;
    --fpp-modal-header-bg:linear-gradient(180deg,#F4F3FF 0%,#fff 100%);
    --fpp-chip-bg:rgba(244,245,247,.9);
    --fpp-gold-1:#FFD873;
    --fpp-gold-2:#D4A017;
    --fpp-gold-3:#FFE9B0;
    --fpp-gold-ring-opacity:.55;
    --fpp-toggle-text:#5B52E0;
    --fpp-others-row-bg:#FBFBFD;
    --fpp-others-row-border:#EFEFF3;
    --fpp-others-missed-text:#B8863F;
    --fpp-exact-row-bg:linear-gradient(180deg,#F3FFFB,#EAFBF6);
    --fpp-exact-text:#04785F;
    --fpp-exact-badge-bg:#fff;
}

.fpp-matches-wrap,.fpp-ranking-wrap,.fpp-dashboard-wrap,.fpp-predictions-modal,.fpp-questions-wrap{
    color:var(--fpp-text-strong);

    /* شخصی‌سازی ظاهر شیشه‌ای کارت‌ها (از پنل مدیریت، تنظیمات ← استایل کارت‌ها)؛
       این مقادیر پیش‌فرض دقیقاً همان ظاهر فعلی را حفظ می‌کنند مگر این‌که ادمین
       آن‌ها را تغییر دهد. توجه: bg-1/bg-2 چون از پنل مدیریت قابل‌تنظیم‌اند،
       همچنان مستقیماً روی خودِ رَپِر تعریف می‌شوند (نه روی :root) و پایین‌تر
       برای حالت شب هم مستقیماً روی رَپِر بازتعریف می‌شوند. */
    --fpp-card-bg-1:rgba(255,255,255,.55);
    --fpp-card-bg-2:rgba(255,255,255,.48);
    --fpp-card-blur:20px;
    --fpp-card-radius:16px;
    --fpp-team-name-size:13.5px;
    --fpp-flag-size:36px;
    --fpp-input-w:64px;
    --fpp-input-h:52px;
}

/* پس‌زمینه‌ی ملایم پشت کارت‌ها؛ همراه با backdrop-filter کارت‌ها حس شیشه‌ای مات
   می‌دهد و در عین حال حتی روی پس‌زمینه‌ی سفید تم سایت هم زیبا دیده می‌شود. */
.fpp-matches-wrap{position:relative;padding:6px 4px 4px;}
.fpp-matches-wrap::before{content:"";position:absolute;inset:-20px -12px auto -12px;height:260px;z-index:-1;pointer-events:none;border-radius:32px;
    background:radial-gradient(60% 100% at 15% 0%,rgba(108,99,255,.12),transparent 70%),
               radial-gradient(50% 90% at 100% 10%,rgba(0,212,170,.10),transparent 70%);}

/* کارت مسابقه: شیشه‌ای مات، فشرده، حرفه‌ای و کاملاً واکنش‌گرا؛ به‌علاوه‌ی
   یک قاب طلایی خاص (گرادیانی، نه یک‌رنگ ساده) دور تا دور کارت که با
   هاور/فوکوس پررنگ‌تر می‌شود تا حس تعاملی و جذاب بدهد. */
.match-card{
    position:relative;
    background:linear-gradient(160deg,var(--fpp-card-bg-1) 0%,var(--fpp-card-bg-2) 100%);
    -webkit-backdrop-filter:blur(var(--fpp-card-blur)) saturate(180%);
    backdrop-filter:blur(var(--fpp-card-blur)) saturate(180%);
    border:1px solid var(--fpp-card-border);
    border-radius:var(--fpp-card-radius);
    padding:11px 13px;
    margin-bottom:8px;
    box-shadow:0 1px 1px var(--fpp-card-shadow-1),0 6px 18px var(--fpp-card-shadow-2);
    transition:transform .15s,box-shadow .15s,border-color .2s;
    overflow:hidden;
}
.match-card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
    background:linear-gradient(90deg,#6C63FF,#8B7CFF 45%,#00D4AA);opacity:.85;z-index:1;}
/* قاب طلایی: با تکنیک mask به‌صورت یک حلقه‌ی گرادیانی دور تا دور کارت
   کشیده می‌شود (نه فقط یک border تخت)، بدون این‌که روی پس‌زمینه‌ی شیشه‌ای
   یا گوشه‌های گرد کارت تداخلی ایجاد کند. */
.match-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:linear-gradient(135deg,var(--fpp-gold-1),var(--fpp-gold-2) 45%,var(--fpp-gold-3));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:var(--fpp-gold-ring-opacity);pointer-events:none;
    transition:opacity .2s;
}
.match-card:hover{box-shadow:0 2px 4px rgba(20,20,60,.04),0 10px 26px rgba(30,20,90,.10);}
.match-card:hover::after,.match-card:focus-within::after{opacity:.9;}

/* گروه‌بندی تورنمنت: عنوان تورنمنت فقط یک‌بار بالای هر گروه، با حاشیه‌ی جذاب */
.fpp-tournament-group{margin-bottom:6px;}
.fpp-tournament-title{margin:24px 0 12px;padding:9px 18px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(90deg,#6C63FF,#8B7CFF);border-radius:12px;box-shadow:0 4px 14px rgba(108,99,255,.25);display:inline-block;}
.fpp-tournament-group:first-child .fpp-tournament-title{margin-top:0;}
.fpp-stage-title{margin:12px 0 8px;font-size:13.5px;font-weight:700;color:var(--fpp-text-muted);padding-inline-start:10px;border-inline-start:3px solid #6C63FF;}

.match-teams{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:nowrap;}
.team{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;flex:1;min-width:0;text-align:center;}
.team-flag-wrap{width:var(--fpp-flag-size);height:var(--fpp-flag-size);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.team-flag{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.team-name{font-weight:700;font-size:var(--fpp-team-name-size);line-height:1.25;word-break:break-word;color:var(--fpp-card-text);}
.match-vs{font-weight:800;color:var(--fpp-text-muted);font-size:14.5px;padding:0 6px;flex-shrink:0;min-width:52px;text-align:center;}
.match-card.is-finished .match-vs{color:#00A388;font-size:17px;letter-spacing:.5px;}
.match-info{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--fpp-divider);font-size:13px;color:var(--fpp-text-muted);}

/* ردیف پرچم + کادر ورودی نتیجه‌ی همان تیم، کنار هم */
.team-flag-input-row{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;}

/* حالت متمایز برای بازی‌هایی که نتیجه‌شان ثبت شده */
.match-card.is-finished{border-color:rgba(0,212,170,.35);box-shadow:0 1px 1px rgba(20,20,60,.03),0 6px 18px rgba(0,212,170,.10);}
.match-card.is-finished::before{background:linear-gradient(90deg,#00D4AA,#00b39c);}
.match-card.is-finished::after{opacity:calc(var(--fpp-gold-ring-opacity) + .15);}

/* کارت مسابقه‌ای که کاربر فراموش کرده برایش پیش‌بینی ثبت کند (زمان ثبتش
   هم تمام شده): با کادر و نوار قرمز مشخص می‌شود تا معلوم باشد از دست
   رفته. */
.match-card-missed{border-color:rgba(214,54,56,.45);box-shadow:0 1px 1px rgba(20,20,60,.03),0 6px 18px rgba(214,54,56,.14);}
.match-card-missed::before{background:linear-gradient(90deg,#D63638,#ff7a7a);opacity:1;}
.match-card-missed::after{opacity:.35;background:linear-gradient(135deg,#D63638,#ff9a9a 45%,#D63638);}
.fpp-missed-vs{color:#D63638 !important;font-size:12.5px !important;}
.fpp-missed-label{color:#D63638;font-weight:700;}
.fpp-status-finished{background:#EAFBF6;color:#00A388;}
.prediction-form{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.prediction-input-wrap{
    display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;width:var(--fpp-input-w);height:var(--fpp-input-h);
    border:2px solid var(--fpp-divider);border-radius:10px;background:var(--fpp-input-bg);
}
.prediction-input-wrap:focus-within{border-color:#6C63FF;}
.prediction-input{
    -webkit-appearance:none;-moz-appearance:textfield;appearance:none;
    width:100%;height:auto;padding:0;margin:0;border:none;background:none;outline:none;
    line-height:normal;text-align:center;direction:ltr;
    font-size:22px;font-weight:800;color:var(--fpp-text-strong);
}
.prediction-input::-webkit-outer-spin-button,.prediction-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:none;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,#6C63FF,#7E76FF);color:#fff;box-shadow:0 4px 12px rgba(108,99,255,.3);}
.btn-primary:hover{background:#5A52D5;}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;}
.fpp-prediction-status{font-size:13.5px;}
.fpp-notice{margin-top:12px;font-size:13.5px;color:var(--fpp-text-muted);}
.ranking-table{width:100%;border-collapse:collapse;background:var(--fpp-modal-bg);border-radius:12px;overflow:hidden;}
.ranking-table th{background:#1A1A2E;color:#fff;padding:12px 16px;text-align:right;font-size:13.5px;}
.ranking-table td{padding:12px 16px;border-bottom:1px solid var(--fpp-divider);font-size:14.5px;color:var(--fpp-text-strong);}
.ranking-position{font-weight:800;font-size:16px;}
.ranking-position.gold{color:#D4A017;}
.ranking-position.silver{color:#8E8E8E;}
.ranking-position.bronze{color:#B5651D;}
.dashboard-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px;}
.stat-card{background:var(--fpp-modal-bg);border:1px solid var(--fpp-divider);padding:18px;border-radius:14px;text-align:center;}
.stat-number{font-size:28px;font-weight:800;color:#6C63FF;}
.stat-label{color:var(--fpp-text-muted);font-size:13px;margin-top:4px;}

/* جدول رده‌بندی لحظه‌ای و نشانگر تغییر رتبه */
.fpp-ranking-live-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fpp-text-muted);margin-bottom:10px;}
.fpp-live-dot{width:8px;height:8px;border-radius:50%;background:#00D4AA;display:inline-block;animation:fpp-pulse 1.6s infinite;}
@keyframes fpp-pulse{0%{box-shadow:0 0 0 0 rgba(0,212,170,.5);}70%{box-shadow:0 0 0 8px rgba(0,212,170,0);}100%{box-shadow:0 0 0 0 rgba(0,212,170,0);}}
.rank-change{font-weight:700;font-size:12px;padding:2px 8px;border-radius:10px;display:inline-block;}
.rank-change.up{color:#00A32A;background:#EAFBF0;}
.rank-change.down{color:#D63638;background:#FCEEEE;}
.rank-change.same{color:#8E8E8E;background:#F1F1F1;}

/* اسکرول افقی جداول در موبایل به‌جای شکستن چیدمان */
.fpp-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* واکنش‌گرایی بیشتر برای موبایل: کادرها فشرده و به هم نزدیک، حس اپلیکیشن */
@media (max-width:600px){
    .fpp-matches-wrap,.fpp-ranking-wrap,.fpp-dashboard-wrap{padding:0 4px;}

    .match-card{padding:9px 10px;margin-bottom:7px;border-radius:calc(var(--fpp-card-radius) * .8125);}
    .match-datetime{margin-bottom:6px;font-size:11px;gap:6px;}
    .team-flag-wrap{width:calc(var(--fpp-flag-size) * .833);height:calc(var(--fpp-flag-size) * .833);}
    .team-name{font-size:calc(var(--fpp-team-name-size) * .89);}
    .match-vs{padding:0 4px;font-size:13px;min-width:42px;}
    .match-card.is-finished .match-vs{font-size:15px;}
    .match-info{margin-top:6px;padding-top:6px;font-size:11.5px;}

    .fpp-status-flag{padding:3px 9px;margin-bottom:6px;font-size:11px;}
    .fpp-countdown{margin-top:6px;padding:4px 8px;font-size:11px;}

    .prediction-form{margin-top:7px;gap:6px;justify-content:center;}
    .prediction-input-wrap{width:calc(var(--fpp-input-w) * .78);height:calc(var(--fpp-input-h) * .846);}
    .prediction-input{font-size:18px;}
    .btn{padding:8px 14px;font-size:12.5px;}
    .fpp-prediction-status{font-size:12px;}

    .fpp-lock-info{margin-top:6px;padding:8px 9px;font-size:11.5px;gap:7px;}
    .fpp-lock-icon{font-size:14px;}
    .fpp-lock-prediction-row{margin-top:4px;gap:6px;}
    .fpp-points-chip{font-size:10.5px;padding:2px 8px;}
    .fpp-time-chip{margin-top:5px;font-size:10px;padding:3px 9px;}

    .fpp-toggle-predictions{margin-top:7px;padding:8px 12px;font-size:11.5px;}

    .question-card{padding:12px 14px;margin-bottom:8px;border-radius:12px;}
    .question-text{font-size:13.5px;margin-bottom:8px;}
    .fpp-answer-text{min-height:56px;font-size:14px;padding:8px 10px;}

    .ranking-table th,.ranking-table td{padding:9px 10px;font-size:12.5px;white-space:nowrap;}
    .stat-card{padding:14px;}
    .stat-number{font-size:22px;}
    .fpp-tournament-title{font-size:14.5px;padding:7px 14px;margin:18px 0 10px;}
    .fpp-stage-title{margin:10px 0 8px;font-size:12.5px;}
}

/* وضعیت تعویق/لغو مسابقه */
.match-card.is-cancelled{opacity:.65;}
.fpp-status-flag{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;margin-bottom:8px;display:inline-block;}
.fpp-status-postponed{background:#fff8e5;color:#b26a00;}
.fpp-status-cancelled{background:#fcf0f1;color:#d63638;}

/* شمارش معکوس تا قفل شدن پیش‌بینی */
.fpp-countdown{font-size:11.5px;color:#6C63FF;font-weight:600;margin-top:8px;background:rgba(108,99,255,.08);border-radius:8px;padding:5px 9px;display:inline-block;}
.fpp-countdown-value{font-variant-numeric:tabular-nums;}
.fpp-prediction-time{display:block;margin-top:6px;font-size:11.5px;color:var(--fpp-text-faint);}

/* جعبه‌ی توضیح «زمان ثبت پیش‌بینی به پایان رسیده» */
.fpp-lock-info{display:flex;align-items:flex-start;gap:9px;margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.15);font-size:12px;color:var(--fpp-text-strong);}
.fpp-lock-info.has-prediction{background:rgba(0,212,170,.08);border-color:rgba(0,212,170,.2);}
.fpp-lock-icon{font-size:16px;line-height:1;flex-shrink:0;}
.fpp-lock-text{flex:1;}
.fpp-lock-prediction-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;}
.fpp-points-chip{background:linear-gradient(135deg,#00D4AA,#00b39c);color:#fff;font-weight:700;font-size:11px;padding:3px 10px;border-radius:20px;}

/* چیپ‌های زمان (تاریخ شمسی ثبت/به‌روزرسانی پیش‌بینی) */
.fpp-time-chip{display:inline-block;margin-top:6px;font-size:10.5px;color:var(--fpp-text-muted);background:var(--fpp-chip-bg);border-radius:20px;padding:3px 11px;}

/* ============================================================
   زنگ اعلان یادآوری پیش‌بینی: گوشه‌ی بالا-سمت‌چپ صفحه، همیشه روی
   صفحه ثابت است (مستقل از اسکرول)، فقط وقتی چیزی برای یادآوری هست
   نمایش داده می‌شود و با انیمیشن تکون‌خوردن توجه را جلب می‌کند.
   ============================================================ */
#fpp-notif-launcher{
    position:fixed;top:72px;left:14px;z-index:9000;
    width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;padding:0;
    background:var(--fpp-surface);box-shadow:0 4px 16px rgba(20,20,60,.2);
    display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
    transition:top .2s ease,left .2s ease;
}
/* تبلت/دسکتاپ: هدر معمولاً بلندتر و پدینگ سایت بیشتره، پس زنگ رو کمی
   پایین‌تر و از لبه‌ی صفحه فاصله‌دارتر می‌گذاریم. */
@media (min-width:782px){
    #fpp-notif-launcher{top:92px;left:24px;width:50px;height:50px;}
}
@media (min-width:1200px){
    #fpp-notif-launcher{left:32px;}
}
#fpp-notif-launcher[hidden]{display:none;}
.fpp-notif-launcher-icon{font-size:21px;line-height:1;}
.fpp-notif-launcher-icon-img{width:24px;height:24px;object-fit:contain;}
@media (min-width:782px){
    .fpp-notif-launcher-icon{font-size:23px;}
    .fpp-notif-launcher-icon-img{width:27px;height:27px;}
}
.fpp-notif-popup-header-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-inline-end:2px;}
.fpp-notif-badge{
    position:absolute;top:-4px;left:-4px;min-width:20px;height:20px;padding:0 5px;
    border-radius:999px;background:#D63638;color:#fff;font-size:11px;font-weight:800;
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--fpp-surface);
}
.fpp-notif-badge[hidden]{display:none;}

@keyframes fppNotifShake{
    0%,100%{transform:rotate(0);}
    10%{transform:rotate(-14deg);}
    20%{transform:rotate(12deg);}
    30%{transform:rotate(-10deg);}
    40%{transform:rotate(8deg);}
    50%{transform:rotate(-6deg);}
    60%{transform:rotate(4deg);}
    70%,100%{transform:rotate(0);}
}
#fpp-notif-launcher.fpp-notif-shake{animation:fppNotifShake 1.6s ease-in-out infinite;animation-delay:1.2s;}

.fpp-notif-popup{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:center;justify-content:center;padding:16px;}
.fpp-notif-popup[hidden]{display:none;}
.fpp-notif-popup-backdrop{position:absolute;inset:0;background:rgba(26,26,46,.55);}
.fpp-notif-popup-panel{
    position:relative;background:var(--fpp-surface);border-radius:16px;max-width:420px;width:100%;
    max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.fpp-notif-popup-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--fpp-surface-border);flex-shrink:0;}
.fpp-notif-popup-header h3{margin:0;font-size:15px;font-weight:800;color:var(--fpp-text-strong);}
.fpp-notif-popup-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--fpp-text-muted);padding:4px 8px;flex-shrink:0;}
.fpp-notif-popup-body{overflow-y:auto;padding:14px 16px;flex:1;}

.fpp-notif-section h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--fpp-text-strong);}
.fpp-notif-list{display:flex;flex-direction:column;gap:8px;}
.fpp-notif-item{background:var(--fpp-chip-bg);border:1px solid var(--fpp-surface-border);border-radius:10px;padding:8px 10px;}
.fpp-notif-item-teams{font-weight:700;font-size:12.5px;color:var(--fpp-text-strong);}
.fpp-notif-item-date{font-size:11px;color:var(--fpp-text-muted);margin-top:3px;}
.fpp-notif-double{
    margin-top:14px;display:flex;align-items:center;gap:8px;background:rgba(255,177,27,.14);
    border:1px solid rgba(255,177,27,.4);border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:700;
    color:var(--fpp-text-strong);
}
.fpp-notif-double-icon{font-size:16px;flex-shrink:0;}

/* ============================================================
   قابلیت ۲X (دوبل امتیاز): سوییچ به‌سبک تنظیمات آیفون + انیمیشن
   حرکتی هنگام روشن/خاموش‌شدن.
   ============================================================ */
.fpp-double-toggle-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px;flex-wrap:wrap;}
.fpp-double-switch-label{font-weight:800;font-size:13px;letter-spacing:.3px;color:var(--fpp-text-strong);}
.fpp-double-switch-icon{height:var(--fpp-flag-size);width:var(--fpp-flag-size);vertical-align:middle;object-fit:contain;}
.fpp-double-remaining{font-size:11px;color:var(--fpp-text-muted);}
.fpp-double-remaining-value{font-weight:700;}

.fpp-double-switch{
    position:relative;display:inline-flex;align-items:center;
    width:46px;height:26px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
}
.fpp-double-switch-track{
    position:absolute;inset:0;border-radius:999px;background:#CBCBCF;
    transition:background-color .25s ease;
}
.fpp-double-switch-thumb{
    position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.04);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
/* طبق درخواست: خاموش = دسته سمت چپ و خاکستری، روشن = دسته سمت راست و سبز */
.fpp-double-switch.is-on .fpp-double-switch-track{background:#34C759;}
.fpp-double-switch.is-on .fpp-double-switch-thumb{transform:translateX(20px);}
.fpp-double-switch:disabled{cursor:not-allowed;opacity:.45;}
.fpp-double-switch.fpp-double-switch-busy{opacity:.7;cursor:wait;}
.fpp-double-switch:not(:disabled):active .fpp-double-switch-thumb{width:25px;} /* حس فشرده‌شدن هنگام لمس، مثل آیفون */

.fpp-double-chip{
    background:linear-gradient(135deg,#34C759,#28a745);color:#fff;font-weight:800;
    font-size:11px;padding:3px 10px;border-radius:20px;letter-spacing:.2px;
    display:inline-flex;align-items:center;gap:4px;
}
.fpp-double-chip-icon{height:var(--fpp-flag-size);width:var(--fpp-flag-size);vertical-align:middle;object-fit:contain;}

/* وضعیت ثبت پیش‌بینی (پیام موفقیت/خطا) */
.fpp-prediction-status{font-size:12.5px;border-radius:8px;transition:.15s;}
.fpp-status-success{background:#EAFBF6;color:#00A388;font-weight:700;padding:5px 10px;}
.fpp-status-error{background:#FCEEEE;color:#D63638;font-weight:700;padding:5px 10px;}

/* دکمه‌ی نمایش پیش‌بینی سایر کاربران — گرافیکی، شبیه دکمه‌ی اپلیکیشن */
.fpp-toggle-predictions{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;margin-top:9px;
    background:linear-gradient(135deg,rgba(108,99,255,.10),rgba(139,124,255,.16));
    border:1px solid rgba(108,99,255,.22);
    border-radius:12px;padding:9px 14px;
    font-size:12.5px;font-weight:700;color:var(--fpp-toggle-text,#5B52E0);cursor:pointer;
    transition:background .15s,box-shadow .15s,transform .1s;
}
.fpp-toggle-predictions-icon{font-size:14px;line-height:1;}
.fpp-toggle-predictions:hover{background:linear-gradient(135deg,rgba(108,99,255,.16),rgba(139,124,255,.24));box-shadow:0 4px 14px rgba(108,99,255,.18);}
.fpp-toggle-predictions:active{transform:scale(.98);}
.fpp-toggle-predictions:disabled{opacity:.6;cursor:wait;}
.fpp-toggle-arrow{display:inline-block;font-size:15px;transition:transform .2s;}
.fpp-toggle-predictions.is-open .fpp-toggle-arrow{transform:rotate(-90deg);}

/* جستجوی رده‌بندی */
.fpp-ranking-search{margin-bottom:10px;}
.fpp-ranking-search input{width:100%;max-width:280px;padding:9px 14px;border:1px solid var(--fpp-divider);border-radius:20px;font-size:13.5px;background:var(--fpp-input-bg);color:var(--fpp-text-strong);}
.fpp-ranking-search input:focus{outline:none;border-color:#6C63FF;}

/* تاریخ/ساعت شروع مسابقه (شمسی) */
.match-datetime{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--fpp-text-muted);margin-bottom:8px;text-align:center;}
.match-weekday{font-weight:700;color:var(--fpp-card-text);}
.match-clock{font-variant-numeric:tabular-nums;}

/* پیش‌بینی سایر کاربران (داخل پاپ‌آپ) */
.fpp-others-predictions{margin-top:0;padding-top:0;border-top:none;}
.fpp-others-predictions h4{margin:0 0 8px;font-size:13.5px;color:var(--fpp-text-strong);}
.fpp-others-table{width:100%;border-collapse:separate;border-spacing:0 7px;font-size:13px;color:var(--fpp-text-strong);}
.fpp-others-table th{text-align:right;color:var(--fpp-text-muted);padding:2px 12px 8px;font-weight:600;font-size:11.5px;}
.fpp-others-table td{padding:11px 12px;background:var(--fpp-others-row-bg,#FBFBFD);border-top:1px solid var(--fpp-others-row-border,#EFEFF3);border-bottom:1px solid var(--fpp-others-row-border,#EFEFF3);}
.fpp-others-table tr td:first-child{border-right:1px solid var(--fpp-others-row-border,#EFEFF3);border-radius:0 10px 10px 0;}
.fpp-others-table tr td:last-child{border-left:1px solid var(--fpp-others-row-border,#EFEFF3);border-radius:10px 0 0 10px;}
.fpp-others-table tr.fpp-row-missed td{color:var(--fpp-others-missed-text,#B8863F);}
.fpp-others-table tr.fpp-row-missed td:first-child{color:var(--fpp-text-strong);font-weight:600;}

/* ردیف کاربری که امتیاز کامل (حدس دقیق نتیجه) گرفته: به‌جای هاله‌ی توپر
   قبلی، یک کارت ظریف با سایه‌ی نرم، نوار رنگی کنار نام، مدال گرد کوچک و
   یک بج حاشیه‌دار (به‌جای پرچم توپر) تا حس تمیزتر و حرفه‌ای‌تری بدهد. */
.fpp-others-table tr.fpp-row-exact td{
    background:var(--fpp-exact-row-bg,linear-gradient(180deg,#F3FFFB,#EAFBF6));
    border-color:rgba(0,168,136,.35);
    box-shadow:0 4px 14px rgba(0,148,126,.14);
}
.fpp-others-table tr.fpp-row-exact td:first-child{
    font-weight:700;
    color:var(--fpp-exact-text,#04785F);
}
.fpp-exact-name-wrap{display:inline-flex;align-items:center;gap:7px;position:relative;padding-inline-start:9px;}
.fpp-exact-name-wrap::before{
    content:'';position:absolute;inset-inline-start:0;top:1px;bottom:1px;width:3px;
    background:#00B894;border-radius:3px;
}
.fpp-exact-medal{
    width:21px;height:21px;flex:0 0 auto;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,#5CF3D2,#00947e);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10.5px;box-shadow:0 2px 5px rgba(0,148,126,.4);
}
.fpp-exact-badge{
    display:inline-flex;align-items:center;
    background:var(--fpp-exact-badge-bg,#fff);color:var(--fpp-exact-text,#04785F);font-weight:700;font-size:9.5px;
    padding:2.5px 8px;border-radius:20px;
    border:1px solid rgba(0,168,136,.4);
    white-space:nowrap;
}
.fpp-exact-points-chip{
    display:inline-flex;min-width:24px;justify-content:center;
    color:var(--fpp-exact-text,#04785F);font-weight:800;font-size:13px;
    background:rgba(0,168,136,.12);padding:2px 10px;border-radius:8px;
}

/* ============================================================
   پاپ‌آپ نمایش پیش‌بینی سایر کاربران
   ============================================================ */
body.fpp-modal-open{overflow:hidden;}
.fpp-predictions-modal{position:fixed;inset:0;background:rgba(26,26,46,.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;}
.fpp-predictions-modal[hidden]{display:none;}
.fpp-predictions-modal-box{position:relative;background:var(--fpp-modal-bg);border-radius:16px;width:100%;max-width:440px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25);color:var(--fpp-text-strong);}
.fpp-predictions-modal-close{position:absolute;top:10px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;background:var(--fpp-surface);border:none;color:var(--fpp-text-muted);font-size:15px;line-height:1;cursor:pointer;z-index:1;}
.fpp-predictions-modal-close:hover{background:var(--fpp-divider);color:var(--fpp-text-strong);}
.fpp-predictions-modal-header{display:flex;align-items:center;justify-content:center;gap:14px;padding:22px 42px 16px;background:var(--fpp-modal-header-bg);border-bottom:1px solid var(--fpp-divider);flex-shrink:0;}
.fpp-predictions-modal-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;text-align:center;}
.fpp-predictions-modal-flag{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--fpp-surface);border:1px solid var(--fpp-divider);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fpp-predictions-modal-flag img{width:100%;height:100%;object-fit:cover;}
.fpp-predictions-modal-team-name{font-weight:700;font-size:13.5px;line-height:1.3;word-break:break-word;color:var(--fpp-text-strong);}
.fpp-predictions-modal-vs{font-weight:800;color:#6C63FF;font-size:12.5px;flex-shrink:0;}
.fpp-predictions-modal-body{padding:16px 18px 20px;overflow-y:auto;}
.fpp-predictions-modal-loading{text-align:center;color:var(--fpp-text-muted);font-size:13px;padding:24px 0;}
.fpp-predictions-modal-question-text{margin:0;font-weight:700;font-size:14.5px;line-height:1.6;text-align:center;color:var(--fpp-text-strong);}

/* ============================================================
   ردیف دکمه‌های سریع (فعلاً فقط «نتایج کاربران»)؛ در موبایل هم
   عرض کامل می‌گیرد (flex-wrap).
   ============================================================ */
.fpp-quick-actions{display:flex;gap:10px;margin:6px 0 18px;flex-wrap:wrap;}
.fpp-quick-actions .fpp-results-toggle{width:auto;flex:1 1 220px;margin:0;}

/* دکمه‌ی «خلاصه عملکرد من» — روی صفحه‌ی اصلی، پاپ‌آپ خلاصه‌ی آمار/پیش‌بینی‌های کاربر را باز می‌کند */
.fpp-dashboard-toggle{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;margin:6px 0 16px;padding:12px 18px;
    background:linear-gradient(135deg,#6C63FF 0%,#8B7CFF 100%);
    color:#fff;border:none;border-radius:14px;cursor:pointer;
    font-size:13.5px;font-weight:700;
    box-shadow:0 8px 20px rgba(108,99,255,.25);
    transition:transform .12s,box-shadow .15s;
}
.fpp-dashboard-toggle:hover{box-shadow:0 10px 26px rgba(108,99,255,.32);}
.fpp-dashboard-toggle:active{transform:scale(.98);}
.fpp-dashboard-toggle-icon{font-size:16px;line-height:1;}

.fpp-dashboard-modal-box{max-width:520px;}
.fpp-dashboard-modal-header{
    display:flex;align-items:center;gap:10px;padding:20px 46px 14px 18px;
    background:var(--fpp-modal-header-bg);border-bottom:1px solid var(--fpp-divider);flex-shrink:0;
}
.fpp-dashboard-modal-header h3{margin:0;font-size:14px;font-weight:800;color:var(--fpp-text-strong);line-height:1.6;}
.fpp-dashboard-modal-body{padding:16px 18px 20px;overflow-y:auto;}
.fpp-dashboard-modal-body .dashboard-stats{margin-bottom:18px;}
.fpp-dashboard-modal-body h3{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--fpp-text-strong);}

/* دکمه‌ی «نتایج کاربران» — همیشه کنار دکمه‌ی «بازی‌های پایان‌یافته» در دسترس است */
.fpp-results-toggle{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;margin:6px 0 18px;padding:12px 18px;
    background:linear-gradient(135deg,#00A388 0%,#00D4AA 100%);
    color:#fff;border:none;border-radius:14px;cursor:pointer;
    font-size:13.5px;font-weight:700;
    box-shadow:0 8px 20px rgba(0,163,136,.22);
    transition:transform .12s,box-shadow .15s;
}
.fpp-results-toggle:hover{box-shadow:0 10px 26px rgba(0,163,136,.30);}
.fpp-results-toggle:active{transform:scale(.98);}
.fpp-results-toggle-icon{font-size:16px;line-height:1;}

.fpp-results-modal-box{max-width:640px;}
.fpp-results-modal-header{
    display:flex;align-items:center;gap:10px;padding:20px 46px 14px 18px;
    background:var(--fpp-modal-header-bg);border-bottom:1px solid var(--fpp-divider);flex-shrink:0;
}
.fpp-results-modal-header-icon{font-size:20px;}
.fpp-results-modal-header h3{margin:0;font-size:15.5px;font-weight:800;color:var(--fpp-text-strong);flex:1;}
.fpp-results-modal-body{padding:14px 16px 18px;overflow-y:auto;}
/* محتوای تزریق‌شده داخل این پاپ‌آپ، همان خروجی شورت‌کد [fpp_results] است؛
   چون خودش داخل مودال قرار گرفته، عرض/پس‌زمینه‌ی تزئینی صفحه‌ی اصلی لازم نیست. */
.fpp-results-modal-body .fpp-matches-wrap{max-width:none;padding:0;}
.fpp-results-modal-body .fpp-matches-wrap::before{display:none;}

@media (max-width:600px){
    .fpp-quick-actions{gap:8px;}
    .fpp-quick-actions .fpp-results-toggle{flex:1 1 100%;}
    .fpp-dashboard-toggle,.fpp-results-toggle{padding:10px 14px;font-size:12.5px;}
}

/* ============================================================
   کارت سوالات (بخش Q&A)
   ============================================================ */
.question-card{background:var(--fpp-modal-bg);border:1px solid var(--fpp-divider);border-radius:14px;padding:16px 18px;margin-bottom:10px;box-shadow:0 3px 12px rgba(0,0,0,.045);color:var(--fpp-text-strong);}
.question-text{font-weight:700;font-size:15px;line-height:1.7;margin:0 0 12px;color:var(--fpp-text-strong);}
.answer-form{display:flex;flex-direction:column;gap:8px;}
.fpp-answer-text{width:100%;min-height:70px;padding:10px 12px;border:2px solid var(--fpp-divider);border-radius:8px;font-family:inherit;font-size:14.5px;resize:vertical;box-sizing:border-box;background:var(--fpp-input-bg);color:var(--fpp-text-strong);}
.fpp-answer-text:focus{border-color:#6C63FF;outline:none;}
.answer-form .btn{align-self:flex-start;}
.fpp-user-answer-box{background:var(--fpp-surface);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--fpp-text-strong);}
.fpp-user-answer-box strong{display:block;margin-bottom:4px;color:var(--fpp-text-muted);font-weight:600;font-size:12.5px;}

/* عنوان بخش «سوالات» پایین صفحه‌ی اصلی، هم‌سبک با عنوان تورنمنت */
.fpp-tournament-title.fpp-questions-section-title{margin-top:28px;display:inline-flex;align-items:center;gap:4px;}

/* فلش جمع/باز کردن باکس سوالات — کنار عنوان «سوالات»؛ دفعه‌ی اول ورود
   کاربر به سایت باز است، بعد از جمع کردن تا کلیک مجدد بسته می‌ماند (وضعیت
   در localStorage مرورگر کاربر ذخیره می‌شود). */
.fpp-questions-toggle-btn{
    background:rgba(255,255,255,.18);border:none;cursor:pointer;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;flex-shrink:0;
    transition:background .15s;
}
.fpp-questions-toggle-btn:hover{background:rgba(255,255,255,.32);}
.fpp-questions-toggle-btn .fpp-toggle-arrow{font-size:15px;line-height:1;display:inline-block;transition:transform .2s;}
.fpp-questions-toggle-btn.is-collapsed .fpp-toggle-arrow{transform:rotate(-90deg);}
.fpp-questions-collapse[hidden]{display:none;}

/* ============================================================
   بازطراحی حرفه‌ای جدول رده‌بندی: هدر، جست‌وجو، سکوی قهرمانان، جدول
   ============================================================ */

.fpp-ranking-header{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1A1A2E 0%,#2D2A5E 55%,#6C63FF 130%);border-radius:20px;padding:20px 22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(26,26,46,.25);position:relative;overflow:hidden;}
.fpp-ranking-header::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% -10%,rgba(255,201,74,.25),transparent 55%);pointer-events:none;}
.fpp-ranking-header-icon{width:52px;height:52px;flex-shrink:0;border-radius:16px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:26px;position:relative;z-index:1;}
.fpp-ranking-title{margin:0 0 4px;color:#fff;font-size:19px;font-weight:800;letter-spacing:.2px;position:relative;z-index:1;}
.fpp-ranking-header .fpp-ranking-live-note{color:rgba(255,255,255,.75);margin:0;position:relative;z-index:1;}
.fpp-ranking-header .fpp-live-dot{background:#00D4AA;}

.fpp-ranking-search{position:relative;margin-bottom:20px;}
.fpp-ranking-search .fpp-search-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:16px;font-size:14px;opacity:.5;pointer-events:none;}
.fpp-ranking-search input{width:100%;max-width:340px;padding:12px 16px;padding-inline-start:40px;border:1.5px solid var(--fpp-divider);border-radius:30px;font-size:13.5px;background:var(--fpp-modal-bg);color:var(--fpp-text-strong);transition:border-color .2s,box-shadow .2s;}
.fpp-ranking-search input:focus{outline:none;border-color:#6C63FF;box-shadow:0 0 0 4px rgba(108,99,255,.12);}

/* ---------- نقطه‌ی آنلاین با ضربان (پالس)، کنار نام کاربران ---------- */
.fpp-online-dot{
    position:relative;display:inline-block;flex-shrink:0;
    width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#5CFFC0,#00E68A 70%);
    box-shadow:0 0 3px rgba(0,230,138,.8);
}
.fpp-online-dot::before{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    background:#00E68A;opacity:.5;
    animation:fppOnlinePulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes fppOnlinePulse{
    0%{transform:scale(.5);opacity:.55;}
    70%{transform:scale(1.8);opacity:0;}
    100%{transform:scale(1.8);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
    .fpp-online-dot::before{animation:none;opacity:0;}
}

/* ---------- سکوی قهرمانان (Podium) ---------- */
.fpp-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:8px 0 26px;padding:0 4px;}
.fpp-podium-slot{flex:1;max-width:190px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.fpp-podium-1{order:2;}
.fpp-podium-2{order:1;}
.fpp-podium-3{order:3;}
.fpp-podium-empty{visibility:hidden;}

.fpp-podium-medal{font-size:30px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));}
.fpp-podium-1 .fpp-podium-medal{font-size:38px;}

.fpp-podium-users{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.fpp-podium-user{display:flex;flex-direction:column;align-items:center;gap:0;}

/* قاب دور نام/امتیاز/نتیجه‌دقیق سه نفر برتر: چون این متن‌ها ممکن است روی
   پس‌زمینه‌های مختلف (رنگی/عکس‌دار) قرار بگیرند، یک کادر شیشه‌ای مستقل با
   پس‌زمینه‌ی خودش دورشان کشیده می‌شود تا همیشه خوانا بمانند، صرف‌نظر از
   بک‌گراند پشت سکو. */
.fpp-podium-info{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    margin-top:8px;padding:9px 14px 8px;width:100%;
    border-radius:16px;
    background:var(--fpp-modal-bg);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
    border:1.5px solid rgba(255,255,255,.35);
    box-shadow:0 6px 18px rgba(20,20,40,.14), inset 0 1px 0 rgba(255,255,255,.25);
}
.fpp-podium-1 .fpp-podium-info{
    border-color:rgba(255,201,74,.65);
    box-shadow:0 8px 22px rgba(242,169,59,.32), inset 0 1px 0 rgba(255,255,255,.3);
}
.fpp-podium-2 .fpp-podium-info{
    border-color:rgba(201,205,214,.75);
    box-shadow:0 7px 18px rgba(150,155,170,.26), inset 0 1px 0 rgba(255,255,255,.3);
}
.fpp-podium-3 .fpp-podium-info{
    border-color:rgba(226,152,90,.65);
    box-shadow:0 7px 18px rgba(217,127,69,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.fpp-podium-users.is-tied .fpp-podium-info{padding:6px 8px 5px;border-radius:12px;gap:2px;}

/* وقتی چند کاربر هم‌رتبه (امتیاز و نتیجه‌ی دقیق برابر) در یک جایگاه مدال
   قرار می‌گیرند، به‌جای چیدمان روی‌هم (ستونی)، کنار هم و کوچک‌تر نمایش
   داده می‌شوند تا جا بشوند؛ به‌محض این‌که فقط یک نفر در آن رتبه بماند،
   دوباره به اندازه‌ی اصلی/بزرگ برمی‌گردد (چون کلاس is-tied دیگر اضافه نمی‌شود). */
.fpp-podium-users.is-tied{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px 10px;}
.fpp-podium-users.is-tied .fpp-podium-user{flex:0 0 auto;width:64px;}
.fpp-podium-users.is-tied .fpp-podium-avatar{width:38px;height:38px;border-width:2px;}
.fpp-podium-1 .fpp-podium-users.is-tied .fpp-podium-avatar{width:44px;height:44px;}
.fpp-podium-users.is-tied .fpp-podium-name-row{max-width:80px;}
.fpp-podium-users.is-tied .fpp-podium-name{font-size:10.5px;}
.fpp-podium-users.is-tied .fpp-podium-points{font-size:11.5px;}
.fpp-podium-users.is-tied .fpp-podium-points small{font-size:9px;}
.fpp-podium-users.is-tied .fpp-podium-exact{font-size:9.5px;}
.fpp-podium-users.is-tied .fpp-podium-change .rank-change{font-size:9.5px;padding:1px 6px;}
.fpp-podium-avatar{position:relative;display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;border:3px solid var(--fpp-modal-bg);box-shadow:0 4px 14px rgba(0,0,0,.18);background:var(--fpp-surface);}
.fpp-podium-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.fpp-podium-1 .fpp-podium-avatar{width:72px;height:72px;border-color:#FFC94A;box-shadow:0 6px 20px rgba(255,201,74,.45);}
.fpp-podium-2 .fpp-podium-avatar{border-color:#C9CDD6;}
.fpp-podium-3 .fpp-podium-avatar{border-color:#E2985A;}

/* نشانگر آنلاین‌بودن دیگر روی عکس نیست؛ کنار نام، داخل fpp-podium-name-row */
.fpp-podium-name-row{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:150px;}
.fpp-podium-name{font-weight:700;font-size:13px;color:var(--fpp-text-strong);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fpp-podium-points{font-weight:800;font-size:15px;color:#6C63FF;}
.fpp-podium-points small{font-weight:600;font-size:10.5px;color:var(--fpp-text-faint);margin-inline-start:2px;}
.fpp-podium-exact{font-size:11px;color:var(--fpp-text-faint);}
.fpp-podium-change{display:inline-block;margin-top:2px;}
.fpp-podium-change .rank-change{font-size:11px;padding:2px 8px;border-radius:10px;}

.fpp-podium-bar{position:relative;overflow:hidden;width:100%;margin-top:14px;border-radius:14px 14px 6px 6px;isolation:isolate;}
.fpp-podium-bar::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 2px, transparent 2px, transparent 12px);
}
.fpp-podium-bar::after{
    content:'';position:absolute;top:0;left:0;width:22%;height:100%;pointer-events:none;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform:translateX(-136%);
    will-change:transform;
    animation:fppPodiumShine 5s ease-in-out infinite;
}
.fpp-podium-1 .fpp-podium-bar::after{animation-delay:.2s;}
.fpp-podium-2 .fpp-podium-bar::after{animation-delay:1.4s;}
.fpp-podium-3 .fpp-podium-bar::after{animation-delay:2.6s;}
@keyframes fppPodiumShine{
    0%{transform:translateX(-136%);}
    30%{transform:translateX(546%);}
    100%{transform:translateX(546%);}
}
@media (prefers-reduced-motion:reduce){
    .fpp-podium-bar::after{animation:none;display:none;}
}

/* شماره‌ی رتبه: دقیقاً وسط سکو (هم از عرض هم از ارتفاع)، یک نشان کوچک
   و تمیز هم‌رنگ همان فلز. */
.fpp-podium-rank-number{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;
    font-weight:800;font-size:13px;line-height:1;color:#fff;
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    border:1.5px solid rgba(255,255,255,.75);
    box-shadow:0 3px 8px rgba(0,0,0,.22);
}
.fpp-podium-1 .fpp-podium-rank-number{width:34px;height:34px;font-size:15px;background:linear-gradient(160deg,#FFDD8A,#D9860F);}
.fpp-podium-2 .fpp-podium-rank-number{background:linear-gradient(160deg,#EDEFF3,#9AA0AC);}
.fpp-podium-3 .fpp-podium-rank-number{background:linear-gradient(160deg,#F0B27E,#A85A2C);}

.fpp-podium-1 .fpp-podium-bar{
    height:92px;
    background:linear-gradient(180deg,#FFE9AE 0%,#F2A93B 55%,#D9860F 100%);
    box-shadow:0 8px 20px rgba(217,134,15,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.fpp-podium-2 .fpp-podium-bar{
    height:66px;
    background:linear-gradient(180deg,#F3F4F6 0%,#C7CBD3 55%,#9AA0AC 100%);
    box-shadow:0 6px 16px rgba(120,126,140,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.fpp-podium-3 .fpp-podium-bar{
    height:50px;
    background:linear-gradient(180deg,#F5C8A0 0%,#D9824B 55%,#A85A2C 100%);
    box-shadow:0 6px 14px rgba(160,95,50,.28), inset 0 1px 0 rgba(255,255,255,.35);
}

@media (max-width:600px){
    .fpp-podium{gap:6px;}
    .fpp-podium-avatar{width:46px;height:46px;}
    .fpp-podium-1 .fpp-podium-avatar{width:58px;height:58px;}
    .fpp-podium-name-row{max-width:100px;}
    .fpp-podium-name{font-size:11.5px;}
    .fpp-podium-points{font-size:13px;}
    .fpp-podium-medal{font-size:24px;}
    .fpp-podium-1 .fpp-podium-medal{font-size:30px;}
    .fpp-podium-users.is-tied .fpp-podium-user{width:52px;}
    .fpp-podium-users.is-tied .fpp-podium-avatar{width:32px;height:32px;}
    .fpp-podium-1 .fpp-podium-users.is-tied .fpp-podium-avatar{width:36px;height:36px;}
    .fpp-podium-users.is-tied .fpp-podium-name-row{max-width:66px;}
    .fpp-podium-users.is-tied .fpp-podium-name{font-size:9.5px;}
    .fpp-podium-rank-number{width:24px;height:24px;font-size:11px;}
    .fpp-podium-1 .fpp-podium-rank-number{width:29px;height:29px;font-size:12.5px;}
}

/* ---------- جدول رده‌بندی (رتبه‌های چهارم به بعد) ---------- */
.ranking-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--fpp-modal-bg);border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.05);}
.ranking-table th{background:#1A1A2E;color:#fff;padding:13px 16px;text-align:right;font-size:12.5px;font-weight:700;}
.ranking-table td{padding:12px 16px;border-bottom:1px solid var(--fpp-divider-soft);font-size:13.5px;color:var(--fpp-text-strong);}
.ranking-table tbody tr:last-child td{border-bottom:none;}
.ranking-table tbody tr{transition:background .15s;}
.ranking-table tbody tr:hover{background:rgba(108,99,255,.06);}
.ranking-position{font-weight:800;font-size:15px;color:var(--fpp-text-faint);}
.ranking-user{display:flex;align-items:center;gap:10px;}
.ranking-avatar{position:relative;display:block;width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--fpp-surface);}
.ranking-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* نشانگر آنلاین‌بودن دیگر روی آواتار نیست؛ کنار نام کاربر نمایش داده می‌شود */
.ranking-name-row{display:inline-flex;align-items:center;gap:5px;min-width:0;}

/* ============================================================
   حالت شب (Dark Mode)
   ============================================================
   خیلی از قالب‌های وردپرس، حالت شب را با اضافه/حذف‌کردن یک کلاس یا
   attribute روی <html> یا <body> پیاده می‌کنند (نه صرفاً با ترجیح
   سیستم‌عامل کاربر). چون نام دقیق آن کلاس به قالب سایت بستگی دارد،
   این بخش رایج‌ترین قراردادهای شناخته‌شده را پوشش می‌دهد. اگر قالب
   سایت شما از نامی متفاوت استفاده می‌کند، کافی است همان کلاس/attribute
   را هم به همین لیست سلکتورها اضافه کنید تا رنگ‌ها به‌طور خودکار عوض شوند؛
   چون تمام کارت‌ها و جدول‌های پلاگین از همین متغیرها استفاده می‌کنند. */
body.dark-mode,html.dark-mode,
body.dark-theme,html.dark-theme,
body.is-dark,html.is-dark,
body.wp-dark-mode-active,
body.night-mode,html.night-mode,
html[data-theme="dark"],body[data-theme="dark"],
html[data-bs-theme="dark"],body[data-bs-theme="dark"],
html.fpp-auto-dark,
.dark-mode,.dark-theme{
    --fpp-card-bg-1:rgba(38,40,58,.92);
    --fpp-card-bg-2:rgba(28,29,46,.85);
    --fpp-card-border:rgba(255,255,255,.10);
    --fpp-card-shadow-1:rgba(0,0,0,.25);
    --fpp-card-shadow-2:rgba(0,0,0,.35);
    --fpp-text-strong:#F1F2F8;
    --fpp-text-muted:#B7BACC;
    --fpp-text-faint:#9296AD;
    --fpp-card-text:#F1F2F8;
    --fpp-surface:rgba(255,255,255,.06);
    --fpp-surface-border:rgba(255,255,255,.12);
    --fpp-divider:rgba(255,255,255,.12);
    --fpp-divider-soft:rgba(255,255,255,.08);
    --fpp-input-bg:rgba(255,255,255,.07);
    --fpp-modal-bg:#22243A;
    --fpp-modal-header-bg:linear-gradient(180deg,#2A2C46 0%,#22243A 100%);
    --fpp-chip-bg:rgba(255,255,255,.08);
    --fpp-gold-1:#FFE9B0;
    --fpp-gold-2:#FFC94A;
    --fpp-gold-3:#FFD873;
    --fpp-gold-ring-opacity:.7;
    --fpp-toggle-text:#C9C4FF;
    --fpp-others-row-bg:rgba(255,255,255,.05);
    --fpp-others-row-border:rgba(255,255,255,.10);
    --fpp-others-missed-text:#E0B876;
    --fpp-exact-row-bg:linear-gradient(180deg,rgba(0,212,170,.16),rgba(0,212,170,.07));
    --fpp-exact-text:#5CF3D2;
    --fpp-exact-badge-bg:rgba(255,255,255,.08);
}

/* حالت شب: چون بالاتر همه‌ی رنگ‌ها فقط روی :root تعریف شده‌اند (نه روی
   خودِ رَپِرها)، کافی است همین‌جا آن‌ها را برای حالت شب یک‌بار دیگر روی
   html/body بازتعریف کنیم؛ چون هیچ رَپِری این متغیرها را دوباره روی خودش
   ست نمی‌کند، ارث‌بری معمولِ CSS آن‌ها را به همه‌جای پلاگین می‌رساند —
   دقیقاً مثل --text/--surface خودِ قالب سایت که در سوییچ زنده هم درست کار
   می‌کند. */
html[data-theme="dark"],
body.dark-mode,html.dark-mode,
body.dark-theme,html.dark-theme,
body.is-dark,html.is-dark,
body.wp-dark-mode-active,
body.night-mode,html.night-mode,
html[data-bs-theme="dark"],body[data-bs-theme="dark"],
html.fpp-auto-dark{
    --fpp-card-border:rgba(255,255,255,.10);
    --fpp-card-shadow-1:rgba(0,0,0,.25);
    --fpp-card-shadow-2:rgba(0,0,0,.35);
    --fpp-text-strong:#F1F2F8;
    --fpp-text-muted:#B7BACC;
    --fpp-text-faint:#9296AD;
    --fpp-card-text:#F1F2F8;
    --fpp-surface:rgba(255,255,255,.06);
    --fpp-surface-border:rgba(255,255,255,.12);
    --fpp-divider:rgba(255,255,255,.12);
    --fpp-divider-soft:rgba(255,255,255,.08);
    --fpp-input-bg:rgba(255,255,255,.07);
    --fpp-modal-bg:#22243A;
    --fpp-modal-header-bg:linear-gradient(180deg,#2A2C46 0%,#22243A 100%);
    --fpp-chip-bg:rgba(255,255,255,.08);
    --fpp-gold-1:#FFE9B0;
    --fpp-gold-2:#FFC94A;
    --fpp-gold-3:#FFD873;
    --fpp-gold-ring-opacity:.7;
    --fpp-toggle-text:#C9C4FF;
    --fpp-others-row-bg:rgba(255,255,255,.05);
    --fpp-others-row-border:rgba(255,255,255,.10);
    --fpp-others-missed-text:#E0B876;
    --fpp-exact-row-bg:linear-gradient(180deg,rgba(0,212,170,.16),rgba(0,212,170,.07));
    --fpp-exact-text:#5CF3D2;
    --fpp-exact-badge-bg:rgba(255,255,255,.08);
}

/* bg-1/bg-2 قابل‌تنظیم از پنل مدیریت هستند و مستقیماً روی خودِ رَپِر تعریف
   می‌شوند (نه روی :root)، پس فقط همین دو مورد لازم است مستقیماً روی رَپِر هم
   برای حالت شب بازتعریف شوند تا رنگ ثابتِ ادمین در حالت شب بی‌اثر شود. */
html[data-theme="dark"] .fpp-matches-wrap,html[data-theme="dark"] .fpp-ranking-wrap,html[data-theme="dark"] .fpp-dashboard-wrap,html[data-theme="dark"] .fpp-predictions-modal,html[data-theme="dark"] .fpp-questions-wrap,
body.dark-mode .fpp-matches-wrap,body.dark-mode .fpp-ranking-wrap,body.dark-mode .fpp-dashboard-wrap,body.dark-mode .fpp-predictions-modal,body.dark-mode .fpp-questions-wrap,
html.dark-mode .fpp-matches-wrap,html.dark-mode .fpp-ranking-wrap,html.dark-mode .fpp-dashboard-wrap,html.dark-mode .fpp-predictions-modal,html.dark-mode .fpp-questions-wrap,
body.dark-theme .fpp-matches-wrap,body.dark-theme .fpp-ranking-wrap,body.dark-theme .fpp-dashboard-wrap,body.dark-theme .fpp-predictions-modal,body.dark-theme .fpp-questions-wrap,
html.dark-theme .fpp-matches-wrap,html.dark-theme .fpp-ranking-wrap,html.dark-theme .fpp-dashboard-wrap,html.dark-theme .fpp-predictions-modal,html.dark-theme .fpp-questions-wrap,
html.fpp-auto-dark .fpp-matches-wrap,html.fpp-auto-dark .fpp-ranking-wrap,html.fpp-auto-dark .fpp-dashboard-wrap,html.fpp-auto-dark .fpp-predictions-modal,html.fpp-auto-dark .fpp-questions-wrap{
    --fpp-card-bg-1:rgba(38,40,58,.92);
    --fpp-card-bg-2:rgba(28,29,46,.85);
}

body.dark-mode .fpp-lock-info.has-prediction,html.dark-mode .fpp-lock-info.has-prediction,
body.dark-theme .fpp-lock-info.has-prediction,html.dark-theme .fpp-lock-info.has-prediction,
body.is-dark .fpp-lock-info.has-prediction,html.is-dark .fpp-lock-info.has-prediction,
body.wp-dark-mode-active .fpp-lock-info.has-prediction,
body.night-mode .fpp-lock-info.has-prediction,html.night-mode .fpp-lock-info.has-prediction,
html[data-theme="dark"] .fpp-lock-info.has-prediction,body[data-theme="dark"] .fpp-lock-info.has-prediction,
html[data-bs-theme="dark"] .fpp-lock-info.has-prediction,body[data-bs-theme="dark"] .fpp-lock-info.has-prediction,
html.fpp-auto-dark .fpp-lock-info.has-prediction,
.dark-mode .fpp-lock-info.has-prediction,.dark-theme .fpp-lock-info.has-prediction{
    background:rgba(0,212,170,.16);
    border-color:rgba(0,212,170,.5);
}

/* توجه: قبلاً اینجا یک @media (prefers-color-scheme:dark) هم بود که رنگ‌های
   تیره را صرفاً بر اساس تنظیم دستگاه/مرورگر کاربر (نه سوییچ دستی قالب) اعمال
   می‌کرد. همین باعث می‌شد حتی وقتی کاربر خودش قالب را روی حالت روز گذاشته
   بود، رنگ متن‌ها به‌خاطر تاریک بودن سیستم‌عامل گوشی به‌صورت جداگانه تیره شود
   ولی پس‌زمینه‌ی شیشه‌ای کارت (که توسط تنظیمات ادمین ثابت است) روشن بماند و
   خوانا نبود. برای همین آن بخش حذف شد؛ رنگ تیره فقط با سوییچ دستی خودِ قالب
   (data-theme="dark" و مشابه‌ها) فعال می‌شود. */
/* در حالت شب، پس‌زمینه‌ی محو پشت کارت‌ها کمی کم‌نورتر شود تا با زمینه‌ی
   تیره‌ی قالب قاطی نشود، و رنگ زنده‌ی امتیاز/دکمه‌های اصلی هم کمی روشن‌تر
   شود تا روی زمینه‌ی تیره بهتر دیده شود. */
body.dark-mode .fpp-matches-wrap::before,html.dark-mode .fpp-matches-wrap::before,
body.dark-theme .fpp-matches-wrap::before,html.dark-theme .fpp-matches-wrap::before,
html[data-theme="dark"] .fpp-matches-wrap::before,body[data-theme="dark"] .fpp-matches-wrap::before,
html.fpp-auto-dark .fpp-matches-wrap::before,
.dark-mode .fpp-matches-wrap::before{
    background:radial-gradient(60% 100% at 15% 0%,rgba(108,99,255,.18),transparent 70%),
               radial-gradient(50% 90% at 100% 10%,rgba(0,212,170,.14),transparent 70%);
}

/* ============================================================
   نتیجه‌ی نهایی (ثبت‌شده توسط مدیر) بالای پاپ‌آپ «پیش‌بینی سایر کاربران»
   ============================================================ */
.fpp-predictions-modal-header{flex-wrap:wrap;}
.fpp-predictions-modal-result{
    flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:10px;padding-top:12px;border-top:1px dashed var(--fpp-divider);
}
.fpp-predictions-modal-result-label{font-size:11.5px;color:var(--fpp-text-muted);font-weight:600;}
.fpp-predictions-modal-result-score{
    font-size:18px;font-weight:800;color:#fff;padding:3px 16px;border-radius:20px;
    background:linear-gradient(135deg,#00D4AA,#00b39c);box-shadow:0 4px 12px rgba(0,212,170,.3);
    letter-spacing:.5px;
}

/* ============================================================
   کارت پروفایل کاربر: با کلیک روی نام/آواتار هر کاربر در هر جای
   سایت باز می‌شود؛ آواتار به‌صورت بنر گرافیکی تمام‌عرض بالای کارت،
   بعد آمار (تعداد پیش‌بینی، نتایج دقیق، رتبه) و امتیاز کل.
   ============================================================ */
[data-user-id]{cursor:default;}
.fpp-user-link{cursor:pointer;border-radius:8px;transition:color .15s,background .15s;}
td>.fpp-user-link,span.fpp-user-link{display:inline-block;padding:2px 4px;margin:-2px -4px;}
.fpp-user-link:hover{color:#6C63FF;background:rgba(108,99,255,.08);}
tr.fpp-user-link{cursor:pointer;transition:background .15s;}
tr.fpp-user-link:hover{background:rgba(108,99,255,.06);}
.fpp-podium-user.fpp-user-link:hover{transform:translateY(-2px);}

/* ---------- بج «+N نفر دیگر» و مودال هم‌رتبه‌ها ---------- */
.fpp-podium-more{
    margin-top:6px;border:none;cursor:pointer;
    background:linear-gradient(180deg,#6C63FF,#544ae0);
    color:#fff;font-weight:700;font-size:11.5px;
    padding:5px 12px;border-radius:20px;
    box-shadow:0 4px 12px rgba(108,99,255,.35);
    transition:transform .12s,box-shadow .15s;
}
.fpp-podium-more:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(108,99,255,.45);}
.fpp-podium-more:active{transform:scale(.97);}

.fpp-tie-modal .fpp-predictions-modal-box{max-width:420px;}
.fpp-tie-modal-header{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:20px 42px 14px;background:var(--fpp-modal-header-bg);
    border-bottom:1px solid var(--fpp-divider);flex-shrink:0;
}
.fpp-tie-modal-header h3{margin:0;font-size:15px;font-weight:800;color:var(--fpp-text-strong);}
.fpp-tie-modal-body{padding:14px 16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}

.fpp-tie-row{
    display:flex;align-items:center;gap:10px;
    background:var(--fpp-surface);border-radius:12px;padding:8px 12px;
    cursor:pointer;transition:transform .12s,box-shadow .15s;
}
.fpp-tie-row:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.fpp-tie-row-avatar{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--fpp-modal-bg);}
.fpp-tie-row-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* نشانگر آنلاین‌بودن دیگر روی آواتار نیست؛ کنار نام کاربر نمایش داده می‌شود */
.fpp-tie-row-name-row{flex:1;min-width:0;display:inline-flex;align-items:center;gap:5px;}
.fpp-tie-row-name{font-weight:700;font-size:13px;color:var(--fpp-text-strong);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fpp-tie-row-points{font-weight:800;font-size:13px;color:#6C63FF;flex-shrink:0;}
.fpp-tie-row-points small{font-weight:600;font-size:10px;color:var(--fpp-text-faint);}
.fpp-tie-row-exact{font-size:11px;color:var(--fpp-text-faint);flex-shrink:0;display:none;}
.fpp-tie-row-change{flex-shrink:0;}

@media (min-width:480px){
    .fpp-tie-row-exact{display:inline;}
}

.fpp-user-card-modal{z-index:100010;}
.fpp-user-card-modal .fpp-user-card-box{
    position:relative;background:var(--fpp-modal-bg);border-radius:22px;width:100%;max-width:360px;
    max-height:60vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);color:var(--fpp-text-strong);
    animation:fppUserCardIn .28s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;
}
.fpp-user-card-content{
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    flex:1;min-height:0;
}
@keyframes fppUserCardIn{
    0%{opacity:0;transform:scale(.9) translateY(10px);}
    100%{opacity:1;transform:scale(1) translateY(0);}
}
.fpp-user-card-close{background:rgba(0,0,0,.35);color:#fff;top:12px;}
.fpp-user-card-close:hover{background:rgba(0,0,0,.55);color:#fff;}

.fpp-user-card-hero{
    position:relative;width:100%;height:120px;overflow:hidden;
    background:linear-gradient(135deg,#6C63FF,#8B7CFF 55%,#00D4AA);
}
.fpp-user-card-avatar{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:saturate(1.05);
}
.fpp-user-card-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(15,15,30,.78) 100%);
}
.fpp-user-card-name{
    position:absolute;inset-inline-start:18px;bottom:14px;inset-inline-end:18px;
    color:#fff;font-size:19px;font-weight:800;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.35);
    word-break:break-word;
}

.fpp-user-card-stats{display:flex;flex-wrap:wrap;padding:18px 14px 6px;gap:8px;}
.fpp-user-card-stat{
    flex:1 1 28%;text-align:center;background:var(--fpp-surface);border:1px solid var(--fpp-surface-border);
    border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;gap:4px;
}
.fpp-user-card-stat-value{font-size:19px;font-weight:800;color:var(--fpp-text-strong);}
.fpp-user-card-stat-label{font-size:10.5px;color:var(--fpp-text-muted);font-weight:600;line-height:1.3;}
.fpp-user-card-stat-highlight{
    background:linear-gradient(135deg,rgba(0,212,170,.14),rgba(0,212,170,.05));
    border-color:rgba(0,212,170,.3);
}
.fpp-user-card-stat-highlight .fpp-user-card-stat-value{color:#00b39c;}
.fpp-user-card-stat-danger{
    background:linear-gradient(135deg,rgba(214,54,56,.14),rgba(214,54,56,.05));
    border-color:rgba(214,54,56,.35);
}
.fpp-user-card-stat-danger .fpp-user-card-stat-value{color:#D63638;}
.fpp-user-card-stat-danger .fpp-user-card-stat-label{color:#D63638;}

.fpp-user-card-points{
    text-align:center;padding:12px 18px 20px;font-size:13px;color:var(--fpp-text-muted);
}
.fpp-user-card-points strong{color:var(--fpp-text-strong);font-size:15px;}

/* ============================================================
   کلیک روی «نتایج دقیق» داخل کارت پروفایل کاربر: پاپ‌آپ دومی، بالاتر از
   پاپ‌آپ کارت پروفایل، لیست بازی‌هایی که کاربر دقیق حدس زده را نشان
   می‌دهد. با زدن ✕ فقط همین پاپ‌آپ بسته می‌شود و کارت پروفایل زیرش
   دوباره دیده می‌شود.
   ============================================================ */
.fpp-user-card-stat-clickable{cursor:pointer;transition:transform .12s,box-shadow .15s;}
.fpp-user-card-stat-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,179,156,.20);}
.fpp-user-card-stat-clickable:active{transform:scale(.97);}

.fpp-exact-modal{z-index:100020;}
.fpp-exact-modal .fpp-predictions-modal-box{max-width:420px;}
.fpp-exact-modal-header{
    display:flex;align-items:center;gap:10px;padding:20px 46px 14px 18px;
    background:var(--fpp-modal-header-bg);border-bottom:1px solid var(--fpp-divider);flex-shrink:0;
}
.fpp-exact-modal-header h3{margin:0;font-size:14.5px;font-weight:800;color:var(--fpp-text-strong);}
.fpp-missed-matches-modal-header{background:linear-gradient(135deg,rgba(214,54,56,.14),rgba(214,54,56,.04));}
.fpp-missed-matches-modal-header h3{color:#D63638;}

.fpp-exact-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.fpp-exact-list{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;}
.fpp-exact-item{background:var(--fpp-surface);border:1px solid var(--fpp-surface-border);border-radius:12px;padding:10px 12px;text-align:center;}
.fpp-exact-item-date{font-size:11px;color:var(--fpp-text-muted);margin-bottom:6px;text-align:center;}
.fpp-exact-item-teams{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.fpp-exact-item-team{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--fpp-text-strong);flex:1;min-width:0;}
.fpp-exact-item-team:first-child{flex-direction:row-reverse;}
.fpp-exact-item-team img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.fpp-exact-item-score{font-weight:800;color:#00A388;font-size:15px;flex-shrink:0;padding:0 6px;}
.fpp-exact-item-points{margin-top:6px;text-align:center;font-size:11px;font-weight:700;color:#00A388;}
.fpp-exact-item-double{
    margin-top:6px;display:inline-block;font-size:11px;font-weight:800;color:#fff;
    background:linear-gradient(135deg,#34C759,#28a745);border-radius:20px;padding:3px 10px;
}

/* مسابقه‌ای که کاربر فراموش کرده پیش‌بینی کند: کادر و رنگ قرمز، هم‌رنگ با
   کارت‌های «از‌دست‌رفته» بقیه‌ی قسمت‌های سایت. */
.fpp-exact-item-missed{border-color:rgba(214,54,56,.5);background:rgba(214,54,56,.06);}
.fpp-exact-item-missed-score{color:#D63638 !important;font-size:12px !important;}

/* ============================================================
   سیستم سطح‌بندی و بدج کاربران (FPP_Badges)
   هر ۳ نتیجه‌ی دقیق = یک سطح؛ حداکثر ۱۰ سطح. بدج‌ها با گرادیان رنگی
   هر سطح + انیمیشن درخشش (شاین) و ذرات طلایی (اسپارک) ساخته می‌شوند تا
   حس یک شیء باارزش/دستاورد بازی‌های کامپیوتری را القا کنند.
   ============================================================ */

.fpp-badge{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    vertical-align:middle;flex-shrink:0;
    filter:drop-shadow(0 2px 5px rgba(var(--fpp-badge-glow,255,215,0),.45));
}
.fpp-badge-size-xs{width:17px;height:17px;margin-inline-start:4px;}
.fpp-badge-size-sm{width:26px;height:26px;}
.fpp-badge-size-md{width:38px;height:38px;}
.fpp-badge-size-lg{width:58px;height:58px;}

.fpp-badge-shape{
    width:100%;height:100%;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(155deg,var(--fpp-badge-from,#c99a2e),var(--fpp-badge-to,#ffe07a) 72%);
    clip-path:polygon(50% 0%,100% 20%,100% 62%,50% 100%,0% 62%,0% 20%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.65),inset 0 -3px 6px rgba(0,0,0,.28);
}
.fpp-badge-elite .fpp-badge-shape{
    background:linear-gradient(155deg,var(--fpp-badge-from,#e0ab00),#fff6cf 40%,var(--fpp-badge-to,#fff6cf) 75%,var(--fpp-badge-from,#e0ab00));
    background-size:220% 220%;
    animation:fppEliteShift 3.6s ease-in-out infinite;
}
@keyframes fppEliteShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}

.fpp-badge-shape::after{
    content:'';position:absolute;top:-40%;left:-65%;width:38%;height:180%;
    background:linear-gradient(75deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
    transform:rotate(18deg);animation:fppBadgeShine 3.4s ease-in-out infinite;
}
@keyframes fppBadgeShine{
    0%{left:-65%;}
    55%{left:135%;}
    100%{left:135%;}
}

.fpp-badge-level{
    font-size:52%;font-weight:800;color:rgba(0,0,0,.55);
    text-shadow:0 1px 0 rgba(255,255,255,.45);line-height:1;
}
.fpp-badge-size-xs .fpp-badge-level{font-size:9px;}
.fpp-badge-size-lg .fpp-badge-level{font-size:22px;}

.fpp-badge-shape-img{background:#fff;padding:2px;}
.fpp-badge-shape-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* بدج‌های PNG آپلودی: بدون کادر شش‌ضلعی، بدون گرادیان/سایه پس‌زمینه؛ خود
   تصویر با اندازه‌ای قابل‌دیدن نمایش داده می‌شود. ماسک روی خودِ ظرف
   (نه روی لایه‌ی متحرک) گذاشته می‌شود و نور با transform (نه جابه‌جایی
   left) حرکت می‌کند تا انیمیشن کاملاً روان و بدون پرش باشد؛ نتیجه یک
   برق است که دقیقاً داخل قالب همان فایل PNG می‌لغزد. */
.fpp-badge-img{filter:none;}
.fpp-badge-img .fpp-badge-shape{
    background:none;box-shadow:none;clip-path:none;
    animation:none;background-size:auto;
    -webkit-mask-image:var(--fpp-badge-mask);mask-image:var(--fpp-badge-mask);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-mode:alpha;mask-mode:alpha;
}
.fpp-badge-img .fpp-badge-shape-img{background:transparent;padding:0;}
.fpp-badge-img .fpp-badge-shape-img img{width:100%;height:100%;object-fit:contain;}
.fpp-badge-img .fpp-badge-shape::after{
    transform:translateX(0) rotate(18deg);
    animation:fppBadgeImgShine 2.8s cubic-bezier(.4,0,.2,1) infinite;
    will-change:transform;
}
@keyframes fppBadgeImgShine{
    0%{transform:translateX(0) rotate(18deg);}
    50%{transform:translateX(526%) rotate(18deg);}
    100%{transform:translateX(526%) rotate(18deg);}
}

.fpp-badge-img.fpp-badge-size-xs{width:26px;height:26px;}
.fpp-badge-img.fpp-badge-size-sm{width:38px;height:38px;}
.fpp-badge-img.fpp-badge-size-md{width:52px;height:52px;}
.fpp-badge-img.fpp-badge-size-lg{width:78px;height:78px;}

.fpp-badge-locked{filter:grayscale(1) opacity(.5);}
.fpp-badge-locked .fpp-badge-shape::after{display:none;}

/* حلقه‌ی پیشرفت دور عکس پروفایل */
.fpp-avatar-ring{
    --fpp-ring-pct:0;
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    padding:3px;border-radius:50%;
    background:conic-gradient(from -90deg,var(--fpp-ring-from,#9aa5b1) calc(var(--fpp-ring-pct)*1%),rgba(120,130,145,.2) 0);
    box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 2px 8px rgba(0,0,0,.12);
    transition:background .5s ease;
}
.fpp-avatar-ring-lg{padding:4px;}

/* بدج روی گوشه‌ی پایین عکس پروفایل */
.fpp-avatar-badge{
    position:absolute;inset-block-end:-2px;inset-inline-end:-2px;
    z-index:2;line-height:0;pointer-events:none;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.fpp-avatar-ring .fpp-avatar-badge .fpp-badge{
    width:var(--fpp-avatar-badge-size,18px);height:var(--fpp-avatar-badge-size,18px);
    margin-inline-start:0;
}

/* کارت سطح (عکس در حلقه + بدج + نام سطح + نوار پیشرفت) */
.fpp-level-card{
    display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;
    background:var(--fpp-surface);border:1px solid var(--fpp-surface-border);margin-bottom:18px;
}
.fpp-level-card-avatar-wrap img{border-radius:50%;object-fit:cover;display:block;}
.fpp-level-card-body{flex:1;min-width:0;}
.fpp-level-header{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.fpp-level-header-text{display:flex;flex-direction:column;min-width:0;}
.fpp-level-header-name{font-weight:800;font-size:14.5px;color:var(--fpp-text-strong);}
.fpp-level-header-sub{font-size:11.5px;color:var(--fpp-text-muted);margin-top:1px;}
.fpp-level-bar{height:8px;border-radius:6px;background:var(--fpp-divider);overflow:hidden;}
.fpp-level-bar-fill{height:100%;border-radius:6px;transition:width .5s ease;}

/* شبکه‌ی بدج‌های کسب‌شده */
.fpp-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:14px;padding:14px 4px;}
.fpp-badges-grid-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.fpp-badges-grid-name{font-size:10px;color:var(--fpp-text-muted);font-weight:700;}
.fpp-badges-empty{padding:14px 4px;text-align:center;font-size:12.5px;color:var(--fpp-text-muted);}
.fpp-badges-next{
    display:flex;align-items:center;gap:10px;padding:12px 4px 4px;
    border-top:1px dashed var(--fpp-divider);margin-top:2px;
}
.fpp-badges-next-text{font-size:11.5px;color:var(--fpp-text-muted);line-height:1.5;}
.fpp-badges-next-text strong{color:var(--fpp-text-strong);}

.fpp-user-card-badges{padding:0 18px 18px;}
.fpp-user-card-badges h4{margin:0;padding:2px 0 0;font-size:12.5px;color:var(--fpp-text-strong);font-weight:800;}
.fpp-user-card-badges .fpp-badges-grid,
.fpp-user-card-badges .fpp-badges-empty,
.fpp-user-card-badges .fpp-badges-next{padding-inline:0;}
.fpp-user-card-level{padding:14px 18px 0;}
.fpp-dashboard-badges{padding:0 0 18px;margin-top:-6px;}
.fpp-dashboard-badges h4{margin:0 0 4px;font-size:14px;color:var(--fpp-text-strong);font-weight:800;}

body.dark-mode .fpp-level-card,html.dark-mode .fpp-level-card,
body.dark-theme .fpp-level-card,html.dark-theme .fpp-level-card{
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
}

@media (max-width:480px){
    .fpp-badge-size-xs{width:15px;height:15px;}
    .fpp-level-card{padding:12px;gap:10px;}
    .fpp-badges-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:10px;}
}