/* Altador Cup CSS
Author: Dinah C.
Date: 2022.05.13
*/

/* Navigation */
.h5-altadorcup-nav {
	margin-bottom: 0 !important;
}

.h5-altadorcup-nc-sign {
	right: 0 !important;
	width: 25%;
}

/* Desktop-only nav overrides — keep below 861px untouched for mobile dropdown */
@media screen and (min-width: 861px) {
	.h5-altadorcup-nav ul.ac-nav {
		grid-column: span 3;
		width: 95%;
		margin: auto;
	}

	.h5-altadorcup-nav .h5-altadorcup-scrolls {
		display: none;
	}

	.h5-altadorcup-nav ul li a,
	.h5-altadorcup-nav ul li span {
		white-space: nowrap;
	}

	.h5-altadorcup-nav ul li:not(.ac-nav-home):not(.ac-nav-mobile):hover a,
	.h5-altadorcup-nav ul li a:hover,
	.h5-altadorcup-nav ul li a:active {
		font-size: 10pt;
	}
}

@media screen and (max-width: 600px) {
	.h5-altadorcup-nc-sign {
		width: 30%;
	}
}

/* Banner */
.h5-altadorcup-teams .ac-teams-banner {
	width: 100%;
	padding-top: 35%;
	margin: auto;
	position: relative;
	background: url(images/signups_bannerbackground.png) center top / 100% no-repeat;
	z-index: 1;
}

.h5-altadorcup-teams .ac-flags-globe {
	position: absolute;
	top: 10%;
	left: 7.3%;
	background: url(images/logo_globe.png) center / contain no-repeat;
	width: 27%;
	padding-top: 27%;
}

.h5-altadorcup-teams .ac-flags-spin {
	position: absolute;
	top: 20%;
	left: 10%;
	background: url(images/logo_flag.png) center / contain no-repeat;
	width: 20%;
	padding-top: 20%;
	-webkit-animation: acflagspin 10s infinite linear;
	animation: acflagspin 10s infinite linear;
}

.h5-altadorcup-teams .ac-choose-team {
	position: absolute;
	top: 25%;
	left: 10%;
	width: 25%;
	padding-top: 15%;
	background: url(images/chooseteamtext.png) center / contain no-repeat;
}

.h5-altadorcup-teams .ac-quiggle-quizgiver {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 20%;
	padding-top: 18%;
	background: url(images/quigglequizgiver.png) center top / 100% no-repeat;
}

.h5-altadorcup-teams .ac-signup-steps {
	position: absolute;
	top: 35%;
	left: 60%;
	width: 35%;
	padding-top: 15%;
	background: url(images/signups_headerhexagons.png) center / contain no-repeat;
}

@-webkit-keyframes acflagspin {
	0% {
		-webkit-transform: rotate(0deg);
		/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
		-ms-transform: rotate(0deg);
		/* IE 9 */
		transform: rotate(0deg);
		/* IE 10, Fx 16+, Op 12.1+ */
	}

	100% {
		-webkit-transform: rotate(360deg);
		/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
		-ms-transform: rotate(360deg);
		/* IE 9 */
		transform: rotate(360deg);
		/* IE 10, Fx 16+, Op 12.1+ */
	}
}

@keyframes acflagspin {
	0% {
		-webkit-transform: rotate(0deg);
		/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
		-ms-transform: rotate(0deg);
		/* IE 9 */
		transform: rotate(0deg);
		/* IE 10, Fx 16+, Op 12.1+ */
	}

	100% {
		-webkit-transform: rotate(360deg);
		/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
		-ms-transform: rotate(360deg);
		/* IE 9 */
		transform: rotate(360deg);
		/* IE 10, Fx 16+, Op 12.1+ */
	}
}

.h5-altadorcup-teams .ac-map-edge {
	width: calc(10% - 1em);
	padding-top: 60%;
	background: url(images/teammapside.png) center / 100% 100% no-repeat;
	position: absolute;
	top: 92%;
	left: 0;
}

.h5-altadorcup-teams .ac-map-edge.map-right {
	transform: scaleX(-1);
	left: unset;
	right: 0;
}

