/* --- GRUNDSTIL & LAYOUT --- */
body { 
    background: #121212; 
    color: #e0e0e0; 
    font-family: 'Segoe UI', Roboto, sans-serif; 
    display: flex; 
    justify-content: center; 
    padding: 20px; 
    margin: 0; 
    touch-action: manipulation;
}

.dashboard { 
    display: flex; 
    gap: 30px; 
    max-width: 1200px; 
    width: 100%; 
    flex-wrap: wrap; 
}

/* --- SPIELFELD --- */
.game-section { 
    flex: 2; 
    background: #1e1e1e; 
    padding: 25px; 
    border-radius: 20px; 
    text-align: center; 
    min-width: 600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.game-section h1 {
    font-size: 2.8rem; /* Größerer Fokus */
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.3);
}

#game-container { 
    position: relative; 
    width: 100%; 
    height: 150px; 
    background: #252525; 
    border: 2px solid #333; 
    overflow: hidden; 
    border-radius: 12px; 
    margin: 20px 0; 
}

#line { 
    position: absolute; 
    left: 50px; 
    top: 0; 
    bottom: 0; 
    width: 4px; 
    background: linear-gradient(to bottom, #e74c3c, #c0392b); 
    box-shadow: 0 0 15px #e74c3c; 
    z-index: 10; 
}

#band { position: absolute; width: 100%; height: 100%; }

.number { 
    position: absolute; 
    font-size: 55px; 
    font-weight: 900; 
    top: 35px; 
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.1s linear;
    white-space: nowrap;
}

/* --- OVERLAYS & MODALS --- */
#start-overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 20; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; /* Gleiche Rundung wie der Container */
}

.start-btn { 
    background: #2ecc71; 
    color: white; 
    border: none; 
    padding: 12px 30px; /* Weniger Padding macht ihn kompakter */
    font-size: 18px;    /* Etwas kleinere Schrift */
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    box-shadow: 0 4px 15px rgba(46,204,113,0.3);
    transition: transform 0.2s, background 0.2s; 
}

