:root
{
	--color1: #4c5844;
	--color2: #3e4637;
	--color3: #5a6a50;
	--color4: #c5b555;
	--color5: #fff;
	--color6: #ffffff52;
	--color7: #303030;
	--color8: #282e22;
	--color9: #8e8923;

	--bg-color-1: var(--color1);
	--bg-color-2: var(--color2);
	--bg-color-3: var(--color3);
	--bg-color-4: var(--color4);
	--bg-color-5: var(--color9);

	--text-color-major: var(--color5);
	--text-color-minor: var(--color6);
	--text-color-selected: var(--color4);
	--text-color-disabled: var(--color7);

	--text-shadow: 1px 1px var(--text-color-minor);

	--border-color-light: var(--color6);
	--border-color-dark: var(--color8);

	--font-size-1: 16px;
}

.cs-ui
{
	user-select: none;
}

.cs-ui-window, .cs-ui-button, .cs-ui-progress, .cs-ui-tab, .cs-ui-tab-page, .cs-ui-scroll, .cs-ui-scroll-thumb
{
	border-top: 1px solid var(--border-color-light);
	border-left: 1px solid var(--border-color-light);
	border-right: 1px solid var(--border-color-dark);
	border-bottom: 1px solid var(--border-color-dark);
}

.cs-ui-container, .cs-ui-button:not(.disabled):hover, .cs-ui-tab-page-content
{
	border-top: 1px solid var(--border-color-dark);
	border-left: 1px solid var(--border-color-dark);
	border-right: 1px solid var(--border-color-light);
	border-bottom: 1px solid var(--border-color-light);
}

.cs-ui-window-draggable, .cs-ui-window-resize { touch-action: none; }

.cs-ui-container { background-color: var(--bg-color-2); }

.cs-ui-window
{
	min-width: 500px;
	width: 500px;
	aspect-ratio: 3.45;
	padding: 7px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: var(--bg-color-1);
}

.cs-ui-window-header
{
	display: flex;
	align-items: center;
	gap: 5px;
}

.cs-ui-icon
{
	width: 18px;
	aspect-ratio: 1;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	pointer-events: none;
}

.cs-ui-window-title
{
	font-size: var(--font-size-1);
	color: var(--text-color-major);
}

.cs-ui-window-content
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: 25px;
	flex: 1;
}

.cs-ui-window-actions
{
	display: flex;
	gap: 25px;
	padding-top: 15px;
}

.cs-ui-progress
{
	--inner-max-progress-items-count: var(--outer-max-progress-items-count, 0);
	--inner-progress-items-count: var(--outer-progress-items-count, 0);

	flex: 1;
	height: 30px;
	padding: 5px 3px;
	align-content: center;
	background: var(--bg-color-2);
}

.cs-ui-progress-bar
{
	--progress-item-size: calc(100% / (var(--inner-max-progress-items-count) * 1.5 - 0.5));
	--progress-item-gap: calc(var(--progress-item-size) / 2);
	--step: calc(100% / var(--inner-max-progress-items-count));
	--clip-right: calc(100% - var(--inner-progress-items-count) * var(--step) + var(--progress-item-gap) * (1 - var(--inner-progress-items-count) / var(--inner-max-progress-items-count)));
	display: block;
	height: 100%;
	width: 100%;
	background: repeating-linear-gradient(to right, var(--bg-color-4) 0 var(--progress-item-size), transparent var(--progress-item-size) calc(var(--progress-item-size) + var(--progress-item-gap)));
	clip-path: inset(0 var(--clip-right) 0 0);
}

.cs-ui-button
{
	width: 100px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	font-size: var(--font-size-1);
	color: var(--text-color-major);
}

.cs-ui-tabs
{
	display: flex;
	align-items: end;
	position: relative;
	z-index: 1;
}

.cs-ui-tab
{
	width: 80px;
	height: 30px;
	padding: 4px;
	font-size: var(--font-size-1);
	color: var(--text-color-major);
	border-bottom-color: transparent;
}

.cs-ui-tab.cs-ui-status-active
{
	height: 32px;
	padding-top: 6px;
	border-bottom: 2px solid var(--bg-color-1);
	color: var(--text-color-selected);
}

.cs-ui-tab.cs-ui-status-blocked
{
	color: var(--text-color-disabled);
	text-shadow: var(--text-shadow);
}

