/* base.css */
:root {
    --minw: 240px;
    --maxw: 480px;
}

/* Vollbildmodus-Hintergrund */
:-webkit-full-screen { background-color: #121214 !important; }
:fullscreen { background-color: #121214 !important; }

/* Globaler Reset und Touch-Performance für Mobilgeräte */
*, *::before, *::after {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Safari-Gummiband-Scrollen komplett unterdrücken */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100svh;
    overflow: hidden !important; 
    position: fixed; 
    overscroll-behavior: none; 
	
	/* 🟢 Verhindert, dass die Seite beim Ziehen elastisch vergrößert/verkleinert wird */
    touch-action: none !important;
}

html { background-color: #000; }

body {
    margin: 0 auto;
    padding: 0; /* Puffer entfernen, das lösen wir sicherer über Flex-Abstände */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    width: 100%;
    height: 100svh; /* Zwingend auf 100% des dynamischen Viewports setzen */
    background-color: #121214;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: fixed; 
}

/* Haupt-Menü Overlay */
#menu-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #121214; display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 3000;
	
	/* 🟢 FIX: Schafft Platz für die obere Buttonleiste im Menü */
    padding-top: 50px; 
}
#menu-overlay h1 { font-size: 42px; color: #f1c40f; margin-bottom: 5px; }
#menu-overlay p { font-size: 16px; color: #aaa; margin: 15px 0 10px 0; }

.menu-btn {
    padding: 15px 30px; font-size: 18px; margin: 10px; width: 220px;
    border: none; border-radius: 8px; background: #3498db; color: white;
    cursor: pointer; font-weight: bold; transition: background 0.2s;
}
.menu-btn:active { background: #2980b9; }

/* Querformat-Warnung (Landscape) */
#landscape-warning {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(18, 18, 20, 0.98); z-index: 9999990;
    justify-content: center; align-items: center; color: #fff;
    font-family: sans-serif; text-align: center;
}
#landscape-warning .warning-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; }
#landscape-warning .phone-icon { font-size: 60px; display: inline-block; animation: rotatePhone 2s infinite ease-in-out; }
#landscape-warning h2 { color: #f1c40f; margin: 15px 0 5px 0; font-size: 24px; }
#landscape-warning p { color: #aaa; margin: 0; font-size: 15px; }

@keyframes rotatePhone {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* Höhen-Filter für die Querformat-Warnung */
@media (orientation: landscape) and (max-height: 666px) {
    #landscape-warning { display: flex !important; }
    #game-container, #menu-overlay, #fullscreen-btn { display: none !important; }
}