.trivix-player-page {
            --trivix-rubik-src: url('../fonts/rubik_variable.ttf');
        }

        @font-face {
            font-family: 'Rubik';
            src: url('../fonts/rubik_variable.ttf') format('truetype');
            font-weight: 300 900;
            font-style: normal;
            font-display: swap;
        }

.trivix-player-page {
            /* משתני עיצוב - ניתנים לשינוי ישירות דרך ה-APK */
            --bg-color: #0f172a;      /* כחול-אפור כהה מאוד */
            --card-bg: #1e293b;       /* רקע כרטיסיות */
            --accent-color: #4f46e5;  /* צבע כפתור ראשי */
            --text-main: #f8fafc;
            --font-main: 'Rubik', sans-serif;
            --button-radius: 1rem;
        }
        
        .trivix-player-page {
            font-family: var(--font-main);
            background-color: var(--bg-color);
            color: var(--text-main);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;
            touch-action: pan-y; /* מאפשר גלילה אנכית כשצריך */
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }

        .trivix-player-page {
            height: 100%;
            overscroll-behavior-y: contain; /* מונע Pull-to-refresh מרגיז */
        }

        #trivix-player-root {
            min-height: 100dvh; /* dvh מטפל בסרגלי כלים במובייל */
            height: auto;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* אנימציות עדינות ומהירות שלא פוגעות בביצועים */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade { animation: fadeIn 0.2s ease-out forwards; }

        /* כפתורי הבאזר - עיצוב שטוח ומהיר (Flat Design) */
        .buzzer-btn {
            transition: transform 0.05s ease, filter 0.1s ease;
            position: relative;
            border-radius: var(--button-radius);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            border: none;
            padding: 1rem;
        }
        .buzzer-btn:active {
            transform: scale(0.95);
            filter: brightness(0.85);
        }

        /* עיצוב מותאם לסורק ה-QR */
        #qr-reader {
            border: none !important;
            border-radius: 0.75rem;
            overflow: hidden;
            background: #000;
        }
        #qr-reader__scan_region { background: #000; }
        #qr-reader video { object-fit: cover !important; }

        /* סקרולבר עדין לרשימת השמות */
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

        /* Hard clamp for header/main logos (guards against external CSS overrides). */
        #trivix-player-root .trivix-main-icon {
            width: 32px !important;
            height: 32px !important;
            max-width: 32px !important;
            max-height: 32px !important;
            object-fit: contain !important;
        }
        #trivix-player-root .trivix-header-logo {
            width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            max-width: 100% !important;
            object-fit: contain !important;
            display: block !important;
            flex-shrink: 0 !important;
        }
        #trivix-player-root .trivix-header-logo-shell {
            width: 90px !important;
            max-width: 90px !important;
            height: 20px !important;
            max-height: 20px !important;
            flex: 0 0 90px !important;
            overflow: hidden !important;
            display: block !important;
        }
