/**
 * OldGames.Games - Global Responsive CSS
 * Automatic detection for all screen sizes and devices
 * 
 * Breakpoints:
 * - xs: 0-479px (phones portrait)
 * - sm: 480-767px (phones landscape, small tablets)
 * - md: 768-1023px (tablets)
 * - lg: 1024-1279px (laptops, small desktops)
 * - xl: 1280-1535px (desktops)
 * - 2xl: 1536px+ (large screens)
 */

/* ====================================
   CSS CUSTOM PROPERTIES FOR RESPONSIVE
   ==================================== */
:root {
    /* Fluid spacing */
    --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
    --spacing-sm: clamp(0.5rem, 2vw, 1rem);
    --spacing-md: clamp(1rem, 3vw, 1.5rem);
    --spacing-lg: clamp(1.5rem, 4vw, 2.5rem);
    --spacing-xl: clamp(2rem, 5vw, 4rem);
    
    /* Fluid typography */
    --font-xs: clamp(0.65rem, 1.5vw, 0.75rem);
    --font-sm: clamp(0.75rem, 2vw, 0.875rem);
    --font-base: clamp(0.875rem, 2.5vw, 1rem);
    --font-md: clamp(1rem, 3vw, 1.25rem);
    --font-lg: clamp(1.25rem, 3.5vw, 1.5rem);
    --font-xl: clamp(1.5rem, 4vw, 2rem);
    --font-2xl: clamp(2rem, 5vw, 3rem);
    --font-3xl: clamp(2.5rem, 6vw, 4rem);
    
    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* Grid columns */
    --grid-cols-mobile: 2;
    --grid-cols-tablet: 3;
    --grid-cols-laptop: 4;
    --grid-cols-desktop: 5;
    --grid-cols-large: 6;
}

/* ====================================
   BASE RESPONSIVE UTILITIES
   ==================================== */

/* Container that adapts to screen */
.responsive-container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Responsive grid with auto-fit */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--spacing-md);
}

/* Responsive flex container */
.responsive-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* ====================================
   GLOBAL BODY & HTML RESPONSIVE
   ==================================== */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ====================================
   NAVIGATION RESPONSIVE
   ==================================== */
nav {
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.nav-logo {
    font-size: var(--font-lg) !important;
}

.nav-links {
    gap: var(--spacing-sm) !important;
}

.nav-links a {
    font-size: var(--font-sm) !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
}

/* ====================================
   HERO SECTION RESPONSIVE
   ==================================== */
.hero-content {
    padding: var(--spacing-lg) var(--spacing-md) !important;
}

.hero-content h1 {
    font-size: var(--font-2xl) !important;
    line-height: 1.2 !important;
}

.hero-content p {
    font-size: var(--font-base) !important;
}

/* ====================================
   GAME CARDS RESPONSIVE
   ==================================== */
.game-card, .console-card {
    min-width: 0; /* Prevent overflow */
}

/* ====================================
   MOST PLAYED SECTION RESPONSIVE
   ==================================== */
.most-played-section {
    padding: var(--spacing-lg) var(--spacing-md) !important;
}

.most-played-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    gap: var(--spacing-md) !important;
}

.mp-main-title {
    font-size: var(--font-xl) !important;
}

.mp-stats-bar {
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
}

/* ====================================
   CONSOLES SECTION RESPONSIVE
   ==================================== */
.consoles-section {
    padding: var(--spacing-lg) var(--spacing-md) !important;
}

.consoles-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    gap: var(--spacing-md) !important;
}

/* ====================================
   FAVORITES SECTION RESPONSIVE
   ==================================== */
.favorites-section {
    padding: var(--spacing-lg) var(--spacing-md) !important;
}

.favorites-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    gap: var(--spacing-md) !important;
}

/* ====================================
   MODALS RESPONSIVE
   ==================================== */
.modal, [id$="Modal"] {
    padding: var(--spacing-sm) !important;
}

.modal-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ====================================
   EMULATOR MODAL RESPONSIVE
   ==================================== */
#emulatorModal {
    padding: 0 !important;
}

#emulatorFrame {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important; /* Dynamic viewport height for mobile */
}

/* ====================================
   GAMES MODAL RESPONSIVE
   ==================================== */
#gamesModal .modal-content,
#consoleGamesModal {
    max-width: 98vw !important;
    padding: var(--spacing-sm) !important;
}

/* ====================================
   ADMIN PANEL RESPONSIVE
   ==================================== */
#adminPanel {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.admin-sidebar {
    width: 100% !important;
}

