/* =============================================================================
   ROBUSTE CANVAS-SKALIERUNG FUR PLATTFORMSPIEL
   - Feste virtuelle Auflösung (1280x720)
   - Automatische Skalierung mit Aspect-Ratio-Erhaltung
   - Letterboxing für nicht-passende Bildschirme
   - Touch-Controls am unteren Rand (Mobile)
   - Unterstützung für alle Geräte: Desktop, Tablet, Handy
   ============================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Verhindere Pull-to-Refresh und Overscroll auf Mobile */
    overscroll-behavior: none;
    touch-action: none;
}

body {
    background: #000; /* Schwarze Letterbox-Balken */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Verhindere Text-Selektion auf Mobile */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Verhindere Zoom auf Mobile */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* =============================================================================
   GAME CONTAINER - Hauptcontainer für Canvas und Touch-Controls
   ============================================================================= */
#game-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000; /* Schwarze Balken für Letterboxing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Canvas oben, Touch-Controls unten */
}

/* =============================================================================
   CANVAS WRAPPER - Container für das skalierte Canvas
   ============================================================================= */
#canvas-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Höhe = Bildschirmhöhe minus Touch-Controls */
    bottom: var(--touch-controls-height, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* =============================================================================
   GAME CANVAS - Das eigentliche Spielfeld
   ============================================================================= */
#gameCanvas {
    display: block;
    /* Interne Auflösung: 1280x720 (von JavaScript gesetzt) */
    /* Sichtbare Größe: von JavaScript dynamisch berechnet */
    background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%);
    /* Pixel-Art-freundliches Rendering */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Keine Glättung für schärfere Grafiken */
    -ms-interpolation-mode: nearest-neighbor;
}

#ui {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    z-index: 10;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#ui > div {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#level { border-color: rgba(52, 152, 219, 0.4); }
#score { border-color: rgba(255, 215, 0, 0.4); }
#lives { border-color: rgba(231, 76, 60, 0.4); }
#timer { border-color: rgba(155, 89, 182, 0.4); }
#coins { border-color: rgba(46, 204, 113, 0.4); }

#level-value { color: #3498DB; font-weight: 700; }
#score-value { color: #FFD700; font-weight: 700; }
#lives-value { color: #E74C3C; font-weight: 700; }
#timer-value { color: #9B59B6; font-weight: 700; }
#coins-value { color: #2ECC71; font-weight: 700; }

#ui.hidden {
    display: none;
}

/* Game Over Screen - Premium Design */
#game-over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1f3d 50%, #1a1a2e 100%);
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 20px;
}

#game-over::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(231, 76, 60, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(192, 57, 43, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

#game-over h1 {
    font-size: 52px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 50%, #922B21 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: none;
}

#game-over p {
    font-size: 18px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
}

/* Level Complete Screen - Premium Design */
#level-complete {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #1d3d2d 50%, #1a1a2e 100%);
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 20px;
}

#level-complete::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(46, 204, 113, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

#level-complete h1 {
    font-size: 48px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: none;
    animation: levelCompleteGlow 2s ease-in-out infinite;
}

@keyframes levelCompleteGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(46, 204, 113, 0.8)); }
}

#level-complete p {
    font-size: 17px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
}

/* Game Complete (Win) Screen - Premium Design */
#game-complete {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #2d3d1f 70%, #1a1a2e 100%);
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 20px;
}

#game-complete::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(46, 204, 113, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255, 165, 0, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

#game-complete h1 {
    font-size: 52px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 30%, #2ECC71 70%, #27AE60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: none;
    animation: winGlow 2s ease-in-out infinite;
}

@keyframes winGlow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); }
    50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)); }
}

#game-complete p {
    font-size: 18px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
}

/* Start Screen - Premium Design (same as Auth) */
#start-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 20px;
}

#start-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

#start-screen h1 {
    font-size: 56px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    font-weight: 800;
    letter-spacing: 2px;
    animation: titleGlow 3s ease-in-out infinite;
}

/* Auth Screen - Premium Design */
#auth-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 20px;
}

#auth-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

#auth-screen h1 {
    font-size: 56px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    font-weight: 800;
    letter-spacing: 2px;
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

/* h1 styles now defined individually per screen above */

/* p styles now defined individually per screen above */

#start-screen p {
    font-size: 15px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.highscore {
    color: #00FF00 !important;
    font-weight: bold;
    margin-top: 10px;
}

