/* ===== فونت‌های SF Arabic: ۸ وزن ===== */
        /* پوشه fonts/ باید کنار index.html در گیت‌هاب‌پیجز باشه با همین اسم‌ها */
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Thin.woff2') format('woff2');
            font-weight: 100;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Ultralight.woff2') format('woff2');
            font-weight: 200;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Light.woff2') format('woff2');
            font-weight: 300;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Semibold.woff2') format('woff2');
            font-weight: 600;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap
        }
        @font-face {
            font-family: 'SFArabic';
            src: url('fonts/SFArabic-Heavy.woff2') format('woff2');
            font-weight: 800 900;
            font-style: normal;
            font-display: swap
        }
        :root {
            --header-h: 62px;
            --bg-color: #000000;
            --card-bg: #151a22;
            --border-color: #252e39;
            --text-main: #e6edf3;
            --text-muted: #8b949e;
            --red-color: #ff3b30;
            --blue-color: #007aff;
            --green-color: #34c759;
            --yellow-color: #ffcc00;
            --wall-color: #acb8c8;
            --board-bg: #1b2129;
            --grid-color: #282f3a
        }
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none
        }
        html {
            scrollbar-width: none;
            -ms-overflow-style: none
        }
        html::-webkit-scrollbar {
            display: none
        }
        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'SFArabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            margin: 0;
            padding: calc(var(--header-h) + 14px) 20px 20px;
            min-height: 100vh;
            user-select: none;
            scrollbar-width: none;
            -ms-overflow-style: none
        }
        body::-webkit-scrollbar {
            display: none
        }
        #app {
            width: 100%;
            max-width: 1100px;
            display: none;
            flex-direction: column;
            gap: 16px
        }
        #app.visible {
            display: flex
        }
        #start-overlay {
            position: absolute;
            top: var(--header-h);
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .94);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 200;
            padding: 20px
        }
        .start-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 32px 26px;
            max-width: 400px;
            width: 100%;
            text-align: center;
            box-shadow: 0 10px 40px rgb(0 0 0 / .6);
            animation: startPop 0.35s ease
        }
        @keyframes startPop {
            from {
                opacity: 0;
                transform: translateY(10px) scale(.97)
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }
        .start-card h1 {
            margin: 0 0 6px;
            font-size: 24px;
            font-weight: 900;
            letter-spacing: .5px
        }
        .start-card .subtitle {
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 300;
            text-align: center;
            margin: 0 0 26px;
            line-height: 1.6
        }
        .mode-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
            background: #1b2129;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 16px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.25s ease;
            color: var(--text-main);
            text-align: left;
            font-family: inherit
        }
        .mode-btn:hover {
            border-color: #4a5a6b;
            background: #20272f;
            transform: translateY(-2px)
        }
        .mode-btn:active {
            transform: translateY(0) scale(.98)
        }
        .mode-btn .mode-icon {
            font-size: 22px;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0c1015;
            flex-shrink: 0;
            overflow: hidden
        }
        .mode-btn .mode-icon img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 12px;
            object-fit: cover;
            background: #0c1015
        }
        .mode-btn .mode-text .t {
            font-weight: 700;
            font-size: 15px
        }
        .mode-btn .mode-text .d {
            font-size: 11.5px;
            font-weight: 300;
            color: var(--text-muted);
            margin-top: 3px;
            line-height: 1.4
        }
        .mode-icon .icon-img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 12px;
            object-fit: cover;
            background: #0c1015
        }
        .mode-btn .mode-icon {
            position: relative;
            overflow: visible
        }
        .mode-icon .mode-badge {
            position: absolute;
            bottom: -6px;
            right: -7px;
            background: linear-gradient(135deg, var(--red-color), var(--blue-color));
            color: #fff;
            font-size: 9.5px;
            font-weight: 800;
            padding: 2px 5px;
            border-radius: 8px;
            border: 2px solid var(--card-bg);
            line-height: 1.3;
            letter-spacing: .2px;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgb(0 0 0/.45)
        }
        html[dir="rtl"] .mode-icon .mode-badge {
            right: auto;
            left: -7px
        }
        /* Home screen: Online / Offline avatar-style icons — same base
           "person" glyph used for the room name & avatar hint, kept
           consistent between the two cards but distinguished by a small
           signal badge on the Online icon. */
        .mode-icon.icon-offline,
        .mode-icon.icon-online {
            color: #fff
        }
        .mode-icon.icon-offline svg,
        .mode-icon.icon-online > svg {
            width: 56%;
            height: 56%
        }
        .mode-icon.icon-offline {
            background: linear-gradient(135deg, #ff9d5c, #ee5a6f 70%);
            box-shadow: inset 0 1px 1px rgb(255 255 255/.25)
        }
        /* Offline mode-pick screen: Classic (checkered race flag) and Hunter
           & Survivor (crosshair reticle stalking a fleeing runner) icons,
           drawn as minimal inline glyphs instead of loading
           4p.webp/huntersurvivor.webp. */
        .mode-icon.icon-classic svg {
            width: 60%;
            height: 60%
        }
        .mode-icon.icon-hunter svg {
            width: 105%;
            height: 105%
        }
        .mode-icon.icon-classic {
            background: linear-gradient(135deg, #ffd76b, #f2994a 75%);
            box-shadow: inset 0 1px 1px rgb(255 255 255/.25)
        }
        .mode-icon.icon-hunter {
            background:
                radial-gradient(120% 120% at 22% 18%, rgba(110,255,220,.45) 0%, transparent 42%),
                linear-gradient(155deg, #00c9a7 0%, #1f6f8b 48%, #0b2545 100%);
            box-shadow: inset 0 1px 1px rgb(255 255 255/.25)
        }
        .mode-btn:hover .mode-icon.icon-classic,
        .mode-btn:hover .mode-icon.icon-hunter {
            box-shadow: inset 0 1px 1px rgb(255 255 255/.35)
        }
        .online-mode-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 14px
        }
        .online-mode-chip {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 6px 12px;
            background: var(--card-bg-2, #12161d);
            border: none;
            box-shadow: inset 0 0 0 1.5px var(--border-color);
            border-radius: 14px;
            cursor: pointer;
            font-family: inherit;
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            transition: background .2s ease, box-shadow .2s ease, transform .15s ease
        }
        .online-mode-chip:active {
            transform: scale(.96)
        }
        .online-mode-chip .omc-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgb(37 99 235/.12);
            color: #6ea8ff;
            transition: background .2s ease, color .2s ease
        }
        .online-mode-chip .omc-icon svg {
            width: 20px;
            height: 20px
        }
        .online-mode-chip .t {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-muted);
            text-align: center;
            line-height: 1.25;
            transition: color .2s ease
        }
        .online-mode-chip.active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: none
        }
        .online-mode-chip.active .omc-icon {
            background: transparent;
            color: #fff
        }
        .online-mode-chip.active .t {
            color: #fff
        }
        .mode-icon.icon-online {
            background: linear-gradient(135deg, #4facfe, #3a7bd5 70%);
            box-shadow: inset 0 1px 1px rgb(255 255 255/.25)
        }
        .mode-btn:hover .mode-icon.icon-offline,
        .mode-btn:hover .mode-icon.icon-online {
            box-shadow: inset 0 1px 1px rgb(255 255 255/.35)
        }
        /* ===== ONLINE SCREENS ===== */
        .forfeit-badge {
            display: inline-block;
            margin-inline-start: 6px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 20px;
            background: rgba(231, 76, 60, .18);
            color: #E74C3C;
            vertical-align: middle;
        }
        .player-card.forfeited {
            opacity: .5;
        }
        .online-card {
            position: relative;
            overflow: hidden
        }
        .online-card::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at 30% 20%, rgba(74,168,255,.2), transparent 58%),
                        radial-gradient(circle at 80% 80%, rgba(155,110,255,.16), transparent 55%),
                        radial-gradient(circle at 50% 100%, rgba(46,204,113,.1), transparent 50%);
            pointer-events: none;
            z-index: 0;
            animation: auroraDrift 12s ease-in-out infinite alternate
        }
        @keyframes auroraDrift {
            0% { transform: translate(0, 0) rotate(0deg) }
            100% { transform: translate(3%, -4%) rotate(6deg) }
        }
        .online-card > * {
            position: relative;
            z-index: 1
        }
        .online-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin-bottom: 26px
        }
        .online-hero-icon {
            position: relative;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1c2530, #12161d);
            border: 1px solid rgba(74,168,255,.3);
            box-shadow: 0 6px 22px rgb(0 0 0 / .4), 0 0 26px rgba(74,168,255,.18)
        }
        .online-hero-icon::before,
        .online-hero-icon::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 1.5px solid rgba(74,168,255,.35);
            animation: orpPulse 2.6s cubic-bezier(.3,.6,.4,1) infinite
        }
        .online-hero-icon::after {
            animation-delay: 1.3s
        }
        .online-hero-icon svg {
            position: relative;
            z-index: 1;
            width: 27px;
            height: 27px;
            color: #6fd0ff;
            animation: heroIconSpin 6s linear infinite
        }
        @keyframes heroIconSpin {
            0%, 85%, 100% { transform: rotate(0deg) }
            92% { transform: rotate(8deg) }
        }
        .online-hero h1 {
            margin: 0;
            background: linear-gradient(135deg, #fff, #a9d4ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }
        /* ===== ONLINE CHOICE (Create / Join) — redesigned ===== */
        .online-choice-grid {
            display: flex;
            flex-direction: column;
            gap: 12px
        }
        .online-action-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            background: #12161d;
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 16px 16px;
            cursor: pointer;
            overflow: hidden;
            font-family: inherit;
            text-align: start;
            transition: transform .22s cubic-bezier(.4,0,.2,1), border-color .22s ease, background .22s ease, box-shadow .22s ease
        }
        .online-action-card::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity .25s ease;
            z-index: 0
        }
        .online-action-create::before {
            background: linear-gradient(120deg, rgba(74,168,255,.14), transparent 65%)
        }
        .online-action-join::before {
            background: linear-gradient(120deg, rgba(155,110,255,.14), transparent 65%)
        }
        .online-action-card::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -60%;
            width: 40%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent);
            transform: skewX(-18deg);
            transition: left .55s ease;
            z-index: 0;
            pointer-events: none
        }
        .online-action-card:hover {
            transform: translateY(-2px);
            border-color: #3a4652;
            box-shadow: 0 10px 28px rgb(0 0 0 / .35)
        }
        .online-action-card:hover::before {
            opacity: 1
        }
        .online-action-card:hover::after {
            left: 130%
        }
        .online-action-card:active {
            transform: translateY(0) scale(.98)
        }
        .online-action-card:hover .oac-icon {
            transform: scale(1.08) rotate(-4deg)
        }
        .oac-icon {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
        }
        .online-action-create .oac-icon {
            background: linear-gradient(135deg, rgba(74,168,255,.22), rgba(74,168,255,.06));
            color: #6fbaff;
            box-shadow: 0 0 0 1px rgba(74,168,255,.18) inset
        }
        .online-action-join .oac-icon {
            background: linear-gradient(135deg, rgba(155,110,255,.22), rgba(155,110,255,.06));
            color: #b79cff;
            box-shadow: 0 0 0 1px rgba(155,110,255,.18) inset
        }
        .oac-icon svg {
            width: 24px;
            height: 24px
        }
        .oac-text {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
            flex: 1
        }
        .oac-title {
            font-size: 15.5px;
            font-weight: 700;
            color: var(--text-main)
        }
        .oac-desc {
            font-size: 11.5px;
            color: var(--text-muted);
            line-height: 1.5
        }
        .oac-arrow {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.04);
            color: var(--text-muted);
            transition: transform .22s ease, background .22s ease, color .22s ease
        }
        .oac-arrow svg {
            width: 14px;
            height: 14px
        }
        .online-action-card:hover .oac-arrow {
            background: rgba(255,255,255,.08);
            color: var(--text-main);
            transform: translateX(-3px)
        }
        html[dir="rtl"] .online-action-card:hover .oac-arrow {
            transform: translateX(3px)
        }
        .online-back-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            padding: 10px;
            cursor: pointer;
            margin-top: 14px;
            transition: color .2s ease
        }
        .online-back-link:hover {
            color: var(--text-main)
        }
        .online-back-link svg {
            width: 15px;
            height: 15px
        }
        /* ===== ONLINE ROOM PANEL (create / join) — redesigned ===== */
        .online-wait-view {
            display: flex;
            flex-direction: column;
            align-items: center
        }
        .online-room-panel {
            animation: startPop .32s ease
        }
        .orp-icon-wrap {
            position: relative;
            width: 76px;
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            flex-shrink: 0
        }
        .orp-icon {
            position: relative;
            z-index: 2;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1c2530, #12161d);
            border: 1px solid rgba(74,168,255,.35);
            color: #6fbaff;
            box-shadow: 0 0 22px rgba(74,168,255,.25)
        }
        .orp-icon svg {
            width: 24px;
            height: 24px
        }
        .orp-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1.5px solid rgba(74,168,255,.4);
            animation: orpPulse 2.2s cubic-bezier(.3,.6,.4,1) infinite
        }
        .orp-ring-2 {
            animation-delay: 1.1s
        }
        @keyframes orpPulse {
            0% { transform: scale(.68); opacity: .75 }
            80%, 100% { transform: scale(1.28); opacity: 0 }
        }
        .online-room-panel.is-joining .orp-icon {
            border-color: rgba(155,110,255,.4);
            color: #b79cff;
            box-shadow: 0 0 22px rgba(155,110,255,.22)
        }
        .online-room-panel.is-joining .orp-ring {
            border-color: rgba(155,110,255,.4)
        }
        .online-code-wrap {
            width: 100%;
            margin-bottom: 6px
        }
        .online-code-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #0c1015;
            border: 1px solid rgba(74,168,255,.3);
            border-radius: 16px;
            padding: 8px 8px 8px 18px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 28px rgba(74,168,255,.1);
            animation: codeCardGlow 2.4s ease-in-out infinite
        }
        @keyframes codeCardGlow {
            0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 20px rgba(74,168,255,.1) }
            50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 32px rgba(74,168,255,.28) }
        }
        html[dir="rtl"] .online-code-card {
            padding: 8px 18px 8px 8px
        }
        .online-code-box {
            flex: 1;
            font-size: 26px;
            letter-spacing: 6px;
            font-weight: 800;
            color: #fff;
            text-align: center;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .online-code-copy-btn {
            position: relative;
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: #171d26;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .2s ease
        }
        .online-code-copy-btn:hover {
            border-color: #4a5a6b;
            color: var(--text-main);
            background: #1d2530
        }
        .online-code-copy-btn:active {
            transform: scale(.92)
        }
        .online-code-copy-btn svg {
            position: absolute;
            width: 18px;
            height: 18px;
            transition: opacity .2s ease, transform .2s ease
        }
        .online-code-copy-btn .oc-check-icon {
            opacity: 0;
            transform: scale(.5);
            color: #2ecc71
        }
        .online-code-copy-btn.copied {
            border-color: rgba(46,204,113,.55);
            background: rgba(46,204,113,.08)
        }
        .online-code-copy-btn.copied .oc-copy-icon {
            opacity: 0;
            transform: scale(.5)
        }
        .online-code-copy-btn.copied .oc-check-icon {
            opacity: 1;
            transform: scale(1)
        }
        .online-code-hint {
            text-align: center;
            font-size: 11px;
            color: var(--text-muted);
            margin: 10px 0 16px
        }
        .online-input-wrap {
            position: relative;
            width: 100%
        }
        .oi-icon {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            width: 17px;
            height: 17px;
            color: var(--text-muted);
            pointer-events: none
        }
        html[dir="rtl"] .oi-icon {
            right: auto;
            left: 15px
        }
        .online-input-wrap .online-code-input {
            padding-right: 42px
        }
        html[dir="rtl"] .online-input-wrap .online-code-input {
            padding-right: 14px;
            padding-left: 42px
        }
        .online-primary-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: linear-gradient(115deg, #2d7bff, #7a5cff, #2d7bff);
            background-size: 220% 100%;
            border: none;
            border-radius: 14px;
            padding: 14px;
            color: #fff;
            font-family: inherit;
            font-size: 14.5px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 8px 22px rgba(45,123,255,.3);
            transition: transform .2s ease, box-shadow .2s ease, background-position .6s ease;
            margin-bottom: 10px
        }
        .online-primary-btn:hover {
            background-position: 100% 0
        }
        .online-primary-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 26px rgba(45,123,255,.4)
        }
        .online-primary-btn:active {
            transform: translateY(0) scale(.98)
        }
        .online-primary-btn svg {
            width: 16px;
            height: 16px
        }
        .online-cancel-btn {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 600;
            padding: 8px;
            cursor: pointer;
            transition: color .2s ease
        }
        .online-cancel-btn:hover {
            color: var(--text-main)
        }
        .online-status-text {
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 500;
            line-height: 1.6;
            margin: 0 0 14px;
            min-height: 18px
        }
        .online-code-input {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: #0c1015;
            color: var(--text-main);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 3px;
            text-align: center;
            margin-bottom: 12px;
            text-transform: uppercase;
            transition: border-color .2s ease, box-shadow .2s ease
        }
        .online-code-input:focus {
            outline: none;
            border-color: #4aa8ff;
            box-shadow: 0 0 0 3px rgba(74,168,255,.15)
        }
        /* ===== OTP-style room-code entry (join screen) ===== */
        .otp-wrap {
            display: flex;
            justify-content: center;
            gap: 9px;
            margin-bottom: 14px
        }
        .otp-box {
            width: 46px;
            height: 56px;
            border-radius: 14px;
            border: 1.5px solid var(--border-color);
            background: #0c1015;
            color: #fff;
            font-family: inherit;
            font-size: 22px;
            font-weight: 800;
            text-align: center;
            text-transform: uppercase;
            caret-color: #4aa8ff;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease
        }
        .otp-box:focus {
            outline: none;
            border-color: #4aa8ff;
            background: #10161d;
            box-shadow: 0 0 0 3px rgba(74,168,255,.18), 0 0 18px rgba(74,168,255,.15);
            transform: translateY(-2px)
        }
        .otp-box.filled {
            border-color: rgba(155,110,255,.55);
            box-shadow: 0 0 14px rgba(155,110,255,.18)
        }
        .otp-box.otp-error {
            border-color: var(--red-color) !important;
            animation: otpShake .32s ease
        }
        @keyframes otpShake {
            0%, 100% { transform: translateX(0) }
            25% { transform: translateX(-6px) }
            75% { transform: translateX(6px) }
        }
        @media (max-width:360px) {
            .otp-box {
                width: 38px;
                height: 48px;
                font-size: 18px;
                border-radius: 12px
            }
            .otp-wrap {
                gap: 6px
            }
        }
        .online-spinner-sm {
            width: 16px;
            height: 16px;
            border-width: 2px;
            margin: 0
        }
        .online-join-status-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 4px
        }
        .player-count-toggle {
            position: relative;
            display: flex;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 5px;
            margin-bottom: 20px;
            gap: 4px;
            overflow: hidden;
            direction: ltr
        }
        .pc-toggle-slider {
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 5px;
            width: calc(50% - 7px);
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            border-radius: 11px;
            box-shadow: none;
            transition: transform .32s cubic-bezier(.65, 0, .35, 1);
            z-index: 1
        }
        .player-count-toggle[data-active="4"] .pc-toggle-slider {
            transform: translateX(calc(100% + 4px))
        }
        .pc-toggle-btn {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            background: transparent;
            border: none;
            border-radius: 11px;
            padding: 11px 8px;
            color: var(--text-muted);
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: color .3s ease
        }
        .pc-toggle-btn .pc-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }
        .pc-toggle-btn .pc-icon svg {
            width: 18px;
            height: 18px;
            display: block;
            transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
        }
        .pc-toggle-btn.active {
            color: #fff
        }
        .pc-toggle-btn.active .pc-icon svg {
            transform: scale(1.08)
        }
        .pc-toggle-btn:active .pc-icon svg {
            transform: scale(.9)
        }
        .game-type-toggle[data-active="online"] .pc-toggle-slider {
            transform: translateX(calc(100% + 4px))
        }
        .pc-toggle-btn.locked {
            opacity: .35;
            cursor: not-allowed;
            pointer-events: none
        }
        .game-type-lock-hint {
            font-size: 11.5px;
            color: #f5a623;
            background: rgb(245 166 35/.08);
            border: 1px solid rgb(245 166 35/.25);
            border-radius: 10px;
            padding: 8px 10px;
            margin: -10px 0 18px;
            text-align: center;
            line-height: 1.5;
            animation: fieldPopIn .3s cubic-bezier(.34, 1.56, .64, 1) both
        }
        .timer-select-wrap {
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 14px 14px 12px;
            margin-bottom: 20px
        }
        .timer-select-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-muted);
            margin-bottom: 10px;
            letter-spacing: .2px
        }
        .timer-select-label svg {
            flex-shrink: 0;
            color: #60a5fa
        }
        .timer-chip-group {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }
        .timer-chip {
            flex: 1 1 auto;
            min-width: 54px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            background: #151a22;
            border: none;
            box-shadow: inset 0 0 0 1.5px var(--border-color);
            border-radius: 12px;
            padding: 8px 6px;
            cursor: pointer;
            color: var(--text-muted);
            font-family: inherit;
            transition: background .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), color .22s ease
        }
        .timer-chip .tc-num {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main);
            transition: color .22s ease
        }
        .timer-chip .tc-unit {
            font-size: 9.5px;
            color: var(--text-muted);
            transition: color .22s ease
        }
        .timer-chip:hover {
            transform: translateY(-1px);
            box-shadow: inset 0 0 0 1.5px #3a4451
        }
        .timer-chip:active {
            transform: scale(.94)
        }
        .timer-chip.active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: none
        }
        .timer-chip.active .tc-num,
        .timer-chip.active .tc-unit {
            color: #fff
        }
        .timer-chip.no-timer-chip {
            flex-basis: 100%
        }
        .timer-chip.no-timer-chip .tc-num {
            font-size: 12px
        }
        .timer-chip.locked {
            opacity: .3;
            cursor: not-allowed;
            pointer-events: none
        }
        /* ===== Player timer: mirrors the .timer-chip badge already used in the timer picker, for full visual consistency ===== */
        .player-timer {
            display: none;
            margin-top: 6px;
            width: 100%
        }
        .player-timer.visible {
            display: flex;
            animation: ptPopIn .4s cubic-bezier(.34, 1.56, .64, 1) both
        }
        @keyframes ptPopIn {
            from { opacity: 0; transform: translateY(-3px) }
            to { opacity: 1; transform: translateY(0) }
        }
        .pt-icon {
            display: none
        }
        .pt-fill {
            display: none
        }
        .pt-track {
            flex: 1;
            min-width: 54px;
            max-width: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #151a22;
            border: none;
            box-shadow: inset 0 0 0 1.5px var(--border-color);
            border-radius: 12px;
            padding: 5px 8px;
            transition: background .25s ease, box-shadow .25s ease
        }
        .pt-time {
            display: block;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 800;
            color: var(--text-main);
            font-variant-numeric: tabular-nums;
            transition: color .22s ease
        }
        .player-timer:not(.ticking) .pt-track {
            opacity: .75
        }
        .player-timer.ticking .pt-track {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: none
        }
        .player-timer.ticking .pt-time {
            color: #fff
        }
        .player-timer.warning .pt-track {
            background: linear-gradient(135deg, #c9760f, #b45f0a);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: none
        }
        .player-timer.warning .pt-time {
            color: #fff
        }
        .player-timer.critical .pt-track {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: none;
            animation: ptCriticalPulse .7s ease-in-out infinite
        }
        .player-timer.critical .pt-time {
            color: #fff
        }
        @keyframes ptCriticalPulse {
            0%, 100% { transform: scale(1) }
            50% { transform: scale(1.05) }
        }
        @media (max-width:480px) {
            .pt-track {
                min-width: 44px;
                max-width: 74px;
                padding: 4px 6px;
                border-radius: 10px
            }
            .pt-time {
                font-size: 10.5px
            }
        }
        @media (max-width:360px) {
            .pt-track {
                min-width: 36px;
                max-width: 60px;
                padding: 3px 5px
            }
            .pt-time {
                font-size: 9.5px
            }
        }
        .team-group {
            position: relative;
            overflow: hidden;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px 12px 2px;
            margin-bottom: 14px
        }
        .team-group-header {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 10px;
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .3px;
            color: var(--text-muted);
            text-transform: uppercase
        }
        .team-group-dots {
            display: flex;
            align-items: center
        }
        .team-group-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            display: inline-block;
            border: 2px solid var(--card-bg);
            transition: background .25s ease, box-shadow .25s ease
        }
        .team-group-dot + .team-group-dot {
            margin-inline-start: -4px
        }
        .team-vs-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: -4px 0 14px;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 800
        }
        .team-vs-divider::before,
        .team-vs-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color)
        }
        .team-group .player-setup-card {
            background: rgb(21 26 34/.6)
        }
        .topbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px 20px
        }
        .topbar.mode-2p {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            flex-wrap: nowrap;
            gap: 8px
        }
        .topbar.mode-2p .player-card {
            min-width: 0;
            max-width: 248px
        }
        .topbar.mode-2p .player-card:first-child {
            justify-self: start
        }
        .topbar.mode-2p .player-card:last-child {
            justify-self: end;
            flex-direction: row-reverse
        }
        .topbar.mode-4p .player-card {
            flex: 1;
            min-width: 0
        }
        .topbar.mode-4p .player-card.team-b-align {
            flex-direction: row-reverse
        }
        .topbar.mode-2p .player-info {
            min-width: 0
        }
        .topbar.mode-2p .player-info .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 148px
        }
        .player-card {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            padding: 10px 14px;
            border-radius: 14px;
            transition: all 0.3s ease;
            opacity: .5;
            min-width: 150px
        }
        .player-card.active {
            opacity: 1;
            background: #1d2530;
            border-color: var(--border-color)
        }
        .player-card.finished {
            opacity: .85
        }
        .player-card.card-disconnected {
            opacity: 1
        }
        .player-card.finished .name::after {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-inline-start: 4px;
            vertical-align: middle;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat
        }
        /* ===== Per-player disconnect overlay =====
           Replaces a separate floating banner/toast: when a specific
           player's connection drops, this covers just their own card
           (avatar + name + info) in place, with a live reconnect
           countdown. Nothing else on the card layout changes size, and
           the shared turn timer (.player-timer) is untouched — it simply
           stays frozen wherever it already was, exactly as before. */
        .disconnect-overlay {
            position: absolute;
            inset: 0;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 9px;
            padding: 8px 12px;
            background: linear-gradient(135deg, rgb(28 15 15 / .93), rgb(38 20 14 / .93));
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            border: 1px solid rgb(245 165 36 / .35);
            box-shadow: 0 0 0 1px rgb(0 0 0 / .2) inset, 0 8px 20px rgb(0 0 0 / .35);
            opacity: 0;
            transform: scale(.94);
            pointer-events: none;
            z-index: 5;
            transition: opacity 0.3s cubic-bezier(.34, 1.35, .64, 1), transform 0.3s cubic-bezier(.34, 1.35, .64, 1)
        }
        .disconnect-overlay.show {
            opacity: 1;
            transform: scale(1);
            animation: discOverlayGlow 1.6s ease-in-out infinite
        }
        @keyframes discOverlayGlow {
            0%, 100% {
                box-shadow: 0 0 0 1px rgb(0 0 0 / .2) inset, 0 0 0 0 rgb(245 165 36 / .35)
            }
            50% {
                box-shadow: 0 0 0 1px rgb(0 0 0 / .2) inset, 0 0 0 6px rgb(245 165 36 / 0)
            }
        }
        .do-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f5a524;
            animation: doIconPulse 1.6s ease-in-out infinite
        }
        .do-icon svg {
            display: block
        }
        @keyframes doIconPulse {
            0%, 100% {
                opacity: 1
            }
            50% {
                opacity: .45
            }
        }
        .do-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1
        }
        .do-name {
            font-size: 13.5px;
            font-weight: 800;
            color: #fff;
            letter-spacing: .1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%
        }
        .do-status {
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap
        }
        .do-label {
            font-size: 10.5px;
            font-weight: 700;
            color: #f5c05c;
            letter-spacing: .2px;
            overflow: hidden;
            text-overflow: ellipsis
        }
        .do-timer {
            font-size: 11px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: #fff;
            letter-spacing: .3px;
            opacity: .85
        }
        .do-timer::before {
            content: '·';
            margin-inline-end: 5px;
            color: #f5c05c;
            opacity: .7
        }
        .avatar {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 0 12px rgb(255 255 255 / .1)
        }
        .player-info .name {
            font-size: 15px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%
        }
        .player-card,
        .player-info {
            min-width: 0
        }
        .player-info .team-label {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 1px;
            letter-spacing: .5px
        }
        .player-info .score {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: 5px
        }
        .score-bar {
            width: 100%;
            max-width: 100px;
            height: 4px;
            background: #252e39;
            border-radius: 4px;
            margin-top: 4px;
            overflow: hidden
        }
        .score-bar .fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease
        }
        .fill.red {
            background: var(--red-color)
        }
        .fill.blue {
            background: var(--blue-color)
        }
        .fill.green {
            background: var(--green-color)
        }
        .fill.yellow {
            background: var(--yellow-color)
        }
        .bet-box {
            flex-shrink: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(150deg, #1d2530, #151a22);
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 8px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .02) inset;
            z-index: 2
        }
        .bet-box .vs-x {
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .5px;
            color: #cbd5e1
        }
        .main-area {
            display: flex;
            flex-wrap: wrap;
            gap: 16px
        }
        .board-wrapper {
            position: relative;
            flex: 1;
            min-width: 350px;
            background: var(--board-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 20px rgb(0 0 0 / .5)
        }
        .board-wrapper::before,
        .board-wrapper::after {
            content: '';
            position: absolute;
            top: 10%;
            bottom: 10%;
            width: 4px;
            background: #282f3a;
            border-radius: 4px
        }
        .board-wrapper::before {
            left: 15px
        }
        .board-wrapper::after {
            right: 15px
        }
        #online-turn-row .otb-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-inline-end: 6px;
            vertical-align: middle
        }
        #online-turn-row.otb-mine span:last-child {
            color: #2ECC71
        }
        #online-turn-row.otb-mine .otb-dot {
            background: #2ECC71;
            animation: otbPulseGreen 1.4s ease-out infinite
        }
        #online-turn-row.otb-theirs span:last-child {
            color: var(--text-muted)
        }
        #online-turn-row.otb-theirs .otb-dot {
            background: #808993;
            animation: otbPulseGray 1.4s ease-in-out infinite
        }
        @keyframes otbPulseGreen {
            0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55) }
            70% { box-shadow: 0 0 0 6px rgba(46,204,113,0) }
            100% { box-shadow: 0 0 0 0 rgba(46,204,113,0) }
        }
        @keyframes otbPulseGray {
            0%, 100% { opacity: .5 }
            50% { opacity: 1 }
        }
        .board-sound-btn {
            position: absolute;
            top: -18px;
            right: 14px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgb(12 16 21 / .9);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-main);
            cursor: grab;
            z-index: 30;
            padding: 0;
            box-shadow: 0 4px 14px rgb(0 0 0 / .45);
            transition: all 0.2s ease;
            touch-action: none
        }
        .board-sound-btn.dragging {
            cursor: grabbing;
            transition: none !important
        }
        .board-sound-btn:hover {
            background: #20272f;
            border-color: #4a5a6b
        }
        .board-sound-btn:active {
            transform: scale(.92)
        }
        .board-sound-btn svg {
            width: 17px;
            height: 17px
        }
        .board-sound-btn.btn-holding {
            animation: soundBtnHoldPulse 0.9s ease-in-out infinite;
            border-color: #5a3a3a
        }
        @keyframes soundBtnHoldPulse {
            0%, 100% { box-shadow: 0 4px 14px rgb(0 0 0 / .45), 0 0 0 0 rgba(255,59,48,.55) }
            50% { box-shadow: 0 4px 14px rgb(0 0 0 / .45), 0 0 0 9px rgba(255,59,48,0) }
        }
        .board-sound-btn.btn-hidden-anim {
            animation: soundBtnHideOut .38s cubic-bezier(.55,0,.85,.35) forwards
        }
        @keyframes soundBtnHideOut {
            0% { opacity: 1; transform: scale(1) rotate(0) }
            40% { opacity: 1; transform: scale(1.12) rotate(6deg) }
            100% { opacity: 0; transform: scale(.25) rotate(-70deg) }
        }
        .board-sound-btn.btn-reappear-anim {
            animation: soundBtnReappearIn .62s cubic-bezier(.34,1.56,.64,1)
        }
        @keyframes soundBtnReappearIn {
            0% { opacity: 0; transform: scale(.2) rotate(50deg) }
            55% { opacity: 1; transform: scale(1.18) rotate(-8deg) }
            80% { transform: scale(.94) rotate(3deg) }
            100% { opacity: 1; transform: scale(1) rotate(0) }
        }
        .sound-reappear-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid var(--blue-color);
            pointer-events: none;
            z-index: 29;
            opacity: 0;
        }
        .sound-reappear-ring.ping {
            animation: soundRingPing .7s ease-out
        }
        @keyframes soundRingPing {
            0% { opacity: .8; transform: scale(.5) }
            100% { opacity: 0; transform: scale(2.2) }
        }
        .sound-close-badge {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--red-color);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(255,59,48,.55), 0 0 0 2px #0c1015;
            z-index: 32;
            cursor: pointer;
            opacity: 0;
            transform: scale(0) rotate(-90deg);
            transition: opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
            pointer-events: none;
            touch-action: none
        }
        .sound-close-badge.visible {
            opacity: 1;
            transform: scale(1) rotate(0);
            pointer-events: auto
        }
        .sound-close-badge:active {
            transform: scale(.85) rotate(0)
        }
        .sound-close-badge svg {
            width: 11px;
            height: 11px
        }
        .sound-ghost-dot {
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgb(12 16 21 / .78);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 30;
            cursor: pointer;
            opacity: 0;
            transform: scale(0);
            pointer-events: none;
            box-shadow: 0 2px 10px rgb(0 0 0 / .4);
            transition: opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
            touch-action: none
        }
        .sound-ghost-dot.visible {
            opacity: .68;
            transform: scale(1);
            pointer-events: auto;
            animation: ghostDotBreathe 2.2s ease-in-out infinite
        }
        .sound-ghost-dot:hover,
        .sound-ghost-dot:active {
            opacity: 1;
            border-color: #4a5a6b
        }
        .sound-ghost-dot:active {
            transform: scale(.85)
        }
        .sound-ghost-dot svg {
            width: 9px;
            height: 9px
        }
        @keyframes ghostDotBreathe {
            0%, 100% { opacity: .55; box-shadow: 0 2px 10px rgb(0 0 0 / .4), 0 0 0 0 rgba(230,237,243,.15) }
            50% { opacity: .9; box-shadow: 0 2px 10px rgb(0 0 0 / .4), 0 0 0 5px rgba(230,237,243,0) }
        }
        canvas {
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            border-radius: 12px;
            touch-action: none;
            background: var(--board-bg);
            max-width: 550px;
            box-shadow: inset 0 0 30px rgb(0 0 0 / .5)
        }
        .wall-confirm-popup {
            position: absolute;
            display: flex;
            gap: 6px;
            visibility: hidden;
            transform: translate(-50%, -140%) scale(.85);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 20;
            white-space: nowrap
        }
        .wall-confirm-popup.visible {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -140%) scale(1)
        }
        .wall-confirm-btn,
        .wall-cancel-btn {
            border: none;
            border-radius: 20px;
            padding: 9px 16px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 4px 14px rgb(0 0 0 / .45);
            transition: all 0.2s ease;
            font-family: inherit
        }
        .wall-confirm-btn {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: #fff;
            animation: confirmPulse 1.6s infinite ease-in-out
        }
        .wall-confirm-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 20px rgb(46 204 113 / .55)
        }
        .wall-confirm-btn:active {
            transform: scale(.96)
        }
        @keyframes confirmPulse {
            0%,
            100% {
                box-shadow: 0 4px 14px rgb(46 204 113 / .3)
            }
            50% {
                box-shadow: 0 4px 20px rgb(46 204 113 / .65)
            }
        }
        .wall-cancel-btn {
            background: #252e39;
            color: #c0c9d6;
            padding: 9px 12px
        }
        .wall-cancel-btn:hover {
            background: #3a4552;
            color: #fff
        }
        .wall-cancel-btn:active {
            transform: scale(.94)
        }
        .controls {
            width: 100%;
            display: flex;
            gap: 12px;
            margin-top: 0;
            flex-wrap: wrap
        }
        .control-btn {
            flex: 1;
            min-width: 80px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            font-size: 14px
        }
        .control-btn:hover {
            background: #1d2530;
            border-color: #2d3642
        }
        .control-btn:active {
            transform: scale(.95);
            background: #1d2530;
            border-color: #4a5a6b
        }
        .control-btn.active {
            background: #1d2530;
            border-color: #4a5a6b;
            color: #fff
        }
        .control-btn:disabled {
            opacity: .4;
            cursor: not-allowed
        }
        .control-btn:disabled:hover {
            background: var(--card-bg);
            border-color: var(--border-color)
        }
        .control-btn .icon-box {
            font-size: 18px;
            background: #0c1015;
            padding: 4px 20px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .icon-svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            display: inline-block;
            vertical-align: middle
        }
        .icon-svg.sm {
            width: 14px;
            height: 14px
        }
        .icon-svg.lg {
            width: 26px;
            height: 26px
        }
        .control-btn.danger {
            background: #8b2020;
            border-color: #8b2020;
            color: #fff
        }
        .control-btn.danger:hover {
            background: #a82525
        }
        .control-btn.danger .icon-box {
            background: #6b1717
        }
        .control-btn.neutral {
            color: #c0c9d6
        }
        .control-btn.neutral .icon-box {
            color: #c0c9d6
        }
        .sidebar {
            width: 100%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 12px
        }
        .side-box {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 16px
        }
        .side-box h3 {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 10px 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px
        }
        .history-list {
            max-height: 200px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-right: 4px
        }
        .history-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: monospace;
            font-size: 12px;
            padding: 3px 4px;
            border-radius: 4px;
            transition: all 0.2s
        }
        .history-item:hover {
            background: #1d2530
        }
        .history-item .num {
            color: #4a5568;
            width: 20px;
            text-align: right
        }
        .history-item .action-text {
            color: #fff
        }
        .symbol-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16px;
            height: 16px
        }
        .symbol-line {
            width: 12px;
            height: 2px;
            border-radius: 2px;
            background: #fff
        }
        .symbol-line.vertical {
            width: 2px;
            height: 12px
        }
        .symbol-line.red {
            background: var(--red-color)
        }
        .symbol-line.blue {
            background: var(--blue-color)
        }
        .symbol-line.green {
            background: var(--green-color)
        }
        .symbol-line.yellow {
            background: var(--yellow-color)
        }
        .symbol-circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff
        }
        .symbol-circle.red {
            background: var(--red-color)
        }
        .symbol-circle.blue {
            background: var(--blue-color)
        }
        .symbol-circle.green {
            background: var(--green-color)
        }
        .symbol-circle.yellow {
            background: var(--yellow-color)
        }
        .history-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
            color: var(--text-muted);
            font-size: 12px;
            border-top: 1px solid var(--border-color);
            padding-top: 6px
        }
        .history-pagination span {
            cursor: pointer
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 12px
        }
        .info-row .label {
            color: var(--text-muted)
        }
        .text-red {
            color: var(--red-color)
        }
        .text-blue {
            color: var(--blue-color)
        }
        .text-green {
            color: var(--green-color)
        }
        .text-yellow {
            color: var(--yellow-color)
        }
        .bottom-info {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 16px 20px
        }
        .info-block h4 {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            margin: 0 0 8px 0;
            letter-spacing: 1px
        }
        .info-block p {
            font-size: 12px;
            line-height: 1.5;
            color: #c0c9d6;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px
        }
        @media (max-width:1000px) {
            .board-wrapper {
                width: 100%;
                flex: none;
                order: 1
            }
            .controls {
                width: 100%;
                order: 2;
                flex-wrap: wrap;
                margin-top: 0
            }
            .sidebar {
                width: 100%;
                order: 3
            }
            .bottom-info {
                order: 4;
                grid-template-columns: 1fr
            }
            .control-btn {
                min-width: 80px;
                flex: 1
            }
        }
        @media (max-width:480px) {
            .player-card {
                min-width: 44%
            }
            .topbar {
                padding: 10px 12px;
                gap: 6px
            }
            .topbar.mode-2p {
                gap: 4px
            }
            .topbar.mode-2p .player-card {
                gap: 7px;
                padding: 5px 4px;
                max-width: 154px
            }
            .topbar.mode-2p .avatar {
                width: 25px;
                height: 25px
            }
            .topbar.mode-2p .player-info .name {
                font-size: 12.5px;
                max-width: 84px
            }
            .topbar.mode-2p .player-info .team-label {
                font-size: 9px
            }
            .topbar.mode-2p .player-info .score {
                font-size: 10.5px
            }
            .score-bar {
                max-width: 70px
            }
            .bet-box {
                width: 30px;
                height: 30px;
                min-width: 30px
            }
            .bet-box .vs-x {
                font-size: 10.5px
            }
        }
        @media (max-width:360px) {
            .topbar.mode-2p .player-card {
                gap: 5px;
                max-width: 136px
            }
            .topbar.mode-2p .avatar {
                width: 21px;
                height: 21px
            }
            .topbar.mode-2p .player-info .name {
                font-size: 11.5px;
                max-width: 62px
            }
            .score-bar {
                max-width: 50px
            }
            .bet-box {
                width: 26px;
                height: 26px;
                min-width: 26px
            }
            .bet-box .vs-x {
                font-size: 9.5px
            }
        }
        #top-controls {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 500;
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            padding: 12px 14px;
            background: transparent;
            box-shadow: none;
            border: none;
            direction: ltr;
            transition: opacity .2s ease
        }
        body.modal-locked {
            overflow: hidden
        }
        body.modal-locked #top-controls,
        body.modal-locked .board-sound-btn {
            pointer-events: none;
            opacity: .45
        }
        #lang-loading-overlay {
            position: fixed;
            inset: 0;
            background: rgb(5 8 12 / .55);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 700;
            opacity: 0;
            transition: opacity .15s ease
        }
        #lang-loading-overlay.visible {
            display: flex;
            opacity: 1
        }
        .lang-loading-spinner {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 4px solid rgb(255 255 255 / .16);
            border-top-color: #3fa9f5;
            animation: langSpin .65s linear infinite
        }
        @keyframes langSpin {
            to {
                transform: rotate(360deg)
            }
        }
        .top-ctrl-btn {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 20px;
            padding: 8px 14px;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 14px rgb(0 0 0 / .35);
            font-family: inherit;
            transition: all 0.2s ease;
            text-decoration: none;
            white-space: nowrap;
            flex-shrink: 0
        }
        .top-ctrl-btn:hover {
            border-color: #4a5a6b;
            background: #20272f;
            transform: translateY(-1px)
        }
        .top-ctrl-btn:active {
            transform: translateY(0) scale(.96)
        }
        @media (max-width:420px) {
            #top-controls {
                gap: 6px;
                padding: 10px
            }
            .top-ctrl-btn {
                padding: 8px 10px;
                font-size: 11.5px;
                gap: 4px
            }
        }
        @media (max-width:340px) {
            .top-ctrl-btn span {
                display: none
            }
            .top-ctrl-btn {
                padding: 9px;
                border-radius: 50%
            }
        }
        /* ===== TOP MENU (mobile kebab) ===== */
        .top-kebab-btn {
            display: none;
            padding: 9px;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            justify-content: center;
            align-items: center
        }
        .top-kebab-btn .icon-svg {
            width: 19px;
            height: 19px;
            transition: transform .28s cubic-bezier(.4,0,.2,1)
        }
        .top-kebab-btn.active {
            border-color: #4a5a6b;
            background: #20272f
        }
        .top-kebab-btn.active .icon-svg {
            transform: rotate(90deg)
        }
        .top-menu-panel {
            display: flex;
            gap: 8px
        }
        html[dir="rtl"] #top-controls {
            justify-content: flex-start;
            direction: rtl
        }
        html[dir="rtl"] .top-menu-panel .top-ctrl-btn,
        html[dir="rtl"] .top-menu-panel a.top-ctrl-btn {
            text-align: right
        }
        @media (max-width:640px) {
            .top-kebab-btn {
                display: flex
            }
            #top-controls {
                gap: 0
            }
            .top-menu-panel {
                position: absolute;
                top: calc(100% + 10px);
                left: 14px;
                right: auto;
                flex-direction: column;
                align-items: stretch;
                gap: 5px;
                min-width: 195px;
                background: rgb(15 19 25 / .97);
                border: 1px solid var(--border-color);
                border-radius: 16px;
                padding: 8px;
                overflow: hidden;
                box-shadow: 0 16px 44px rgb(0 0 0 / .55);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                opacity: 0;
                transform: translateY(-8px) scale(.94);
                transform-origin: top left;
                pointer-events: none;
                transition: opacity .18s ease, transform .2s cubic-bezier(.4,0,.2,1);
                z-index: 501
            }
            html[dir="rtl"] .top-menu-panel {
                left: auto;
                right: 14px;
                transform-origin: top right
            }
            .top-menu-panel.open {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto
            }
            .top-menu-panel .top-ctrl-btn {
                width: 100%;
                box-shadow: none;
                border-color: transparent;
                background: transparent;
                border-radius: 11px;
                padding: 11px 12px;
                opacity: 0;
                transform: translateX(-10px);
                transition: opacity .2s ease, transform .2s ease, background .18s ease, border-color .18s ease
            }
            .top-menu-panel .top-ctrl-btn span {
                display: inline;
                font-size: 13px
            }
            html[dir="rtl"] .top-menu-panel .top-ctrl-btn {
                transform: translateX(10px)
            }
            .top-menu-panel.open .top-ctrl-btn {
                opacity: 1;
                transform: translateX(0)
            }
            html[dir="rtl"] .top-menu-panel.open .top-ctrl-btn {
                transform: translateX(0)
            }
            .top-menu-panel.open .top-ctrl-btn:nth-child(1) { transition-delay: .04s }
            .top-menu-panel.open .top-ctrl-btn:nth-child(2) { transition-delay: .09s }
            .top-menu-panel.open .top-ctrl-btn:nth-child(3) { transition-delay: .14s }
            .top-menu-panel .top-ctrl-btn:hover {
                background: #1d2530;
                border-color: #2d3642;
                transform: translateX(0)
            }
        }
        #app,
        #start-overlay {
            direction: ltr
        }
        html[dir="rtl"] #app,
        html[dir="rtl"] #start-overlay {
            text-align: left
        }
        html[dir="rtl"] .start-card,
        html[dir="rtl"] .mode-text,
        html[dir="rtl"] .side-box,
        html[dir="rtl"] .info-block,
        html[dir="rtl"] #about-modal .about-card {
            direction: rtl;
            text-align: right
        }
        html[dir="rtl"] .go-card {
            direction: rtl
        }
        html[dir="rtl"] .mode-btn {
            text-align: right
        }
        #about-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 300;
            padding: calc(var(--header-h) + 16px) 20px 20px
        }
        #about-overlay.visible {
            display: flex
        }
        .about-card {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #171d26, #12161d);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 30px 24px 24px;
            max-width: 380px;
            width: 100%;
            max-height: 88vh;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            text-align: center;
            box-shadow: 0 14px 50px rgb(0 0 0 / .65);
            animation: startPop 0.35s ease
        }
        .about-card::-webkit-scrollbar {
            display: none
        }
        .about-card::before {
            content: '';
            position: absolute;
            top: -60%;
            left: 50%;
            transform: translateX(-50%);
            width: 260px;
            height: 220px;
            background: radial-gradient(closest-side, rgb(37 99 235/.28), transparent);
            pointer-events: none
        }
        .about-close-x {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgb(255 255 255/.05);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
            transition: all 0.2s ease
        }
        html[dir="rtl"] .about-close-x {
            right: auto;
            left: 14px
        }
        .about-close-x:hover {
            color: #fff;
            border-color: #4a5a6b
        }
        .about-close-x svg {
            width: 15px;
            height: 15px
        }
        .about-hero {
            position: relative;
            z-index: 1
        }
        .about-card h2 {
            margin: 0 0 4px;
            font-size: 22px;
            font-weight: 800;
            background: linear-gradient(90deg, #f2f6fa, #9fb4d9);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: .2px
        }
        .about-tagline {
            font-size: 11.5px;
            font-weight: 700;
            color: #6f9bf0;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin: 0 0 18px
        }
        .about-card p {
            position: relative;
            z-index: 1;
            color: var(--text-muted);
            font-size: 13.5px;
            line-height: 1.8;
            margin: 0 0 18px
        }
        .about-features {
            display: flex;
            gap: 8px;
            margin-bottom: 20px
        }
        .about-feature-chip {
            flex: 1;
            min-width: 0;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px
        }
        .about-feature-icon {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            background: rgb(37 99 235/.15);
            color: #6f9bf0;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .about-feature-icon svg {
            width: 16px;
            height: 16px
        }
        .about-feature-chip span:last-child {
            font-size: 10px;
            font-weight: 600;
            color: #c0c9d6;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%
        }
        .about-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-color), transparent);
            margin: 0 0 20px
        }
        .about-card .creator-box {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 12px 14px;
            margin-bottom: 20px;
            text-align: left
        }
        html[dir="rtl"] .about-card .creator-box {
            text-align: right
        }
        .about-card .creator-avatar {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #facc15, #f59e0b);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgb(245 158 11 / .35)
        }
        .about-card .creator-avatar svg {
            width: 19px;
            height: 19px;
            color: #1b1400
        }
        .about-card .creator-box .creator-info {
            min-width: 0
        }
        .about-card .creator-box .label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 3px
        }
        .about-card .creator-box .creator-name {
            font-size: 15px;
            font-weight: 700;
            color: #facc15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .about-follow {
            margin-bottom: 0
        }
        .about-follow-label {
            display: block;
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px
        }
        .about-social-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px
        }
        .about-social-btn {
            flex: 1;
            max-width: 160px;
            height: 44px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #fff;
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 700;
            box-shadow: 0 6px 18px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .08);
            transition: transform 0.2s ease
        }
        .about-social-btn:active {
            transform: scale(.94)
        }
        .about-social-btn svg {
            width: 19px;
            height: 19px;
            flex-shrink: 0
        }
        .about-social-insta {
            background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4)
        }
        .about-social-telegram {
            background: linear-gradient(135deg, #2ab6f7, #229ed9)
        }
        .about-social-telegram svg {
            fill: currentColor
        }
        /* ===== دیالوگ تنظیمات ===== */
        #settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 301;
            padding: calc(var(--header-h) + 16px) 20px 20px
        }
        #settings-overlay.visible {
            display: flex
        }
        .settings-card {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #171d26, #12161d);
            border: 1px solid var(--border-color);
            border-radius: 22px;
            padding: 22px 20px 20px;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 14px 50px rgb(0 0 0 / .65);
            animation: startPop 0.35s ease
        }
        .settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px
        }
        .settings-header h2 {
            margin: 0;
            font-size: 19px;
            font-weight: 800
        }
        .settings-close-x {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: #0c1015;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s ease
        }
        .settings-close-x svg {
            width: 15px;
            height: 15px
        }
        .settings-close-x:hover {
            background: #20272f;
            color: var(--text-main);
            border-color: #4a5a6b
        }
        .settings-close-x:active {
            transform: scale(.92)
        }
        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 13px 14px;
            margin-bottom: 12px
        }
        .settings-row:last-child {
            margin-bottom: 0
        }
        .settings-row-info {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0
        }
        .settings-row-icon {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: linear-gradient(135deg, #1e2530, #262f3c);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #8fb4ff
        }
        .settings-row-icon svg {
            width: 18px;
            height: 18px
        }
        .settings-row-text {
            min-width: 0
        }
        .settings-row-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main)
        }
        .settings-row-desc {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.4
        }
        .ios-toggle {
            position: relative;
            width: 48px;
            height: 28px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            background: #2a323d;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            transition: background .25s ease, border-color .25s ease
        }
        .ios-toggle .ios-toggle-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff, #dbe3ec);
            box-shadow: 0 2px 6px rgb(0 0 0 / .4);
            transition: transform .25s cubic-bezier(.4, 0, .2, 1)
        }
        .ios-toggle.on {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            border-color: #2563eb
        }
        .ios-toggle.on .ios-toggle-knob {
            transform: translateX(20px)
        }
        .settings-row-stack {
            flex-direction: column;
            align-items: stretch
        }
        .settings-row-stack .settings-row-info {
            width: 100%
        }
        .settings-slider-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
            padding-left: 50px
        }
        .settings-slider {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 5px;
            border-radius: 3px;
            background: #262f3c;
            outline: none;
            cursor: pointer
        }
        .settings-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff, #dbe3ec);
            box-shadow: 0 2px 6px rgb(0 0 0 / .4);
            cursor: pointer;
            border: 1px solid var(--border-color)
        }
        .settings-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fff, #dbe3ec);
            box-shadow: 0 2px 6px rgb(0 0 0 / .4);
            cursor: pointer;
            border: 1px solid var(--border-color)
        }
        .settings-slider::-moz-range-progress {
            background: #2563eb;
            height: 5px;
            border-radius: 3px
        }
        .settings-slider-value {
            flex-shrink: 0;
            min-width: 40px;
            text-align: right;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-main);
            font-variant-numeric: tabular-nums
        }
        html[dir="rtl"] .settings-slider-row {
            padding-left: 0;
            padding-right: 50px
        }
        #game-over-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .9);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 320;
            padding: calc(var(--header-h) + 16px) 20px 20px
        }
        #game-over-overlay.visible {
            display: flex
        }
        .go-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 30px 26px;
            max-width: 380px;
            width: 100%;
            text-align: center;
            box-shadow: 0 10px 40px rgb(0 0 0 / .6);
            animation: startPop 0.35s ease
        }
        .go-trophy {
            width: 56px;
            height: 56px;
            margin: 0 auto 14px;
            border-radius: 50%;
            background: linear-gradient(135deg, #facc15, #d4a10a);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 22px rgb(250 204 21 / .4)
        }
        .go-trophy svg {
            width: 30px;
            height: 30px;
            color: #0c1015
        }
        .go-label {
            font-size: 11px;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 6px
        }
        .go-winner-name {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 20px
        }
        .go-winner-name.red {
            color: var(--red-color)
        }
        .go-winner-name.blue {
            color: var(--blue-color)
        }
        .go-winner-name.green {
            color: var(--green-color)
        }
        .go-winner-name.yellow {
            color: var(--yellow-color)
        }
        .go-vs-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 16px;
            margin-bottom: 22px
        }
        .go-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 0
        }
        .go-side .go-tag {
            font-size: 9.5px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--text-muted)
        }
        .go-side .go-name {
            font-size: 13px;
            font-weight: 700;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .go-side.go-winner-side .go-tag {
            color: #2ecc71
        }
        .go-side.go-loser-side .go-tag {
            color: #ff6b6b
        }
        .go-divider-x {
            color: var(--text-muted);
            font-size: 12px;
            padding: 0 10px;
            flex-shrink: 0
        }
        .go-actions {
            display: flex;
            flex-direction: column;
            gap: 10px
        }
        .go-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 12px;
            padding: 13px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease
        }
        .go-btn.go-primary {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: #fff;
            border: none
        }
        .go-btn.go-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgb(46 204 113 / .4)
        }
        .go-btn.go-primary:active {
            transform: scale(.97)
        }
        .go-btn.go-secondary {
            background: #1b2129;
            color: var(--text-main)
        }
        .go-btn.go-secondary:hover {
            background: #20272f
        }
        .go-btn.go-secondary:active {
            transform: scale(.97);
            background: #151a22
        }
        .go-btn:disabled {
            opacity: .55;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important
        }
        #go-online-status {
            text-align: center;
            font-size: 12.5px;
            color: var(--text-muted);
            margin: 2px 0 10px;
            display: none
        }
        #online-lobby-countdown {
            position: relative;
            text-align: center;
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            margin: 6px auto 18px;
            font-variant-numeric: tabular-nums;
            width: 64px;
            height: 64px;
            line-height: 64px;
            border-radius: 50%;
            background: conic-gradient(#2ecc71 calc(var(--pct, 100) * 1%), rgba(46,204,113,.12) 0);
            transition: background .95s linear;
            animation: countdownPulse 1s ease-in-out infinite
        }
        #online-lobby-countdown::before {
            content: '';
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: var(--card-bg)
        }
        #online-lobby-countdown span {
            position: relative;
            z-index: 1
        }
        @keyframes countdownPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,.28) }
            50% { box-shadow: 0 0 0 9px rgba(46,204,113,0) }
        }
        .online-lobby-opp-card {
            opacity: .8;
            position: relative
        }
        .online-lobby-opp-card::after {
            content: '';
            position: absolute;
            top: 12px;
            right: 12px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #808993;
            animation: otbPulseGray 1.4s ease-in-out infinite
        }
        .online-lobby-opp-card .avatar-preview {
            animation: none
        }
        #confirm-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .78);
            backdrop-filter: blur(2px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 360;
            padding: calc(var(--header-h) + 16px) 20px 20px
        }
        #confirm-overlay.visible {
            display: flex
        }
        .confirm-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 28px 24px 22px;
            max-width: 340px;
            width: 100%;
            text-align: center;
            box-shadow: 0 10px 40px rgb(0 0 0 / .6);
            animation: startPop 0.28s ease
        }
        .confirm-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b6b, #e0433a);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgb(255 59 48 / .35)
        }
        .confirm-icon svg {
            width: 26px;
            height: 26px;
            color: #fff
        }
        .confirm-text {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.6;
            color: var(--text-main);
            margin-bottom: 22px
        }
        .confirm-actions {
            display: flex;
            flex-direction: column;
            gap: 10px
        }
        .confirm-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 12px;
            padding: 13px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease
        }
        .confirm-btn.confirm-danger {
            background: linear-gradient(135deg, #ff6b6b, #e0433a);
            color: #fff;
            border: none
        }
        .confirm-btn.confirm-danger:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgb(255 59 48 / .35)
        }
        .confirm-btn.confirm-danger:active {
            transform: scale(.97)
        }
        .confirm-btn.confirm-cancel {
            background: #1b2129;
            color: var(--text-main)
        }
        .confirm-btn.confirm-cancel:hover {
            background: #20272f
        }
        .confirm-btn.confirm-cancel:active {
            transform: scale(.97);
            background: #151a22
        }
        #resume-game-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgb(5 8 12 / .9);
            backdrop-filter: blur(2px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 400;
            padding: 20px
        }
        #resume-game-overlay.visible {
            display: flex
        }
        .resume-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 30px 26px 26px;
            max-width: 380px;
            width: 100%;
            text-align: center;
            box-shadow: 0 10px 40px rgb(0 0 0 / .6);
            animation: startPop 0.35s ease;
            direction: ltr
        }
        .resume-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 14px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4f8cff, #2f5fd8);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 22px rgb(79 140 255 / .4);
            animation: resumePulse 1.8s ease-in-out infinite
        }
        @keyframes resumePulse {
            0%, 100% { box-shadow: 0 6px 22px rgb(79 140 255 / .4) }
            50% { box-shadow: 0 6px 30px rgb(79 140 255 / .7) }
        }
        .resume-icon svg {
            width: 28px;
            height: 28px;
            color: #fff
        }
        .resume-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #8fb4ff;
            background: rgb(79 140 255 / .12);
            border: 1px solid rgb(79 140 255 / .3);
            border-radius: 20px;
            padding: 4px 12px;
            margin-bottom: 12px
        }
        .resume-title {
            font-size: 19px;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 10px
        }
        .resume-text {
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--text-muted);
            margin: 0 0 22px
        }
        .resume-actions {
            display: flex;
            flex-direction: column;
            gap: 10px
        }
        .resume-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 12px;
            padding: 13px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease
        }
        .resume-btn .icon-svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0
        }
        .resume-btn.resume-primary {
            background: linear-gradient(135deg, #4f8cff, #2f5fd8);
            color: #fff;
            border: none
        }
        .resume-btn.resume-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgb(79 140 255 / .4)
        }
        .resume-btn.resume-primary:active {
            transform: scale(.97)
        }
        .resume-btn.resume-secondary {
            background: #1b2129;
            color: #ff8a80
        }
        .resume-btn.resume-secondary:hover {
            background: #20272f
        }
        .resume-btn.resume-secondary:active {
            transform: scale(.97);
            background: #151a22
        }
        .resume-btn:disabled {
            opacity: .55;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important
        }
        .resume-status {
            margin-top: 14px;
            font-size: 12.5px;
            line-height: 1.5;
            color: var(--text-muted);
            min-height: 0;
            display: none
        }
        .resume-status.visible {
            display: block
        }
        #toast-container {
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 56px) + 10px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 400;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            pointer-events: none;
            width: 100%;
            max-width: 92vw
        }
        /* In-game screen only: toasts drop in from the bottom, above the
           board controls, instead of the top — everywhere else in the app
           (menus, dialogs, lobby, etc.) toasts always enter from the top. */
        #toast-container.toast-pos-bottom {
            top: auto;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 22px)
        }
        .toast {
            pointer-events: auto;
            background: #151a22;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 14px;
            box-shadow: 0 12px 32px rgb(0 0 0 / .55);
            width: 100%;
            max-width: 340px;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-16px) scale(.94);
            transition: opacity 0.32s cubic-bezier(.34, 1.35, .64, 1), transform 0.32s cubic-bezier(.34, 1.35, .64, 1)
        }
        #toast-container.toast-pos-bottom .toast {
            transform: translateY(16px) scale(.94)
        }
        .toast.show {
            opacity: 1;
            transform: translateY(0) scale(1)
        }
        #toast-container.toast-pos-bottom .toast.show {
            transform: translateY(0) scale(1)
        }
        .toast.leave {
            opacity: 0;
            transform: translateY(-8px) scale(.96);
            transition: opacity 0.2s ease, transform 0.2s ease
        }
        #toast-container.toast-pos-bottom .toast.leave {
            transform: translateY(8px) scale(.96)
        }
        .toast-row {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 11px 8px 11px 13px
        }
        .toast-icon {
            flex-shrink: 0;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: toastIconPop 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
            animation-delay: 0.05s
        }
        @keyframes toastIconPop {
            0% {
                transform: scale(.3);
                opacity: 0
            }
            100% {
                transform: scale(1);
                opacity: 1
            }
        }
        .toast-icon svg {
            display: block
        }
        .toast-success .toast-icon {
            color: var(--green-color);
            background: rgb(52 199 89 / .15)
        }
        .toast-warning .toast-icon {
            color: var(--yellow-color);
            background: rgb(255 204 0 / .15)
        }
        .toast-error .toast-icon {
            color: var(--red-color);
            background: rgb(255 59 48 / .15)
        }
        .toast-info .toast-icon {
            color: var(--blue-color);
            background: rgb(0 122 255 / .15)
        }
        .toast-body {
            flex: 1;
            min-width: 0
        }
        .toast-title {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--text-main);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }
        .toast-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: var(--text-muted);
            line-height: 1;
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease, background 0.15s ease;
            font-size: 17px
        }
        .toast-close:hover {
            color: var(--text-main);
            background: rgb(255 255 255 / .07)
        }
        .toast-progress {
            height: 3px;
            background: rgb(255 255 255 / .07);
            width: 100%
        }
        .toast-progress-bar {
            height: 100%;
            width: 100%;
            transition: width 0.15s linear
        }
        .toast-success .toast-progress-bar {
            background: var(--green-color)
        }
        .toast-warning .toast-progress-bar {
            background: var(--yellow-color)
        }
        .toast-error .toast-progress-bar {
            background: var(--red-color)
        }
        .toast-info .toast-progress-bar {
            background: var(--blue-color)
        }
        html[dir="rtl"] .toast-row {
            direction: rtl
        }
        .name-input-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px
        }
        .name-input-row input {
            flex: 1;
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 10px 12px;
            color: var(--text-main);
            font-family: inherit;
            font-size: 14px;
            min-width: 0
        }
        .name-input-row input:focus {
            outline: none;
            border-color: #4a5a6b
        }
        .name-entry-actions {
            display: flex;
            gap: 10px;
            margin-top: 18px
        }
        .name-entry-actions button {
            flex: 1;
            border-radius: 12px;
            padding: 12px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease
        }
        #btn-name-back {
            background: #1b2129;
            color: var(--text-main)
        }
        #btn-name-back:hover {
            background: #20272f
        }
        #btn-name-back:active {
            transform: scale(.97)
        }
        #btn-name-confirm {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: #fff;
            border: none
        }
        #btn-name-confirm:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgb(46 204 113 / .4)
        }
        #btn-name-confirm:active {
            transform: scale(.97)
        }
        #name-entry-view h1 {
            margin: 0 0 18px;
            font-size: 20px;
            text-align: center
        }
        .online-name-lock-info {
            display: none;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, rgba(74,168,255,.12), rgba(155,110,255,.08));
            border: 1px solid rgba(74,168,255,.25);
            border-radius: 16px;
            padding: 14px 16px;
            margin-bottom: 18px;
            text-align: start;
            animation: fieldPopIn .35s cubic-bezier(.34, 1.56, .64, 1) both
        }
        #name-entry-view.gt-online .online-name-lock-info {
            display: flex
        }
        /* Room-code field lives next to the timer settings and only makes
           sense once "Online" is selected on this same screen. */
        .online-code-entry-wrap {
            display: none
        }
        #name-entry-view.gt-online .online-code-entry-wrap {
            display: block
        }
        .online-code-entry-wrap .online-code-input {
            margin-bottom: 0
        }
        /* When the join screen was reached with a code already typed on the
           settings screen, skip the redundant manual OTP re-entry / Connect
           button and go straight to a connecting status. */
        #online-join-view.autoconnecting .otp-wrap,
        #online-join-view.autoconnecting #btn-online-connect {
            display: none
        }
        #name-entry-view.gt-online #name-fields-2p,
        #name-entry-view.gt-online #name-fields-4p,
        #name-entry-view.gt-online #name-fields-hunter {
            display: none !important
        }
        .online-name-lock-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(74,168,255,.15);
            color: #6fbaff
        }
        .online-name-lock-icon svg {
            width: 20px;
            height: 20px
        }
        .online-name-lock-text {
            font-size: 12.5px;
            color: var(--text-muted);
            line-height: 1.6
        }
        .online-name-lock-text b {
            color: var(--text-main);
            display: block;
            font-size: 13.5px;
            margin-bottom: 2px;
            font-weight: 700
        }
        .lang-switch {
            position: relative;
            display: flex;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 3px;
            box-shadow: 0 4px 14px rgb(0 0 0/.35);
            direction: ltr
        }
        .lang-switch .lang-opt {
            position: relative;
            z-index: 2;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-weight: 700;
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: color .25s ease
        }
        .lang-switch .lang-opt.active {
            color: #0c1015
        }
        .lang-slider {
            position: absolute;
            top: 3px;
            bottom: 3px;
            left: 3px;
            width: calc(50% - 3px);
            background: linear-gradient(135deg, #fff, #dbe3ec);
            border-radius: 16px;
            transition: transform .25s cubic-bezier(.4, 0, .2, 1);
            z-index: 1
        }
        .lang-switch[data-active="en"] .lang-slider {
            transform: translateX(100%)
        }
        #name-entry-view {
            max-height: 85vh;
            overflow-y: auto;
            transform-origin: center top;
            scrollbar-width: none;
            -ms-overflow-style: none
        }
        #name-entry-view::-webkit-scrollbar {
            display: none
        }
        .player-setup-card {
            background: #0c1015;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px;
            margin-bottom: 12px;
            text-align: left
        }
        @keyframes fieldPopIn {
            from {
                opacity: 0;
                transform: scaleX(.9) scaleY(.94) translateY(6px)
            }
            to {
                opacity: 1;
                transform: scaleX(1) scaleY(1) translateY(0)
            }
        }
        #name-entry-view.card-anim {
            animation: fieldPopIn .42s cubic-bezier(.34, 1.56, .64, 1) both
        }
        .player-setup-card .name-input-row {
            margin-bottom: 10px
        }
        .customize-row {
            display: flex;
            flex-direction: column;
            gap: 8px
        }
        .swatch-group {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }
        .swatch-btn {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            padding: 0;
            box-shadow: 0 0 0 1px rgb(255 255 255/.08) inset;
            transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-color .18s ease
        }
        .swatch-btn:hover {
            transform: scale(1.12)
        }
        .swatch-btn:active {
            transform: scale(.92)
        }
        .swatch-btn.selected {
            border-color: #fff;
            transform: scale(1.18);
            box-shadow: 0 0 0 3px rgb(255 255 255/.15), 0 0 10px rgb(255 255 255/.35)
        }
        .avatar-preview {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            box-shadow: 0 0 14px rgb(255 255 255/.2);
            animation: avatarPulse 2.2s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .25s ease;
            border-radius: 50%;
            font-size: 18px;
            color: #fff;
            font-weight: 700
        }
        @keyframes avatarPulse {
            0%,
            100% {
                box-shadow: 0 0 10px rgb(255 255 255/.15)
            }
            50% {
                box-shadow: 0 0 20px rgb(255 255 255/.4)
            }
        }
        .avatar {
            transition: background .25s ease
        }
        html[dir="rtl"] .player-setup-card {
            direction: ltr;
            text-align: left
        }
        #start-overlay {
            background: #000
        }
        .hunt-proximity {
            display: flex;
            gap: 4px;
            margin-top: 5px
        }
        .hunt-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #3a2020;
            border: 1px solid #5a2a2a;
            transition: all .25s ease;
            box-shadow: none
        }
        .hunt-dot.filled {
            background: var(--red-color);
            border-color: var(--red-color);
            box-shadow: 0 0 7px rgb(255 59 48 / .75)
        }
        .board-wrapper.danger {
            border-color: var(--red-color);
            animation: dangerPulse 0.9s infinite ease-in-out
        }
        /* Online-only visual perspective flip: rotates just the board canvas
           so each player's own pawn always starts at the bottom of their own
           screen. Purely cosmetic — row/col game state is untouched, and the
           click/tap handlers compensate for this rotation. */
        #boardCanvas.board-flipped {
            transform: rotate(180deg)
        }
        @keyframes dangerPulse {
            0%,
            100% {
                box-shadow: inset 0 0 25px rgb(255 59 48 / .18), 0 0 14px rgb(255 59 48 / .25)
            }
            50% {
                box-shadow: inset 0 0 45px rgb(255 59 48 / .4), 0 0 26px rgb(255 59 48 / .5)
            }
        }
        @keyframes dangerBannerPulse {
            0%,
            100% {
                filter: brightness(1)
            }
            50% {
                filter: brightness(1.25)
            }
        }
        /* ===== دیزاین جدید میله‌های دیوار (همیشه دایره‌ای، هرگز از قاب خودشون بیرون نمی‌زنن) ===== */
        .wall-gauge {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px
        }
                .wall-gauge.align-right {
            flex-direction: row;
            justify-content: flex-start;
        }
        .wall-gauge-pips {
            --pip-size: 6px;
            --pip-gap: 2px;
            --pip-max: 10;
            display: flex;
            align-items: center;
            gap: var(--pip-gap);
            width: fit-content;
            /* Sized to always fit the full pip count (default max 10 walls):
               N pips + (N-1) gaps + 2px for the 1px padding on each side,
               plus a small safety buffer so the last pip is never clipped
               by overflow:hidden at any breakpoint. */
            max-width: calc(var(--pip-max) * var(--pip-size) + (var(--pip-max) - 1) * var(--pip-gap) + 4px);
            height: auto;
            background: #252e39;
            border-radius: 6px;
            padding: 1px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6)
        }
        .wall-pip {
            flex: 0 0 auto;
            width: var(--pip-size);
            height: var(--pip-size);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: #1d2530;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, box-shadow 0.3s;
            transform: scale(0.82)
        }
        .wall-pip.filled {
            transform: scale(1);
            box-shadow: 0 0 8px currentColor
        }
        .wall-gauge-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            min-width: 30px;
            justify-content: flex-end
        }
        .wall-gauge-icon {
            display: flex;
            opacity: 0.6
        }
        @media (max-width:480px) {
            .wall-gauge-pips {
                --pip-size: 5px;
                --pip-gap: 2px
            }
            .wall-gauge-label {
                font-size: 11px;
                min-width: 22px
            }
        }
        @media (max-width:360px) {
            .wall-gauge-pips {
                --pip-size: 4px;
                --pip-gap: 1.5px
            }
            .wall-gauge-label {
                font-size: 10px;
                min-width: 16px
            }
        }
        /* ===== 4P mobile team-grouped layout ===== */
        .topbar-4p-mobile {
            display: none;
        }
        @media (max-width:700px) {
            .topbar.mode-4p.desktop-4p {
                display: none
            }
            .topbar-4p-mobile {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;
                gap: 6px;
                background: var(--card-bg);
                border: 1px solid var(--border-color);
                border-radius: 16px;
                padding: 12px 14px
            }
            .topbar-4p-mobile .team-col {
                display: flex;
                flex-direction: column;
                gap: 10px;
                min-width: 0
            }
            .topbar-4p-mobile .team-col:first-child {
                align-items: flex-start
            }
            .topbar-4p-mobile .team-col:last-child {
                align-items: flex-end
            }
            .topbar-4p-mobile .player-card {
                min-width: 0;
                width: 100%;
                padding: 4px 2px;
                gap: 8px
            }
            .topbar-4p-mobile .player-info {
                min-width: 0;
                flex: 1
            }
            .topbar-4p-mobile .team-col:last-child .player-card {
                flex-direction: row-reverse
            }
            .topbar-4p-mobile .team-col:last-child .player-info {
                direction: rtl;
                text-align: right
            }
            .topbar-4p-mobile .team-col:last-child .wall-gauge,
            .topbar-4p-mobile .team-col:last-child .player-timer {
                flex-direction: row-reverse
            }
            .topbar-4p-mobile .team-col:first-child .wall-gauge-label,
            .topbar-4p-mobile .team-col:last-child .wall-gauge-label {
                justify-content: flex-start
            }
            .topbar-4p-mobile .avatar {
                width: 27px;
                height: 27px
            }
            .topbar-4p-mobile .pt-track {
                min-width: 40px;
                max-width: 64px;
                padding: 3px 5px;
                border-radius: 9px
            }
            .topbar-4p-mobile .pt-time {
                font-size: 9px
            }
            .topbar-4p-mobile .player-info .name {
                font-size: 13px;
                max-width: 76px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }
            .topbar-4p-mobile .player-info .team-label {
                font-size: 9px
            }
            .topbar-4p-mobile .wall-gauge-pips {
                --pip-size: 4px;
                --pip-gap: 1.5px;
                max-width: 52px
            }
            .topbar-4p-mobile .wall-gauge-label {
                font-size: 11.5px;
                min-width: 24px
            }
        }
        @media (max-width:400px) {
            .topbar-4p-mobile .player-info .name {
                font-size: 12px;
                max-width: 70px
            }
            .topbar-4p-mobile .wall-gauge-pips {
                --pip-size: 3px;
                --pip-gap: 1.5px;
                max-width: 48px
            }
            .topbar-4p-mobile .pt-track {
                min-width: 36px;
                max-width: 56px
            }
        }

