/* VARIABLES */

:root {
	--bg-dark: #520687;
	--shadow: #d397f5;
	--box-dark: #160122; 
	--box-light: #370a50;
	
	--lines: #cc91f6;
	--gold: #ffd700;
	--current-border: var(--lines); /* next floater and rules */
	
	--text: #f0f0f0;
	--duel-text: var(--text); /* for text directly on bg */
	--header-text: var(--text);
	--winner-text: var(--gold);
	--duel-lbl: transparent;

	--bg-pic: url("https://www.transparenttextures.com/patterns/black-lozenge.png"); /* change credit if necessary */
	--line-width: 1px;
	--faded: 0.69;

	--wn-height: 40vh;
    --wn-line-thickness: 0.75vh;
    --wn-bg-colour: var(--box-dark);
    --wn-line-colour: #7fffd4;
}
.highContrast {
	/* --bg-light: var(--bg-dark); */ /* legacy? */
	--shadow: var(--bg-dark);
	--box-dark: #060109;
	--box-light: #060109; 

	--text: #fefefe;
	--duel-text: var(--text);
	--duel-lbl: var(--box-dark);
}




/* wn - Animated Bracket Weenie */

.wn-spacer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--wn-bg-colour);
    box-shadow: 0px 6px 4px 0px #0000003d;
}

#wn-container {
	position: relative;
	z-index: 1;
	width: 90vw;
	height: var(--wn-height);
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr var(--wn-line-thickness) 1fr var(--wn-line-thickness) 1fr 1fr 1fr var(--wn-line-thickness) 1fr var(--wn-line-thickness) 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 0px;
	background-color: var(--wn-line-colour);
	animation: wn-Bg-Scroll 2.5s linear infinite reverse;
	-webkit-animation: wn-Bg-Scroll 2.5s linear infinite reverse;
	-moz-animation: wn-Bg-Scroll 2.5s linear infinite reverse;
	background: linear-gradient(74deg, var(--wn-line-colour) 7%, #f9d0ff 24%, var(--wn-line-colour) 38% ,var(--wn-line-colour) 48%, #5eeabb 52%, var(--wn-line-colour) 57%, #ccffee 65%, var(--wn-line-colour) 75%, #5eeabb 82%, var(--wn-line-colour) 87% )
}

@keyframes wn-Bg-Scroll {
	0% { background-position: calc(90vw/sin(90deg)) 0; }
}
@-webkit-keyframes wn-Bg-Scroll {
	0% { background-position: calc(90vw/sin(90deg)) 0; }
}
@-moz-keyframes wn-Bg-Scroll {
	0% { background-position: calc(90vw/sin(90deg)) 0; }
}

#wn-col3, #wn-col4, #wn-col5, .wn-line {
	grid-row: span 2;
}

.wn-line {
	display: grid;
}
.wn-line > div {
	background-color: var(--wn-bg-colour);
}
.wn-line > .wn-line-on {
	background-color: transparent;
}
.wn-line4 {
	grid-template-rows: 
		calc(var(--wn-height)/4 - var(--wn-line-thickness)/2)
		calc(var(--wn-height)/4 + var(--wn-line-thickness)/2)
		calc(var(--wn-height)/4 + var(--wn-line-thickness)/2)
		calc(var(--wn-height)/4 - var(--wn-line-thickness)/2);
}
.wn-line6 {
	grid-template-rows: 
		calc(var(--wn-height)/6 - var(--wn-line-thickness)/1.5)
		1fr
		calc(var(--wn-height)/6 - var(--wn-line-thickness)/1.5)
		calc(var(--wn-height)/6 - var(--wn-line-thickness)/1.5)
		1fr
		calc(var(--wn-height)/6 - var(--wn-line-thickness)/1.5);
}

.wn-col {
	display: grid;
	gap: var(--wn-line-thickness);
}
.wn-col > div {
	background-color: var(--wn-bg-colour);
	z-index: 3;
}
#wn-col4 {
	grid-template-rows: 1fr 2fr 1fr;
	justify-items: stretch;
}
#wn-col4 img {
	max-width: 100%;
}

#wn-trophy-container {
	width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent !important;
}
#wn-trophy {
	color: var(--wn-bg-colour);
}