/*
 * ═══════════════════════════════════════════════════════════════
 *  NEURAL GAMES — MODULAR MOBILE CSS
 *  Universelle Mobile-Optimierung für alle 1agames HTML-Files
 *  Wird als externe Datei eingebunden: neural-mobile.css
 * ═══════════════════════════════════════════════════════════════
 *
 *  Breakpoints:
 *    xs: max-width: 380px   (kleine Handys)
 *    sm: max-width: 480px   (Handys allgemein)
 *    md: max-width: 768px   (Tablets / große Handys)
 *    landscape: orientation landscape + max-height: 500px
 *
 *  Strategie: ADDITIVE — überschreibt nur was nötig ist,
 *  bricht keine bestehenden inline-Styles.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 1. GLOBALE BASIS-FIXES ─────────────────────────────────── */

*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ─── 2. CANVAS — RESPONSIVE SCALING ────────────────────────── */

canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    touch-action: none;
}

/* Wenn Canvas direkt in body ist */
body > canvas {
    max-width: 100vw !important;
    max-height: 80dvh !important;
}

/* ─── 3. BUTTONS & TOUCH-TARGETS ─────────────────────────────── */

button,
.btn,
.button,
[class*="btn-"],
[class*="-btn"],
.spin-btn,
.action-btn,
.difficulty-btn,
.control-btn,
.game-btn {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Active-State für Touch-Feedback */
button:active,
.btn:active,
.button:active,
[class*="btn-"]:active,
[class*="-btn"]:active {
    transform: scale(0.95);
    transition: transform 0.08s ease;
}

/* ─── 4. TYPOGRAFIE — MOBILE-LESBAR ──────────────────────────── */

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    h1 { font-size: clamp(1.2rem, 6vw, 2rem) !important; }
    h2 { font-size: clamp(1rem, 5vw, 1.6rem) !important; }
    h3 { font-size: clamp(0.9rem, 4vw, 1.3rem) !important; }

    /* Kein Text kleiner als 11px */
    * {
        font-size: max(inherit, 11px);
    }
}

/* ─── 5. COMMON UI-KLASSEN — MOBILE LAYOUT ───────────────────── */