.admin-content {
    padding: var(--spacing-sm) !important;
}

/* ====================================
   BUTTONS RESPONSIVE
   ==================================== */
button, .btn, [class*="button"] {
    min-height: 44px; /* Touch target size */
    min-width: 44px;
    font-size: var(--font-sm) !important;
}

/* ====================================
   FORMS RESPONSIVE
   ==================================== */
input, select, textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
    min-height: 44px;
    padding: var(--spacing-sm) !important;
}

/* ====================================
   EXTRA SMALL DEVICES (< 480px)
   Phones in portrait mode
   ==================================== */
@media screen and (max-width: 479px) {
    :root {
        --grid-cols: 2;
    }
    
    /* Hide non-essential elements */
    .hide-xs {
        display: none !important;
    }
    
    /* Navigation */
    nav {
        padding: 0.5rem !important;
    }
    
    .nav-logo {
        font-size: 1rem !important;
    }
    
    .nav-links {
        display: none !important;
    }
    
    .nav-toggle {
        display: flex !important;
    }
    
    /* Hero */
    .hero-content h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-content p {
        font-size: 0.85rem !important;
    }
    
    /* Most Played */
    .most-played-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .most-played-header {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .mp-stats-bar {
        justify-content: center !important;
        font-size: 0.7rem !important;
    }
    
    .mp-stat-item {
        padding: 0.3rem 0.5rem !important;
    }
    
    .most-played-card-title {
        font-size: 0.75rem !important;
    }
    
    .most-played-card-info {
        padding: 0.5rem !important;
    }
    
    .mp-card-bottom-bar {
        padding: 0.4rem !important;
    }
    
    .mp-bottom-play {
        font-size: 0.65rem !important;
        padding: 0.4rem !important;
    }
    
    /* Consoles Grid */
    .consoles-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .console-card {
        padding: 0.5rem !important;
    }
    
    .console-emoji {
        font-size: 2rem !important;
    }
    
    .console-name {
        font-size: 0.65rem !important;
    }
    
    /* Favorites */
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Section titles */
    .section-title, h2 {
        font-size: 1.25rem !important;
    }
    
    /* Admin Panel */
    .admin-sidebar {
        position: fixed !important;
        left: -100% !important;
        transition: left 0.3s ease !important;
    }
    
    .admin-sidebar.active {
        left: 0 !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ====================================
   SMALL DEVICES (480px - 767px)
   Phones in landscape, small tablets
   ==================================== */
@media screen and (min-width: 480px) and (max-width: 767px) {
    :root {
        --grid-cols: 3;
    }
    
    .hide-sm {
        display: none !important;
    }
    
    /* Navigation */
    .nav-links a span {
        display: none !important;
    }
    
    /* Most Played */
    .most-played-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Consoles */
    .consoles-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Favorites */
    .favorites-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ====================================
   MEDIUM DEVICES (768px - 1023px)
   Tablets
   ==================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --grid-cols: 4;
    }
    
    .hide-md {
        display: none !important;
    }
    
    /* Most Played */
    .most-played-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Consoles */
    .consoles-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    /* Favorites */
    .favorites-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Admin Panel */
    .admin-sidebar {
        width: 200px !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ====================================
   LARGE DEVICES (1024px - 1279px)
   Laptops, small desktops
   ==================================== */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --grid-cols: 5;
    }
    
    .hide-lg {
        display: none !important;
    }
    
    /* Most Played */
    .most-played-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Consoles */
    .consoles-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* ====================================
   EXTRA LARGE DEVICES (1280px - 1535px)
   Desktops
   ==================================== */
@media screen and (min-width: 1280px) and (max-width: 1535px) {
    :root {
        --grid-cols: 6;
    }
    
    .hide-xl {
        display: none !important;
    }
    
    /* Most Played */
    .most-played-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ====================================
   2XL DEVICES (1536px+)
   Large screens
   ==================================== */
@media screen and (min-width: 1536px) {
    :root {
        --grid-cols: 7;
    }
    
    .hide-2xl {
        display: none !important;
    }
    
    /* Most Played - Original 6 columns */
    .most-played-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    /* Games in modal */
    #gamesByConsole {
        grid-template-columns: repeat(7, 1fr) !important;
    }
    
    /* Max container width for ultra-wide */
    .responsive-container {
        max-width: 1800px;
    }
}

/* ====================================
   ORIENTATION SPECIFIC
   ==================================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Landscape phone - compact mode */
    nav {
        padding: 0.25rem 0.5rem !important;
        height: auto !important;
        min-height: 40px !important;
    }
    
    .hero-content {
        padding: 0.5rem !important;
    }
    
    .hero-content h1 {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .hero-content p {
        display: none !important;
    }
    
    /* Emulator takes full height */
    #emulatorModal {
        padding: 0 !important;
    }
    
    #emulatorFrame {
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    /* Hide sections for more game space */
    .most-played-header {
        padding: 0.5rem !important;
    }
    
    .mp-subtitle {
        display: none !important;
    }
}

/* ====================================
   TOUCH DEVICE OPTIMIZATIONS
   ==================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - larger hit targets */
    button, .btn, a, .clickable {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Remove hover effects that don't work on touch */
    .game-card:hover,
    .console-card:hover,
    .most-played-card:hover {
        transform: none !important;
    }
    
    /* Add active states instead */
    .game-card:active,
    .console-card:active,
    .most-played-card:active {
        transform: scale(0.98) !important;
        opacity: 0.9;
    }
    
    /* Disable hover videos */
    .most-played-video {
        pointer-events: none;
    }
}

/* ====================================
   HIGH DPI / RETINA DISPLAYS
   ==================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina */
    .game-card, .console-card, .most-played-card {
        border-width: 0.5px;
    }
}

/* ====================================
   ADMIN PANEL - RESPONSIVE
   ==================================== */

/* Desktop - fixed sidebar width */
.admin-sidebar {
    width: 450px !important;
    max-width: 450px !important;
}

/* Tablet - slightly smaller */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 380px !important;
        max-width: 380px !important;
        right: -380px !important;
    }
    
    .admin-sidebar.open {
        right: 0 !important;
    }
}

