/* gameGrid.css */

/* Das quadratische Spielfeld mit Sicherheitsstauchung für iPads */
#grid {
    display: grid !important; 
    gap: 4px; 
    background-color: #202024; 
    padding: 6px; 
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4); 
    
    /* 🟢 DYNAMISCHER FIX 1: Nutzen von vmin für Breite UND Höhe, 
       um den Zusammensturz auf 0px in allen Browsern zu verhindern */
    width: 65vmin !important; 
    height: 65vmin !important; 
    
    max-width: var(--maxw); 
    max-height: var(--maxw); 
    min-width: var(--minw); 
    min-height: var(--minw);
    
    /* Schafft einen garantierten Mindestabstand zum Dock und Scoreboard */
    margin: 10px auto; 
    flex-shrink: 0;
}

/* Spielfeld-Zellen */
.cell { 
    background-color: #2a2a30; 
    border-radius: 5px; 
    transition: all 0.1s ease; 
    position: relative;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    
    /* 🟢 DYNAMISCHER FIX 2: Zwingt jede Zelle im CSS-Grid quadratisch zu bleiben */
    width: 100%;
    height: 100%;
}
.cell.filled { box-shadow: inset 0 0 10px rgba(255,255,255,0.25); }
.cell.obstacle { background: #55555e !important; border: 2px solid #33333a; box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; }

/* Das Vorschau-Dock unten */
#dock { 
    display: flex !important; 
    justify-content: space-around !important; 
    align-items: center !important; /* Vertikale Zentrierung erzwungen */
    position: relative; 
    bottom: 0;
    width: 100%; 
    max-width: var(--maxw); 
    min-width: var(--minw); 
    
    margin-top: auto;
    margin-bottom: 3svh;   
    height: 95px; 
    background-color: #1a1a1e; 
    border-radius: 12px; 
    
    padding: 5px; 
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); 
    box-sizing: border-box;
    flex-shrink: 0; 
}

/* Zentrierungs-Fix für die Dock-Blöcke */
#dock button { 
    background: transparent !important; 
    border: none !important; 
    outline: none !important; 
    padding: 0 !important; 
    margin: auto 0 !important; 
    cursor: pointer; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    position: relative !important;
    flex-shrink: 0;
}

/* Form-Container im Normalzustand (im Dock) */
.preview-shape { 
    position: relative; 
    cursor: grab;
    display: block;
    margin: 0 auto;
}

/* Die einzelnen kleinen Quadrate innerhalb des Blocks */
.preview-cell { 
    position: absolute !important; 
    border-radius: 3px; 
    box-shadow: inset 0 0 6px rgba(255,255,255,0.3); 
}

/* Fix für das logische Koordinatensystem beim Ziehen */
.preview-shape.dragging { 
    position: fixed !important; 
    opacity: 0.85; 
    z-index: 100000 !important; 
    margin: 0 !important; 
    pointer-events: none; 
}

/* Unsichtbarer Trefferflächen-Expander für die Dock-Buttons */
#dock button .preview-shape::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px !important;
    height: 80px !important;
    background: transparent !important;
    cursor: grab !important;
    z-index: 10;
}

.preview-shape.dragging::before {
    display: none !important;
}