button {
    margin-top: 15px;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 6px 20px rgba(255, 165, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* Touch support for tablets */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    -webkit-touch-callout: none;
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

button:hover::before {
    left: 100%;
}

button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(255, 165, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.4);
}

.hidden {
    display: none !important;
}

.bonus {
    color: #2ECC71;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

/* Timer and coins colors are now set via #timer-value and #coins-value */

/* Auth Screen Styles - Premium Design */
#online-status {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#online-status.online {
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

#online-status.offline {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.auth-form {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px 25px;
    border-radius: 20px;
    width: 100%;
    max-width: 340px;
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-form h2 {
    color: #FFD700;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.form-group {
    margin-bottom: 16px;
}

.form-group input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-group input:focus {
    border-color: #FFD700;
    background: rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(255, 215, 0, 0.2);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.error-message {
    color: #FF6B6B;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 18px;
    font-weight: 500;
}

.success-message {
    color: #2ECC71;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 18px;
    font-weight: 500;
}

.auth-switch {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.auth-switch a {
    color: #FFD700;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.auth-switch a:hover {
    color: #FFA500;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.guest-option {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.guest-button {
    background: linear-gradient(135deg, #5D6D7E 0%, #4A5568 100%) !important;
    box-shadow: 0 5px 20px rgba(93, 109, 126, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.guest-button:hover {
    background: linear-gradient(135deg, #6B7C8F 0%, #5A6A7A 100%) !important;
}

.guest-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    font-style: italic;
}

.email-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: -8px 0 12px 0;
    font-style: italic;
}

/* User Info - Premium Design */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 25px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.user-info span {
    color: #FFD700;
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.small-btn {
    padding: 8px 18px;
    font-size: 12px;
    margin-top: 0;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Guest Coins Warning Banner */
.guest-coins-warning {
    background: linear-gradient(90deg, #E74C3C, #C0392B);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 13px;
    animation: pulse 2s infinite;
}

.guest-coins-warning a {
    color: #FFD700;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* My Rank Display - Premium */
.my-rank {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    padding: 12px 25px;
    border-radius: 25px;
    margin: 15px 0;
    font-size: 15px;
    font-weight: 600;
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
}

/* Name input */
.name-input {
    margin: 10px 0;
}

.name-input label {
    display: block;
    margin-bottom: 5px;
    color: #ddd;
    font-size: 14px;
}

.name-input input {
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #FFD700;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    outline: none;
    width: 180px;
}

.name-input input:focus {
    border-color: #FFA500;
    background: rgba(255, 255, 255, 0.2);
}

.name-input input::placeholder {
    color: #888;
}

/* Highscore container - two lists side by side */
.highscore-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* Highscore list - Premium Card Design */
.highscore-list {
    margin: 8px 0;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    min-width: 200px;
    max-width: 260px;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.highscore-list h3 {
    color: #FFD700;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.highscore-list ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highscore-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin: 4px 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.highscore-list li:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border-left-color: #FFD700;
}

/* Top 3 special styling */
.highscore-list li:nth-child(1) {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
    border-left: 3px solid #FFD700;
}

.highscore-list li:nth-child(2) {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05));
    border-left: 3px solid #C0C0C0;
}

.highscore-list li:nth-child(3) {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05));
    border-left: 3px solid #CD7F32;
}

.highscore-list li.current-player {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-left: 3px solid #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.highscore-list .rank {
    color: #FFD700;
    font-weight: 700;
    margin-right: 12px;
    min-width: 24px;
    text-align: center;
}

/* Medal icons for top 3 */
.highscore-list li:nth-child(1) .rank::before { content: ''; }
.highscore-list li:nth-child(2) .rank { color: #C0C0C0; }
.highscore-list li:nth-child(3) .rank { color: #CD7F32; }

.highscore-list .player-name {
    flex: 1;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highscore-list .player-score {
    color: #2ECC71;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

/* User coins display - Premium */
.user-coins, .shop-coins {
    color: #FFD700;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.earned-coins {
    color: #FFD700 !important;
    font-size: 20px !important;
    font-weight: 700;
    padding: 12px 25px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-radius: 25px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    margin: 15px 0;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    display: inline-block;
}

/* Start buttons */
.start-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.start-buttons button {
    margin-top: 0;
}

.shop-button {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%) !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4) !important;
}

.shop-button:hover {
    box-shadow: 0 10px 30px rgba(155, 89, 182, 0.6) !important;
}

/* Shop screen - Premium Design */
#shop-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    color: white;
    z-index: 100;
    overflow-y: auto;
}

#shop-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

#shop-screen h1 {
    font-size: 48px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Shop tabs - Premium */
.shop-tabs {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.shop-tab {
    padding: 12px 30px;
    font-size: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Touch support for tablets */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(155, 89, 182, 0.3);
}

.shop-tab:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1));
    border-color: rgba(155, 89, 182, 0.4);
    color: white;
    transform: none;
    box-shadow: none;
}

.shop-tab.active {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: white;
    border-color: #9B59B6;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

/* Shop content - Premium */
.shop-content {
    width: 100%;
    max-width: 650px;
    flex: 1;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Shop grid - Premium */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 15px;
}

/* Shop item - Premium */
.shop-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.shop-item:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(155, 89, 182, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.shop-item.owned {
    border-color: rgba(46, 204, 113, 0.6);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.2);
}

.shop-item.selected {
    border-color: #FFD700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
}

.shop-item.locked {
    opacity: 0.5;
    filter: grayscale(30%);
}

.item-preview {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.item-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    font-size: 16px;
}

.item-price {
    color: #FFD700;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.item-price.free {
    color: #2ECC71;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.item-status {
    font-size: 12px;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 15px;
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-status.owned {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: #fff;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.4);
}

.item-status.selected {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a2e;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

.item-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    line-height: 1.4;
}

.buy-btn {
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 14px;
    background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%);
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    /* Touch support for tablets */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(39, 174, 96, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buy-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

.buy-btn:disabled {
    background: linear-gradient(135deg, #555, #444);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.select-btn {
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 14px;
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.select-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
}

#shop-close-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%) !important;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
}

/* Accessories Filter & Equipped Section */
.accessories-filters {
    display: flex;
    gap: 8px;
    padding: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.acc-filter {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Touch support for tablets */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(155, 89, 182, 0.3);
}

.acc-filter:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(155, 89, 182, 0.4);
}

.acc-filter.active {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    border-color: #9B59B6;
    color: white;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

.equipped-accessories {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 16px;
    padding: 15px;
    margin: 0 15px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.equipped-accessories h3 {
    color: #9B59B6;
    font-size: 14px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.equipped-slots {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.equipped-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    min-width: 80px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.equipped-slot:hover {
    border-color: rgba(231, 76, 60, 0.5);
    background: rgba(231, 76, 60, 0.1);
}

.equipped-slot .slot-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.equipped-slot .slot-item {
    font-size: 24px;
}

.equipped-slot.has-item {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

/* Accessories Grid */
.accessories-grid {
    grid-template-columns: repeat(3, 1fr);
}

.accessory-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.accessory-item:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(155, 89, 182, 0.4);
    transform: translateY(-3px);
}

.accessory-item.owned {
    border-color: rgba(46, 204, 113, 0.6);
}

.accessory-item.equipped {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
}

.accessory-icon {
    font-size: 40px;
    margin-bottom: 8px;
    display: block;
}

.accessory-name {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
}

.accessory-type {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.accessory-price {
    color: #FFD700;
    font-size: 14px;
    font-weight: 600;
}

.accessory-description {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    line-height: 1.3;
}

.accessory-item .equip-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 12px;
    background: linear-gradient(135deg, #3498DB, #2980B9);
    border: none;
    border-radius: 15px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    /* Touch support for tablets */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(52, 152, 219, 0.3);
}

.accessory-item .equip-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.accessory-item .equip-btn.equipped {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a2e;
}

.accessory-item .buy-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 12px;
}

@media (max-width: 600px) {
    .accessories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .equipped-slots {
        flex-wrap: wrap;
    }

    .equipped-slot {
        min-width: 70px;
        padding: 8px 12px;
    }
}

/* Bear preview in shop - Premium */
.bear-preview {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bear-preview::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 14px;
    background: #FFF8DC;
    border-radius: 50%;
}

/* Register Bonus Banner */
.register-bonus-banner {
    background: linear-gradient(90deg, #27AE60, #2ECC71);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: bold;
}

.register-bonus-banner .highlight {
    color: #FFD700;
    font-size: 16px;
}

/* Level Complete Guest Warning */
.level-guest-warning {
    background: rgba(231, 76, 60, 0.3);
    border: 2px solid #E74C3C;
    padding: 10px 15px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 12px;
}

.level-guest-warning .multiplier {
    color: #FFD700;
    font-weight: bold;
    font-size: 14px;
}

/* Loading spinner */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #FFD700;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Disabled button state */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: linear-gradient(145deg, #2a2a4a, #1a1a2e);
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 215, 0, 0.3);
    color: white;
}

.modal-content h2 {
    margin-bottom: 15px;
}

.modal-content p {
    color: #ccc;
    line-height: 1.6;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Power-up message animation */
@keyframes powerupFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.1);
    }
    40% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.9);
    }
}

.powerup-message {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 1px;
}

/* =============================================================================
   MOBILE TOUCH CONTROLS
   - Feste Höhe am unteren Bildschirmrand
   - Responsive für verschiedene Bildschirmgrößen
   - Touch-Action für optimale Reaktionszeit
   ============================================================================= */

#touch-controls {
    position: fixed;
    /* Mehr Abstand vom unteren Rand für bessere Erreichbarkeit */
    bottom: 15px;
    /* Mehr Abstand von den Seiten, damit Buttons nicht am Rand sind */
    left: 15px;
    right: 15px;
    /* Feste Höhe - wird von JavaScript berücksichtigt */
    height: var(--touch-controls-height, 160px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Größeres Padding für bessere Touch-Bereiche */
    padding: 25px 40px;
    /* Mehr Abstand vom unteren Rand, um versehentliches Rausklicken zu verhindern */
    padding-bottom: max(35px, env(safe-area-inset-bottom));
    pointer-events: none; /* Container fängt keine Events */
    z-index: 1000;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        transparent 100%
    );
    border-radius: 20px;
    /* Smooth transitions bei Orientierungswechsel */
    transition: height 0.2s ease;
}

#touch-controls.hidden {
    display: none !important;
}

.touch-left, .touch-right {
    display: flex;
    gap: 20px;
    pointer-events: auto; /* Buttons fangen Events */
    align-items: center;
}

.touch-btn {
    /* Größere Buttons für bessere Bedienbarkeit */
    width: 80px;
    height: 80px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 4px solid rgba(255, 255, 255, 0.6);
    color: white;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Verhindere Text-Selektion und Zoom */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* Optimierte Touch-Reaktion */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Schnelles visuelles Feedback */
    transition: transform 0.05s ease-out, background 0.05s ease-out, border-color 0.05s ease-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0;
}

.touch-btn:active, .touch-btn.pressed {
    background: rgba(255, 215, 0, 0.6);
    border-color: #FFD700;
    transform: scale(0.93);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 2px 10px rgba(255, 215, 0, 0.4);
}

/* Sprung-Button ist größer und hervorgehoben */
.touch-jump {
    width: 100px;
    height: 100px;
    font-size: 36px;
    background: rgba(255, 215, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.7);
    border-width: 5px;
}

.touch-jump:active, .touch-jump.pressed {
    background: rgba(255, 215, 0, 0.7);
    border-color: #FFD700;
    transform: scale(0.95);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS FUR VERSCHIEDENE GERATE
   ============================================================================= */

/* TABLETS (Portrait) - 768px und kleiner */
@media (max-width: 768px) {
    :root {
        --touch-controls-height: 180px;
    }

    #ui {
        top: 10px;
        left: 10px;
        right: 10px;
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 6px;
        border-radius: 12px;
    }

    #ui > div {
        padding: 5px 10px;
        font-size: 13px;
        border-radius: 15px;
    }

    #game-over h1 {
        font-size: 38px;
    }

    #level-complete h1 {
        font-size: 36px;
    }

    #game-complete h1 {
        font-size: 38px;
    }

    #game-over,
    #level-complete,
    #game-complete {
        padding: 20px 15px;
    }

    #auth-screen h1,
    #start-screen h1 {
        font-size: 40px;
    }

    #start-screen p,
    #game-over p,
    #level-complete p,
    #game-complete p {
        font-size: 14px;
    }

    button {
        padding: 10px 25px;
        font-size: 16px;
    }

    .shop-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #shop-screen,
    #friends-screen {
        padding: 20px 15px;
    }

    #shop-screen h1,
    #friends-screen h1 {
        font-size: 36px;
    }

    .highscore-list {
        min-width: 140px;
        max-width: 200px;
    }

    .highscore-container {
        gap: 10px;
    }
}