/* Mobile - full width with better layout */
@media (max-width: 768px) {
    .admin-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
        right: -100% !important;
    }
    
    .admin-sidebar.open {
        right: 0 !important;
    }
    
    .admin-panel-header {
        padding: 0.8rem 1rem !important;
    }
    
    .admin-panel-title {
        font-size: 1.1rem !important;
    }
    
    .admin-tabs {
        padding: 0.3rem !important;
        gap: 0.2rem !important;
        justify-content: center !important;
    }
    
    .admin-tab {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.9rem !important;
    }
    
    .admin-content {
        padding: 0.8rem !important;
    }
    
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    
    .admin-stat-card {
        padding: 0.7rem !important;
    }
    
    .admin-stat-value {
        font-size: 1.5rem !important;
    }
    
    .admin-stat-label {
        font-size: 0.65rem !important;
    }
    
    .admin-section {
        padding: 0.8rem !important;
    }
    
    .admin-section-title {
        font-size: 0.9rem !important;
    }
    
    /* Admin table responsive */
    .admin-table {
        font-size: 0.75rem !important;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.5rem 0.3rem !important;
    }
    
    /* Hide less important columns on mobile */
    .admin-table th:nth-child(2),
    .admin-table td:nth-child(2) {
        display: none; /* Hide email column */
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .admin-sidebar {
        width: 100vw !important;
    }
    
    .admin-tabs {
        flex-wrap: wrap !important;
    }
    
    .admin-tab {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .admin-stats-grid {
        gap: 0.4rem !important;
    }
    
    .admin-stat-value {
        font-size: 1.2rem !important;
    }
    
    .admin-stat-label {
        font-size: 0.6rem !important;
    }
    
    /* Stack action buttons */
    .admin-section button {
        width: 100% !important;
        margin-bottom: 0.3rem !important;
    }
    
    /* Games list in admin */
    #gamesTableBody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0.5rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    #gamesTableBody td {
        border: none !important;
        padding: 0.2rem !important;
    }
}

/* Admin toggle button - keep visible */
.admin-toggle-btn {
    z-index: 10001 !important;
}

@media (max-width: 768px) {
    .admin-toggle-btn {
        bottom: 70px !important; /* Above mobile nav if any */
        right: 15px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
    }
}

/* ====================================
   EMULATOR MODAL - RESPONSIVE
   ==================================== */

/* Base responsive for emulator modal */
.emulator-modal {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.emulator-wrapper {
    transition: all 0.3s ease;
}

/* Tablet landscape and below */
@media (max-width: 1200px) {
    .emulator-wrapper {
        width: 98% !important;
        max-width: none !important;
        height: 85vh !important;
    }
    
    .game-info-sidebar {
        width: 180px !important;
        min-width: 160px !important;
        padding: 12px 10px !important;
        gap: 10px !important;
    }
    
    #emulatorChatContainer {
        width: 240px !important;
        min-width: 220px !important;
    }
}

