/*
NOTES

Things that destroy VoiceOver / Safari:
- inset borders with box-sizing:border-box. Causes lag frames. Seconds-long input delay.
- regular borders, too. 169 tiles with borders costs 90ms on paint.
- calc() widths and heights. Causes lag frames.
- transform:translate. Lags and breaks VO cursor. Never use this. NEVER USE THIS.
- filter: drop-shadow. Individual uses cost entire milliseconds. Was costing 206ms on paint.
- pseudo :before elements for shadow effects. Also :after. Causes the VO cursor to place itself randomly and at random sizes.
- filter: invert. Element disappears on iOS 16.4.
- opacity: VoiceOver is bugged on iOS 16.4, causing the VO interaction frame size to be miscalculated.
*/

/* Overrides */
body, html {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #EFEFEF;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
	/*If we push things like the announcement off screen,
	it can still be grabbed by VoiceOver. This prevents
	scrolling to it. Well, this, along with forcing the
	issue with javascript.*/
}
* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
/*	outline: solid 0px transparent;*/ /*Can't be fancy, or VoiceOver breaks.*/
/*	outline-offset: -5px;*/
/*	transition-property: outline;*/
/*	transition-duration: 0.05s;*/
}

.app {
	background-color: transparent;
}

.click-passthrough {
	pointer-events: none;
}

button:hover, [role='button']:hover {
	transform: translateY(-1px);
}

#safeArea button:hover, #safeArea [role='button']:hover {
	transform: translateY(-5px);
}

:focus {
    outline: solid 5px transparent;
/*	outline-offset: 0;*/
    z-index: 52 !important;
    border-radius: 3px;
}

.cursorNav *:focus {
	outline: solid 5px #FF3939;
}

/* Window dressing */
::-webkit-scrollbar{ /*remove scrollbar*/
    display: none;
}
::-webkit-scrollbar:hover{
    display: inherit;
}

/* Scene */
#safeAreaWrapper { /*Required to prevent white space leakage with transform:scale*/
    width: 0;
    height: 0;
    position: absolute;
}
#safeArea {
    display: flex;
    flex-direction: column;
    width: 1080px;
    height: 1728px; /* 72*2(logo) + 114(readout) + 1080(board) + 36(gutter) + 72*2(tile rack) + 36(gutter) + 72*2(buttons) */
    position: relative;
    left: -540px; /*half of authored sizing*/
    top: -864px;
    transform-origin: center;
    transform: scale(0);
    font-size: 30px;
}
.section {
    width: 100%; height: 144px;
    text-align: center;
}
.gutter {
    width: 100%; height: 36px;
}
.gutterSmall {
    width: 100%; height: 18px;
}
.fixedMargin {
    display: flex;
	height:20px;
}
.expandableGutter {
    display: flex;
    flex-grow: 1;
}
.back-button {
    background-color: transparent;
    color: black;
    border-radius: 20px;
    height: 100%;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#gameLogo {
    display: flex;
	height: 144px;
    align-items: center;
    justify-content: center;
    user-select: none;
}
#gameLogoText {
    height: 144px;
    width: 270px;
    margin: 0 auto;
    background-image: url('/wordvoyance/res/img/board-header-logo.png');
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
}
.dark #gameLogoText {
    background-image: url('/wordvoyance/res/img/inverted/board-header-logo.png');
}
.dev #wordvoyanceMenuHeader:before, .dev #gameLogo:before {
    background: linear-gradient(45deg, rgb(68 49 123 / 0%) 50%, rgba(255,0,0,1) 50.1%);
    content: "DEV";
    display: block;
    width: 37px;
    height: 144px;
    position: absolute;
    z-index: -1;
    writing-mode: vertical-rl;
    right: 0;
    top: 0;
    pointer-events: none;
    text-align: start;
	color: white;
}
.staging #wordvoyanceMenuHeader:before, .staging #gameLogo:before {
    background: linear-gradient(45deg, rgb(68 49 123 / 0%) 50%, rgba(0,0,255,1) 50.1%);
    content: "STA";
    display: block;
    width: 37px;
    height: 144px;
    position: absolute;
    z-index: -1;
    writing-mode: vertical-rl;
    right: 0;
    top: 0;
    pointer-events: none;
    text-align: start;
	color: white;
}
.scoreGroup {
    height: 100%;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.3;
    margin: auto;
    background-color: #88888888;
    border-radius: 20px;
}
.active-player {
    background-color: #e8e4e4;
    border-radius: 20px;
    opacity: 1.0;
}
.active-player-you {
    background-color: #2C75B9;
	color: white;
    border-radius: 20px;
    opacity: 1.0;
}
.active-player-opponent {
    background-color: #CC4842;
	color: white;
    border-radius: 20px;
    opacity: 1.0;
}
.scoreReadout {
    font-size: 60px;
    line-height: 62px;
}
#gameStatusContainer {
	display: grid;
	grid-template-columns: 1fr auto;
}
#gameStatusReadout {
    font-size: 35px;
    padding: 15px;
    display: flex;
    align-items: center;
    margin: 15px 0;
    height: 114px;
    background-color: white;
    border-radius: 30px;
    z-index: 50;
    justify-content: center;
    user-select: none;
}
#btnPoke {
	height: 114px;
	margin: 15px 0 15px 15px;
	border-radius: 30px;
}
#actionButtons {
    font-size: 35px;
    padding: 15px;
    display: flex;
    align-items: center;
	justify-content: center;
}

/* Interaction */
.selected {
    border: medium black solid !important;
}
.selecteddown {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAmCAQAAAD3yqqVAAAA3UlEQVR42sXVIQ6DUBBF0SswOBwW1QXU47sCdoBH1mJx9VgsEtXFNWmapnlpMjB9Sc/3T938gbv9NQCDeXTgqWI1jm5UvHTG2Y63gsU0ulDwoTXNtojJMHoD1RhmTwhHaFe+qth+CqtGOELrEY7QVkqEI7QLgVtidCZ0Ssye2eF6cHRkl/pgaDU79Z6wVMnqCUtdXGGpeVdYBQedXWGpMRidSKnDsy0coQ2IdGh6tvO64GwnFczR2Vb50FoMpuBsJzXB2U4b5GybVGwSlkn3S1jRqV8oMWvld7Xp+b8H6wQ47/aRPpQAAAAASUVORK5CYII=) !important;
    background-repeat: no-repeat !important;
    background-size: 30% !important;
    background-position: center bottom !important;
    background-position-y: 115% !important;
}
.selectedright {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAArCAQAAAC+qjL7AAAAz0lEQVR42s2WoRXEIBBER0Ti0Ng0kAZogAKuAgqgAnQaiEZGxsRQ3L2ViIs4vsh+/wWPmV1pVxA2XV1FjpIZlz5aKJnRFDmZsWvlZEaRR2SzL9h/cCpyMuPQxsmMqsDJjCxHyYxLSQslM5o2TmbsCphsqAVA9vip+580RUD2VAt9kiIPyMYXRGRjLXSMTMma4uverMhR/yxQCdiobCYqm5lqjUr12UE17anELJSb205Vntro68tujRu4guD7bPb2HqM7N2N0CVmWEzJVQdB8AVMeWA6VElqqAAAAAElFTkSuQmCC) !important;
    background-repeat: no-repeat !important;
    background-size: 25% !important;
    background-position: center right !important;
    background-position-x: 115% !important;
}
.hidden {
    display: none !important;
}
#firstFocus {
    position: absolute;
    height: 50px;
    width: 100%;
    overflow: hidden;
    background-color: green;
    top:0; left:0;
    z-index: 1000;
    display: none;
}
#screenReaderOnly {
    position: fixed;
    height: 1px;
    width: 1px;
/*	right: 0;*/ 
/*	bottom: 0;*/
    overflow: hidden;
    opacity: 0;
    user-select: none;
	z-index: -1000;
}
.hiddenNavigation, #jumpList {
    position: fixed;
    height: 1px;
    width: 1px;
    overflow: hidden;
    opacity: 0;
    user-select: none;
	z-index: -1000;
	left: 5000px;
	top: 5000px;
}
#jumpList {
	display: block;
}
.modal {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 1000;
	/* Safari is too slow to handle blur. FadeIn causes reflow for some reason. */
/*    backdrop-filter: blur(2px);*/
/*	animation: fadeIn 0.25s ease-out;*/
	animation-fill-mode: both;
	padding: 20px;
    position: fixed;
}
.modal:before {
    content: "";
    /* background-color: #000000BB; */
    background-image: linear-gradient(354deg, transparent 25.9%, #58458f 26%, #58458f 74%, transparent 74.1%), linear-gradient(354deg, transparent 6%, #000000DD 6.1%, #000000DD 93.9%, transparent 94%);
    width: 100%;
    height: 100%;
    position: absolute;
    /* border-radius: 50px; */
    z-index: -1;
}
.modal button {
/*	animation: transIn 0.15s ease-out;*/
	animation-fill-mode: both;
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100%{ opacity: 100; }
}
@keyframes transIn {
	0% { opacity: 0; transform: translateY(50px); }
	100%{ opacity: 100; transform: translateY(0); }
}
/* Perhaps in the future, we can add animation back in. It kills VoiceOver. */
/*
.modal button:nth-child(1) { animation-delay: 0.000s }
.modal button:nth-child(2) { animation-delay: 0.025s }
.modal button:nth-child(3) { animation-delay: 0.050s }
.modal button:nth-child(4) { animation-delay: 0.075s }
.modal button:nth-child(5) { animation-delay: 0.100s }
.modal button:nth-child(6) { animation-delay: 0.125s }
.modal button:nth-child(7) { animation-delay: 0.150s }
.modal button:nth-child(8) { animation-delay: 0.175s }
.modal button:nth-child(9) { animation-delay: 0.200s }
.modal button:nth-child(10) { animation-delay: 0.225s }
*/
modalTitle {
	font-family: 'Bad Script', cursive;
    font-size: 40px;
	color: white;
    text-shadow: 1px 2px black;
	text-align: center;
    padding: 10px 10px;
    line-height: 40px;
	margin-bottom: 10px;
}
modalTitle p {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	margin-bottom: 5px;
}
#playWordsInformation {
    width: 300px;
    max-width: 80%;
    text-align: center;
}

/* Quick Controls Reference */
.modalScrollableInterior {
    display: flex;
    flex-direction: column;
    max-width: 600px;
	min-width: 300px;
    max-height: calc(100% - 200px);
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    overflow: auto;
}
.modalScrollableInterior h2 {
	margin-top: 0;
}
.modalScrollableInterior ul {
	margin-left: 1em;
}
.modalScrollableInterior li {
	margin-bottom: 0.5em;
}

/* Game board */
#gameBoardShadow {
	position: relative;
}
#gameBoardZoomWrapper {
    z-index: 52;
    position: relative;
	width: 1080px;
	height: 1080px;
	overflow: hidden;
}
#gameBoard {
    width: 1080px;
    height: 1080px;
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    background-color: #F3F3F3;
    color: #00000088;
    z-index: 50;
/*	position: relative;*/
	position: absolute;
	top: 0;
	left: 0;