/* KLEINE HANDYS (Portrait) - 480px und kleiner */
@media (max-width: 480px) {
    :root {
        --touch-controls-height: 150px;
    }

    .touch-btn {
        width: 70px;
        height: 70px;
        font-size: 28px;
        border-width: 3px;
    }

    .touch-jump {
        width: 85px;
        height: 85px;
        font-size: 32px;
        border-width: 4px;
    }

    #touch-controls {
        /* Bessere Positionierung auf kleinen Bildschirmen */
        bottom: 12px;
        left: 10px;
        right: 10px;
        padding: 15px 25px;
        padding-bottom: max(25px, env(safe-area-inset-bottom));
        gap: 10px;
    }

    .touch-left, .touch-right {
        gap: 15px;
    }

    #ui {
        top: 8px;
        left: 8px;
        right: 8px;
        padding: 8px 10px;
        gap: 4px;
        border-radius: 10px;
    }

    #ui > div {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 12px;
    }

    .highscore-container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .highscore-list {
        min-width: 220px;
        max-width: 300px;
    }

    /* Auth & Start screen responsive */
    #auth-screen,
    #start-screen {
        padding: 20px 15px;
    }

    #auth-screen h1,
    #start-screen h1 {
        font-size: 36px;
    }

    .user-info {
        padding: 8px 15px;
    }

    .user-info span {
        font-size: 16px;
    }

    .auth-form {
        padding: 20px 18px;
        max-width: 100%;
    }

    .auth-form h2 {
        font-size: 22px;
    }

    .form-group input {
        padding: 12px 14px;
        font-size: 14px;
    }

    button {
        padding: 12px 28px;
        font-size: 14px;
    }

    .credits {
        padding: 15px 20px;
        font-size: 11px;
    }
}

