* { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; }
body { background-color: #f2f2f2; color: #333; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px; }

/* Kahoot Background */
.pause-body {
    background: linear-gradient(-45deg, #d89e00, #ffb100, #e21b3c, #864cbf);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.container { width: 100%; max-width: 800px; text-align: center; }
h1 { font-size: 2rem; margin-bottom: 15px; color: white; text-shadow: 2px 2px 0px rgba(0,0,0,0.2); }
p { color: white; font-size: 1.1rem; margin-bottom: 30px; padding: 0 10px; line-height: 1.4; }

@media (min-width: 600px) {
    h1 { font-size: 3rem; }
    p { font-size: 1.2rem; margin-bottom: 40px; }
}

/* Menü Kacheln */
.game-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 600px; margin: 0 auto; }
@media (min-width: 600px) { .game-grid { grid-template-columns: 1fr 1fr; } }

.game-card {
    background: white; border-radius: 12px; padding: 30px 20px; text-decoration: none; color: #333;
    box-shadow: 0 8px 0px rgba(0,0,0,0.15); transition: transform 0.1s, box-shadow 0.1s; cursor: pointer;
}
.game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 15px rgba(0,0,0,0.2); }
.game-card:active { transform: translateY(4px); box-shadow: 0 4px 0px rgba(0,0,0,0.15); }
.game-card h2 { font-size: 1.8rem; margin-bottom: 10px; color: inherit; text-shadow: none; }

/* Buttons */
.btn {
    border: none; border-radius: 8px; padding: 12px 24px; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.1s; color: white; width: 100%; max-width: 300px;
}
.btn-blue { background: #1368ce; border-bottom: 6px solid #0d54a8; }
.btn-green { background: #26890c; border-bottom: 6px solid #1e6d0a; }
.btn-red { background: #e21b3c; border-bottom: 6px solid #b81530; }
/* NEU: Der violette Button für 2048 */
.btn-purple { background: #864cbf; border-bottom: 6px solid #6b3a99; }
.btn:active { transform: translateY(4px); border-bottom-width: 2px; }

/* Snailfly Game Container */
#game-container {
    position: relative; width: 100%; max-width: 400px; margin: 0 auto;
    border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background: #70c5ce; /* Flappy Bird Himmelblau */
    touch-action: none; /* Verhindert Scrollen beim Tippen auf dem Handy */
}
canvas { display: block; width: 100%; height: 500px; }

.ui-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.6); color: white; z-index: 10; padding: 20px;
}
.hidden { display: none !important; }
.score-board { background: white; color: #333; padding: 20px; border-radius: 12px; margin-bottom: 20px; width: 100%; text-align: center; border-bottom: 6px solid #ccc; }

/* --- 2048 GAME STYLES --- */
.game-2048-container {
    background: #bbada0; /* Klassischer 2048 Hintergrund */
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1 / 1; /* Macht das Spielfeld exakt quadratisch */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    touch-action: none; /* WICHTIG: Verhindert Scrollen beim Wischen auf dem Handy */
}

.tile {
    background: #cdc1b4; /* Leeres Feld */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #776e65;
    transition: transform 0.1s ease-in-out;
}

/* Die Kahoot-Farben für die Zahlen */
.tile[data-val="2"] { background: #eee4da; }
.tile[data-val="4"] { background: #ede0c8; }
.tile[data-val="8"] { background: #e21b3c; color: white; } /* Rot */
.tile[data-val="16"] { background: #1368ce; color: white; } /* Blau */
.tile[data-val="32"] { background: #d89e00; color: white; } /* Gelb */
.tile[data-val="64"] { background: #26890c; color: white; } /* Grün */
.tile[data-val="128"] { background: #864cbf; color: white; font-size: 1.6rem; } /* Violett */
.tile[data-val="256"] { background: #ffb100; color: white; font-size: 1.6rem; } /* Orange */
.tile[data-val="512"] { background: #b81530; color: white; font-size: 1.6rem; } /* Dunkelrot */
.tile[data-val="1024"] { background: #0d54a8; color: white; font-size: 1.2rem; } /* Dunkelblau */
.tile[data-val="2048"] { background: #1e6d0a; color: white; font-size: 1.2rem; box-shadow: 0 0 15px #1e6d0a; } /* Dunkelgrün leuchtend */

/* Score Header für 2048 */
.score-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 15px auto;
}
.score-box {
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    border-bottom: 4px solid #ccc;
    font-weight: bold;
    color: #333;
    width: 48%;
}
.profile-btn {
    background: white !important;
    color: #333 !important;
    border: none;
    border-bottom: 4px solid #ccc; /* Der graue Kahoot-Schatten */
    padding: 10px 20px;
    border-radius: 8px; /* Leicht abgerundet aber eher eckig */
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.profile-btn.logged-in {
    background: #26890c !important; /* Wird grün wenn eingeloggt */
    color: white !important;
    border-bottom-color: #1e6d0a;
}

/* --- RESPONSIVE HEADER (Wie Hauptmenü) --- */
.app-header {
    display: flex;
    justify-content: flex-end; /* Keine Flamme, also nach rechts pushen */
    align-items: center;
    width: 100%;
    margin: 0 auto 20px auto;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Fallback für sehr schmale Handys: Untereinander anordnen */
@media (max-width: 400px) {
    .app-header {
        flex-direction: column;
        gap: 15px;
    }
    .header-buttons {
        width: 100%;
        flex-direction: column;
    }
    .profile-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Blendet Text auf Handys aus, um Platz im Header zu sparen */
@media (max-width: 600px) {
    .hide-mobile {
        display: none;
    }
}

/* --- SKELETON LOADING (Wie Hauptmenü) --- */
.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    color: transparent !important;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: none !important;
    border: none !important;
}
.skeleton * { visibility: hidden !important; }
.skeleton-dark { background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%); }

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}