html {
	background: #0E4B9C;
	width: 100vw;
	height: 100vh;
	width: 100dvw;
	height: 100dvh;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	contain: paint;
	overflow: hidden;
	overscroll-behavior: contain !important;
	touch-action: none;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	zoom: 1 !important;
	zoom: reset !important;
}

#container {
	position: fixed;
	top: 3rem;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	overflow: hidden;
	user-select: none !important;
	--main: #0E4B9C;
	--main-high: #6EACFF;
	--main-low: #06316B;
	--main-vlow: #02234E;
	--main-alt: #FFF;
	font-family: var(--font-config);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: 0.3s clip-path cubic-bezier(.38,1.48,.62,1);
}
#container::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2rem;
	height: 2rem;
	background-color: #0E4B9C;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
	z-index: 1;
}
#container::after {
	content: '';
	position: absolute;
	left: -1px;
	bottom: -1px;
	width: 3rem;
	height: 3rem;
	background-color: #0E4B9C;
	clip-path: polygon(0 0, 0.2rem 0.2rem, 0.8rem 0.2rem, 0.8rem 0.8rem, 0.2rem 0.8rem, 0.2rem 0.2rem, 0 0, 0 1rem, 1rem 1rem, 1rem 2rem, 2rem 2rem, 2rem 100%, 0 100%);
	pointer-events: none;
	z-index: 1;
}

#over {
	position: fixed;
	top: 3rem;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	overflow: hidden;
	user-select: none !important;
	cursor: grab;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: 0.3s clip-path cubic-bezier(.38,1.48,.62,1);
}
#over.dragging {
	cursor: grabbing;
}
#over.zoomin {
	cursor: zoom-in;
}
#over.zoomout {
	cursor: zoom-out;
}

body.sidebar-open #container,
body.sidebar-open #over {
	clip-path: polygon(0 0, calc(100% - 21rem) 0, calc(100% - 21rem) 100%, 0 100%);
}

#bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: url('/res/img/bg.jpg');
	background-size: cover;
	background-position: center;
	pointer-events: none;
	transform: scale(2);
	will-change: transform;
}

#pane {
	position: absolute;
	left: 0;
	top: 0;
	width: 4128px;
	height: 3776px;
	transform-origin: top left;
	background: url('/res/img/grid.png');
	background-size: 32px 32px;
	user-select: none;
	outline: 4px solid var(--main);
}
#zones {
	position: absolute;
	left: 0;
	top: 0;
	width: 4032px;
	height: 3776px;
	transform-origin: top left;
}

#zones div {
	position: absolute;
}