/* SEHR KLEINE HANDYS - 360px und kleiner */
@media (max-width: 360px) {
    :root {
        --touch-controls-height: 130px;
    }

    .touch-btn {
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-width: 3px;
    }

    .touch-jump {
        width: 75px;
        height: 75px;
        font-size: 28px;
        border-width: 3px;
    }

    #touch-controls {
        /* Bessere Positionierung auf sehr kleinen Bildschirmen */
        bottom: 10px;
        left: 8px;
        right: 8px;
        padding: 12px 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .touch-left, .touch-right {
        gap: 12px;
    }

    #ui > div {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* LANDSCAPE MODUS AUF MOBILE - Kompakte Controls */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --touch-controls-height: 100px;
    }

    #touch-controls {
        /* Bessere Positionierung im Landscape-Modus */
        bottom: 10px;
        left: 20px;
        right: 20px;
        padding: 10px 30px;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }

    .touch-btn {
        width: 55px;
        height: 55px;
        font-size: 22px;
        border-width: 3px;
    }

    .touch-jump {
        width: 70px;
        height: 70px;
        font-size: 26px;
        border-width: 3px;
    }

    .touch-left, .touch-right {
        gap: 15px;
    }

    #ui {
        top: 5px;
        left: 5px;
        right: 5px;
        padding: 6px 10px;
        gap: 4px;
    }

    #ui > div {
        padding: 3px 8px;
        font-size: 11px;
    }
}

