/* VARIABLES */

:root {
    --colNo: 11; /* changes via JS. Leave as 11 for now */
	--pad: 0.33rem; /* DO NOT CHANGE */
	--spinRate: 2s; /* DO NOT CHANGE */
	--height-limit: 100%; /* DO NOT CHANGE here. If changing, doing it via the HTML file picHeightLimit const */

	--wn-line-colour: var(--lines);
	--wn-bg-colour: var(--box-dark);
}
.highContrast {
	--bg-pic: none; /* DO NOT CHANGE */
	--spinRate: 0s; /* DO NOT CHANGE */
    --wn-bg-colour: var(--box-dark);

	#duelCover > div {
		animation: none;
	}
}



/* PAGE */

#tn-page {
	min-height: 100vh;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
	font-family: "Afacad", sans-serif;
}

#hd {
	box-shadow: 0px 6px 4px 0px #0000003d;
}



/* TOURNAMENT */

#tn, #dl, #dl-cover {
	height: 100%;
	width: 100%;
	background-color: var(--bg-dark);
	background-image: var(--bg-pic);
}

#tn {
	z-index: 1;
	display: grid;
	color: var(--text);
	min-height: 100vh;
	grid-template-columns: repeat(var(--colNo), 1fr);
}

.tn-col {
	height: 100%;
	display: grid;
	justify-content: space-around;
	align-items: center;
	position: relative;
	grid-auto-rows: 1fr;
	padding: 4%;
}

.match, .tn-floater {
	background-color: var(--box-dark);
	background-image: linear-gradient( to bottom, var(--box-light) 5%, var(--box-dark) 95% );
	min-height: 5vh;
	min-width: 8vw;
	padding: var(--pad);
	text-align: center;
	border-radius: 0.25rem;
	box-shadow: 0px 0px 9px 1px var(--shadow), inset 1px 1px 1px #ffffff75, 2px 4px 13px 0px #000000c9;
}

.match {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	z-index: 3;
}

#final {
	min-height: 10vh;
	padding: 4px;
	font-size: 1.75em;
}

.sp {
	display: flex;
	align-items: center;
	justify-content: center;
		/* White space nowrap stops line-breaks. Due to fitSpText(), it will shrink instead. Remove to add line breaks. Both options okay - your preference. */
	white-space: nowrap; 
}

.loser {
	opacity: var(--faded);
}

.lastWinner {
	animation: match-win 6.6s ease-out;
}

@keyframes match-win {
	0%   {color: var(--winner-text);}
	33.3%   {color: var(--winner-text);}
	100% {color: var(--text);}
}



/* TOURNAMENT FLOATERS (title, winner, next match) */

.tn-floater {
	position: absolute;
	left: 50%;
	max-width: 50rem; 
	min-height: 10vh;
	max-height: calc((90vh - 1rem - 1em) / 2);
	width: calc(100vw / var(--colNo) * 3 - 2rem);
	border-style: ridge;
	border-width: var(--pad);
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	font-size: clamp(1.5rem, 2em, 2.75rem); /* legacy:  .floatContent, #final, .winnerDivTitle */
	line-height: 1em;
	padding: var(--pad);
	z-index: 4;
}
#tn-winnerDiv {
	top: 1rem;
	translate: -50% 0%;
	border-color: var(--gold);
}
#tn-currentDiv {
	bottom: 1em;
	translate: -50% 0%;
	border-color: var(--current-border);
}

#tn-winnerTitle, #tn-winnerPic { 
	display: none;
}

.tn-floatTitle, .tn-tempTitle {
	opacity: var(--faded);
	font-weight: bold;
	text-transform: uppercase;
}

.tn-floatTitle, #tn-nextTitle {
	font-size: 0.5em !important;
}
.tn-floatMidder, .nextVs {
	font-size: 0.75em;
}
.tn-floatBigger {
	font-size: 1em;
}

#tn-winnerPic {
	height: auto;
    max-height: 12vh;
    max-width: 100%;
	position: relative;
	anchor-name: --winner-pic;
}
.tn-winnerIcon {
	position: absolute;
	position-anchor: --winner-pic;
	color: var(--gold);
	font-size: 1.5em !important;
	display: none;
	animation: spinOnly var(--spinRate) infinite linear;
}
#tn-winnerIconL {
	position-area: left;
}
#tn-winnerIconR {
	position-area: right;
}



/* TOURNAMENT COLUMNS and LINES */

.tn-col::after {
	content: "";
	position: absolute;
	height: 100%;
	width: var(--line-width);
}
.tn-colA::after {right: 0}
.tn-colB::after {left: 0}

#A4::after, #B4::after  {background-image: linear-gradient(to bottom, 
	transparent 49%, var(--lines) 50%, transparent 51%);}