.start-btn:hover { transform: scale(1.05); background: #27ae60; }

/* --- SIDEBAR & RANKING --- */
.sidebar { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 320px; }

.card { 
    background: #1e1e1e; padding: 18px; border-radius: 15px; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); border: 1px solid #333;
}

h3 { 
    margin-top: 0; color: #3498db; border-bottom: 2px solid #333; 
    padding-bottom: 10px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px;
}

.item { 
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; margin-bottom: 8px; background: #252525; 
    border-radius: 8px; font-size: 14px; transition: all 0.2s;
}
.item:hover { transform: translateX(5px); background: #2d2d2d; }

.top1 { 
    border: 1px solid #ffd700; color: #ffd700; font-weight: bold; 
    background: linear-gradient(90deg, #252525, #3d3515);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.score-badge {
    background: #333; padding: 3px 10px; border-radius: 15px;
    color: #f1c40f; font-weight: bold; font-family: monospace;
}

/* --- NUMPAD --- */
.numpad { 
    display: grid; 
    grid-template-columns: repeat(3, 65px); 
    gap: 12px; 
    justify-content: center; 
    margin: 25px auto; 
}
/* Erzwungene Sortierung durch höhere Spezifität */
.numpad.layout-pc #btn-7, .numpad.layout-pc #btn-8, .numpad.layout-pc #btn-9 { order: 1 !important; }
.numpad.layout-pc #btn-4, .numpad.layout-pc #btn-5, .numpad.layout-pc #btn-6 { order: 2 !important; }
.numpad.layout-pc #btn-1, .numpad.layout-pc #btn-2, .numpad.layout-pc #btn-3 { order: 3 !important; }
.numpad.layout-pc #btn-0 { order: 4 !important; }

.numpad.layout-phone #btn-1, .numpad.layout-phone #btn-2, .numpad.layout-phone #btn-3 { order: 1 !important; }
.numpad.layout-phone #btn-4, .numpad.layout-phone #btn-5, .numpad.layout-phone #btn-6 { order: 2 !important; }
.numpad.layout-phone #btn-7, .numpad.layout-phone #btn-8, .numpad.layout-phone #btn-9 { order: 3 !important; }
.numpad.layout-phone #btn-0 { order: 4 !important; }

.numpad button { 
    width: 65px; height: 65px; background: #2c3e50; color: white; 
    border: none; border-radius: 10px; font-size: 24px; font-weight: bold; 
    cursor: pointer; box-shadow: 0 5px #1a252f; transition: all 0.1s;
    /* WICHTIG: Damit 'order' funktioniert */
    display: flex; align-items: center; justify-content: center;
}

.numpad button:active { box-shadow: 0 0px; transform: translateY(4px); }

/* --- FEEDBACK EFFEKTE --- */
.numpad-hit { background: #2ecc71 !important; box-shadow: 0 0 20px #2ecc71 !important; transform: scale(0.95); }
.numpad-miss { background: #e74c3c !important; box-shadow: 0 0 20px #e74c3c !important; }

/* --- ANIMATIONEN & FEEDBACK --- */
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(5px); } 75% { transform: translateX(-5px); } }
.correct-hit { color: #2ecc71 !important; transform: scale(1.8); opacity: 0; transition: all 0.3s; }
.wrong-hit { color: #e74c3c !important; animation: shake 0.2s; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .dashboard { flex-direction: column; padding: 10px; }
    .game-section, .sidebar { min-width: 100%; padding: 15px; }
    .numpad { grid-template-columns: repeat(3, 80px); gap: 15px; }
    .numpad button { width: 80px; height: 80px; font-size: 28px; }
    
    .number {
        font-size: 8vw; /* Nutzt die Breite für perfekte Skalierung */
        top: 35px;
        font-weight: 800;
    } /* <-- Hier war die Klammer vorher falsch gesetzt */

    #game-container {
        height: 110px;
    }
}
/* 3. SPEZIAL-MODUS: LANDSCAPE (Querformat Handy) */
@media (orientation: landscape) and (max-height: 500px) {
    body { padding: 5px; overflow: hidden; }
    .dashboard { flex-direction: row; gap: 10px; flex-wrap: nowrap; }
    .sidebar { display: none !important; }
    .game-section { padding: 8px; flex: 1; min-width: auto; }
	.game-section h1 { 
        font-size: 1.4rem !important; 
    }
	
	@keyframes pulse {
		0% { transform: scale(1); box-shadow: 0 4px 15px rgba(46,204,113,0.3); }
		50% { transform: scale(1.05); box-shadow: 0 4px 25px rgba(46,204,113,0.5); }
		100% { transform: scale(1); box-shadow: 0 4px 15px rgba(46,204,113,0.3); }
	}

    .start-btn {
		animation: pulse 2s infinite ease-in-out;
        padding: 8px 20px;
        font-size: 16px;
    }
    /* Anzeigen kompakt nebeneinander */
    .game-section h1 { font-size: 2.2rem !important; margin: 0 !important; display: inline-block; }
    #difficulty-indicator, #score-display { display: inline-block; margin: 0 8px; font-size: 0.9rem; }
    
    /*#game-container { height: 75px !important; margin: 5px 0 !important; }
    .number { font-size: 35px !important; top: 0 !important; line-height: 75px; }
	*/
	#game-container { 
        height: 85px !important; /* Etwas erhöht für mehr Abstand */
        padding: 5px 0;          /* Interner Abstand oben/unten */
        margin: 5px 0 !important; 
    }
    .number { 
        font-size: 38px !important; 
        line-height: 75px;       /* Zentriert die Zahl vertikal im Container */
        top: 5px !important;     /* Kleiner fixer Abstand von oben */
    }
    /* DAUMEN-NUMPAD (5 Spalten, 2 Reihen) */
 

/* --- 3. SPEZIAL-ANPASSUNGEN (Media Queries) --- */

/* Hochkant-Handy: Größere Tasten */
@media (max-width: 768px) {
    .numpad { grid-template-columns: repeat(3, 80px); gap: 15px; }
    .numpad button { width: 80px; height: 80px; font-size: 28px; }
    #btn-0 { grid-column: span 3; } /* 0 über die ganze Breite im Hochformat */
}

/* Querformat-Handy: 5 Spalten Layout (Daumen-freundlich) */
@media (orientation: landscape) and (max-height: 500px) {
    .numpad {
        grid-template-columns: repeat(5, 1fr) !important; 
        grid-template-rows: repeat(2, 45px) !important;
        gap: 6px !important; 
        max-width: 450px; 
        margin: 5px auto !important;
    }
    .numpad button { width: auto !important; height: 45px !important; font-size: 18px !important; }
    #btn-0 { grid-column: span 1 !important; } /* Im Querformat nimmt die 0 nur 1 Platz ein */
}

/* 4. SPEZIAL-MODUS: PORTRAIT (Hochkant Handy) */
@media (max-width: 768px) and (orientation: portrait) {
	 html, body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
    }
    .dashboard {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
    }
    .game-section, .sidebar {
        width: 100% !important;
        min-width: 0 !important; /* Hebt das min-width: 600px auf! */
        box-sizing: border-box;
    }
    #game-container { height: 110px; }
    .number { font-size: 40px; top: 25px; }
    .numpad { grid-template-columns: repeat(3, 1fr); max-width: 300px; }
    .numpad button { height: 65px; order: unset !important; }
    #btn-0 { grid-column: span 3 !important; }
    #rotate-device-hint { display: flex; }
}

/* 5. EFFEKTE & OVERLAYS */
#rotate-device-hint {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(18, 18, 18, 0.95); z-index: 9999; align-items: center; justify-content: center;
    flex-direction: column; text-align: center;
}
.hint-content p {
    font-size: 18px;
    margin: 20px;
    color: #3498db;
}

/* Animiertes Handy-Icon */
.phone-icon {
    font-size: 50px;
    animation: rotatePhone 2s infinite ease-in-out;
}

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

#rotate-device-hint button {
    background: #444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
/* Das Laufband leuchtet leicht rot, wenn das Limit erreicht ist */
#band.at-limit {
    border-color: #ff4d4d;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
    transition: all 0.5s ease;
}

