:root {
            /* Typography */
            --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'JetBrains Mono', 'Courier New', monospace;
            --font-display: 'DM Sans', sans-serif;

            /* Type scale */
            --text-xs: 10px;
            --text-sm: 12px;
            --text-base: 14px;
            --text-md: 16px;
            --text-lg: 20px;
            --text-xl: 24px;
            --text-2xl: 32px;
            --text-3xl: 48px;

            /* Font weights */
            --weight-normal: 400;
            --weight-medium: 500;
            --weight-semibold: 600;
            --weight-bold: 700;

            /* Spacing scale */
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 12px;
            --space-lg: 16px;
            --space-xl: 24px;
            --space-2xl: 32px;
            --space-3xl: 48px;

            /* Color hierarchy — Dark Luxury Street Chess */
            --color-bg: #0c0d12;
            --color-bg-warm: #14120e;
            --color-surface: rgba(18, 20, 26, 0.96);
            --color-surface-raised: rgba(26, 28, 36, 0.96);
            --color-surface-hover: rgba(34, 37, 46, 0.96);
            --color-surface-dark: rgba(0, 0, 0, 0.5);
            --color-surface-overlay: rgba(0, 0, 0, 0.85);

            --color-text: #e8e6e1;
            --color-text-muted: #7a7d88;
            --color-text-dim: #4a4d56;
            --color-text-bright: #ffffff;

            /* Gold — the DOMINANT accent */
            --color-gold: #c9a84c;
            --color-gold-bright: #e8c44a;
            --color-gold-dim: #8a7234;
            --color-gold-glow: rgba(201, 168, 76, 0.15);

            /* Gold IS the primary — blue demoted to informational */
            --color-primary: #c9a84c;
            --color-primary-hover: #b8963f;
            --color-info: #5b8fd9;
            --color-info-hover: #4a7cc4;
            --color-info-glow: rgba(91, 143, 217, 0.15);
            --color-success: #2ecc71;
            --color-success-dim: #27ae60;
            --color-success-glow: rgba(46, 204, 113, 0.15);
            --color-danger: #e74c3c;
            --color-danger-dim: #c0392b;
            --color-danger-light: #ff6b6b;
            --color-danger-glow: rgba(231, 76, 60, 0.15);
            --color-warning: #f39c12;
            --color-warning-glow: rgba(243, 156, 18, 0.15);

            /* Third-party brand colors */
            --color-discord: #5865F2;
            --color-arena: #a5a0ff;

            --color-border: rgba(255, 255, 255, 0.06);
            --color-border-subtle: rgba(255, 255, 255, 0.03);
            --color-border-accent: rgba(201, 168, 76, 0.25);
            --color-border-gold: rgba(201, 168, 76, 0.5);

            /* Sharper radii — deliberate, not generic */
            --radius-sm: 2px;
            --radius-md: 4px;
            --radius-lg: 8px;
            --radius-full: 50%;
        }

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

        body {
            font-family: var(--font-body);
            background: var(--color-bg);
            background-image:
                radial-gradient(ellipse at 15% 50%, rgba(201, 168, 76, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 15%, rgba(201, 168, 76, 0.02) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 100%, rgba(12, 13, 18, 0.8) 0%, transparent 50%);
            min-height: 100vh;
            color: var(--color-text);
            position: relative;
            -webkit-font-smoothing: antialiased;
        }

        /* Noise texture + vignette */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 1;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
            pointer-events: none;
            z-index: 1;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        header {
            color: var(--color-text);
            padding: 15px 20px;
            border-bottom: 1px solid var(--color-border);
            margin-bottom: 15px;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 5px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--color-gold-bright);
            font-family: var(--font-display);
        }

        h1::before {
            content: '♟️ ';
            font-size: 0.8em;
        }

        h1::after {
            content: ' ♟️';
            font-size: 0.8em;
        }

        #victory-celebration h1::before,
        #victory-celebration h1::after {
            content: '';
        }

        .subtitle {
            font-size: 0.85em;
            opacity: 1;
            color: var(--color-text-dim);
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-family: var(--font-body);
        }

        .wallet-section {
            background: var(--color-surface);
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
            border: 1px solid var(--color-border);
        }

        .btn {
            background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dim) 100%);
            color: var(--color-bg);
            border: 1px solid var(--color-gold);
            padding: 12px 28px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.2s ease;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-family: var(--font-body);
        }

        .btn:hover {
            background: linear-gradient(180deg, var(--color-gold-bright) 0%, var(--color-gold) 100%);
            transform: translateY(-1px);
            box-shadow: 0 0 20px var(--color-gold-glow), 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--color-border-accent);
            color: var(--color-gold);
        }
        .btn-secondary:hover {
            background: var(--color-gold-glow);
            border-color: var(--color-border-gold);
            box-shadow: 0 0 12px var(--color-gold-glow);
        }

        .btn-success {
            background: var(--color-success);
            color: #fff;
        }
        .btn-success:hover {
            background: var(--color-success-dim);
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
        }

        .tabs {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            gap: 1px;
            background: rgba(12, 13, 18, 0.98);
            padding: 6px 8px;
            border: 1px solid var(--color-border);
            border-top: none;
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 168, 76, 0.03);
            backdrop-filter: blur(16px);
        }

        .tab {
            padding: 8px 14px;
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            border-radius: var(--radius-sm);
            transition: all 0.15s ease;
            color: var(--color-text-muted);
            font-family: var(--font-body);
            white-space: nowrap;
        }

        .tab:hover {
            color: var(--color-gold);
            background: rgba(201, 168, 76, 0.06);
            transform: translateY(-1px);
        }
        .tab:active {
            transform: translateY(0);
        }

        .tab.active {
            background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dim) 100%);
            color: var(--color-bg);
            font-weight: 700;
            box-shadow: 0 0 12px var(--color-gold-glow);
        }

        .tab-content {
            display: none;
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: 28px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--color-border);
        }

        .tab-content.active {
            display: block;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: var(--color-text);
            font-size: 13px;
        }

        input, select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            transition: all 0.15s;
            background: rgba(0, 0, 0, 0.3);
            color: var(--color-text);
            font-family: var(--font-body);
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--color-gold);
            box-shadow: 0 0 0 3px var(--color-gold-glow), inset 0 0 4px var(--color-gold-glow);
            background: rgba(201, 168, 76, 0.02);
        }

        .filter-btn {
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--color-border);
            color: var(--color-text-muted);
            padding: 5px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            font-family: var(--font-body);
            transition: all 0.15s;
        }
        .filter-btn:hover {
            background: rgba(201, 168, 76, 0.06);
            border-color: var(--color-border-accent);
            color: var(--color-gold);
        }
        .filter-btn.active {
            background: rgba(201, 168, 76, 0.1);
            border-color: var(--color-gold);
            color: var(--color-gold);
        }

        .game-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .game-card {
            background: var(--color-surface-raised);
            border-radius: var(--radius-md);
            padding: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.15s ease;
            border: 1px solid var(--color-border);
            position: relative;
        }

        .game-card::before {
            content: '';
            display: none;
        }

        .game-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px var(--color-gold-glow);
            border-color: var(--color-border-gold);
        }

        .game-card h3 {
            margin-bottom: 12px;
            color: var(--color-gold-bright);
            font-family: var(--font-mono);
            font-size: 15px;
            font-weight: 600;
            border-bottom: 1px solid var(--color-border);
            padding-bottom: 10px;
        }

        .game-info {
            margin-bottom: 10px;
            font-size: 13px;
            color: var(--color-text-muted);
        }

        .game-info strong {
            color: var(--color-gold);
        }

        #game-area {
            display: none;
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
            border: 1px solid var(--color-border);
        }

        #game-area.active {
            display: block;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--color-border);
        }

        .player-info {
            flex: 1;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-sm);
            margin: 0 8px;
            border: 1px solid var(--color-border);
            color: var(--color-text);
        }

        .player-info strong {
            color: var(--color-gold-bright);
        }

        .chessboard-container {
            max-width: 700px;
            margin: 0 auto 15px auto;
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
        }

        #board {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
        }

        .game-status {
            text-align: center;
            padding: 12px;
            background: rgba(212, 168, 67, 0.08);
            border-radius: var(--radius-sm);
            margin-bottom: 16px;
            font-size: 15px;
            font-weight: 600;
            border: 1px solid var(--color-border-accent);
            color: var(--color-gold-bright);
        }

        .move-history {
            background: rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-sm);
            padding: 12px;
            max-height: 200px;
            overflow-y: auto;
            margin-bottom: 16px;
            border: 1px solid var(--color-border);
            font-family: var(--font-mono);
            font-size: 13px;
        }

        .move-history::-webkit-scrollbar {
            width: 8px;
        }

        .move-history::-webkit-scrollbar-track {
            background: transparent;
        }

        .move-history::-webkit-scrollbar-thumb {
            background: var(--color-gold-dim);
            border-radius: 3px;
        }

        .move {
            padding: 6px 8px;
            margin: 2px 0;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 4px;
            color: var(--color-text);
        }

        .move:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        /* Two-column move notation */
        .move-grid {
            display: grid;
            grid-template-columns: 28px 1fr 1fr;
            gap: 1px 4px;
            font-family: var(--font-mono);
            font-size: 12px;
        }
        .move-num {
            color: var(--color-text-dim);
            text-align: right;
            padding: 2px 0;
        }
        .move-white, .move-black {
            color: var(--color-text);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            cursor: default;
        }
        .move-white:hover, .move-black:hover {
            background: rgba(255, 255, 255, 0.06);
        }
        .move-latest {
            color: var(--color-gold-bright);
            background: var(--color-gold-glow);
        }

        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
            border: none;
            font-family: var(--font-body);
        }

        .status-open {
            background: rgba(34, 197, 94, 0.15);
            color: var(--color-success);
        }

        .status-progress {
            background: rgba(245, 158, 11, 0.15);
            color: var(--color-warning);
        }

        .status-completed {
            background: rgba(201, 168, 76, 0.12);
            color: var(--color-gold);
        }

        .chess-clock {
            flex: 1;
            padding: 16px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: var(--radius-sm);
            text-align: center;
            transition: all 0.2s;
            border: 1px solid var(--color-border);
            font-family: var(--font-mono);
            color: var(--color-text-muted);
        }

        .chess-clock.active {
            background: rgba(34, 197, 94, 0.08);
            color: var(--color-success);
            border-color: rgba(34, 197, 94, 0.3);
        }

        .chess-clock.low-time {
            background: rgba(231, 76, 60, 0.12);
            color: var(--color-danger);
            animation: pulse 0.8s infinite;
            border-color: rgba(231, 76, 60, 0.5);
            box-shadow: 0 0 12px rgba(231, 76, 60, 0.15);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: var(--color-surface-raised);
            color: var(--color-text);
            padding: 20px;
            border-radius: var(--radius-md);
            text-align: center;
            border: 1px solid var(--color-border);
            font-family: var(--font-body);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            display: none;
        }

        .stat-card.green {
            border-color: rgba(34, 197, 94, 0.2);
            background: rgba(34, 197, 94, 0.05);
        }
        .stat-card.green .stat-value { color: var(--color-success); }

        .stat-card.red {
            border-color: rgba(239, 68, 68, 0.2);
            background: rgba(239, 68, 68, 0.05);
        }
        .stat-card.red .stat-value { color: var(--color-danger); }

        .stat-card.blue {
            border-color: rgba(91, 143, 217, 0.2);
            background: rgba(91, 143, 217, 0.05);
        }
        .stat-card.blue .stat-value { color: var(--color-info); }

        .stat-card.orange {
            border-color: rgba(245, 158, 11, 0.2);
            background: rgba(245, 158, 11, 0.05);
        }
        .stat-card.orange .stat-value { color: var(--color-warning); }

        .stat-value {
            font-size: 36px;
            font-weight: 700;
            margin: 8px 0;
            font-family: var(--font-mono);
            color: var(--color-gold-bright);
        }

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

        .leaderboard-table {
            width: 100%;
            background: var(--color-surface-raised);
            border-radius: var(--radius-md);
            overflow-x: auto;
            border: 1px solid var(--color-border);
        }

        .leaderboard-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .leaderboard-table th {
            background: rgba(201, 168, 76, 0.08);
            color: var(--color-gold);
            padding: 12px 15px;
            text-align: left;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-family: var(--font-body);
            border-bottom: 2px solid var(--color-border-accent);
        }

        .leaderboard-table td {
            padding: 12px 15px;
            border-bottom: 1px solid var(--color-border);
            color: var(--color-text);
            font-size: 13px;
        }

        .leaderboard-table tr:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            font-weight: 700;
            font-size: 12px;
            border: none;
            font-family: var(--font-mono);
            margin-right: 8px;
        }

        .rank-1 {
            background: var(--color-gold);
            color: #000;
            box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
        }

        .rank-2 {
            background: #9ca3af;
            color: #000;
        }

        .rank-3 {
            background: #b45309;
            color: #fff;
        }

        .rank-other {
            background: var(--color-surface-hover);
            color: var(--color-text-muted);
        }

        .history-item {
            background: var(--color-surface-raised);
            padding: 16px;
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--color-border);
            color: var(--color-text);
        }

        .history-item.win {
            border-left: 3px solid var(--color-success);
        }

        .history-item.loss {
            border-left: 3px solid var(--color-danger);
        }

        .history-item.draw {
            border-left: 3px solid var(--color-warning);
        }

        .win-rate {
            font-size: 16px;
            font-weight: 700;
            padding: 10px 20px;
            background: rgba(34, 197, 94, 0.1);
            color: var(--color-success);
            border-radius: var(--radius-sm);
            display: inline-block;
            margin: 8px 0;
            border: 1px solid rgba(34, 197, 94, 0.2);
            font-family: var(--font-mono);
        }

        .wallet-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .address {
            font-family: var(--font-mono);
            background: rgba(0, 0, 0, 0.3);
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
            color: var(--color-gold);
            font-size: 13px;
        }

        .loading {
            text-align: center;
            padding: 28px;
            color: var(--color-text-muted);
        }

        .spinner {
            border: 3px solid var(--color-border);
            border-top: 3px solid var(--color-gold);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto;
            box-shadow: 0 0 8px var(--color-gold-glow);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error {
            background: rgba(239, 68, 68, 0.1);
            color: var(--color-danger);
            padding: 14px 18px;
            border-radius: var(--radius-sm);
            margin: 16px 0;
            border: 1px solid rgba(239, 68, 68, 0.2);
            font-size: 14px;
        }

        .error::before {
            content: '⚠ ';
        }

        .success {
            background: rgba(34, 197, 94, 0.1);
            color: var(--color-success);
            padding: 14px 18px;
            border-radius: var(--radius-sm);
            margin: 16px 0;
            border: 1px solid rgba(34, 197, 94, 0.2);
            font-size: 14px;
        }
        .success::before {
            content: '✓ ';
        }

        /* Loading progress bar animation */
        @keyframes progress {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(300%); }
        }

        @keyframes slideUp {
            from { transform: translateX(-50%) translateY(100px); opacity: 0; }
            to { transform: translateX(-50%) translateY(0); opacity: 1; }
        }

        @keyframes slideInUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes bannerSlideIn {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

        .progress {
            animation: progress 1.5s ease-in-out infinite;
        }

        /* Design system animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes goldPulse {
            0%, 100% { box-shadow: 0 0 0 rgba(201, 168, 76, 0); }
            50% { box-shadow: 0 0 16px rgba(201, 168, 76, 0.3); }
        }

        @keyframes shimmer {
            from { background-position: -200% 0; }
            to { background-position: 200% 0; }
        }

        /* Tournament victory celebration */
        @keyframes tournamentFlash {
            0% { opacity: 0; }
            15% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes tournamentParticle {
            0% { opacity: 1; transform: translate(0, 0) scale(1); }
            100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
        }
        @keyframes tournamentTrophy {
            0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
            30% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 0; }
        }

        /* Tab content entrance */
        .tab-content.active {
            animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        /* Game card entrance stagger + new card pulse */
        .game-card {
            animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .game-card.new-card {
            animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both, goldPulse 1s ease-in-out 0.4s 2;
        }
        .game-card:nth-child(1) { animation-delay: 0s; }
        .game-card:nth-child(2) { animation-delay: 0.05s; }
        .game-card:nth-child(3) { animation-delay: 0.1s; }
        .game-card:nth-child(4) { animation-delay: 0.15s; }
        .game-card:nth-child(5) { animation-delay: 0.2s; }
        .game-card:nth-child(6) { animation-delay: 0.25s; }

        /* Challenge board: dimmed card (outside active hours) */
        .game-card.challenge-dimmed {
            opacity: 0.45;
            pointer-events: auto;
        }
        .game-card.challenge-dimmed:hover {
            opacity: 0.6;
        }
        .challenge-expiry-badge {
            letter-spacing: 0.03em;
        }

        /* Rank 1 shimmer */
        .rank-1 {
            background: linear-gradient(110deg, var(--color-gold-dim) 0%, var(--color-gold-bright) 45%, var(--color-gold) 55%, var(--color-gold-dim) 100%);
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }

        /* ================================================================
           EXTRACTED COMPONENT CLASSES (Phase 2)
           ================================================================ */

        /* Site branding */
        #site-branding {
            position: fixed;
            top: 8px;
            left: 20px;
            z-index: 999;
            font-size: 28px;
            font-weight: 700;
            color: var(--color-gold-bright);
            text-shadow: 2px 2px 0px #000, -1px -1px 0px #000;
            line-height: 1;
            font-family: 'Courier New', Courier, monospace;
            cursor: pointer;
            letter-spacing: 0;
        }
        #site-branding span {
            display: inline-block;
            vertical-align: middle;
            line-height: 1;
        }
        #site-branding .brand-icon {
            font-size: 32px;
        }
        .brand-crown {
            width: 28px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
            margin-top: -4px;
        }
        .hero-crown {
            width: 52px;
            height: 38px;
            margin-right: 8px;
            margin-top: -8px;
        }

        /* Social links */
        .social-link {
            position: fixed;
            top: 14px;
            z-index: 999;
            text-decoration: none;
            font-size: 22px;
            opacity: 0.6;
            transition: opacity 0.2s, color 0.2s;
        }
        .social-link:hover {
            opacity: 1;
        }
        #discord-link {
            right: 180px;
            color: #7289da;
        }
        #twitter-link {
            right: 215px;
            color: var(--color-text);
        }
        #twitter-link:hover {
            color: var(--color-gold);
        }

        /* Wallet area */
        #wallet-area {
            position: fixed;
            top: 12px;
            right: 20px;
            z-index: 999;
        }
        #connect-wallet {
            font-size: 12px;
            padding: 6px 12px;
        }

        /* Profile button */
        #profile-button {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid var(--color-gold-dim);
            border-radius: var(--radius-lg);
            padding: 6px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--color-gold-bright);
            font-size: 12px;
            transition: border-color 0.2s;
        }
        #profile-button:hover {
            border-color: var(--color-gold);
        }
        .profile-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid var(--color-gold);
            object-fit: cover;
        }
        .profile-avatar-lg {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--color-gold-bright);
            object-fit: cover;
        }

        /* Profile dropdown */
        #profile-dropdown {
            display: none;
            position: absolute;
            top: 48px;
            right: 0;
            background: rgba(12, 13, 18, 0.98);
            border: 1px solid var(--color-border-gold);
            border-radius: var(--radius-lg);
            padding: 16px;
            min-width: 280px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px var(--color-gold-glow);
            backdrop-filter: blur(12px);
        }
        .dropdown-section-label {
            font-size: 10px;
            color: var(--color-text-dim);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 4px;
            font-weight: 600;
        }
        .dropdown-wallet-addr {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--color-gold);
            background: rgba(201, 168, 76, 0.06);
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
            word-break: break-all;
        }
        .dropdown-copy-btn {
            background: rgba(201, 168, 76, 0.08);
            border: 1px solid var(--color-border-accent);
            color: var(--color-gold);
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            font-size: 10px;
            margin-top: 6px;
            cursor: pointer;
            width: 100%;
            transition: all 0.15s;
            font-family: var(--font-body);
        }
        .dropdown-copy-btn:hover {
            background: rgba(201, 168, 76, 0.15);
            border-color: var(--color-gold);
        }
        .dropdown-divider {
            border-bottom: 1px solid var(--color-border);
            margin-bottom: 12px;
            padding-bottom: 12px;
        }
        .dropdown-stat-wins { color: var(--color-success); font-weight: 700; }
        .dropdown-stat-losses { color: var(--color-danger); font-weight: 700; }
        .dropdown-stat-draws { color: var(--color-gold); font-weight: 700; }
        .dropdown-stat-label { color: var(--color-text-dim); }
        .btn-disconnect {
            width: 100%;
            background: linear-gradient(180deg, var(--color-danger) 0%, var(--color-danger-dim) 100%);
            border-color: var(--color-danger);
            font-size: 12px;
            padding: 8px;
        }

        /* Landing page */
        #landing-page {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 15px 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Landing hero with chess pattern */
        .landing-hero {
            position: relative;
            margin-bottom: 24px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--color-border);
        }
        .landing-hero-bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image:
                linear-gradient(45deg, rgba(201, 168, 76, 0.03) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(201, 168, 76, 0.03) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(201, 168, 76, 0.03) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(201, 168, 76, 0.03) 75%);
            background-size: 40px 40px;
            background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
            opacity: 0.7;
        }
        .landing-hero-bg::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at center, transparent 30%, var(--color-bg) 80%);
        }

        #landing-hero-title {
            font-size: 56px;
            font-weight: 700;
            color: var(--color-gold-bright);
            text-shadow: 3px 3px 0px #000;
            margin-bottom: 8px;
            line-height: 1.1;
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 0;
        }
        #landing-hero-title .brand-icon {
            font-size: 64px;
            vertical-align: middle;
        }
        #landing-tagline {
            font-size: 18px;
            color: var(--color-gold-dim);
            font-weight: 700;
            margin-bottom: 14px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }
        .landing-cta {
            font-size: 16px;
            padding: 14px 36px;
            background: linear-gradient(180deg, var(--color-gold-bright) 0%, var(--color-gold) 100%);
            border: 2px solid var(--color-gold-bright);
            border-radius: var(--radius-sm);
            color: var(--color-bg);
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3);
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-family: var(--font-body);
        }
        .landing-cta:hover {
            box-shadow: 0 6px 28px rgba(201, 168, 76, 0.5);
            transform: translateY(-2px);
        }
        .landing-card {
            background: rgba(0, 0, 0, 0.5);
            padding: 18px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border-accent);
        }
        .landing-card h2 {
            color: var(--color-gold-bright);
            font-size: 17px;
            margin-bottom: 10px;
            text-align: center;
            font-family: var(--font-display);
        }
        .landing-step-num {
            background: var(--color-gold);
            color: var(--color-bg);
            font-weight: 700;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 13px;
        }
        .landing-features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            width: 100%;
            margin-bottom: 14px;
        }
        @media (max-width: 768px) {
            .landing-features-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
        .landing-feature-card {
            background: rgba(0, 0, 0, 0.4);
            padding: 12px 10px;
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
            text-align: center;
            transition: border-color 0.2s;
        }
        .landing-feature-card:hover {
            border-color: var(--color-border-accent);
        }
        .landing-feature-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .landing-feature-title {
            color: var(--color-gold);
            font-weight: 700;
            font-size: 12px;
            margin-bottom: 2px;
        }
        .landing-feature-desc {
            color: var(--color-text-dim);
            font-size: 10px;
        }
        .landing-feature-card.highlight {
            border-color: rgba(46, 204, 113, 0.3);
        }
        .landing-feature-card.highlight .landing-feature-title {
            color: var(--color-success);
        }
        .landing-stats-row {
            display: flex;
            gap: 24px;
            justify-content: center;
            margin-bottom: 16px;
        }
        .landing-stat-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--color-gold-bright);
            font-family: var(--font-mono);
        }
        .landing-stat-value.green {
            color: var(--color-success);
        }
        .landing-stat-label {
            font-size: 11px;
            color: var(--color-text-dim);
            text-transform: uppercase;
            margin-left: 4px;
        }
        .landing-stat-divider {
            color: var(--color-border);
        }
        .landing-arena-banner {
            width: 100%;
            background: rgba(201, 168, 76, 0.04);
            padding: 14px 18px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border-accent);
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 10px;
        }

        /* Player cards */
        .player-card {
            background: rgba(12, 13, 18, 0.95);
            border: 2px solid var(--color-border-accent);
            border-radius: var(--radius-lg);
            padding: 12px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .player-card.is-you {
            border-color: var(--color-gold);
        }
        .player-card.active-turn {
            box-shadow: 0 0 16px var(--color-gold-glow);
        }
        .player-card .player-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--color-border);
            object-fit: cover;
        }
        .player-card.is-you .player-avatar {
            border-color: var(--color-gold);
        }
        .player-card .placeholder-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(201, 168, 76, 0.06);
            border: 2px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        .player-card.is-you .placeholder-avatar {
            border-color: var(--color-gold);
            background: rgba(201, 168, 76, 0.1);
        }
        .turn-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--color-text-dim);
            flex-shrink: 0;
            transition: background 0.3s, box-shadow 0.3s;
        }
        .turn-indicator.active {
            background: var(--color-success);
            box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
        }

        /* Mobile game nav buttons */
        .btn-mobile {
            font-size: var(--text-base);
            padding: var(--space-sm) var(--space-lg);
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-sm);
            color: var(--color-text);
            cursor: pointer;
            transition: all 0.15s;
            font-family: var(--font-body);
        }
        .btn-mobile:hover {
            background: var(--color-surface-hover);
            border-color: var(--color-gold);
        }
        .btn-mobile:active {
            transform: scale(0.96);
        }

        /* Mobile menu panel buttons */
        .btn-mobile-menu {
            font-size: 13px;
            padding: 10px 14px;
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-sm);
            color: var(--color-text);
            cursor: pointer;
            text-align: left;
            transition: all 0.15s;
            font-family: var(--font-body);
        }
        .btn-mobile-menu:hover {
            background: var(--color-surface-hover);
        }
        .btn-mobile-menu.danger {
            background: var(--color-danger-glow);
            border-color: rgba(231, 76, 60, 0.3);
            color: var(--color-danger-light);
        }
        .btn-mobile-menu.video {
            background: var(--color-success-glow);
            border-color: rgba(46, 204, 113, 0.3);
            color: var(--color-success);
        }

        /* Mobile menu panel */
        .mobile-menu-panel {
            display: none;
            flex-direction: column;
            gap: 6px;
            background: rgba(12, 13, 18, 0.95);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-lg);
            padding: var(--space-md);
        }

        /* Form sections (visual grouping) */
        .form-section {
            margin-bottom: var(--space-xl);
            padding: var(--space-lg);
            background: rgba(255, 255, 255, 0.015);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
        }
        .form-section h2 {
            margin-bottom: var(--space-xs);
        }
        .form-section > p {
            color: var(--color-text-muted);
            font-size: 13px;
            margin-bottom: var(--space-md);
        }

        /* Quick play buttons */
        .quickplay-btn {
            background: rgba(201, 168, 76, 0.04);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-md);
            padding: 16px 14px;
            cursor: pointer;
            color: var(--color-text);
            font-family: var(--font-body);
            text-align: center;
            transition: all 0.2s;
        }
        .quickplay-btn:hover {
            border-color: var(--color-gold);
            background: rgba(201, 168, 76, 0.08);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .quickplay-btn:active {
            transform: translateY(0);
        }
        .quickplay-btn .qp-amount {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 4px;
            color: var(--color-gold-bright);
        }
        .quickplay-btn .qp-time {
            font-size: 12px;
            color: var(--color-text-muted);
        }
        .quickplay-btn.token-usdc {
            background: rgba(46, 204, 113, 0.04);
            border-color: rgba(46, 204, 113, 0.2);
        }
        .quickplay-btn.token-usdc:hover {
            border-color: var(--color-success);
            background: rgba(46, 204, 113, 0.08);
        }
        .quickplay-btn.token-avax {
            background: rgba(232, 65, 66, 0.04);
            border-color: rgba(232, 65, 66, 0.15);
        }
        .quickplay-btn.token-avax:hover {
            border-color: rgba(232, 65, 66, 0.4);
            background: rgba(232, 65, 66, 0.08);
        }

        /* Dark form inputs (game creation, bot settings) */
        .form-input-dark {
            padding: var(--space-sm) var(--space-md);
            background: rgba(0, 0, 0, 0.4);
            color: var(--color-text);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: 13px;
            font-family: var(--font-body);
            flex: 1;
            min-width: 80px;
            transition: border-color 0.2s;
        }
        .form-input-dark:focus {
            outline: none;
            border-color: var(--color-gold);
            box-shadow: 0 0 0 3px var(--color-gold-glow);
        }

        /* Modal overlays */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--color-surface-overlay);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: var(--space-xl);
        }
        .modal-overlay.visible {
            display: flex;
        }
        .modal-content {
            background: var(--color-bg);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            max-width: 600px;
            width: 100%;
            position: relative;
        }
        .modal-close {
            position: absolute;
            top: var(--space-md);
            right: var(--space-md);
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: var(--color-text);
            font-size: 20px;
            width: 36px;
            height: 36px;
            border-radius: var(--radius-full);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* TOS modal */
        .tos-heading {
            color: var(--color-gold);
            font-size: 14px;
            margin: 16px 0 8px;
        }

        /* Wallet link pills */
        .wallet-link-pill {
            padding: 5px 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            color: var(--color-text-muted);
            text-decoration: none;
            font-size: 11px;
            transition: all 0.15s;
        }
        .wallet-link-pill:hover {
            border-color: var(--color-border-accent);
            color: var(--color-gold);
        }

        /* Game banners */
        #game-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            text-align: center;
            padding: 16px 20px;
            font-family: var(--font-mono);
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            animation: bannerSlideIn 0.3s ease-out;
        }
        #game-banner.banner-victory {
            background: rgba(46, 204, 113, 0.95);
            border-bottom: 3px solid var(--color-success-dim);
            color: #fff;
            box-shadow: 0 0 30px rgba(46, 204, 113, 0.6);
        }
        #game-banner.banner-defeat {
            background: rgba(231, 76, 60, 0.95);
            border-bottom: 3px solid var(--color-danger-dim);
            color: #fff;
            box-shadow: 0 0 30px rgba(231, 76, 60, 0.6);
        }
        #game-banner.banner-draw {
            background: rgba(201, 168, 76, 0.95);
            border-bottom: 3px solid var(--color-gold-dim);
            color: var(--color-bg);
            box-shadow: 0 0 30px rgba(201, 168, 76, 0.6);
        }
        #game-banner .banner-btn {
            background: rgba(255, 255, 255, 0.15);
            color: currentColor;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 10px 24px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.2s;
        }
        #game-banner .banner-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
        }
        #game-banner .banner-btn.gold {
            background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dim) 100%);
            color: var(--color-bg);
            border-color: var(--color-gold);
        }
        #game-banner .banner-btn.gold:hover {
            box-shadow: 0 0 16px var(--color-gold-glow);
        }

        /* Board-only layout — board centered, player cards float left */
        #board-only-container > div {
            justify-content: center !important;
            position: relative;
        }
        #board-only-container > div > div:first-child {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 200px !important;
            z-index: 5;
        }

        /* Game controls wrapper */
        #game-controls-wrapper {
            display: flex;
            gap: 5px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        /* Game control buttons */
        .game-ctrl-btn {
            font-size: 10px;
            padding: 5px 10px;
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all 0.15s;
            font-family: var(--font-body);
        }
        .game-ctrl-btn:hover {
            border-color: var(--color-border-accent);
            color: var(--color-gold);
        }
        .game-ctrl-btn.danger {
            background: rgba(231, 76, 60, 0.15);
            border-color: rgba(231, 76, 60, 0.3);
            color: var(--color-danger);
        }
        .game-ctrl-btn.danger:hover {
            background: rgba(231, 76, 60, 0.25);
        }

        /* Board coordinate labels — override vendor CSS */
        .board-b72b1 .notation-322f9 {
            font-family: var(--font-mono) !important;
            font-size: 10px !important;
            color: var(--color-text-dim) !important;
            font-weight: 600 !important;
        }

        /* Legal move highlighting */
        .highlight-square,
        [class*="square-"].highlight-square,
        div.highlight-square {
            background-color: rgba(255, 215, 0, 0.3) !important;
        }

        .highlight-capture,
        [class*="square-"].highlight-capture,
        div.highlight-capture {
            background-color: rgba(255, 69, 0, 0.25) !important;
        }

        .highlight-dot,
        [class*="square-"].highlight-dot,
        div.highlight-dot {
            position: relative !important;
        }

        .highlight-dot::after,
        [class*="square-"].highlight-dot::after {
            content: '' !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 28% !important;
            height: 28% !important;
            background-color: rgba(0, 0, 0, 0.2) !important;
            border-radius: 50% !important;
            pointer-events: none !important;
        }

        /* Last move highlight */
        .last-move {
            background-color: rgba(255, 255, 255, 0.25) !important;
        }

        /* ================================================================
           TOURNAMENT COMPONENTS
           ================================================================ */

        /* Testnet banner */
        .testnet-banner {
            background: repeating-linear-gradient(
                -45deg,
                rgba(243, 156, 18, 0.04),
                rgba(243, 156, 18, 0.04) 10px,
                transparent 10px,
                transparent 20px
            );
            border: 1px solid rgba(243, 156, 18, 0.2);
            border-left: 4px solid var(--color-warning);
            border-radius: var(--radius-sm);
            padding: var(--space-md) var(--space-lg);
            margin-bottom: var(--space-lg);
            font-size: 12px;
            color: var(--color-warning);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 700;
        }

        /* Tournament champion celebration */
        .champion-banner {
            background: linear-gradient(135deg, rgba(201, 168, 76, 0.12) 0%, rgba(201, 168, 76, 0.04) 50%, rgba(201, 168, 76, 0.12) 100%);
            border: 2px solid var(--color-border-gold);
            border-radius: var(--radius-lg);
            padding: var(--space-2xl) var(--space-xl);
            text-align: center;
            margin-bottom: var(--space-lg);
            position: relative;
            overflow: hidden;
        }
        .champion-banner::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.08), transparent);
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }
        .champion-banner .champion-trophy {
            font-size: 48px;
            margin-bottom: var(--space-sm);
            display: block;
        }
        .champion-banner .champion-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-gold-bright);
            font-family: var(--font-mono);
            letter-spacing: -0.02em;
            margin-bottom: var(--space-xs);
        }
        .champion-banner .champion-address {
            font-size: 14px;
            font-family: var(--font-mono);
            color: var(--color-gold);
            margin-bottom: var(--space-lg);
        }
        .champion-banner .champion-prize {
            font-size: 32px;
            font-weight: 700;
            color: var(--color-gold-bright);
            font-family: var(--font-mono);
            margin-bottom: var(--space-sm);
        }
        .champion-banner .btn {
            position: relative;
            z-index: 1;
            animation: goldPulse 2s ease-in-out infinite;
        }

        /* Runner-up silver variant */
        .champion-banner.runner-up {
            background: linear-gradient(135deg, rgba(192, 192, 210, 0.18) 0%, rgba(160, 160, 180, 0.08) 50%, rgba(192, 192, 210, 0.18) 100%) !important;
            border: 2px solid rgba(192, 192, 210, 0.5) !important;
        }
        .champion-banner.runner-up::before {
            background: linear-gradient(90deg, transparent, rgba(192, 192, 210, 0.12), transparent) !important;
            background-size: 200% 100%;
        }
        .champion-banner.runner-up .champion-title,
        .champion-banner.runner-up .champion-prize {
            color: #c0c0d2 !important;
        }
        .champion-banner.runner-up .btn {
            background: linear-gradient(180deg, rgba(192, 192, 210, 0.3) 0%, rgba(192, 192, 210, 0.18) 100%) !important;
            border-color: rgba(192, 192, 210, 0.5) !important;
            color: #e0e0e8 !important;
            animation: none !important;
        }

        /* Tournament stat grid */
        .t-stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: var(--space-md);
            margin-top: var(--space-md);
        }
        .t-stat-item {
            padding: var(--space-md);
            background: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
        }
        .t-stat-item .t-stat-value {
            font-size: 18px;
            font-weight: 700;
            font-family: var(--font-mono);
        }
        .t-stat-item.highlight {
            border-color: var(--color-border-accent);
            background: var(--color-gold-glow);
        }
        .t-stat-item.highlight .t-stat-value {
            color: var(--color-gold-bright);
        }

        /* Tournament sub-tabs */
        .t-sub-tabs {
            display: flex;
            gap: 1px;
            margin-bottom: var(--space-lg);
            background: var(--color-surface);
            padding: 4px;
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
        }
        .t-sub-tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            background: transparent;
            border: none;
            color: var(--color-text-muted);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            transition: all 0.2s;
        }
        .t-sub-tab:hover {
            color: var(--color-gold);
            background: rgba(201, 168, 76, 0.06);
        }
        .t-sub-tab.active {
            background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dim) 100%);
            color: var(--color-bg);
            box-shadow: 0 0 12px var(--color-gold-glow);
        }
        .t-sub-content {
            display: none;
        }
        .t-sub-content.active {
            display: block;
            animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        /* Tournament cards */
        .tournament-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--space-lg);
        }
        .t-card {
            background: var(--color-surface-raised);
            border-radius: var(--radius-md);
            padding: 18px;
            border: 1px solid var(--color-border);
            transition: all 0.2s;
            cursor: pointer;
            animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .t-card:nth-child(1) { animation-delay: 0s; }
        .t-card:nth-child(2) { animation-delay: 0.05s; }
        .t-card:nth-child(3) { animation-delay: 0.1s; }
        .t-card:nth-child(4) { animation-delay: 0.15s; }
        .t-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--color-gold-glow);
            border-color: var(--color-border-gold);
        }
        .t-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--color-border);
        }
        .t-card-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--color-text-muted);
            font-family: var(--font-mono);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .t-card-info {
            font-size: 13px;
            color: var(--color-text-muted);
            margin-bottom: 6px;
        }
        .t-card-info strong {
            color: var(--color-gold);
        }

        /* Tournament section */
        .t-section {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            border: 1px solid var(--color-border);
            margin-bottom: var(--space-lg);
        }

        /* Tournament badges */
        .badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: var(--radius-sm);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .badge-registering { background: rgba(201,168,76,0.12); color: var(--color-gold); border: 1px solid rgba(201,168,76,0.25); }
        .badge-active { background: var(--color-success-glow); color: var(--color-success); border: 1px solid rgba(46,204,113,0.25); }
        .badge-completed { background: rgba(201,168,76,0.08); color: var(--color-gold-dim); border: 1px solid rgba(201,168,76,0.15); }
        .badge-cancelled { background: var(--color-danger-glow); color: var(--color-danger); border: 1px solid rgba(231,76,60,0.25); }
        .badge-private { background: var(--color-warning-glow); color: var(--color-warning); border: 1px solid rgba(243,156,18,0.25); }
        .badge-open { background: var(--color-success-glow); color: var(--color-success); border: 1px solid rgba(46,204,113,0.25); }

        /* Player progress bar */
        .player-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
        .player-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
        .player-bar-fill { height: 100%; background: var(--color-gold); border-radius: 3px; transition: width 0.3s; }
        .player-bar-label { font-size: 12px; color: var(--color-text-muted); min-width: 40px; font-family: var(--font-mono); }

        /* Bracket */
        .bracket-container { overflow-x: auto; padding: 20px 0; }
        .bracket { display: flex; gap: 48px; align-items: center; min-width: max-content; position: relative; }
        .bracket-round { display: flex; flex-direction: column; gap: 16px; }
        .bracket-round-label {
            text-align: center; font-size: 10px; color: var(--color-text-dim); text-transform: uppercase;
            letter-spacing: 0.1em; margin-bottom: 8px; font-weight: 700;
        }
        .bracket-match {
            background: var(--color-surface-raised); border: 1px solid var(--color-border);
            border-radius: var(--radius-sm); min-width: 180px; overflow: hidden; transition: all 0.2s;
            position: relative;
        }
        .bracket-match::after {
            content: '';
            position: absolute;
            right: -24px;
            top: 50%;
            width: 24px;
            height: 1px;
            background: var(--color-border-accent);
        }
        .bracket-round:last-child .bracket-match::after {
            display: none;
        }
        .bracket-match.active {
            border-color: var(--color-success);
            box-shadow: 0 0 16px var(--color-success-glow);
        }
        .bracket-match.completed { opacity: 0.65; }
        .bracket-match:hover { border-color: var(--color-border-accent); }
        .bracket-player {
            padding: 8px 12px; font-size: 12px; font-family: var(--font-mono);
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid var(--color-border);
        }
        .bracket-player:last-child { border-bottom: none; }
        .bracket-player.winner { background: var(--color-success-glow); color: var(--color-success); font-weight: 700; }
        .bracket-player.loser { color: var(--color-text-dim); }
        .bracket-player.bye { color: var(--color-text-dim); font-style: italic; }
        .bracket-player .seed { color: var(--color-text-dim); font-size: 10px; margin-right: 6px; }
        .bracket-live {
            font-size: 10px; padding: 2px 6px; background: var(--color-danger-glow); color: var(--color-danger);
            border-radius: var(--radius-sm); font-weight: 700; animation: pulse 1.5s infinite;
        }
        .bracket-action {
            text-align: center; padding: 8px 6px; cursor: pointer;
            font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
            transition: background 0.15s;
        }
        .bracket-watch {
            background: rgba(231, 76, 60, 0.15); color: #e74c3c;
            animation: pulse 2s infinite;
        }
        .bracket-watch:hover { background: rgba(231, 76, 60, 0.25); }
        .bracket-play {
            background: var(--color-gold-glow); color: var(--color-gold-bright);
        }
        .bracket-play:hover { background: rgba(201, 168, 76, 0.2); }

        /* ================================================================
           RESPONSIVE BREAKPOINTS
           ================================================================ */

        /* ---------- TABLET (768px - 1024px) ---------- */
        @media (max-width: 1024px) {
            .container {
                padding: 10px !important;
                padding-top: 55px !important;
            }

            #game-area {
                padding: 15px !important;
            }

            /* Shrink player cards */
            #board-only-container > div > div:first-child,
            #video-chess-layout > div > div:first-child {
                width: 160px !important;
            }

            /* Video layout: stack vertically on tablets */
            #video-chess-layout > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 8px !important;
            }
            #video-chess-layout > div > div:first-child {
                width: 100% !important;
                flex-direction: row !important;
            }
            #video-chess-layout > div > div:nth-child(2) {
                width: 100% !important;
                max-width: 500px !important;
            }
            #video-chess-layout > div > div:last-child {
                width: 100% !important;
                max-width: 500px !important;
                flex-direction: row !important;
            }
            #video-chess-layout > div > div:last-child > div:first-child {
                width: 100% !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            #remote-video, #local-video {
                height: 100px !important;
            }
            #opponent-video-container,
            #video-chess-layout > div > div:last-child > div:first-child > div:nth-child(2) {
                flex: 1 !important;
                min-width: 45% !important;
            }
        }

        /* ---------- MOBILE (< 768px) ---------- */
        @media (max-width: 768px) {
            /* ---- Global ---- */
            #discord-link { display: none !important; }
            .container {
                padding: 5px !important;
                padding-top: 50px !important;
                padding-bottom: 70px !important;
                max-width: 100vw !important;
            }

            /* Show mobile bottom nav, hide desktop tabs */
            #mobile-bottom-nav { display: block !important; }
            .tabs { display: none !important; }

            /* Play sub-nav visibility controlled by JS (switchTab shows/hides it) */

            /* Video chat option visible on mobile (PiP mode) */

            /* Smaller logo */
            #site-branding {
                font-size: 18px !important;
                left: 10px !important;
            }
            #site-branding .brand-icon-img {
                width: 24px !important;
                height: 24px !important;
            }

            /* Compact wallet button */
            #wallet-area {
                right: 10px !important;
            }
            #profile-button {
                padding: 4px 8px !important;
                font-size: 10px !important;
            }
            #profile-dropdown {
                min-width: 295px !important;
            }

            #game-area {
                padding: 8px !important;
                border-width: 2px !important;
                border-top-width: 3px !important;
                overflow-y: auto !important;
                max-height: 100vh !important;
            }

            /* ---- Landing page ---- */
            #landing-page {
                padding: 70px 14px 20px !important;
                justify-content: flex-start !important;
                min-height: unset !important;
            }
            #testnet-banner {
                padding: 14px 16px !important;
                margin-bottom: 16px !important;
            }
            #landing-hero-title {
                font-size: 34px !important;
            }
            #hero-crown {
                width: 90px !important;
                height: 90px !important;
            }
            #landing-tagline {
                font-size: 15px !important;
            }
            #landing-content-grid {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
            #landing-features-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
            }
            #landing-onramp-banner {
                flex-direction: column !important;
                gap: 12px !important;
                padding: 16px !important;
                text-align: center !important;
            }
            #landing-onramp-banner > div:last-child {
                align-self: center !important;
            }

            /* ---- Game header ---- */
            .game-header {
                flex-direction: column !important;
                gap: 4px !important;
                margin-bottom: 8px !important;
                padding-bottom: 6px !important;
            }
            .game-header h2 {
                font-size: 13px !important;
            }
            #game-header-pot {
                display: block !important;
                margin-left: 0 !important;
                margin-top: 4px;
            }

            /* ---- SOLO MODE: Stack vertically ---- */
            #board-only-container > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 4px !important;
            }

            /* Dissolve cards wrapper so each card orders independently vs the board */
            #board-only-container > div > div:first-child {
                display: contents !important;
            }

            /* Opponent card: order 0 (above board) */
            #opponent-player-card {
                flex: none !important;
                padding: 6px 10px !important;
                order: 0;
                width: 100% !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
            }

            /* Your card: pulled below board via high order */
            #my-player-card {
                flex: none !important;
                padding: 6px 10px !important;
                order: 3;
                width: 100% !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 8px !important;
            }

            /* Player info row (avatar + name): shrink to fit */
            #opponent-player-card > div:first-child,
            #my-player-card > div:first-child {
                margin-bottom: 0px !important;
                flex: 1 !important;
                min-width: 0 !important;
            }

            /* Avatars: small inline */
            #opponent-player-card > div:first-child img,
            #my-player-card > div:first-child img,
            #opponent-placeholder-avatar,
            #my-placeholder-avatar {
                width: 28px !important;
                height: 28px !important;
                font-size: 18px !important;
            }
            #opponent-player-card > div:first-child > div:first-child,
            #my-player-card > div:first-child > div:first-child {
                width: 28px !important;
                height: 28px !important;
            }
            /* Avatar container */
            #opponent-player-card div[style*="width: 48px"],
            #my-player-card div[style*="width: 48px"] {
                width: 28px !important;
                height: 28px !important;
            }

            /* Player names: compact */
            #opponent-player-name,
            #my-player-name {
                font-size: 13px !important;
            }
            #opponent-arena-handle,
            #my-arena-handle {
                font-size: 10px !important;
            }

            /* Turn indicator smaller */
            #opponent-turn-indicator,
            #my-turn-indicator {
                width: 8px !important;
                height: 8px !important;
            }

            /* Clocks: compact inline, right-aligned */
            #opponent-clock-solo,
            #my-clock-solo {
                padding: 4px 10px !important;
                border-radius: 4px !important;
                flex-shrink: 0 !important;
                min-width: 80px !important;
            }
            #opponent-clock-solo div[style*="font-size: 28px"],
            #my-clock-solo div[style*="font-size: 28px"],
            #opponent-time-display-solo,
            #my-time-display-solo {
                font-size: 18px !important;
            }
            #opponent-clock-label-solo,
            #my-clock-label-solo {
                display: none !important;
            }

            /* Captured pieces: inline, small */
            #opponent-captured, #my-captured {
                font-size: 12px !important;
                min-height: 16px !important;
                padding-top: 0px !important;
                flex-shrink: 0 !important;
            }

            /* Spacer hidden */
            #board-only-container > div > div:first-child > div:nth-child(2) {
                display: none !important;
            }

            /* Board fills width, sits between cards */
            #board-solo {
                width: 100% !important;
                max-width: calc(100vw - 16px) !important;
                order: 1;
            }

            /* Game controls: hide desktop row, show mobile nav */
            #game-controls-wrapper {
                display: none !important;
            }
            #mobile-game-nav {
                display: flex !important;
            }
            .btn-label {
                display: none !important;
            }

            /* Move history: full width */
            .move-history {
                max-height: 80px !important;
                font-size: 13px !important;
            }
            #move-list {
                font-size: 13px !important;
            }

            /* Game action buttons: full width */
            #claim-victory-btn,
            #claim-time-victory-btn,
            #claim-timeout-btn,
            #claim-expired-btn {
                width: 100% !important;
                font-size: 14px !important;
                padding: 10px !important;
            }

            /* Video layout board */
            #board {
                width: 100% !important;
                max-width: calc(100vw - 16px) !important;
            }

            /* Force inline width override on chessboard.js rendered board */
            #board-solo > div,
            #board > div {
                width: 100% !important;
            }

            /* Video layout: stack vertically on mobile */
            #video-chess-layout > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 8px !important;
            }

            /* Player cards sidebar: full width row on mobile */
            #video-chess-layout > div > div:first-child {
                width: 100% !important;
                flex-direction: row !important;
                gap: 8px !important;
            }

            #opponent-player-card-video,
            #my-player-card-video {
                flex: 1 !important;
                padding: 8px !important;
                width: auto !important;
            }

            /* Chat panel below board */
            #game-chat-panel-solo {
                width: 100% !important;
                order: 2;
            }

            /* ---- VIDEO MODE: Stack vertically ---- */
            #video-chess-layout > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 8px !important;
            }

            /* Player cards row */
            #video-chess-layout > div > div:first-child {
                width: 100% !important;
                flex-direction: row !important;
                order: 0;
            }

            /* Board fills width */
            #video-chess-layout > div > div:nth-child(2) {
                flex: none !important;
                width: 100% !important;
                max-width: calc(100vw - 26px) !important;
                order: 1;
            }
            #board {
                width: 100% !important;
            }

            /* Videos below board — side by side */
            #video-chess-layout > div > div:last-child {
                width: 100% !important;
                order: 2;
                flex-direction: row !important;
            }
            #video-chess-layout > div > div:last-child > div:first-child {
                width: 100% !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }

            /* Video containers side by side */
            #opponent-video-container,
            #video-chess-layout > div > div:last-child > div:first-child > div:nth-child(2) {
                flex: 1 !important;
                min-width: 45% !important;
            }
            #remote-video,
            #local-video {
                height: 120px !important;
            }

            /* Video controls: horizontal row */
            #video-chess-layout > div > div:last-child > div:first-child > div:last-child {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                width: 100% !important;
            }
            #video-chess-layout > div > div:last-child > div:first-child > div:last-child button {
                flex: 1 !important;
                min-width: 45% !important;
            }

            /* ---- Tabs: scrollable ---- */
            .tabs {
                overflow-x: auto !important;
                flex-wrap: nowrap !important;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 4px;
                gap: 4px !important;
            }
            .tabs .tab,
            .tabs .tab-dropdown .tab {
                font-size: 11px !important;
                padding: 8px 10px !important;
                white-space: nowrap;
            }

            /* ---- Move history: horizontal scroll ---- */
            #move-list {
                max-height: 100px !important;
                overflow-y: auto !important;
            }

            /* ---- Lobby game cards: stack ---- */
            .game-card {
                flex-direction: column !important;
            }

            /* ---- Banners: fit mobile ---- */
            #game-banner {
                font-size: 16px !important;
                padding: 12px 10px !important;
                letter-spacing: 1px !important;
            }
            #game-banner button {
                font-size: 12px !important;
                padding: 8px 14px !important;
            }

            /* ---- Fixed position elements ---- */
            #rematch-prompt {
                left: 10px !important;
                right: 10px !important;
                transform: none !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 8px !important;
            }

            /* ---- Chessboard container ---- */
            .chessboard-container {
                max-width: 100% !important;
                padding: 8px !important;
            }

            /* ---- Stats grid ---- */
            .stats-grid {
                grid-template-columns: 1fr !important;
            }

            /* ---- Mobile touch targets (min 44px) ---- */
            input, select, .form-input-dark {
                font-size: 16px !important; /* prevents iOS zoom on focus */
                padding: 12px 14px !important;
                min-height: 44px !important;
            }

            /* ---- Mobile buttons ---- */
            .btn {
                min-height: 44px !important;
                padding: 12px 24px !important;
            }
            .btn-mobile {
                min-height: 44px !important;
                padding: 10px 16px !important;
            }
            .btn-mobile-menu {
                min-height: 44px !important;
                padding: 12px 16px !important;
            }
            .game-ctrl-btn {
                min-height: 36px !important;
                padding: 8px 12px !important;
            }

            /* ---- Modal mobile ---- */
            .modal-overlay {
                padding: var(--space-md) !important;
            }
            .modal-content {
                max-width: 100% !important;
                padding: var(--space-lg) !important;
                border-radius: var(--radius-md) !important;
            }
            .modal-close {
                width: 44px !important;
                height: 44px !important;
                font-size: 24px !important;
            }

            /* ---- Profile button mobile ---- */
            #profile-button {
                padding: 6px 10px !important;
                font-size: 11px !important;
                min-height: 36px !important;
            }

            /* ---- Landing page mobile ---- */
            #landing-content-grid {
                grid-template-columns: 1fr !important;
            }
            .landing-cta {
                width: 100% !important;
                padding: 16px 24px !important;
                font-size: 15px !important;
                min-height: 48px !important;
            }
            .landing-feature-card {
                padding: 14px 12px !important;
            }
            .landing-feature-icon {
                font-size: 28px !important;
            }
            .landing-feature-title {
                font-size: 13px !important;
            }
            .landing-arena-banner {
                flex-direction: column !important;
                text-align: center !important;
                gap: 12px !important;
            }

            /* ---- Player name truncation ---- */
            #opponent-player-name, #my-player-name {
                white-space: nowrap !important;
                text-overflow: ellipsis !important;
                overflow: hidden !important;
                max-width: 120px !important;
            }

            /* ---- Clock no-wrap ---- */
            #opponent-clock-solo, #my-clock-solo {
                white-space: nowrap !important;
            }

            /* ---- Game area overflow ---- */
            #game-area {
                overflow-x: hidden !important;
            }

            /* ---- Banner mobile ---- */
            #game-banner {
                font-size: 14px !important;
                padding: 12px 10px !important;
                letter-spacing: 0.05em !important;
            }
            #game-banner .banner-btn {
                padding: 8px 16px !important;
                font-size: 12px !important;
                min-height: 40px !important;
            }

            /* ---- Mobile bottom nav ---- */
            #mobile-bottom-nav {
                background: rgba(12, 13, 18, 0.97) !important;
                border-top: 1px solid var(--color-border-accent) !important;
                padding: 4px 0 env(safe-area-inset-bottom, 4px) !important;
            }
            .mobile-nav-btn {
                background: none !important;
                border: none !important;
                color: var(--color-text-dim) !important;
                cursor: pointer;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 3px !important;
                padding: 8px 10px !important;
                font-family: var(--font-body) !important;
                font-size: 10px !important;
                transition: color 0.15s !important;
                min-height: 44px !important;
                min-width: 44px !important;
            }
            .mobile-nav-btn:active {
                color: var(--color-gold) !important;
            }
            .mobile-nav-btn .nav-icon {
                font-size: 20px !important;
            }

            /* ---- Mobile PiP video ---- */
            #mobile-video-pip {
                position: fixed !important;
                z-index: 9997 !important;
                background: rgba(0, 0, 0, 0.85) !important;
                border-radius: var(--radius-lg) !important;
                border: 2px solid var(--color-gold-dim) !important;
                overflow: hidden !important;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
            }
            .pip-controls button {
                min-height: 36px !important;
                min-width: 36px !important;
            }
            .pip-resize-handle {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 20px;
                height: 20px;
                cursor: nwse-resize;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                color: var(--color-gold-dim);
                background: rgba(0, 0, 0, 0.5);
                border-radius: 0 6px 0 0;
                z-index: 10;
                user-select: none;
                -webkit-user-select: none;
            }
            .pip-resize-handle:hover {
                color: var(--color-gold);
                background: rgba(0, 0, 0, 0.7);
            }
            .pip-collapsed .pip-resize-handle {
                display: none !important;
            }
        }

        /* ---------- SMALL MOBILE (< 480px) ---------- */
        @media (max-width: 480px) {
            /* Hide branding text, keep icon */
            #site-branding span {
                display: none !important;
            }
            #site-branding .brand-icon-img {
                width: 28px !important;
                height: 28px !important;
            }

            /* Even more compact game area */
            #game-area {
                padding: 5px !important;
            }

            /* Board maximum size */
            #board-solo,
            #board,
            #video-chess-layout > div > div:nth-child(2) {
                max-width: calc(100vw - 10px) !important;
                width: 100% !important;
            }

            /* Player cards: name only, hide address */
            #opponent-player-address,
            #my-player-address {
                display: none !important;
            }

            /* Videos stacked on very small screens */
            #video-chess-layout > div > div:last-child > div:first-child {
                flex-direction: column !important;
            }
            #opponent-video-container,
            #video-chess-layout > div > div:last-child > div:first-child > div:nth-child(2) {
                min-width: 100% !important;
            }
            #remote-video,
            #local-video {
                height: 80px !important;
            }

            /* Smaller landing stats */
            .landing-stats-row {
                gap: 12px !important;
                flex-wrap: wrap !important;
            }
            .landing-stat-value {
                font-size: 18px !important;
            }
            .landing-stat-label {
                font-size: 9px !important;
            }

            /* Features 2-col on small screens */
            #landing-features-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            /* Player name narrower */
            #opponent-player-name, #my-player-name {
                max-width: 80px !important;
                font-size: 12px !important;
            }
        }

        /* ================================================================
           ARENA IFRAME / COMPACT MODE — 608×309 target viewport
           Applied via body.arena-mode class (set by detectArenaMode)

           Height budget (309px):
             Player HUD bar:     32px
             Board (square):    ~220px
             Bottom nav:         45px
             Margins/gaps:       12px
           ================================================================ */

        body.arena-mode {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        body.arena-mode .container {
            max-width: 100% !important;
            padding: 2px 4px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* ---- Hide chrome that eats vertical space ---- */
        body.arena-mode #site-branding,
        body.arena-mode #discord-link,
        body.arena-mode #twitter-link,
        body.arena-mode .tabs,
        body.arena-mode .game-header,
        body.arena-mode #enable-video-prompt,
        body.arena-mode #h2h-badge,
        body.arena-mode #feedback-btn,
        body.arena-mode #testnet-banner { display: none !important; }

        /* Below-fold content: scrollable, compact */
        body.arena-mode #game-controls-wrapper { display: none !important; }
        body.arena-mode #mobile-game-nav { display: flex !important; }
        body.arena-mode .move-history {
            max-height: 120px !important;
            margin: 4px 0 !important;
            padding-bottom: 50px !important;
        }

        /* Wallet stays top-right but compact */
        body.arena-mode #wallet-area {
            right: 4px !important;
            top: 2px !important;
            position: absolute !important;
            z-index: 100 !important;
        }

        /* Hide wallet during active game — overlaps opponent clock */
        body.arena-mode.in-game #wallet-area {
            display: none !important;
        }

        /* ---- Game area: zero all spacing ---- */
        body.arena-mode .tab-content { padding-top: 0 !important; }
        body.arena-mode #game-area {
            padding: 0 2px !important;
            margin-top: 0 !important;
        }
        body.arena-mode #board-only-container {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* ---- Board: height-constrained square ----
           chessboard.js sizes from container width, so we cap the width
           to what the available height allows (keeps it square, no clip) */
        body.arena-mode #board-solo,
        body.arena-mode #board {
            --arena-board-size: min(calc(100vh - 135px), calc(100vw - 10px));
            width: var(--arena-board-size) !important;
            max-width: var(--arena-board-size) !important;
            aspect-ratio: 1 / 1 !important;
            margin: 0 auto !important;
        }

        /* ---- Layout: stack vertically, center everything ---- */
        body.arena-mode #board-only-container > div {
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px !important;
        }

        /* ---- Player HUD: opponent + clock | board | you + clock ----
           Cards become thin horizontal strips flanking the board top/bottom */
        body.arena-mode #board-only-container > div > div:first-child {
            display: contents !important;
        }

        body.arena-mode .player-card {
            width: var(--arena-board-size, 100%) !important;
            max-width: 100% !important;
            padding: 3px 8px !important;
            margin: 0 !important;
            border-width: 1px !important;
            border-radius: 3px !important;
            background: rgba(18, 20, 26, 0.9) !important;
            border-color: var(--color-border-accent) !important;
        }

        body.arena-mode #opponent-player-card {
            order: -1 !important;
        }

        body.arena-mode #my-player-card {
            order: 10 !important;
        }

        body.arena-mode #opponent-player-card,
        body.arena-mode #my-player-card {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 0 !important;
        }

        /* Inner content wrapper — flatten to single row */
        body.arena-mode .player-card > div:first-child {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 6px !important;
            margin-bottom: 0 !important;
            flex: 1 !important;
            min-width: 0 !important;
        }

        /* Hide avatars — too bulky for HUD strip */
        body.arena-mode .player-card .placeholder-avatar,
        body.arena-mode .player-card div[style*="width: 48px"],
        body.arena-mode .player-card img[id$="-arena-avatar"] {
            display: none !important;
        }

        /* Turn indicator: tiny dot */
        body.arena-mode .turn-indicator {
            width: 6px !important;
            height: 6px !important;
            min-width: 6px !important;
            flex-shrink: 0 !important;
        }

        /* Player name: compact */
        body.arena-mode .player-card div[id$="-player-name"],
        body.arena-mode .player-card div[id$="-player-name-video"] {
            font-size: 11px !important;
            line-height: 1.2 !important;
        }

        /* Address: tighter */
        body.arena-mode .player-card div[id$="-player-address"],
        body.arena-mode .player-card div[id$="-player-address-video"] {
            font-size: 8px !important;
            line-height: 1 !important;
        }

        /* Arena handle */
        body.arena-mode .player-card div[id$="-arena-handle"] {
            font-size: 9px !important;
        }

        /* Clock: inline, right-aligned, punchy mono readout */
        body.arena-mode .player-card .chess-clock {
            padding: 1px 6px !important;
            border-radius: 3px !important;
            margin: 0 !important;
            margin-left: auto !important;
            flex-shrink: 0 !important;
            background: rgba(0, 0, 0, 0.6) !important;
            border: 1px solid var(--color-border-accent) !important;
        }

        body.arena-mode .player-card .chess-clock div[id$="-clock-label"],
        body.arena-mode .player-card .chess-clock div[id$="-clock-label-solo"] {
            display: none !important;
        }

        body.arena-mode .player-card .chess-clock div[id$="-time-display"],
        body.arena-mode .player-card .chess-clock div[id$="-time-display-solo"] {
            font-size: 14px !important;
            line-height: 1.3 !important;
        }

        /* Hide captured pieces — no room */
        body.arena-mode .player-card div[id$="-captured"],
        body.arena-mode .player-card div[id$="-captured-video"] {
            display: none !important;
        }

        /* ---- Video layout: stack vertically when video is on ---- */
        body.arena-mode #video-chess-layout > div {
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px !important;
        }
        body.arena-mode #video-chess-layout > div > div:first-child {
            width: 100% !important;
            flex-direction: row !important;
        }
        body.arena-mode #video-chess-layout > div > div:nth-child(2) {
            width: 100% !important;
            max-width: calc(100vw - 10px) !important;
        }
        body.arena-mode #video-chess-layout > div > div:last-child {
            width: 100% !important;
            flex-direction: row !important;
        }
        body.arena-mode #video-chess-layout > div > div:last-child > div:first-child {
            width: 100% !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            gap: 4px !important;
        }
        body.arena-mode #remote-video,
        body.arena-mode #local-video {
            height: 60px !important;
        }
        body.arena-mode #opponent-video-container,
        body.arena-mode #video-chess-layout > div > div:last-child > div:first-child > div:nth-child(2) {
            flex: 1 !important;
            min-width: 45% !important;
        }

        /* ---- Bottom nav: show compact, lower profile ---- */
        body.arena-mode #mobile-bottom-nav {
            display: block !important;
            padding: 2px 0 !important;
        }
        body.arena-mode .mobile-nav-btn {
            gap: 1px !important;
            font-size: 9px !important;
        }
        body.arena-mode .mobile-nav-btn .nav-icon {
            font-size: 14px !important;
        }

        /* ---- Play sub-nav: compact in arena, visibility controlled by JS ---- */
        body.arena-mode #play-sub-nav {
            margin-bottom: 6px !important;
            margin-right: 120px !important;
        }
        body.arena-mode #play-sub-nav .t-sub-tabs {
            font-size: 11px !important;
        }

        /* ---- Mobile game nav: compact row for resign/nav ---- */
        body.arena-mode #mobile-game-nav {
            display: flex !important;
            margin-bottom: 0 !important;
        }
        body.arena-mode .btn-mobile {
            font-size: 11px !important;
            padding: 3px 8px !important;
            min-height: unset !important;
        }

        /* ---- Tournament tab compact ---- */
        body.arena-mode .t-sub-tabs { font-size: 11px !important; }
        body.arena-mode .tournament-grid { grid-template-columns: 1fr !important; }

        /* ================================================================
           ARENA: PAGE-SPECIFIC OPTIMIZATIONS (608×309 target)
           ================================================================ */

        /* ---- Landing page: compact hero, single-column cards ---- */
        body.arena-mode #landing-page {
            min-height: auto !important;
            padding: 0 4px !important;
        }
        body.arena-mode .landing-hero {
            padding: 0 !important;
            margin-bottom: 8px !important;
        }
        body.arena-mode .landing-hero > div {
            padding: 12px 10px 10px !important;
        }
        body.arena-mode #hero-crown {
            width: 60px !important;
            height: 60px !important;
        }
        body.arena-mode #landing-hero-title {
            font-size: 22px !important;
            margin-bottom: 2px !important;
        }
        body.arena-mode #landing-tagline {
            font-size: 12px !important;
            margin-bottom: 6px !important;
        }
        body.arena-mode .landing-hero p {
            font-size: 11px !important;
            margin-bottom: 10px !important;
            line-height: 1.4 !important;
        }
        body.arena-mode .landing-cta {
            font-size: 12px !important;
            padding: 8px 16px !important;
        }
        body.arena-mode .landing-stats-row {
            font-size: 11px !important;
            padding: 6px !important;
            margin-bottom: 8px !important;
        }
        body.arena-mode #landing-content-grid {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
        }
        body.arena-mode .landing-card {
            padding: 10px !important;
        }
        body.arena-mode .landing-card h2 {
            font-size: 14px !important;
            margin-bottom: 6px !important;
        }
        body.arena-mode .landing-card p {
            font-size: 11px !important;
            line-height: 1.4 !important;
        }

        /* ---- Create tab: compact forms ---- */
        body.arena-mode .form-section {
            padding: 8px !important;
            margin-bottom: 8px !important;
        }
        body.arena-mode .form-section h2 {
            font-size: 13px !important;
            margin-bottom: 4px !important;
        }
        body.arena-mode .form-section p {
            font-size: 11px !important;
            margin-bottom: 8px !important;
        }
        body.arena-mode .form-input-dark,
        body.arena-mode select.form-input-dark {
            font-size: 12px !important;
            padding: 6px 8px !important;
        }
        body.arena-mode .quickplay-btn {
            padding: 8px 4px !important;
        }
        body.arena-mode .qp-amount {
            font-size: 13px !important;
        }
        body.arena-mode .qp-time {
            font-size: 10px !important;
        }

        /* ---- Browse/Lobbies + My Games: compact cards ---- */
        body.arena-mode .game-card {
            padding: 8px 10px !important;
            margin-bottom: 4px !important;
        }
        body.arena-mode .game-card h3 {
            font-size: 12px !important;
            margin-bottom: 2px !important;
        }
        body.arena-mode .game-card p,
        body.arena-mode .game-card span,
        body.arena-mode .game-card div {
            font-size: 11px !important;
        }
        body.arena-mode .game-list {
            gap: 4px !important;
        }
        /* Lobby toolbar compact */
        body.arena-mode #browse-tab select,
        body.arena-mode #mygames-tab select {
            font-size: 11px !important;
            padding: 4px 6px !important;
        }

        /* ---- Live/Watch tab ---- */
        body.arena-mode #live-tab .game-card {
            padding: 6px 8px !important;
        }

        /* ---- Leaderboard ---- */
        body.arena-mode #leaderboard-tab {
            font-size: 11px !important;
        }
        body.arena-mode #leaderboard-tab h2 {
            font-size: 14px !important;
        }
        body.arena-mode #leaderboard-tab .btn {
            font-size: 10px !important;
            padding: 4px 8px !important;
        }

        /* ---- Profile tab ---- */
        body.arena-mode #profile-tab {
            font-size: 11px !important;
        }
        body.arena-mode #profile-tab h2,
        body.arena-mode #profile-tab h3 {
            font-size: 13px !important;
        }

        /* ---- FAQ tab ---- */
        body.arena-mode #faq-tab {
            font-size: 12px !important;
        }
        body.arena-mode #faq-tab h2,
        body.arena-mode #faq-tab h3 {
            font-size: 13px !important;
        }

        /* ---- Settings tab ---- */
        body.arena-mode #settings-tab {
            font-size: 12px !important;
        }
        body.arena-mode #settings-tab h2 {
            font-size: 14px !important;
        }

        /* ---- Video game layout: board + videos fit 309px ----
           With video on, height budget is tighter:
             Player HUD:     28px
             Videos (side):   60px
             Board:          ~150px
             Player HUD:     28px
             Bottom nav:      35px
           Total:           ~301px — fits with 8px margin */
        body.arena-mode #video-chess-layout {
            margin-bottom: 0 !important;
        }
        body.arena-mode #video-chess-layout > div > div:first-child {
            gap: 4px !important;
        }
        /* Video player cards: same compact HUD as board-only */
        body.arena-mode #opponent-player-card-video,
        body.arena-mode #my-player-card-video {
            padding: 3px 8px !important;
            border-width: 1px !important;
            border-radius: 3px !important;
            background: rgba(18, 20, 26, 0.9) !important;
        }
        body.arena-mode #opponent-player-card-video > div:first-child,
        body.arena-mode #my-player-card-video > div:first-child {
            margin-bottom: 0 !important;
            gap: 6px !important;
        }
        /* Hide video card avatars */
        body.arena-mode #opponent-player-card-video div[style*="width: 48px"],
        body.arena-mode #my-player-card-video div[style*="width: 48px"] {
            display: none !important;
        }
        body.arena-mode #opponent-player-name-video,
        body.arena-mode #my-player-name-video {
            font-size: 11px !important;
        }
        body.arena-mode #opponent-player-address-video,
        body.arena-mode #my-player-address-video {
            font-size: 8px !important;
        }
        /* Video card clocks */
        body.arena-mode #opponent-clock,
        body.arena-mode #my-clock {
            padding: 1px 6px !important;
            border-radius: 3px !important;
        }
        body.arena-mode #opponent-clock div[style*="font-size: 10px"],
        body.arena-mode #my-clock div[style*="font-size: 10px"] {
            display: none !important;
        }
        body.arena-mode #opponent-time-display,
        body.arena-mode #my-time-display {
            font-size: 14px !important;
        }
        body.arena-mode #opponent-captured-video,
        body.arena-mode #my-captured-video {
            display: none !important;
        }
        /* Video controls: single compact row */
        body.arena-mode #toggle-mic-btn,
        body.arena-mode #toggle-opponent-video-btn,
        body.arena-mode #mute-opponent-btn {
            font-size: 9px !important;
            padding: 3px 6px !important;
        }
        /* Video labels compact */
        body.arena-mode #remote-video-label,
        body.arena-mode #local-video-label {
            font-size: 10px !important;
            margin-top: 1px !important;
        }

        /* ---- Victory celebration: fit iframe ---- */
        body.arena-mode #victory-celebration > div {
            padding: 16px !important;
            max-width: 100% !important;
        }
        body.arena-mode #victory-celebration div[style*="font-size: 120px"] {
            font-size: 48px !important;
            margin-bottom: 8px !important;
        }
        body.arena-mode #victory-celebration h1 {
            font-size: 28px !important;
            margin-bottom: 6px !important;
        }

        /* ---- Modals: fit within 309px height ---- */
        body.arena-mode .modal-overlay > div {
            padding: 16px !important;
            max-height: calc(100vh - 20px) !important;
            overflow-y: auto !important;
        }

        /* ---- Game banners: compact ---- */
        body.arena-mode #game-banner {
            font-size: 12px !important;
            padding: 6px 10px !important;
        }

        /* ---- Draw offer banner: reposition for 309px iframe ---- */
        body.arena-mode #mobile-draw-offer {
            bottom: auto !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            max-width: 280px !important;
            padding: 10px 16px !important;
            font-size: 13px !important;
        }

        /* ---- Match-ready banner: compact for iframe ---- */
        body.arena-mode #match-ready-banner {
            padding: 6px 10px !important;
            font-size: 12px !important;
        }

        /* ---- Countdown lobby: fit 309px viewport ---- */
        body.arena-mode #countdown-timer {
            font-size: 40px !important;
        }
        body.arena-mode #countdown-lobby .dropdown-section-label {
            font-size: 11px !important;
            margin-bottom: 4px !important;
        }
        body.arena-mode #countdown-matchup {
            padding: 8px !important;
            margin-top: 10px !important;
        }
        body.arena-mode #countdown-matchup div[style*="font-size: 20px"] {
            font-size: 14px !important;
        }

        /* ---- General text tightening ---- */
        body.arena-mode .tab-content {
            font-size: 12px !important;
        }
        body.arena-mode .tab-content h2 {
            font-size: 14px !important;
        }
        body.arena-mode .btn {
            font-size: 12px !important;
            padding: 6px 12px !important;
        }

        /* ---- PiP dual-feed: both videos stacked (opponent top, you bottom) ---- */
        #mobile-video-pip.pip-dual .pip-self-wrap {
            border-top: 1px solid var(--color-border) !important;
        }
        #mobile-video-pip.pip-dual .pip-self-wrap video {
            width: 100%;
            display: block;
            object-fit: cover;
            opacity: 0.85;
        }
        /* Hide swap button in dual mode — both feeds always visible */
        #mobile-video-pip.pip-dual #pip-btn-swap {
            display: none !important;
        }
        /* Hide self-feed when PiP is collapsed */
        #mobile-video-pip.pip-collapsed .pip-self-wrap {
            display: none !important;
        }

        /* ---- PiP video overlay: compact for small Arena iframe (309px) ---- */
        body.arena-mode #mobile-video-pip {
            width: 100px !important;
            top: 36px !important;
            right: 4px !important;
            left: auto !important;
            bottom: auto !important;
            height: auto !important;
            overflow: hidden !important;
            border-radius: 4px !important;
            border-width: 1px !important;
        }
        body.arena-mode #mobile-video-pip video {
            height: 70px !important;
        }
        /* Arena PiP: show only opponent video, hide everything else */
        body.arena-mode .pip-self-wrap {
            display: none !important;
        }
        body.arena-mode .pip-collapsed-icon {
            display: none !important;
        }
        body.arena-mode .pip-resize-handle {
            display: none !important;
        }
        body.arena-mode .pip-video-wrap {
            padding: 0 !important;
            margin: 0 !important;
            line-height: 0 !important;
        }
        body.arena-mode .pip-video-wrap video {
            display: block !important;
            width: 100% !important;
            object-fit: cover !important;
        }
        body.arena-mode .pip-controls {
            padding: 2px !important;
            gap: 2px !important;
            display: none !important;
        }
        body.arena-mode #mobile-video-pip:hover .pip-controls {
            display: flex !important;
        }
        body.arena-mode .pip-controls button {
            min-height: 24px !important;
            min-width: 24px !important;
            font-size: 11px !important;
            padding: 2px !important;
        }
        body.arena-mode .pip-label {
            display: none !important;
        }
        body.arena-mode .pip-collapsed-icon {
            font-size: 14px !important;
            padding: 4px !important;
        }
        /* When PiP collapsed, make it tiny */
        body.arena-mode #mobile-video-pip.pip-collapsed {
            width: 32px !important;
            height: 32px !important;
        }

        /* ---- PiP video: larger when Arena app store gives more room ---- */
        @media (min-height: 500px) {
            body.arena-mode #mobile-video-pip {
                width: 160px !important;
                top: 6px !important;
                right: 6px !important;
                bottom: auto !important;
                height: auto !important;
                overflow: hidden !important;
                border-radius: 6px !important;
                border-width: 2px !important;
            }
            body.arena-mode #mobile-video-pip video {
                height: 120px !important;
            }
            body.arena-mode .pip-self-wrap {
                display: none !important;
            }
            body.arena-mode .pip-controls button {
                min-height: 28px !important;
                min-width: 28px !important;
                font-size: 12px !important;
            }
            body.arena-mode .pip-label {
                display: none !important;
            }
            body.arena-mode #mobile-video-pip.pip-collapsed {
                width: 40px !important;
                height: 40px !important;
            }
        }

        /* ---- Video layout: force board-only in Arena (PiP handles video) ---- */
        body.arena-mode #video-chess-layout {
            display: none !important;
        }

        /* ---- Match-ready pulsing dot on tournament nav tab ---- */
        .match-ready-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--color-gold-bright);
            border-radius: 50%;
            margin-left: 6px;
            vertical-align: middle;
            animation: matchReadyPulse 1.2s ease-in-out infinite;
            box-shadow: 0 0 6px var(--color-gold);
        }

        @keyframes matchReadyPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.7); }
        }

        @keyframes broadcastPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }