/* تالار افتخارات بازی‌ها — هم‌سنگ نسخه اپ (پودیوم، تیکر زنده، شیمر بارگذاری) */
.qh-ticker{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent)}
.qh-ticker-track{display:inline-block;padding-inline-start:100%;animation:qh-ticker-move 28s linear infinite}
.qh-ticker:hover .qh-ticker-track{animation-play-state:paused}
@keyframes qh-ticker-move{from{transform:translateX(0)}to{transform:translateX(100%)}}
.qh-pill{font:inherit;font-size:11px;font-weight:900;padding:8px 14px;border-radius:12px;border:1px solid #8794ac55;background:#ffffff08;color:inherit;cursor:pointer;min-height:38px;transition:all .15s;white-space:nowrap}
.qh-pill:hover{transform:translateY(-1px);border-color:#f59e0b}
.qh-pill[aria-pressed=true]{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#fde047;color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.4)}
.qh-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end;max-width:640px;margin:0 auto}
@media(max-width:520px){.qh-podium{gap:6px}}
.qh-podium-card{border-radius:18px;padding:14px 8px;text-align:center;border:1px solid #8794ac44;background:#ffffff06;position:relative;overflow:hidden}
.qh-podium-card.qh-first{background:linear-gradient(180deg,rgba(245,158,11,.22),rgba(245,158,11,.05));border-color:#f59e0b88;box-shadow:0 10px 30px rgba(245,158,11,.25);padding-top:20px;padding-bottom:18px}
.qh-podium-card.qh-second{background:linear-gradient(180deg,rgba(148,163,184,.2),transparent);border-color:#94a3b855}
.qh-podium-card.qh-third{background:linear-gradient(180deg,rgba(180,83,9,.18),transparent);border-color:#b4530955}
.qh-podium-medal{font-size:30px;line-height:1;filter:drop-shadow(0 4px 6px #0005)}
.qh-first .qh-podium-medal{font-size:40px;animation:qh-crown-bounce 1.6s ease-in-out infinite}
@keyframes qh-crown-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.qh-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #f59e0b;background:#fff;margin:8px auto 4px;display:block}
.qh-first .qh-avatar{width:58px;height:58px;border-width:3px}
.qh-rank-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;border:1px solid transparent;transition:background .15s}
.qh-rank-row:hover{background:#ffffff08;border-color:#8794ac33}
.qh-rank-num{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:900;background:#8794ac22;flex:none}
.qh-my-rank{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.08));border:1px solid #f59e0b66}
.qh-shimmer{border-radius:14px;min-height:64px;background:linear-gradient(90deg,#8794ac22 25%,#8794ac44 50%,#8794ac22 75%);background-size:200% 100%;animation:qh-shimmer 1.2s infinite}
@keyframes qh-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.qh-ticker-track,.qh-first .qh-podium-medal,.qh-shimmer{animation:none}}


/* =========================================================================
   QBGameChat — Unified Game Chat & Voice Styles
   ========================================================================= */
@keyframes qbChatFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: qbChatFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.qb-chat-box::-webkit-scrollbar {
    width: 4px;
}
.qb-chat-box::-webkit-scrollbar-track {
    background: transparent;
}
.qb-chat-box::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 99px;
}
.qb-emotes-row::-webkit-scrollbar {
    height: 3px;
}
.qb-emotes-row::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 99px;
}

/* تضمین ۱۰۰٪ عدم سرریز فرم چت و دکمه ارسال پیام در تمام ابعاد و صفحات */
.qb-unified-chat,
.qb-game-chat-wrapper,
[id$="-unified-chat-panel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.qb-chat-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding-top: 4px !important;
}

.qb-chat-input-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.qb-chat-input-wrapper .qb-chat-input,
.qb-chat-form .qb-chat-input,
.qb-chat-input {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.qb-chat-input-wrapper .qb-chat-send,
.qb-chat-form .qb-chat-send,
.qb-chat-send {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#snakes-unified-chat-panel,
#mench-unified-chat-panel,
#duel-live-chat-panel,
#basketball-unified-chat-panel,
#galaxy-unified-chat-panel,
#soccer-unified-chat-panel,
#snake-unified-chat-panel,
#math-unified-chat-panel {
    width: 100%;
}
#mench-unified-chat-panel .qb-unified-chat,
#basketball-unified-chat-panel .qb-unified-chat,
#soccer-unified-chat-panel .qb-unified-chat,
#snake-unified-chat-panel .qb-unified-chat,
#math-unified-chat-panel .qb-unified-chat {
    min-height: 280px;
    max-height: min(400px, calc(100vh - 240px));
    display: flex;
    flex-direction: column;
}
#mench-unified-chat-panel .qb-chat-box,
#basketball-unified-chat-panel .qb-chat-box,
#soccer-unified-chat-panel .qb-chat-box,
#snake-unified-chat-panel .qb-chat-box,
#math-unified-chat-panel .qb-chat-box {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: 200px;
}

/* شطرنج، ماروپله و مرغ کهکشانی: سایدبار دارای لابی/کارت تنظیمات است؛
   سقف ارتفاع باعث بیرون‌زدگی فرم ارسال یا اسکرول ستون می‌شد.
   پنل چت به اندازه محتوای خود باز شده و لیست پیام‌ها داخلش اسکرول می‌شود. */
#snakes-unified-chat-panel .qb-unified-chat,
#duel-live-chat-panel .qb-unified-chat,
#galaxy-unified-chat-panel .qb-unified-chat {
    min-height: 0;
    max-height: none;
    overflow: visible;
}
#snakes-unified-chat-panel .qb-chat-box {
    min-height: 100px;
    max-height: 160px;
}
#duel-live-chat-panel .qb-chat-box {
    min-height: 100px;
    max-height: 150px;
}
#chess-moves-card {
    max-height: 140px;
    overflow-y: auto;
}

/* ریسپانسیو اختصاصی لپ‌تاپ‌ها (۱۰۲۴ تا ۱۴۴۰ پیکسل): تناسب ارتفاع چت با صفحه لپ‌تاپ جهت جلوگیری از اسکرول عمودی */
@media (min-width: 1024px) and (max-width: 1440px) {
    #mench-unified-chat-panel .qb-unified-chat,
    #basketball-unified-chat-panel .qb-unified-chat,
    #galaxy-unified-chat-panel .qb-unified-chat,
    #soccer-unified-chat-panel .qb-unified-chat,
    #snake-unified-chat-panel .qb-unified-chat,
    #math-unified-chat-panel .qb-unified-chat {
        min-height: 260px;
        max-height: min(360px, calc(100vh - 260px));
    }
    #duel-live-chat-panel .qb-unified-chat,
    #galaxy-unified-chat-panel .qb-unified-chat {
        min-height: 0;
        max-height: none;
    }
    #snakes-unified-chat-panel .qb-chat-box,
    #mench-unified-chat-panel .qb-chat-box,
    #basketball-unified-chat-panel .qb-chat-box,
    #galaxy-unified-chat-panel .qb-chat-box,
    #soccer-unified-chat-panel .qb-chat-box,
    #snake-unified-chat-panel .qb-chat-box,
    #math-unified-chat-panel .qb-chat-box {
        min-height: 120px;
        max-height: 180px;
    }
    #duel-live-chat-panel .qb-chat-box {
        min-height: 90px;
        max-height: 130px;
    }
    /* بهینه‌سازی تب‌های بالای صفحه برای جاگیری تمیز در یک ردیف در لپ‌تاپ‌ها */
    #bulletin-filters .filter-btn {
        padding: 0.5rem 0.65rem;
        font-size: 0.76rem;
        gap: 0.35rem;
    }
    #bulletin-filters .filter-btn span:first-child {
        font-size: 1rem;
    }
}