/*    touch-action: pan-x pan-y pinch-zoom;*/
}
#gameBoardShadow::before {
    display: block;
    content: " ";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAIcBAMAAABP0GpPAAAAFVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAADtBGx6AAAAB3RSTlMAAwsaJjRAarKWKQAAAxtJREFUeAHt1kkZHCEUhVEoBSAh/kXFQfMckFvTl/bQ51+99WE82le6OPrUHC9HJhrZEzfH7POPY5LtMU+O3kbvUyMQ4WgwHo/RwjFGBhijz97D0fuY3d0RjTHCkalNzTZCccQiHopGRI5ziIt6v/4dXxY6EPyv47A7cODAgQMHDhw4cODAgQMHDhw4cOAQDhw4cODAgQMHDhw4cODAgQMHDhw4cAgHDhw4cODAgQMHDhw4cODAgQMHDhw4hAMHDhw4cODAgQMHDhw4cODAgQMHDhzCgQMHDhw4cODAgQMHDhw4cODAgQMHDuHAgQMHDhw4cODAgQMHDhw4cODAgUM4cODAgQMHDhw4cODAgQMHDhw4cODAIRw4cODAgQMHDhw4cODAgQMHDhw4cOAQDhw4cODAgQMHDhw4cODAgQMHDhw4cAgHDhw4cODAgQMHDhw4cODAgQMHDhw4hAMHDhw4cODAgQMHDhw4cODAgQMHDhzCgQMHDhw4cODAgQMHDhw4cODAgQMHDgQ4cODAgQMHDhw4cODAgQMHDhw4cOAQDhw4cODAgQMHDhw4cODAgQMHDhw4cAgHDhw4cODAgQMHDhw4cODAgQMHDhw4hAMHDhw4cODAgQMHDhw4cODAgQMHDhzCgQMHDhw4cODAgQMHDhw4cODAgQMHDuHAgQMHDhw4cODAgQMHDhw4cODAgQOHcODAgQMHDhw4cODAgQMHDhw4cODAIRw4cODAgQMHDhw4cODAgQMHDhw4cOAQDhw4cODAgQMHDhw4cODAgQMHDhw4cAgHDhw4cODAgQMHjl/lwIEDBw4cOHDgEA4cOHDgwIEDBw4cOHDgwIEDBw4cOHAIBw4cOHDgwIEDBw4cOHDgwIEDBw4cOIQDBw4cOHDgwIEDBw4cOHDgwIEDBw4cwoEDBw4cOHDgwIEDBw4cOHDgwIEDB46C8LbDMTC8GPfuqGJxapwcu61zUgWijstlKRbXYdm7VlNbuyocVav+Rkd7t+uwrM3i67DQSJ/7sLS1l6elBWO1cMSj6vPrrdrRCMcps+rXW6tOiX/yX1ST51dSuAAAAABJRU5ErkJggg==');
    background-size: 100%;
    position: absolute;
    left: -15px;
    top: -10px;
    width: 1110px;
    height: 1110px;
    z-index: -1000;
}
.boardSquare {
    background-color: #F3F3F3;
    /* border: 3px inset #88888810; */
/*    border: 3px solid #88888810;  /*for some reason this being solid makes safari not hang */
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEWAgIBHcEzC6ES2AAAAAnRSTlMpADLVUtMAAAAnSURBVEjH7cihDQAACAAgP/H/D23a3SxmiER8ZS+llFJKKaXUVV8DohguTthOMvUAAAAASUVORK5CYII=');
	background-size: 100%;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: " ";
    position: relative;
}
.highContrast .boardSquare {
	color: white;
    text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, 2px 2px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000, -1px 0px 2px #000, 1px 0px 2px #000, 0px 1px 2px #000, 0px -1px 2px #000;
    -webkit-text-fill-color: white;
/*    border: 2px solid #00000040;*/
}
.boardSquareBonusCenter { background-color: #FCE5CD; }	.highContrast .boardSquareBonusCenter { background-color: #FFD998; } 
.boardSquareBonus2L { background-color: #CFE2F3; } 		.highContrast .boardSquareBonus2L { background-color: #84C1F5; }
.boardSquareBonus3L { background-color: #6FA8DC; } 		.highContrast .boardSquareBonus3L { background-color: #2B6CDB; }
.boardSquareBonus2W { background-color: #FCE5CD; } 		.highContrast .boardSquareBonus2W { background-color: #FFC26C; }
.boardSquareBonus3W { background-color: #DD7E6B; } 		.highContrast .boardSquareBonus3W { background-color: #E0684B; }
.boardSquareBonusLetterCenter:after { content: "★" }
.boardSquareBonusLetter2L:after { content: "2L" }
.boardSquareBonusLetter3L:after { content: "3L" }
.boardSquareBonusLetter2W:after { content: "2W" }
.boardSquareBonusLetter3W:after { content: "3W" }
.boardSquareBonusLetterCenter[data-occupied]:not([data-occupied=""]):after { content: "" } /*Hide bonuses if occupied.*/
.boardSquareBonusLetter2L[data-occupied]:not([data-occupied=""]):after { content: "" }
.boardSquareBonusLetter3L[data-occupied]:not([data-occupied=""]):after { content: "" }
.boardSquareBonusLetter2W[data-occupied]:not([data-occupied=""]):after { content: "" }
.boardSquareBonusLetter3W[data-occupied]:not([data-occupied=""]):after { content: "" }
.boardSquareOccupied {
    background-color: palegoldenrod;
	z-index: 51;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEWxsbH///9WVlaBgYEAAABHcEwAAAAAAAAAAAAAAAAAAABNVdalAAAAC3RSTlNLM0MzMwAwKyQeGLwYDPAAAACkSURBVHgB7M7BDYJQEAbhlQrUGozcedjBBhvQDsiLBZhQgnSgdCtLC/tfSGYK+DJmJ0mNFYV0bNxKOeShswd0e6Z77AoCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuprunGDrgonoKGm26BuUDgBVdFRr4IuU74xoFYAvQO6TxLJutcsyFdoVvRZod8i6OvWLpLc/tNcRRXQAgCQlH/WdCqIQAAAAABJRU5ErkJggg==');
}
/*
.boardSquareOccupied:before {
	/*FUTURE ME: THIS WAS A MISTAKE. VoiceOver loses its MIND dealing with this.
	/*FUTURE ME: Again after a recent iOS update, VoiceOver simply can't correctly determine the bounds of pseudo elements, breaking vertical navigation.
    display: block;
    content: " ";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcBAMAAAARwc9rAAAAElBMVEVHcEwAAAAAAAAAAAAAAAAAAABWYIjnAAAABnRSTlMABhQqOUBzHz3lAAAAVklEQVR4Ae3OMRFEYQgDYUAB+Pd4Pw44JITuFbv1N5mEnVpecrm89Hy56+OZ4aX7un235Yc+y+FwOBwOh8PhcDgcDn9ybTFvZD27Pof1DtP1b07fu+0PuqTcudZKSvgAAAAASUVORK5CYII=');
    background-size: 100% 100%;
    position: absolute;
    left: -7%;
    top: -4%;
    width: 115%;
    height: 115%;
    z-index: -1;
    transform: translate3d(0,0,-1px);
}
*/
.highContrast .boardSquareOccupied {
    background-color: #F0EC67;
}
/*
Originally, we used text rendering. That broke the navigation tree specifically on iOS Safari, so now we use background images. Specifically, changing styles on the element would remove the element from the tree.
The pseudo element is required because, once again, iOS Safari can't correctly calculate the tap zone if we add the text (or even the bg image) directly to the element.
/*FUTURE ME: Again after a recent iOS update, VoiceOver simply can't correctly determine the bounds of pseudo elements, breaking vertical navigation.
.boardSquareOccupied:after {
    content: attr(data-occupied);
    font-size: 40px;
    font-weight: 900;
    color: black;
}
*/
.boardLastPlayedTile { color: #ffffff; background-color: #BBA8ED; } .highContrast .boardLastPlayedTile { color: #ffffff; background-color: #EA9EF0; } 
.boardSquareOccupied:after {
/*FUTURE ME: Again after a recent iOS update, VoiceOver simply can't correctly determine the bounds of pseudo elements, breaking vertical navigation.
	content: " ";
    display: flex;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	*/
}
.boardSquareOccupiedLetter {
    display: flex;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	pointer-events: none;
    justify-content: center;
    align-items: center;
}
.boardSquareOccupiedLetter[data-occupied='A'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMAd/+71CI9ohHuiFVmWXRdQwAAAX5JREFUeAHtlgFmM1EUhfOTvy0pRneQ2yRjMkF0BaMryBJGVjC6gigQYBQMYHQF0RVUV9b7pjOJO4G650E5HxkCx7yTe7+XCSGEEEIIIYSQX/FPRB5jBE1F2UUI2ouSRAh6EaXAc+7eRFlF6VpJ43StHOJ0HaPtd5E4bYeuY7Q905BMP2s06FZDNiEMDXrVkDrM5AkMetCM9ksfWzDoWTPKoz6WWM6NRiy6ouZQTh8x6+Ig+kOFYSqhoFBz8TPeFRT01K1Zt3ANkvO/X/yggA0qo9RcAICM8uHNdqCMmqGrFhR/NWxKDYhflHLY3RzrOjtPeIp1vT77TQ5Q16vL7ZZA4i8utReQ+BP7cl7xG9aAjAzZARC/4RMQv2ELiN+w9IvfMge6Niz84k/tH67SLf7cmqByi7+2Xxu3+Cs7DHOvjORkx3PhlVFmf0Rf2/uRFO9FaZ3iX40FXjvFX4+Tc1/X9iQfvgtgetXt0XcBhK6z691LJoQQQgghhBBC/hTfXcZeAfecLxgAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='B'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAt9G3DAAAAC3RSTlMA3f93P5LMsxvuW9W9qhYAAAENSURBVHgB7dWBRgRRFIfxs3ZjdkHsC7Snpq1AtiTALSBg7RNkn2AsCDDqBTLCAka9aPdABML9MK3/Bxz4Ycw515RSSimllFJK/dHIf5rfIlBUJwjy8wRBXlOQrymopiBPBdDCosmdR00hFD0EdAFAVZeHUwCyVR6WBPQa/yQBTWMgoNHgoCn1jR5jRwhol4czAJp57hiANgH1xdBshZ6RZmCndpkgaN5ir0gLQf4xoONvb7uA9uWQTTpqaZ881wLQOKA1AFUBPQOQbfN0QkCbeGoPE9pCUOW5dwA6CqgBoM+ArsuhsTMr8tV52dL+bk9BPQRdGQNd9hD0Ygx0bwS0uEn2H1NKKaWUUkop9Q3fmFxTvGRDlwAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='C'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGK9LJAAAADHRSTlMAUHeR/zO0EdbuZiJry81MAAABW0lEQVR4Ae3WNVoDYRAG4MHdtcOlzBnC4O5QoT1uHU6Nu0uLHpCN/rs8qWYW/94KiY4TAAAAAADA3xZVxszeEtLq5oCaDlLp45A61StFs+EluYRxthkmsUW2qyOxdWZXPlIM++xkEpWyTxMJ5fpjbKLeOCkM9R4zNwSzPsiWYkXuT0MFzsx8SCJLbMkM/TYuD1K5rzMcAauTJ785/FuiL9okkeIsHX8tdIhjbfKULE5bvPMjxDEze0jgQ1ASSi2ZJDBr0qTTY7Kvk6sbZsadKWWdcrwQXugnFaRrLZKrb1qXx0iSeNpHGrWTulFrhv+VuSXFwz8uwjrKdGlB8qRLK7uBRN4ci21cXp/+qGzZY11PIin+Q2vSdr15FP3PK+bTNT6RTCL7rD4RlelO9pR1dvCQ1KBbB7vzIw2T3DwbumlZaL7YE6k8BF/H+0RK0dW+EqigrwQAAAAAAADvgzmFxnwYkDQAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='D'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMA3f92M5JNtRruS0fVPQAAAPlJREFUeAHt10EKglAURuFHYjmMWkG3SppJFTSMVtASxBWEbSBcQQRIy637aB7goQr+b9ToYHi9PsMbIiIiIiIiMrKX8QYJuXkJhWxSQiHLL1DIWipkBRWadgoN/cf6Zq7oHAr9eHGz7qGQxBEAQmEV/xsQipd0B0Kh9vtGhBozWxKh1J5KINT30BEIBR/KKxGqfSSJkE/SgghVfv+J0ME3LhHyQcqJUE+hz4UaPsQPJP+IfOehpdZIRi22uGpPQGhALf+Keh2NoBdkCryy0UPEADrWJDfkoJVtLSr4w+hvHI/bH/uEyKGPmuk+EKHzLoiIiIiIiMifegBILFGAHiddnAAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='E'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEVHcEwAAAAAAAAAAAAAAADTrAj/AAAABXRSTlMA3f+ZIt0uI68AAABFSURBVHgB7dMhAQAhFETBuyiQgAj0T4X+GAQCsTN+n9uPEwAAgL9XTSgtVMYxISEhoWJkhYRcROiWkNBmBoWEAAAAeGYB+Xg9Sw+OCb4AAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='F'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAADFBMVEVHcEwAAAAAAAAAAAALttw0AAAABHRSTlMA3f9E1Fe4AgAAADRJREFUeAHt0qENACAUxcCv2H8IFDAkggSLJu9OV7Z+AQBtHCs56vUkEt2fZkDkApEoDQBsq7t19NNf9+4AAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='G'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMAZneP/6pKzCndEe67h+b2uwAAAXBJREFUeAHt14FHe1EYxvGz/fyu2xYmAYXJwoDJAFDb09ZayASAYUAhCQMMEYIQAEKEoBgChP6wdnZb3XeA5xxJng/ooi/33HPue+dERERERET+trUmgEE1NJOcIHMR2LnEQiso1MS3cUDnGnlDupPemVCHDj3C6E/YUPbEdpxL6vDOyU4BXmP+9ylm9sjQU25h0ksAfTJUyz+qGwCoUJ3SFEDL3Ocbv0S3X5d3AA6p0Kq9mRq9kx7s8l4BaFOhkf3PMoB9+sB2XATvdnV5UwDPETolfuNYaXbQwiVRQ9UIocJvDq3jU08hI4kaavAhe0SOI4RKSyNxhQ3N3/a7fMgO7AM+ZOdjiw/ZsdGNESrbjys+9M++a/lQ6kMdPmTnUe8+QmhktmRA6L8PdSeLwcuH0qkvvWQXZyBC5t7QqjhXrMPrkqEilrw6Ui3Wh3YCYxzpx0jbBdjIdSYuxOaiM3CBitsAjraGTkRERERERH7QB8/6nZhfss6lAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='H'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEVHcEwAAAAAAAAAAAAAAADTrAj/AAAABXRSTlMA3f93RLkCOaAAAABDSURBVHgB7dOxDQAQFABRiQXECH8S+09FRTR6vDfAdZfOAAAAqBFR0pRjaK+HhISEhIR2/4SELLIICQkJCd0FAACADidYTNo2QBrDAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='I'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAAnRSTlMAZtJCCVUAAAAoSURBVHja7cpBEQAABAAwmskrpQq+3PZeBACckd0lSZIkSdI2AcBDA8iLTxv1XQfkAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='J'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMAQ/93VWaOF8DmR3YwvgAAALlJREFUeAHs1zEKwkAQRuGRxES7YGeZETR2oth7BEvLIB4gR7CzNid2h5XFSmTW8n3V38wjhDQR/A4AAAAAJhrsCBH6jhAhQoQIESJEqLDj0x9CUzs+p+0PlXbcx13Fp/Op7fge99z2IE6jqrZx7sPsxOtq10N61yvxWtj5w9bS1ka8ZmpuIhc1fd5XmGwHyXpJSSt+lX5oxOQ/0lNylKOa9Bn4Fe/SupFM9SGkuiP/0AAAAADwGp0BAKSfNtnIkrBhAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='K'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAt9G3DAAAAC3RSTlMA3f8YzLKPczNQ7hBBIoEAAAFISURBVHgB7ddBTsJQFEbhGoTamcEV+EIBOioJI0dGNtCwAsIKDCtoHDoiXQJuVO+rvhtHDs6bmPxnQOjkC+W2l1IopZRSSimllPqjmxDCYzraha/qlkMHg/b8E82CHbUcOhu05t9RFawLh97NWfGpTeYGHTl0a86i4NDJoAcOleY0LYcGgzb8FrkL1iuHtuYs+U07eTGo49A0zr7lEJu9Q2Wweg7B2Sdoco2z59AOzj5BccU+c6j0FcuggZ9ZhJor2bEJSn3kgupcEL2OvHUGqIYXQIKOp/iKoeW4IDcY6saV3bQQssGfIwih7ud3dsWgxt6MK6nHO/v73O4zQNM4Pgj5U80FQtbgK4BBM4NqCllzXwEMevMVwKDSoAWE/MH/mAF68hXAoOr3CqB/aroM0NZXAIOqYPUM8of2faGUUkoppZRS6l/1CR6GU596iKHnAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='L'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAAnRSTlMA3Y7xY1EAAAAsSURBVHgB7coxAQAQAAAwl/xCuJQECjhhuxcA4Bax5P0kSZIkSUt6PAHAbxrHZl3BG+echAAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='M'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMA3f+0mRHuembMPiJVJdM6DAAAAbpJREFUeAHslz1uwkAQhRdBYsApokgcgAeBhFBYnMDiBCgFdYSU3qJNgzgB4gTIUnqSJkUalJMls+PFS5Nipp2vwfskf9od7x/OMAzDMAzDMAzD+Ic7ABhcZnPK+hIRFnF0tZKLijhqQy7axVFTIZrE0adCNI6jtUI0WsSRQoRNnXShEWV10lKJnupkqRHF1d7KRauL12Zy0RzAIQQpgIFQRIPJQ5AAmAhFHwBeQ9AA0BOKvgA8hOAHwJtQ9E5liWv9LRQd6OVjtRmRNJWKaDhFXetpVyg6XQN44XaHHqWije8Gt0vqnFjkJ2G9GR3aQlHhZucDYAU8OrloG6p9Q1NKIVqGA6DpJ3kiFrXCAfAMIBeLcr+9js+1VojcHhhRc+8NLbmIenJy3DO5KOPaZLxA7lWiJhuWdUsoqsa0pRHKRbf82/eb0cipRPzd02oWdBSiTwB5Uh2VDbmI1wYJMqWoTau1BLBRimj/GMzpgqMVrfnsHjqtqIRnohZ1WLRTixIWFWoRX9OxUIv4j8PQ6UUl11ovaoAf1aKEa60XpSQ66kV+Mxo4tYjvalO5yDAMwzAMwzAMw/jdwAIABGKHZGV94FgAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='N'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMA3/9LdyLFEaMzE/KptwAAAP1JREFUeAHt1EEKglAUheEbZdkspHDsy8Jm4QrEFRi0gIgWkDuIVhCuuN4lGgbEPwnOD+LID8/kmlJKKaWUUkqp72UhhLV9moRX3a9QQUGhoaANBW0pKDQUlFNQRUFhT0E5BZUUFB4UdKKgkoDiU3QAtPRtALQ4+zYAGuK2KwD55zcAmvnBBSCr4zYCSv0oAVASXzsAstYPLgBNfRsAJRFYAZBvqwho5AcXgMZ+cAHI7r4NgHrfBkC+bQFAvq0koEM0jgDkP3MBIIsHtyCgISIENKEgyyiopqCUgmYZBFlLQSkFJRkEWUtBUwqaU5C1FNS/ob9KKaWUUkoppdQToA5kiuzTrDUAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='O'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGK9LJAAAADHRSTlMAInf/7T4RjlWqxGZ5FXxpAAABYklEQVR4Ae3XNUIFQQwG4ODWvQvgHIBVwa1Fe7THadEep8UOgF0QMsCslMlU8H/VeyujkizB3wYAAAAAALVez/N75kipuc8z/AHS2fV+bZHGmWf5mt7VewWD+o6pO9filUQkdeqxHaL676YdkUzdJL99Z1bBNf8cJ5n2whB38O+EZBb55defPx/8R7gCnnmASwP/QBJN/OqM3Ss8YIF88l/t3w/xAmjkfbFi/27wX/EqiioNnJPujzj/28oFdUknLSycTFzQBQlM8nxXCh6TbJBqC665hdJltFUaM9lC6qgObq+iIF6PpRWZSY9ZFPRfC5IvSPdbRL9p3R8j+oPN/VHr8vDfKIejRv4rD5BdlQCpD9kkD9lm2pLSjnlQpDVddujlaU2bSbQKk5+qUr9Lsxp3TeqnS0avbDLapc/Xjchtwq5vUkQKS57lHzn6zDogHTcffqzGRYk+ReUAAAAAAADgE3kxjA1TCFBbAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='P'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMA3f+Zd7hY7h6IZoQbiQAAAMVJREFUeAHt1C0OwlAQReEJJARcg6rt9A8cQSEbUgG7aAgrYAWFldOpwCLeFRXnqF7ziWbyjIiIiIiIiP60919lL4GiehBB3g4iyOtRBHmugtpRBHmeAGU2d/eoTIds7dGQDtkjoJMA2gV0EEDzahTQdVpHBfSJ41ZAKyVULAHS/6O4yFIBnadVCaCt6rLfHisd2rwC6pKhZ3x7MYpeyMZEUCeCKtNA7SCCLiaB2pspoLofLQ3KTBAQEBAQEBERERERES2vL/hMQqJqhCFgAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='Q'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMASXWI/+URIqrMM7uZnVSHtwAAAZVJREFUeAHslwFHBFEQgGc77V5XePoF61wAnCwA2jXb2ToUJwRyBMAhCAgHgMMRQAgCQgAIR38r81br7QPMDFTzgV3s582b92ZmwfjbGIZhGIZhGIZxXCDW4zupJivQU+dCzxp/kJkm2NG8CDxDDCgFog8k5MEdYo+KLWozNgZYtkvj7lKCxJQeR950wxTt08fX4BlIYpuE4fgwVyxPuqBF9E7CJ0u0R5++d2ecv0kH9KnrXnfsTXpFxEvoeKBX9l5X0QJZ1YQu/nm0ZY4joqRtouM5ZXhGUb5Tn0TuBcmjFV5xj5GLasqZhog2f8YQHcWXi07khZaoNNFvEgnSP5AfSPkV0b+0qmVErbDBVl5qlYs/taOm344ajQZZ0AL5LXvTa9kztSFCMNa48GXFE90Hs6yPcy4a/Xw4WTv6yYbRU4DlGgmnPB7LB3alX4hK6acGbyWidBeYnMSUBWuaK/yKniDxDGKyLYlqJzcNe4mT5+9JLkoWJPoCOY9Kofnen6uIEixBhzcH/x7DMAzDMAzD+B4xAABIG7RjBtd5uAAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='R'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAt9G3DAAAAC3RSTlMA3f96V7vuESbMnAQgI6EAAAEpSURBVHgB7dYBRwNxGMfxJ7fcBBII0D1r1wrMFAKuvYL0ChIUYOAAnBAB0yvIQC8zvz8iEO6Lxu8LNviY2z3/5x/OOeecc8455/7oIH+aXSOQmncQlG0HQTnfQFCeUlAzQFDej4CaUNObVOcjIfWe+gJA8SCpA6Be0BKAKkFbAKoFPQJQfGTmGQHpaS8IaEdB+kUX/+kZ1dTfX1Ev5Bs0IrUeUQsM7V3ZJePPo9tUW+iEbKmj9iUYqBkg6DMY6CsgaKAgLbWx79H0SUsNgGKVmZcE1JeJBaBK0DEA1ScaWQCKtUZtA0D6mEsAmghaAFBZRlcEtC4vAAAdElc/NaGufrGjrn6v1NXvSNAzAJWjZAZAsSoLCYD6sgAAqPo9Jc4555xzzjnn9qNvkmpX2rF+JPgAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='S'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMAPHfd/8URIqJV7ohmc5ou+QAAAZZJREFUeAHt1rVCNDEUBeD87orT4Fbh0K5c3OUBpkMa3N1LpKTBoUR79MHYZIRJm4NzvwbdE8+NeN0YY4wxxhhj7H8aETVnojFf0slWgOV8nidXCApapzv5QM578lsxDzojvyq0Q56/pkGjJM1G1i6DpDzTILVkS+rbGGThPlNEpfNDKxFVW8AUNTo/fJA/XJgFffWv+Tv5w7RZ0CeK8EazS0SbZkFyNGFt5ivuI0ie3uB9DO1/ampqFjDZ+kIBy38gcGpDhv8K3Dx8oWmHdhsP+kZKDT469+bPuZd1gzulXf7VyfdWjsCkd61eny7AJK9PZZbAZJCjFF47p1PhbqHgnWoUsDF7NwlcO0ndAncD7yXHj3uaJPFZlqNys1XXr+x54yryU80KXI68Io0HfSatSJ8ZB6mXTK33U5F5yZaDqe727m/zR0Sn/8gnAs+a976b8dsu8hptJenEEmKtSF1twlAf6YKmQV+KSGN+aw+QXy1eapVqpEh+mSfPEXZ7pJEtnAnXkGz5/k+1xCNijDHGGGOMMXYLSQeW+a7bxBwAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='T'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAADFBMVEVHcEwAAAAAAAAAAAALttw0AAAAA3RSTlMAiN3xTnj0AAAAL0lEQVR42u3KMQ0AIAwAsEnDGThD2jgIQcOy9m4UAQAzn9EvfTtXXJIkSZLUEAAcLcekZeKw/DQAAAAASUVORK5CYII=');
}
.boardSquareOccupiedLetter[data-occupied='U'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABp4cHsAAAACXRSTlMAmv8gvXxY4znZ+fgwAAAAwUlEQVR4AezXMQ6CQBBG4TEEpTR6AZ2otmhiTzwBISGhJJ7A4AU8ujuaJWtDMbTv6/7mZRcaEAAAAADAtIUG5TjvYe0IESJEiBAhQoQIEZqSW6gf5xDW0xVaWqiOq7C1doUKTc+Qx6yDXeYUx8pCb1+oUdVzmQ7xuWpQJQ/sOOfT//C7zkaDlzOUDd9SJ5I3anpxemjCfzN75X8qcWs0sRe/YkhCtcxw0dFWZrnFM3UyU9Zaqn3zRw0AAAAAn9EVAAAcrlTKW6mADAAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='V'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMARP93xKoRK2buVY3dng0i0QAAAZdJREFUeAHslsFNw1AQRB0BBggHRAdgJ1FiDhEVRFSAqMDixs1yBYgKUCpArsByBSiV4cWa/w0HJO8cmXfKWtrV5k+e85O/EEIIIYQQQggxu+3Jxk/u7cnV9EkPfdvi94PcsdL3AmWsU6w4ldoaX2N9ZPXKMejYGh9jfWL1zjHozBqXsX7GhlNJ933jJtZvfbkuEwdPMTaUReKhwQoxtI1r0Lm1fvw4snfXoLm1tiG0ofJwih1iaJVPt8P4VBoI4pSkCKE5BYEk6/CrcgoCSfDeuPAKEjRtEZpDEJCOYntxC4IDvkFo8MUrSYGZXkEgyd3wce8WJEhShdBa7p+k/TnSL8knvqRXEEiywrFnxKAa/R0mEpLkCA2CuCWpLDQIwkiytdAgCCPJzkLzCgKa4ZCvKUEgfWahQRBGknwIreWvW+WMFASSbOd4CxB0FtslKQgkWdakIJAk60hBIMniAEFYScK1lJWEFgQ3PloQSEILAkkgCC8JLQjesrQgkIQWBJLQgkASWhBIAkGEEEIIIYQQ4j/ztSEKAKVhXnjzluxrAAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='W'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACXRSTlMAEzNTd4iqze4c13Q+AAACIklEQVR42mJhoBIAtF8vOQ3EMABAkyAhsZuWC6ScoFt2HKFH4ADsewQOwILrcIPOCdrZskmzRagZ7IkzHw2qaldigbxIZ9LBT3ZsRqCQQgoppNA/hBRSSCGFFFJIocdnY75fRpv3Ot/fvsHHNl4M7SDWlY3HRZCFleLlGSWKGSC6X9LDS6EWlqtiTgKRFT2o6CEno1KOKx8lu8SFKvM7FDilNR6DplDBG84cjaClGQ7MejYEazFUUw7MGQnk5pDFslnQcQb155UMB0o9ZDOx6qGWDdkSO1wWooysLycVK4I8H4JY00E3sD42BOEYHViQadYYRoez29Ag0RhxIU/VnAL1XwJFTIaglAiylSCj0rYeKt2PPChQnKvgPjXerM7N4xkoFajLDiDsnhVCdoBIFULYcoytC4TlBR5Er7YaY1M0Ic85NY0BUf+r3LScH0BeAtFEFqhsTGRDZgbJSjvAWnRjdMgntuw2iZsRDZKjHAByo+7LofoJbq0Ysgi1dS5UnFH3WsQxItb6LxTZkAHIej9Axn/it3yowX6vx9AdfiuAYK0AC1ToVdADXsugL+GMWgEU6A+IukCODowLYcz9kBH+qByy/e/EHjcyqCVvcgmSjGI1h6IAwvOdQY0c2vWvXjk0yeEK6DCF8rlJoJRLmkBGDPWhQQ61k9DT9RmNdkcBRB3fT+azEUHmdbLb/uH/tAoppJBCCimkkEIKKaSQQgr9AA/G2Sz/8g4+AAAAAElFTkSuQmCC');
}
.boardSquareOccupiedLetter[data-occupied='X'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAJ1BMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+jSoGAAAADXRSTlMAIt3/PVXEqmbuEXeTSu1M3gAAAZhJREFUeAHslwFmA0EUhqfVtpEUoSBAKkCAJNF07WLJBUovUHKEXqDsCSpAQCxQIPQCZS/WfdM3u3lQvL+A/wPzMLWd+b/3JoEQQgghhBBCyJ9czFYtZVdvpXwIDl5k52tX7qR8Dg5uZedTqgZSbXz/277dujxqVcsf+gguvmTvyRYubmTvQj9P1svg4yodSzqwdXDS6EWlK/wOTj5l9zQuJVTZMTiJV57LaqRR8CIhzMbtYqLh9HKfTqZRXbyM9K7i/RUBQM74URM1DwDx1t9DZYR1i3sY7o2wbnGLOyMsIG5lhAXEtcIC4lphEXGtsIC4VlhAXCssIK4VFhBXhIWpVniKBNEDzrUgeiA9xIx85JBMR+pnANgjhRy/fGWMxzGb4JG8jnoMcEnq32/ZwdrqPNuijSTNs5jKNdpoD+nxhrb+U7/w0n/IJSauPtPM482Beaa9IUN7ONPnUVJljrSi/EzeAmlF0/N2UgLzo7S/TNwTbWOymftn7KLLlH/eNjbNjVfcwcr6Vf/T5CaEEEIIIYQQ8jO6AgAHyYG2w+ITfgAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='Y'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMAef8/EeW7ImaZNLCb/gAAASBJREFUeAHtlU0OAUEQhVuYH7uJGyAwO3ECG3vpOIA4gTiBzAnEiU0VKt0bi1cWFu/bjF7UC5+uN4F8hRBCCCGEEEIms55NMPZyPgFB6aAFX4CgWgbndhzF/tgGBJlc2mkguUcoqMsk6S9toKBSRu+posUOChpK0CpVNA0YZ9GbKjqAQdvkD1dFNzBonEhSRQGkSiRFvVQoD5NUo/uRiFFJhd0piIFJ6vSWw4ziR5J+cFZJ+1F0dwQVKsmeOPV7Uzt0P7IqOdoDR7dkal/MQanlUeAVklVJI4rWwcdD7EStEB9XudKeCsmqRPfDSRVfQfPfvHDxCsmrBK+QvEp0c/1EK1wnnbdCsirx7Ef25g4MYhCDGMSg/4AQQgghhBBCyBPTv0A+Kbv7sAAAAABJRU5ErkJggg==');
}
.boardSquareOccupiedLetter[data-occupied='Z'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAt9G3DAAAAC3RSTlMA/3fW7iI6r4pfEXi8j1AAAADKSURBVHgB7dW7DcJAEEXRFcj8ssUI4ww6MCmZAxIiBxSAO8AdQAfQARKNshtaBEjsCwZ0TwFXesmM+wAAAAAA4N+sCf1eKHfpBjG0F4TahGU929ApBJ2Jatk9hm7pnVlctnLpxj7YqZad0jtZLVo29EElCG1Ey0axM1ctOwtC19BZNOmdqQ9Kl+6pWtbFk/YwtOwYQxfVMtWxXlo71rmlY90qj3WhOtYHQ28oq/Vv6B+PdSU61r4xtEx6rPvK75cRshKyDwAAAADwAif1LUd7kg5dAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='A'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAc/+71BU9ou6IVbfWDYsAAAFuSURBVHgB7ZYBhsNAFIZbslsKojfobJokAbUniD1BLCggeoLYE8RSAGJPUHvSfdM0qZfAev9Q+D8aCr/Jl5n/zYoQQgghhBBCyL9YO+feQgRFTqgDBJ2dEAcI+nJChee8fDshDeHakwVxrWxjrkPY/nEujG3vOoTtrYTk8ivQoI2E7H0YGvQpIZ3fk1cwaCcZvX8cwaAPyWhO8jhgOa8SkQyiArhebW9xEPeX8pupgV1Xw/ZuoaD34Zj5A3eByuh+8CPU9tpXET4AhpWU08rAMrqMrnqw+Nvx63Wg62Y8uyXmOp92eIa5LqZ+czXkOn1Mtxgq/uqhvYKKP1aLMxe/ogDKSJHXQPErYqCMFEeg+BUHe/Fr9oBrRWIv/kxfuBqz61I3QWsu/k79tQ2A+RJ2Vts3KVe9PRNrGeXzj9gYyyibr7A3Fn86d9YZXXcq2TYAlm/yaxsA0cLtyTYAzour7AapJEIIIYQQQgghT+IPZdtXENlSmeUAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='B'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEz///////////////////////////////8W/R0OAAAACXRSTlMA3P9tP5KzG+4ZLuySAAABAklEQVR4Ae3WgUYEURSH8bNmMwGy+wLN2WYLMO1GALdAgLVPMBYCGPUCGTGv3bkhAuF+mNb/Bxz4GJx7xkREREREROQPC/+xfkBCWZugkDcJCnlLhfxAhVoq5Kkg1Fi2vPesLwxlTx5ugVA9xrABQraLYUuE3vJAhC6p0GIuIf7TnvOOEKFTDDdAqPJwBYSOHrriULVDn5F+Zk/tNkGh9YBdkQEK+eeMHn97P3mYykO2HKmlffEwAKHKwwEI1d/rD4RsFdM1ETrmU3ueoRUUqj18AKELDz30N+IdcY6YFdmPXri0v0xUqINCG2NCdx0UejUm9GhEqNknExERERERkf/oC4NbV8g/i/JHAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='C'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAUHeR/zO0GNbuZtL+h94AAAFSSURBVHgB7da1WixhDAbgnIPT4NLhUs41DFltcKvQC8Clw6nxEuc2VyUzPFslP/69FbIaJwAAAAAAgN/tXx8z+z1kNcl5I2NkMsNFUdMr/Wfhk17NKgcsktoeB0VJ7YTZyUeq4KzLRqJezkqSUqvEOBf1xJoy1NfMHC9kfZ4zug25vysWePEXhX3OaCz+tqoPUn+2M0IBi+qTHyv9VpuNti7WUjqlWhhTx1ryVK9OW3X4I1RxhkcK74JS05vRSApbkiabKcm+TattmIkXKWWbfrwQXug7FaSzFmm1N63jMVKnnvblRu2abdTK8H+QW1I9/KvKrKNGRwuS1xyt7Lg+/7LYVlX1KVE5D8Y6Zjm01gLXm2fofz6UT6c5/SRRfLRG1Gc72WtOOMQjrXlXB3v4Iy2S3g4L27TslC+2RiZvnOevkdH/4WwJDBAAAAAAAAB8pjRguoRqusQ7ggAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='D'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEz///////////////////////////////8W/R0OAAAACXRSTlMA3f92JJJNte4ke3d6AAAA8UlEQVR4Ae3XQQ7BQBSH8RdV3Qon8KhaNrAXJ3CEpieQuoCIODdvYm/RL1LJ/7ey+lKZ6cyriYiIiIiIyBcz/5jvkVAoGyjkiwYKeXWEQv6kQl5ToWWv0DR+7O4e6t4hm6SHW/UPWZa2ABCybfpvQCg90gMIWRfrRoRO7r4hQrm/NUBoEqEzELLYlDci1MWWJEKxk9ZEqI31J0Kx/iUVqojQ6HchhU6DDJXYK4K9tEM6RsbUwZaO2gsQKqjDv6Wuoxl0QebAlY0OEQU01mR3ZNAaHzyp+WF0GOPxc2CfEBX0UbM8GhG67k1ERERERET+1Avcak9KYOzokAAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='E'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEVHcEz///////////////8T4DEaAAAABXRSTlMA3f+ZIt0uI68AAABFSURBVHgB7dMhAQAhFETBuyiQgAj0T4X+GAQCsTN+n9uPEwAAgL9XTSgtVMYxISEhoWJkhYRcROiWkNBmBoWEAAAAeGYB+Xg9Sw+OCb4AAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='F'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAADFBMVEVHcEz///////////8Gn9AKAAAABHRSTlMA3f9E1Fe4AgAAADRJREFUeAHt0qENACAUxcCv2H8IFDAkggSLJu9OV7Z+AQBtHCs56vUkEt2fZkDkApEoDQBsq7t19NNf9+4AAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='G'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAZneP/7NK2SkR7je457IAAAFlSURBVHgB7dc1VwQxEMDxnEuDa4NDifbYnDZoj2uDS4drg2uDy8fkkj2bKyfB59fg//d2owjGGGOMMcYY+9tyWwCgt1w34+4Hy7xmZxESOrRCLZCyqtHZg3SD5I53EYWC5NAVINF1asgasabYO68DaZbYsYHUoD6fhph2YuhWvZi01xUlhqrTh+pQfpFN6vie5TREz9lNe0X4/cpni5BCLvww1eSZdI5f7zYAdJJCo/gv/QAQIC/YoDCgH79dOjn69wY6Pjxx6LzWQtPnNhoqNxCy/eRQPsSFOIS4jYYaDIS8aq0ZCPkyjkQPNaR2+zZ6CG9sYXoIn48dJkLb+C/pIT++XNFDDjX+9BCeSEF6CA9b6NhAaFRNSXoI3yJC64mDlx7yPsvSg1DGgBBCzwYd2ULY60AnZIcM74Ko2tRF2w3IqqF/RjqFhtK0zrrQUZDo9ApN9hp5eawcFF+IMcYYY4wxxtgHLmWZ3UATADgAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='H'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEVHcEz///////////////8T4DEaAAAABXRSTlMA3f93RLkCOaAAAABDSURBVHgB7dOxDQAQFABRiQXECH8S+09FRTR6vDfAdZfOAAAAqBFR0pRjaK+HhISEhIR2/4SELLIICQkJCd0FAACADidYTNo2QBrDAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='I'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAACVBMVEVHcEz////////mcEUwAAAAAnRSTlMAZtJCCVUAAAAoSURBVFjD7cpBEQAABAAwmskrpQq+3PZeBACckd0lSZIkSdI2AcBDA8iLTxujBvVtAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='J'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEz///////////////////////////////8W/R0OAAAACXRSTlMAQ/93XY4XwOYGmMZiAAAAr0lEQVR4Ae3SPQrCQBRF4Sv50TJY2WZEYynqAuxsg7iAWYKVva7ceUwIqURmxOp81W3eIQwRvgcAAAAAMxfsCRH6jBAhQoQIESJEqLDj8w9C5SRUZof6uKsYTVPb8T3uhW2vRK9w3MZ5CLNTqqtd+/Gt10q1tPOHrZWtrVLNnblJF2f6vL9wtPPKeqRRq3SVm2hk8j/pqRzlyw06ryzFUNo0ylQfQ6o76b8AAAAAAG8mOjWW93v6XgAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='K'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEz////////////////////////////////////JATChAAAACnRSTlMA3f8YzLKPc0Tu2JXa6AAAAT5JREFUeAHt1zFOw0AQRuEgE0yJwgmywrHdLVIaOgQXsDiB5ROgnMBKRxtfGGZHeEVF8baJ9L8CQfOJZJLZ9UYppZRSSiml1D/dhBD261/H8FMTOfRh0Dv/j+7M2UcOnQzq+Ht0H6yZQ1/mtHxq1c6gkUO35jxtODQZ9Mih2pw+cujss8eQz/6TQ8/mHPiXtnozaODQNs0+QijPHkO1f80otM4eQ9UlzZ5DR589h9KKfeVQ7SuWQ2f+yhLUX/DwDVpbSkFNKYh+jnJdAajxDwCHxin9xNDBF2SHocFXdh8hZIM/JRBCw+852zKot198Jc38OPLX9lAA2vr4OOS3mplDfgAsHPKraEMha5dWAIfy4Uah2u9+HPJTaSwAvRS6sP9dAfyhZuCQr7eWQ/lpBEHW5A9sSimllFJKKaWuqm9Q4FLRY9/CLAAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='L'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAACVBMVEVHcEz////////mcEUwAAAAAnRSTlMA3Y7xY1EAAAAsSURBVHgB7coxAQAQAAAwl/xCuJQECjhhuxcA4Bax5P0kSZIkSUt6PAHAbxrHZl3BG+echAAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='M'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMA3P+0mRHuel8+Ih0/9a0AAAGlSURBVHgB7Ze/asJQGMUTtI1mkkIfoFer0SnkCcQnkA6ZRegeHDuJTyCB7rZLoU/ZfPlM7nXp8J3B5fzASg7kR+7p/RMjQgghhBBCCCH/8OQaprfZRrIXi8htw+hhbxdVYTRydtEkjAaAaBlG34BoEUYHQDTfhhEgckefjB0iyn0yhEQrn5SQKGj7ZBftb24r7CJZW+cuSGXtGUUymHUXJDI/jaKv5vPeBXFz8WwU/TSfLOz6wyj6lFrCrn+NorPcfLluRiJNrSIZTuW7zsZG0fGx+bPzXe/MosS3XcvDmUXtJPSb0XlkFFVR0R8A7XKxi/q2RZEBorI7AAbtJE/MomF3ALzJsjOL1u32uui7BkTyNddLMQztooMeAPpkZlGu3eS6QF4h0UANpb8yiq5jOskI7aJJ33IhnUMi/b+n11kQAyJ5BVlL1ytMpGtDBDkm0tVaS9egSPaP6UZecFDRQc/uWYSKateyhEWxiiawKFFRBYn8a7rbQiL/w2EW4aJau8ZFsXaNixLtGhelIrqgIqHQcxsXnZzL7CJCCCGEEEIIIfflD1KKgf95ulDQAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='N'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAACHRSTlMA3/9LdyO0EQdxyEsAAAD2SURBVHgB7dQxCsJQEEXREZPYykexzhitxRVIVhCDCxBxAaZw//oHYmlhbiO826Q75BV/7HtKKaWUUkoppZK7b+1T4e+6X6GagvxEQTsK2lOQnyhoQ0F7CvIDBW0oqKEg7yjoSkENAcXD7QBoFdsAaHmLbQDU520PACpiGwAt4uACkB3zNgKq4igBUJk/OwCyNo4SAI3bJkNlBtbToXEbAM3i4ALQPA4uANkttgHQENsAKLYtASi2NQR0zsYFgOJn7gAU22oC6j2aDhUUZImCjhRUUdAiQZC1FFRRUJkgyFoKqijoSUHWUtAwQv+UUkoppZRSSqkXg+VjxvGZQhoAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='O'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEz////////////////////////////////////JATChAAAACnRSTlMAFnf/7T6OYarEoGDNRAAAAUtJREFUeAHt1zVCA1EQBuDBoUL76AVgNlZhB0B77ABojx0AuzCZrL5N98+r4P+a6M5zGfnbiIiIiIiINjqqSftYnGa6OpG0xOdGc5fi8aSFxNO6Wa3YcTfM37hFDfQF9ajmWmQ2rdodOvSHOvY6eftub/cFs1Lp4iV7PxTM2aQ51WaCM+DHOjjo+E9BLEy6JeiwHj74d8EQYhNg3tbFWvFxyz7Cs6hfq+Axuj4GUphMgCY6aNuV6WmBXgRwGI73JPAeEGeqBu9WQ3QaXQZ9hk2kqc7teALd1abDAN1mGej/BcInpH+J+Bdt/G0k/sYWf6uNv/lvTY6j8HTCD8hmrYL+I1vwI3sybMNgxXw6rjXNCNea5fpFaxTh6ncz6TDfZfStuIw2/ff1iX7cC7u/Sn1xONdCchcpzboSnziJn9mwUHgqSkRERERERJBffn6CFYu7WzQAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='P'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAACHRSTlMA3v+Ud7hYHjmR3RcAAADASURBVHgB7dSBhsNAEIfxcccdQBQCYCdJClCFAkQb+hor+gDbvj9qBwUo9o/g+wEDn5iMNQAAAADAFwf/GFZFKExZFPKURSGfiijkvSqUiijkfUOos3DzamgP2a9XuT1kWw2dBKH4pKMgFNOsCF1j24LQqx63IvSjDCV9aA872lR/7ezuoyD0r7rsp8fUHPqrgy/NoUd0UhG9kLOJQosoNJomlLIodDFJKN1NEZrWYm2hzgQIESJEiBAAAAAAYH/eK2hBoWnhOJMAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='Q'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMASXWI/+UbtMwzmX3PDMsAAAGCSURBVHgB7Ze1VnRBDIBnXao5/wv8BjXaY1ltcKtw6dAep8Wlw3lOTu7a3Kk4SfB8Dax9o5FrvjeKoiiKoiiKoii/OgFy/6a5mmQnBOT+MD2bUINnaoI6xWOGJwUOPQzRJrj8kZgQ0ksWVU7snzGzlalRdykCSCv+mwlMY0RRAn88aAJinLU1Bctxl0m738kRnERo429Joij+dLWupW9SGn9q6y8fyZt0DgCFxst5fEne615vgtPU+Mh7W2YpIjy0be96thI8Ge+8k8EhUgPkjzfDAeo1st6edUuJ8gRR1j9uvJElKVGPir6SiHH8Mf6F5IeIfNDy04h4YkP2+alWOPljOSqGy1FRokB24gTpJXs7dGh5sSaC0dZY9wWxbV9wetlgnWVW63fbaNzHeM1oe70ZtYLtsXzDzphSr9BDDUxyRMlHaGBZJmdOZYFH0WZADg2b5D6KcpZvSvEPLnR+q3xRZARFz4bPMndpbu3/IyKKQI+R4fpVp68oiqIoiqIoygv+562PC1qTxgAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='R'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAHlBMVEVHcEz////////////////////////////////////JATChAAAACnRSTlMA3f96V7vuHsycMMnJkwAAASFJREFUeAHt1oFGBFEUxvGzZnMFJAigOdvOFpBVBJj2CdITJAhghBFg9QRZ6HXzXcSCcP8Q3x8IfjJ7zz03nHPOOeecc8790SJ/W90hkFqPEJTDCEG5niAoLyionyAonxqgPlS5T3XVCKmP1B8AFM+SRgCaBd0CUCdoD0BF0AsAxWdmXhKQvvaGgA4AxP5H1Dcq1M/fUQdyhkak6BMNwNA+1l3SDJWHVHvohhwmCHoLBuqpdfQVDPQdEDRRkJZa6zkqr1pqABTbzLwGoKOJbYI6QWcAVM41sgAUuzpqALSo9yMALQVtAKguoxsC2tUDAEAnxNNPLamnXxyop9879fQ7rbc2ANWrZAVAsa1TAkBzXQAA1B1PiXPOOeecc865/9EPpNhWmu6ByXcAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='S'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAPHfm/8UZolWIZlbXnYwAAAF9SURBVHgB7da1QmwxEAbgrEtzL1avS4dTrwzaoD1uFU6LPQDaow/KyZEwp82PM1+D7h/PRInfTQghhBBCCNFZIqK5KhqTLJNnAMw5pEALCrqgN/1ATpS4U/ugO+Im0A4Z/22DVknbd+a8QlqfbZC7ZMfutz3IwiXJMe7/sEBE7SVgimb8H2L6hwe7oBRf84j+YdcuKEEOM5oh69l2R9MOzfzYewTp09t8j6F1FovFKjDZZqHQIzsChpgN2f6vcIf4hcYP7QAelCbXJD664Oavv8u68U7hl387/27lCEyKLJg+PYBJpk+jSwpTIR98WqJup/iVjXZqRsG2vd2kcJtkbjnQi9lLoIyZJFByyLqKRMNX9qF1Fcm6swKXI1Ok8aBk+El0Zx3kvmSmzE/2k63K/HylgSfbKj/yXcCzJspuxvQQ8hpdIO3GGd25mzMKFUimCR0Lxv7WXiduCi+1rvb/96lrdIXdHqWgP1W4htT0+7+4pIQQQgghhBBCfKJXGKKQFn0XyPwAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='T'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAgMAAACaKAorAAAADFBMVEVHcEz///////////8Gn9AKAAAAA3RSTlMA3Ygtg3SeAAAAL0lEQVR42u3KMQ0AIAwAsEnDGThD2jgIQcOy9m4UAQA7n9UvfTNHXJIkSZLUEAAcA2+SZcNiSMsAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='U'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAACHRSTlMAmv8jvXxY42do5iYAAAC7SURBVHgB7dYxCsJAEEbhkSXail5AB9U2CvbBE4SE9METSLw/uKNsXBuLCVi9r/ubx+6miQAAAAAAfptpVI7zGteGEKFfCBEiRIgQIUKECgv14xziurtCcwvVaQVbS1coaH6GImUd7DKHNBbpxRwaVT2W+RCfs0ZV9mD7Kb/+u/eRVho9nKEwvEqtSNGo6cXppjn3zeyTf6nErdHM1t+xV/qoZYKTjtYyySWdqZWJQmeprpR/AgAAAAA8ATSwU8FKqZfZAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='V'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAT/93xKoRK2bqjcDXImQAAAGHSURBVHgB7ZaBZsNQFIYT67IlYPIGXdZGC2pPEHuCyRPEgAGTJ5g9QeUJqk+63MZ/TzOMnB+U/4M6l3Oc3v9+JPkPIYQQQgghhBDp80h1ffIaTp6WT3ob2zZ/D14cK10W6KzOsOJS+tD4bfVdqGvHoFVofLf6PtSNY9BjaNxa/YENl5INY+Pa6p+x3HWJg9ZiQ7lPPJRYwUJbuwbl9gBxZUfXoCK0nmJoU+XhATtYaF8+3WaxlRDEKUnMqYUgTkl28VU5BYEkiC31ChI1PSE0hyAgu4rt0yUIaC22Er64JdnPZ/rILbbBJQgo4mtO/YLM2zHSS/xDOSEIJKlx7RUxqEf/GROdrPCPBkIQSBLuOGUEiZIcQmgQhJGkCaFBEEaSOvwwgkD6agrtSA0qptgGSpAoSZdygkRJDpfQiCF40k1OCgJJtj0EISWpzhCElGQzQBBWkvhZykpCC4IvPghCSwJBaEkgCC8JBKElgSC0JBCElgSC0JJAEFoSCCKEEEIIIYQQ4ub4BYj1WHEnjGFCAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='W'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEz///////////////////////////////8W/R0OAAAACXRSTlMAU/9/qhPuzTPaTNBZAAACLElEQVR4AeyXQW6DQAxFqYDAMsoNgJCwjJC6RzlBxaLriF6g5QQRJy8z9h+mi0r5rP028UTBtb//OE3yL4ZhGIZhGIZhGMaprusmPhw1zuqVj9cTHdaPn3Ho18NN42KNr0RFWfz5eT18azyi1BdJow5yF7eJsJCJ3mroonEVtdkRiXwVN1QXVXFf40dC4HQZoG8QDO8TuBYe0BeCoVLWSC1CCKZ6PZlErowKxWkZqtfFBZQjmyBLMFIWjMo7Mq89bZSfQHuALOgTHROUqqqknFAHZkAwQWDXTY8+e1WL4O4S4XZ9wkh4lwB/2wXnDEaaEJCO1CKaVAvJ4XHSkZ0W0ZVa3hvpR1zVRsf3SGYpL6X9uD2T+uveS9aM9aN2cdVnb06xs1qhIxNB14N/GUWbxfdJMsukF19YIT4/Ya3xjlR1Uj3IC+/IweerRLEBVXJAj8kPPseB9qOo3Caw4uzGVWJJ0autUnFUqpSxEdCncF0XZ6TU52YpvbUPYiB5LXCR6dV2kUq00eeogu1w5FNspEZaeD/CSEc3LTQ6BD/yq+09XK5pDe74QuBX209oZk3Szar8jtX2pdMXI/FrbfuODHdikQPvx/AVe93q49caHOlotvqgPO9IRxXXR/tRB+Voo9ULG/GOjKw84x83ngU1hLQYIb/aIiufohHyqy2y8ogR7nPkZuUCI9zpyCakxQh58j9WLnf7Mf59BX8O9pvYMAzDMAzDMAzjd0MNAAAuQ4IXJVvR3gAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupiedLetter[data-occupied='X'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAAC3RSTlMAGt3/PV/Equ53k8K8DvkAAAGJSURBVHgB7JdBbsJADEUnVZMqWSHYZNmKExRKC6wq5QJIuQBSjtAToF4AqReolIsWT22IN134d/nfhvFi0DDjZ5tECCGEEEIIIeRPiuX6wvs17iR8SgF62Xm8hoOEhxTgQXZuLColeov9ts/L1tVMo7l80SmF+JK9Zx+EqGTvsx5P1qsU496uxS7sJQUZ7aH0Cb9TkFZ2P+alJNV2loLkJ9/JqtZUiDLYOVpNzigLu5lRdYlS61vl99snALnjV8koJ2xU3IN9AOQ8PIl1TtiguPvGCQuI2zthAXGdsIi4TlhEXCcsIq4TFhDXCYuI64QFxTVhYUvQLLLcRvNaED2gGuJaPnxJWpFuPQCskcIOf3xlhqfjVnsILMimxCWZ/55lgLXVftahhcT6WYOWtirbYcMbWvrP00WM20HuAHHdmKbDWwg/pn0gTbuYjGkLZIxoJrLWSFHqpuVjCRSlYbq3j4vr/31U8aLU2uCfKeL9dvTZPEbFLdfer/k/dW5CCCGEEEIIIT+jKwAAxJ52dRrATxkAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupiedLetter[data-occupied='Y'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAACHRSTlMAcf8/GOW7mY4rPA0AAAEMSURBVHgB7dUxDoJAEAXQIQK2xBugCq3xBMTE3mw4gPEExPsXMkt2s9NY/Gks/muQYif4Zb5CREREREREPx2Oq6tkD71/AYPSQTN4AgZVevAkSR3W21EQenKwc2dHSOabdoJo9ehSjr1MgtjpoHMZUS+Yt8ZbRvQUzC3+4M6I1D6GVEQkoLoIKcSXCvXJIVXofhTBxJAau3jQliwpokFgdUghxQ/OKhnNo4GaLaR89YXUbU/Wi4dmM+cLLm5Jnx7Mo43l0ZgKwaukwyOyWzIHrEKMu77SJiJPlXj2w2wJXiF2S0yF+KoErxC7Jbq5fqEoXH9Ii7j5K8T8cwsHcRAHcRAH/QciIiIiIiL6AjRhOuFf5l+hAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupiedLetter[data-occupied='Z'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAG1BMVEVHcEz///////////////////////////////8W/R0OAAAACXRSTlMA/37W7hk6r19sXSStAAAAtElEQVR4Ae3VAQYCURSF4adUAbxKM4DaQaEFDAJgqAXUDpod1M57DzBCdA9O/N8CDj/cm74AAAAAAOQPu/8bYmid4iZ16CwYugfKRo5lp3Eqe9WhZ3xnVstWKW6Ri5Oq7CYo60Rl01wcBEN7Udk8K8seorJNH99Z5qJNcRdV2VBPmlPZVXXSBuWx3roda783pDrWjepYW72hzu0NeR5r2Rvqjcqkx3qs/b2MIZchfwAAAACAN0jQKpVzjAafAAAAAElFTkSuQmCC');
}
.boardSquareOccupied .scoreMarker {
    display: flex;
    width: 100%;
    height: 100%;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 93% 6%;
    pointer-events: none;
}
.boardSquareOccupied .scoreMarker[data-score='1'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAZElEQVR4AWNwL/AhCwNBLhBvBeJ6ZHFyDGIE4rlA/B+Kz5NtIBDIAvFJsEEIvJUsA4HAG4jfggyBurCeMgMRLloG5UdRauBEkMuQ+RQYiMDDzsBRA0cNHDVwGayApZaBqdiqAAB1s3/7rj9n7AAAAABJRU5ErkJggg==');
}
.boardSquareOccupied .scoreMarker[data-score='2'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA1UlEQVR4AWJwLwC0ToewCsNQFIbtvHnqzc7reYeaw3tVNzM1iw9icl5M4JOp+dRWVlfhyhGnScVoL2tv8iUAzV8gl1sW5h8m2MGRhgX6+Gwu9AcjvMEnKGlwAE8vPu+g5eMjer+XBBtYQSXOmHBhCBbBTAyaWkHFoK0VnBnUtYKawUdxEHMHT21RkDvqGJvze5hfJ83YzteLgjtjBpqiIGZjzIbf7XIQszLmoDs7cyVmT2MkjS2prxmTxJ6MHaLLJX8rWrjI6osRhlyQiytmJZ9w+8H0AbffbmdFud9uAAAAAElFTkSuQmCC');
}
.boardSquareOccupied .scoreMarker[data-score='3'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA80lEQVR4AWJwLwA0U4c6CEJRGMcrkWonkYi8gM3mSEYegEgy+QhUq5VOopAtFCIjkikU8GP7znbH5vWgBO/2G5ve+x9OOCcrLA+uUEIPA68FpOCY+z/FMphgtmjgoA3OVEAE/nIYAt71TJU2eFlYvk+MaCDBr2E5MDIY/2XwbPxk76cgVggDY3f5fMvhiGJ4MDRCZuxVB58MmCZIuGdzMIWKz2MJrfkMQqgI2mEdV3fuK4KqcMNgvldQXsFur6C8fv1ewZzBWjMcHMUfM9NNE+yWjTzogcvxFa7GVw+ufh7Sm2H7lEdGE5TXrJapQi3kMmFML37Cand/PnCCAAAAAElFTkSuQmCC');
}
.boardSquareOccupied .scoreMarker[data-score='4'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA1klEQVR4AaWUIYjDQBRET8auPRG3LiomNu44OM6LeBeorff1Kt7FxUNsRFU80fUxhXTEBIY2acP/A4/Sye5jFz779XP6M4GcwQB6ENbeKivAIqRe4UTRnb/fZiHSUNKCm0uIlBSMIHOdEEnkRJHdYhbKVRv+j2Yh8s+Nk3S5ScirztxYSJ9ZhS03XdjZhUilV3UJkSBjETe+RxGGI8KOi+ud76kIkyPChfRg2GCUNVd2zVuhgfnT7O3xC2oRVexLz3sYVqH2HuHT2PiFuf+BfR2bDrQ6hw8ZL2IOn3FqHwAAAABJRU5ErkJggg==');
}
.boardSquareOccupied .scoreMarker[data-score='5'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA2ElEQVR4Aa3UIciDQADF8a/ZkS9aV2zG62Cx2+3Igm09LY/16Mbi9WYPq/ZFi9m9wTs4Lnhv4wY/BmP3R+TpX31sduFzARvRu//HYhlsgkkN/nuHztDDEDhBrQYPLhi7NWrQMLhAliLYMDinusKWwSlVsGfQQg4lGH7nvwSvO1NZ4Qbmm2DnBRZ40hrEOynIaPkR/Jbz/s5etFKCyvAXBkclqD3rnJYaVJfwShUcUl+hZdAqsymUJ4laJbjCnQcrKMgEo7fqsDfBAzI1WPHFOrm90QwjNOGZN3CVaPiQJ0kEAAAAAElFTkSuQmCC');
}
.boardSquareOccupied .scoreMarker[data-score='6'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABAElEQVR4AWJwL/ABtFKGsA7CUBT97quv0NVfYupn8JnP1OxcBXYeMzmf1Is5LGquvj54g6mA3SWX5AlCXxNITjLa27PutXtF4LkCDyJIZATNd75EVIMAFsFMFuDUQjz/YOLCETh+wR+xwJQII2UBVHtZjexC2ZSR6YSibp3m1+RkRhyAPUJ4piyJMQtuoGU5TInQUfjie893yQweWmG3CkEQnx0ZhNhrhE+xIIF6I9OKTKMVzpTlboLXCt+Z3H3N/SiDvfLwgvbajEftsJIF38n1qhoy7BmO4Hdj/qQ9ZbnLSXSbhmOG/5jEuaGkfVn2wWUTtrXSjl2x+FGIBtDK3AcVr2R63wx1tAAAAABJRU5ErkJggg==');
}
.boardSquareOccupied .scoreMarker[data-score='7'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAuUlEQVR4AWNwL/DBiYFgKhBvB+ItROJeQgb+JxF/JGRgAhBXAnEJHpwCxA+hBq4GaaQYg1wGNdCAGoYtgBp2AsSn1DAxpPDzpYaBLVDDHsPEKDGMCynsSqhhYArUsB8gw6lh4C2ogVORxck1zAspMlSoYeAJqGHb0eXIMcwAyXXW1DBwNdSwW9jkKUnICdQwcCqsVMGlhtSE/ANqYBM1DCxB8q4YLnXkhN1qkBilBloD8UFoMa+CTy0ANcR1S75YpPYAAAAASUVORK5CYII=');
}
.boardSquareOccupied .scoreMarker[data-score='8'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABFklEQVR4AWJwL/ABVFK2OgwCQRAWlRgUDoVDYXmAKiyPwAtUkSBrcXVobBUGjUVWI1EoTDXdJrvN5MJltyQjDubmfvZbTKKnIg2knXSQNh5X6LMEXUgjh4jezngiBdbADibeSDEvkvD4YPVqID0RTKg8HgwNtcAMzLHHE4Mn1wITMKceTwqexFKQRe7I4+mlMNaiXPHiSRG/D0gdVD1RAyG0JG3CHwctgEzmcGgOPRytsmNzIKCxwo6eTmj1T6fcEWwHqQG+1Rawc5hQqgsihwoSo+KbhAItcJajKr76d7/GlVvF95CTaIEtsBd4PCEw2miB2Pgv7poAOqUAwPdvuAWbgs0HaDsBPPsH7JjxmE/+1A0pFO8HnKxbzXKfXu8AAAAASUVORK5CYII=');
}
.boardSquareOccupied .scoreMarker[data-score='9'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABC0lEQVR4AWJwL/ABtFKGOAwCQRQVVQhOgGotiiPguAcGh8RiMGhEHQdAkSYofCUOi8LjKiroJ/kkk6awQ8omT5D9+yDDzKrACkEDJvAGHciAI3Ma0QXUYN5gAsERYSkOJ8AFziIBT7F3NQqxPHEg3Mh03G80wpzhfifjyq80Cdfa3Q25nrnYJGwZzJR1LkzCh/ILK+YqbQ2HnYwNJubaI385/bHvgEFkak0fFuJAC2Ky1m0QP6/Ujl3GcZsl7EFLvDQ/MssO5zkhvtgbKYxUMsWLZuKdIYwoG5fnM4Sj7IJ/RBfQiCvM1l5fN/ajRVwQrvNL/CP3YcpDLzILBinTCgPWSd7QDZvb/s5/AKD/Y6YZUZVCAAAAAElFTkSuQmCC');
}
.boardSquareOccupied .scoreMarker[data-score='10'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEElEQVR4AWJwL/ABYyAAtFaGOBDCQBRFkD1CLQK3vskKZO/QA6C5B6aeCyAwNRgOgOIeSCRys1vxm8xOtgwkiC9m5ue105ZBB/mgMUghT+sG9S3oE7QG9UGa+qK5himqZLCG1bks8WaOFN5QQQwvUh/QiUJ+5JvIEGzY5Y6YAhfkZn4MrO4jcI0AslqMS5IzCaAhHpXFC0ArHFiTDvIE8EE6s7RQ/QE63m4COsPXSsAecS8Ah3hpEnBC3AnADr5JAsZWnAB08C1nge1dwNtbvv1S2ovPxklAi3g/gOXkYdcSUF389IpDIPJeHA6kfgZYJsaXZuNLc6A5GLBWGLANvD/AJ1ZM/QIq7HAjE8jzs/0CC6FE2fxlylYAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupied .scoreMarker[data-score='1'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAY0lEQVR4AWNwL/AhC////z8XiLcCcT2yOLmGLfyPAGeR5Ug1SBZkwH9UsJUsA4EavYH4LcgEqAvrKTMQARZC+fGUGjgRYhiCT4GBCDzsDBw1cNTAUQMXkl/AYhrGCMTx2KoAAAdsXS0eSX8JAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupied .scoreMarker[data-score='2'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAyElEQVR4AWJwLwC0TocwDINAFIbtvK1Pva53k3jvcTXIep/aeVExr/AGi8Tjc7sljwTR0uPKJb/YQj5oQ9+3EdHEOc5zGQVu55Z6rQRaAbTGSkHDlfni94yNDE5cZpGAL+7D2caaWDYsoDqADmAcBVqAaRS4AQyjwABwk4HyWzA9AnF1cn06NYjrFIB5/P8I9MDiH1eDwA5gqbw3NYivhvDu5rM1GiydYkiK7a3HrOvBvGRz6WdFgA1nL1o5cwdm6pskOeHRkfsBQMfeARj9KIkAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupied .scoreMarker[data-score='3'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA40lEQVR4AWJwL/ABNFOGIAzDQBS1lbPzlfXUw7yMp57Kynhdb+apr60XkbWx1TNV2Q/8gzBGcmUR+/AIW5JXaO8uSwihBRZs4AAvriuYQJOeL8nmUM4O7lqhZAUGdPEyV5vsb1qhiWT2x0TaFYWK99uAk8LhL4UGSNqfhBD0LKGYp/x/5bIhQxRQdII5OasWuvA9I89cFk7slJWrFyN/92ph5iEP4KrWIcU7hUstoaXQ1xKOFB61hAuFTjMcGsWHkViN0APLiy24cXz1H+PriHsaoSZOSkYjlDZzbDOJB4tMmJQ3E/byADiPcRgAAAAASUVORK5CYII=');
}
.dark .boardSquareOccupied .scoreMarker[data-score='4'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAzElEQVR4AWJwLwC0UoYgDMNAFLW1sRNxdZX11LN5U+/jvZ1X8TreVdfWUz0vYm4n/sFR1q387OBR+sM9ciTkTiEiSVmVRQmWs7JR8RVbhTtEFd8bJYQsQ1KUFy2EbIJgUwZ6h5B1bkc9MmkR2qgZ/z0jNNkDjbs/aUqIUSsaR5cPrLCg6YmME6Jp9qPSQjQEN2p/XD8cSrD8yqjpZD06YXdFaLUo6wc2Qbksnwu5qr/u3jeSE83Ippb3MJjN54SMuDbEIxv/IYxKAcHyN+X5CoCtTjvpAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupied .scoreMarker[data-score='5'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAzUlEQVR4AWJwL/ABtFKHIBPDMBSA5TzVv4fJynpVD/Pz1M17fj/vp+vdvDhfr+fptfAKI4zLuyOBx8z6tQvpPqbWurdkJWm8r2FT5epkQXdb9N9P0rI9JLLgPDStNSwY4F398y3ACLBYnXAZTbcCE8Dc4tDTgKf7Bdzrc42+Hn2Db8BVAC/kEviqgmJ0Zjmf6G+5oZ4BmcEfpz1YkO1zsQKTNbhZgxlgZsbmj7lJqEUHMbxY6PsGSBBDn7nBJgobTizo8WM9xe0ogKJc8wYAB/l5cPbOvQAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupied .scoreMarker[data-score='6'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA80lEQVR4AWJwL/ABtFKGoA7DQBh+vrK6XtXFm3h4XtTDZDzzUD8P8WKunur6eOpNTUx2hf/gRNv+gR58sCW3j+QuuypKKYMQhSRksAp+368R9cJSziNASMs2oeA0AWsNcEJXI0yQLUJ7lcvWbI/tTsYKtW4jc5s7WWeK7p4Q/kOWzZoTXmjMgGbQwgDhF9+nchwjKxxViFrq5wBmI42M8GN+kIX+7BYIXyPsiZcQWeF8k/fWvD8ycSKbt7DPZn3qhK0t+EXeRNUQyRHJSWgO9j3bZXvKzUwbj7UO/5hsG8eOL4c5eBYYa3UTu0XxkxHNOqmVH1ujHtsZmp8nAAAAAElFTkSuQmCC');
}
.dark .boardSquareOccupied .scoreMarker[data-score='7'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAsklEQVR4AWNwL/DBif///z8ZiLcD8RYi8WT8BpIOvhAyMAmIS/BhqJpHUANXgzRSjEEugxpoQA3DFkANOwbiU2qYGFL4eVPDwGaoYY9gYpQYxoUUdiXUMDAJllRAhlPDwFtQAycji5NrmDdSZKhQw8BjUMO2o8uRY5gBkuusqWHgaqhht7DJU5KQk6hh4GRYUsGlhtyE3EwNA0uQvCuGSx05YbcaJEapgdbQtLcFlpBxYQClwKAtiPmEvQAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupied .scoreMarker[data-score='8'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABBklEQVR4AWJwL/ABVFKGMBPCMBTGz81PzePx5vfBK3zyu+nz+KDxal5g8QqNQuKTXZNrk5eFpaVJxeDt22hfMWUpZaLMlHf5xcXrCXVWWC4QAoXYKJ0ANdgCG/8pAz+PvJZYVSCJPGyYGhqEeg3Ygzg0NAE0gwaMIO4Nh0ZLDQ+pUeP9Ko2xNuUPC0/p+bmDht2U8Y1tRsoL/LfAzTcpBwKt0DpOubEViNY44UYZoWgpC+yDxsbuVuBkMfYAG0b9QN2HYoms6DZxgQbc5VMVXZL6dsaTZ0U3y5d0mhC85xoaDx5NGhAH/+CpcTIpvD5gWrx19Oof6vVg8P6NsQPbY3/4Uyecli9o51Hva5VGyQAAAABJRU5ErkJggg==');
}
.dark .boardSquareOccupied .scoreMarker[data-score='9'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA+ElEQVR4AWJwL/ABtFKGIBcCQRDOBnswmU32au8dLhvtXLNjtWOzXc9W6yW71XT/CrOwCOr8PAcmPN7cd3fr3lJOKTlxEO/iQ7yIvbiwORY2pxthg4YGSng0iztxJS5OCE6pKl+BEqrNAneTUWhggD3C60Omsqdkaze85Fbk2jdgQNCTdR6+OuGE3MTWMD5kcrTOqUB95btro32iycxMHw6aRk1bWOsWTWlG9qV4PLerFnFmNu0ZoL2eE3dwY/7btPkpGLGRqv4C6ADbzt9fADfbBb/CghlhOTu+SvRjBle45pqg/85Dj0UHbBUtjAU2qJNqNw2eX/N/rqQdFDSPRy4AAAAASUVORK5CYII=');
}
.dark .boardSquareOccupied .scoreMarker[data-score='10'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA90lEQVR4AWJwL/ABtFbGNhDCMBS9ghnSpr+ejjI7ZIPMQpOeDVKnuwnYhJKS2gd3P8hYgEHCUgrbP0/5AcxvEVE9r4xlUOd9h95I/xjmlZZ9XFfEgbZhBUz2ZfgVOCdxR2DFyUsk5KY4knteSEacYtoB9qj18hpEPxfgUACEYLllNXcAdExjloKR1hgwMAfVAbBizjxvNDvAKO0qtlsNmJAnBbjqNOAHeacAO+g+GrBYiQpwvZqrwPYp4OOWH38o7c3XJmpAj3yCTnuxgwY0Nz89ewpEPWvDgfevAO3F8VVLoDsZsJ7OI0C7Ab6VX0CDE45sAmV5t18LXfok8XcxhQAAAABJRU5ErkJggg==');
}

/* Tile Rack */
#tileRackStatusReadout {
    width: 1008px;
    margin: 0 36px;
    height: 54px;
    display: flex;
	position: relative;
    justify-content: center;
	align-items: center;
    flex-wrap: nowrap;
    user-select: none;
    color: #000000;
/*    z-index: 49;*/
    background-color: white;
    border-radius: 20px 20px 0 0;
	font-size: 32px;
}
#tileRackStatusReadout:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAABjBAMAAACF0A94AAAAGFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAABoAtTLAAAACHRSTlMAAwsZJjE4QECLzyIAAAFtSURBVHgB7dzLuaQgFEXhawZCBh4yADIQMxAzKMxA02+p5lY/M9hr1WP+f5zx/nqiyck0/4fuTaLlb/70yINpFLp//t1ulnSK0X7TOx9SKjLlFBf3efjHXrZa6yHwqXXfy6OfB95ZKvU4mkqvWpK5z8Pn2tp53hJdV2t1/X56Z3k7ROTD/9rX8fQu5G7X0q/xjZ982totVtvTMne85XrK4etq87j6W65x9y7oXX2/+zfeh+3Uw197XDo+aeLTg598PhTxr3WZxfGWj1uw8fLKeOt4xbM3WfwNHrxM4MGDBy8QePDgwYMHDx48ePDgwYMHDx48ePDgwYMHDx48ePDgwYMHDx48ePDgwYMHDx48ePDgwYMHDx48ePDgwYMHD96rLiewlpI3Qfz9cxatL8LJ6a/24N/bWKU2uWqJHe8slypXWc2N/c8i11gAnbzFJFcYo8dj4Tta0Pkz+948dr7zvS1Cf7/tPTu55i/1fgCdAh/LOp0JNAAAAABJRU5ErkJggg==');
    display: block;
    content: " ";
    background-size: 100% 100%;
    position: absolute;
    left: -13px;
    top: -14px;
    width: 1034px;
    height: 228px;
    z-index: -1000;
}
.rackStatusValid {
    border-top: 10px solid #28ED57;
    border-bottom: 10px solid #FFFFFF00;
}
#tileRack {
    width: 1080px;
    height: 144px;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    user-select: none;
    color: #000000;
    z-index: 52;
	position: relative;
}
.rackSquare {
    width: 144px;
    height: 144px;
    background-color: #F3F3F3;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEUAAABHcEyA51bHAAAAAnRSTlMzAIL4qAgAAAAnSURBVHja7cihDQAACAAgP/H/D23a3SxmiER8ZS+llFJKKaXUVV8DohguTlh+yp0AAAAASUVORK5CYII=');
	background-size: 100%;
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: " ";
}
.rackTile, .swapTile {
    width: 144px;
    height: 144px;
    color: black;
    background-color: palegoldenrod;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEWBgYH///8AAAAfHx9HcEwrXRPfAAAABXRSTlMzMzNIANj5DWwAAAB6SURBVHgB7c5REcJAEAXBJUEAWNg4uHNA4V9TDg15H0D1COiauj0jbZWR9q6qgPPoD3R/X+4FAoFAIBAIBAKBQCAQCPRTEAgEAoFAIBAIBAKBQCAQCATaOtGCxnXlyEIdaCxo/09oLmgkoOP7oFF7R0pB62h2pFkjBJ0Iw4njhfyGuQAAAABJRU5ErkJggg==');
	background-size: 100%;
    font-size: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: " ";
    flex-shrink: 0;
    z-index: 52;
    position: absolute;
/*    transition: width 0.15s, height 0.15s, background-color 0.15s, font-size 0.15s, top 0.15s, left 0.15s;*/
}
/*
.rackTile:before {
	/*FUTURE ME: THIS WAS A MISTAKE. VoiceOver loses its MIND dealing with this.
    display: block;
    content: " ";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcBAMAAAARwc9rAAAAElBMVEVHcEwAAAAAAAAAAAAAAAAAAABWYIjnAAAABnRSTlMABhQqOUBzHz3lAAAAVklEQVR4Ae3OMRFEYQgDYUAB+Pd4Pw44JITuFbv1N5mEnVpecrm89Hy56+OZ4aX7un235Yc+y+FwOBwOh8PhcDgcDn9ybTFvZD27Pof1DtP1b07fu+0PuqTcudZKSvgAAAAASUVORK5CYII=');
    background-size: 100% 100%;
    position: absolute;
    left: -7%;
    top: -4%;
    width: 115%;
    height: 115%;
    z-index: -1;
    transform: translate3d(0,0,-1px);
}
*/
#rackTile1, #rackTile2, #rackTile3, #rackTile4, #rackTile5, #rackTile6, #rackTile7 {
    position: absolute;
}
.rackTileLetter {
	pointer-events: none;
}
.rackTileLetter:after {
    content: attr(data-description-occupied);
	user-select: none;
	pointer-events: none;
}
.rackTileLetter .scoreMarker:after {
    content: attr(data-score);
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
	pointer-events: none;
}
.rackTileOnBoard .scoreMarker:after {
    top: 0px;
    right: 5px;
    font-size: 20px;
}
.highContrast .rackTile, .highContrast .swapTile {
    background-color: #f0ec67;
}
.rackTileOnBoard, .highContrast .rackTileOnBoard {
    background-color: #33DDFF;
/*    filter: drop-shadow(2px 2px 4px #00000088);*/
    font-size: 40px;
    font-weight: 900;
    color: black;
}
.rackTileOnBoardValidWord, .highContrast .rackTileOnBoardValidWord  {
    background-color: #28ED57;
}
.rackTile.held {
	width: 80px !important;
	height: 80px !important;
    font-size: 50px;
	transform-origin: center !important;
}
.held > .rackTileLetter > .scoreMarker:after {
	font-size: 16px;
}
.dragging {
	transition: width 0.0s, height 0.0s, background-color 0.0s, font-size 0.0s, top 0.0s, left 0.0s !important;
}
button {
	color: black;
}
.btn {
    height: 103px;
    margin: 5px;
    font-size: 50px;
    border-radius: 15px;
    background-color: white;
    border: none;
    z-index: 50;
    font-family: unset;
	background-size: auto 80%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
#btnPlay {
    background-color: #58458f;
    color: white;
}
.btnSizeHalf { width: 71px; }
.btnSize1 { width: 98px; }
/*
.btnSize1:before {
	display: block;
	content: " ";
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABxBAMAAADCAFu7AAAAFVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAADtBGx6AAAAB3RSTlMABg4VICs4PfUTngAAAQ9JREFUeAHtmD2OwjAQRj3sauskSFsvBG0NYKhRnOQCYNf8mfsfAUZBEanwfHRoXhUXLyN7umfeJE8iG0pUlKsElpN8YE1t7ROo3fTJo9L6axLeLbNeK2yIfHwFlSG6SX+ahQtLCVAbq/zxOW4iW2mE/aIfNjfJfMWqm1E0ZyNgs+9uVwqG8bju9chGI6J1rI3WR5n2u/vjq7VbmfZ94cuNQybTKPIKZt4I8RVv7SzVNlVmyJ6k2r+7a9KH5Kdk7SDVflRTTTXVVFNNNdVUU0011VRTTbWP0rCmABYMrJeAdQZtQWB5GjVQ5wKrGtjw0GII9klRDaW+hoLt1RBUevlYp3blevB7qGKjzRwq9AA3qQ/Bdv5EROMAAAAASUVORK5CYII=');
    width: 108px;
    height: 113px;
    position: absolute;
    left: -5px;
    top: -5px;
}
*/
.btnSize2 { width: 179px; }
/*
.btnSize2:before {
	display: block;
	content: " ";
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL0AAABxBAMAAABy07/MAAAAFVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAADtBGx6AAAAB3RSTlMABg4VICs4PfUTngAAASxJREFUeAHt2rFSg0AQBuBdYvoLUWsJPIASYu0I5AVyUKvheP9HcA7NBK33Z1L8f0P3DXe33f6yVDa2+adrmu8ts9u4P/yuajrD+KbM3IzPq240TfD77OqnVR9KJ3ZJD6O/glr0gxPb3I/+ckO6bYMT66xDffGL/lns8+p/XyBtzwLIKrz/HCBH/H48wGk6gFZBILkbXuInOXxifA3ldP3HN8HkOD3Atncg//EU5aITUNb+KU7/GeWvhiyOzxfKT+IAKWp84gBN/oegcms+ffr06dOnT58+ffr06dOnT58+ffr06dOnT58+ffr0wftH9P4UvP9F76/h+3d0fyBpsf0HdH8D3T+B92fQ/R9Mf+kh1G6Z/pUouD8mmjfm/bc6k1mw/T1w/xDQn1RZKN9QcB+AeygyeQAAAABJRU5ErkJggg==');
    width: 189px;
    height: 113px;
    position: absolute;
    left: -5px;
    top: -5px;
}
*/
.btnSize3 { width: 314px; }
/*
.btnSize3:before {
    display: block;
    content: " ";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAABxBAMAAABfBMdfAAAAElBMVEVHcEwAAAAAAAAAAAAAAAAAAABWYIjnAAAABnRSTlMABg4VKjhcvZAvAAABPklEQVR4Ae3cQW7DIBSEYWjUPU6UfW3SfYrxBQLsm5rc/yoVrqUmNxikf1Zm90nvmd1gOsogF/cKtEc/iyWMw4twmrNc5unJaH3M9SGWklP4n/UxltqOSrG+1DQ+nVYx4MZaahj2z1OuesIGK/lr/7qUq5HMod7cvomrEc2yb6MvV1Xi4e8vtrEa2ZTUiG/xrks8p4+2im3OupNuy3gqTpdoa7t2fDbCyaHdiqsycbk5Y+OPMvEzNeJdmXjeiN/KxPf+iRAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIEWIvHQP9poZ+30W/NaTfveqjwabfA9RvU+p3UvWbvb30o41yy7ybrr6x+i8ebO9GPOSSU3A9vb7RZu39LJUwjYP6SzDOmW7yCxDAYxacUjabAAAAAElFTkSuQmCC');
    width: 324px;
    height: 113px;
    position: absolute;
    left: -5px;
    top: -5px;
}
*/
.btnSize5 { width: 500px; }

#btnSpeak {		background-image: url('../img/btn_speak.png');}
#btnShuffle {	background-image: url('../img/btn_shuffle.png');}
#btnRecall {	background-image: url('../img/btn_recall.png');}
#btnSwap {		background-image: url('../img/btn_swap.png');}
#btnActions {	background-image: url('../img/btn_actions.png');}
#btnSettings {	background-image: url('../img/btn_settings.png');}

.dark #btnSpeak {		background-image: url('../img/btn_speak.png');}
.dark #btnShuffle {		background-image: url('../img/btn_shuffle.png');}
.dark #btnRecall {		background-image: url('../img/btn_recall.png');}
.dark #btnSwap {		background-image: url('../img/btn_swap.png');}
.dark #btnActions {		background-image: url('../img/btn_actions.png');}
.dark #btnSettings {	background-image: url('../img/btn_settings.png');}

.highContrast #btnSpeak {		background-image: url('../img/inverted/btn_speak.png');}
.highContrast #btnShuffle {		background-image: url('../img/inverted/btn_shuffle.png');}
.highContrast #btnRecall {		background-image: url('../img/inverted/btn_recall.png');}
.highContrast #btnSwap {		background-image: url('../img/inverted/btn_swap.png');}
.highContrast #btnActions {		background-image: url('../img/inverted/btn_actions.png');}
.highContrast #btnSettings {	background-image: url('../img/inverted/btn_settings.png');}

.dark.highContrast #btnSpeak {		background-image: url('../img/btn_speak.png');}
.dark.highContrast #btnShuffle {	background-image: url('../img/btn_shuffle.png');}
.dark.highContrast #btnRecall {		background-image: url('../img/btn_recall.png');}
.dark.highContrast #btnSwap {		background-image: url('../img/btn_swap.png');}
.dark.highContrast #btnActions {	background-image: url('../img/btn_actions.png');}
.dark.highContrast #btnSettings {	background-image: url('../img/btn_settings.png');}
button:disabled, button:unusable {
    opacity: 0.5;
}
.modal .btn {
	width: 300px;
    height: 40px;
    margin: 5px;
    font-size: 20px;
    border-radius: 7px;
    background-color: white;
    border: none;
	z-index: 1000;
}
.instructionManual {
    height: 600px;
    width: 95%;
    background-color: white;
    border-radius: 10px;
    border: none;
}
#remainingTilesDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
    width: 380px;
}
.remainingTileItem {
	border-radius: 10px;
    background-color: #00000088;
    overflow: hidden;
    padding: 4px;
    margin: 2px;
    width: 70px;
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.remainingTile-tile {
    width: 35px;
    height: 35px;
    color: black;
    background-color: palegoldenrod;
    border: 2px outset #88888830;
    font-size: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}
.remainingTile-letter {
    top: 0;
    right: 0;
    font-size: 22px;
    padding-right: 3px;
}
.remainingTile-score {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
}
.remainingTile-count {
	color: white;
    display: flex;
    flex-grow: 1;
    justify-content: center;
}
#turnHistoryList {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    width: 95%;
	max-width: 600px;
    background-color: #222;
    border-radius: 10px;
    border: none;
	overflow: auto;
}
#turnHistoryList span {
	display: block;
    width: 95%;
    background-color: #FFF;
    border-radius: 10px;
    border: none;
	margin-bottom: 5px;
	padding: 5px;
	box-sizing: border-box;
	user-select: none;
}
#tutorialContent {
    display: flex;
    flex-direction: column;
	padding: 0.65em 1em;
    min-height: 100px;
    width: 100%;
	max-width: 400px;
	height: 420px;
    background-color: #EEE;
    border-radius: 10px;
    border: none;
	overflow: auto;
}
#tutorialContent::-webkit-scrollbar {
    display: initial;
}
#tutorialContent p, #tutorialContent h2 {
	margin: 0.5em 0;
	pointer-events: none;
}
.tldr {
    text-align: center;
    margin: 1em 0 0 0 !important;
    font-style: italic;
}
#tutorialContent h2 {
    width: 100%;
    text-align: center;
    margin: 1em 0;
}
#console {
	width: 100vw;
	font-size: 10px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	z-index: -1000;
	position: fixed;
	bottom: 0;
	left: 0;
}
.monospace {
    font-family: monospace;
}
.monospace-square {
    font-family: monospace;
    letter-spacing: 8px;
    font-size: 12px;
}
.overviewTitle {
	margin-top: 1em;
}
.overviewCenter {
	text-align: center;
}
.overviewRowNumber {
    font-family: initial;
    letter-spacing: initial;
    margin-right: 8px;
    font-size: 8px;
}
.load-screen {
    position: absolute;
    width: 103%;
    height: 103%;
    top: -1.5%;
    left: -1.5%;
    background-color: #EFEFF5;
    z-index: 999;
    text-align: center;
    padding: 5rem;
}