/* SEHR FLACHE LANDSCHAFTS-DISPLAYS - z.B. breite Handys */
@media (max-height: 400px) and (orientation: landscape) {
    :root {
        --touch-controls-height: 85px;
    }

    .touch-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        border-width: 2px;
    }

    .touch-jump {
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-width: 2px;
    }

    #touch-controls {
        /* Bessere Positionierung auf sehr flachen Displays */
        bottom: 8px;
        left: 15px;
        right: 15px;
        padding: 8px 25px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    #ui {
        top: 3px;
        padding: 5px 8px;
    }

    #ui > div {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* GROSSE TABLETS (Landscape) - 1024px und größer */
@media (min-width: 1024px) and (max-width: 1366px) {
    :root {
        --touch-controls-height: 170px;
    }

    .touch-btn {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .touch-jump {
        width: 90px;
        height: 90px;
        font-size: 32px;
    }
}

/* DESKTOP - Touch-Controls nur bei Bedarf anzeigen */
@media (hover: hover) and (pointer: fine) {
    /* Desktop mit Maus - keine Touch-Controls nötig */
    #touch-controls {
        display: none !important;
    }
}

/* =============================================================================
   FRIENDS SCREEN
   ============================================================================= */

.friends-button {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%) !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
}

.friends-button:hover {
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.6) !important;
}

/* Friends Screen - Premium Design */
#friends-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    color: white;
    z-index: 100;
    overflow-y: auto;
}

#friends-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(52, 152, 219, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

#friends-screen h1 {
    font-size: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 50%, #1ABC9C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
}

#friends-screen h3 {
    color: #3498DB;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Freund hinzufügen Sektion - Premium */
.friends-add-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    margin-bottom: 25px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.search-form {
    display: flex;
    gap: 12px;
}

.search-form input {
    flex: 1;
    padding: 12px 18px;
    font-size: 15px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    outline: none;
    transition: all 0.3s ease;
}

.search-form input:focus {
    border-color: #3498DB;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
}

.search-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-form button {
    padding: 12px 24px;
    margin-top: 0;
    font-size: 14px;
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4) !important;
}

.search-results {
    margin-top: 15px;
    max-height: 150px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.05));
    border-color: rgba(52, 152, 219, 0.3);
}

.search-result-item .username {
    color: #fff;
    font-weight: 600;
}

.search-result-item button {
    padding: 8px 18px;
    margin-top: 0;
    font-size: 12px;
    background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%);
}

.search-result-item button:disabled {
    background: #555;
}

/* Friends Tabs - Premium */
.friends-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 420px;
    justify-content: center;
}

.friends-tab {
    padding: 10px 24px;
    font-size: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.friends-tab:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1));
    border-color: rgba(52, 152, 219, 0.4);
    color: white;
    transform: none;
    box-shadow: none;
}

.friends-tab.active {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: white;
    border-color: #3498DB;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

/* Friends Content - Premium */
.friends-content {
    display: none;
    width: 100%;
    max-width: 420px;
}

.friends-content.active {
    display: block;
}

.friends-list-content {
    max-height: 350px;
    overflow-y: auto;
    padding: 5px;
}

.empty-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* Friend Item - Premium */
.friend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.friend-item:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.05));
    border-color: rgba(52, 152, 219, 0.3);
    transform: translateX(5px);
}

.friend-info {
    flex: 1;
}

.friend-info .friend-name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}

.friend-info .friend-score {
    color: #FFD700;
    font-size: 13px;
    font-weight: 600;
}