.cs-ui-tab-page
{
	display: flex;
	margin-top: -1px;
	padding: 10px 15px;
	overflow: hidden;
	flex: 1;
}

.cs-ui-tab-page-content
{
	background-color: var(--bg-color-2);
}


.cs-ui-scroll
{
	position: relative;
	width: 22px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.cs-ui-scroll-track
{
	width: 22px;
	min-height: 0;
	flex: 1;
	overflow: hidden;
	background-color: var(--bg-color-3);
}

.cs-ui-scroll-thumb
{
	--offsetY: 0px;
	position: absolute;
	top: calc(22px + var(--offsetY));
	width: 22px;
	min-height: 22px;
	background-color: var(--bg-color-1);
}

.cs-ui-scroll-btn-top, .cs-ui-scroll-btn-bottom
{
	width: 22px;
	height: 22px;
	background-color: var(--bg-color-1);
}

.cs-ui-window-resize
{
	width: 13px;
	aspect-ratio: 1;
	margin-left: auto;
	background: var(--bg-color-2);
	cursor: nw-resize;
}
@font-face
{
	font-family: 'Tahoma';
	src: url('/assets/tahoma-D6baiPA0.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Tahoma';
	user-select: none;
	-webkit-user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
}

body
{
	width: 100vw;
	height: 100vh;
	background-color: var(--bg-color-2);
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(/assets/background-woxXL1-h.png);
	background-size: 100% 100%;
}

body:has(#app > *:not([style*="display: none"]))
{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/assets/background-woxXL1-h.png);
}

#option-btns
{
	position: fixed;
	bottom: 0;
	left: 0;
	display: none;
	margin: 0 0 1vh 1vw;
	font-family: 'Tahoma';
	letter-spacing: 1px;
}

body:has(#app.ready):not(:has(#app #disconnected-window)) #option-btns { display: block; }

#option-btns .option
{
	width: fit-content;
	margin-bottom: 2vh;
	margin-left: 1vh;
	font-size: 20px;
	color: var(--text-color-minor);

	opacity: 1;
	transition: opacity 0ms calc(var(--i) * 100ms);
}

#option-btns.instant-hide .option
{
	opacity: 0 !important;
	transition: none !important;
}

#option-btns .option:hover { color: var(--text-color-major); }

#option-btns .mainlogo
{
    width: 400px;
	aspect-ratio: 4628 / 544;
	background-image: url(/assets/logoColored-Cbq-iEaI.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#option-btns .mainlogo::after
{
	content: '';
	background-image: url(/assets/logoWhite-C_SflkOZ.png);
}

#option-btns .mainlogo:hover { background-image: url(/assets/logoWhite-C_SflkOZ.png); }

/**/
#loading-window, #disconnected-window, #quit-window
{
	position: fixed;
    inset: 0;
    margin: auto;
}

#app
{
	position: relative;
	z-index: 1;
}
#app, #app.classic { --iconUrl: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAA9klEQVR42oyTQW7CMBBFXyJWwKJ0WSFxg24q5RbpmcKZuuQG3YUtQlQqXTaJFDvb30U9EMAJfGlkz5e/x39s43yLpEeikJT1Oe6IM0mlLlE+KjZhnzttMGEcr0ACfANL4BhyAXk6IvzqzZc2+s7hOwfwNiium2rVS482zqbzMzvgubhukPOtrT31ISZ+UQTOt3K+tTSTRBrMFyFK37mfISuz6XwdGvYJQKQIkbstYvZiYkmiqn/Nb2aer8XJv/Mb2F0mRvjOcdFpIAXe66YCWANbYFs3FRajCEfIJWl/2LE/7OzI+b3PYs/zI1QVwOLpeRO4UfwNANPwvZj1SBvPAAAAAElFTkSuQmCC'); }
#app.next21 { --iconUrl: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20290%20282.73'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20.cls-2%20{%20fill:%20%231468be;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20d='m145,0c9.94,4.9,28.28,43.58,52.21,82.39.57.93,1.55,1.54,2.64,1.64,11.39,1.09,75.89,7.64,89.35,16.96.83.57,1.05,1.69.5,2.53-2.73,4.11-14.93,18.94-69.49,69.34-1.08.99-1.42,2.55-.85,3.9,5.71,13.54,35.2,84.65,33.06,102.89-.13,1.08-.77,2.03-1.71,2.58-.31.18-.63.33-.98.39-12.76,2.35-67.76-29.14-104.71-46.27-36.95,17.12-91.96,48.62-104.72,46.27-.35-.06-.67-.21-.98-.39-.94-.55-1.58-1.5-1.71-2.58-2.14-18.24,27.35-89.34,33.06-102.89.57-1.35.22-2.9-.85-3.9C15.23,122.46,3.03,107.63.31,103.52c-.56-.84-.33-1.95.5-2.53,13.45-9.32,77.95-15.87,89.35-16.96,1.09-.1,2.06-.71,2.64-1.64C116.72,43.58,135.06,4.9,145,0Z'/%3e%3cpath%20class='cls-1'%20d='m145,50.51c6.46,3.19,18.38,28.33,33.94,53.55.37.6,1.01,1,1.71,1.07,7.41.71,49.33,4.96,58.07,11.02.54.37.68,1.1.32,1.64-1.77,2.67-9.7,12.31-45.17,45.07-.7.65-.92,1.66-.55,2.53,3.71,8.8,22.88,55.02,21.49,66.88-.08.7-.5,1.32-1.11,1.68-.2.12-.41.21-.64.25-8.3,1.53-44.05-18.94-68.06-30.07-24.02,11.13-59.77,31.61-68.07,30.08-.23-.04-.44-.14-.64-.25-.61-.36-1.03-.97-1.11-1.68-1.39-11.85,17.78-58.07,21.49-66.88.37-.88.14-1.89-.55-2.53-35.47-32.76-43.4-42.4-45.17-45.07-.36-.54-.22-1.27.32-1.64,8.75-6.06,50.67-10.31,58.07-11.02.71-.07,1.34-.46,1.71-1.07,15.56-25.23,27.48-50.37,33.94-53.55Z'/%3e%3cpath%20class='cls-2'%20d='m145,90.1c3.68,1.81,10.46,16.12,19.32,30.48.21.34.57.57.98.61,4.22.4,28.08,2.83,33.06,6.27.31.21.39.63.18.94-1.01,1.52-5.52,7.01-25.71,25.65-.4.37-.53.94-.32,1.44,2.11,5.01,13.02,31.32,12.23,38.07-.05.4-.28.75-.63.95-.11.07-.23.12-.36.14-4.72.87-25.07-10.78-38.74-17.12-13.67,6.33-34.03,17.99-38.75,17.12-.13-.02-.25-.08-.36-.14-.35-.2-.59-.55-.63-.95-.79-6.75,10.12-33.06,12.23-38.07.21-.5.08-1.07-.32-1.44-20.19-18.65-24.7-24.13-25.71-25.65-.21-.31-.12-.72.18-.94,4.98-3.45,28.84-5.87,33.06-6.27.4-.04.76-.26.98-.61,8.86-14.36,15.64-28.67,19.32-30.48Z'/%3e%3c/svg%3e"); }

#loading-window .icon, #disconnected-window .icon, #quit-window .icon, #answers-window .icon, .options-window .icon
{
	background-image: var(--iconUrl);
}

#loading-window
{
	--outer-max-progress-items-count: 25;
	--outer-progress-items-count: 0;
}

#loading-window p { color: var(--text-color-minor); }

#loading-window .cs-ui-window-actions { align-items: center; }

.cs-ui-window-actions .cs-ui-button { justify-content: left; }

#disconnected-window .cs-ui-window-actions { align-items: end; }

#disconnected-window p
{
	color: var(--text-color-minor);
	flex: 1;
}

#quit-window .cs-ui-window-content { align-items: center; }

#quit-window p { color: var(--text-color-major); }

#notification
{
	--color1: #12d440;
	--color2: #ffe42b;
	--color: var(--color1);

	--bg-color: #000000bd;

	position: fixed;
	z-index: 2;
	right: 0;

	min-width: 200px;
	max-width: 500px;
	min-height: 75px;
	width: fit-content;
	margin: 20px 20px 0px 0px;
	display: flex;
	align-items: stretch;
	gap: 2px;
	pointer-events: none;
}

#notification.info {--color: var(--color1)}
#notification.warning {--color: var(--color2)}

#notification>div { padding: 10px 7px; }

#notification .icon-wrapper
{
	flex: 0 0 40px;
	background: var(--bg-color);
	border-radius: 10px 0px 0px 10px;
}

#notification .icon
{
	width: 100%;
	height: 100%;
	mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill-rule:%20evenodd;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20fill='currentColor'%20d='M3,0H19a3.536,3.536,0,0,1,3,3V19a3.536,3.536,0,0,1-3,3H3a3.536,3.536,0,0,1-3-3V3A3.536,3.536,0,0,1,3,0Zm7,8h2v9H10V8Zm0-3h2V7H10V5Z'/%3e%3c/svg%3e") left top/ contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill-rule:%20evenodd;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20fill='currentColor'%20d='M3,0H19a3.536,3.536,0,0,1,3,3V19a3.536,3.536,0,0,1-3,3H3a3.536,3.536,0,0,1-3-3V3A3.536,3.536,0,0,1,3,0Zm7,8h2v9H10V8Zm0-3h2V7H10V5Z'/%3e%3c/svg%3e") left top/ contain no-repeat;
	background-color: var(--color);
}

#notification .content
{
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	border-radius: 0px 10px 10px 0px;
	color: var(--color);
	background: var(--bg-color);
}

#notification .content>p { margin-bottom: 15px; }

/*general window styles begin*/
.options-window
{
	position: fixed;
	min-width: 450px;
	min-height: 250px;
	width: 650px;
	height: 400px;
	z-index: 1;

	contain: layout paint;
	will-change: transform;
}

.options-window .cs-ui-window-title { color: var(--text-color-minor); }
.options-window.active .cs-ui-window-title { color: var(--text-color-major); }

.options-window .btns
{
	display: flex;
	margin-left: auto;
	gap: 5px;
}

.options-window .btns>div
{
	width: 22px;
	height: 22px;
	padding: 0;
}

.options-window .btns .minimize .cs-ui-icon
{
	--icon-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3e%3cline%20x1='64'%20y1='384'%20x2='364'%20y2='384'%20stroke='currentColor'%20stroke-width='64'%20/%3e%3c/svg%3e");
}

.options-window .btns .close .cs-ui-icon
{
	--icon-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='currentColor'%20d='M182.9%20137.4L160.3%20114.7L115%20160L137.6%20182.6L275%20320L137.6%20457.4L115%20480L160.3%20525.3L182.9%20502.6L320.3%20365.3L457.6%20502.6L480.3%20525.3L525.5%20480L502.9%20457.4L365.5%20320L502.9%20182.6L525.5%20160L480.3%20114.7L457.6%20137.4L320.3%20274.7L182.9%20137.4z'/%3e%3c/svg%3e");
	--icon-color: var(--text-color-minor);
}

.options-window.active .btns .close .cs-ui-icon { --icon-color: var(--text-color-major); }

.options-window .btns .cs-ui-icon { position: relative; }

.options-window .btns .disabled .cs-ui-icon::before, .options-window .btns .cs-ui-icon::after
{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mask: var(--icon-url) center / contain no-repeat;
	-webkit-mask: var(--icon-url) center / contain no-repeat;
}

.options-window .btns .disabled .cs-ui-icon::before
{
	background-color: var(--text-color-minor);
	transform: translate(1px, 1px);
}

.options-window .btns .cs-ui-icon::after { background-color: var(--icon-color, var(--text-color-disabled)); }
.options-window .btns .disabled .cs-ui-icon::after { background-color: var(--text-color-disabled); }

.options-window .cs-ui-window-content
{
	justify-content: start;
	overflow: hidden;
}

.options-window .cs-ui-tab-page-content
{
	display: flex;
	flex-direction: column;
	flex: 1;
	border-right: 0;
}

.options-window .cs-ui-window-resize { background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='%23ffffff52'%20d='M%20576%20192%20L%20448%20192%20L%20448%2064%20L%20576%2064%20L%20576%20192%20Z%20M%20576%20384%20L%20448%20384%20L%20448%20256%20L%20576%20256%20L%20576%20384%20Z%20M%20384%20256%20L%20384%20384%20L%20256%20384%20L%20256%20256%20L%20384%20256%20Z%20M%20192%20576%20L%2064%20576%20L%2064%20448%20L%20192%20448%20L%20192%20576%20Z%20M%20384%20448%20L%20384%20576%20L%20256%20576%20L%20256%20448%20L%20384%20448%20Z%20M%20576%20576%20L%20448%20576%20L%20448%20448%20L%20576%20448%20L%20576%20576%20Z'/%3e%3c/svg%3e") center / cover no-repeat; }

.options-window .about-wrapper, .options-window .about-wrapper .content
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.options-window .about-wrapper .content h1 { color: var(--text-color-major); }
.options-window .about-wrapper .content p { color: var(--text-color-minor); }
.options-window .about-wrapper .suggest
{
	margin-left: auto;
	color: var(--text-color-selected);
}

.options-window .about-wrapper .suggest:visited { color: var(--text-color-selected); }

.options-window .cs-ui-scroll { border: 0; }

.options-window .cs-ui-scroll-btn-top, .options-window .cs-ui-scroll-btn-bottom
{
	padding: 0;
}

.options-window .cs-ui-scroll-btn-top .cs-ui-icon, .options-window .cs-ui-scroll-btn-bottom .cs-ui-icon
{
	mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='%23currentColor'%20d='M144%20384L320%20184L496%20384L144%20384z'/%3e%3c/svg%3e") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='%23currentColor'%20d='M144%20384L320%20184L496%20384L144%20384z'/%3e%3c/svg%3e") center / contain no-repeat;
	background-color: var(--text-color-major);
}

.options-window .cs-ui-scroll-btn-top:hover, .options-window .cs-ui-scroll-btn-bottom:hover
{
	background-color: var(--bg-color-1);
	border-top: 1px solid var(--border-color-light);
	border-left: 1px solid var(--border-color-light);
	border-right: 1px solid var(--border-color-dark);
	border-bottom: 1px solid var(--border-color-dark);

}

.options-window .cs-ui-scroll-btn-top:hover .cs-ui-icon, .options-window .cs-ui-scroll-btn-bottom:hover .cs-ui-icon
{
	background-color: var(--color6);
}

.options-window .cs-ui-scroll-btn-top:active, .options-window .cs-ui-scroll-btn-bottom:active
{
	background-color: var(--bg-color-2);
	border-top: 1px solid var(--border-color-dark);
	border-left: 1px solid var(--border-color-dark);
	border-right: 1px solid var(--border-color-light);
	border-bottom: 1px solid var(--border-color-light);
}

.options-window .cs-ui-scroll-btn-top:active .cs-ui-icon, .options-window .cs-ui-scroll-btn-bottom:active .cs-ui-icon
{
	background-color: var(--text-color-disabled);
}

.options-window .cs-ui-scroll-btn-bottom .cs-ui-icon { transform: rotate(180deg); }

/*general window styles end*/


/*players window styles begin*/
.options-window .players-wrapper
{
	width: 100%;
	display: flex;
	border-bottom: 1px solid var(--border-color-light);
	border-right: 1px solid var(--border-color-light);
	border-left: 1px solid var(--border-color-dark);
	border-top: 1px solid var(--border-color-dark);
}

.options-window #players
{
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	background-color: var(--bg-color-2);
}

.options-window #players .header
{
	display: grid;
	grid-template-columns: 30px auto 90px 65px 22px;
	height: fit-content;
}

.options-window #players .header span
{
	display: inline-block;
	height: 22px;
	padding: 0 2px;
	color: var(--text-color-major);
	background: var(--bg-color-1);
	border-top: 1px solid var(--border-color-light);
	border-left: 1px solid var(--border-color-light);
	border-right: 1px solid var(--border-color-dark);
	border-bottom: 1px solid var(--border-color-dark);
}

.options-window #players .header span.avatar
{
	background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='white'%20d='M476.1%20480.6C462.1%20425.1%20411.9%20384%20352%20384L288%20384C228.1%20384%20177.9%20425.1%20163.9%20480.6C122%20439.9%2096%20383%2096%20320C96%20196.3%20196.3%2096%20320%2096C443.7%2096%20544%20196.3%20544%20320C544%20383%20518%20439.9%20476.1%20480.6zM447.6%20504C411.5%20529.2%20367.4%20544%20320%20544C272.6%20544%20228.5%20529.2%20192.3%20504.1C196.3%20454.8%20237.6%20416%20288%20416L352%20416C402.4%20416%20443.6%20454.8%20447.7%20504.1zM320%20576C461.4%20576%20576%20461.4%20576%20320C576%20178.6%20461.4%2064%20320%2064C178.6%2064%2064%20178.6%2064%20320C64%20461.4%20178.6%20576%20320%20576zM320%20304C293.5%20304%20272%20282.5%20272%20256C272%20229.5%20293.5%20208%20320%20208C346.5%20208%20368%20229.5%20368%20256C368%20282.5%20346.5%20304%20320%20304zM240%20256C240%20300.2%20275.8%20336%20320%20336C364.2%20336%20400%20300.2%20400%20256C400%20211.8%20364.2%20176%20320%20176C275.8%20176%20240%20211.8%20240%20256z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
}

.options-window #players .header .update
{
	width: 22px;
	height: 22px;
	padding: 0;
	background-color: var(--bg-color-1);
}

.options-window #players .header .update .cs-ui-icon
{
	mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='currentColor'%20d='M512%2096L512%2064L576%2064L576%20256L384%20256L384%20192L463.1%20192C427.9%20152.7%20376.8%20128%20320%20128C214%20128%20128%20214%20128%20320C128%20426%20214%20512%20320%20512C395%20512%20460%20469%20491.6%20406.2L548.8%20435C506.8%20518.5%20420.1%20576%20320%20576C178.6%20576%2064%20461.4%2064%20320C64%20178.6%20178.6%2064%20320%2064C396.5%2064%20465.1%2097.6%20512%20150.7L512%2096z'/%3e%3c/svg%3e") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3e%3cpath%20fill='currentColor'%20d='M512%2096L512%2064L576%2064L576%20256L384%20256L384%20192L463.1%20192C427.9%20152.7%20376.8%20128%20320%20128C214%20128%20128%20214%20128%20320C128%20426%20214%20512%20320%20512C395%20512%20460%20469%20491.6%20406.2L548.8%20435C506.8%20518.5%20420.1%20576%20320%20576C178.6%20576%2064%20461.4%2064%20320C64%20178.6%20178.6%2064%20320%2064C396.5%2064%20465.1%2097.6%20512%20150.7L512%2096z'/%3e%3c/svg%3e") center / contain no-repeat;
	background-color: var(--text-color-major);
}

.options-window #players .header .update:hover
{
	background-color: var(--bg-color-1);
	border-top: 1px solid var(--border-color-light);
	border-left: 1px solid var(--border-color-light);
	border-right: 1px solid var(--border-color-dark);
	border-bottom: 1px solid var(--border-color-dark);
}

.options-window #players .header .update:hover .cs-ui-icon { background-color: var(--color6); }

.options-window #players .header .update:active
{
	background-color: var(--bg-color-2);
	border-top: 1px solid var(--border-color-dark);
	border-left: 1px solid var(--border-color-dark);
	border-right: 1px solid var(--border-color-light);
	border-bottom: 1px solid var(--border-color-light);
}

.options-window #players .header .update:active .cs-ui-icon { background-color: var(--text-color-disabled); }

.options-window #players .body
{
	--user-score-height: 26px;

	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.options-window #players .body::-webkit-scrollbar { display: none; }

.options-window #players .user-score
{
	display: grid;
	grid-template-columns: 25px auto 90px 65px 22px;
	align-items: center;
	height: var(--user-score-height);
	color: var(--text-color-major);
}

.options-window #players .user-score.selected
{
	background-color: var(--bg-color-5);
}

.options-window #players .user-score .avatar
{
	width: 22px;
	height: 22px;
	margin-left: 5px;
	padding: 0;
}

.options-window #players .user-score .name
{
	padding-left: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.options-window #players .user-score .result, .options-window #players .user-score .time
{
	text-align: end;
	padding-right: 5px;
}

/*players window styles end*/

/*answers window styles begin*/
#answers-window
{
	--rows: 2;
	--cols: 5;
	--cell-size: 15px;
	
	--bg-color-correct: #446d00;
	--bg-color-present: #5f6100;
	--bg-color-absent: #6b0700;
	--bg-color-none: #282828;

	--text-color-correct: #9fff00;
	--text-color-present: #faff00;
	--text-color-absent: #ff1100;

    position: fixed;
    transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0px);
	min-width: 0;
	width: fit-content;
	aspect-ratio: auto;
}

#answers-window .cs-ui-window-content
{
	width: fit-content;
	height: fit-content;
	margin: 0 auto 10px auto;
	padding: 2px;
	display: grid;
	grid-template-rows: repeat(var(--rows), var(--cell-size));
	grid-template-columns: repeat(var(--cols), var(--cell-size));
	gap: 2px;
	font-size: calc(var(--cell-size) * 0.7);
}

#answers-window .cell
{
	height: var(--cell-size);
	aspect-ratio: 1;
	text-align: center;
	align-content: center;
	background-color: var(--bg-color-none);
}

#answers-window .cell.correct
{
	background-color: var(--bg-color-correct);
	color: var(--text-color-correct);
}

#answers-window .cell.present
{
	background-color: var(--bg-color-present);
	color: var(--text-color-present);
}

#answers-window .cell.absent
{
	background-color: var(--bg-color-absent);
	color: var(--text-color-absent);
}

/*answers window styles end*/


/*game window general style begin*/
.options-window .game-wrapper
{
	--color-correct: #446d00;
	--color-present: #5f6100;
	--color-absent: #6b0700;
	--color-none: #282828;

	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	container-type: size;
	color: var(--text-color-major);
}
/*game window general style end*/

/*board window styles begin*/
.options-window #board
{
	--rows: 5;
	--cols: 5;
	--cell-gap: 2px;
	--cell-size: min( calc((100cqw - (var(--cols) - 1) * var(--cell-gap)) / var(--cols)), calc((100cqh - (var(--rows) - 1) * var(--cell-gap)) / var(--rows)) );

	margin: auto;
	display: grid;
	grid-template-columns: repeat(var(--cols), var(--cell-size));
	grid-template-rows:    repeat(var(--rows), var(--cell-size));
	gap: var(--cell-gap);
}

.options-window #board .cell
{
	width: var(--cell-size);
	height: var(--cell-size);
	font-size: var(--font-size-1);
	font-weight: 700;
	text-align: center;
	align-content: center;
	line-height: var(--cell-size);
	font-size: calc(var(--cell-size) * 0.6);
}

.options-window #board .cell.correct{ color: var(--color-correct); }
.options-window #board .cell.present{ color: var(--color-present); }
.options-window #board .cell.absent{ color: var(--color-absent); }
/*board window styles end*/

/*keyboard window styles begin*/
.options-window #keyboard
{
	--cols: attr(data-max-count number);
	--rows: 3;

	--key-gap: 3px;
	--padding: 3px;
	--key-gaps-h: calc((var(--cols) - 1) * var(--padding));
	--key-gaps-v: calc((var(--rows) - 1) * var(--padding));

	--key-by-width:  calc((100cqw - var(--key-gaps-h)) / var(--cols));
	--key-by-height: calc((100cqh - var(--key-gaps-v)) / var(--rows));
	--regular-key-size: min(var(--key-by-width), var(--key-by-height));

	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--key-gap);
}

.options-window #keyboard .row
{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--key-gap);
}

.options-window #keyboard.latin .row:nth-child(2) { transform: translateX(-10px); }
.options-window #keyboard.cyrillic .row:nth-child(2) { transform: translateX(10px); }

.options-window #keyboard .key
{
	width: var(--regular-key-size);
	height: var(--regular-key-size);
	aspect-ratio: 1;
	flex: 0 0 var(--regular-key-size);
	font-size: calc(var(--regular-key-size) * 0.4);
}


.options-window #keyboard .special-key
{
	width: calc(var(--regular-key-size) * 2);
	height: var(--regular-key-size);
    flex-basis: calc(var(--regular-key-size) * 2);
    aspect-ratio: auto;
    height: var(--regular-key-size);
    padding: 0 3px;
}

.options-window #keyboard .key.active
{
	/*background-color: var(--bg-color-2);*/
	border-top: 1px solid var(--border-color-dark);
	border-left: 1px solid var(--border-color-dark);
	border-right: 1px solid var(--border-color-light);
	border-bottom: 1px solid var(--border-color-light);
}

.options-window #keyboard .key.correct{ background: var(--color-correct); }
.options-window #keyboard .key.present{ background: var(--color-present); }
.options-window #keyboard .key.absent{ background: var(--color-absent); }
/*keyboard window styles end*/