/* Tablet portrait */
@media (max-width: 1024px) {
    .emulator-wrapper {
        flex-direction: column !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    .game-info-sidebar {
        display: none !important; /* Hide on tablet portrait - show compact version */
    }
    
    .emulator-container {
        flex: 1 !important;
        min-height: 50vh !important;
    }
    
    #emulatorChatContainer {
        width: 100% !important;
        min-width: 100% !important;
        height: 35vh !important;
        max-height: 300px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 45, 85, 0.3) !important;
    }
}

/* Mobile landscape */
@media (max-width: 900px) and (orientation: landscape) {
    .emulator-wrapper {
        flex-direction: row !important;
        height: 100vh !important;
    }
    
    .game-info-sidebar {
        display: none !important;
    }
    
    .emulator-container {
        flex: 1 !important;
        height: 100% !important;
    }
    
    #emulatorChatContainer {
        width: 35% !important;
        min-width: 200px !important;
        max-width: 280px !important;
        height: 100% !important;
        max-height: none !important;
        border-top: none !important;
        border-left: 1px solid rgba(255, 45, 85, 0.3) !important;
    }
}

/* Mobile portrait */
@media (max-width: 768px) {
    .emulator-modal {
        z-index: 10010 !important;
    }
    
    .emulator-wrapper {
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        gap: 0 !important;
        border: none !important;
    }
    
    .game-info-sidebar {
        display: none !important;
    }
    
    .emulator-container {
        flex: 1 !important;
        min-height: 45vh !important;
    }
    
    .emulator-screen {
        height: 100% !important;
    }
    
    #emulatorFrame {
        width: 100% !important;
        height: 100% !important;
    }
    
    #emulatorChatContainer {
        width: 100% !important;
        height: 40vh !important;
        max-height: 250px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 45, 85, 0.3) !important;
    }
    
    /* Viewers panel mobile */
    #viewersPanel {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
    }
    
    /* Emulator loading screen */
    .emulator-loading {
        font-size: 1rem !important;
    }
    
    .emulator-loading > div:first-child {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .emulator-wrapper {
        border-radius: 0 !important;
    }
    
    .emulator-container {
        min-height: 40vh !important;
    }
    
    #emulatorChatContainer {
        height: 45vh !important;
        max-height: 220px !important;
    }
    
    /* Hide chat header text on very small screens */
    #emulatorChatContainer [data-i18n="chat.title"] {
        font-size: 0.8rem !important;
    }
}

/* Extra small mobile */
@media (max-width: 375px) {
    #emulatorChatContainer {
        max-height: 180px !important;
    }
}

/* Fullscreen mode optimizations */
.emulator-modal:fullscreen,
.emulator-modal:-webkit-full-screen {
    padding: 0 !important;
}

.emulator-modal:fullscreen .emulator-wrapper,
.emulator-modal:-webkit-full-screen .emulator-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

/* Compact control buttons for mobile */
@media (max-width: 768px) {
    .control-btn {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.75rem !important;
    }
    
    .control-btn .btn-icon {
        font-size: 1rem !important;
    }
    
    .control-btn span:not(.btn-icon) {
        display: none !important; /* Hide text, keep icons */
    }
    
    .sidebar-controls {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.3rem !important;
    }
}

/* ====================================
   DARK MODE PREFERENCE
   ==================================== */
@media (prefers-color-scheme: dark) {
    /* Already dark theme - no changes needed */
}

/* ====================================
   PRINT STYLES
   ==================================== */
@media print {
    nav, .admin-panel, .modal, #emulatorModal, .hero-content {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* ====================================
   SAFE AREA FOR NOTCHED DEVICES
   ==================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    nav {
        padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    }
}

/* ====================================
   ACCESSIBILITY - FOCUS VISIBLE
   ==================================== */
@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        outline: 3px solid var(--yellow, #ffcc00);
        outline-offset: 2px;
        transition: outline-offset 0.1s ease;
    }
}

/* ====================================
   CONTAINER QUERIES (Modern browsers)
   ==================================== */
@supports (container-type: inline-size) {
    .games-container {
        container-type: inline-size;
        container-name: games;
    }
    
    @container games (max-width: 400px) {
        .game-card {
            font-size: 0.8rem;
        }
    }
    
    @container games (min-width: 800px) {
        .game-card {
            font-size: 1rem;
        }
    }
}