html, body {
	height: 100%;
}

.icon-btn-style,
.number-btn-style,
.check-btn-style,
.square-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	width: 100%;
	padding: 0;
	aspect-ratio: 1 / 1;
	font-size: 1rem;
}

.number-btn-style {position: relative;}

.board-pane {position: relative;}

.timer-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.2rem;
	font-size: 1rem;
	padding: 0 0.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.timer {
	display: flex;
	align-items: center;
	gap: 1rem; /* Abstand zwischen Timer und Button */
	font-family: "JetBrains Mono", monospace;
	font-weight: bold;
	color: lightslategray;
}

.my_control_style {
	background: rgba(255,255,255,.5);
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	box-sizing: border-box;
}

:root {
	--min-spaceX: 250px;
	--min-spaceY: 200px;
	--menu-height: 60px;
	--grid-container-gap: 2vw;
	--border: 1.5vw;
}

.grid-b {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	width: 100%;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	margin: 0;
	gap: .5rem;
}

.grid-b.normal {
	grid-template-areas:
		"one   two   three"
		"four  five  six"
		"seven eight nine";
}

.grid-b.reversed {
	grid-template-areas:
		"seven eight nine"
		"four  five  six"
		"one   two   three";
}

.grid-line-X {
	grid-template-columns: repeat(6, 1fr) .3rem repeat(5, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas:
		"gear help rules undo redo clear col1 check number top center color";
}

.grid-a-superX {
	grid-template-columns: repeat(4, 1fr) .3rem repeat(3, 1fr) .3rem 1fr;
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas:
		"info 	 info	 info	 info 	 col1  NB  NB  NB  col2  gear"
		"undo    redo    clear   check   col1  NB  NB  NB  col2  rules"
		"number  top     center  color   col1  NB  NB  NB  col2  help";
}

.grid-a-X {
	grid-template-columns: repeat(4, 1fr) .3rem repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-template-areas:
		"info 	 info	 info	 info 	 col1  NB  NB  NB  NB"
		"undo    redo    clear   check   col1  NB  NB  NB  NB"
		"number  top     center  color   col1  NB  NB  NB  NB"
		"gear    rules   help    .       col1  NB  NB  NB  NB";
}
.grid-line-X {
	grid-template-columns: repeat(4, 1fr) .3rem repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-template-areas:
		"info 	 info	 info	 info 	 col1  NB  NB  NB  NB"
		"undo    redo    clear   check   col1  NB  NB  NB  NB"
		"number  top     center  color   col1  NB  NB  NB  NB"
		"gear    rules   help    .       col1  NB  NB  NB  NB";
}

.grid-a-Y {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr .2rem repeat(4, 1fr) .2rem 1fr;
	grid-template-areas:
		"info 	 info	 check   gear"
		"undo    redo    clear   rules"
		"row1    row1    row1    row1"
		"NB      NB      NB      NB"
		"NB      NB      NB      NB"
		"NB      NB      NB      NB"
		"NB      NB      NB      NB"
		"row2    row2    row2    row2"
		"number  top     center  color";
}
.grid-line-Y {
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(10, 1fr);
	grid-template-areas:
		"check"
		"gear"
		"undo"
		"redo"
		"clear"
		"rules"
		"number"
		"top"
		"center"
		"color";
}

@media (min-aspect-ratio: 1/1) {  /* Landscape */
	.onlyPortrait {display: none !important;}
	.onlyLandscape {display: block !important;}
	
	.grid-container {  /* Landscape */
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: var(--grid-container-gap);
		box-sizing: border-box;
		max-width: 100%;
		max-height: 100%;
	}
	
	.board-pane { /* Landscape */
		width: min(100%, calc(100dvh - var(--menu-height) - 2 * var(--border)));
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.expandBoard .board-pane {
		width: min(100%, 100dvh );
	}
	
	
	.keypad-pane { /* Landscape */
		min-width: var(--min-spaceX);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
	}
	.expandBoard .keypad-pane {
		min-width: 30px;
	}
	
	.control-container {
		display: grid;
		width: 100%;
		height: 100%;
		gap: .5rem;
		padding: 1rem;
	}
}


@media (max-aspect-ratio: 1/1) {/* Portrait */
	.onlyPortrait {display: block !important;}
	.onlyLandscape {display: none !important;}
	
	.grid-container { /* Portrait */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--grid-container-gap);
		box-sizing: border-box;
		max-width: 100%;
		max-height: 100%;
	}
	
	.board-pane { /* Portrait */
		height: min(calc(100vw - 2 * var(--border)) , calc(100dvh - var(--menu-height) - 2 * var(--border) - var(--min-spaceY) - var(--grid-container-gap)) );
		max-width: 100%;
		max-height: 100%;
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
	}
	.expandBoard .board-pane { height:30px;}
	
	
	.keypad-pane { /* Portrait */
		height: 100%;
		min-height: var(--min-spaceY);
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.control-container {
		display: grid;
		width: 100%;
		height: 100%;
		gap: .3rem;
		padding: .5rem;
	}
}

.grid-a-superX #number-block {
	position:relative;
	grid-area: NB;
	height: 100%;
}
.grid-a-X #number-block,
.grid-a-Y #number-block {
	position:relative;
	grid-area: NB;
	grid-row: span 4;
	grid-column: span 4;
	height: 100%;
}
.grid-line-X #number-block,
.grid-line-Y #number-block,
.grid-line-X #game-info,
.grid-line-Y #game-info {display: none;}