@media (max-width: 860px) {
    #mench-unified-chat-panel .qb-unified-chat,
    #duel-live-chat-panel .qb-unified-chat,
    #basketball-unified-chat-panel .qb-unified-chat,
    #galaxy-unified-chat-panel .qb-unified-chat,
    #soccer-unified-chat-panel .qb-unified-chat,
    #snake-unified-chat-panel .qb-unified-chat,
    #math-unified-chat-panel .qb-unified-chat {
        min-height: auto;
    }
    #snakes-unified-chat-panel .qb-chat-box,
    #mench-unified-chat-panel .qb-chat-box,
    #duel-live-chat-panel .qb-chat-box,
    #basketball-unified-chat-panel .qb-chat-box,
    #galaxy-unified-chat-panel .qb-chat-box,
    #soccer-unified-chat-panel .qb-chat-box,
    #snake-unified-chat-panel .qb-chat-box,
    #math-unified-chat-panel .qb-chat-box {
        min-height: 160px;
        max-height: 220px;
    }
}

/* =========================================================================
   چیدمان ۳ ستونه استاندارد و عریض بازی‌های کوییزبی (شطرنج، منچ، مار و پله، بسکتبال، کهکشان، فوتبال)
   Universal 3-Column Studio Layout for all games
   ========================================================================= */
.qb-chess-3col-layout,
.qb-mench-3col-layout,
.qb-basketball-3col-layout,
.qb-galaxy-3col-layout,
.qb-soccer-3col-layout,
.qb-snake-3col-layout,
.qb-math-3col-layout,
.qb-pacman-3col-layout,
.qb-tetris-3col-layout,
.qb-games-3col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    width: 100%;
}

/* در موبایل و تبلت: تخته و میدان بازی بالاترین اولویت */
.qb-chess-board-col,
.qb-mench-board-col,
.qb-col-stage {
    order: 1;
    width: 100%;
}
.qb-chess-setup-col,
.qb-mench-settings-col,
.qb-col-setup {
    order: 2;
    width: 100%;
}
.qb-chess-chat-col,
.qb-mench-chat-col,
.qb-col-extra {
    order: 3;
    width: 100%;
}

