/* Fold Phone and Portrait Mode Optimizations */\n/* Complementary CSS for enhanced mobile responsiveness */\n\n/* CSS Custom Properties for dynamic scaling */\n:root {\n    --fold-font-scale: 1;\n    --fold-spacing: 1rem;\n    --fold-gap: 1rem;\n}\n\n/* Fold phone closed state (very narrow screens) */\n@media (max-width: 280px) {\n    :root {\n        --fold-font-scale: 0.65;\n        --fold-spacing: 0.4rem;\n        --fold-gap: 0.4rem;\n    }\n    \n    .container {\n        padding: var(--fold-spacing) !important;\n    }\n    \n    .stats {\n        grid-template-columns: 1fr !important;\n        gap: var(--fold-gap) !important;\n    }\n    \n    .stat-card {\n        padding: calc(var(--fold-spacing) * 0.75) var(--fold-spacing) !important;\n        min-height: 45px !important;\n    }\n    \n    .stat-number {\n        font-size: calc(0.9rem * var(--fold-font-scale)) !important;\n    }\n    \n    .stat-label {\n        font-size: calc(0.6rem * var(--fold-font-scale)) !important;\n    }\n    \n    .platform-btn {\n        padding: calc(var(--fold-spacing) * 0.75) calc(var(--fold-spacing) * 0.5) !important;\n        font-size: calc(0.7rem * var(--fold-font-scale)) !important;\n    }\n}\n\n/* Samsung Galaxy Z Fold series closed */\n@media (max-width: 320px) {\n    :root {\n        --fold-font-scale: 0.7;\n        --fold-spacing: 0.5rem;\n        --fold-gap: 0.5rem;\n    }\n}\n\n/* Samsung Galaxy Z Fold series open / Large fold phones */\n@media (min-width: 321px) and (max-width: 768px) {\n    :root {\n        --fold-font-scale: 0.85;\n        --fold-spacing: 0.75rem;\n        --fold-gap: 0.75rem;\n    }\n}\n\n/* Portrait orientation specific enhancements */\n@media (orientation: portrait) {\n    /* Force proper layout order */\n    .container {\n        display: flex !important;\n        flex-direction: column !important;\n    }\n    \n    /* Platform controls first */\n    .controls {\n        order: 1 !important;\n        margin-bottom: calc(var(--fold-spacing) * 2) !important;\n    }\n    \n    /* Stats second with responsive grid */\n    .stats {\n        order: 2 !important;\n        margin: calc(var(--fold-spacing) * 2) 0 !important;\n    }\n    \n    /* Games list last */\n    .games-grid {\n        order: 3 !important;\n        margin-top: calc(var(--fold-spacing) * 2) !important;\n    }\n    \n    .no-games {\n        order: 4 !important;\n    }\n}\n\n/* Portrait mode stats layout */\n@media (orientation: portrait) and (max-width: 768px) {\n    .stats {\n        grid-template-columns: repeat(2, 1fr) !important;\n        gap: calc(var(--fold-gap) * 0.75) !important;\n    }\n    \n    .stat-card {\n        padding: calc(var(--fold-spacing) * 0.8) calc(var(--fold-spacing) * 0.6) !important;\n        min-height: 55px !important;\n        background: rgba(255, 255, 255, 0.08) !important;\n        border: 1px solid rgba(255, 255, 255, 0.15) !important;\n        border-radius: 12px !important;\n    }\n    \n    .stat-number {\n        font-size: calc(1.1rem * var(--fold-font-scale)) !important;\n        font-weight: 700 !important;\n        margin-bottom: calc(0.2rem * var(--fold-font-scale)) !important;\n        line-height: 1.1 !important;\n        color: #fff !important;\n    }\n    \n    .stat-label {\n        font-size: calc(0.7rem * var(--fold-font-scale)) !important;\n        opacity: 0.9 !important;\n        line-height: 1.2 !important;\n        padding: 0 calc(var(--fold-spacing) * 0.25) !important;\n        word-wrap: break-word !important;\n        hyphens: auto !important;\n        text-align: center !important;\n        color: rgba(255, 255, 255, 0.9) !important;\n    }\n}\n\n/* Very small portrait screens */\n@media (orientation: portrait) and (max-width: 320px) {\n    .stats {\n        grid-template-columns: 1fr !important;\n        gap: calc(var(--fold-gap) * 0.5) !important;\n    }\n    \n    .stat-card {\n        padding: calc(var(--fold-spacing) * 0.6) calc(var(--fold-spacing) * 0.4) !important;\n        min-height: 45px !important;\n    }\n    \n    .stat-number {\n        font-size: calc(0.95rem * var(--fold-font-scale)) !important;\n    }\n    \n    .stat-label {\n        font-size: calc(0.6rem * var(--fold-font-scale)) !important;\n    }\n}\n\n/* Landscape mobile optimization */\n@media (orientation: landscape) and (max-width: 768px) {\n    .stats {\n        grid-template-columns: repeat(5, 1fr) !important;\n        gap: calc(var(--fold-gap) * 0.5) !important;\n        margin: calc(var(--fold-spacing) * 1.5) 0 !important;\n    }\n    \n    .stat-card {\n        padding: calc(var(--fold-spacing) * 0.5) calc(var(--fold-spacing) * 0.25) !important;\n        min-height: 50px !important;\n    }\n    \n    .stat-number {\n        font-size: calc(0.85rem * var(--fold-font-scale)) !important;\n    }\n    \n    .stat-label {\n        font-size: calc(0.6rem * var(--fold-font-scale)) !important;\n    }\n}\n\n/* Enhanced touch targets for fold phones */\n@media (max-width: 768px) {\n    .platform-btn,\n    .action-btn,\n    .control-btn,\n    .btn,\n    input,\n    select {\n        min-height: 44px !important;\n        touch-action: manipulation !important;\n        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;\n    }\n    \n    /* Ensure buttons are properly sized */\n    .platform-btn {\n        padding: calc(var(--fold-spacing) * 0.75) calc(var(--fold-spacing) * 0.5) !important;\n        font-size: calc(0.8rem * var(--fold-font-scale)) !important;\n        border-radius: 8px !important;\n    }\n    \n    /* Control groups spacing */\n    .control-group {\n        padding: var(--fold-spacing) !important;\n        margin-bottom: var(--fold-gap) !important;\n    }\n    \n    .control-group h3 {\n        font-size: calc(1rem * var(--fold-font-scale)) !important;\n        margin-bottom: calc(var(--fold-spacing) * 0.75) !important;\n    }\n}\n\n/* Text readability improvements */\n@media (max-width: 768px) {\n    .stat-label {\n        /* Prevent text from being too small to read */\n        min-font-size: 11px !important;\n        /* Allow text to wrap properly */\n        white-space: normal !important;\n        overflow-wrap: break-word !important;\n        word-break: break-word !important;\n    }\n    \n    .stat-number {\n        /* Ensure numbers remain readable */\n        min-font-size: 14px !important;\n        font-weight: 700 !important;\n    }\n}\n\n/* Specific fold phone models */\n\n/* Galaxy Z Fold4/5 inner screen */\n@media (min-width: 768px) and (max-width: 884px) {\n    .stats {\n        grid-template-columns: repeat(3, 1fr) !important;\n    }\n}\n\n/* Galaxy Z Flip series */\n@media (max-height: 740px) and (orientation: portrait) {\n    .header {\n        padding: 1rem 0.5rem !important;\n    }\n    \n    .minnka-brand {\n        font-size: calc(28px * var(--fold-font-scale)) !important;\n    }\n    \n    .app-title-section h1 {\n        font-size: calc(2rem * var(--fold-font-scale)) !important;\n    }\n}\n\n/* Animation performance for mobile */\n@media (max-width: 768px) {\n    .stat-card {\n        transition: transform 0.2s ease !important;\n    }\n    \n    .stat-card:hover {\n        transform: translateY(-2px) !important;\n    }\n    \n    .game-card {\n        animation: fadeInUp 0.2s ease forwards !important;\n    }\n}\n\n/* Ensure proper z-index for mobile elements */\n@media (max-width: 768px) {\n    .floating-add-btn {\n        z-index: 1000 !important;\n        width: calc(56px * var(--fold-font-scale)) !important;\n        height: calc(56px * var(--fold-font-scale)) !important;\n        bottom: calc(20px * var(--fold-font-scale)) !important;\n        right: calc(20px * var(--fold-font-scale)) !important;\n    }\n    \n    .modal {\n        z-index: 2000 !important;\n        padding: var(--fold-spacing) !important;\n    }\n    \n    .modal-content {\n        padding: calc(var(--fold-spacing) * 1.5) !important;\n        border-radius: 12px !important;\n    }\n}\n\n/* Debug helper (remove in production) */\n@media (max-width: 768px) {\n    body::after {\n        content: \"📱 \" attr(data-screen-size);\n        position: fixed;\n        top: 10px;\n        left: 10px;\n        background: rgba(0,0,0,0.8);\n        color: white;\n        padding: 5px 10px;\n        border-radius: 5px;\n        font-size: 12px;\n        z-index: 9999;\n        pointer-events: none;\n        opacity: 0; /* Hidden by default, enable for debugging */\n    }\n}