.how-good-title {
	font-size: 1.7em;
  color: #fff;
  text-shadow: 0 4px 16px #000, 0 0 6px #000, 0 1px 2px #000;
  display: block;
  margin-bottom: 8px;
  letter-spacing: 2px;
  font-family: 'Bebas Neue', 'Impact', 'Arial Black', Arial, sans-serif;
  font-weight: 1000;
  text-transform: uppercase;
  line-height: 1.1;
}
.card h2#movementName {
	font-size: 2.6em;
	font-weight: 900;
	color: #ffe066;
	letter-spacing: -1px;
	text-shadow: 0 2px 12px #000, 0 1px 2px #222;
	margin-bottom: 12px;
}
.buttons-section {
	min-width: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.video-flex-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	justify-content: center;
}
.video-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(360px, 100%);
}
.controls-section {
	min-width: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin: 0;
	justify-content: flex-start;
}
body { font-family: system-ui, Arial, sans-serif; margin: 0; background: #0b0b0b; color: #fff; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; overflow-x: hidden; }
.main-content { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 32px; margin-bottom: 24px; }
.left-section { width: 100%; display: flex; flex-direction: row; gap: 32px; align-items: flex-start; justify-content: center; }
.timer {
	font-size: 72px;
	font-weight: 900;
	letter-spacing: -2px;
}
.video-section { background: #161616; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.video-counter { font-size: 18px; font-weight: 800; color: #fff; text-align: center; padding: 8px 0; }
.video-container { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; height: auto; background: #0b0b0b; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.video-container video { width: 100%; height: 100%; object-fit: cover; }
.card { background: #161616; border-radius: 16px; padding: 18px; flex: 0 0 350px; }
.meta {
	opacity: 1;
	font-size: 2.2em;
	font-weight: 900;
	margin-bottom: 18px;
	color: #fff;
	letter-spacing: -1px;
	text-shadow: 0 2px 8px #000, 0 1px 2px #222;
}
.buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 0;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}
button { padding: 14px 16px; border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; }

#doneBtn {
	font-size: 1.15em;
	padding: 20px 24px;
	margin-top: 12px;
	background: #d5a43a;
	color: #111;
}

#resetBtn {
	margin-top: 240px !important;
}
button:disabled { opacity: 1; cursor: not-allowed; }

#doneBtn:disabled {
	background: #d5a43a;
	color: #111;
	box-shadow: none;
	cursor: pointer;
}
.finish { margin-top: 18px; font-size: 18px; }
.hidden { display: none; }
img, video { max-width: 100%; border-radius: 12px; margin-top: 12px; }

@media (max-width: 900px) {
	.wrap {
		padding: 16px;
	}

	.main-content,
	.left-section,
	.video-flex-row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.buttons-section,
	.video-main,
	.card {
		width: 100%;
		min-width: 0;
	}

	.buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.buttons button {
		flex: 1 1 150px;
	}

	#doneBtn,
	#resetBtn {
		margin-top: 0 !important;
	}

	.video-container {
		max-width: 100%;
	}

	.card {
		flex: 1 1 auto;
	}

	.card h2#movementName {
		font-size: 2em;
	}

	.meta {
		font-size: 1.5em;
		margin-bottom: 12px;
	}

	.timer {
		font-size: clamp(42px, 12vw, 64px);
	}

	body.runner-page {
		min-height: 100dvh;
	}

	body.runner-page .wrap {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	body.runner-page .runner-header {
		flex: 0 0 auto;
		margin-bottom: 10px !important;
	}

	body.runner-page .runner-header__title {
		margin: 0;
		font-size: 1.2rem;
		line-height: 1.1;
	}

	body.runner-page .runner-header__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	body.runner-page .runner-header__button {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	body.runner-page .main-content {
		flex: 1 1 auto;
		min-height: 0;
		gap: 12px;
		margin-bottom: 10px;
	}

	body.runner-page .left-section,
	body.runner-page .video-flex-row,
	body.runner-page .video-main {
		flex: 1 1 auto;
		min-height: 0;
	}

	body.runner-page .video-flex-row {
		gap: 12px;
	}

	body.runner-page .buttons {
		gap: 6px;
	}

	body.runner-page .buttons button {
		min-height: 44px;
		font-size: 0.95rem;
		padding: 12px 10px;
	}

	body.runner-page #doneBtn {
		font-size: 1rem;
	}

	body.runner-page .video-main {
		justify-content: flex-start;
	}

	body.runner-page .video-container {
		width: min(100%, 460px);
		max-width: 100%;
		height: min(52dvh, 520px);
		aspect-ratio: auto;
		margin: 0 auto;
	}

	body.runner-page .card {
		margin-top: auto;
		padding: 14px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	body.runner-page .meta,
	body.runner-page .card h2#movementName,
	body.runner-page #movementReps,
	body.runner-page #movementDesc,
	body.runner-page .timer {
		margin: 0;
	}

	body.runner-page .meta {
		font-size: 1.1rem;
	}

	body.runner-page .card h2#movementName {
		font-size: clamp(1.2rem, 5vw, 1.7rem);
		line-height: 1.05;
	}

	body.runner-page #movementReps,
	body.runner-page #movementDesc {
		font-size: 0.92rem;
		line-height: 1.3;
	}

	body.runner-page .timer {
		font-size: clamp(34px, 11vw, 50px);
		line-height: 1;
	}

	body.runner-page #quitBtn {
		margin-top: 10px !important;
		padding: 12px 18px !important;
		font-size: 1rem !important;
	}
}

@media (max-width: 900px) and (orientation: landscape) {
	.wrap {
		padding: 12px;
	}

	.buttons {
		gap: 6px;
	}

	.buttons button {
		flex-basis: 120px;
		padding: 12px 14px;
	}

	.timer {
		font-size: clamp(36px, 8vw, 52px);
	}

	body.runner-page .main-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		align-items: stretch;
	}

	body.runner-page .left-section,
	body.runner-page .video-flex-row {
		height: 100%;
	}

	body.runner-page .video-flex-row {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
		align-items: start;
		gap: 10px;
	}

	body.runner-page .buttons {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	body.runner-page .buttons button {
		flex-basis: auto;
	}

	body.runner-page .video-container {
		height: min(66dvh, 360px);
	}

	body.runner-page .card {
		justify-content: flex-end;
	}

	body.runner-page .timer {
		font-size: clamp(32px, 7vw, 46px);
	}
}

@media (max-width: 900px) and (orientation: portrait) {
	body.runner-page .main-content {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
	}

	body.runner-page .buttons {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.runner-page .video-container {
		height: min(58dvh, 560px);
	}

	body.runner-page .card {
		padding-top: 20px;
	}
}