/* ستون‌های سایدبار منچ: هم‌اندازه ماروپله — چیدمان عمودی با فاصله ۱۴ پیکسل بین کارت‌ها */
.qb-mench-chat-col,
.qb-mench-settings-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* ستون‌های سایدبار شطرنج: چیدمان عمودی با فاصله استاندارد ۱۶ پیکسل بین کارت‌ها */
.qb-chess-setup-col,
.qb-chess-chat-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* تطبیق کنسول مدرن و شکیل فرمان و تاس منچ درون سایدبار راست بالای چت */
.qb-mench-chat-col .mench-command-deck {
    margin: 0;
    max-width: 100%;
    width: 100%;
    padding: 14px 16px 12px;
    border-radius: 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qb-mench-chat-col .mench-dice-tray,
.qb-mench-chat-col .mench-dice-stage {
    gap: 0;
    margin: 2px 0 6px;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.qb-mench-chat-col .mench-msg-banner {
    padding: 6px 16px;
    width: fit-content;
    max-width: 88%;
    margin: 0 auto;
    border-radius: 9999px;
}
.qb-mench-chat-col .mench-msg-text {
    font-size: 11.5px;
}
.qb-mench-chat-col .mench-chant-control {
    padding: 8px 10px;
}
.qb-mench-chat-col .mench-grand-roll-btn {
    padding: 11px 16px;
    font-size: 14px;
}
.qb-mench-chat-col .mench-meta-bar {
    font-size: 9.5px;
    margin-top: 6px;
    padding-top: 6px;
    gap: 6px;
    justify-content: center;
}

/* بازی مار و پله — چینش ستون وسط و قرارگیری کادر بازیکنان بالای تخته */
.snakes-board-col {
    grid-area: board;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
}
.snakes-board-col .topbar {
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}
#snakes-die,
.snakes-game .die {
    width: 74px !important;
    height: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
}
#snakes-die svg,
.snakes-game .die svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 74px !important;
    max-height: 74px !important;
    display: block !important;
}

/* =========================================================================
   سایدبارهای کاملاً متقارن، متوازن و هم‌اندازه (چپ و راست برابر) برای همه لپ‌تاپ‌ها و مانیتورها
   Symmetric, equal-width sidebars with zero overflow across all laptop & desktop sizes
   ========================================================================= */

/* لپ‌تاپ‌های فشرده و کوچک (۱۰۲۴ تا ۱۲۷۹ پیکسل): هر دو سایدبار کاملاً متقارن ۲۴۵px (شطرنج ۲۹۵px؛ منچ و محاسبات سریع ۲۹۰px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout,
    .qb-snake-3col-layout,
    .snakes-game .snakes-3col-layout,
    .snakes-3col-layout,
    .qb-games-3col-layout {
        grid-template-columns: 245px minmax(0, 1fr) 245px;
        gap: 0.75rem;
    }
    .qb-mench-3col-layout,
    .qb-math-3col-layout {
        grid-template-columns: 290px minmax(0, 1fr) 290px !important;
        gap: 0.85rem;
    }
    .qb-chess-3col-layout {
        grid-template-columns: 295px minmax(0, 1fr) 295px;
        gap: 1rem;
    }
    .qb-chess-setup-col, .qb-col-setup { order: 1; }
    .qb-chess-board-col, .qb-col-stage { order: 2; }
    .qb-chess-chat-col,  .qb-col-extra { order: 3; }

    .qb-mench-settings-col { order: 1; }
    .qb-mench-board-col    { order: 2; }
    .qb-mench-chat-col     { order: 3; }
}

/* لپ‌تاپ‌های استاندارد و متداول (۱۲۸۰ تا ۱۵۳۵ پیکسل): هر دو سایدبار کاملاً متقارن ۲۷۵px (شطرنج ۳۵۰px؛ منچ و محاسبات سریع ۳۳۵px) */
@media (min-width: 1280px) and (max-width: 1535px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout,
    .qb-snake-3col-layout,
    .snakes-game .snakes-3col-layout,
    .snakes-3col-layout,
    .qb-games-3col-layout {
        grid-template-columns: 275px minmax(0, 1fr) 275px;
        gap: 1rem;
    }
    .qb-mench-3col-layout,
    .qb-math-3col-layout {
        grid-template-columns: 335px minmax(0, 1fr) 335px !important;
        gap: 1rem;
    }
    .qb-chess-3col-layout {
        grid-template-columns: 350px minmax(0, 1fr) 350px;
        gap: 1.25rem;
    }
    .qb-chess-setup-col, .qb-col-setup { order: 1; }
    .qb-chess-board-col, .qb-col-stage { order: 2; }
    .qb-chess-chat-col,  .qb-col-extra { order: 3; }

    .qb-mench-settings-col { order: 1; }
    .qb-mench-board-col    { order: 2; }
    .qb-mench-chat-col     { order: 3; }
}

/* مانیتورهای عریض دسکتاپ (۱۵۳۶ پیکسل به بالا): هر دو سایدبار کاملاً متقارن ۳۰۰px (شطرنج ۳۸۵px؛ منچ و محاسبات سریع ۳۶۰px) */
@media (min-width: 1536px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout,
    .qb-snake-3col-layout,
    .snakes-game .snakes-3col-layout,
    .snakes-3col-layout,
    .qb-games-3col-layout {
        grid-template-columns: 300px minmax(0, 1fr) 300px;
        gap: 1.25rem;
    }
    .qb-mench-3col-layout,
    .qb-math-3col-layout {
        grid-template-columns: 360px minmax(0, 1fr) 360px !important;
        gap: 1.25rem;
    }
    .qb-chess-3col-layout {
        grid-template-columns: 385px minmax(0, 1fr) 385px;
        gap: 1.5rem;
    }
    .qb-chess-setup-col, .qb-col-setup { order: 1; }
    .qb-chess-board-col, .qb-col-stage { order: 2; }
    .qb-chess-chat-col,  .qb-col-extra { order: 3; }

    .qb-mench-settings-col { order: 1; }
    .qb-mench-board-col    { order: 2; }
    .qb-mench-chat-col     { order: 3; }
}

/* نمایشگرهای عریض: سایدبارهای منچ و محاسبات سریع فضای خالی کناره‌ها را می‌گیرند و ستون وسط روی سقف ۶۲۰px می‌ماند */
@media (min-width: 1400px) {
    [data-mench-auth] { max-width: 1440px !important; }
    .qb-mench-3col-layout,
    .qb-math-3col-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr) !important;
        gap: 1.25rem;
    }
    .qb-mench-board-col,
    .qb-math-3col-layout .qb-col-stage {
        max-width: 620px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 1600px) {
    [data-mench-auth] { max-width: none !important; padding-left: 2rem; padding-right: 2rem; }
    .qb-mench-3col-layout,
    .qb-math-3col-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr) !important;
        max-width: 100%;
    }
}

