/**
 * Responsive Game Styles - Mobile & Desktop Optimization
 * Ensures smooth gameplay on any device with proper touch controls
 */

/* ===== UNIVERSAL GAME PAGE LAYOUT (all game pages load this file) ===== */

/* Pages scroll normally. Only the game surface blocks touch scrolling
   (canvas: touch-action none; board games: touch-action manipulation). */
/* overflow-x only on body (not html too): setting it on both turns body into
   its own scroll box and the window stops scrolling. */
body {
    overflow-x: hidden;
    min-height: 100%;
}

/* Flex column so game content fills available height */
body {
    display: flex;
    flex-direction: column;
}

/* When game is running — minimize chrome so game fills the screen */
body.game-active header {
    max-height: 40px;
    overflow: hidden;
    opacity: 0.7;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

body.game-active footer[role="contentinfo"] {
    display: none !important;
}

body.game-active.mga-canvas-game .controls:not(#gamepad-status) {
    display: none;
}

body.game-active.mga-canvas-game .control-hint {
    display: none;
}

body.game-active.mga-canvas-game .gamepad-widget {
    display: none;
}

/* ===== END UNIVERSAL GAME PAGE LAYOUT ===== */

/* Base responsive utilities */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 3px;
        --spacing-sm: 8px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
    }

    body {
        padding: var(--spacing-xs);
        font-size: 16px;
        overflow-x: hidden;
    }

    /* Ensure games fit on mobile - improved scaling */
    canvas {
        max-width: 100vw !important;
        max-height: calc(100vh - 200px) !important;
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Make game containers responsive */
    .game-container, .game-canvas-wrapper, .game-area {
        width: 100% !important;
        max-width: 100vw !important;
        padding: var(--spacing-sm) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Mobile-optimized buttons */
    button, .btn, .auth-button {
        min-height: 44px !important; /* Apple touch target size */
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Control hints become collapsible */
    .control-hint {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .control-hint.show {
        max-height: 500px;
    }
    
    /* Touch-friendly HUD */
    #hud, .hud {
        font-size: 10px !important;
        padding: 8px !important;
    }
    
    /* Mobile navigation */
    .container {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-sm);
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header .subtitle {
        font-size: 0.9rem;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    canvas {
        max-width: 90vw;
        max-height: 75vh;
    }
    
    button, .btn {
        font-size: 15px;
        padding: 10px 18px;
    }
}

/* Desktop optimization */
@media (min-width: 1025px) {
    canvas {
        max-width: 1400px;
        max-height: 85vh;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }

    /* Hover effects only on devices that support hover */
    button:hover, .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4);
    }
}

/* Large Desktop / TV optimization (1440p and above) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    canvas {
        max-width: 1600px;
        max-height: 90vh;
    }

    body {
        font-size: 18px;
    }

    button, .btn {
        font-size: 18px;
        padding: 14px 28px;
    }

    header h1 {
        font-size: 3rem;
    }
}

/* 4K / UHD TV optimization */
@media (min-width: 2560px) {
    canvas {
        max-width: 2200px;
        max-height: 92vh;
    }

    body {
        font-size: 20px;
    }

    button, .btn {
        font-size: 22px;
        padding: 18px 36px;
        min-height: 60px;
    }

    header h1 {
        font-size: 4rem;
    }

    .game-container, .game-canvas-wrapper {
        max-width: 2400px;
        margin: 0 auto;
    }
}

/* Performance optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
}

canvas {
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
    * {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #6cb3ff;
        --text-primary: #ffffff;
    }
    
    button, .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode optimization (default) */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a0e27 0%, #16213e 100%);
    }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    :root {
        --primary-bg: #f5f7fa;
        --secondary-bg: #ffffff;
        --tertiary-bg: #e8ecf1;
        --text-primary: #2c3e50;
        --text-secondary: #7f8c8d;
    }
    
    body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: var(--text-primary);
    }
    
    canvas {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    canvas {
        max-height: 85vh;
    }
    
    .control-hint {
        display: none;
    }
    
    #hud {
        font-size: 8px;
    }
}