@media (max-width: 768px) {

    /* HUD / Score-Bar */
    #hud,
    .hud,
    .hud-bar,
    [id$="-hud"],
    [class*="hud-"] {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding: 6px 10px !important;
        font-size: clamp(0.65rem, 3.5vw, 1rem) !important;
    }

    /* Header / Title-Bars */
    #header,
    .header,
    .game-header,
    [id$="-header"] {
        padding: 8px 10px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Controls / Button-Gruppen */
    .controls,
    .control-panel,
    .btn-group,
    .btn-grid,
    .button-group,
    .actions {
        gap: 8px !important;
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Panels und Boxen */
    .panel,
    .ui-box,
    .game-panel,
    .info-panel,
    .side-panel {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Stats / Infobereiche */
    .stat-item,
    .stat-row,
    .stat {
        font-size: clamp(0.6rem, 3vw, 0.85rem) !important;
    }

    /* Modal / Overlay / Popup */
    .modal,
    .overlay,
    .ui-layer,
    .msg,
    .popup,
    [class*="modal"],
    [class*="overlay"],
    [id$="-modal"],
    [id$="-overlay"] {
        width: 90vw !important;
        max-width: 90vw !important;
        padding: 20px 16px !important;
        box-sizing: border-box;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%) !important;
        top: 50% !important;
    }
}

/* ─── 6. KLEINE HANDYS (max 480px) ───────────────────────────── */

@media (max-width: 480px) {

    html {
        font-size: 13px;
    }

    /* Buttons breiter & fingerfreundlicher */
    button,
    .btn,
    .button,
    [class*="btn-"],
    [class*="-btn"] {
        min-height: 48px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: clamp(0.7rem, 4vw, 1rem) !important;
    }

    /* Einzeln-span Buttons (SPIN, PLAY etc.) */
    .spin-btn,
    [class*="span-2"] {
        font-size: clamp(0.9rem, 5vw, 1.4rem) !important;
    }

    /* Canvas kleiner auf sehr kleinen Screens */
    canvas {
        max-height: 65dvh !important;
    }

    /* Controls als vertikaler Stack wenn zu eng */
    .controls {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Kleinere letter-spacing bei engen Screens */
    [style*="letter-spacing"],
    .title,
    h1, h2, h3 {
        letter-spacing: 1px !important;
    }
}

/* ─── 7. SEHR KLEINE SCREENS (max 380px) ─────────────────────── */

@media (max-width: 380px) {

    html {
        font-size: 12px;
    }

    button,
    .btn,
    .button {
        min-height: 42px;
        padding: 8px 10px !important;
    }

    canvas {
        max-height: 60dvh !important;
    }

    .hud,
    #hud {
        font-size: 0.6rem !important;
    }
}

/* ─── 8. LANDSCAPE MOBILE — SPEZIALFALL ──────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {

    body {
        flex-direction: row !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    canvas {
        max-height: 90dvh !important;
        max-width: 65vw !important;
    }

    #hud,
    .hud {
        font-size: 0.6rem !important;
        padding: 4px 6px !important;
    }

    button,
    .btn,
    .button {
        min-height: 36px;
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
    }

    /* Verstecke dekorative Elemente bei knappem Platz */
    .scanlines,
    body::before {
        display: none;
    }
}

/* ─── 9. CANVAS-WRAPPER — SCALING FIX ───────────────────────── */

#game-container,
.game-container,
.canvas-wrapper,
[id$="-container"]:has(canvas) {
    max-width: 100vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ─── 10. SCROLLBAR & OVERFLOW FIXES ────────────────────────── */

@media (max-width: 768px) {

    /* Verhindere horizontales Scrollen */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Text-Overflow in kleinen Containern */
    .label,
    .stat-label,
    .hud-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
}

/* ─── 11. INPUT-FELDER & SELECTS ─────────────────────────────── */

@media (max-width: 768px) {

    input[type="range"] {
        height: 36px;
        -webkit-appearance: none;
        width: 100%;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        -webkit-appearance: none;
        background: currentColor;
        border-radius: 50%;
        cursor: pointer;
    }

    select {
        height: 44px;
        font-size: 1rem !important;
        padding: 6px 10px;
        border-radius: 4px;
        -webkit-appearance: none;
        width: 100%;
    }

    input[type="number"],
    input[type="text"] {
        height: 44px;
        font-size: 1rem !important;
        padding: 6px 10px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ─── 12. CSS3 NEURAL STYLE ENHANCEMENTS (MOBILE SAFE) ───────── */

/* Neon-Glow als CSS-Variable mit Fallback */
:root {
    --neural-glow-xs: 0 0 4px;
    --neural-glow-sm: 0 0 8px;
    --neural-glow-md: 0 0 15px;
    --neural-cyan:  #00ffff;
    --neural-pink:  #ff0055;
    --neural-green: #39ff14;
    --neural-gold:  #ffdd00;
    --neural-bg:    #050508;
}

/* Reduziere Glow auf Mobile für bessere Performance */
@media (max-width: 768px) {

    /* Leichtere Shadows für Mobile GPU */
    [style*="text-shadow"] {
        text-shadow: 0 0 8px currentColor !important;
    }

    [style*="box-shadow"] {
        box-shadow: 0 0 12px rgba(0, 255, 255, 0.2) !important;
    }

    /* Scan-Line Overlay — Performance-optimiert */
    body::before {
        background-size: 100% 3px, 2px 100% !important;
        opacity: 0.5 !important;
    }
}

/* ─── 13. TOUCH-JOYSTICK & MOBILE-CONTROLS ───────────────────── */

/* Wenn vorhanden: Touch-Zonen größer machen */
.touch-zone,
.d-pad,
.joystick,
.touch-btn,
.mobile-btn {
    min-width: 60px !important;
    min-height: 60px !important;
}

/* ─── 14. IFRAME & EMBED FIXES ───────────────────────────────── */

@media (max-width: 768px) {

    iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    .iframe-wrapper {
        width: 100% !important;
        overflow: hidden;
    }
}

/* ─── 15. NEURAL GAMES HUB / LISTE ───────────────────────────── */

@media (max-width: 768px) {

    /* Game-Grid für NEURAL-GAMES.html Hub */
    .games-grid,
    .game-grid,
    [class*="game-list"],
    [class*="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .game-card,
    .game-item,
    .card {
        padding: 12px 8px !important;
        font-size: 0.75rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GAME-SPECIFIC PATCHES
   Gezielte Fixes für konkrete mobile Schwachstellen
═══════════════════════════════════════════════════════════════ */

/* ─── NEURAL-FLEET // Schiffe versenken ──────────────────────── */
/* Zwei 10×10 Grids nebeneinander → unmöglich auf Handy.
   Lösung: vertikal stapeln + Zellgröße reduzieren               */

@media (max-width: 820px) {

    /* Stack grids vertically */
    .game-container {
        flex-direction: column !important;
        gap: 18px !important;
        align-items: center !important;
    }

    /* Shrink cell size via CSS variable override */
    :root {
        --grid-size: 28px !important;
    }

    /* Reduce body padding so grids have room */
    body {
        padding: 10px 8px !important;
    }

    /* Log box smaller */
    #log {
        height: 80px !important;
        font-size: 11px !important;
    }

    /* Controls bar: stack vertically */
    #controls {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center;
    }

    #ui-overlay {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Grid labels smaller */
    .grid-wrapper h3 {
        font-size: 0.7rem !important;
        letter-spacing: 2px;
        margin: 6px 0 4px !important;
    }
}

@media (max-width: 380px) {
    :root {
        --grid-size: 24px !important;
    }
}

/* ─── NEURAL-4-GEWINNT // Connect Four ───────────────────────── */
/* Auf 360px: 7 Zellen × ~47px + 6 × 10px Gap = ~389px → Overflow.
   Lösung: Gap reduzieren + Padding kürzen + kleinere Mindestgröße */

@media (max-width: 480px) {

    #board {
        gap: 5px !important;
    }

    #board-outer {
        padding: 8px !important;
    }

    /* Kleinere Zellen auf sehr engen Screens */
    :root {
        --cell-size: clamp(36px, 11.5vw, 70px) !important;
    }

    /* Status-Text kompakter */
    .status-msg {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }

    /* Buttons untereinander wenn kein Platz */
    .controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

@media (max-width: 360px) {
    :root {
        --cell-size: clamp(32px, 10.5vw, 60px) !important;
    }

    #board {
        gap: 4px !important;
    }

    #board-outer {
        padding: 5px !important;
    }
}

/* ─── STARCRAFT RTS // 3D WebGL ──────────────────────────────── */
/* Probleme: Panels überdecken Canvas, HUD zu breit,
   HP-Bars/Nametags triggern Layout-Thrash → Canvas-Glitch.
   Fix: GPU-Compositing + Panel-Collapse auf Mobile           */

/* GPU-Compositing Fix — verhindert Glitch bei Unit-Movement */
canvas {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hp-bar-el,
.nametag {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (max-width: 768px) {

    /* HUD-Top scrollbar statt Overflow-Clip */
    #hud-top {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        min-height: 44px !important;
        flex-wrap: nowrap !important;
        padding: 0 6px !important;
    }

    .hud-section {
        padding: 0 6px !important;
        gap: 4px !important;
        flex-shrink: 0;
    }

    .hud-val {
        font-size: 12px !important;
    }

    .hud-label {
        font-size: 6px !important;
    }

    /* Production & Build Panels: schmaler, scrollbar */
    #prod-panel,
    #build-ui {
        width: 160px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        top: 52px !important;
    }

    .panel {
        padding: 8px !important;
    }

    .btn-grid {
        gap: 4px !important;
    }

    button {
        font-size: 8px !important;
        padding: 6px 4px !important;
    }

    .cost-badge {
        font-size: 6px !important;
    }

    /* Mode-Switcher: unten mitte statt oben rechts */
    #mode-switcher {
        top: auto !important;
        bottom: 16px !important;
        right: 50% !important;
        transform: translateX(50%);
        gap: 6px !important;
    }

    .mode-btn {
        font-size: 9px !important;
        padding: 8px 12px !important;
    }

    /* Minimap kleiner */
    #minimap {
        width: 110px !important;
        height: 110px !important;
        bottom: 64px !important;
    }

    /* Status bar oben links */
    #status-bar {
        bottom: auto !important;
        top: 52px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        font-size: 8px !important;
        max-width: 90vw !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hint Box ausblenden auf Mobile */
    #hint-box {
        display: none !important;
    }

    /* Unit Info Panel kompakter */
    #unit-info {
        min-width: auto !important;
        max-width: 90vw !important;
        bottom: 64px !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
    }

    /* Wave Alert gut sichtbar */
    #wave-alert {
        font-size: 14px !important;
        padding: 10px 24px !important;
    }

    /* End Screen auf Mobile */
    #end-box {
        min-width: auto !important;
        width: 90vw !important;
        padding: 28px 20px !important;
    }
}

@media (max-width: 480px) {
    #prod-panel,
    #build-ui {
        width: 140px !important;
    }

    #minimap {
        width: 88px !important;
        height: 88px !important;
    }
}

/* ─── ENDE neural-mobile.css ─────────────────────────────────── */