.friend-info .friend-status {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.friend-actions {
    display: flex;
    gap: 10px;
}

.friend-actions button {
    padding: 8px 16px;
    margin-top: 0;
    font-size: 12px;
}

.btn-accept {
    background: linear-gradient(180deg, #27AE60 0%, #1E8449 100%) !important;
}

.btn-decline, .btn-remove {
    background: linear-gradient(180deg, #E74C3C 0%, #C0392B 100%) !important;
}

.btn-cancel {
    background: linear-gradient(180deg, #7F8C8D 0%, #606060 100%) !important;
}

#friends-close-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%) !important;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
}

/* =============================================================================
   DAILY CHALLENGE MODAL - Premium Design
   ============================================================================= */

#challenge-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#challenge-modal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(255, 165, 0, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.challenge-modal-content {
    background: linear-gradient(145deg, rgba(42, 42, 74, 0.9), rgba(26, 26, 46, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 35px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.4);
    color: white;
    animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.challenge-modal-content h2 {
    font-size: 28px;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#challenge-info {
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.challenge-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.challenge-description {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
    line-height: 1.6;
}

.challenge-reward {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
}

.challenge-reward span {
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.challenge-difficulty {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.challenge-difficulty.easy {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

.challenge-difficulty.medium {
    background: linear-gradient(135deg, #F39C12, #E67E22);
    color: white;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.challenge-difficulty.hard {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.challenge-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.challenge-actions button {
    padding: 14px 32px;
    font-size: 15px;
    margin-top: 0;
    min-width: 140px;
}

.challenge-actions .btn-accept {
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
}

.challenge-actions .btn-decline {
    background: linear-gradient(135deg, #7F8C8D 0%, #606060 100%) !important;
    box-shadow: 0 6px 20px rgba(127, 140, 141, 0.3) !important;
}

.challenge-status {
    margin-top: 15px;
}

.challenge-progress {
    margin-bottom: 25px;
}

.progress-bar {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    height: 24px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    background: linear-gradient(90deg, #27AE60, #2ECC71, #58D68D);
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 12px 12px 0 0;
}

#challenge-progress-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 600;
}

.challenge-completed-text,
.challenge-claimed-text {
    font-size: 20px;
    color: #2ECC71;
    font-weight: 700;
    margin-bottom: 25px;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
}

.challenge-declined-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 25px;
}

#challenge-claim-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #1a1a2e !important;
    padding: 14px 35px;
    font-size: 16px;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5) !important;
    animation: claimPulse 2s ease-in-out infinite;
}

@keyframes claimPulse {
    0%, 100% { box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 6px 35px rgba(255, 215, 0, 0.8); }
}

#challenge-continue-btn,
#challenge-done-btn,
#challenge-skip-btn {
    padding: 14px 35px;
    font-size: 15px;
}

/* Challenge HUD während des Spiels - Premium */
#challenge-hud {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 24px;
    border-radius: 25px;
    color: white;
    font-size: 13px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

#challenge-hud .challenge-hud-title {
    color: #FFD700;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

#challenge-hud .challenge-hud-progress {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

#challenge-hud.completed {
    border-color: rgba(46, 204, 113, 0.6);
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.3), rgba(46, 204, 113, 0.2));
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3);
}

#challenge-hud.completed .challenge-hud-title {
    color: #2ECC71;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

/* =============================================================================
   ACHIEVEMENTS SCREEN - Premium Design
   ============================================================================= */

.achievements-button {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%) !important;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4) !important;
}

.achievements-button:hover {
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.6) !important;
}

#achievements-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    color: white;
    z-index: 100;
    overflow-y: auto;
}

#achievements-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(243, 156, 18, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(230, 126, 34, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

#achievements-screen h1 {
    font-size: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 50%, #D68910 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Achievement Stats */
.achievements-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.achievement-stat {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(243, 156, 18, 0.3);
    min-width: 100px;
}

.achievement-stat .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #F39C12;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
}

.achievement-stat .stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Achievements Progress Bar */
.achievements-progress-bar {
    width: 100%;
    max-width: 500px;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievements-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F39C12, #E67E22, #F39C12);
    background-size: 200% 100%;
    animation: progressShine 2s linear infinite;
    border-radius: 10px;
    transition: width 0.5s ease;
    width: 0%;
}

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

/* Achievements Filter */
.achievements-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
}

.filter-btn {
    padding: 8px 16px;
    font-size: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn:hover {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1));
    border-color: rgba(243, 156, 18, 0.4);
    color: white;
    transform: none;
    box-shadow: none;
}

.filter-btn.active {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    color: white;
    border-color: #F39C12;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

/* Achievements Grid */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    width: 100%;
    max-width: 900px;
    padding: 10px;
}

/* Achievement Card */
.achievement-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.achievement-card:hover {
    transform: translateY(-3px);
    border-color: rgba(243, 156, 18, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.achievement-card.unlocked {
    border-color: rgba(46, 204, 113, 0.5);
    background: linear-gradient(145deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.05));
}

.achievement-card.unlocked::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-card.unlocked::before {
    content: '✓';
    position: absolute;
    top: 13px;
    right: 16px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
}

.achievement-card.locked {
    opacity: 0.6;
    filter: grayscale(30%);
}

.achievement-card.secret.locked {
    background: linear-gradient(145deg, rgba(127, 140, 141, 0.15), rgba(127, 140, 141, 0.05));
    border-color: rgba(127, 140, 141, 0.3);
}

/* Achievement Icon */
.achievement-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.achievement-card.unlocked .achievement-icon {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.3), rgba(243, 156, 18, 0.1));
    border-color: rgba(243, 156, 18, 0.4);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.3);
}