.load-screen h3 {
    margin: 2rem auto 5rem;
    font-size: 3rem;
}

.load-screen svg {
    margin: 30rem auto auto;
    display: block;
    shape-rendering: auto;
}

.load-screen p {
    margin-top: 3rem;
}

.inactive-screen {
    position: absolute;
    top: -1.5%;
    left: -1.5%;
    width: 103%;
    height: 103%;
    background-color: #0000008c;
    z-index: 950;
    text-align: center;
    padding: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inactive-screen-content {
    background-color: #efefef;
    padding: 30px 10px;
    border-radius: 10px;
    max-width: 100%;
}

.inactive-screen h3 {
    margin: 2rem auto 5rem;
    font-size: 3rem;
}

.inactive-screen p {
    text-align: center;
    font-size: 40px;
    margin: auto auto 3rem;
}

.game-over-screen {
    display: flex;
/*    background-color: rgba(0, 0, 0, 0.3);*/
    z-index: 700;
}

.game-over-screen-content {
    margin: auto;
    max-width: 95%;
    background-color: white;
    z-index: 995;
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    display: flex;
    flex-flow: column;
    align-content: center;
}

.send-turn {
/*    background-color: rgba(0,0,0,0.7);*/
    margin: auto;
/*    max-width: 95%;*/
    z-index: 995;
    text-align: center;
    padding: 2rem;
/*    border-radius: 20px;*/
    display: flex;
    flex-flow: column;
    align-content: center;
	color: white;
}

.game-over-screen-content > #gameLogoText {
    font-size: 50px;
    height: unset;
}

