@media (max-width: 1280px) { .anime-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .anime-grid { grid-template-columns: repeat(4, 1fr); } .player-layout { flex-direction: column; } .episode-sidebar { width: 100%; max-height: 300px; overflow-y: auto; } .info-layout { flex-direction: column; } }
@media (max-width: 768px) { .container { padding: 0 var(--sp-4); } .anime-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .hero-tagline { font-size: clamp(24px, 6vw, 36px); } .hero-search-input { font-size: var(--text-base); } .section-title { font-size: var(--text-base); } }
@media (max-width: 480px) { .anime-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .hero { min-height: 500px; } .hero-content { padding: var(--sp-4); gap: var(--sp-4); } .btn-hero { padding: 12px 28px; } .navbar-inner { padding: 0 var(--sp-4); gap: var(--sp-3); } .navbar-search { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
@media (prefers-contrast: high) { :root { --border-subtle: rgba(255, 255, 255, 0.3); --border-normal: rgba(255, 255, 255, 0.6); } }