/* ================= HUNTER ROLE PICK (online Wolf & Sheep lobby) ================= */
.hunter-role-pick {
    margin-top: 10px;
    padding: 18px 14px 20px;
    border-top: none;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Dusk / moonlit-forest backdrop — the "waiting for the wolf & sheep
       match to start" moment gets its own themed scene instead of just
       sitting flush against the rest of the lobby card. */
    background:
        radial-gradient(circle at 20% 112%, rgba(46, 204, 113, .10), rgba(46, 204, 113, 0) 45%),
        radial-gradient(circle at 84% 108%, rgba(231, 76, 60, .10), rgba(231, 76, 60, 0) 45%),
        linear-gradient(165deg, #2c2557 0%, #1b1a3d 48%, #0c0e22 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 18px rgba(0, 0, 0, .25)
}
.hunter-role-pick::before {
    /* Soft moon glow in the corner */
    content: '';
    position: absolute;
    top: -22px;
    right: -14px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fff8e0 0%, #f3d98b 45%, rgba(243, 217, 139, 0) 76%);
    opacity: .5;
    filter: blur(.5px);
    z-index: -1;
    pointer-events: none
}
.hunter-role-pick::after {
    /* Faint starfield */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 30%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.5px 1.5px at 34% 15%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1px 1px at 62% 40%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 78% 20%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1px 1px at 90% 55%, rgba(255, 255, 255, .4), transparent);
    z-index: -1;
    pointer-events: none
}
.hunter-role-pick-label {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #f2effc;
    margin: 0 0 12px;
    letter-spacing: .2px
}
.hunter-role-options {
    display: flex;
    gap: 10px;
    justify-content: center
}
.hunter-role-btn {
    flex: 1;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    color: #f2effc;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s ease
}
.hunter-role-btn:active {
    transform: scale(.96)
}
.hunter-role-btn.selected {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, .16);
    box-shadow: 0 0 0 2px rgba(46, 204, 113, .3), 0 0 20px rgba(46, 204, 113, .22)
}
.hunter-role-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    overflow: hidden;
    border-radius: 50%;
    padding: 8px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
}
.hunter-role-icon svg {
    width: 100%;
    height: 100%
}
.hunter-role-icon.icon-escaper {
    color: #2ecc71;
    box-shadow: inset 0 0 0 1px rgba(46, 204, 113, .35), 0 0 14px rgba(46, 204, 113, .3)
}
.hunter-role-icon.icon-hunter {
    color: #e74c3c;
    box-shadow: inset 0 0 0 1px rgba(231, 76, 60, .35), 0 0 14px rgba(231, 76, 60, .3)
}
.hunter-role-btn-label {
    font-size: 12.5px;
    font-weight: 700
}
.role-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap
}
.role-live-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0
}
.role-live-badge.role-escaper {
    color: #2ecc71
}
.role-live-badge.role-hunter {
    color: #e74c3c
}
.role-live-badge-pending {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px
}