.game-over-screen h3 {
    margin: 1rem auto;
    font-size: 2rem;
}

.game-over-screen p {
    margin: 1rem auto;
    font-size: 1rem;
}

.game-over-screen button {
    margin: 5px auto !important;
    max-width: 95%;
}

#final-words-played, #final-scores {
    font-size: 1rem;
}

.not-turn-window {
    position: absolute;
    background-color: #0000006b;
    width: 100%;
    z-index: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    bottom: 10.7rem;
    height: 10rem;
}

.not-turn-window p {
    font-size: 3rem;
    background-color: white;
    color: black;
    padding: 1rem;
}

.instructionManual {
	display: flex;
	padding: 1em;
	flex-direction: column;
    max-width: 700px;
	overflow: scroll;
    max-height: 70%;
	
}
.instructionManual ul {
	padding-left: 2em;
}
.instructionManual p {
	margin-top: 0;
	margin-bottom: 0.7em;
	width: 100%;
}
.instructionManual hr {
	width: 100%;
	border: none;
	border-bottom: 1px solid #DDD;
	margin-top: 3em;
}
.instructionManual h1,h2,h3,h4,h5 {
	width: 100%;
	margin: none;
	margin-top: 3em;
	margin-bottom: 1em;
}

button[unusable] {
    opacity: .3;
}
#tileSwapDiv {
    display: flex;
    margin-bottom: 1rem;
}
.swapTile {
    width: 72px;
    height: 72px;
    z-index: 100;
	position: relative;
    transition: width 0.15s, height 0.15s, background-color 0.15s, font-size 0.15s, top 0.15s, left 0.15s;
}
.swapTile-score::after {
    content: attr(data-score);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
}
.swapTile-swap-selected {
    border: 3px solid #009aff;
}

