/* Farb- und Abstand-Variablen für mehr Konsistenz */
:root {
    --primary-bg: rgba(0, 255, 0, 0.192);
    --highlight-bg: rgba(128, 255, 0, 0.6);
    --backdrop-filter: blur(10px);
    --btn-bg-hover: #34495e;
    --red-border: #e74c3c;
    --green-border: #00ff00;
    --white-border: white;
    --border-radius: 15px;
    --btn-size: 80px;
    --joystick-size: 200px;
}

/* Grundlegende Steuerfeld Positionierung */
#control-panel {
    position: absolute;
    bottom: 7vh;
    right: 1vw;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Konsolen-Ansicht für mobile Geräte */
.console-Mobile {
    width: 40%;
}

.ship-controls {
    position: absolute;
    bottom: 8vh;
    right: 1vw;
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Steuerungstasten */
.control-button {
    width: var(--btn-size);
    height: var(--btn-size);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 10px;
    transition: background 0.3s ease;
}

.control-button:hover {
    background: var(--btn-bg-hover);
}

/* Action Buttons */
.action-buttons {
    position: absolute;
}

.navi-button {
    padding: var(--action-btn-padding);
    border: 1px solid red;
    background: transparent;
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.3s ease;
    width: 75px;
}

.navi-button:hover {
    background: var(--red-border);
}









/* Responsive Styling für Tablets und Handys */
@media (min-width: 900px) {
    #control-panel { display: none; }
    .ship-controls { display: none; }
    .control-button { display: none; }
    .action-buttons { display: none; }
    .joystick-container { display: none; }

}

@media (max-width: 899px) {
    
}

@media (max-width: 840px) {
}

@media (min-width: 601px) {

}

@media (max-width: 600px) {
    
}

@media (max-width: 479px) {
    
}



/* Action-Buttons Basisstil */
.action-buttons button {
    padding: var(--action-btn-padding);
    font-size: 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 2px solid rgba(128, 255, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.8;
}

/* Hover-Effekte */
.zoom-in:hover {
    background-color: rgba(0, 255, 0, 0.6);
    border-color: rgb(0, 255, 0, 0.1);
    transform: scale(1.1);
}

.zoom-out:hover {
    background-color: rgba(0, 123, 255, 0.6);
    border-color: #3498db;
    transform: scale(1.1);
}

.thrust-btn:hover {
    background-color: rgba(128, 255, 0, 0.6);
    border-color: #34495e;
    transform: scale(1.1);
}


.fire-btn {
    padding: 5px;
}




.fire-btn:hover {
    background-color: rgba(255, 0, 0, 0.6);
    border-color: #e74c3c;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.brake-btn:hover {
    background-color: rgba(255, 165, 0, 0.6);
    border-color: #f39c12;
    transform: scale(1.1);
}

.shield-btn:hover {
    background-color: rgba(0, 255, 255, 0.6);
    border-color: #1abc9c;
    transform: scale(1.1);
}

.navi-button:hover {
    background-color: rgba(255, 0, 0, 0.6);
    border-color: #e74c3c;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Optional: Verhindern von schnellem Verändern der Boxen */
.action-buttons button:active {
    transform: scale(1);
}