.slot {
	position: absolute;
	width: 160px;
	height: 16px;
	border: 1px solid var(--main);
	background-color: #0008;
	color: #FFF;
	padding: 0 1px;
	line-height: 13px;
	font-size: 15px;
	font-family: var(--font-config-condensed);
	padding-left: 15px;
	contain: strict;
}
.slot.open {
	color: var(--main);
	font-style: italic;
	font-family: var(--font-config-condensed);
	padding-left: 1px;
}
.slot>img {
	width: 14px;
	height: 14px;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
.slot.highlight {
	background-color: var(--main);
	color: var(--main-alt);
}
.slot>span {
	position: absolute;
	right: 1px;
	top: 0;
	color: var(--main);
	pointer-events: none;
	font-size: 13px;
	opacity: 0.75;
}
.slot.highlight>span {
	color: var(--main-alt);
}
.slot>span>span {
	font-size: 10px;
}

.seed {
	position: absolute;
	contain: strict;
	width: 192px;
	height: 16px;
}
.seed>.seednum {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 16px;
	background-color: var(--main);
	text-align: center;
	color: var(--main-high);
	line-height: 17px;
	font-size: 15px;
	font-weight: 900;
	contain: strict;
}
.seed>.slot {
	top: 0;
	left: 32px;
}
.seed.highlight>.seednum {
	background-color: #FFF;
	color: #000;
}

.match {
	position: absolute;
	contain: strict;
	width: 192px;
	height: 64px;
	margin-top: -16px;
}
.match.highlight::after {
	content: '';
	position: absolute;
	top: 17px;
	left: 1px;
	right: 1px;
	height: 30px;
	pointer-events: none;
	outline: 1px solid #FFF;
}
.match>.slot.a {
	top: 16px;
	left: 0;
	border-bottom-style: dotted;
}
.match>.slot.b {
	top: 32px;
	left: 0;
	border-top-style: dotted;
}
.match>.result {
	position: absolute;
	top: 16px;
}
.match>.result+.result::after {
	content: '';
	position: absolute;
	top: 0;
	left: -2px;
	height: 32px;
	width: 4px;
	background-color: #000;
	clip-path: polygon(2px 2px, 0 0, 4px 0, 2px 2px, 2px 30px, 4px 32px, 0 32px, 2px 30px);
	pointer-events: none;
}
.match>.result>.resultscore {
	position: absolute;
	left: 0;
	width: 32px;
	height: 16px;
	background-color: var(--main);
	text-align: center;
	color: var(--main-alt);
	line-height: 17px;
	font-size: 15px;
	font-weight: 900;
}
.match>.result.optional>.resultscore {
	background: repeating-linear-gradient(-45deg, var(--main-low) 0px, var(--main-low) 5.65px, var(--main-vlow) 5.65px, var(--main-vlow) 11.3px);
}
.match>.result>.resultscore.won {
	background-color: #FFF;
	color: #000;
}
.match>.result>.resultscore.a {
	top: 0;
}
.match>.result>.resultscore.b {
	top: 16px;
}
.match>.result>.resultid {
	position: absolute;
	left: 0;
	width: 32px;
	top: 32px;
	color: var(--main);
	font-size: 10px;
	font-weight: 900;
	text-align: center;
	pointer-events: none;
}
.match.awins>.slot.a {
	border-top-color: #FFF;
	border-right-color: #FFF;
	font-weight: 900;
}
.match.bwins>.slot.b {
	border-bottom-color: #FFF;
	border-right-color: #FFF;
	font-weight: 900;
}
.match>.matchid {
	position: absolute;
	right: 0;
	top: 3px;
	color: var(--main);
	font-size: 10px;
	font-weight: 900;
	pointer-events: none;
}

.newmatch {
	position: absolute;
	width: 479px;
	height: 381px;
	background: url('/res/img/glow-new.png');
	background-size: contain;
	transform: translate(-50%, -50%);
	mix-blend-mode: plus-lighter;
	z-index: 3;
	animation: 10s NewMatch cubic-bezier(.12,.77,.45,1) forwards;
}
.newmatch.isfinal {
	background: url('/res/img/glow-newfinal.png');
	background-size: contain;
}
@keyframes NewMatch {
	from { opacity: 1; }
	to { opacity: 0; }
}
.newmatch::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--width);
	height: 32px;
	transform: translate(-50%, -50%);
	background: #FFF;
	animation: 0.2s NewMatchBefore linear forwards;
}
@keyframes NewMatchBefore {
	from { opacity: 1; }
	to { opacity: 0; }
}
.newmatch::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--width);
	height: 32px;
	transform: translate(-50%, -50%);
	outline: 1px solid #FFF;
	animation: 3s NewMatchAfter cubic-bezier(.07,.36,.45,1) forwards;
}
@keyframes NewMatchAfter {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

.label {
	position: absolute;
	color: var(--main);
	font-size: 12px;
	pointer-events: none;
	contain: layout style;
}

.outlinelabel {
	position: absolute;
	color: var(--main);
	font-size: 12px;
	pointer-events: none;
	contain: layout style;
}

.heading {
	position: absolute;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	background: var(--main);
	font-weight: 900;
	pointer-events: none;
	contain: strict;
}

.image {
	position: absolute;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	contain: strict;
}

.separator {
	position: absolute;
	pointer-events: none;
	border-top: 1px dotted var(--main);
	contain: strict;
}

.connector {
	position: absolute;
	pointer-events: none;
	background: var(--main);
	--mid-left: 35%;
	--mid-right: 65%;
	z-index: -1;
	contain: strict;
}
.connector.down {
	clip-path: polygon(0 0, var(--mid-left) 0, var(--mid-right) calc(100% - 1px), 100% calc(100% - 1px), 100% 100%, calc(var(--mid-right) - 1px) 100%, calc(var(--mid-left) - 1px) 1px, 0 1px);
}
.connector.up {
	clip-path: polygon(0 100%, var(--mid-left) 100%, var(--mid-right) 1px, 100% 1px, 100% 0, calc(var(--mid-right) - 1px) 0, calc(var(--mid-left) - 1px) calc(100% - 1px), 0 calc(100% - 1px));
}
.connector.sec {
	background: #000;
	--mid-left: 15%;
	--mid-left: 45%;
	z-index: -2;
}
.connector.highlight {
	background: #FFF;
	z-index: 0;
}
.connector.hidden:not(.highlight) {
	display: none;
}

.shape {
	position: absolute;
	pointer-events: none;
	contain: strict;
}

.shape.rect {
	background: var(--main);
}

.shape.tri-n {
	background: var(--main);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.shape.tri-e {
	background: var(--main);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.shape.tri-s {
	background: var(--main);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.shape.tri-w {
	background: var(--main);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.shape.miter-n {
	background: var(--main);
	clip-path: polygon(0 0, 100% 0, 100% 33%, 67% 33%, 67% 67%, 33% 67%, 33% 100%, 0 100%);
}
.shape.miter-e {
	background: var(--main);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 67% 67%, 33% 67%, 33% 33%, 0 33%);
}

#over:not(:is(.dragging-hard, .zoomin)) [data-onclick] {
	cursor: pointer;
}

/*88888888888888888888888888888888888888888*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3rem;
	overflow: hidden;
	user-select: none;
}

#header_logo {
	position: absolute;
	height: 2.5rem;
	top: 0.25rem;
	left: 0.9rem;
}

#tetrio_logo {
	position: absolute;
	height: 2rem;
	top: 0.5rem;
	left: 4.8rem;
}

#header_title {
	font-family: var(--font-display);
	font-weight: 800;
	transform: skewX(-5deg);
	font-size: 2rem;
	color: #FFF;
	position: absolute;
	top: 0.3rem;
	left: 14rem;
	white-space: nowrap;
}

#header_year {
	font-family: var(--font-display);
	font-weight: 900;
	transform: scaleX(0.8) skewX(-14deg);
	font-size: 5rem;
	color: #3077D4;
	position: absolute;
	top: -1.5rem;
	left: 28.5rem;
	white-space: nowrap;
	z-index: -1;
}

#header_buttons {
	position: fixed;
	top: 0.5rem;
	right: 1rem;
	user-select: none;
}

#header_buttons_hint {
	color: #FFF;
	display: inline-block;
	font-size: 1.25rem;
	padding: 0.2rem 0;
	margin-right: 0.2rem;
	font-family: var(--font-paragraph);
}
.header_button {
	border: 1px solid #FFF;
	color: #FFF;
	font-weight: 900;
	cursor: pointer;
	display: inline-block;
	margin-left: -1px;
	font-size: 1.25rem;
	font-family: var(--font-paragraph);
	padding: 0.2rem 0.5rem;
	transition: 0.3s color, 0.3s background-color;
}
.header_button:hover {
	background-color: #3077D4;
}
.header_button:active {
	background-color: #FFF;
	color: #0E4B9C;
	transition: 0.05s color, 0.05s background-color;
}

#loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(circle farthest-corner at center, #0008 0%, #000D 100%);
}
#loader .loader {
	position: fixed;
	top: calc(50% - 75px);
	left: calc(50% + 75px);
	background-color: #000;
	--color: #0E4B9C;
	clip-path: polygon(-500% -500%, 500% -500%, 500% 0, -500% 0);
}
#loader.hidden {
	display: none;
}

#error {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(circle farthest-corner at center, #0008 0%, #000D 100%);
	text-align: center;
	padding: 2rem;
	padding-top: calc(50vh - 5rem);
	padding-top: calc(50dvh - 5rem);
}

#error img {
	height: 6rem;
}

#error-reason {
	margin-top: 0.5rem;
	font-size: 2rem;
	color: #FF4B52;
	font-weight: 800;
}
#error.hidden {
	display: none;
}

#sidebar {
	position: absolute;
	top: 3rem;
	right: 1rem;
	bottom: 1rem;
	width: 20rem;
	background-color: #0C112E;
	transition: 0.3s transform cubic-bezier(.38,1.48,.62,1);
}
body:not(.sidebar-open) #sidebar {
	pointer-events: none;
	transform: translateX(35rem);
}

#close-sidebar {
	position: absolute;
	top: calc(50% - 5rem);
	left: -1rem;
	height: 10rem;
	width: 1rem;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	cursor: pointer;
	transition: 0.3s background-color;
}
#close-sidebar:hover {
	background-color: #3077D4;
}
#close-sidebar:active {
	background-color: #FFF;
	transition: 0.05s background-color;
}
#close-sidebar::after {
	content: '';
	position: absolute;
	top: 4.4rem;
	left: 0.2rem;
	width: 0.6rem;
	height: 1.2rem;
	background-color: #FFF;
	pointer-events: none;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: 0.3s background-color;
}
#close-sidebar:active::after {
	background-color: #000;
	transition: 0.05s background-color;
}
body:not(.sidebar-open) #close-sidebar {
	display: none;
}

#side {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.userpane .avatar {
	width: 20rem;
}
.userpane>h1 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	transform: skewX(-5deg);
	margin-top: -2rem;
	color: #FFF;
}
.userpane>h1>vx-outlined {
	--outline-color: #0C112E;
	--outline-width: 6px;
}

.userpane>h2 {
	color: #0E4B9C;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 900;
	margin-top: 1rem;
}

.userpane>h3 {
	color: #0E4B9C;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 900;
	margin-top: 0.25rem;
}
.userpane>h3>b {
	color: #FFF;
	font-weight: 900;
}

.userpane .matchrecord {
	position: relative;
	cursor: pointer;
	text-align: right;
	padding-top: 1rem;
	transition: 0.3s background-color;
}
.userpane .matchrecord:hover {
	background-color: #070A1A;
}
.userpane .matchrecord:active {
	background-color: #0E4B9C;
	transition: 0.05s background-color;
}

.userpane .matchrecord .matchid {
	position: absolute;
	font-family: var(--font-config);
	top: 0;
	left: 0.15rem;
	color: #0E4B9C;
	font-size: 0.8rem;
	font-weight: 900;
	text-align: left;
}
.userpane .matchrecord .opponentavatar {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 1rem;
	left: 0;
}
.userpane .matchrecord .opponent {
	font-family: var(--font-display);
	position: absolute;
	top: 1.1rem;
	left: 2.75rem;
	font-weight: 800;
	font-size: 2rem;
	text-align: left;
	transform: skewX(-5deg);
	color: #FFF;
}
.userpane .matchrecord .opponent.open {
	font-weight: 500;
	color: #0E4B9C;
}
.userpane .matchrecord .result {
	display: inline-block;
	font-family: var(--font-config);
	font-weight: 900;
	font-size: 1.5rem;
	color: #FFF;
	background-color: #042A5D;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0.5rem 100%);
}
.userpane .matchrecord .result div {
	height: 2.5rem;
	width: 4.85rem;
	padding: 0.3rem 0;
	padding-left: 0.2rem;
	text-align: center;
}
.userpane .matchrecord .result div:not(:first-child) {
	margin-top: 1px;
}
.userpane .matchrecord .result div span {
	color: #0E4B9C;
	margin-left: 0.15rem;
	margin-right: 0.15rem;
}

.userpane .matchrecord.won .result {
	background-color: #FFF;
	color: #000;
}
.userpane .matchrecord.won .result div span {
	color: #888;
}

.userpane .matchrecord.lost .result {
	background-color: #000;
	color: #FF0060;
}
.userpane .matchrecord.lost .result div span {
	color: #560020;
}

.matchpane .avatar {
	width: 20rem;
	height: 10rem;
	object-fit: cover;
	object-position: center;
}
.matchpane .vs {
	position: relative;
	width: 20rem;
	box-shadow: 0px 0px 64px #FFF, 0px 0px 32px #FFF, 0px 0px 16px #FFF, 0px 0px 8px #FFF;
	z-index: 1;
}
.matchpane.finals .vs {
	box-shadow: 0px 0px 64px #6F95EB, 0px 0px 32px #6F95EB, 0px 0px 16px #6F95EB, 0px 0px 8px #6F95EB;
}
.matchpane.final .vs {
	box-shadow: 0px 0px 64px #FFC12E, 0px 0px 32px #FFC12E, 0px 0px 16px #FFC12E, 0px 0px 8px #FFC12E;
}
.matchpane .avatar[data-onclick] {
	cursor: pointer;
}

.matchpane.awins .avatar.b {
	filter: grayscale(1) brightness(0.7);
}
.matchpane.bwins .avatar.a {
	filter: grayscale(1) brightness(0.7);
}
.matchpane.awins::after,
.matchpane.bwins::after {
	content: '';
	position: absolute;
	width: 9rem;
	height: 9rem;
	mix-blend-mode: multiply;
	background: url('/res/img/eliminated.png');
	background-size: contain;
	left: 5.5rem;
	pointer-events: none;
}
.matchpane.awins::after {
	top: 21rem;
}
.matchpane.bwins::after {
	top: 0;
}

.matchpane>h1 {
	position: relative;
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	transform: skewX(-5deg);
	color: #000;
	margin-top: -2rem;
	margin-bottom: -1.8rem;
	z-index: 2;
	pointer-events: none;
}
.matchpane>h1>vx-outlined {
	--outline-color: #FFF;
	--outline-width: 4px;
	text-shadow: 0px 0px 32px #FFF, 0px 0px 16px #FFF;
}

.matchpane.finals>h1 {
	color: #FFF;
}
.matchpane.finals>h1>vx-outlined {
	--outline-color: #6F95EB;
	--outline-width: 4px;
	text-shadow: 0px 0px 32px #6F95EB, 0px 0px 16px #6F95EB;
}

.matchpane.final>h1 {
	color: #FFF;
}
.matchpane.final>h1>vx-outlined {
	--outline-color: #FFC12E;
	--outline-width: 4px;
	text-shadow: 0px 0px 32px #FFC12E, 0px 0px 16px #FFC12E;
}

.matchpane>h2 {
	color: #0E4B9C;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 900;
	margin-top: 0.25rem;
}
.matchpane>h2>b {
	color: #FFF;
	font-weight: 900;
}
.matchpane>h2>b.bad {
	color: #FF0060;
}
.matchpane>h2>b[data-onclick] {
	cursor: pointer;
}

.matchpane>h3 {
	color: #0E4B9C;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 900;
	margin-top: 0.25rem;
}
.matchpane>h3>b {
	color: #FFF;
	font-weight: 900;
}

.matchpane>.results {
	text-align: center;
	margin-top: 1rem;
}

.matchpane>.results>.results-header>img {
	width: 3rem;
	height: 3rem;
	margin: 0 1rem;
}

.matchpane>.results>.result {
	height: 3.5rem;
}
.matchpane>.results>.result>div {
	display: inline-block;
	width: 6rem;
	height: 3.5rem;
	font-size: 3rem;
	color: #FFF;
	background-color: #0E4B9C;
	font-family: var(--font-config);
	font-weight: 900;
	padding: 0 0.5rem;
}
.matchpane>.results>.result>div.a {
	text-align: right;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 1rem 100%);
}
.matchpane>.results>.result>div.b {
	text-align: left;
	clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
}
.matchpane>.results>.result.unnecessary>div {
	background: repeating-linear-gradient(-45deg, #06316B 0px, #06316B 8px, #02234E 8px, #02234E 16px);
}
.matchpane>.results>.result.awins>div.a,
.matchpane>.results>.result.bwins>div.b {
	color: #000;
	background-color: #FFF;
}

.matchpane>.results>.result>span {
	display: inline-block;
	width: 2rem;
	height: 3.5rem;
	font-size: 3rem;
	color: #0E4B9C;
	font-family: var(--font-config);
	font-weight: 900;
	vertical-align: top;
}

.matchpane>.editresults {
	display: none;
}

@media (max-width: 1080px) {
	#header_buttons_hint { display: none; }
}
@media (max-width: 985px) and (min-width: 723px) {
	#header_title { display: none; }
	#header_year { display: none; }
}
@media (max-width: 880px) {
	#sidebar {
		top: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0px 0px 32px #000;
	}
	#container, #over {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
	}
	#close-sidebar {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 20rem;
		width: 500vw;
		width: 500dvw;
		left: unset;
		height: unset;
		border: none;
		cursor: pointer;
		background-color: #000A;
		transition: 0.3s background-color;
	}
	#close-sidebar:hover {
		background-color: #000A;
	}
	#close-sidebar:active {
		background-color: #000A;
	}
	#close-sidebar::after {
		display: none;
	}
}
@media (max-width: 722px) {
	#header_buttons { display: none; }
	#container { left: 0; right: 0; bottom: 0; }
	#container::after { display: none; }
	#over { left: 0; right: 0; bottom: 0; }
}
@media (max-width: 570px) {
	#header_year { display: none; }
}