@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import '_font_satoshi.css';

/* Space Mono (Primary)
 Space Grotesk
 Satoshi Variable (Secondary) */

html {
	width: 100%;
	height: 100%;
	font-family: "Space Mono", "Satoshi", sans-serif;
	font-weight: 600;
	font-size: 10px;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	text-transform: uppercase;
}
*, *:before, *:after {
	/*-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;*/
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

:root {
	--white: #FFF;
	--white-rgb: 255,255,255;
	--black: #000;
	--black-rgb: 0,0,0;
	--gray: #9B9B9B;
	--gray-rgb: 155,155,155;
	--dark-gray: #2B2E2F;
	--dark-gray-rgb: 43,46,47;

	--veto-red: #f00f1c;
	--veto-red-rgb: 240,15,28;
	--primary-rivals: #FFFFFF;
	--primary-rivals-rgb: 255,255,225;
	--primary-lol: #68FAE1; /* Frost-Mint */
	--primary-lol-rgb: 104,250,225;
	--primary-cs2: #FD1A05; /* Inferno-Orange */
	--primary-cs2-rgb: 253,42,5;
	--primary-val: #F3253B; /* Coral-Red */
	--primary-val-rgb: 243,37,59;
	--secondary-rivals: #000000;
	--secondary-rivals-rgb: 0,0,0;
	--secondary-lol: #02382F; /* Highlight Mint */
	--secondary-lol-rgb: 2,56,47;
	--secondary-cs2: #981903; /* Highlight Orange */
	--secondary-cs2-rgb: 152,25,3;
	--secondary-val: #A52B34; /* Highlight Coral */
	--secondary-val-rgb: 165,43,52;
	--light-rivals: #9B9B9B;
	--light-rivals-rgb: 155,155,155;
	--light-lol: #A5FDF0; /* Light-Mint */
	--light-lol-rgb: 195,253,243;
	--light-cs2: #FEAA9B; /* Light-Orange */
	--light-cs2-rgb: 254,170,155;
	--light-val: #FFB5BB; /* Light-Coral */
	--light-val-rgb: 255,181,187;
	--dark-rivals: #2B2E2F;
	--dark-rivals-rgb: 43,46,47;
	--dark-lol: #001D19; /* Dark-Mint */
	--dark-lol-rgb: 0,29,25;
	--dark-cs2: #190401; /* Dark-Orange */
	--dark-cs2-rgb: 25,4,1;
	--dark-val: #34070A; /* Dark-Coral */
	--dark-val-rgb: 52,7,10;

	--text-font: "Satoshi", sans-serif;

	/* National Flag colors */
	--denmark-red-rgb: 200,16,46;
	--denmark-white-rgb: 255,255,255;

	--finland-blue-rgb: 0,47,108;
	--finland-white-rgb: 255,255,255;

	--iceland-blue-rgb: 2,82,156;
	--iceland-blue-rgb: 0,56,151;
	--iceland-white-rgb: 255,255,255;
	--iceland-red-rgb: 220,30,53;

	--norway-red-rgb: 186,12,47;
	--norway-white-rgb: 255,255,255;
	--norway-blue-rgb: 0,32,91;

	--sweden-blue-rgb: 0,106,167;
	--sweden-yellow-rgb: 254,204,2;

	--denmark-primary-rgb: var(--denmark-red-rgb);
	--finland-primary-rgb: var(--finland-blue-rgb);
	--iceland-primary-rgb: var(--iceland-blue-rgb);
	--norway-primary-rgb: var(--norway-red-rgb);
	--sweden-primary-rgb: var(--sweden-blue-rgb);

	--language: 'english';

	--left-offset: 100px;
	--right-offset: 100px;
	--top-offset: 100px;
	--bottom-offset: 100px;

	--top-bar-offset: 45px;
	--top-bar-height: 85px;

	--val-green: #028466;
	--val-green-rgb: 2,132,102;
	--val-red: #bd0004;
	--val-red-rgb: 189,0,4;
}

body {
	margin: 0;
	image-rendering: optimizeQuality;
	image-rendering: auto;
	-ms-interpolation-mode: nearest-neighbor;

	--light-text-color: var(--white);
	--dark-text-color: var(--black);
	--light-text-color-rgb: var(--white-rgb);
	--dark-text-color-rgb: var(--black-rgb);

	--text-color: var(--black);
	--text-color-rgb: var(--black-rgb);
	--text-shadow-color: var(--white);
	--text-shadow-color-rgb: var(--white-rgb);
	--primary-color: var(--primary-rivals);
	--primary-color-rgb: var(--primary-rivals-rgb);
	--secondary-color: var(--secondary-rivals);
	--secondary-color-rgb: var(--secondary-rivals-rgb);
	--light-color: var(--light-rivals);
	--light-color-rgb: var(--light-rivals-rgb);
	--dark-color: var(--dark-rivals);
	--dark-color-rgb: var(--dark-rivals-rgb);
}
[data-theme="lol"i],
.theme-lol {
	--text-color: var(--black);
	--text-color-rgb: var(--black-rgb);
	--text-shadow-color: var(--white);
	--text-shadow-color-rgb: var(--white-rgb);
	--primary-color: var(--primary-rivals);
	--primary-color: var(--primary-lol);
	--primary-color-rgb: var(--primary-lol-rgb);
	--secondary-color: var(--secondary-lol);
	--secondary-color-rgb: var(--secondary-lol-rgb);
	--light-color: var(--light-lol);
	--light-color-rgb: var(--light-lol-rgb);
	--dark-color: var(--dark-lol);
	--dark-color-rgb: var(--dark-lol-rgb);
}
[data-theme="cs2"i],
.theme-cs2 {
	--text-color: var(--white);
	--text-color-rgb: var(--white-rgb);
	--text-shadow-color: var(--black);
	--text-shadow-color-rgb: var(--black-rgb);
	--primary-color: var(--primary-cs2);
	--primary-color-rgb: var(--primary-cs2-rgb);
	--secondary-color: var(--secondary-cs2);
	--secondary-color-rgb: var(--secondary-cs2-rgb);
	--light-color: var(--light-cs2);
	--light-color-rgb: var(--light-cs2-rgb);
	--dark-color: var(--dark-cs2);
	--dark-color-rgb: var(--dark-cs2-rgb);
}
[data-theme="val"i],
.theme-val {
	--text-color: var(--white);
	--text-color-rgb: var(--white-rgb);
	--text-shadow-color: var(--black);
	--text-shadow-color-rgb: var(--black-rgb);
	--primary-color: var(--primary-val);
	--primary-color-rgb: var(--primary-val-rgb);
	--secondary-color: var(--secondary-val);
	--secondary-color-rgb: var(--secondary-val-rgb);
	--light-color: var(--light-val);
	--light-color-rgb: var(--light-val-rgb);
	--dark-color: var(--dark-val);
	--dark-color-rgb: var(--dark-val-rgb);
}
body {
	--border-color: var(--text-shadow-color);
	--border-color-rgb: var(--text-shadow-color);
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: none;
}
input[type="search" i] {
 -webkit-appearance: searchfield;
 -moz-appearance: searchfield;
 appearance: searchfield;
}
input[disabled],
input[disabled] ~ .checkbox-state {
	cursor: not-allowed;
}

label {
	cursor: pointer;
}

input[type=number] {
    -moz-appearance: number-input;
    -moz-appearance: textfield;
	text-align: inherit;
	position: relative;
	width: auto;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

dt, th, .bold {
	font-weight: bold;
}
dt {
	margin-bottom: 4px;
}
dd {
	margin-left: 0.5em;
}

pre {
    white-space: pre-line;
}

summary { cursor: pointer; }
summary:focus, summary:active { outline: none; }

/* STYLESHEET */
html {
	position: relative;
}
body {
	color: var(--white);
	font-size: 15px;
	line-height: 1.25;
	width: 100%; height: 100%;
	width: 1920px; height: 1080px;
	position: absolute;
}
html.debug {
	background-color: white;
}
.debug body  {
	background-color: #888;
	color: rgba(45,45,45,0.9);
}

.debug body {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

.textFitted {
	vertical-align: top;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Internationalization/Localization */
[data-english]:before {	content: attr(data-english); }
html[lang="SE"i] [data-swedish]:before { content: attr(data-swedish); }

.bg-img,
.bg-loop {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1920px;
	height: 1080px;
	background: url('../img/bg/rivals-planet.png') center top no-repeat;
}
.debug.bg body {
	background-color: transparent;
}

.event-logos {
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.event-logo,
.rivals-logo {
	background: no-repeat center / contain;
	width: 120px;
	height: 60px;
	display: inline-block;
	flex-shrink: 0;
}
.rivals-logo { background-image: url('../img/RIVALS_WORDMARK_WHITE.svg'); background-position: center top; }
.rivals-logo.rivals-black { background-image: url('../img/RIVALS_WORDMARK_BLACK.svg'); }
.theme-lol .rivals-logo, .rivals-logo.rivals-lol { background-image: url('../img/RIVALS_WORDMARK_LOL.svg'); }
.theme-cs2 .rivals-logo, .rivals-logo.rivals-cs2 { background-image: url('../img/RIVALS_WORDMARK_CS2.svg'); }
.theme-val .rivals-logo, .rivals-logo.rivals-val { background-image: url('../img/RIVALS_WORDMARK_VAL.svg'); }
.rivals-logo.top,
.rivals-logo.bottom,
.rivals-logo.left,
.rivals-logo.right {
	position: absolute;
	z-index: 10;
}
.rivals-logo.top {
	top: calc(var(--top-offset));
}
.rivals-logo.bottom {
	bottom: var(--bottom-offset);
}
.rivals-logo.left {
	left: var(--left-offset);
}
.rivals-logo.right {
	right: var(--right-offset);
}
.event-logo-divider {
	width: 2px;
	height: 50px;
	margin: 0 30px;
	background-color: var(--black);
	display: inline-block;
}

.team-logo {
	filter: drop-shadow(0px 0px rgba(var(--white-rgb), 1));
	flex-shrink: 0;
}

/*
.page-header {
	color: var(--black);
	background-color: var(--white);
	line-height: 84px;
	font-size: 40px;

	position: absolute;
	left: var(--left-offset);
	right: var(--right-offset);
	top: var(--top-offset);
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.page-title {
	flex-grow: 2;
	padding: 0 48px;
	white-space: nowrap;
}
.page-title:not(:empty):before {
	content: '';
}
.event-sponsors {
	position: relative;
	padding: 12px;
	background-color: var(--black);
	max-width: 450px;
	min-width: 400px;
	height: 84px;
}
.event-sponsors #sponsor-items {
	position: absolute;
	left: 24px;
	right: 24px;
	top: 12px;
	bottom: 12px;
	width: calc(100% - 48px);
	height: calc(100% - 24px);
}
.event-sponsors #sponsor-items .item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}
.page-header:before,
.event-sponsors:before {
	width: 12px;
	height: 100%;
	content: '';
	background: no-repeat 10% center / auto 100px;
	background-image: url('../img/prism.png');
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.event-sponsors .sponsor {
	height: 100%;
	display: flex;
	align-items: center;
	margin: 0 24px;
}
.sponsor img {
	max-height: 100%;
	max-width: 100%;
	vertical-align: top;
}
.event-sponsors [src*="vitamin well"i] { max-height: 75%; }
.event-sponsors [src*="esport united"i] { max-height: 75%; }
.event-sponsors [src*="playr"i] { max-height: 50%; }*/

.role-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	-webkit-mask: no-repeat center / contain;
	font-size: 36px;
	background-color: var(--primary-color);
}
.role-icon.support {
	width: 1.1em;
}
.role-icon.adc, .role-icon.bot { -webkit-mask-image: url('../img/roles/bot.svg'); }
.role-icon.top { -webkit-mask-image: url('../img/roles/top.svg'); }
.role-icon.mid, .role-icon.middle { -webkit-mask-image: url('../img/roles/mid.svg'); }
.role-icon.jungle, .role-icon.jungler { -webkit-mask-image: url('../img/roles/jungle.svg'); }
.role-icon.support { -webkit-mask-image: url('../img/roles/support.svg'); }

.agent-role {
	display: inline-block;
	width: 1em;
	height: 1em;
	-webkit-mask: no-repeat center;
	-webkit-mask-size: contain;
	background-color: var(--primary-val);
}
.agent-role.controller { -webkit-mask-image: url('../img/roles/controller.svg'); }
.agent-role.duelist { -webkit-mask-image: url('../img/roles/duelist.svg'); }
.agent-role.initiator { -webkit-mask-image: url('../img/roles/initiator.svg'); }
.agent-role.sentinel { -webkit-mask-image: url('../img/roles/sentinel.svg'); }

[class="role-icon"],
[class="role-icon "],
[class="agent-role"],
[class="agent-role "] {
	display: none;
}

/* Game information */
.game-icon {
	width: 1.15em;
	height: 1.15em;
	-webkit-mask: no-repeat right center / contain;
	margin-right: 0.15em;
	background-color: var(--text-color);
}
[class="game-icon"] { display: none; }
.game-icon.cs, .game-icon.counter-strike, .game-icon.cs2 { -webkit-mask-image: url('../img/icon-cs2.png'); }
.game-icon.dota, .game-icon.dota2 { -webkit-mask-image: url('../img/dota2_logo.png'); }
.game-icon.lol, .game-icon.leageue-of-legends { -webkit-mask-image: url('../img/icon-lol.png'); }
.game-icon.rl, .game-icon.rocket-league { -webkit-mask-image: url('../img/rocketleague_logo.png'); }
.game-icon.val, .game-icon.valorant { -webkit-mask-image: url('../img/icon-val.png'); }