/* Grundlegende CSS Resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #dbecf3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    overflow: hidden;
    /* Verhindert das Scrollen des gesamten Bodys */
    user-select: none;
    /* Textauswahl deaktivieren für App-Gefühl */
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Entfernt Klick-Highlight auf Mobile */
}

/* Der Game Container kapselt das übergroße Raster */
#game-container {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    /* Erlaubt natives Scrollen für das große Grid */
    cursor: grab;
    /* Fließendes Scrollen auf iOS */
    -webkit-overflow-scrolling: touch;
}

#game-container:active {
    cursor: grabbing;
}

/* Verstecke nativen Scrollbars für ein sauberes Erlebnis */
#game-container::-webkit-scrollbar {
    display: none;
}

#game-container {
    -ms-overflow-style: none;
    /* IE und Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Container für alle Blasen */
#bubble-grid {
    position: relative;
    /* Wir nutzen Flexbox um die Reihen zu arrangieren */
    display: flex;
    flex-direction: column;
    padding: 40px;
    /* Randabstand innen */
    width: max-content;
    /* Ermöglicht das horizontale Scrollen */
}

/* Eine horizontale Reihe von Blasen */
.bubble-row {
    display: flex;
    white-space: nowrap;
}

/* Versetzte Reihen für ein realistisches Wabenmuster */
.bubble-row:nth-child(even) {
    margin-left: 40px;
    /* Verschiebung um eine halbe Blase (40px) */
}

/* Die einzelne Blase als Button aufgebaut */
.bubble {
    width: 80px;
    /* Bildauflösung der Assets (80x80 pro Blase) */
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Verhindert horizontales Stauchen */
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    /* transition: transform 0.05s;  Herauskommentiert falls es beim Wischen stört */
    /* Spritesheet einbinden */
    background-image: url('design/bubbles.png');
    background-repeat: no-repeat;
    /* Das Spritesheet ist 800px x 80px, die Positionierung übernimmt JS */
}

/* Styling für geplatzte Blasen */
.bubble.popped {
    background-image: url('design/plopped.png');
}

/* Kleiner Effekt beim Klicken für etwas visuelles Feedback */
.bubble:active {
    transform: scale(0.92);
}

/* Counter UI Element */
#counter-display {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    /* Klicks gehen hindurch zum Grid */
    z-index: 10;
}

/* Hamburger Menü Icon */
#hamburger-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 20;
    transition: background 0.2s, transform 0.2s;
    color: #444;
}

#hamburger-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
}

#hamburger-btn svg {
    width: 28px;
    height: 28px;
}

#hamburger-btn svg.hidden {
    display: none;
}

/* Menü Overlay - Schwebendes Panel */
#menu-overlay {
    position: fixed;
    top: 80px;
    /* Abstand von oben (unter Hamburger) */
    right: 20px;
    /* Abstand vom rechten Rand */
    z-index: 100;
    pointer-events: none;
    /* Verhindert Klicks auf den unsichtbaren Wrapper */
}

/* Versteckter Zustand des Panels */
#menu-overlay.hidden .menu-content {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: none;
}

/* Das Menü Panel selbst */
.menu-content {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 300px;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    pointer-events: auto;
    /* Erlaubt Klicks im Menü */
}

#close-menu-btn {
    align-self: flex-end;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    margin-bottom: 40px;
    transition: color 0.2s;
}

#close-menu-btn:hover {
    color: #000;
}

#close-menu-btn svg {
    width: 32px;
    height: 32px;
}

/* Icon Buttons Container */
.toggles-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

/* Buttons für Sound und Vibration */
.toggle-btn {
    width: 48%;
    height: 70px;
    border-radius: 16px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #e0e0e0;
    /* Status: Aus / Grau */
    color: #888;
}

/* Aktiver Zustand (Aria-Pressed="true") - Blau */
.toggle-btn[aria-pressed="true"] {
    background: #00aaff;
    color: white;
    box-shadow: 0 6px 16px rgba(0, 170, 255, 0.4);
}

.toggle-btn svg {
    width: 32px;
    height: 32px;
}

/* Trennlinie im Menü */
hr {
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    /* Sehr subtile Trennlinie */
    margin: 20px 0;
}

/* Menü Links und Buttons */
.menu-action-btn,
.menu-link {
    background: transparent;
    border: none;
    padding: 14px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: #333;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: block;
    width: 100%;
}

