/* 
 * Copyright (C) 2024 Alexander Robohm
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option)
 * any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program. If not, see <https://www.gnu.org/licenses/>. 
 */

body {
	margin: 0px;
	color: black;
}

.grid-container {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(6,minmax(40px,1fr));
	grid-template-rows: 4fr minmax(380px,8fr) minmax(80px,3fr) minmax(80px,5fr) 20fr;
	overflow: hidden;
	position: absolute;
}

#page-header {
	grid-column: 2 / span 4;
	text-align: center;
	align-content: center;
	font-size: 96px;
}

#open-settings-button {
	margin: 20px;
	font-size: 64px;
	touch-action: none;
}

#player-stats-container {
	grid-column: 1 / span 6;
	grid-row: 2;
	overflow-x: auto;
	white-space: nowrap;
	float: left;
	width: 100%;
	display: flex;
	scrollbar-width: none;
}

#player-stats-container::-webkit-scrollbar {
	display: none;
}

.player-stats {
	flex: 0 0 auto;
	float: left;
	width: 50%;
	height: 100%;
	text-align: center;
	align-content: center;
	font-size: 58px;
	background-color: lightgray;
	color: gray;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 2fr 1fr 1fr 1fr;
}

.player-heading {
	grid-column: span 2;
	text-align: center;
	align-content: center;
	font-size: 72px;
}

.player-score {
	grid-row: span 3;
	text-align: center;
	align-content: center;
	font-size: 72px;
}

.active-turn {
	background-color: red;
	color: black;
}

.winner {
	background-color: green;
	color: black;
}

#checkout-guide {
	grid-column: span 6;
	font-size: 40px;
	align-content: center;
	text-align: center;
	border: solid 2px;
	margin: 5px;
}

.throw-box {
	grid-column: span 2;
	font-size: 48px;
	align-content: center;
	text-align: center;
	border: solid 2px;
	margin: 5px;
}

.throw-last-turn {
	color: gray;
}

#score-button-container {
	grid-column: span 6;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	grid-template-rows: repeat(5,1fr);
}

.score-button {
	font-size: 36px;
	touch-action: none;
}

.active-modifier {
	text-decoration: underline;
	background-color: gray;
}

#settings-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	opacity: 0.7;
	background-color: gray;
	display: none;
}

#settings {
	width: 90%;
	height: 90%;
	min-height: 270px;
	position: absolute;
	top: 5%;
	left: 5%;
	z-index: 2;
	background-color: white;
	display: none;
	grid-template-rows: repeat(8, minmax(35px,1fr));
	grid-template-columns: repeat(6, 1fr);
}

#settings-header {
	grid-row: 1;
	grid-column: span 6;
	text-align: center;
	align-content: center;
	font-size: 96px;
}

.settings-legend {
	grid-column: span 6;
	text-align: center;
	align-content: center;
	font-size: 72px;
}

.settings-button {
	grid-column: span 3;
	font-size: 64px;
	margin: 10px;
	touch-action: none;
}

#settings-button-ok {
	grid-column: 1 / span 3;
	margin: 10px;
	font-size: 72px;
	background-color: lightgreen;
}

#settings-button-cancel {
	grid-column: 4 / span 3;
	margin: 10px;
	font-size: 72px;
	background-color: lightpink;
	touch-action: none;
}

.player-number-button {
	grid-column: span 2;
	font-size: 72px;
	margin: 10px;
	touch-action: none;
}

#player-number {
	grid-column: span 2;
	text-align: center;
	align-content: center;
	font-size: 64px;
}

@media only screen and (min-aspect-ratio: 8/5) {
	.grid-container {
		grid-template-columns: 1fr 4fr 1fr 2fr 2fr 2fr;
		grid-template-rows: minmax(45px,1fr) minmax(45px,1fr) 4fr;
	}
  
	#page-header {
		grid-column: 2;
		grid-row: 1;
	}
	
	#open-settings-button {
		grid-column: 3;
		margin: 0px 0px 5px 0px;
	}
	
	#player-stats-container {
		display: revert;
		grid-column: 1 / span 3;
		grid-row: 2 / span 2;
		float: top;
		width: 100%;
	}

	.player-stats {
		float: top;
		width: 100%;
		height: calc(100% / 3);
		min-height: 80px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	
	.player-heading {
		grid-row: 1;
		grid-column: 1 / span 2;
	}
	
	.player-score {
		grid-row: 1;
		grid-column: 3;
	}
	
	#checkout-guide {
		grid-row: 1;
		grid-column: 4 / span 3;
	}
	
	#throw-0 {
		grid-column: 4;
		grid-row: 2;
	}
	#throw-1 {
		grid-column: 5;
		grid-row: 2;
	}
	#throw-2 {
		grid-column: 6;
		grid-row: 2;
	}
	
	#score-button-container {
		grid-column: 4 / span 3;
		grid-row: 3;
		margin-left: 5px;
	}
}

@media only screen and (max-height: 800px),
       only screen and (max-width: 650px) {
	#page-header {
		font-size: 36px;
	}
	
	#open-settings-button {
		font-size: 36px;
		margin: 0px 0px 5px 0px;
	}
	
	.player-stats {
		font-size: 32px;
	}
	
	.player-heading {
		font-size: 36px;
	}
	
	.player-score {
		font-size: 36px;
	}
	
	#checkout-guide {
		font-size: 20px;
	}
	
	.throw-box {
		font-size: 24px;
	}
	
	.score-button {
		font-size: 24px;
	}
	
	#settings {
		padding: 10px;
	}
	
	#settings-header {
		font-size: 36px;
	}
	
	.settings-legend {
		font-size: 32px;
	}
	
	.settings-button {
		font-size: 24px;
		margin: 0px;
	}
	
	.player-number-button {
		font-size: 24px;
		margin: 0px;
	}
	
	#player-number {
		font-size: 24px
	}
	
	#settings-button-ok {
		font-size: 24px;
		margin: 0px;
		margin: 5px 0px 0px 0px;
	}
	
	#settings-button-cancel {
		font-size: 24px;
		margin: 0px;
		margin: 5px 0px 0px 0px;
	}
}