/* MAP */
.h5-altadorcup-teams .ac-teams-map {
	width: calc(100% - 2em);
	padding: 58.14% 1em 0;
	background: url(../2026/teammap.png) center top / calc(100% - 2em) no-repeat;
	position: relative;
	margin: auto;
}

.h5-altadorcup-teams .ac-teams-map .ac-logo {
	width: 3%;
	padding-top: 3%;
	position: absolute;
	cursor: pointer;
	background-color: #fff;
	z-index: 1;
}

/* Map pin frame — PNG overlay; multiply blend makes white areas transparent so sprite shows through */
.h5-altadorcup-teams .ac-teams-map .ac-logo::before {
	content: '';
	position: absolute;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -35%;
	background: url('../2026/ac-maplogobg-arrow.png') center / 100% 100% no-repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.h5-altadorcup-teams .ac-teams-map .ac-logo:hover {
	background-position: right center;
	margin-top: -.1em;
	z-index: 2;
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-altador {
	top: 47.7%;
	left: calc(30.8% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-brightvale {
	top: 32.5%;
	left: calc(60.3% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-darigancitadel {
	top: 26.4%;
	left: calc(69.85% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-faerieland {
	top: 49%;
	left: calc(54.2% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-hauntedwoods {
	top: 37.4%;
	left: calc(48.4% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-kreludor {
	top: 12.89%;
	left: calc(9.08% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-krawkisland {
	top: 65%;
	left: calc(77.2% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-shenkuu {
	top: 28.6%;
	left: calc(32.89% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-lostdesert {
	top: 62.5%;
	left: calc(50.4% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-maraqua {
	top: 29%;
	left: calc(81.3% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-meridell {
	top: 25.2%;
	left: calc(63.8% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-mysteryisland {
	top: 48%;
	left: calc(80.5% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-rooisland {
	top: 19.2%;
	left: calc(57.8% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-terrormountain {
	top: 7.5%;
	left: calc(52.65% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-tyrannia {
	top: 12.5%;
	left: calc(65.3% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-virtupets {
	top: 13%;
	left: calc(81.6% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-neopiacentral {
	top: 23%;
	left: calc(52% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-kikolake {
	top: 29.9%;
	left: calc(55.5% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-moltara {
	top: 38%;
	left: calc(9.5% + 1em);
}

.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-dacardia {
	top: 53%;
	left: calc(18.4% + 1em);
}

@media screen and (max-width: 875px) {
	.h5-altadorcup-teams .ac-map-edge {
		top: 91%;
	}
}

@media screen and (max-width: 811px) {
	.h5-altadorcup-teams .ac-teams-map .ac-logo {
		width: 4.5%;
		padding-top: 4.5%;
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-meridell,
	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-brightvale,
	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-virtupets {
		width: 4%;
		padding-top: 4%;
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-hauntedwoods {
		left: calc(47.4% + 1em);
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-krawkisland {
		left: calc(74.2% + 1em);
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-mysteryisland {
		top: 55%;
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-rooisland {
		top: 24.2%;
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-virtupets {
		left: calc(79% + 1em);
	}
}

@media screen and (max-width: 651px) {
	.h5-altadorcup-teams .ac-map-edge {
		display: none;
	}

	.h5-altadorcup-teams .ac-teams-map {
		width: 100%;
		padding: 58% 0 0;
		background-size: 100%;
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-altador {
		left: calc(27.8% + 1em);
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-kreludor {
		left: calc(7.58% + 1em);
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-moltara {
		left: calc(5.5% + 1em);
	}

	.h5-altadorcup-teams .ac-teams-map .ac-logo.ac-virtupets {
		left: calc(78% + 1em);
	}
}

@media screen and (max-width: 500px) {
	.h5-altadorcup-nc-sign {
		width: 40%;
	}

	.h5-altadorcup-teams .ac-teams-banner {
		padding-top: 30%;
	}

	.h5-altadorcup-teams .ac-flags-globe {
		top: 12.5%;
	}

	.h5-altadorcup-teams .ac-choose-team {
		top: 45%;
	}

	.h5-altadorcup-teams .ac-signup-steps {
		top: 45%;
	}
}

/* SIGNUP PHASE — ROSTER ICONS */
.ac-roster-icons {
	margin-top: 1em;
	text-align: center;
}

.ac-roster-icons .ac-popup-label {
	margin: 0 0 .4em;
}

.ac-roster-icon-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5em;
}

.ac-roster-icon {
	width: 80px;
	height: 80px;
	border-radius: 11px;
	background-size: 100%;
	background-position: center 15%;
	border: 2px solid #F35F20;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}

.ac-roster-icon:hover {
	transform: translateY(-.15em);
	box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

@media screen and (max-width: 400px) {
	.h5-altadorcup-nc-sign {
		width: 50%;
	}
}

/* ---- Sign-Up Prizes ---- */
.ac-signup-prizes .ac-prizes-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	padding: 4px 0;
}

.ac-signup-prizes .ac-prize-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80px;
	text-align: center;
}

.ac-signup-prizes .ac-prize-item img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.ac-signup-prizes .ac-prize-item .ac-team-copy {
	font-size: 12pt;
	margin-top: 4px;
}

/* ---- Team Detail Countdown ---- */
.ac-team-detail-countdown {
	text-align: center;
	padding: 1em 0 .5em;
}

.ac-team-detail-countdown .ac-countdown {
	margin: 0 0 .5em;
	font-size: 14pt;
	font-weight: bold;
}

.ac-team-detail-countdown .ac-count-timer {
	margin: 0 auto;
}

/* ---- Team Detail Inline Module ---- */
.ac-team-detail {
	display: none;
	background: #f60;
	border-radius: 16px;
	padding: 8px 10px;
	flex-direction: column;
	gap: 8px;
	margin-top: 1em;
}

.ac-team-detail.ac-team-detail-visible {
	display: flex;
}

.ac-team-detail .ac-team-detail-header {
	text-align: center;
	padding: .25em 0;
}

.ac-team-detail .ac-team-name {
	font-family: "SportsWorld", Arial, sans-serif;
	font-size: 20px;
	color: #fff;
	text-shadow: 0.5px 1.5px 0px #3a3939;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}

.ac-team-detail .ac-team-detail-body {
	border-radius: 0 0 12px 12px;
	padding: 20px;
}

.ac-team-detail .ac-signup-prizes {
	position: relative;
	width: 100%;
	padding: 1em;
	padding-top: 2em;
	background: #fff;
	border-radius: 20px;
	border: 4px solid #722700;
	box-sizing: border-box;
	margin-top: 1.5em;
}

.ac-team-detail .ac-signup-prizes>p.ac-popup-label {
	position: absolute;
	width: max-content;
	margin: -2em 0 0 -1em;
	padding: .25em .75em;
	border-radius: 10px;
	color: #fff;
	z-index: 1;
	font-size: 16pt;
}

/* Inline module on teams page: remove glow/border/spacing and match container's bottom radius */
.h5-altadorcup-grid .ac-team-detail {
	box-shadow: none;
	border: none;
	margin-top: 0;
	border-radius: 0 0 20px 20px;
}

.h5-altadorcup-grid .ac-grid-item .ac-content.ac-grid {
	padding: 0;
}

/* Restore padding on the 100% grid item: 1em all sides, 2em bottom */
.h5-altadorcup-grid .ac-content-item.ac-grid-item.grid-100 {
	padding: 1em;
	padding-bottom: 2em;
}

/* ---- Inline module popup-team layout ----
   Mirrors altadorcup-popups.css rules but scoped to .ac-team-detail
   (popups.css gates everything behind .h5-altadorcup-popup which isn't present here) */
.ac-team-detail .ac-team-info {
	width: 100%;
	height: max-content;
	display: grid;
	grid-template: auto auto / calc(55% - .5em) 45%;
	align-items: start;
	justify-content: center;
	gap: 1em;
}

.ac-team-detail .ac-team-info p {
	font-size: 8pt;
	margin: 0;
}

.ac-team-detail p.ac-popup-label {
	color: #fff;
	padding: .1em .5em;
	border-radius: 10px;
}

.ac-team-detail .ac-team-info .ac-logo-captain {
	width: 90%;
	height: max-content;
	display: grid;
	grid-template: auto 1fr / 50% 50%;
	align-items: start;
	justify-content: center;
	gap: 0.5em 1em;
}

.ac-team-detail .ac-team-info .ac-team-logo,
.ac-team-detail .ac-team-info .ac-team-captain {
	width: calc(100% - 1em);
	height: 100%;
	margin: auto;
}

.ac-team-detail .ac-team-info .ac-team-logo .ac-logo {
	width: calc(80% - 1em);
	padding-top: calc(80% - 1em);
	margin: auto;
}

.ac-team-detail .ac-team-captain {
	width: calc(100% - 1em - 6px);
	height: 100%;
	max-width: 100%;
	margin: auto;
	border-width: 3px 3px 0;
	border-style: solid;
	border-radius: 10px;
	display: grid;
	grid-template: 1fr auto / auto;
	box-sizing: border-box;
}

.ac-team-detail .ac-team-captain .ac-captain-img {
	width: 100%;
	height: 100%;
	position: relative;
}

.ac-team-detail .ac-team-captain .ac-captain {
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	background: transparent center 20% / 110% no-repeat;
}

.ac-team-detail .ac-team-captain .ac-captain-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 6px 6px 0 0;
	background: url(images/popup_background.png) center / 100% 100% no-repeat;
	filter: grayscale(50%);
}

.ac-team-detail .ac-team-captain .ac-bg-filter {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 20%;
	filter: brightness(150%);
}

.ac-team-detail .ac-team-captain .ac-player-pos {
	font-size: 16pt;
	padding: .6em 0;
}

.ac-team-detail .ac-team-info .ac-team-formation {
	width: 80%;
	margin: 0 auto;
}

.ac-team-detail .ac-team-info .ac-team-formation p.ac-popup-label {
	width: 100%;
	padding: .5em;
	box-sizing: border-box;
}

.ac-team-detail .ac-team-info p.ac-yyb-formation {
	margin: auto;
	padding-top: .25em;
	font-size: 16pt;
	font-weight: bold;
}

.ac-team-detail .ac-team-info .ac-captain-stats {
	width: 100%;
	height: max-content;
	margin: auto;
	display: grid;
	grid-template: repeat(4, auto) / 30% calc(70% - .5em);
	gap: .1em .5em;
	align-items: start;
	justify-content: center;
}

.ac-team-detail .ac-team-info .ac-team-bio {
	position: relative;
	width: 100%;
	padding: 1em;
	background: #fff;
	border-radius: 20px;
	border: 4px solid transparent;
	box-sizing: border-box;
	align-self: start;
	grid-row: 2;
}

.ac-team-detail .ac-team-info .ac-team-bio p.ac-popup-label {
	position: absolute;
	width: max-content;
	margin: -2em 0 0 -1em;
	padding: .25em .75em;
	z-index: 1;
	font-size: 16pt;
}

.ac-team-detail .ac-team-info p.team-popup-bio {
	width: 100%;
	height: auto;
	font-size: 10pt;
	box-sizing: border-box;
}

.ac-team-detail .ac-team-info .ac-team-players {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: calc(25% + .4em) calc(70% - .4em);
	grid-auto-rows: auto;
	gap: 0.5em 0;
	align-items: center;
	justify-content: space-around;
	grid-row: span 2;
}

.ac-team-detail .ac-team-info .ac-team-player {
	width: 100%;
	height: auto;
	border-radius: 0 0 10px 10px;
	display: grid;
	grid-template: auto auto / 100%;
}

.ac-team-detail .ac-team-info .ac-player-img {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.ac-team-detail .ac-team-info .ac-player {
	width: 100%;
	height: 100%;
	border: 3px solid transparent;
	border-bottom: none;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.ac-team-detail .ac-player-pos {
	width: 100%;
	height: auto;
	min-height: 2em;
	padding: .1em 0;
	color: #fff;
	font-size: 9pt;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ac-team-detail .ac-player-pos span {
	width: max-content;
	height: max-content;
	position: static;
	margin: 0;
}

.ac-team-detail .ac-team-info .ac-player-stats {
	width: 100%;
	display: grid;
	grid-template: repeat(4, auto) / 30% 70%;
	gap: .2em .5em;
	align-items: start;
	justify-content: start;
}

.ac-team-detail .ac-team-info .ac-team-copy {
	text-align: left;
}

.ac-team-detail .ac-team-info .tooltip-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}

.ac-team-detail .ac-team-info .tooltip-icon .tooltip {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(100% - 0.1em - 6px);
	padding: .1em;
	background-color: #fff;
	border: 2px solid transparent;
	border-radius: 10px;
	text-align: center;
	z-index: 1;
}

.ac-team-detail .ac-team-info .ac-team-captain .tooltip-icon .tooltip {
	top: 0;
	bottom: unset;
}

.ac-team-detail .ac-team-info .tooltip-icon:hover .tooltip,
.ac-team-detail .ac-team-info .tooltip-icon:focus .tooltip {
	display: block;
}

.ac-team-detail .ac-team-info .tooltip-icon .tooltip.show-tooltip {
	display: block;
}

/* Hide tooltip icon on desktop — desktop shows .ac-captain-stats / .ac-player-stats inline */
@media screen and (min-width: 811px) {
	.ac-team-detail .ac-team-info .tooltip-icon {
		display: none;
	}
}

/* Bio expand toggle — hidden on desktop, shown via mobile block below */
.ac-bio-fade {
	display: none;
}

.ac-bio-toggle {
	display: none;
}

/* Scroll offset so sticky nav doesn't cover the top of the team detail */
#ac-team-detail {
	scroll-margin-top: 3em;
}

/* ---- Mobile layout (≤811px) ---- */
@media screen and (max-width: 811px) {

	/* Outer: single column flex instead of 2-column grid */
	.ac-team-detail .ac-team-info {
		display: flex;
		flex-direction: column;
		gap: 1.5em;
	}

	/* logo-captain: [crest+formation | captain] two-column grid */
	.ac-team-detail .ac-team-info .ac-logo-captain {
		width: 100%;
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 10px;
		align-items: start;
	}

	.ac-team-detail .ac-team-info .ac-team-logo {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: auto;
		margin: 0;
	}

	.ac-team-detail .ac-team-info .ac-team-captain {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 100%;
		max-width: 256px;
		margin: 0;
		height: auto;
		aspect-ratio: 256 / 144;
		align-self: center;
	}

	.ac-team-detail .ac-team-captain .ac-player-pos {
		font-size: 8pt;
	}

	.ac-team-detail .ac-team-info .ac-team-formation {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		margin: 0;
	}

	.ac-team-detail .ac-team-info .ac-captain-stats {
		display: none;
	}

	.ac-team-detail .ac-team-info .ac-team-logo .ac-logo {
		width: min(155px, 100%);
		padding-top: min(155px, 100%);
	}

	/* Section labels: fluid scale 14pt at 811px → 10pt at ~580px */
	.ac-team-detail .ac-team-info .ac-team-bio p.ac-popup-label,
	.ac-team-detail .ac-signup-prizes>p.ac-popup-label {
		font-size: clamp(10pt, 2.3vw, 14pt);
	}

	/* bio: no grid-row/align-self needed in flex context */
	.ac-team-detail .ac-team-info .ac-team-bio {
		grid-row: unset;
		align-self: unset;
		width: 100%;
	}

	/* players: flex-wrap 2 per row; capped at 408px (2×200+8) so each card ≤200px; scales down proportionally below that */
	.ac-team-detail .ac-team-info .ac-team-players {
		height: auto;
		grid-row: unset;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		max-width: 408px;
		margin: 0 auto;
	}

	.ac-team-detail .ac-team-info .ac-team-player {
		width: calc(50% - 4px);
		height: auto;
		display: flex;
		flex-direction: column;
	}

	/* Hide side-by-side stats; tooltip icon handles them */
	.ac-team-detail .ac-team-info .ac-player-stats {
		display: none;
	}
}