/* LOPARDIS responsive Panels */

/* ---------- Basis --------- */
:root{
	--bg: #000;
	
	/* Panel-Geometrie */
	--panel-gap: clamp(6px, 1.2vw, 10px);
	--panel-radius: 8px;
	--panel-pad-x: clamp(4px, 0.6vw, 6px);
	--panel-pad-y: clamp(6px, 1.1vw, 10px);
	
	/* Panel-Breite skaliert mit Viewport */
	--panel-w: clamp(120px, 9vw, 180px);
	
	/* Typo skaliert sauber */
	--panel-font: clamp(10px, 0.9vw, 14px);
	--h3-font: clamp(11px, 0.95vw, 15px);
	--btn-font: clamp(10px, 0.95vw, 14px);
	
	/* Touch/Click: Mindesthöhe */
	--btn-min-h: clamp(26px, 3.2vh, 32px);
	
	/* Farben (deine Variablen beibehalten) */
	--button-bg: #f9f9f9;
	--button-bg-hover: #f0f0f0;
	--button-bg-active: #e8e8e8;
	--button-bg-disabled: #f0f0f0;
	--button-text: #000;
	--button-border: #ccc;
}

html, body{
	height: 100%;
}

body{
	margin: 0;
	overflow: hidden;
	background-color: var(--bg);
}

/* Canvas bleibt Vollfläche; Panels liegen darüber */
#canvas-container{
	opacity: 0.9;
	transition: opacity 1s ease;
}

/* ---------- Panels: gemeinsame Regeln ---------- */
#controls-right,
#controls-left{
	position: fixed;               /* stabil bei Scroll / Resize */
	top: var(--panel-gap);
	width: var(--panel-w);
	max-height: calc(100svh - (var(--panel-gap) * 2));
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--panel-pad-y) var(--panel-pad-x);
	border-radius: var(--panel-radius);
	box-sizing: border-box;
	font-size: var(--panel-font);
	z-index: 20;
	
	/* keine Skalierung mehr */
	transform: none !important;
	
	/* weiche Kanten, ohne extra JS */
	-webkit-overflow-scrolling: touch;
}

/* Rechts */
#controls-right{
	right: var(--panel-gap);
	background: rgba(255, 255, 255, 0.7);
	opacity: 0.95;
	padding-bottom: calc(var(--panel-pad-y) + 8px);
}

/* Links */
#controls-left{
	left: var(--panel-gap);
	background: rgba(255, 255, 255, 0.7);
	opacity: 0.95;
	padding-bottom: calc(var(--panel-pad-y) + 8px);
}

/* ---------- Button-Gruppen ---------- */
.button-group{
	margin-top: 8px;
	margin-bottom: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.button-group h3{
	margin: 0 0 4px 0;
	font-size: var(--h3-font);
	line-height: 1.25;
	color: #000;
	text-align: center;
}

/* Linkes Panel: deine Sonderabstände, aber responsiv */
#controls-left .button-group{
	margin-top: 8px;
	margin-bottom: 6px;
	gap: 6px;
}

#sprachStatusBtn{ pointer-events: none; }

/* ---------- Buttons ---------- */
.control-btn{
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	
	font-size: var(--btn-font);
	line-height: 1.15;
	min-height: var(--btn-min-h);
	
	padding: 6px 10px;
	white-space: normal;
	border: 1px solid var(--button-border);
	margin: 0 auto;
	background-color: var(--button-bg);
	color: var(--button-text);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.control-btn:not(:disabled):not(.clicked):hover{
	background-color: var(--button-bg-hover);
}

.control-btn.clicked{
	background-color: var(--button-bg-active);
	cursor: default;
}

/* Disabled. bleibt lesbar */
.control-btn:disabled,
.control-btn.disabled{
	background-color: var(--button-bg-disabled);
	cursor: default;
	opacity: 0.75;
	color: #000;
	-webkit-text-fill-color: #000;
}

/* Footer-Button (letzte Gruppe) */
.button-group:last-child .control-btn{
	font-size: clamp(13px, 1.1vw, 16px);
	min-height: clamp(28px, 4vh, 38px);
	padding: 6px 10px;
}

/* Spezifische Buttons mit Cursor: default */
#anzahlKugeln, #panelModeBtn, #screenModeBtn,
#feldMarkerBtn, #feldMarkerPointsBtn,
#gefresseneBtn, #gefressenePointsBtn,
#verfehlteBtn, #verfehltePointsBtn,
#laufzeitBtn{ cursor: default;}

/* Rückstellen-Button: Zustand */
#rückstellenBtn:disabled{
	background-color: var(--button-bg-active);
	cursor: default;
}
#rückstellenBtn:not(:disabled){
	cursor: pointer;
}

/* ---------- Responsive Regeln ---------- */

/* Schmale Geräte: Panels werden schmaler und Schrift etwas kleiner */
@media (max-width: 980px){
	:root{
	--panel-w: clamp(110px, 11vw, 160px);
	--panel-font: clamp(10px, 1.0vw, 13px);
	--h3-font: clamp(11px, 1.05vw, 14px);
	--btn-font: clamp(10px, 1.05vw, 13px);
	}
}

/* Sehr schmal: Panels bleiben nutzbar, aber kompakter */
@media (max-width: 720px){
	:root{
	--panel-w: clamp(100px, 14vw, 140px);
	--btn-min-h: clamp(24px, 3vh, 30px);
	}
	.button-group{ gap: 5px; }
}

/* Niedrige Höhe: mehr Platz gewinnen */
@media (max-height: 600px){
	:root{
		--panel-gap: 6px;
		--btn-min-h: 26px;
	}
	.button-group{ margin-top: 6px; margin-bottom: 4px; }
	.button-group h3{ margin-bottom: 3px; }
}

