/* =========================================
   Fire TV & Silk Browser Optimizations
   ========================================= */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    /* TV UIs feel snappier without text selection */
    user-select: none;
    /* Ensure cursor shows on hybrid TV devices */
    cursor: default;
}

/* Remote / Keyboard Focus States */
a:focus-visible,
button:focus-visible {
    outline: 4px solid #f97316; /* orange-500 */
    outline-offset: 6px;
    border-radius: 1rem;
}

/* Tile interactions (remote + mouse) */
.tile:focus,
.tile:hover {
    transform: scale(1.03);
    background-color: #262626; /* neutral-800 */
    border-color: #737373;     /* neutral-500 */
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.4);
}

.tile:active {
    transform: scale(0.98);
}

/* Category card lift on focus/hover */
.category-card:has(a:focus),
.category-card:hover {
    transform: translateY(-6px);
    border-color: #525252; /* neutral-600 */
    box-shadow: 0 20px 40px -12px rgba(249, 115, 22, 0.25);
}

/* Tool buttons */
.tool-btn:focus,
.tool-btn:hover {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3);
}

/* Navigation links */
.nav-link {
    transition: all 0.2s ease;
}
.nav-link:hover,
.nav-link:focus {
    background-color: #262626;
    color: #fb923c; /* orange-400 */
}

/* Large scrollbar for easy TV visibility */
::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 10px;
    border: 6px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
    background: #525252;
}

/* Remove tap highlights on TV / touch hybrids */
a, button, .tile, .tool-btn {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent image dragging which can break TV cursor feel */
img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Respect reduced motion (accessibility + TV performance) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}