/* Achievement Content */
.achievement-content {
    flex: 1;
    min-width: 0;
}

.achievement-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.achievement-card.unlocked .achievement-title {
    color: #F39C12;
}

.achievement-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Achievement Progress */
.achievement-progress-container {
    margin-bottom: 8px;
}

.achievement-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.achievement-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #F39C12, #E67E22);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.achievement-card.unlocked .achievement-progress-bar-fill {
    background: linear-gradient(90deg, #2ECC71, #27AE60);
}

.achievement-progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Achievement Reward */
.achievement-reward {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-radius: 12px;
    font-size: 12px;
    color: #FFD700;
    font-weight: 600;
}

.achievement-card.unlocked .achievement-reward {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(46, 204, 113, 0.1));
    color: #2ECC71;
}

/* Achievement Category Badge */
.achievement-category {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#achievements-close-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%) !important;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
}

/* Achievement Unlock Animation */
@keyframes achievementUnlock {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(243, 156, 18, 0.6); }
    100% { transform: scale(1); }
}

.achievement-card.newly-unlocked {
    animation: achievementUnlock 0.5s ease;
}

/* Achievement Notification Toast */
.achievement-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(243, 156, 18, 0.5);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: toastSlideIn 0.5s ease, toastSlideOut 0.5s ease 4.5s forwards;
    max-width: 350px;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.achievement-toast .toast-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.3), rgba(243, 156, 18, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 2px solid rgba(243, 156, 18, 0.4);
}

.achievement-toast .toast-content {
    flex: 1;
}

.achievement-toast .toast-title {
    font-size: 12px;
    color: #F39C12;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.achievement-toast .toast-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 3px;
}

.achievement-toast .toast-reward {
    font-size: 13px;
    color: #FFD700;
}

/* Responsive */
@media (max-width: 768px) {
    .achievements-stats {
        gap: 10px;
    }

    .achievement-stat {
        padding: 12px 18px;
        min-width: 80px;
    }

    .achievement-stat .stat-value {
        font-size: 22px;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .filter-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    #achievements-screen h1 {
        font-size: 36px;
    }

    .achievement-toast {
        bottom: 20px;
        right: 20px;
        left: 20px;
        max-width: none;
    }
}

/* =============================================================================
   USER PROFILE MODAL - Premium Design
   ============================================================================= */

#profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 250;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.profile-modal-content {
    background: linear-gradient(145deg, rgba(42, 42, 74, 0.95), rgba(26, 26, 46, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(155, 89, 182, 0.4);
    color: white;
    position: relative;
    animation: profileSlideIn 0.4s ease-out;
}

@keyframes profileSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.profile-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.8), rgba(192, 57, 43, 0.8));
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.profile-close:hover {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
}

/* Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border: 4px solid rgba(155, 89, 182, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.profile-avatar::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 18px;
    background: #FFF8DC;
    border-radius: 50%;
    top: 20px;
}

.profile-title h2 {
    font-size: 28px;
    margin: 0 0 5px 0;
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.profile-member-since {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Profile Stats Grid */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.profile-stat-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border-radius: 16px;
    padding: 15px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.profile-stat-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    transform: translateY(-3px);
}

.profile-stat-card.highlight {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border-color: rgba(255, 215, 0, 0.3);
}

.profile-stat-card .stat-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.profile-stat-card .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.profile-stat-card.highlight .stat-value {
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.profile-stat-card .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Profile Details */
.profile-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-section h3 {
    font-size: 14px;
    color: #9B59B6;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.profile-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.detail-value {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

/* Profile Recent Achievements */
.profile-achievements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-achievement-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1));
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.profile-achievement-badge .badge-icon {
    font-size: 16px;
}

.profile-achievement-badge .badge-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Profile Actions */
.profile-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.profile-actions button {
    margin-top: 0;
}

/* Clickable username in highscores */
.highscore-list .player-name.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.highscore-list .player-name.clickable:hover {
    color: #9B59B6;
    text-decoration: underline;
}

/* Profile Banner */
.profile-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    z-index: 0;
}

.profile-modal-content {
    padding-top: 80px;
}

.profile-close {
    z-index: 10;
}

.profile-header {
    position: relative;
    z-index: 1;
}

