/* --- GRUNDSTEUERUNG (Schreibtisch 16:9) --- */
body, html { 
    margin: 0; padding: 0; height: 100%; width: 100%; 
    background-color: #1a1a1a; 
    display: flex; justify-content: center; align-items: center; 
    overflow: hidden; 
    font-family: 'Courier New', Courier, monospace; 
}

.desk-container { 
    position: relative; 
    width: 100vw; height: 56.25vw; 
    max-width: 100%; max-height: 100vh; 
    background-image: url('bilder/desk-background.png'); 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; 
}

@media (min-aspect-ratio: 16/9) { 
    .desk-container { width: 177.78vh; height: 100vh; } 
}

/* --- OBJEKT-STYLING (Items auf dem Tisch) --- */
.item { position: absolute; transition: transform 0.2s ease, filter 0.3s ease; cursor: pointer; z-index: 10; }
.item img { width: 100%; height: auto; display: block; filter: drop-shadow(8px 12px 20px rgba(0,0,0,0.8)); }

.item:not(.locked):hover { transform: scale(1.05); filter: brightness(1.2) drop-shadow(0 0 20px rgba(255,215,0,0.5)); }
.locked { filter: grayscale(100%) brightness(0.15) !important; cursor: not-allowed; pointer-events: none; }

/* Positionen der Items */
#police-badge { top: 5%; right: 5%; width: 12%; transform: rotate(10deg); z-index: 100; }
#photo-stack { top: 3%; left: 3%; width: 25%; transform: rotate(-8deg); height: 20%; }
#nokia-phone { bottom: 5%; right: 2%; width: 27%; }
#pen-tray { top: 5%; left: 50%; transform: translateX(-50%); width: 28%; z-index: 5; }
#keychain { bottom: 5%; left: 2%; width: 18%; transform: rotate(-25deg); }
#notepad { top: 38%; left: 45%; width: 15%; transform: rotate(5deg); }
#coffee-stain { top: 32%; right: 15%; width: 24%; z-index: 2; transform: rotate(25deg); pointer-events: none; }
#voice-recorder { top: 37%; left: 22%; width: 11.2%; transform: rotate(-25deg); z-index: 10; }
#eraser { top: 10%; left: 66%; width: 8%; transform: rotate(20deg); z-index: 6; pointer-events: none; }

#puzzle-board {
    /* Das Board passt sich der Bildschirmhöhe an (85% der Höhe) */
    width: 75vh; 
    height: 75vh;
    max-width: 90vw; /* Verhindert Überbreite auf Handys */
    max-height: 90vw;
    
    display: flex;
    flex-wrap: wrap;
    border: 5px solid #5d4037;
    margin: 10px auto;
    background-color: #111;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.tile {
    /* Jede Kachel ist exakt ein Drittel breit/hoch */
    width: 33.333%;
    height: 33.333%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    background-repeat: no-repeat;
}

.empty {
    background: #000 !important;
    cursor: default;
}

.stack-img { transition: z-index 0.1s ease, transform 0.3s ease; cursor: pointer; }

/* --- BADGE POPUP (Abmelde-Menü) --- */

.badge-popup p {
    color: #f4e7d4;
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-bottom: 1px solid #c0b090;
    padding-bottom: 5px;
}

.badge-popup button {
    background: #8b0000;
    color: white;
    border: 1px solid #444;
    padding: 8px;
    font-size: 0.65rem;
    width: 100%;
    transition: background 0.3s;
}

.badge-popup button:hover {
    background: #ff0000;
}

/* --- OVERLAYS ALLGEMEIN --- */
.overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); 
    z-index: 2000; display: none; justify-content: center; align-items: center; 
}
.visible { display: flex !important; }

.login-box { 
    background-color: #f4e7d4; padding: 30px; border: 1px solid #c0b090; 
    text-align: center; width: 300px; box-shadow: 0 20px 50px rgba(0,0,0,1); color: #3b2f2f; 
}
input { display: block; width: 90%; margin: 15px auto; padding: 10px; border: 1px solid #c0b090; }
button { background: #3b2f2f; color: #f4e7d4; border: none; padding: 12px; cursor: pointer; width: 100%; font-weight: bold; }
.switch-link { font-size: 0.7rem; margin-top: 15px; cursor: pointer; text-decoration: underline; }

/* --- NOKIA RESPONSIVE SYSTEM --- */
.nokia-wrapper {
    position: relative;
    height: 85vh;
    width: auto; 
    aspect-ratio: 600 / 1379;
    background-image: url('bilder/Nokia3210-senkrecht.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#nokia-display {
    position: absolute;
    top: 25.5%; 
    left: 17%;
    width: 65.5%;
    height: 21.6%;
    background: rgba(145, 165, 110, 0.7); 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vh; 
    color: #1a2a1a; font-weight: bold;
    pointer-events: none;
    box-sizing: border-box;
    padding: 10px;
}

.nokia-nav-touch {
    position: absolute;
    top: 57%;
    left: 10%;
    width: 78%;
    height: 7%;
    display: flex;
    justify-content: space-between;
}

.nokia-touch-grid {
    position: absolute;
    top: 65%;
    left: 10%;
    width: 78%;
    height: 27%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(4, 1fr);
    gap: 5% 10%;
}

.nav-touch-btn {
    width: 28%;
    background: rgba(255, 0, 0, 0);
    border: none;
    cursor: pointer;
}

.touch-key {
     background: rgba(0, 0, 255, 0); 
     border: none;
     cursor: pointer; 
}

/* --- GESPERRTE OBJEKTE --- */
.item.locked img {
    filter: brightness(0.15) grayscale(100%) !important;
}

.item.locked {
    pointer-events: none !important;
    cursor: not-allowed !important;
}