.modal-text {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin-bottom: 5px;
	text-align: center;
}

#blankTileSelectDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
    width: 380px;
}

#blankTileSelectDiv div {
    width: 54px;
    height: 54px;
    color: black;
    background-color: palegoldenrod;
    border: 3px outset #88888830;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: " ";
    flex-shrink: 0;
    z-index: 100;
    transition: width 0.15s, height 0.15s, background-color 0.15s, font-size 0.15s, top 0.15s, left 0.15s;
}

#blankTileSelectDiv div span {
    user-select: none;
}
.blankTileSelected {
    border: 3px solid #009aff !important;
}

.options-div {
    display: flex;
    flex-flow: column;
    align-items: center;
    color: white;
    margin-bottom: 1rem;
    width: 200px;
}

.options-div label {
    margin: 0.5rem;
}

.btn-green {
    background-color: rgb(83 157 65);
    color: white;
    border: none;
    padding: 5px;
    font-size: 24px;
    width: 100%;
    border-radius: 5px;
}

.btn-red {
    background-color: rgb(199, 83, 67);
    color: white;
    border: none;
    padding: 5px;
    font-size: 24px;
    width: 100%;
    border-radius: 5px;
}

@media (max-width: 526px) {    
    #blankTileSelectDiv {
        zoom: .9;
    }

    #tileSwapDiv {
        zoom: .8;
    }
}
@media (max-width: 418px) { 
    #blankTileSelectDiv {
        zoom: .8;
    }

    #tileSwapDiv {
        zoom: .6;
    }
}