/* Profile User Title (Badge) */
.profile-user-title {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin: 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-user-title:empty {
    display: none;
}

/* Profile Bio */
.profile-bio {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-bio p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
}

.profile-bio:has(p:empty) {
    display: none;
}

/* Profile Privacy Notice */
.profile-privacy-notice {
    background: linear-gradient(145deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 14px;
}

/* Profile Activity Feed */
.profile-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}

.activity-text {
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.activity-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* Profile Edit Modal */
#profile-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 260;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.profile-edit-content {
    background: linear-gradient(145deg, rgba(42, 42, 74, 0.95), rgba(26, 26, 46, 0.98));
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(155, 89, 182, 0.4);
    color: white;
    position: relative;
    animation: profileSlideIn 0.4s ease-out;
}

.profile-edit-content h2 {
    font-size: 24px;
    margin: 0 0 25px 0;
    text-align: center;
    background: linear-gradient(135deg, #9B59B6, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-edit-section {
    margin-bottom: 25px;
}

.profile-edit-section label {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-edit-section h3 {
    font-size: 16px;
    color: #9B59B6;
    margin: 0 0 15px 0;
}

.profile-edit-section textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid rgba(155, 89, 182, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 14px;
    resize: vertical;
    transition: all 0.3s ease;
}

.profile-edit-section textarea:focus {
    outline: none;
    border-color: #9B59B6;
    background: rgba(255, 255, 255, 0.08);
}

.char-counter {
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}

/* Banner Selection Grid */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.banner-option {
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.banner-option:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.banner-option.selected {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.banner-option.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.banner-option.locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

.banner-option .banner-name {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Title Selection Grid */
.title-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.title-option {
    padding: 8px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.title-option:hover {
    transform: scale(1.05);
}

.title-option.selected {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.title-option.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.title-option.locked::before {
    content: '🔒 ';
}

/* Privacy Options */
.privacy-option {
    margin-bottom: 12px;
}

.privacy-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: none;
    letter-spacing: normal;
}

.privacy-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #9B59B6;
    cursor: pointer;
}

/* Profile Edit Actions */
.profile-edit-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 25px;
}

.btn-primary {
    padding: 12px 30px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4);
}

.btn-secondary {
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Player Comparison Modal */
#compare-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 260;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.compare-modal-content {
    background: linear-gradient(145deg, rgba(42, 42, 74, 0.95), rgba(26, 26, 46, 0.98));
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 30px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(155, 89, 182, 0.4);
    color: white;
    position: relative;
    animation: profileSlideIn 0.4s ease-out;
}

.compare-modal-content h2 {
    font-size: 24px;
    margin: 0 0 25px 0;
    text-align: center;
    background: linear-gradient(135deg, #E74C3C, #F39C12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.compare-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.compare-player {
    flex: 1;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.compare-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border: 3px solid rgba(155, 89, 182, 0.5);
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.compare-avatar::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 14px;
    background: #FFF8DC;
    border-radius: 50%;
    top: 16px;
}

.compare-player h3 {
    font-size: 18px;
    margin: 0 0 15px 0;
    color: #9B59B6;
}

.compare-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compare-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.compare-stat-row.winner {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.05));
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.compare-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.compare-stat-value {
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.compare-stat-row.winner .compare-stat-value {
    color: #2ECC71;
}

.compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    color: #E74C3C;
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
    padding: 0 10px;
}

.compare-summary {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* Responsive Profile */
@media (max-width: 500px) {
    .profile-modal-content {
        padding: 20px;
        padding-top: 80px;
    }

    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-title h2 {
        font-size: 24px;
    }

    .profile-avatar {
        width: 70px;
        height: 70px;
    }

    .compare-container {
        flex-direction: column;
    }

    .compare-vs {
        padding: 10px 0;
    }

    .banner-grid {
        grid-template-columns: 1fr;
    }
}

/* Credits - Premium Design */
.credits {
    margin-top: 30px;
    padding: 20px 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.credits p {
    margin: 6px 0;
    line-height: 1.5;
}

.credits strong {
    color: #FFD700;
    font-weight: 600;
}

#auth-screen .credits {
    max-width: 400px;
}

/* =============================================================================
   SAFE AREA INSETS FÜR GERÄTE MIT NOTCH (iPhone X+, etc.)
   ============================================================================= */
@supports (padding: env(safe-area-inset-bottom)) {
    #touch-controls {
        /* Zusätzlicher Abstand für Geräte mit Home-Indicator */
        bottom: calc(15px + env(safe-area-inset-bottom));
        padding-bottom: 20px;
    }

    #game-container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* =============================================================================
   DEBUG MODUS - Zeigt Skalierungsinformationen an
   Aktivieren mit: body.debug-scaling
   ============================================================================= */
body.debug-scaling #gameCanvas {
    outline: 3px solid red;
}

body.debug-scaling #canvas-wrapper::after {
    content: 'Canvas Area';
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 9999;
}

body.debug-scaling #touch-controls {
    outline: 3px solid blue;
}

/* =============================================================================
   PRINT STYLES - Verstecke Spiel beim Drucken
   ============================================================================= */
@media print {
    #game-container {
        display: none;
    }
}