/* HEADER */
        header {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 28px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(5,13,24,0.98) 0%, rgba(5,13,24,0.8) 100%);
            backdrop-filter: blur(12px);
        }

        .logo {
            font-family: 'Cinzel', serif;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: 6px;
            background: linear-gradient(135deg, var(--glow-gold), var(--glow-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
        }

            .logo span {
                font-size: 11px;
                display: block;
                letter-spacing: 10px;
                font-weight: 400;
                margin-top: -3px;
                opacity: 0.7;
            }

        .header-stats {
            display: flex;
            gap: 24px;
            align-items: center;
        }

        .stat-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(74,158,255,0.08);
            border: 1px solid rgba(74,158,255,0.2);
            border-radius: 20px;
            padding: 6px 14px;
            font-family: 'Share Tech Mono', monospace;
            font-size: 12px;
        }

        .header-stats-mobile {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

            .header-stats-mobile .stat-pill {
                width: 100%;
                height: fit-content;
                padding: 0px 14px;
            }

                .header-stats-mobile .stat-pill .label {
                    flex-shrink: 0;
                }

                .header-stats-mobile .stat-pill .bar {
                    flex: 1 1 auto;
                    width: auto;
                }

                .header-stats-mobile .stat-pill .val {
                    flex-shrink: 0;
                    min-width: 20px;
                    text-align: right;
                }

            .stat-pill .label {
                color: var(--text-mid);
            }

            .stat-pill .val {
                color: var(--glow-blue);
            }

            .stat-pill .bar {
                width: 60px;
                height: 4px;
                background: rgba(74,158,255,0.1);
                border-radius: 2px;
                overflow: hidden;
            }

            .stat-pill .bar-fill {
                height: 100%;
                border-radius: 2px;
                background: linear-gradient(90deg, var(--glow-blue), var(--glow-purple));
                transition: width 0.6s ease;
                box-shadow: 0 0 6px var(--glow-blue);
            }

            .stat-pill .stat-info-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 14px;
                height: 14px;
                padding: 0;
                border: none;
                background: transparent;
                color: var(--text-dim);
                font-size: 12px;
                line-height: 1;
                cursor: pointer;
            }

                .stat-pill .stat-info-btn:hover {
                    color: var(--glow-blue);
                }

        .btn {
            font-family: 'Cinzel', serif;
            font-size: 11px;
            letter-spacing: 2px;
            padding: 8px 18px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        button, [role="button"] {
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .btn:hover {
            box-shadow: 0 0 16px rgba(74,158,255,0.3);
            transform: translateY(-1px);
        }

        .btn::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: rgba(255,255,255,0.1);
            transition: width 0.05s linear;
            z-index: 0;
            pointer-events: none;
        }

        .btn.holding::before {
            width: 100%;
            transition: width 1.5s linear;
        }

        .btn > * {
            position: relative;
            z-index: 1;
        }

        .btn[style*="rgba(255,91,91"] {
            border: 1px solid var(--glow-red);
        }

        .btn[style*="rgba(255,91,91"]:hover {
            box-shadow: 0 0 20px rgba(255,91,91,0.4);
            background: rgba(255,91,91,0.2) !important;
        }

        .btn:not(.btn-primary):not(.btn-cancel):not(.btn-gold):not([style*="rgba"]) {
            background: rgba(74,158,255,0.1);
            border: 1px solid var(--glow-blue);
            color: var(--glow-blue);
        }

        .btn:not(.btn-primary):not(.btn-cancel):not(.btn-gold):not([style*="rgba"]):hover {
            box-shadow: 0 0 20px rgba(74,158,255,0.4);
            background: rgba(74,158,255,0.15) !important;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1a3a6c, #0d2040);
            border: 1px solid var(--glow-blue);
            color: var(--glow-blue);
            box-shadow: 0 0 12px rgba(74,158,255,0.15);
        }

            .btn-primary:hover {
                box-shadow: 0 0 20px rgba(74,158,255,0.4);
                transform: translateY(-1px);
            }

        .btn-gold {
            background: linear-gradient(135deg, #3a2a0a, #1a1200);
            border: 1px solid var(--glow-gold);
            color: var(--glow-gold);
        }

            .btn-gold:hover {
                box-shadow: 0 0 20px rgba(200,168,75,0.4);
                transform: translateY(-1px);
            }

        .btn-cancel {
            background: linear-gradient(135deg, #2a0a0a, #1a0000);
            border: 1px solid var(--glow-red);
            color: var(--glow-red);
        }

            .btn-cancel:hover {
                box-shadow: 0 0 20px rgba(255,91,91,0.4);
                transform: translateY(-1px);
            }

        /* LAYOUT */