/**
 * FC Betreuung - Mobile Game Optimization
 * Ensures all 4 games fit perfectly on mobile screens
 * without overflow or being too squeezed
 */

/* ============================================
   Global Mobile Game Viewport Lock
   ============================================ */
@media (max-width: 768px) {

    /* Prevent horizontal overflow, allow vertical scroll */
    html,
    body {
        overflow-x: hidden;
        overflow-y: auto !important;
        max-width: 100vw;
    }

    /* Force games page to be scrollable */
    body.games-page-body {
        min-height: auto !important;
        height: auto !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
    }

    /* Game page container - directly under header with nice spacing */
    .page {
        padding: 0.5rem;
        padding-top: 75px !important;
        padding-bottom: 2rem;
        max-width: 100vw;
        min-height: auto;
        display: block;
    }

    /* CRITICAL: Override fixed positioning to allow scrolling ONLY when game is visible */
    .page.game-visible {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-top: 75px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ============================================
       CRITICAL FIX: Game Card Containing Block Issue
       The game-card's backdrop-filter and animation create
       a containing block that breaks position:fixed for children.
       We need to neutralize these effects for intro screen.
       ============================================ */

    /* When intro is visible, hide the game-card completely
       so the intro-screen can be positioned relative to viewport */
    .game-card:has(.intro-screen:not(.hidden)) {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* ============================================
       INTRO SCREEN/CARD - Unified Modal Style
       (Makes Memory, Sudoku, Wabenrätsel look like Buchstabensalat)
       ============================================ */

    /* Intro screen becomes a centered card modal on mobile */
    .intro-screen {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
        bottom: auto !important;
        width: 90% !important;
        max-width: 340px !important;
        max-height: 85vh !important;
        height: auto !important;
        z-index: 2000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1.5rem 1.25rem !important;
        text-align: center !important;
        overflow-y: auto !important;
    }

    .intro-screen.hidden {
        display: none !important;
    }

    /* Hide footer when intro screen is active to prevent overlay */
    body:has(.intro-screen:not(.hidden)) .footer {
        display: none !important;
    }

    /* Intro screen icon - Buchstabensalat-style (larger, solid background for transparency) */
    .intro-screen__icon {
        width: 130px !important;
        height: 130px !important;
        margin-bottom: 1rem !important;
        /* Solid light background to fully mask PNG transparency */
        background: linear-gradient(145deg, #fff8f2 0%, #fff0e6 100%) !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 20px rgba(242, 101, 34, 0.15) !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .intro-screen__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Intro screen title */
    .intro-screen__title {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
        color: #333;
    }

    .intro-screen__title span {
        color: #F26522;
    }

    /* Intro screen description */
    .intro-screen__description {
        font-size: 0.95rem !important;
        color: #666 !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Intro screen button */
    .intro-screen .btn--primary,
    .intro-screen #startBtn {
        min-width: 160px !important;
        padding: 0.85rem 2rem !important;
        font-size: 1rem !important;
        border-radius: 50px !important;
    }

    /* Intro card (Buchstabensalat) - same centered position */
    .intro-card {
        margin-top: 0 !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Game container - responsive */
    .game-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Game card - fill width, no margin */
    .game-card {
        width: 100%;
        max-width: calc(100vw - 1rem);
        padding: 0.5rem;
        margin-top: 0 !important;
        border-radius: 16px;
        overflow: hidden;
    }

    /* Back link - centered below game */
    .game-back-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        color: #666;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .game-back-link svg {
        width: 16px;
        height: 16px;
    }

    /* Footer visible only when intro screen is hidden (game is active) */
    body:has(.intro-screen.hidden) .footer,
    body:not(:has(.intro-screen)) .footer {
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1 !important;
        margin-top: 1rem;
    }

    /* Hide footer when intro screen is active */
    body:has(.intro-screen:not(.hidden)) .footer {
        display: none !important;
    }

    /* Game card stays above footer */
    .game-card,
    .card {
        position: relative;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Hide game overlay on mobile */
    .game-overlay {
        display: none !important;
    }
}

/* ============================================
   BUCHSTABENSALAT - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {

    /* Grid should fit screen perfectly */
    .game-grid {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        padding: 0.5rem;
        padding-bottom: 0.25rem;
        gap: 2px;
        margin-bottom: 0 !important;
    }

    /* Cells scale with container */
    .game-cell {
        font-size: clamp(0.65rem, 3vw, 0.9rem);
        border-radius: 8px;
        border-width: 1px;
    }

    /* Wordlist fits screen */
    .wordlist-inline {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wordlist {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .wordlist__item {
        font-size: 0.75rem;
        padding: 4px 10px;
        flex-shrink: 0;
    }

    /* Segmented control */
    .segmented-control {
        border-radius: 16px;
    }

    .segmented-control__btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* REORDER: Selection display above action buttons */
    .card__body {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Selection display - move to position directly under grid */
    .selection-display {
        order: 1 !important;
        margin-top: 0 !important;
        padding: 0.25rem 0.5rem !important;
    }

    .selection-display__label {
        font-size: 0.7rem;
    }

    /* Game status (Found X/Y) - after selection */
    .game-status {
        order: 2 !important;
        margin-top: 0.25rem !important;
    }

    /* Game controls (buttons) - last */
    .game-controls {
        order: 3 !important;
        margin-top: 0.5rem !important;
    }

    /* Make action buttons smaller */
    .game-controls__btn {
        width: 40px !important;
        height: 40px !important;
    }

    .game-controls__btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 400px) {
    .game-grid {
        gap: 1px;
        padding: 4px;
    }

    .game-cell {
        font-size: clamp(0.55rem, 2.8vw, 0.75rem);
        border-radius: 6px;
    }

    .wordlist__item {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* ============================================
   MEMORY - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {

    /* Memory intro screen - compact and centered */
    .intro-screen {
        padding: 1.5rem 1rem !important;
        text-align: center;
    }

    .intro-screen__icon {
        width: 130px !important;
        height: 130px !important;
        margin-bottom: 1rem !important;
        /* Solid background to mask PNG transparency */
        background: linear-gradient(145deg, #fff8f2 0%, #fff0e6 100%) !important;
        padding: 12px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 20px rgba(242, 101, 34, 0.15) !important;
    }

    .intro-screen__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .intro-screen__title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .intro-screen__description {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4;
    }

    /* Memory grid - SMALLER to fit inside card */
    .memory-grid {
        width: calc(100vw - 3rem) !important;
        max-width: 320px !important;
        padding: 0.35rem;
        margin: 0 auto;
    }

    /* Tighter gaps */
    .memory-grid.grid-4x4 {
        gap: 6px;
    }

    .memory-grid.grid-6x6 {
        gap: 4px;
    }

    .memory-grid.grid-8x8 {
        gap: 3px;
    }

    /* Cards - smaller logo */
    .memory-card__logo {
        width: 50%;
        height: 50%;
    }

    /* Segmented control smaller */
    .segmented-control {
        max-width: 320px;
        margin: 0 auto 0.5rem;
    }
}

@media (max-width: 400px) {
    .memory-grid {
        padding: 0.35rem;
    }

    .memory-grid.grid-4x4 {
        gap: 8px;
    }

    .memory-grid.grid-6x6 {
        gap: 4px;
    }

    .memory-grid.grid-8x8 {
        gap: 3px;
    }
}

/* ============================================
   SUDOKU - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {

    /* Sudoku grid - SMALLER to show number pad */
    .sudoku-grid {
        width: calc(100vw - 3rem) !important;
        max-width: 280px !important;
        padding: 0.25rem;
    }

    .sudoku-cell {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }

    /* Number pad - SMALLER and visible */
    .number-pad {
        width: calc(100vw - 3rem);
        max-width: 280px;
        margin: 0.5rem auto 0;
        gap: 4px;
    }

    .number-btn {
        font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    }

    /* Stats sidebar - compact horizontal */
    .game-sidebar {
        position: static !important;
        flex-direction: row !important;
        justify-content: center;
        width: 100%;
        padding: 0.35rem;
        gap: 0.75rem;
        margin-top: 0.35rem;
    }

    .game-stat__value,
    .timer,
    .mistakes-count {
        font-size: 1.2rem;
    }

    .game-stat__label {
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .sudoku-grid {
        max-width: calc(100vw - 1.5rem) !important;
        border-width: 2px;
    }

    .sudoku-cell {
        font-size: 0.95rem;
        border-width: 1px;
    }

    .sudoku-cell:nth-child(3n) {
        border-right-width: 2px;
    }

    .number-pad {
        max-width: calc(100vw - 1.5rem);
        gap: 4px;
    }
}

/* ============================================
   WABENRÄTSEL - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {

    /* Honeycomb scales with screen */
    .honeycomb-wrapper {
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;
    }

    .honeycomb {
        width: min(200px, 55vw);
        height: min(230px, 65vw);
    }

    .hex {
        width: min(60px, 17vw);
        height: min(69px, 19.5vw);
    }

    .hex__letter {
        font-size: clamp(1rem, 4vw, 1.3rem);
    }

    .hex.center .hex__letter {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    /* Current word display */
    .current-word-display {
        padding: 0.5rem 1rem;
        min-height: 40px;
    }

    .current-word-display__text {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }

    /* Word actions - smaller buttons */
    .word-actions {
        gap: 0.5rem;
    }

    .word-action-btn {
        width: 40px;
        height: 40px;
    }

    .word-action-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Found words - compact */
    .found-words {
        max-height: 60px;
        padding: 0.5rem;
    }

    .found-word {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    /* Game header stats */
    .game-header {
        gap: 0.5rem;
    }

    .game-stat__value {
        font-size: 1.3rem;
    }

    .game-stat__label {
        font-size: 0.6rem;
    }
}

@media (max-width: 360px) {
    .honeycomb {
        width: min(170px, 50vw);
        height: min(200px, 58vw);
    }

    .hex {
        width: min(52px, 15vw);
        height: min(60px, 17vw);
    }

    .hex__letter {
        font-size: 0.95rem;
    }

    .hex.center .hex__letter {
        font-size: 1.15rem;
    }

    .current-word-display__text {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .word-action-btn {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   Common Game Elements - Mobile
   ============================================ */
@media (max-width: 768px) {

    /* Intro screen - compact */
    .intro-screen {
        padding: 1rem;
        gap: 0.75rem;
    }

    .intro-screen__icon {
        width: 130px;
        height: 130px;
        padding: 12px;
        background: linear-gradient(145deg, #fff8f2 0%, #fff0e6 100%);
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(242, 101, 34, 0.15);
    }

    .intro-screen__title {
        font-size: 1.6rem;
    }

    .intro-screen__description {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    /* Buttons */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .btn--primary {
        padding: 0.75rem 1.5rem;
    }

    /* Game controls */
    .game-controls {
        gap: 0.5rem;
        margin-top: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Win screen */
    .win-screen {
        padding: 1rem;
        gap: 0.75rem;
    }

    .win-screen__icon {
        font-size: 3rem;
    }

    .win-screen__title {
        font-size: 1.6rem;
    }

    .win-screen__stats {
        gap: 1rem;
    }

    /* Back link */
    .game-back-link {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* ============================================
   Very Small Screens (< 320px)
   ============================================ */
@media (max-width: 320px) {
    .page {
        padding: 0.25rem;
    }

    .game-card {
        padding: 0.5rem;
        border-radius: 16px;
    }

    .intro-screen__icon {
        width: 130px;
        height: 130px;
        background: linear-gradient(145deg, #fff8f2 0%, #fff0e6 100%);
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(242, 101, 34, 0.12);
        padding: 10px;
    }

    .intro-screen__title {
        font-size: 1.4rem;
    }

    .game-grid {
        padding: 3px;
        gap: 1px;
    }

    .game-cell {
        font-size: 0.5rem;
        border-radius: 4px;
    }
}

/* ============================================
   Landscape Mobile Orientation
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .page {
        padding-top: 60px;
    }

    .game-card {
        padding: 0.5rem;
    }

    .intro-screen {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .intro-screen__icon {
        width: 130px;
        height: 130px;
        background: linear-gradient(145deg, #fff8f2 0%, #fff0e6 100%);
        border-radius: 50%;
        padding: 10px;
    }

    /* FINAL OVERRIDE: Hide footer when intro screen is active */
    body:has(.intro-screen:not(.hidden)) .footer,
    body:has(.intro-screen:not(.hidden)) footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}