.qb-math-3col-layout .qb-col-stage {
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================================
   چیدمان عریض سه‌ستونه — منبع واحد (SSoT) برای تتریس و پک‌من نئون
   ADR-024: ستون وسط اولویت اول است (هدف --qb3-stage)؛ سایدبارها هر جای باقی‌مانده را
   می‌گیرند تا سقف --qb3-side-max (سایدبار چپ—کارت دوئل—هم پهن‌تر می‌شود).
   مصرف: class="qb-games-3col-layout qb-wide-3col-layout qb-<game>-3col-layout"
   تنظیم هر بازی فقط با متغیر (مثلاً --qb3-stage) انجام می‌شود، نه تکرار عدد.
   زیر ۱۰۲۴px: تک‌ستونه و ستون بازی اول (قاعدهٔ order پایهٔ بالا).
   ========================================================================= */
.qb-wide-3col-layout {
    --qb3-gap: 0.75rem;
    --qb3-stage: 760px;
    --qb3-stage-max: 860px;
    --qb3-side-min: 235px;
    --qb3-side-max: 365px;
}
.qb-pacman-3col-layout.qb-wide-3col-layout { --qb3-stage: 640px; --qb3-stage-max: 780px; }
@media (min-width: 1024px) {
    .qb-wide-3col-layout {
        grid-template-columns:
            clamp(var(--qb3-side-min), calc((100% - var(--qb3-stage) - 2 * var(--qb3-gap)) / 2), var(--qb3-side-max))
            minmax(0, var(--qb3-stage-max))
            clamp(var(--qb3-side-min), calc((100% - var(--qb3-stage) - 2 * var(--qb3-gap)) / 2), var(--qb3-side-max)) !important;
        justify-content: center !important;
        column-gap: var(--qb3-gap) !important;
    }
    .qb-wide-3col-layout > .qb-col-setup { order: 1; }
    .qb-wide-3col-layout > .qb-col-stage { order: 2; }
    .qb-wide-3col-layout > .qb-col-extra { order: 3; }
    /* حاشیهٔ داخلی کمتر روی دسکتاپ ⇒ سایدبارها ~۳۲px بیشتر (کارت پنل و ظرف صفحه) */
    .qb-wide-card { padding: 1rem !important; }
    .qb-wide-page { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (min-width: 1280px) {
    .qb-wide-3col-layout { --qb3-gap: 1.25rem; --qb3-side-min: 255px; }
}
/* ظرف صفحهٔ مستقل: روی نمایشگرهای عریض تا ۱۶۰۰px باز می‌شود (هاب: .qb-games-shell بالاتر) */
@media (min-width: 1536px) {
    .qb-wide-page { max-width: 1600px !important; }
}
.qb-wide-3col-layout > .qb-col-stage {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.qb-math-3col-layout .qb-col-setup,
.qb-math-3col-layout .qb-col-extra {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
}

/* جلوگیری از سرریز افقی و تضمین تناسب ارتفاع میدان بازی‌ها */
.qb-chess-board-col,
.qb-mench-board-col,
.qb-col-stage,
.qb-chess-setup-col,
.qb-col-setup,
.qb-chess-chat-col,
.qb-col-extra {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* تنظیم دقیق ابعاد تخته شطرنج جهت تضمین مربع بودن ۱:۱ و عدم کشیدگی در تمام رزولوشن‌ها */
.qb-chess-stage {
    width: 100% !important;
    max-width: min(100%, calc(100vh - 280px), 480px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#chessboard-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
#chessboard-grid {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
}
.chess-sq {
    aspect-ratio: 1 / 1 !important;
}
@media (min-width: 1280px) and (max-width: 1535px) {
    .qb-chess-stage {
        max-width: min(100%, calc(100vh - 270px), 520px) !important;
    }
}
@media (min-width: 1536px) {
    .qb-chess-stage {
        max-width: min(100%, calc(100vh - 250px), 550px) !important;
    }
}

/* تناسب و تمیزی المان‌های چت */
.qb-unified-chat {
    width: 100%;
    box-sizing: border-box;
}
.qb-unified-chat .qb-mic-btn,
.qb-unified-chat .qb-speaker-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================================================
   قوانین سراسری ضد سرریز افقی برای تمام لابی‌ها و پنل‌های بازی‌های کوییزبی
   Global Anti-Overflow & Robust Responsive Rules for All Game Lobbies & Sidebars
   ========================================================================= */

/* جلوگیری از سرریز در ستون‌های سایدبار و کارت‌های بازی */
.snakes-chat-column,
.snakes-game .side,
.qb-chess-setup-col,
.qb-chess-chat-col,
.qb-mench-settings-col,
.qb-mench-chat-col,
.qb-col-setup,
.qb-col-extra,
.qbd-hub-lobby,
.lobby-panel,
.bb-card,
#ss-mode-selector-card,
[data-score-duel] {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* پوستهٔ صفحهٔ بازی‌ها: روی نمایشگرهای عریض از فضای خالی کناره‌ها استفاده می‌کند
   تا سایدبارها (مثل مار و پله) پهن‌تر شوند؛ زیر ۱۶۰۰px همان max-w-[1440px] می‌ماند. */
@media (min-width: 1600px) {
    .qb-games-shell { max-width: 1640px; }
}

/* ستون چت شطرنج: عمداً scroll container نمی‌شود.
   با overflow-x: hidden مرورگر محور y را auto می‌کند و ستون حتی با وجود فضای خالی
   نوار اسکرول می‌گیرد (کارت چت ۴۵px از باکس بیرون می‌زد). clip هر دو محور را
   می‌بُرد ولی ظرف اسکرول نمی‌سازد؛ چون ارتفاع پنل چت حالا با محتوایش هم‌اندازه است،
   چیزی هم بریده نمی‌شود. */
.qb-chess-chat-col {
    overflow: hidden; /* fallback مرورگرهای قدیمی: نوار اسکرول نمی‌سازد */
    overflow: clip;
}

/* کلیه فیلدهای متنی، عددی و دراپ‌داون‌ها در فلکس و گرید */
.qbd-hub-lobby input,
.qbd-hub-lobby select,
.lobby-panel input,
.lobby-panel select,
.bb-card input,
.bb-card select,
#ss-mode-selector-card input,
#ss-mode-selector-card select,
[data-score-duel] input,
[data-score-duel] select,
.qb-mench-settings-col input,
.qb-mench-settings-col select {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ردیف‌های ورودی و پیوستن با کد */
.qbd-joinrow,
.joinrow,
.qbd-wager-row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.qbd-joinrow input,
.joinrow input {
    flex: 1 1 130px;
    min-width: 0 !important;
    max-width: 100%;
}
.qbd-joinrow button,
.joinrow button {
    flex-shrink: 0;
}

/* ردیف‌های تنظیم شرط بندی */
.qbd-wager-row select {
    flex: 1 1 110px;
    min-width: 0 !important;
}
.qbd-wager-row input {
    flex: 1 1 70px;
    min-width: 0 !important;
}
.qbd-wager-row button {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 4px;
}

/* تب‌های حالت و شمارش بازیکنان — گرید انعطاف‌پذیر با حداقل صفر */
.qbd-seg-mode,
.qbd-seg-count,
.snakes-game .seg,
#mench-idx-mode-selector,
#bb-mode-tabs,
#ss-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.qbd-seg-mode button,
.qbd-seg-count button,
.snakes-game .seg button,
#mench-idx-mode-selector button,
#bb-mode-tabs button,
#ss-mode-tabs button {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 8px 4px !important;
    font-size: 11.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
}

/* گرید ساخت میز و ورود سریع */
.qbd-create-grid,
.qbd-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.qbd-create-grid button,
.qbd-quick-grid button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* چیپ‌های مبلغ سریع */
.qbd-wager-chips,
.bb-wager-chips {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

/* =========================================================================
   ویترین قهرمان و کمد پوسته‌های مار آنلاین (Snake.io Arena VIP Showcase & Wardrobe)
   ========================================================================= */
.snake-hero-showcase {
    background: radial-gradient(ellipse at top right, rgba(16, 185, 129, 0.2), transparent 70%),
                radial-gradient(ellipse at bottom left, rgba(6, 182, 212, 0.16), transparent 70%),
                rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.skin-card {
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.skin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
}
.skin-card.active-skin {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.14) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.28), inset 0 0 10px rgba(16, 185, 129, 0.15) !important;
    transform: translateY(-1px);
}
#skins-grid::-webkit-scrollbar,
#global-leaderboard-container::-webkit-scrollbar,
#mt-mini-leaderboard::-webkit-scrollbar,
#bb-side-lb-list::-webkit-scrollbar,
.bb-ol::-webkit-scrollbar,
.gc2-ol::-webkit-scrollbar,
.to-records::-webkit-scrollbar,
.pn-records::-webkit-scrollbar {
    width: 5px;
}
#skins-grid::-webkit-scrollbar-track,
#global-leaderboard-container::-webkit-scrollbar-track,
#mt-mini-leaderboard::-webkit-scrollbar-track,
#bb-side-lb-list::-webkit-scrollbar-track,
.bb-ol::-webkit-scrollbar-track,
.gc2-ol::-webkit-scrollbar-track,
.to-records::-webkit-scrollbar-track,
.pn-records::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 99px;
}
html.dark #skins-grid::-webkit-scrollbar-track,
.dark #skins-grid::-webkit-scrollbar-track,
html.dark #global-leaderboard-container::-webkit-scrollbar-track,
.dark #global-leaderboard-container::-webkit-scrollbar-track,
html.dark #mt-mini-leaderboard::-webkit-scrollbar-track,
.dark #mt-mini-leaderboard::-webkit-scrollbar-track,
html.dark #bb-side-lb-list::-webkit-scrollbar-track,
.dark #bb-side-lb-list::-webkit-scrollbar-track,
html.dark .bb-ol::-webkit-scrollbar-track,
.dark .bb-ol::-webkit-scrollbar-track,
html.dark .gc2-ol::-webkit-scrollbar-track,
.dark .gc2-ol::-webkit-scrollbar-track,
html.dark .to-records::-webkit-scrollbar-track,
.dark .to-records::-webkit-scrollbar-track,
html.dark .pn-records::-webkit-scrollbar-track,
.dark .pn-records::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
#skins-grid::-webkit-scrollbar-thumb,
#global-leaderboard-container::-webkit-scrollbar-thumb,
#mt-mini-leaderboard::-webkit-scrollbar-thumb,
#bb-side-lb-list::-webkit-scrollbar-thumb,
.bb-ol::-webkit-scrollbar-thumb,
.gc2-ol::-webkit-scrollbar-thumb,
.to-records::-webkit-scrollbar-thumb,
.pn-records::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 99px;
}
html.dark #skins-grid::-webkit-scrollbar-thumb,
.dark #skins-grid::-webkit-scrollbar-thumb,
html.dark #global-leaderboard-container::-webkit-scrollbar-thumb,
.dark #global-leaderboard-container::-webkit-scrollbar-thumb,
html.dark #mt-mini-leaderboard::-webkit-scrollbar-thumb,
.dark #mt-mini-leaderboard::-webkit-scrollbar-thumb,
html.dark #bb-side-lb-list::-webkit-scrollbar-thumb,
.dark #bb-side-lb-list::-webkit-scrollbar-thumb,
html.dark .bb-ol::-webkit-scrollbar-thumb,
.dark .bb-ol::-webkit-scrollbar-thumb,
html.dark .gc2-ol::-webkit-scrollbar-thumb,
.dark .gc2-ol::-webkit-scrollbar-thumb,
html.dark .to-records::-webkit-scrollbar-thumb,
.dark .to-records::-webkit-scrollbar-thumb,
html.dark .pn-records::-webkit-scrollbar-thumb,
.dark .pn-records::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
}
#skins-grid::-webkit-scrollbar-thumb:hover,
#global-leaderboard-container::-webkit-scrollbar-thumb:hover,
#mt-mini-leaderboard::-webkit-scrollbar-thumb:hover,
#bb-side-lb-list::-webkit-scrollbar-thumb:hover,
.bb-ol::-webkit-scrollbar-thumb:hover,
.gc2-ol::-webkit-scrollbar-thumb:hover,
.to-records::-webkit-scrollbar-thumb:hover,
.pn-records::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}




/* =========================================================================
   سالن تمام‌صفحه بازی (QBArenaFS) — پرتاب طلایی، مرغ کهکشانی، فوتبال ستارگان
   ستون وسط این سه بازی فقط «کارت شروع» است؛ با شروع بازی ریشهٔ همان بازی
   تمام‌صفحه می‌شود و سایدبارها کنار می‌روند (public/js/game-arena-fullscreen.js).
   هیچ گره‌ای جابه‌جا نمی‌شود تا CSS اسکوپ‌شدهٔ هر بازی معتبر بماند.
   ========================================================================= */

/* سایدبارهای پهن‌تر برای این سه بازی: ستون وسط فقط کارت شروع است، پس فضا آزاد است */
@media (min-width: 1024px) and (max-width: 1279px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout {
        grid-template-columns: 290px minmax(0, 1fr) 290px;
        gap: 0.85rem;
    }
}
@media (min-width: 1280px) and (max-width: 1535px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout {
        grid-template-columns: 335px minmax(0, 1fr) 335px;
        gap: 1rem;
    }
}
@media (min-width: 1536px) {
    .qb-basketball-3col-layout,
    .qb-galaxy-3col-layout,
    .qb-soccer-3col-layout {
        grid-template-columns: 382px minmax(0, 1fr) 382px;
        gap: 1.25rem;
    }
}
.qb-basketball-3col-layout > .qb-col-stage,
.qb-galaxy-3col-layout > .qb-col-stage,
.qb-soccer-3col-layout > .qb-col-stage {
    min-width: 0;
}

/* میدان بازی‌های پرتاب طلایی، مرغ کهکشانی و ستارگان فوتبال همیشه درون ستون وسط و عادی باز است */
.qb-arena-docked {
    display: flex !important;
}
.qb-arena-launcher {
    display: none !important;
}
.qb-arena-fs-bar {
    display: none !important;
}

/* ------------- کارت شروع در ستون وسط ------------- */
.qb-arena-launcher {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--qb-border, rgba(148, 163, 184, 0.25));
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(99, 102, 241, 0.22), transparent 62%),
        radial-gradient(90% 80% at 10% 100%, rgba(245, 158, 11, 0.18), transparent 65%),
        var(--qb-card, #101527);
    padding: 22px 18px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
.qb-arena-launcher-art {
    width: 84px;
    height: 84px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    font-size: 40px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 26px -14px rgba(0, 0, 0, 0.9);
}
.qb-arena-launcher h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: var(--qb-head, #f8fafc);
    line-height: 1.5;
}
.qb-arena-launcher p {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 2;
    color: var(--qb-muted, #94a3b8);
}
.qb-arena-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.qb-arena-chip {
    font-size: 10px;
    font-weight: 900;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5f5;
    white-space: nowrap;
}
.qb-arena-start {
    width: 100%;
    max-width: 320px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border: 0;
    border-radius: 18px;
    font-size: 13.5px;
    font-weight: 900;
    color: #0b1020;
    cursor: pointer;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    box-shadow: 0 14px 30px -14px rgba(249, 115, 22, 0.85);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qb-arena-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -14px rgba(249, 115, 22, 0.95);
}
.qb-arena-start:active {
    transform: translateY(0) scale(0.99);
}
.qb-arena-launcher-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--qb-muted, #94a3b8);
}

/* ------------- نوار بالای حالت تمام‌صفحه ------------- */
.qb-arena-fs-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: linear-gradient(180deg, #0f172af7, #0f172adb);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}
.qb-arena-fs-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.qb-arena-fs-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex: none;
}
.qb-arena-fs-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.6;
}
.qb-arena-fs-titles b {
    font-size: 12.5px;
    font-weight: 900;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qb-arena-fs-titles small {
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qb-arena-fs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.qb-arena-fs-hint {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
}
@media (max-width: 520px) {
    .qb-arena-fs-hint { display: none; }
}
.qb-arena-fs-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.qb-arena-fs-close:hover {
    background: rgba(248, 113, 113, 0.26);
    color: #fff;
}

/* ------------- حالت عادی بازی‌ها (بدون تمام‌صفحه و با حفظ کامل سایدبارها) ------------- */
html.qb-arena-open,
html.qb-arena-open body {
    overflow: auto !important;
}
.qb-arena-live {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
    overflow: visible !important;
}
.qb-arena-live .qb-col-setup,
.qb-arena-live .qb-col-extra {
    display: flex !important;
}
.qb-arena-live .qb-arena-launcher {
    display: none !important;
}
.qb-arena-live .qb-col-stage {
    min-width: 0 !important;
    width: 100% !important;
}
.qb-arena-live #bb-arena-stage,
.qb-arena-live #gc2-arena-stage,
.qb-arena-live #ss-arena-stage {
    display: flex !important;
    width: 100% !important;
}
/* کارت نتیجهٔ فوتبال پس از پایان مسابقه */
#ss-result-modal {
    z-index: 145;
}

/* کارت زمان‌سنج شطرنج: انتخاب فعلی توپر و رنگی (مانند دکمه فعال تم تخته) */
.chess-speed-tile.is-selected {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.chess-speed-tile.is-selected .qb-text-head { color: #fff !important; }
.chess-speed-tile.is-selected .qb-text-muted { color: rgba(255, 255, 255, 0.78) !important; }
.chess-speed-tile.is-selected > span {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
#chess-wager-panel .chess-speed-tile.is-selected {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    border-color: #fcd34d !important;
    box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
#chess-wager-panel .chess-speed-tile.is-selected [class*="text-amber"] { color: #fff !important; }

/* مار آرنا: استیج تمام‌صفحه بالاتر از منوی ثابت سایت + جلوگیری از سرریز افقی لابی در عرض‌های کم */
#snake-stage { z-index: 120 !important; }
#snake-lobby { overflow-x: clip; max-width: 100%; }

/* میدان‌های پرتاب طلایی / مرغ کهکشانی / فوتبال: باز شدن عادی و درون‌صفحه‌ای (بدون تمام‌صفحه) */
.qb-arena-launcher,
.qb-arena-inline .qb-arena-launcher { display: none !important; }
.qb-arena-fs-bar,
.qb-arena-inline .qb-arena-fs-bar { display: none !important; }

/* =========================================================================
   اصلاح کشیدگی میدان‌ها + گیرکردن زیر منوی ثابت (در همه بازی‌های آرنا)
   میدان در حالت باز/تمام‌صفحه با حفظ نسبت تصویر و وسط‌چین می‌شود؛
   عرض از ارتفاع در دسترس محاسبه می‌شود تا هیچ‌گاه کشیده نشود.
   ========================================================================= */
:root { --qb-nav-h: 76px; }

/* نوار آرنا هنگام اسکرول زیر منوی ثابت پنهان نشود */
.qb-arena-inline,
.qb-arena-live { scroll-margin-top: calc(var(--qb-nav-h) + 10px); }

/* فوتبال: نسبت زمین ۱۱۲۰×۶۸۰ */
.qb-arena-inline .ss-arena,
.qb-arena-live .ss-arena {
    width: min(100%, calc((100dvh - var(--qb-nav-h) - 120px) * 1120 / 680)) !important;
    max-height: none !important;
    margin-inline: auto !important;
    aspect-ratio: 1120 / 680 !important;
}

/* بسکتبال و مرغ کهکشانی: بوم‌ها با نسبت ۱۶:۹ و وسط‌چین */
.qb-arena-inline #bb-stage,
.qb-arena-live #bb-stage,
.qb-arena-inline #gc2-stage,
.qb-arena-live #gc2-stage {
    width: min(100%, calc((100dvh - var(--qb-nav-h) - 120px) * 16 / 9)) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
}

/* در عرض‌های کم (موبایل) تمام عرض بماند ولی ارتفاع از نسبت تصویر نیاید */
@media (max-width: 720px) {
    .qb-arena-inline .ss-arena,
    .qb-arena-live .ss-arena,
    .qb-arena-inline #bb-stage,
    .qb-arena-live #bb-stage,
    .qb-arena-inline #gc2-stage,
    .qb-arena-live #gc2-stage {
        width: 100% !important;
    }
}

/* دکمهٔ تمام‌صفحهٔ آرنا + پنهان‌کردن منوی سایت در حالت تمام‌صفحه */
.qb-arena-fs-fsbtn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.qb-arena-fs-fsbtn:hover { background: rgba(148, 163, 184, 0.24); color: #fff; }

html.qb-arena-open,
html.qb-arena-open body { overflow: hidden !important; }
html.qb-arena-open .qb-mainnav { display: none !important; }

/* در تمام‌صفحه، منو پنهان است؛ ارتفاع در دسترس فقط نوار آرنا را کم می‌کند */
.qb-arena-live .ss-arena {
    width: min(100%, calc((100dvh - 120px) * 1120 / 680)) !important;
}
.qb-arena-live #bb-stage,
.qb-arena-live #gc2-stage {
    width: min(100%, calc((100dvh - 120px) * 16 / 9)) !important;
}

/* =========================================================================
   Universal Game Design Tokens & Dark Theme Fixes (.qb-card, .qb-card-sub, etc.)
   تضمین سراسری: کارت‌ها و بخش‌های بازی در تم تاریک هرگز سفید خالص یا بدون هویت نمی‌شوند
   ========================================================================= */
.qb-card {
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    color: #1e293b;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.qb-card-sub {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.qb-pill {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    transition: all 0.2s ease;
}
.qb-pill:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}
.qb-input {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    transition: all 0.2s ease;
}
.qb-text-head {
    color: var(--qb-text, #0f172a);
}
.qb-text-muted {
    color: var(--qb-text-muted, #64748b);
}
.qb-border {
    border-color: var(--qb-border-soft, #e2e8f0);
}

/* --- حالت دارک در تمام صفحات بازی --- */
html.dark .qb-card,
.dark .qb-card {
    background-color: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6) !important;
    color: #f1f5f9 !important;
}
html.dark .qb-card-sub,
.dark .qb-card-sub {
    background-color: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}
html.dark .qb-pill,
.dark .qb-pill {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
html.dark .qb-pill:hover,
.dark .qb-pill:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}
html.dark .qb-text-head,
.dark .qb-text-head {
    color: var(--qb-text, #f1f5f9) !important;
}
html.dark .qb-text-muted,
.dark .qb-text-muted {
    color: var(--qb-text-muted, #94a3b8) !important;
}
html.dark .qb-border,
.dark .qb-border {
    border-color: var(--qb-border-soft, #1e293b) !important;
}
html.dark .qb-input,
.dark .qb-input {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
html.dark .qb-input:focus,
.dark .qb-input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}
html.dark .qb-input option,
.dark .qb-input option,
html.dark select option,
.dark select option {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* =========================================================================
   کارت‌های تالار جامع همه بازی‌های دونفره (#game-pane-all .qb-card)
   افکت‌های هوشمند هاور، حرکت شناور و درخشش نئونی
   ========================================================================= */
#game-pane-all .qb-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
    cursor: pointer;
}
#game-pane-all .qb-card:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 35px -10px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.4) !important;
}
html.dark #game-pane-all .qb-card:hover,
.dark #game-pane-all .qb-card:hover {
    transform: translateY(-7px) !important;
    background-color: rgba(30, 41, 59, 0.85) !important;
    box-shadow: 0 24px 45px -12px rgba(0, 0, 0, 0.85), 0 0 20px -3px rgba(99, 102, 241, 0.35), 0 0 0 1.5px rgba(129, 140, 248, 0.5) !important;
}
#game-pane-all .qb-card .group-hover\:scale-105 {
    transition: transform 0.3s ease;
}
#game-pane-all .qb-card:hover .group-hover\:scale-105 {
    transform: scale(1.1) rotate(2deg);
}

/* =========================================================================
   دوئل‌های شرطی (Wager Games): درخشش طلایی، هاور پویا و خوانایی بالا در دارک‌مود
   ========================================================================= */
.hub-duel-row {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    cursor: pointer;
}
.hub-duel-row:hover {
    transform: translateY(-3px) scale(1.015) !important;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.45) !important;
}
html.dark .hub-duel-row:hover,
.dark .hub-duel-row:hover {
    background-color: rgba(30, 41, 59, 0.95) !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(129, 140, 248, 0.5) !important;
}

.hub-duel-row.is-wager {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(180, 83, 9, 0.12)) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28) inset, 0 8px 22px -10px rgba(245, 158, 11, 0.65) !important;
}
html.dark .hub-duel-row.is-wager,
.dark .hub-duel-row.is-wager {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(120, 53, 15, 0.28)) !important;
    border-color: rgba(245, 158, 11, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35) inset, 0 10px 25px -8px rgba(0, 0, 0, 0.7) !important;
}
.hub-duel-row.is-wager:hover {
    transform: translateY(-4px) scale(1.02) !important;
    border-color: rgba(245, 158, 11, 0.95) !important;
    box-shadow: 0 16px 32px -6px rgba(245, 158, 11, 0.55), 0 0 0 1.5px rgba(251, 191, 36, 0.7) inset !important;
}