/* Very small devices (old phones) */
@media (max-width: 360px) {
    canvas {
        max-height: 60vh;
    }
    
    button, .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    header h1 {
        font-size: 1.2rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, .btn, a {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Remove hover effects */
    button:hover, .btn:hover {
        transform: none;
    }
    
    /* Active state instead */
    button:active, .btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

.loading::after {
    content: '⏳';
    margin-left: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Smooth canvas scaling */
canvas {
    transition: width 0.3s ease, height 0.3s ease;
}

/* Fix iOS input zoom */
input, select, textarea {
    font-size: 16px !important;
}

/* Prevent elastic scrolling on iOS */
html, body {
    overscroll-behavior: none;
}

/* =====================================================
   Game Page Scroll Lock
   Applied automatically by mobile-game-adapter.js and
   game-engine.js when a game canvas is detected.
   The :has(canvas) rule provides a CSS-only fallback
   (Chrome 105+, Safari 15.4+, Firefox 121+).
   ===================================================== */
@supports selector(:has(canvas)) {
    /* No page-level scroll lock (it made game pages unscrollable).
       Just stop rubber-band overscroll; the canvas itself ignores touch scroll. */
    body:has(canvas) {
        overscroll-behavior-y: none;
    }

    body:has(canvas) canvas {
        touch-action: none;
    }
}

/* DOM board games: fast taps, no double-tap zoom, page can still be scrolled */
.ultimate-board, .small-board, .cell, #board, .board, .game-board {
    touch-action: manipulation;
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
        padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    }
}

/* =====================================================
   Mobile Game Adapter Support Styles
   ===================================================== */

/* Canvas scaling wrapper */
.game-canvas-wrapper,
#game-container {
    width: 100%;
    overflow: hidden;
}

/* When mobile-game-adapter.js has scaled a canvas, ensure no overflow */
@media (max-width: 768px) {
    canvas[style*="width"] {
        max-width: 100% !important;
    }

    /* Extra bottom padding so D-pad overlay doesn't cover canvas.
       .mga-dpad-active is added to <body> by mobile-game-adapter.js
       instead of relying on :has() which has limited browser support. */
    body.mga-dpad-active .container,
    body.mga-dpad-active main,
    body.mga-dpad-active #game-container {
        padding-bottom: 180px;
    }

    /* Landscape: give more horizontal room */
    @media (orientation: landscape) {
        canvas {
            max-height: 55vh !important;
        }

        body.mga-dpad-active .container {
            padding-bottom: 120px;
        }
    }
}

/* Smooth canvas resize — scoped to canvases managed by the adapter */
canvas.mga-scaled {
    transition: width 0.2s ease, height 0.2s ease;
}

/* =====================================================
   Fullscreen Immersion Mode
   Hides chrome (header, subtitle) and maximises game
   area when the browser enters native fullscreen.
   Works alongside fullscreen-manager.js.
   ===================================================== */

:fullscreen body,
:-webkit-full-screen body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

:fullscreen .container,
:-webkit-full-screen .container {
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

:fullscreen header,
:-webkit-full-screen header {
    display: none !important;
}

:fullscreen .subtitle,
:-webkit-full-screen .subtitle {
    display: none !important;
}

/* Skip-link not needed while in fullscreen */
:fullscreen .skip-link,
:-webkit-full-screen .skip-link {
    display: none !important;
}

:fullscreen main,
:-webkit-full-screen main {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
}

:fullscreen canvas,
:-webkit-full-screen canvas {
    max-width: 100vw !important;
    max-height: 100vh !important;
}

/* =====================================================
   Rotate-Device Prompt
   Injected by fullscreen-manager.js on mobile when a
   landscape game is viewed in portrait orientation.
   ===================================================== */

#fsm-rotate-prompt {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a0e27 0%, #16213e 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    font-family: sans-serif;
    text-align: center;
    gap: 20px;
    padding: 32px;
    -webkit-user-select: none;
    user-select: none;
}

#fsm-rotate-prompt .fsm-rotate-icon {
    font-size: 4rem;
    display: inline-block;
    animation: fsm-rotate-hint 1.6s ease-in-out infinite alternate;
}

@keyframes fsm-rotate-hint {
    from { transform: rotate(-40deg); }
    to   { transform: rotate(40deg); }
}

#fsm-rotate-prompt h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

#fsm-rotate-prompt p {
    font-size: 0.9rem;
    opacity: 0.65;
    margin: 0;
}