:root {
    --primary-color: #ff5757;
    --bg-deep: #0a0c0b;
    --surface-dark: #121514;
    --card-dark: #1a1e1c;
}
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-deep);
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.glass-nav { backdrop-filter: blur(12px); background: rgba(10, 12, 11, 0.8); }
.text-shadow-strong {
    text-shadow: 0 4px 24px rgba(0,0,0,0.8);
}

/* TV Mode Styles - Base (works with tv-navigation.js injected styles) */
body.tv-mode *:focus {
    outline: none;
}

body.tv-mode a:focus,
body.tv-mode button:focus,
body.tv-mode [tabindex]:focus,
body.tv-mode [role="button"]:focus,
body.tv-mode .group:focus {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 87, 87, 0.25), 0 0 20px rgba(255, 87, 87, 0.12) !important;
    z-index: 50;
    position: relative;
    transition: outline 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
    border-radius: 12px;
}

/* Scale effect for card-like elements only */
body.tv-mode .group:focus,
body.tv-mode [role="button"]:focus {
    transform: scale(1.03);
}

/* Input/Select focus - subtle ring without scaling */
body.tv-mode input:focus,
body.tv-mode select:focus,
body.tv-mode textarea:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.2) !important;
    transform: none;
}

/* Ensure focus ring is visible on colored/primary backgrounds */
body.tv-mode .bg-primary :focus,
body.tv-mode [class*="bg-gradient"] :focus {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

/* Specific component adjustments for TV */
body.tv-mode a,
body.tv-mode button,
body.tv-mode [tabindex],
body.tv-mode .group {
    scroll-margin: 120px; /* Keep focused items well within viewport */
}

/* Hide cursor in TV mode */
body.tv-mode,
body.tv-mode * {
    cursor: none !important;
}

/* Simulated hover state on focus for cards */
body.tv-mode .group:focus .group-hover\:scale-105 {
    transform: scale(1.05);
}
body.tv-mode .group:focus .group-hover\:text-white {
    color: #fff;
}
body.tv-mode .group:focus .group-hover\:text-\[var\(--primary-color\)\] {
    color: var(--primary-color);
}
body.tv-mode .group:focus .group-hover\:bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}
body.tv-mode .group:focus .group-hover\:border-\[var\(--primary-color\)\]\/30 {
    border-color: rgba(255, 87, 87, 0.3);
}