/* چیپ‌های مبلغ سریع شرطی (۲۵، ۵۰، ۱۰۰، ۲۵۰) در تمام بازی‌ها */
.wager-chip,
.qbd-wager-chip,
.chess-chip,
[id*="chip-"],
[onclick*="WagerAmount"],
[onclick*="wagerAmount"] {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.wager-chip:hover,
.qbd-wager-chip:hover,
.chess-chip:hover,
[id*="chip-"]:hover,
[onclick*="WagerAmount"]:hover,
[onclick*="wagerAmount"]:hover {
    transform: translateY(-2px) scale(1.07) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    background-color: rgba(245, 158, 11, 0.22) !important;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.3) !important;
}
.wager-chip:active,
.qbd-wager-chip:active,
[onclick*="WagerAmount"]:active {
    transform: translateY(0) scale(0.95) !important;
}

/* چیپ فعال شرطی */
.wager-chip.is-active,
.qbd-wager-chip.is-active,
[id*="chip-"].is-active,
.chip-active-wager {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #0f172a !important;
    border-color: #fde047 !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45) !important;
    transform: scale(1.05) !important;
}

/* دکمه‌های ۳ تب مود بازی‌ها (با ربات / آنلاین / شرطی) */
.mode-tab-btn,
.mench-mode-tab-btn,
.mench-idx-mode-btn,
[data-sd-tab],
#bb-menu-tabs button,
#ss-tabs button,
#snakes-mode-seg button {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mode-tab-btn:hover:not(.active),
.mench-mode-tab-btn:hover:not(.active),
.mench-idx-mode-btn:hover:not(.active),
[data-sd-tab]:hover:not(.bg-indigo-600):not(.bg-amber-500),
#bb-menu-tabs button:hover:not(.active):not(.bg-indigo-600):not(.bg-amber-500),
#ss-tabs button:hover:not(.active):not(.bg-indigo-600):not(.bg-amber-500),
#snakes-mode-seg button:hover:not(.on) {
    transform: translateY(-1px) scale(1.02) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    background-color: rgba(99, 102, 241, 0.12) !important;
    color: #818cf8 !important;
}
html.dark .mode-tab-btn:hover:not(.active),
html.dark .mench-mode-tab-btn:hover:not(.active),
html.dark .mench-idx-mode-btn:hover:not(.active),
html.dark [data-sd-tab]:hover:not(.bg-indigo-600):not(.bg-amber-500),
html.dark #bb-menu-tabs button:hover:not(.active):not(.bg-indigo-600):not(.bg-amber-500),
html.dark #ss-tabs button:hover:not(.active):not(.bg-indigo-600):not(.bg-amber-500),
html.dark #snakes-mode-seg button:hover:not(.on) {
    background-color: rgba(99, 102, 241, 0.22) !important;
    color: #c7d2fe !important;
}