#A8::after, #B8::after  {background-image: linear-gradient(to bottom, 
	transparent 25%, var(--lines) 50%, transparent 75%);}
#A16::after, #B16::after {background-image: linear-gradient(to bottom, 
	transparent 12.5%, var(--lines) 25%, transparent 37.5%, 
	transparent 62.5%, var(--lines) 75%, transparent 87.5%);}
#A32::after, #B32::after {background-image: linear-gradient(to bottom, 
	transparent 6.25%, var(--lines) 12.5%, transparent 18.75%,
	transparent 31.25%, var(--lines) 37.5%, transparent 43.75%,
	transparent 56.25%, var(--lines) 62.5%, transparent 68.75%,
	transparent 81.25%, var(--lines) 87.5%, transparent 93.75%);}
#A64::after, #B64::after {background-image: linear-gradient(to bottom, 
	transparent 3.125%, var(--lines) 6.25%, transparent 9.375%,
	transparent 15.625%, var(--lines) 18.75%, transparent 21.875%,
	transparent 28.125%, var(--lines) 31.25%, transparent 34.375%,
	transparent 40.625%, var(--lines) 43.75%, transparent 46.875%,
	transparent 53.125%, var(--lines) 56.25%, transparent 59.375%,
	transparent 65.625%, var(--lines) 68.75%, transparent 71.875%,
	transparent 78.125%, var(--lines) 81.25%, transparent 84.375%,
	transparent 90.625%, var(--lines) 93.75%, transparent 96.875%);}



/* DUEL */

#dl {
	z-index: 7;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	height: 100vh;
	color:var(--duel-text);
	padding: 1rem;
}

.dl-heightKeeper {
	max-height: 100%;
	width: 100%;
	display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-auto-columns: 1fr auto 1fr;
    grid-auto-flow: column;
    gap: var(--pad);
    justify-items: center;
    align-items: center;
}

#dl-tooltip {
	top: 7.66rem;
	left: 50%;
	transform: translateX(-50%);
}

.dl-picKeeper {
	height: 100%;
	width: 100%;
	min-height: 0; /*ensures label isn't pushed offscreen*/
	min-width: 0;
}

.dl-competitorName {
	cursor: pointer;
	background-color: var(--duel-lbl);
	padding: var(--pad);
	text-align: center;
	width: 100%;
	font-size: 2.5em;
}

.dl-competitorPic {
	cursor: pointer;
	object-fit: contain;
	max-width: 100%;
	max-height: var(--height-limit);
	height: 100%;
	width: 100%;
	display: block;
}
.withTrans {
	transition: transform 695ms ease-out;
}

.dl-competitorText {
	cursor: pointer;
	height: 100%;
	width: 100%;
	padding: var(--pad);
	display: none;
	text-align: center;
	font-size: 1.25em;
	position: relative;
}
.dl-competitorText::after {
	content: "";
	position: absolute;
	height: var(--line-width);
	width: 100%;
	top: 0;
	left: 0;
	background-image: linear-gradient(to right, transparent 25%, var(--lines) 50%, transparent 75%);
}


#dl-vs {
	font-size: 2rem;
}

#dl-vb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	position: absolute;
	position-anchor: --duel-buttons;
	position-area: unset;
	top: 1rem;
    left: 50%;
    transform: translateX(-50%);
	z-index: 8;
}
.dl-vbParent {
	min-width: 6.2vh;
	anchor-name: --duel-buttons;
}



/* DUEL COVER - hides transitions */

#dl-cover {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	max-height: 100vh;
	z-index: 12;
	opacity: 0;
}

.here { /* legacy? */
	display: block !important;
}

.fading-in {
	display: block !important;
	animation: fade-in 700ms forwards;
}
.fading-out {
	animation: fade-out 700ms forwards;
}

#dl-cover > div {
	font-size: 5rem;
	color: var(--duel-text);
	animation: spinTrans var(--spinRate) infinite linear;
	pointer-events: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 42%;
}

@keyframes fade-in {
	0%   {opacity:0;}
	100% {opacity:1;}
}

@keyframes fade-out {
	0%   {opacity:1;}
	100% {opacity:0;}
}

@keyframes spinOnly {
	from {rotate: 0;}
	to 	 {rotate: 360deg;}
}
@keyframes spinTrans {
	from {transform: translate(-50%, -50%) rotate(0);}
	to 	 {transform: translate(-50%, -50%) rotate(360deg);}
}




/* RULES/HELP/INSTRUCTIONS */

h1 {
	color: inherit;
}

#rl {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	max-height: 100vh;
	z-index: 5;
	background-color: var(--box-dark);
    padding: var(--pad);
	color: var(--text) !important;
	height: max-content;
	width: max-content;
	max-width: 100vw;
	border: ridge var(--pad) var(--current-border);
	border-radius: 0.25rem;
}

