/* ============================================
   Mobile Optimization CSS
   ============================================
   Responsive optimizations for landing, explorer, viewer pages
   Loaded AFTER all other CSS files for override

   Breakpoints:
   - Mobile & Tablet: < 1024px (includes iPad)
   - Small Mobile: < 480px

   Safety: All rules are wrapped in @media queries
   Desktop (1025px+) is NOT affected
   ============================================ */


/* ============================================
   1. Mobile & Tablet Optimization (< 1024px)
   ============================================ */
@media (max-width: 1024px) {

    /* ========== Top Bar ========== */
    .top-bar {
        padding: 0 12px;  /* Reduced padding for more space */
        display: flex;
        align-items: center;
        gap: 8px;  /* Base gap between elements */
    }

    /* Show hamburger button on mobile */
    .hamburger {
        display: flex !important;  /* Override shared.css display: none */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        order: -2;  /* Position before logo */
        flex-shrink: 0;
        height: 40px;  /* Unified button size */
        width: 40px;
    }

    /* Logo positioning - right after hamburger */
    .top-bar__logo {
        order: -1;  /* Position after hamburger */
        margin-left: 8px;  /* Unified spacing with studio/viewer */
        margin-right: auto;  /* Push actions to the right */
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .top-bar__logo-text {
        font-size: 18px;
        line-height: 1;
    }

    .top-bar__logo-image {
        width: 32px;  /* Unified with studio/viewer mobile */
        height: 32px;  /* Unified with studio/viewer mobile */
        border-radius: 6px;  /* Slightly smaller radius for mobile */
    }

    /* Hide social icons on mobile */
    .top-bar__social-container {
        display: none;
    }

    /* Actions container */
    .top-bar__actions {
        display: flex;
        align-items: center;
        gap: 8px;  /* Consistent gap between right-side elements */
        margin-left: 0;  /* Reset margin (logo handles spacing) */
    }

    /* STUDIO button - HIDE on mobile (game creation feature) */
    .top-bar .btn-primary {
        display: none !important;  /* Hide game creation button on mobile */
    }

    /* Language button - unified size */
    .top-bar__language {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Profile/Login button - HIDE on mobile (authentication feature) */
    .top-bar__profile {
        display: none !important;  /* Hide login/profile button on mobile */
    }


    /* ========== Sidebar ========== */
    /* Hide sidebar off-screen by default on mobile */
    .sidebar {
        transform: translateX(-100%);
        width: min(85vw, 320px) !important;
        transition: transform var(--duration-normal) var(--ease-default);
        border-radius: 0 16px 16px 0;
    }

    /* Disable hover expansion on mobile */
    .sidebar:hover {
        width: min(85vw, 320px) !important;
    }

    /* Show sidebar when active */
    .sidebar.active {
        transform: translateX(0);
        width: min(85vw, 320px) !important;
    }

    /* Labels always visible on mobile */
    .sidebar .nav-item__label,
    .sidebar.active .nav-item__label {
        opacity: 1 !important;
    }

    /* Touch-friendly spacing */
    .nav-item {
        min-height: 44px;
        padding: var(--space-3) var(--space-2);
    }

    .nav-item__icon {
        width: 28px;
        height: 28px;
    }

    .nav-item__icon img {
        width: 28px;
        height: 28px;
    }

    /* Hide creation/management navigation items on mobile */
    .nav-item[href="/make"],
    .nav-item[href="/make.html"],
    .nav-item[href="/editor"],
    .nav-item[href="/editor.html"] {
        display: none !important;
    }


    /* ========== Landing Page ========== */

    /* Hero Section - Reduced top spacing */
    .hero {
        padding-top: 20px !important;  /* 60px → 20px */
    }

    /* Hero Section - Fluid Typography */
    .hero-title {
        font-size: clamp(32px, 8vw, 80px);
        line-height: 1.2;
    }

    .animated-text {
        font-size: clamp(24px, 6vw, 64px);
        line-height: 1.2;
    }

    .platform-badge {
        font-size: clamp(12px, 2.5vw, 16px);
        padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 21px);
    }

    .hero-subtitle {
        font-size: clamp(16px, 4vw, 20px);
    }

    /* Input Section - Responsive Layout */
    .input-section {
        width: 95%;
        max-width: 900px;
        padding: 12px;
        min-height: auto;
        margin-bottom: var(--space-6) !important;  /* 64px → 24px */
    }

    .input-container {
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .input-field {
        width: 100%;
        min-height: 80px;
        margin-bottom: var(--space-3);
    }

    /* Generate button - SHOW on mobile (will show desktop-only message via JS) */
    .btn-generate {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
        padding: 14px 24px;
    }

    .category-tags {
        margin-top: var(--space-4);
    }

    /* Feature Cards - Single Column */
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
        gap: var(--space-8);
    }

    /* Game Grid - Responsive */
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(12px, 2vw, 21px);
    }

    .game-header {
        width: 100%;
        max-width: 100%;
    }


    /* ========== Explorer Page ========== */

    /* Search Section - Column Layout */
    .search-section {
        flex-direction: column;
        gap: var(--space-4);
        padding: 0 var(--space-4);
    }

    .search-container {
        width: 100%;
        max-width: 600px;
        height: 48px;
    }

    /* Filter bar - Static positioning */
    .filter-bar {
        position: static;
        width: 100%;
        justify-content: space-between;
    }

    .sort-control {
        width: 100%;
    }

    .sort-select {
        width: 100%;
        min-height: 44px;
    }

    /* Hide creation/upload buttons on Explorer page */
    .btn-create,
    .btn-upload,
    .btn-new-game,
    input[type="file"],
    .upload-area,
    .file-upload-btn {
        display: none !important;
    }


    /* ========== Viewer Page - Mobile Complete Restructure v2.0 ========== */

    /* 1. Body min-width override - Prevent horizontal scroll */
    body {
        min-width: 0 !important;  /* Override viewer.css 1280px */
        overflow-x: hidden;
    }

    /* 2. Main Container - Force flex column layout */
    .main-container {
        display: flex !important;  /* Override grid in wide mode */
        flex-direction: column !important;
        margin-top: var(--topbar-height);
        padding: 0;
        gap: 0;
    }

    /* 3. Sidebar - Top position (or hide if using hamburger) */
    .sidebar {
        order: -1;  /* First */
    }

    /* 4. Game Area - Flex column, full width, no gaps */
    .game-area {
        order: 1;  /* Second */
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin: 0;
        padding: 0;  /* Remove padding for full-width game viewer */
        gap: 0;  /* Remove gap for seamless layout */
    }

    /* 5. Game Viewer - Full width, aspect ratio maintained, no gaps */
    .game-viewer-section {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .game-viewer {
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 50vh;  /* 50% of viewport height */
        border-radius: 0;  /* Remove border radius for edge-to-edge display */
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Iframe - Let it inherit from parent .game-viewer */
    .game-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    /* 6. Control Buttons - Touch friendly */
    .control-btn {
        width: 48px;
        height: 48px;
        margin: var(--space-1);
    }

    .control-btn img {
        width: 28px;
        height: 28px;
    }

    /* Hide all controls on mobile (wide/fullscreen/volume) */
    .game-controls,
    .volume-control {
        display: none !important;
    }

    /* 7. Game Info - Compact mobile layout, no gap from game viewer */
    .game-info {
        width: 100%;
        margin: 0;
        margin-top: 0 !important;  /* No gap from game viewer */
        padding: var(--space-3);  /* Reduced from space-4 */
        background: var(--bg-card);
        border-radius: 0;  /* Remove border radius */
        max-height: none;
    }

    .creator-section {
        grid-template-columns: auto 1fr;
        gap: var(--space-2);  /* Reduced from space-3 */
    }

    .creator-avatar {
        width: 40px;  /* Reduced from 48px */
        height: 40px;
        font-size: 18px;  /* Reduced from 20px */
    }

    .game-title {
        font-size: 18px;  /* Reduced from 20px */
        line-height: 1.3;
    }

    .game-description {
        padding-left: calc(40px + var(--space-2));  /* Adjusted for smaller avatar */
        font-size: 13px;  /* Reduced from 14px */
        line-height: 1.4;
        margin-top: var(--space-2);
    }

    .action-btn {
        width: 40px;  /* Reduced from 44px */
        height: 40px;
    }

    /* Hide share, embed, report, and edit buttons on mobile */
    .btn-share-top,
    #btn-report,
    .action-btn[title="Embed"],
    .btn-edit,
    .btn-remix,
    .btn-fork,
    .action-btn[title="Edit"],
    .action-btn[title="Remix"],
    .action-btn[title="Fork"] {
        display: none !important;
    }

    /* 8. Chat Panel - Full width (or hide) */
    .chat-panel {
        order: 2;  /* Third */
        width: 100% !important;  /* Override 400px fixed width */
        max-width: 100%;
        margin: var(--space-4) var(--space-3) var(--space-3) var(--space-3);
        position: static !important;
        min-height: 300px;
        max-height: 400px;

        /* Hide chat panel on mobile (show only game + info) */
        display: none;

        /* To show chat panel, comment out above line and uncomment below:
        display: flex;
        flex-direction: column;
        */
    }

    /* 9. Stats Bar - Compact grid layout */
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: var(--space-3);  /* Reduced from space-4 */
        padding: var(--space-3);  /* Reduced from space-5 */
    }

    .stat-item {
        width: 44px;
        height: 44px;
    }

    /* 10. Wide Mode - Complete override */
    body.viewer--wide .main-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    body.viewer--wide .game-area {
        display: flex !important;
        flex-direction: column !important;
    }

    body.viewer--wide .game-viewer-section,
    body.viewer--wide .game-info,
    body.viewer--wide .chat-panel {
        grid-area: unset !important;
    }

    /* 11. Fullscreen Mode - Maintain compatibility */
    body.viewer--fullscreen .top-bar,
    body.viewer--fullscreen .sidebar,
    body.viewer--fullscreen .game-info,
    body.viewer--fullscreen .chat-panel {
        display: none;
    }


    /* ========== Social Card Component ========== */
    .social-card--extended {
        min-width: 100%;
        max-width: 100%;
    }

    .social-card__content {
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: none;
        height: auto;
    }

    .avatar--sm {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    /* Mobile: Keep avatar + name horizontal */
    .social-card__user {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        align-items: center;
    }

    /* Improve user info layout for better creator name visibility */
    .social-card__user-info {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }

    /* Enhance studio link click area and visibility */
    .social-card__meta {
        font-size: 16px;
        padding: 4px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        transition: opacity 0.2s ease;
        margin-bottom: 0;
    }

    .social-card__meta:active {
        opacity: 0.7;
    }

    /* Genre tags - full width on mobile */
    .social-card__tags {
        width: 100%;
        display: flex;
        gap: var(--space-1);
        flex-wrap: wrap;
    }

    /* 2nd row: Genre tags + Stats */
    .social-card__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .social-card__bottom .social-card__tags {
        flex: 1;
        min-width: 0;
        margin-top: 0;
    }

    .social-card__content .social-card__stats {
        display: none !important;
    }

    /* 소셜카드 플레이/좋아요 아이콘 크기 5% 축소 (모바일 전용) */
    .stat-item {
        width: 27px;
        height: 27px;
    }

    .stat-item .count {
        bottom: -15px;
        font-size: 11px;
    }
}


/* ============================================
   2. Small Mobile Optimization (< 480px)
   ============================================ */
@media (max-width: 479px) {

    /* ========== Top Bar ========== */
    /* Keep logo text visible on mobile */
    .top-bar__logo-text {
        font-size: 16px;  /* Slightly smaller for mobile */
    }

    .top-bar__language {
        width: 40px;
        height: 40px;
    }

    .top-bar__profile {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }


    /* ========== Landing Page ========== */

    /* Hero - Vertical Stack */
    .hero-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .hero-title-line1 {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    .animated-text {
        font-size: 28px;
    }

    .sparkle-icon {
        width: 20px;
        height: 20px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* Input Section - Compact */
    .input-section {
        padding: 10px;
    }

    .input-field {
        min-height: 70px;
        font-size: 16px;
    }

    .btn-generate {
        height: 52px;
        font-size: 18px;
    }

    /* Category Tags - Touch Target */
    .category-tag {
        min-height: 44px;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Game Grid - Single Column */
    .game-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .game-header__title {
        font-size: 24px;
    }


    /* ========== Explorer Page ========== */
    .search-input {
        font-size: 16px;
    }


    /* ========== Viewer Page ========== */

    /* Mobile Preview Banner - Show on mobile only */
    .mobile-preview-banner {
        display: flex !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 12px 16px;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-preview-banner__content {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .mobile-preview-banner__icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .mobile-preview-banner__text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: white;
        font-size: 13px;
        line-height: 1.4;
    }

    .mobile-preview-banner__text strong {
        font-weight: 600;
        font-size: 14px;
    }

    .game-viewer {
        max-height: 40vh;
    }

    .creator-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .game-title {
        font-size: 20px;
    }

    .game-description {
        padding-left: calc(40px + var(--space-3));
        font-size: 14px;
    }

    .action-btn {
        width: 44px;
        height: 44px;
    }

    .action-btn img {
        width: 20px;
        height: 20px;
    }
}


/* ============================================
   3. Touch Device Optimization
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .control-btn:hover,
    .nav-item:hover,
    .category-tag:hover {
        background: transparent;
    }

    /* Enlarge all interactive elements for touch */
    button,
    a.nav-item,
    .category-tag,
    .action-btn,
    .control-btn,
    .sort-select,
    .pagination-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Add visual feedback on touch */
    button:active,
    a.nav-item:active,
    .category-tag:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}


/* ============================================
   4. Landscape Orientation (< 1024px)
   ============================================ */
@media (max-width: 1024px) and (orientation: landscape) {

    /* Optimize for horizontal space */
    .game-viewer {
        max-height: 70vh;
    }

    .hero-title {
        font-size: clamp(24px, 6vw, 60px);
    }

    .animated-text {
        font-size: clamp(20px, 5vw, 48px);
    }

    /* Stack game grid horizontally */
    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}


/* ============================================
   5. Main Content Adjustment
   ============================================ */
@media (max-width: 1024px) {
    .main-content {
        padding: var(--space-4);
        margin-left: 0 !important;  /* Remove sidebar margin on mobile (overlay mode) */
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .main-content {
        padding: var(--space-3);
    }
}


/* ============================================
   6. Mobile-View Class Override
   ============================================
   Force 2-column layout for pages with .mobile-view class
   (landing-mobile.html) regardless of screen width
   ============================================ */
.mobile-view .game-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
}

/* Optimize social cards for 2-column layout */
.mobile-view .social-card--extended {
    min-width: 100%;
    max-width: 100%;
}