/* دکمه‌های ساخت و تایید دوئل شرطی */
.btn-wager-create,
#chess-wager-panel button[onclick*="createWager"],
#mench-wager-create-btn,
#bb-create-wager-btn,
#ss-wager-create-btn,
#snakes-wager-btn,
button[onclick*="QBScoreDuel.create"] {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-wager-create:hover,
#chess-wager-panel button[onclick*="createWager"]:hover,
#mench-wager-create-btn:hover,
#bb-create-wager-btn:hover,
#ss-wager-create-btn:hover,
#snakes-wager-btn:hover,
button[onclick*="QBScoreDuel.create"]:hover {
    transform: translateY(-2px) scale(1.015) !important;
    box-shadow: 0 12px 28px -6px rgba(245, 158, 11, 0.55), 0 0 0 1px rgba(253, 230, 138, 0.4) inset !important;
    filter: brightness(1.08) !important;
}
.btn-wager-create:active,
#chess-wager-panel button[onclick*="createWager"]:active,
#mench-wager-create-btn:active,
#bb-create-wager-btn:active,
#ss-wager-create-btn:active,
#snakes-wager-btn:active,
button[onclick*="QBScoreDuel.create"]:active {
    transform: translateY(0) scale(0.98) !important;
}


/* ===== استیبل‌سازی موبایل: شطرنج و بازی‌های سه‌ستونه ===== */
@media (max-width: 640px) {
  .qb-chess-3col-layout,
  .qb-mench-3col-layout,
  .qb-basketball-3col-layout,
  .qb-galaxy-3col-layout,
  .qb-soccer-3col-layout,
  .qb-snake-3col-layout,
  .qb-math-3col-layout,
  .qb-pacman-3col-layout,
  .qb-tetris-3col-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }
  .qb-chess-board-col, .qb-chess-stage, #chessboard-container,
  .qb-chess-setup-col, .qb-chess-chat-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .qb-chess-player-bar {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 6px 8px !important;
  }
  .qb-chess-player-bar > * { min-width: 0 !important; }
  .qb-chess-player-bar .qb-chess-clock,
  .qb-chess-clock {
    font-size: 15px !important;
    padding: 2px 8px !important;
    flex: 0 0 auto !important;
  }
  .qb-chess-controls-bar { flex-wrap: wrap !important; justify-content: center !important; }
}
/* Mobile hard containment: prevent page-level horizontal overflow in games */
@media (max-width: 640px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  .qb-games-shell, .qb-games-page, #games-page, .game-pane,
  #game-pane-chess, #chess-arena, #game-pane-mench, #game-pane-galaxy_cluckers {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow-x: clip !important;
  }
  #chessboard-container, #chessboard-grid, .qb-chess-stage {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  .qb-chess-player-bar { overflow: hidden !important; }
  .qb-chess-player-bar .qb-chess-clock { max-width: 46% !important; }
}
/* Chess mobile: force 8 fluid columns, pieces fit */
@media (max-width: 640px) {
  #chessboard-grid {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  #chessboard-grid .chess-sq {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
  }
  #chessboard-grid .chess-piece {
    max-width: 100% !important;
    max-height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
  }
  #chessboard-container { border-width: 6px !important; }
}
/* Final safety: keep chess board inside mobile viewport even with RTL offsets */
@media (max-width: 640px) {
  #chessboard-container, .qb-chess-stage, #chessboard-grid {
    width: min(100%, 86vw) !important;
    max-width: 86vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Game tabs: wrap instead of hidden horizontal scroll (mouse-friendly) */
#bulletin-filters {
  overflow: visible !important;
}
#bulletin-filters > div {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  justify-content: center !important;
  gap: 6px !important;
}
#bulletin-filters button {
  flex: 1 1 110px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  #bulletin-filters button {
    flex: 1 1 calc(33.333% - 6px) !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
  }
}