/* ================= HUNTER ROLE LOTTERY REVEAL ================= */
#hunter-role-reveal-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(90, 70, 160, .45), rgba(5, 8, 12, 0) 55%),
        rgb(5 8 12 / .88);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 400;
    padding: 20px
}
#hunter-role-reveal-overlay.visible {
    display: flex
}
.hunter-reveal-card {
    background: linear-gradient(165deg, #2c2557 0%, #1b1a3d 55%, #0c0e22 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 26px 22px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgb(0 0 0 / .6);
    animation: startPop 0.28s ease
}
.hunter-reveal-card h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #f2effc
}
.hunter-reveal-card p {
    margin: 0 0 20px;
    font-size: 12.5px;
    color: rgba(242, 239, 252, .65);
    line-height: 1.6
}
.hunter-reveal-slots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px
}
.hunter-reveal-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}
.hunter-reveal-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 72%);
    border: 1.5px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    overflow: hidden;
    padding: 12px
}
.hunter-reveal-icon svg {
    width: 100%;
    height: 100%
}
.hunter-reveal-icon.shuffling {
    animation: hunterRevealShuffle 0.28s ease-in-out infinite
}
.hunter-reveal-icon.landed {
    animation: hunterRevealLand 0.5s ease;
    border-color: #2ecc71;
    box-shadow: 0 0 18px rgba(46, 204, 113, .45)
}
.hunter-reveal-icon.icon-escaper {
    color: #2ecc71
}
.hunter-reveal-icon.icon-hunter {
    color: #e74c3c
}
.hunter-reveal-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.hunter-reveal-role {
    font-size: 12px;
    font-weight: 800;
    color: #2ecc71;
    min-height: 15px
}
.hunter-reveal-vs {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted)
}
@keyframes hunterRevealShuffle {
    0%, 100% { transform: scale(1) rotate(0deg) }
    50% { transform: scale(1.08) rotate(-4deg) }
}
@keyframes hunterRevealLand {
    0% { transform: scale(1.35) }
    60% { transform: scale(0.92) }
    100% { transform: scale(1) }
}