/**
 * Mobile Optimizations CSS
 * 모바일 디바이스 최적화 스타일
 */

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .game-card:hover,
    .memory-card:hover,
    .puzzle-piece:hover,
    .direction-btn:hover,
    .control-btn:hover,
    .difficulty-btn:hover,
    .play-button:hover,
    .result-btn:hover {
        transform: none;
        box-shadow: initial;
    }
    
    /* Enhance tap targets */
    .direction-btn,
    .control-btn,
    .difficulty-btn,
    .play-button,
    .result-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Add touch feedback */
    .direction-btn:active,
    .control-btn:active,
    .difficulty-btn:active,
    .play-button:active,
    .result-btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    .memory-card:active,
    .puzzle-piece:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .game-card:active {
        transform: scale(0.98);
        opacity: 0.95;
    }
}

/* Prevent text selection on game elements */
.game-container,
.memory-card,
.puzzle-piece,
.direction-btn,
.control-btn,
.game-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Improve scrolling on mobile */
.game-container,
.mini-games-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevent zoom on input focus */
input[type="text"],
input[type="number"],
select,
textarea {
    font-size: 16px;
}

/* Safe area support for devices with notches */
@supports (padding: max(0px)) {
    .mini-games-container,
    .game-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Landscape orientation optimizations */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .game-container {
        padding: 0.5rem;
        max-height: 95vh;
        overflow-y: auto;
    }
    
    .game-header {
        margin-bottom: 0.5rem;
    }
    
    .game-title {
        font-size: 1.2rem !important;
        margin-bottom: 0.25rem;
    }
    
    .game-info {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .game-controls {
        margin-top: 0.5rem;
        gap: 0.5rem;
    }
    
    .control-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .instructions {
        padding: 0.5rem;
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
    
    /* Snake game specific */
    #gameCanvas {
        max-height: 200px;
    }
    
    .direction-pad {
        max-width: 120px;
    }
    
    .direction-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    /* Memory and Puzzle games */
    .difficulty-selector {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .memory-card,
    .puzzle-piece {
        font-size: 0.9rem;
    }
    
    .puzzle-container {
        gap: 0.5rem;
        margin: 0.5rem 0;
    }
    
    .reference-image {
        padding: 0.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .game-icon,
    .memory-card,
    .puzzle-piece {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .game-card,
    .memory-card,
    .puzzle-piece,
    .control-btn,
    .direction-btn {
        transition: none;
        animation: none;
    }
    
    .flip-animation,
    .move-animation,
    .points-animate {
        animation: none;
    }
}

/* Print styles (hide interactive elements) */
@media print {
    .game-controls,
    .mobile-controls,
    .direction-pad,
    .back-button,
    .play-button {
        display: none !important;
    }
    
    .game-container {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Focus styles for keyboard navigation */
.control-btn:focus,
.difficulty-btn:focus,
.play-button:focus,
.result-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.memory-card:focus,
.puzzle-piece:focus {
    outline: 3px solid #667eea;
    outline-offset: 1px;
}

/* Improve tap targets on very small screens */
@media (max-width: 320px) {
    .control-btn,
    .difficulty-btn,
    .play-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        min-height: 40px;
    }
    
    .direction-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .game-card {
        padding: 0.75rem;
        min-height: 120px;
    }
    
    .memory-card,
    .puzzle-piece {
        min-height: 32px;
        font-size: 0.8rem;
    }
}

/* Optimize for foldable devices */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .puzzle-container {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }
    
    .puzzle-board.grid-3x3 {
        width: 280px;
        height: 280px;
    }
    
    .puzzle-board.grid-4x4 {
        width: 320px;
        height: 320px;
    }
    
    .reference-grid.grid-3x3 {
        width: 140px;
        height: 140px;
    }
    
    .reference-grid.grid-4x4 {
        width: 160px;
        height: 160px;
    }
}

/* Improve performance on low-end devices */
@media (max-width: 480px) {
    .game-card,
    .memory-card,
    .puzzle-piece {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Reduce shadow complexity */
    .game-card,
    .game-container {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Simplify gradients */
    .points-status,
    .primary-btn,
    .play-button {
        background: #667eea;
    }
}

/* Battery saving mode */
@media (prefers-reduced-motion: reduce) and (max-width: 480px) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 모바일 브레드크럼 표시 */
@media (max-width: 768px) {
    .mobile-breadcrumb-section {
        display: block;
    }
    
    /* 모바일에서 카테고리 헤더 패딩 조정 */
    .category-header {
        padding: 20px 0 0 0;
    }
    
    /* 모바일에서 필터 섹션 상단 여백 조정 */
    .filter-section {
        padding: 15px 0;
    }
}