/*
 * Football Fundraising Thermometer — front-end styles.
 * Field is capped at 800x300 (plus a ~50px label row = 350 total) and
 * scales down responsively via aspect-ratio + percentage width.
 */

.fbt-wrap {
	box-sizing: border-box;
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

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

.fbt-field {
	position: relative;
	width: 100%;
	aspect-ratio: 800 / 300;
	max-height: 300px;
	background-color: #2e7d32;
	border: 4px solid #ffffff;
	border-radius: 6px;
	overflow: hidden;
}

/*
 * 9 evenly-spaced yard lines confined to the playing field between the two
 * end zones (10%-90% of the field). Explicit stops (rather than a repeating
 * gradient) keep the count exactly 9, with none sitting on the end-zone
 * boundaries themselves.
 */
.fbt-yardlines {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10%;
	right: 10%;
	z-index: 1;
	background-image: linear-gradient(
		to right,
		transparent calc(10% - 1px), #ffffff calc(10% - 1px), #ffffff calc(10% + 1px), transparent calc(10% + 1px),
		transparent calc(20% - 1px), #ffffff calc(20% - 1px), #ffffff calc(20% + 1px), transparent calc(20% + 1px),
		transparent calc(30% - 1px), #ffffff calc(30% - 1px), #ffffff calc(30% + 1px), transparent calc(30% + 1px),
		transparent calc(40% - 1px), #ffffff calc(40% - 1px), #ffffff calc(40% + 1px), transparent calc(40% + 1px),
		transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px),
		transparent calc(60% - 1px), #ffffff calc(60% - 1px), #ffffff calc(60% + 1px), transparent calc(60% + 1px),
		transparent calc(70% - 1px), #ffffff calc(70% - 1px), #ffffff calc(70% + 1px), transparent calc(70% + 1px),
		transparent calc(80% - 1px), #ffffff calc(80% - 1px), #ffffff calc(80% + 1px), transparent calc(80% + 1px),
		transparent calc(90% - 1px), #ffffff calc(90% - 1px), #ffffff calc(90% + 1px), transparent calc(90% + 1px)
	);
}

/* The two goal lines: the boundary between each end zone and the field. */
.fbt-goalline {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #ffffff;
	z-index: 1;
}

.fbt-goalline-left {
	left: 10%;
}

.fbt-goalline-right {
	right: 10%;
}

/* One number per yard line — counts up to midfield (50) and back down. */
.fbt-yard-number {
	position: absolute;
	bottom: 6px;
	transform: translateX(-50%);
	font-size: clamp(0.68rem, 1.9vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	z-index: 1;
	pointer-events: none;
}

.fbt-endzone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10%;
	background-color: rgba(0, 0, 0, 0.32);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.12) 0,
		rgba(255, 255, 255, 0.12) 8px,
		transparent 8px,
		transparent 16px
	);
	z-index: 1;
}

.fbt-endzone-left {
	left: 0;
}

.fbt-endzone-right {
	right: 0;
}

.fbt-goalpost {
	position: absolute;
	top: 22%;
	bottom: 22%;
	width: clamp(14px, 4%, 28px);
	z-index: 2;
	pointer-events: none;
}

.fbt-goalpost-left {
	left: 3%;
}

.fbt-goalpost-right {
	right: 3%;
}

.fbt-goalpost svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fbt-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10%; /* Right edge of the left end zone — the fill's starting line. */
	width: 0%; /* Animated up to data-target-width by thermometer.js. */
	background-color: rgba(255, 209, 0, 0.55);
	transition: width 1.2s ease-out;
	z-index: 2;
}

.fbt-minigoal-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 4px solid #ffd700;
	z-index: 3;
}

.fbt-minigoal-badge {
	position: absolute;
	top: 4px;
	left: 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.fbt-minigoal-label,
.fbt-minigoal-subtext {
	font-size: clamp(0.68rem, 1.7vw, 0.86rem); /* +1px over the base amount size. */
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.55);
	padding: 1px 5px;
	border-radius: 3px;
	white-space: nowrap;
}

.fbt-marker {
	position: absolute;
	top: 50%;
	left: 10%; /* Right edge of the left end zone; animated up to data-target-left by thermometer.js. */
	width: clamp(30px, 9%, 60px); /* Wider than the old ball icon so the character stays legible. */
	transform: translate(-50%, -50%);
	transition: left 1.2s ease-out;
	z-index: 4;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.fbt-marker img {
	display: block;
	width: 100%;
	height: auto;
}

.fbt-current-label {
	position: absolute;
	top: 58%; /* Directly below the football marker, which is vertically centered at 50%. */
	left: 10%; /* Right edge of the left end zone; animated up to data-target-left by thermometer.js. */
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	transition: left 1.2s ease-out;
	z-index: 5;
}

.fbt-current-amount {
	font-size: clamp(1.1rem, 3.2vw, 1.5rem); /* Larger — the headline figure. */
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	white-space: nowrap;
}

.fbt-current-caption {
	font-size: clamp(0.76rem, 2.2vw, 1.01rem); /* +1px over the base amount size. */
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	white-space: nowrap;
}

.fbt-labels {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* Inset to match the end-zone width so labels sit under the playing
	   field's edges (where the fill starts/ends) rather than the field's
	   outer edges. */
	padding: 0 10%;
	margin-top: 6px;
	font-size: clamp(0.81rem, 2.2vw, 1.06rem); /* +1px over the base amount size. */
	font-weight: 600;
	color: #333333;
}

.fbt-label-end-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fbt-error {
	color: #a00;
	font-weight: 600;
}