.rl-btn-close {
	margin-left: auto;
	margin-right: auto;
	display: block;
}



/* FOOTER */

#tn-ft {
	position:absolute;
	opacity: var(--faded);
	bottom: 0;
	left: 50%;
	color: var(--duel-text);
	transform: translateX(-50%);
	z-index: 9;
}



/* CELEBRATION firework/confetti animation */

.celebration {
	position: absolute;
	z-index: 11;
}
#wn-celebration {
	left: 50%;
	top: 50%;
	
}
.wn-sploder {
	transform: scale(0);
	height:17rem;
	width: 17rem;
	position: inherit;
	translate: -50% -50%;
	border-color: #ffffff75;
	/* border-color: var(--gold); */
	border-style: double;
	border-width: 0rem;
	z-index: 10;
	border-radius: 50%;
}
.wn-fetti {
	position: inherit;
	width: 0rem;
	height: 0rem;
	background-color: transparent;
	color: black;
	font-size: 0rem;
	border-radius: 50%;
	border-color: transparent;
	border-style: dotted;
	border-width: 0rem;
	transition: all 700ms linear;
	translate: -50% -50%;

	&:nth-child(1) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 1deg);}
	&:nth-child(2) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 2deg);}
	&:nth-child(3) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 3deg);}
	&:nth-child(4) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 4deg);}
	&:nth-child(5) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 5deg);}
	&:nth-child(6) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 6deg);
	}
	&:nth-child(7) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 7deg);}
	&:nth-child(8) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 8deg);}
	&:nth-child(9) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 9deg);}
	&:nth-child(10) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 10deg);}
	&:nth-child(11) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 11deg);}
	&:nth-child(12) {animation-delay: 0ms;
		rotate:calc(360 / 12 * 12deg);
	}
}
.celebrating {
	animation: celebrate 1600ms linear ;
}
.sploding {
	animation: splode 1600ms ease-out ;
}

@keyframes celebrate {
	0% {height: 0; 
		width: 0; 
		border-width: 0;
		border-color: var(--gold);
		transform: translateX(0rem); }
	20% {border-width: 0.33rem;
		color: var(--gold);
		}
	35% {height: 2.4rem; 
		width: 2.4rem;
		font-size: 1.2rem;
		transform: translateX(6rem);}
	100% {height: 0; 
		width: 0;
		border-color: transparent;
		border-width: 0;
		transform: translateX(8rem);
		color: var(--gold);
		font-size: 0rem;
	} 
}
@keyframes splode {
	0% {transform: scale(0);}
	7% {border-width: 4.5rem;}
	40% {border-width: 4rem;transform: scale(1);}
	60% {border-width: 0rem;transform: scale(1);}
	100% {display: none;}
}



/* MEDIA QUERIES */

/* Vertical duels in portrait */
@media (orientation: portrait) {
	.heightKeeper {
		grid-template-rows: 1fr;
  		grid-auto-columns: 1fr auto auto auto 1fr auto;
  		grid-auto-flow: row;
	}
	#duel {
		overflow-y: auto;
	}
	.picKeeper {
		min-height: auto;
	}
	.vbParent {
		min-width: 100%;
	}
	#versusButtons {
		width: 100%;
		flex-direction: row;
		transform: none;
		justify-content: space-between;
		top: 0;
		left: 0;
		position-area: center;
	}
}

/* If the screen is too thin, we need to change the layout almost entirely. 
This is done here at the absolute minimum, but will also be done via JS according to the number of columns. 
If CSS ever allows variables in media queries, you can update that. */
@media screen and (max-width: 360px) {
	#winnerDiv 	{grid-area: win;}
	#current 	{grid-area: cur;}
	#A64 		{grid-area: a64;}
	#B64 		{grid-area: b64;}
	#A32 		{grid-area: a32;}
	#B32 		{grid-area: b32;}
	#A16 		{grid-area: a16;}
	#B16 		{grid-area: b16;}
	#A8 		{grid-area: a8;}
	#B8 		{grid-area: b8;}
	#A4 		{grid-area: a4;}
	#B4 		{grid-area: b4;}
	#A2 		{grid-area: a2;}	

	#tourn {
		/* background-color: green; */
		grid-template-columns: 1fr;
		grid-template-areas: 'win' 'cur' 'a64' 'b64' 'a32' 'b32' 'a16' 'b16' 'a8' 'b8' 'a4' 'b4' 'a2';
		align-content: start;
	}
	.col {
		justify-content: normal;
	}
	.floater {
		position: unset;
		translate: unset !important;
		width: auto;
		max-width: 100%;
		margin: var(--pad);
	}
}