/* Effekt für das Laufband am Limit */
#band.at-limit {
	border-color: #ff4d4d !important;
	box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
	transition: all 0.5s ease;
}
/* Styling für den Werbebereich */
#ad-content {
	cursor: pointer;
	background: #222;
	border-radius: 8px;
	padding: 12px;
	margin-top: 15px;
	border: 1px solid #444;
	transition: transform 0.2s;
}
#ad-content:hover { transform: scale(1.02); background: #2a2a2a; }
/* Das Modal-Hintergrund-Layout */
#save-modal {
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.9); 
    z-index: 1000; 
    align-items: center; 
    justify-content: center;
    padding: 20px; /* Sicherheitsabstand zum Rand */
}

/* Die Karte im Modal */
#save-modal .card {
    width: 100%;
    max-width: 380px;
    max-height: 90vh;    /* Maximal 90% der Bildschirmhöhe */
    overflow-y: auto;    /* Scrollbar, wenn der Inhalt zu hoch ist */
    background: #1e1e1e;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #3498db;
    position: relative;
    box-sizing: border-box;
}

/* Scrollbar für das Modal hübsch machen (optional) */
#save-modal .card::-webkit-scrollbar { width: 5px; }
#save-modal .card::-webkit-scrollbar-thumb { background: #3498db; border-radius: 10px; }

card canvas {
    max-height: 150px !important; 
    width: 100% !important;
    display: block;
}

/* Container für absolute Kontrolle */
.chart-container {
    position: relative;
    height: 150px;
    width: 100%;
    margin-top: 10px;
}