/* Spezieller Reset Button */
.menu-action-btn {
    background: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-action-btn:active {
    transform: scale(0.96);
}

.menu-link:hover,
.menu-action-btn:hover {
    background: rgba(255, 255, 255, 1);
}

/* Aktuell ausgewählter Menü-Eintrag (Endlos) */
.menu-link.active {
    background: #bce3fb;
    color: #005f99;
    font-weight: 700;
}

/* Impressum Link unten */
.menu-link.small {
    font-size: 14px;
    color: #777;
    margin-top: auto;
    /* Ganz nach unten schieben falls Platz ist */
}

/* =========================================
   Spezifische Styles für den 1024 Modus
   ========================================= */

body[data-mode="1024"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
}

#game-1024-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Verhindert native Klick-Highlights um Interaktionen sauberer zu machen */
    -webkit-tap-highlight-color: transparent;
}

/* Der Wurzelknoten A */
#fractal-root {
    position: relative;
    /* Dynamische Größe: max. 920px oder 92% der kleineren Bildschirmseite (vmin) */
    width: min(920px, 92vmin);
    height: min(920px, 92vmin);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Eine Blase im fraktalen Baum */
.fractal-node {
    display: block;
    /* Verhindert Abstände durch unsichtbare Text-Grundlinien */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* Zwingende Aufhebung aller mobilen iOS/Android Button-Mindestgrößen: */
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Klick Effekt */
.fractal-node:active {
    transform: scale(0.95);
}

/* Wenn eine Blase sich aufteilt, wird sie zum Grid-Container */
.fractal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 0;
    /* Optional: Lücke zwischen den 4 Blasen. Für Bubblewrap 0 empfohlen */
}

.fractal-grid>div {
    min-width: 0;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* End Game Overlay */
#end-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(219, 236, 243, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#end-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.end-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.end-content h2 {
    font-size: 32px;
    color: #333;
}

#restart-btn {
    background: #bce3fb;
    color: #005f99;
    border: 1px solid #9dcbe8;
}

#restart-btn:hover {
    background: #9dcbe8;
}

/* =========================================
   Spezifische Styles für Plopp-Phobia
   ========================================= */

body[data-mode="ppb"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    background-color: #dbecf3;
}

/* Der Game Wrapper zentriert Balken und Matrix und skaliert diese */
#ppb-game-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* Abstand zwischen Balken und Matrix */
    /* Dynamische Skalierung für Viewport-Fit erfolgt über JS transform: scale() */
    transform-origin: center center;
}

/* Sidebar Bereich (Timer + Level) */
#ppb-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Container für den Timer-Balken */
#ppb-timer-container {
    width: 24px;
    height: 400px;
    /* Basis-Höhe, wird mitskaliert */
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 2px solid white;
}

/* Der eigentliche Füllbalken, wächst von unten */
#ppb-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Wird per JS in % geändert */
    background: linear-gradient(to top, #4CAF50, #8BC34A);
    transition: height 0.1s linear, background-color 0.3s ease;
}

/* Level Text Anzeige */
#ppb-level-display {
    font-weight: bold;
    font-size: 18px;
    background: white;
    padding: 6px 14px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    color: #444;
    white-space: nowrap;
}

/* Container für das Grid */
#ppb-main-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Das Raster für die Blasen */
#ppb-grid {
    display: flex;
    flex-direction: column;
    /* Basis Layout, Versatz der Reihen wird übernommen von bubble-row */
}

/* Overlays für Sieg/Niederlage */
#ppb-result-screen,
#ppb-victory-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(219, 236, 243, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#ppb-result-screen.hidden,
#ppb-victory-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Besondere Klasse für Spinnen in ppb */
.bubble.spider {
    background-image: url('design/spider.png');
}

/* ========================================================================= */
/* Spezifische Styles für Plopp-Phobia im Hochformat (Mobilgeräte)           */
/* ========================================================================= */
@media (orientation: portrait) {
    #ppb-game-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
        justify-content: center !important;
        align-items: center !important;
        /* Geändert von flex-start auf center */
    }

    #ppb-sidebar {
        display: contents !important;
        /* Löst die Sidebar auf, Kinder reihen sich direkt untereinander ein */
    }

    #ppb-timer-container {
        order: 2 !important;
        /* Zuerst der Timer ganz oben */
        width: 60% !important;
        height: 24px !important;
        /* Balken wird flach */
        margin: 0 20% !important;
    }

    #ppb-main-area {
        order: 1 !important;
        /* Dann in der Mitte die Matrix */
        align-self: center !important;
        /* Matrix immer mittig zentriert */
    }

    #ppb-level-display {
        order: 3 !important;
        /* Am Ende unter der Matrix das Level */
        position: static !important;
        margin: 0 !important;
        /* Den linken Rand (20px) auf 0 setzen */
    }

    #ppb-timer-bar {
        /* WICHTIG: Hier keine width mehr, das erledigt JavaScript! */
        height: 100% !important;
        top: 0;
        bottom: 0;
        left: 0;
        /* Hintergrund überschreiben wir nicht, da JS die Farbe rot/gelb/grün steuert */
        transition: width 0.1s linear, background-color 0.3s ease !important;
    }
}