/* Profiles */

.profileContainer {
}

.profileContainer p {
    margin-top: 12px;
    margin-bottom: 12px;
}

.profileRow {
    display: flex;
    flex-direction: row;
    padding: 1em 0;
}

.profileRow:not(:last-child) {
    border-bottom: 1px solid lightgray;
}

.profileSegment {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
}

.profileSegmentName {
    font-size: 2em;
}

/************************************************************************************
* HIGH CONTRAST / DARK THEME
************************************************************************************/
body.highContrast {
	background-color: #cdcdcd;
}
.highContrast #safeAreaWrapper .btn, .highContrast #safeAreaWrapper .linkButton {
    /* filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.25)); */
    outline-color: #00c6c6;
    background-color: black;
    color: white;
}
.dark.highContrast #safeAreaWrapper .btn, .highContrast #safeAreaWrapper .linkButton {
    outline-color: #00c6c6;
    background-color: lightgray;
    color: black;
}
.highContrast #safeAreaWrapper .btn-blue {
	background-color: #2C75B9;
}
.highContrast #safeAreaWrapper .btn-red {
	background-color: #C75343;
}
.highContrast #safeAreaWrapper .btn-orange {
	background-color: #ffa82e;
	color: black;
}
.dark.highContrast #safeAreaWrapper .btn-blue {
	color: white;
	background-color: #2C75B9;
}
.dark.highContrast #safeAreaWrapper .btn-red {
	color: white;
	background-color: #C75343;
}
.dark.highContrast #safeAreaWrapper .btn-orange {
	color: white;
	background-color: #ffa82e;
}
.highContrast #gameStatusReadout {
	color: #fff;
	background-color: #000;
}
.highContrast #gameBoard {
	background-color: #fff;
}
.highContrast .modal {
	background-color: #000000EE;
}
.dark #gameBackButton svg {
/*	filter: invert(1);*/
	fill: white;
}
body.dark {
	color: #EFEFEF;
	background-color: #121214;
}
.dark .load-screen {
	background-color: #0d0d0e;
}
.dark .load-screen svg {
	stroke: #EFEFEF;
}
.dark label {
	color: #EFEFEF;
}
.dark .btn, .dark .linkButton {
	color: #EFEFEF;
	background-color: #29292a;

}
.dark .btn-blue {
    background-color: #172e78;
    color: #EFEFEF;
}
.dark .btn-red {
    background-color: #7c3227;
    color: #EFEFEF;
}
.dark .btn-orange {
    background-color: #4e423a;
    border: none;
}
.dark .modal .btn {
	color: #000;
	background-color: #96969b;
}
.dark hr {
	border-color: #09090a;
}

