/* Grundlegendes Styling für den Body, um Vollbild zu ermöglichen */
body {
    margin: 0;
    overflow: hidden; /* Verhindert Scrollbalken */
    background-color: #1a1a2e; /* Dunkler Hintergrund für den Weltraum */
    font-family: 'Inter', sans-serif; /* Schriftart */
    color: #e0e0e0; /* Helle Textfarbe */
    display: flex; /* Flexbox für Zentrierung, falls nötig */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Volle Viewport-Höhe */
    position: relative; /* Für absolute Positionierung der Overlays */
}

/* Der neue Wrapper, der in den Vollbildmodus geht */
.fullscreen-wrapper {
    position: relative; /* Wichtig für die Positionierung der Kinder */
    width: 100vw;
    height: 100vh;
    display: flex; /* Um das Canvas zu zentrieren, falls es nicht 100% füllt */
    justify-content: center;
    align-items: center;
}

/* Styling für das Canvas-Element - jetzt 100% des Wrappers */
canvas {
    width: 100%;
    height: 100%;
    background-color: #000000; /* Schwarz für den Weltraumhintergrund */
    display: block; /* Entfernt zusätzlichen Platz unter dem Canvas */
    cursor: grab; /* Standard-Cursor für Panning */
}

/* Styling für die Überschrift und den Erklärungstext (Overlay) */
.overlay-title, .overlay-description {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Stellt sicher, dass der Text über dem Canvas liegt */
    text-align: center;
    max-width: 80%;
    background-color: rgba(42, 42, 74, 0.8); /* Semi-transparenter Hintergrund */
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.overlay-title {
    top: 20px;
    font-size: 2.5rem;
    color: #a0a0ff;
    text-shadow: 0 0 10px rgba(160, 160, 255, 0.7);
}
.overlay-description {
    top: 100px; /* Position unter der Überschrift */
    font-size: 0.9em;
    line-height: 1.6;
}

/* Styling für den Score */
.score-display {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    background-color: rgba(42, 42, 74, 0.8);
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 15px;
}

.score-label {
    font-size: 1.2rem;
    color: #e0e0e0;
    font-weight: 500;
}

.score-value {
    font-size: 2rem;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
    min-width: 60px;
    text-align: center;
}

/* Styling für die Steuerelemente (Overlay) */
.overlay-controls {
    position: absolute;
    bottom: 20px; /* Am unteren Rand des Bildschirms */
    right: 20px; /* Am rechten Rand des Bildschirms */
    background-color: rgba(42, 42, 74, 0.8); /* Semi-transparenter Hintergrund */
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column; /* Steuerelemente vertikal stapeln */
    gap: 15px;
    align-items: flex-end; /* Rechtsbündig ausrichten */
    z-index: 10; /* Stellt sicher, dass die Controls über dem Canvas liegen */
}
.controls-row { /* Für horizontale Gruppierung von Steuerelementen */
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap; /* Erlaube Umbruch auf kleineren Bildschirmen */
    justify-content: flex-end; /* Rechtsbündig in der Reihe */
}
.overlay-controls label {
    font-size: 1.1rem;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei Label */
}
.overlay-controls input[type="number"] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #6a6a8a;
    background-color: #3a3a5a;
    color: #e0e0e0;
    width: 100px;
    text-align: center;
    font-size: 1rem;
}
.overlay-controls button {
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #6a6a8a;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    min-width: 50px; /* Mindestbreite für Buttons */
}
.overlay-controls button:hover {
    background-color: #8a8ab0;
    transform: translateY(-2px);
}
.overlay-controls button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Styling für den Zoom-Schieberegler */
.controls-row input[type="range"] {
    -webkit-appearance: none;
    width: 150px;
    height: 8px;
    background: #4a4a6a;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}
.controls-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a0a0ff;
    cursor: grab;
    box-shadow: 0 0 5px rgba(160, 160, 255, 0.7);
}
.controls-row input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a0a0ff;
    cursor: grab;
    box-shadow: 0 0 5px rgba(160, 160, 255, 0.7);
}
/* Layout für Pan-Buttons */
.pan-controls {
    display: grid;
    grid-template-areas:
        ". up ."
        "left . right"
        ". down .";
    gap: 5px;
    width: 120px; /* Feste Breite für das Pan-Grid */
    height: 120px; /* Feste Höhe für das Pan-Grid */
    justify-items: center;
    align-items: center;
}
.pan-controls button {
    padding: 8px 12px;
    font-size: 1.2rem;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pan-up { grid-area: up; }
.pan-left { grid-area: left; }
.pan-right { grid-area: right; }
.pan-down { grid-area: down; }