/* Ultra-schmal: Panels maximal kompakt */
@media (max-width: 640px){
	:root{
		--panel-w: 96px;
		--panel-pad-x: 6px;
		--panel-pad-y: 6px;
		--btn-min-h: 30px;
		--panel-font: 10px;
		--h3-font: 11px;
		--btn-font: 10px;
		--btn-min-h: 24px;    
	}
	.button-group{ gap: 4px; }
	.control-btn{
		font-size: var(--btn-font);
		line-height: 1.15;
		padding: 4px 8px;
	}
}
#controls-left {
	direction: rtl;
	overflow-y: auto;
}
#controls-left > * {
	direction: ltr;
}
#ActionBtn.control-btn {
	font-weight: 700;
}

/* START/STOP: binär über .clicked, nur diese zwei Buttons */
/* START/STOP – invertierte Binärlogik */
/* Default = INAKTIV (schwarz) */
#ActionBtn,
#StopBtn{
	color: #000;
	font-weight: 700;
	background-color: #fff;
}
/* Aktiv = GRAU */
#ActionBtn.clicked,
#StopBtn.clicked{
	color: rgba(0,0,0,0.45);
	font-weight: 500;
	background-color: var(--button-bg-active);
}
#controls-left .button-group.dynamik .control-btn{
	font-size: var(--btn-font);
	line-height: 1.15;
}
/* ===== FRAME 3D WRAPPER ===== */
#frame-outer{
	position: fixed;
	inset: 0;
	perspective: 1200px;
	overflow: hidden;
}
#frame-3d{
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.08s linear;
}
/* Canvas bleibt vollflächig */
#canvas-container{
	width: 100%;
	height: 100%;
}


/* Anleitung Overlay - WIE DIE SEITENPANELS + RESPONSIV */
.anleitung-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 10px;  /* Abstand bei kleinen Bildschirmen */
    box-sizing: border-box;
}

.anleitung-container {
    width: min(90vw, 400px);     /* Responsiv: maximal 400px, bei kleinen Bildschirmen 90% */
    height: min(80vh, 500px);    /* Responsiv: maximal 500px, bei kleinen Bildschirmen 80% */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.anleitung-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
}

.anleitung-header h2 {
    margin: 0;
    font-size: clamp(14px, 4vw, 16px);  /* Responsive Schrift */
    font-weight: bold;
    color: #000;
}

.anleitung-schliessen-btn {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    font-size: clamp(16px, 5vw, 18px);  /* Responsive Schrift */
    cursor: pointer;
    width: clamp(26px, 8vw, 28px);      /* Responsive Größe */
    height: clamp(26px, 8vw, 28px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: #f9f9f9;
    padding: 0;
}

.anleitung-schliessen-btn:hover {
    background-color: #f0f0f0;
    color: #000;
}

.anleitung-content {
    flex: 1;
    overflow-y: auto;
    padding: clamp(10px, 3vw, 15px);    /* Responsive Padding */
    font-size: clamp(11px, 3.5vw, 12px); /* Responsive Schrift */
    line-height: 1.5;
    color: #000;
    background-color: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #999 #f0f0f0;
}

.anleitung-content p {
    margin: 0 0 clamp(8px, 2.5vh, 12px) 0;  /* Responsiver Abstand */
    color: #000;
}

.anleitung-content p:last-child {
    margin-bottom: 0;
}

/* Scrollbar Styling */
.anleitung-content::-webkit-scrollbar {
    width: 6px;
}

.anleitung-content::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.anleitung-content::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
}

.anleitung-content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* ---------- SPEZIELLE RESPONSIVE BREAKPOINTS ---------- */

/* Sehr kleine Geräte (Handys hochkant) */
@media (max-width: 480px) {
    .anleitung-container {
        width: 95vw;        /* Noch breiter auf sehr kleinen Bildschirmen */
        height: 85vh;       /* Mehr Höhe ausnutzen */
        border-radius: 6px; /* Kleinere Radius */
    }
    
    .anleitung-header {
        padding: 6px 12px;
    }
    
    .anleitung-header h2 {
        font-size: 14px;
    }
    
    .anleitung-schliessen-btn {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
    
    .anleitung-content {
        padding: 12px;
        font-size: 11px;
    }
}

/* Niedrige Höhe (Handys quer, kleine Laptops) */
@media (max-height: 600px) {
    .anleitung-container {
        height: 90vh;       /* Mehr Höhe nutzen */
    }
    
    .anleitung-content p {
        margin-bottom: 8px; /* Weniger Abstand */
    }
}

/* Sehr niedrige Höhe (Handys quer) */
@media (max-height: 450px) {
    .anleitung-container {
        height: 95vh;
    }
    
    .anleitung-content {
        padding: 8px;
        font-size: 10px;    /* Noch kleinere Schrift */
    }
    
    .anleitung-content p {
        margin-bottom: 6px;
        line-height: 1.4;
    }
    
    .anleitung-header {
        padding: 4px 10px;
    }
}

/* Mittlere Bildschirme (Tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    .anleitung-container {
        width: 380px;       /* Etwas kleiner als Desktop */
        height: 480px;
    }
}

/* Große Bildschirme */
@media (min-width: 1600px) {
    .anleitung-container {
        width: 450px;       /* Etwas größer auf sehr großen Bildschirmen */
        height: 550px;
    }
    
    .anleitung-content {
        font-size: 13px;    /* Etwas größere Schrift */
    }
    
    .anleitung-header h2 {
        font-size: 18px;
    }
}