/*
 * Squad board sizing.
 *
 * The previous rule fixed the board at 600px wide on a 9:16 ratio, which
 * renders 1066px tall — taller than most laptop screens, so a desktop user had
 * to scroll to see their own XI. This sizes the board from the viewport HEIGHT
 * on larger screens and from the WIDTH on phones, which is the axis that is
 * actually scarce in each case.
 *
 * Loaded after the squad stylesheet so these win without needing !important.
 */

.nbpl-pitch-outer {
	/* Width is derived from the height budget below, so the board never grows
	   taller than the screen it is being used on. */
	max-width: min(var(--nb-pitch-max-width, 560px), 100%);
	margin-inline: auto;
	padding: var(--nb-space-3, 12px);
	border-radius: var(--nb-radius-lg, 18px);
}

.nbpl-pitch {
	/* Regulation proportions (68 x 105). The old 9:16 made the pitch narrower
	   than a real one, which crowded the wide positions. */
	aspect-ratio: 68 / 105;
	width: 100%;
	border-radius: var(--nb-radius-md, 12px);
}

/* --- Tablet and desktop: constrain by height ------------------------------
 * 68/105 = 0.647, so a board 72vh tall is 46.6vw wide. Capping the outer
 * element at that width makes the whole board fit the screen without
 * scrolling, while keeping the correct shape.
 */
@media (min-width: 768px) {
	.nbpl-pitch-outer {
		max-width: min(var(--nb-pitch-max-width, 560px), calc(72vh * 0.647));
	}
}

@media (min-width: 1280px) {
	.nbpl-pitch-outer {
		/* Slightly more generous on a large monitor, still height-bound. */
		max-width: min(600px, calc(76vh * 0.647));
	}
}

/* --- Phone: fill the available width -------------------------------------- */
@media (max-width: 767px) {
	.nbpl-pitch-outer {
		max-width: 100%;
		padding: var(--nb-space-2, 8px);
	}
}

/* --- Tokens scale with the board, not with fixed pixels -------------------
 * Sizing the shirt and nameplate in container-relative units keeps the board
 * legible at every width instead of tiny on desktop and cramped on mobile.
 */
.nbpl-slot {
	--slot-size: var(--nb-pitch-token, clamp(38px, 9vw, 54px));
}

.nbpl-slot .nbpl-jersey,
.nbpl-slot .nbpl-jersey-img {
	width: var(--slot-size);
	height: auto;
}

.nbpl-slot .nbpl-slot-name {
	font-size: var(--nb-pitch-name, clamp(10px, 2.2vw, 13px));
	line-height: var(--nb-leading-tight, 1.1);
}

.nbpl-slot .nbpl-slot-pos {
	font-size: max(9px, calc(var(--nb-pitch-name, 12px) * 0.78));
	letter-spacing: .05em;
}

@media (min-width: 768px) {
	/* On desktop the board is height-bound, so token size follows viewport
	   height rather than width or it would shrink as the board narrows. */
	.nbpl-slot { --slot-size: clamp(40px, 6.2vh, 56px); }
	.nbpl-slot .nbpl-slot-name { font-size: clamp(11px, 1.5vh, 14px); }
}

/* --- Bench: a consistent grid rather than a wrapping row ------------------ */
.nbpl-bench-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: var(--nb-space-2, 8px);
}

@media (max-width: 480px) {
	.nbpl-bench-list {
		grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	}
	.nbpl-bench-player { width: 100%; }
}