@charset "UTF-8";
/* CSS Document */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--visible-height: 100svh;
	--edge-gap: clamp(8px, 1.5svh, 16px);
	--control-gap: clamp(8px, 1.4svh, 14px);
	--control-width: 120px;
	--column-gap: clamp(16px, 4vw, 32px);
}

html,
body {
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
}

body {
	font-family: 'Roboto', Arial, sans-serif;
	color: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------
	 Main application layout
	 --------------------------------------------------------- */

.app {
	width: 100%;
	min-height: var(--visible-height);
	height: auto;

	padding:
		max(var(--edge-gap), env(safe-area-inset-top))
		max(var(--edge-gap), env(safe-area-inset-right))
		max(var(--edge-gap), env(safe-area-inset-bottom))
		max(var(--edge-gap), env(safe-area-inset-left));

	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: var(--control-gap);

	overflow: visible;
}

/* ---------------------------------------------------------
	 Fullscreen button
	 --------------------------------------------------------- */

.features_header {
	position: sticky;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: flex-end;
	align-items: flex-start;

	width: 100%;
	min-height: clamp(44px, 8svmin, 58px);

	pointer-events: none;
}

.features_header img {
	pointer-events: auto;
	display: block;

	width: clamp(44px, 8svmin, 58px);
	height: clamp(44px, 8svmin, 58px);
	margin: 0;
	padding: clamp(7px, 1.2svmin, 10px);

	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.65);

	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
}

/* ---------------------------------------------------------
	 Timer display
	 --------------------------------------------------------- */

.clock-panel {
	min-height: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}

#timer {
	font-family: 'Anton', Arial, sans-serif;
	font-size: clamp(3.5rem, min(34vw, 37svh), 22rem);
	line-height: 0.92;
	letter-spacing: 0.05em;
	text-align: center;
	white-space: nowrap;

	margin: 0;
	padding: 0;
	color: lightblue;
}

/* ---------------------------------------------------------
	 Control columns
	 Each column contains: label, input and button
	 --------------------------------------------------------- */

.controls {
	display: grid;
	grid-template-columns: repeat(2, var(--control-width));
	justify-content: center;
	align-items: start;
	gap: var(--column-gap);

	width: 100%;
	min-height: 0;
}

.input-group {
	width: var(--control-width);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--control-gap);

	margin: 0;
}

label {
	display: block;
	width: 100%;
	margin: 0;

	font-size: clamp(0.72rem, 1.55svh, 0.95rem);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
}

input {
	display: block;
	width: var(--control-width);
	max-width: var(--control-width);
	height: clamp(44px, 7svh, 54px);

	margin: 0;
	padding: 4px 8px;

	font-size: clamp(1.5rem, 2.5svh, 1.4rem);
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: 8px;
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------------------------------------------------------
	 Start and Reset buttons
	 Same 120px width as their matching input boxes
	 --------------------------------------------------------- */

.start-button,
.reset-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--control-width);
	height: clamp(58px, 10svh, 76px);

	margin: 0;
	padding: 0;

	color: white;
	border: clamp(2px, 0.45svmin, 4px) solid white;
	border-radius: clamp(12px, 2svmin, 20px);

	cursor: pointer;
	touch-action: manipulation;
}

.start-button {
	background-color: green;
}

.start-button:disabled {
	background-color: grey;
	cursor: not-allowed;
}

.reset-button {
	background-color: red;
}

/* SVG icons inside Start and Reset buttons */
.start-button img,
.reset-button img {
	display: block;

	width: clamp(26px, 5svmin, 40px);
	height: clamp(26px, 5svmin, 40px);

	object-fit: contain;
	pointer-events: none;

	/* Converts black monochrome SVG artwork to white */
	filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------
	 Landscape tablet layout
	 Timer on left; controls on right
	 --------------------------------------------------------- */

@media (orientation: landscape) {
	.app {
		grid-template-columns: minmax(0, 1fr) clamp(275px, 31vw, 390px);
		grid-template-rows: auto minmax(0, 1fr);
		column-gap: clamp(10px, 2vw, 26px);
	}

	.features_header {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.clock-panel {
		grid-column: 1;
		grid-row: 2;
	}

	#timer {
		font-size: clamp(3rem, min(30vw, 55svh), 20rem);
	}

	.controls {
		grid-column: 2;
		grid-row: 2;

		align-self: center;
		width: 100%;
	}
}

/* ---------------------------------------------------------
	 Very short landscape browser windows
	 --------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 480px) {
	:root {
		--edge-gap: 6px;
		--control-gap: 5px;
		--column-gap: 14px;
	}

	.features_header {
		min-height: 40px;
	}

	.features_header img {
		width: 40px;
		height: 40px;
		padding: 6px;
	}

	#timer {
		font-size: clamp(2.8rem, min(29vw, 50svh), 13rem);
	}

	label {
		font-size: 0.68rem;
	}

	input {
		height: 36px;
		font-size: 1.5rem;
	}

	.start-button,
	.reset-button {
		width: var(--control-width);
		height: 48px;
		border-radius: 11px;
	}

	.start-button img,
	.reset-button img {
		width: 25px;
		height: 25px;
	}
}

/* ---------------------------------------------------------
	 Very short portrait or split-screen windows
	 --------------------------------------------------------- */

@media (orientation: portrait) and (max-height: 620px) {
	:root {
		--edge-gap: 6px;
		--control-gap: 5px;
		--column-gap: 14px;
	}

	.features_header {
		min-height: 40px;
	}

	.features_header img {
		width: 40px;
		height: 40px;
		padding: 6px;
	}

	#timer {
		font-size: clamp(2.8rem, min(32vw, 28svh), 10rem);
	}

	label {
		font-size: 0.68rem;
	}

	input {
		height: 36px;
		font-size: 1.5rem;
	}

	.start-button,
	.reset-button {
		width: var(--control-width);
		height: 48px;
		border-radius: 11px;
	}

	.start-button img,
	.reset-button img {
		width: 25px;
		height: 25px;
	}
}

/* ---------------------------------------------------------
	 Emergency layout for extremely narrow screens
	 --------------------------------------------------------- */

@media (max-width: 290px) {
	.controls {
		grid-template-columns: var(--control-width);
	}
}