.grid-a-superX #game-info {
	grid-column: span 4;
}

	/* Orientation numbers in buttons*/
.toCorner .cornerPos1 { position: absolute; left: 20%; top:20%; transform: translate(-50%, -50%);}
.toCorner .cornerPos2 { position: absolute; left: 50%; top:20%; transform: translate(-50%, -50%);}
.toCorner .cornerPos3 { position: absolute; left: 80%; top:20%; transform: translate(-50%, -50%);}
.toCorner .cornerPos4 { position: absolute; left: 20%; top:50%; transform: translate(-50%, -50%);}
.toCorner .cornerPos5 { position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
.toCorner .cornerPos6 { position: absolute; left: 80%; top:50%; transform: translate(-50%, -50%);}
.toCorner .cornerPos7 { position: absolute; left: 20%; top:80%; transform: translate(-50%, -50%);}
.toCorner .cornerPos8 { position: absolute; left: 50%; top:80%; transform: translate(-50%, -50%);}
.toCorner .cornerPos9 { position: absolute; left: 80%; top:80%; transform: translate(-50%, -50%);}

.toCorner-rotation .cornerPos1 { position: absolute; left: 20%; top:80%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos2 { position: absolute; left: 50%; top:80%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos3 { position: absolute; left: 80%; top:80%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos4 { position: absolute; left: 20%; top:50%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos5 { position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos6 { position: absolute; left: 80%; top:50%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos7 { position: absolute; left: 20%; top:20%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos8 { position: absolute; left: 50%; top:20%; transform: translate(-50%, -50%);}
.toCorner-rotation .cornerPos9 { position: absolute; left: 80%; top:20%; transform: translate(-50%, -50%);}

.toCenter .cornerPos1 { position: absolute; left: 20.0%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos2 { position: absolute; left: 27.5%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos3 { position: absolute; left: 35.0%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos4 { position: absolute; left: 42.5%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos5 { position: absolute; left: 50.0%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos6 { position: absolute; left: 57.5%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos7 { position: absolute; left: 65.0%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos8 { position: absolute; left: 72.5%; top:50%; transform: translate(-50%, -50%);}
.toCenter .cornerPos9 { position: absolute; left: 80.0%; top:50%; transform: translate(-50%, -50%);}

	/* === Grid Areas === */

.grid-a-X #gap-row1,
.grid-a-X #gap-row2,
.grid-a-X #gap-col2,

.grid-a-Y #gap-col1,
.grid-a-Y #gap-col2,

.grid-line-Y #gap-col1,
.grid-line-Y #gap-col2,

.grid-a-superX #gap-row1,
.grid-a-superX #gap-row2,
.grid-a-superX #gap-col2 {display: none;}

#game-info {
	grid-area: info;
	font-size: 1.3rem;
	color: black;
	overflow: hidden;
	position: relative;
}

#btn-validation { grid-area: check; }

#gap-row1{
	grid-area: row1;
	height: .5rem;
	width: 100%;
	pointer-events: none;
}
#gap-row2 {
	grid-area: row2;
	height: .5rem;
	width: 100%;
	pointer-events: none;
}
#gap-col1 {
	grid-area: col1;
	height: 100%;
	width: 1rem;
	pointer-events: none;
}
#gap-col2 {
	grid-area: col2;
	height: 100%;
	width: 1rem;
	pointer-events: none;
}

#btn-help { grid-area: help; }

#btn-gear { grid-area: gear; }

#btn-rules { grid-area: rules; }

#btn-undo { grid-area: undo; }

#btn-redo { grid-area: redo; }

#btn-clear { grid-area: clear; }

#btn-one { grid-area: one; }

#btn-two { grid-area: two; }

#btn-three { grid-area: three; }

#btn-four { grid-area: four; }

#btn-five { grid-area: five; }

#btn-six { grid-area: six; }

#btn-seven { grid-area: seven; }

#btn-eight { grid-area: eight; }

#btn-nine { grid-area: nine; }

#btn-numberMode { grid-area: number; }
#btn-topMode { grid-area: top; }
#btn-centerMode { grid-area: center; }
#btn-colorMode { grid-area: color; }
#btn-colorMode img {width: 20px; height: 20px;}


/* Erzeugt weiße button */
.btn-custom-white {
	color: #212529;
	background-color: #fff;
	border: 1px solid #dee2e6;
	transition: background-color 0.15s, box-shadow 0.15s;
	box-shadow: none;
}

.btn-custom-white:hover,
.btn-custom-white:focus {
	color: #212529;
	background-color: #e7f1ff;
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* Standardfarben mit 0.5 Alpha */
.btn-color-1 { background-color: rgba(230, 25, 75, 0.5);}

.btn-color-2 { background-color: rgba(60, 180, 75, 0.5); }

.btn-color-3 { background-color: rgba(255, 225, 25, 0.5); }

.btn-color-4 { background-color: rgba(67, 99, 216, 0.5); }

.btn-color-5 { background-color: rgba(245, 130, 49, 0.5); }

.btn-color-6 { background-color: rgba(145, 30, 180, 0.5); }

.btn-color-7 { background-color: rgba(70, 240, 240, 0.5); }

.btn-color-8 { background-color: rgba(240, 50, 230, 0.5); }

.btn-color-9 { background-color: rgba(188, 246, 12, 0.5); }

/* Hover: Alpha auf 1 */
.btn-color-1:hover,
.btn-selected-1 { background-color: rgba(230, 25, 75, 1);}

.btn-color-2:hover,
.btn-selected-2 { background-color: rgba(60, 180, 75, 1); }

.btn-color-3:hover,
.btn-selected-3 { background-color: rgba(255, 225, 25, 1); }

.btn-color-4:hover,
.btn-selected-4 { background-color: rgba(67, 99, 216, 1); }

.btn-color-5:hover,
.btn-selected-5 { background-color: rgba(245, 130, 49, 1); }

.btn-color-6:hover,
.btn-selected-6 { background-color: rgba(145, 30, 180, 1); }

.btn-color-7:hover,
.btn-selected-7 { background-color: rgba(70, 240, 240, 1); }

.btn-color-8:hover,
.btn-selected-8 { background-color: rgba(240, 50, 230, 1); }

.btn-color-9:hover,
.btn-selected-9 { background-color: rgba(188, 246, 12, 1); }

/* === Bootstrap-like Hover / Focus for All Buttons === */

.control-container .btn:hover,
.control-container .btn:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .5);
	border-color: #86b7fe;
}

.control-container .btn-hovered {
	background-color: #e7f1ff !important;
	border-color: #86b7fe !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .5);
}

.control-container .btn-selected {
	border-color: #86b7fe !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .8);
}

/* === Suppress persistent outline glow after focus === */
.control-container .btn:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.dropdown-submenu > .dropdown-menu {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	margin-top: 0;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
	display: block;
}

.rule-description {
	margin-bottom: 1em;
	padding: 0.5em;
	border-left: 3px solid #aaa;
	background: #f8f9fa;
}

/* gear-description */
.gear-description-wrapper .form-group-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	margin-left: 2rem;
	margin-right: 2rem;
}

.gear-description-wrapper .form-group-row label {
	width: 50%;
	text-align: left;
	padding-left: 0;
}

.gear-description-wrapper .form-group-row input[type="range"],
.gear-description-wrapper .form-group-row select,
.gear-description-wrapper .form-group-row .mycheck {
	width: 45%;
	text-align: left;
	margin-left: auto;
}

.gear-description-wrapper .form-group-row input[type="checkbox"] {
	transform: scale(1.5);
	margin-left: .5rem;
	cursor: pointer;
}
.gear-description-wrapper .form-switch { padding-left: 0;}

.myNavLink {
	color: black;
	width: 100%;
	padding: .75rem 1rem;
	background-color: white;
	margin-top: 0.375rem;
	font-size: 1rem;
	font-weight: 300;
}
.myNavLink i {padding-right: 1rem;}
.myNavLink:hover,
.myNavOption:hover {
	background-color: #f1f2f3;
	color: black;
}

.myNavOption {
	color: black;
	width: 100%;
	padding: .375rem 1rem;
	background-color: white;
	margin-top: 0.375rem;
	cursor: pointer;
}
.myNavOption i {padding-right: .5rem;}
.myNavOption select {
	font-size: 1rem;
	font-weight: 300;
	border: none;
}

.disable-group.disabled,
.disable-group:disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: default;
	box-shadow: none;
}

.gear-description-wrapper .form-switch { padding-left: 0;}


.history-indicator {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    z-index: 10;
    display: flex;           /* <-- Make it a flex container */
    align-items: center;     /* <-- Vertically center items */
    gap: 4px;                /* <-- Space between counter and button */
}

.onlyLandscape {
    display: flex !important; /* <-- Ensure flex is used in landscape */
    align-items: center;
}

.history-clear-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 0 2px;
    margin-left: 4px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 1em;
    transition: color 0.2s;
}

.history-clear-btn:hover,
.history-clear-btn:focus {
    color: #ff6b6b;
    outline: none;
}

#board-helpButton {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}


#board-helpButton i {
	color: black;
	font-size: 1.2rem;
	transition: color 0.2s ease-in-out;
}

#board-helpButton:hover i {
	color: #0d6efd; /* Bootstrap blue */
}