.dark #tutorialContent {
    color: #EEE;
    background-color: #222;
}

.dark #turnHistoryList span {
	background-color: #040404;
}
.dark .active-player-you {
	background-color: #172e78;
}
.dark .active-player-opponent {
	background-color: #7c3227;
}
.dark #gameStatusReadout {
	color: #EFEFEF;
	background-color: #29292a;
}
.dark #gameBoard, .dark .game-over-screen-content {
	background-color: #121214;
}
.dark .boardSquare {
	color: #ffffffc4;
	background-color: #29292a;
	border-color: #00000010;
}
.dark .selected {
    border-color: #fff!important;
}
.dark .selectedright {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAArCAYAAAAUo/pwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RUFEMkIxQTJEMTcxMUVDQUVCMDg2MEY4MjA3NEQ4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RUFEMkIxQjJEMTcxMUVDQUVCMDg2MEY4MjA3NEQ4RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRFQUQyQjE4MkQxNzExRUNBRUIwODYwRjgyMDc0RDhGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRFQUQyQjE5MkQxNzExRUNBRUIwODYwRjgyMDc0RDhGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0ds+XwAAAWhJREFUeNrMmDFLA0EQhSfH/g1/UApLC39TQDBFQE5EFLWwESzSpLCxDPZiJ9glVUijcHlHbo/FO3LZ3ZndefBCquPL5t3szFBVVRP4BCZNHuFjQXvN4St4QwpUON/H8CN8DpvcYO6JufqBb+A3bWBWH3AJf2oDIyd/t/BKG1itLfwEP8N/msCs1vBMOn8hYFZfTf6W2sCs3uFr+FsbmFWdvQeuAl0w/sizpkCfchRozhP7X6AvY/InBeYW6GlI/qTBKLRBKCiNvBuEVCfm3SDkADuqQcgJdrBB0ADW2yBoAes0CNrA2uvNKANq31gtYJ2MaQDrvRVygh28R02mHA12HiZxjsrmrxscZlKBeXe30mDB84AUWPQExQ1WXyn38Gvsg7jAfuEXzinJMOVoyr3XMJE5uiChTZAJzJH47sJ45uiOEm17jgVLvh8bAgseWKXAokd8bjCvizYVGOsaiQNMZPEWq50AAwBNLBdbn5QIPQAAAABJRU5ErkJggg==) !important;
}
.dark .selecteddown {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAmCAYAAABdw2IeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRjJCQ0IxQTJEMTYxMUVDQkQwNkVEOTkxNjQyNDQ3QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjJCQ0IxQjJEMTYxMUVDQkQwNkVEOTkxNjQyNDQ3QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZGMkJDQjE4MkQxNjExRUNCRDA2RUQ5OTE2NDI0NDdDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGMkJDQjE5MkQxNjExRUNCRDA2RUQ5OTE2NDI0NDdDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AJxg9wAAAY9JREFUeNrMl7FqwzAQhh09a/tILaYdEmiGZkmHdujQrXT1liWTVm+hi8EYVB2cS+pa9km6k3RwiXGE+QjWp/s3xpiPqvy6sa2V/XgrHBT4NFwA7M72d6GgPfJVI+zF9nOhsDvk+4WFOtpuCwNtkauawg6268Jga+T6Bwv1abspBPSEPJULFuq+ENi7uZtTWF2AysD7ZwrsuAP7jKraun6cg71cuy1xvSxZSTnu51AZHEz7pQUu2Bwqe7DdhcCOKjslAoWN/b62SIUoRKBIylyDPaNKJOuLehgpwpqtsMrIBxEFtkWlSNTBxzqKuG4vMPOuqioUtkO1JFVVKGyFatGMqvLeuEpqMxCeM0jDNqiamGpC52YV+K8kURUHbIvKiYrVqWBDVdbHjp6hsF1AfP8Tq1PCjjOv9nh1jrEKiYEdPDZLHaIqTliqhmZjdQ5YiorYZmIO2KX47ozVuWBd8b3nznFcsHPxPVpVUrDT+A7fr9yTOifsdXx/8p1VKbUxxnA/89b2o0QGkoAVqx8BBgA0+XBGS5Q4mwAAAABJRU5ErkJggg==) !important;
}
.dark .boardSquareBonusCenter { background-color: #4e423a; }	.dark.highContrast .boardSquareBonusCenter { background-color: #7a604d; } 
.dark .boardSquareBonus2L { background-color: #393f50; } 		.dark.highContrast .boardSquareBonus2L { background-color: #50608b; }
.dark .boardSquareBonus3L { background-color: #384d8b; } 		.dark.highContrast .boardSquareBonus3L { background-color: #3e60c5; }
.dark .boardSquareBonus2W { background-color: #4e423a; } 		.dark.highContrast .boardSquareBonus2W { background-color: #7a604d; }
.dark .boardSquareBonus3W { background-color: #6c392f; } 		.dark.highContrast .boardSquareBonus3W { background-color: #a34e3d; }
.dark .boardSquareBonusLetterCenter:after { content: "★" }
.dark .boardSquareBonusLetter2L:after { content: "2L" }
.dark .boardSquareBonusLetter3L:after { content: "3L" }
.dark .boardSquareBonusLetter2W:after { content: "2W" }
.dark .boardSquareBonusLetter3W:after { content: "3W" }
.dark .boardSquareBonusLetterCenter[data-occupied]:not([data-occupied=""]):after { content: "" } /*Hide bonuses if occupied.*/
.dark .boardSquareBonusLetter2L[data-occupied]:not([data-occupied=""]):after { content: "" }
.dark .boardSquareBonusLetter3L[data-occupied]:not([data-occupied=""]):after { content: "" }
.dark .boardSquareBonusLetter2W[data-occupied]:not([data-occupied=""]):after { content: "" }
.dark .boardSquareBonusLetter3W[data-occupied]:not([data-occupied=""]):after { content: "" }
.dark .boardSquareOccupied {
	background-color: #0d0d0e;
	z-index: 51;
}
.dark .highContrast .boardSquareOccupied {
    background-color: #F0EC67;
}
.dark .boardSquareOccupiedLetter {
    color: #EFEFEF;
/*	filter: invert(1);*/
}
.dark .boardSquareOccupied .scoreMarker {
    color: #EFEFEF;
}
.dark .boardLastPlayedTile { color: #ffffff !important; background-color: #4F29A3 !important; } .dark.highContrast .boardLastPlayedTile { color: #ffffff !important; background-color: #4F17A3 !important; } 
.dark #tileRackStatusReadout {
	color: white;
	background-color: black;
}
.dark .rackSquare {
	background-color: #212122;
}
.dark .rackTile, .dark .swapTile, .dark .remainingTile-tile {
	color: #EFEFEF;
	background-color: #4b4b4e;
}
.dark .rackTileOnBoard, .dark .highContrast .rackTileOnBoard {
	border-color: #0000002b;
    background-color: #0450bb;
	background-color: #1b2bbf;
}
.dark .rackTileOnBoardValidWord, .dark .highContrast .rackTileOnBoardValidWord  {
	border-color: #0000002b;
    background-color: #028b2f;
}

body.dark.highContrast {
	background-color: #040404;
}
.dark.highContrast .btn-blue {
    background-color: #28439d;
}
.dark.highContrast .btn-red {
    background-color: #9d3f31;
}
.dark.highContrast #safeAreaWrapper .btn-orange {
    background-color: #744728;
    border: none;
}

.dark.highContrast .boardSquare {
	border-color: #00000050;
}
.dark.highContrast .boardSquareOccupied {
	border-color: #ffffff10;
	background-color: #000;
}
.dark.highContrast #safeAreaWrapper .btn, .dark.highContrast #safeAreaWrapper .linkButton {
	outline-color: #ff3939;
/*    filter: invert(0) drop-shadow(0px 1px 5px rgba(0,0,0,0.75));*/
}
.dark #btnSpeak {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}
.dark #btnShuffle {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}
.dark #btnRecall {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}
.dark #btnActions {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}
.dark #btnSwap {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}
.dark #btnSettings {filter: invert(1) drop-shadow(0px 1px 5px rgba(0,0,0,0.75))!important; background-color: #d6d6d5; outline-color: #00c6c6!important;}

.dark .add-friend-form input {
	color: inherit;
	border-color: #747677;
	background-color: #000;
}
.dark .modalScrollableInterior {
	background-color: black;
}

/*---------------------------VOICE---------------------------*/
#voiceTextContainer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}

#instruction {
  user-select: initial !important;
  -webkit-user-select: initial !important;
  -moz-user-select: initial !important;
}

/*---------------------------DEBUG---------------------------*/
/* To see a visual printout of all relevant aria labels,
use debugAriaLabels() in the console*/
.debug .boardSquareOccupiedLetter {
    color: #00000033;
	position: absolute;
}
.debug .boardSquare:after {
    content: attr(aria-label);
    font-size: 17px;
    color: black;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.debug .boardSquare:hover:after {
    font-size: 28px;
    overflow: visible;
    width: 300px;
    height: 300px;
    z-index: 99999;
    font-weight: 900;
    text-shadow: 2px 2px white, -2px -2px white;
    position: fixed;
    left: 400px;
    top: 0px;
    background-color: #FFFFFFBB;
    border: 5px solid black;
}
.debug .rackTile {
    filter: opacity(0.75);
}