#roomManager {
	top: 0;
	position: absolute;
	width: 100vw;
	width: calc(var(--vw) * 100);
	height: 100vh;
	height: calc(var(--vh) * 100);
	max-height: 100vh;
	max-height: calc(var(--vh) * 100);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	background-color: #26a221;
	text-align: center;
}

#roomManagerMainContent {
	max-width: calc(100% - var(--sar) - var(--sal));
	margin-left: var(--sal);

	/*Ad padding for AdMob*/
	padding-bottom: var(--minimumBottomMargin);

	/*roomManagerMainContent is the space that AdSense ads won't occupy. Ensure the minimum height is tall enough to push AdSense ads to the bottom of the screen. */
	min-height: calc(100vh - 310px);
	min-height: calc(calc(var(--vh) * 100) - 310px);
}


@media screen {
	/*On small devices, shrink the logo and shift left to create room for the log in panel*/

	@media (max-width: 900px) {
		#heading {
			font-size: 0.85em;
			margin-right: 20px; 
			min-height: 50px;
		}
	}

	@media (max-width: 750px) {
		#heading {
			font-size: 0.7em;
			margin-right: 90px; 
			min-height: 50px;
		}

		.logInSpan span {
			font-size: 18px;
		}
	}

	@media (max-width: 550px) {
		#heading {
			font-size: 0.6em;
			margin-right: 110px; 
			min-height: 50px;
		}

		.logInSpan span {
			font-size: 16px;
		}
	}
}


#mahjongHeading, #fourFriendsHeading {
	font-size: 2.5em;
	color: #ffbd17;
	display: inline-block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#fourFriendsHeading {
	font-size: 2.1em;
	margin-top: 0.3em;
	vertical-align: top;
	margin-left: 0.5em;
	font-style: italic;
	color: #ffe100;
}

#roomManager #roomIdInput, #roomManager #nicknameInput{
	width: 100%;
	box-sizing: border-box;
	background-color: #f3f3ff;
	max-width: 90%;
	font-size: 2em;
	padding: 5px;
}

#roomManager #supportInfo {
	font-size: 1.5em;
}

#roomManager #nicknameInput {
	margin-top: 1vh;
	margin-top: calc(var(--vh) * 1);
}

#roomManager #joinOrCreateRoom {
	margin-top: 1vh;
	margin-top: calc(var(--vh) * 1);
	position: relative;
}


#roomManager #copyrightNotice {
	text-align: center;
	width: 100vw;
	width: calc(var(--vw) * 100);
	color: #ffbd17;
}

#connectionStatus {
	font-size: 1.7em;
}

#savedGameDiv {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 6px 15px;
	background: #fed601;
	margin: auto;
	margin-top: 5px;
	border-radius: 0.6em;
}

#roomManager #roomInfo {
	margin: 0;
}

#roomManager #playerView {
	margin-bottom: 5px;
}

#roomManager .playerViewRow {
	text-align: left;
	padding: 1px 2vw;
	padding: 1px calc(var(--vw) * 2);
	border-bottom: 2px solid #444;
}

#roomManager .playerViewRow:first-child {
	border-top: 2px solid #444;
}

#roomManager .playerViewNameSpan {
	font-size: 1.7em;
	width: 40%;
	display: inline-block;
}

#roomManager .editableName.playerViewNameSpan:hover {
	margin-left: -4px;
	border: 2px solid #0097f3;
}

#roomManager .editableName.playerViewNameSpan::after {
	content: url(../assets/edit.svg);
	display: inline-block;
    width: 0.6em;
	margin-left: 8px;
}

#roomManager .playerViewVoiceChoice {
	font-size: 1em;
	width: 25%;
	display: inline-block;
	text-align: center;
}

.volumeIconSpan {
	width: 5%;
	display: inline-block;
	text-align: center;
}

.volumeIcon {
	max-height: 1em;
	height: 100%;
	max-width: 100%;
}



#roomManager .playerViewVoiceChoice select {
	font-size: 1em;
	max-width: 100%;
}

#roomManager .playerViewIdSpan {
	font-size: 1em;
}

#roomManager .playerViewCard {
	width: 30%;
	display: inline-block;
	font-size: 1.5em;
	text-align: center;
}

#roomManager .playerViewKickButton {
	background: linear-gradient(45deg, #f16262, #eeb972);
	font-size: 0.95em;
	cursor: pointer;
	border-radius: 0.4em;
}

.roomManagerButton {
	font-size: 1.5em;
	border-radius: 1em;
	padding: 10px;
}

.settingsMenuDiv {
	text-align: left;
}

#tutorialLink {
	font-size: 1.7em;
	line-height: 60px;
}

#documentationLink {
	font-size: 1.3;
	line-height: 30px;
}

#inviteYourFriendsElem {
	background-color: #2fcb29;
	border-radius: 10px;
	margin-top: 6px;
	padding: 6px;
	padding-top: 0;
	overflow: hidden;
}

#QRImageElement {
	margin-left: 20px;
	margin-top: calc(1em - 6px);
}

#inviteYourFriendsDiv {
	display: inline-block;
	margin-top: 0.5;
	vertical-align: top;
}

.joinRoomLinkElem {
	font-size: 1.5em;
	margin: 0;
}

#screenRotationAlert {
	font-size: 2em;
	background-color: white;
}

#externalAppStoresDiv * {
	height: 70px;
	max-width: 90%;
	margin: 16px;
	margin-right: 8px;
	margin-left: 8px;
}

#gameSettingsElem {
	background-color: #2fcb29;
	border-radius: 10px;
	padding: 5px;
	margin: 5px 0px;
}

#gameSettingsElem select, #gameSettingsElem label {
	font-size: 1.25em;
}

.guaranteedHandsTableContainer {
	max-height: 30vh;
	max-height: calc(var(--vh) * 30);
	overflow: scroll;
}

.guaranteedHandsTable {
	background-color: white;
	width: 100%;
	border-collapse: collapse;
}

.guaranteedHandsTable tr:first-child {
	background-color: #ffff74;
}

.guaranteedHandsTable tr td {
	text-align: left;
	border-top: 1px solid black;
	font-size: 1.5em;
	height: 1.7em;
	cursor: pointer;
}

.guaranteedHandsTable span {
	padding: 5px;
}

.guaranteedHandsTable tr td:first-child {
	padding-left: 10px;
}

.guaranteedHands0 {
	background-color: lightblue;
}

.guaranteedHands1 {
	background-color: lightgreen;
}

.guaranteedHands2 {
	background-color: #f9dba3;
}

.saveRow {
	background-color: white;
}





input.switch + label {
	vertical-align: middle;
}


/*Below styles of input.switch and input.switch + label are Copyright (c) 2021 by oobleck (https://codepen.io/oobleck/pen/MYjdbx), with modifications included*/
input.switch {
  display: none;
}
input.switch + label {
  font-size: 1em;
  line-height: 1;
  width: 4rem;
  height: 2rem;
  background-color: #ddd;
  background-image: none;
  border-radius: 2rem;
  padding: 0.1666666667rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2) inset;
  font-family: inherit;
}

input.switch.animate + label {
	transition: all 0.1s ease-in-out;
}

input.switch + label:before {
  /* Label */
  text-transform: uppercase;
  color: #b7b7b7;
  content: attr(data-off-label);
  display: block;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 2rem;
  position: absolute;
  right: 0.2166666667rem;
  margin: 0.2166666667rem;
  top: 0;
  text-align: center;
  min-width: 1.6666666667rem;
  overflow: hidden;
  transition: all 0.1s ease-in-out;
}
input.switch + label:after {
  /* Slider */
  content: "";
  position: absolute;
  left: 0.1666666667rem;
  background-color: #f7f7f7;
  box-shadow: none;
  border-radius: 2rem;
  height: 1.6666666667rem;
  width: 1.6666666667rem;
  top: 0.33333333333rem;
  transition: all 0.1s ease-in-out;
}
input.switch:checked + label {
  background-color: lightblue;
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.2));
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3) inset;
}
input.switch:checked + label:before {
  color: #fff;
  content: attr(data-on-label);
  right: auto;
  left: 0.2166666667rem;
}
input.switch:checked + label:after {
  left: 2.1666666667rem;
  background-color: #f7f7f7;
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
}

input.switch + label {
  background-color: #ee6562;
}
input.switch + label:before {
  color: #fff !important;
}
input.switch:checked + label {
  background-color: #297bfe; /*BCE954*/
}
input.switch:checked + label:before {
  color: #fff !important;
}


.modeSelectorDiv {
	width: 100%;
	margin: auto;
	max-width: 550px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 8px;
	font-size: 1.4em;
	border: 2px solid;
	/* background: linear-gradient(108deg, #ffa163 16%, #ff9dda 32%, #a3a3ff 49%, #000000 50%, #ffe304 51%, #ffcb00, #ffafa0); */
	margin-bottom: 8px;
}

.modeSelectSpan {
	width: 49%;
	cursor: pointer;
	text-align: center;
}

.modeSelectorDiv {
	background: linear-gradient(108deg, #fbb587 16%, #f5b7de 32%, #c3c3ef 49%, #000000 49.5%, #000000 50%, #ffe304aa 51%, #ffcb00aa, #ffafa0aa);
	border-image: linear-gradient(108deg, black 49%, #26a221 51%) 1;
}

.modeSelectorDiv.secondSelected {
	background: linear-gradient(108deg, #fbb587aa 16%, #f5b7deaa 32%, #c3c3efaa 49%, #000000 50%, #000000 50.5%, #ffe304 51%, #ffcb00, #ffafa0);
	border-image: linear-gradient(108deg, #26a221 49%,  black 51%) 1;
}


.singlePlayerModeSelectButton, .multiplayerModeSelectButton	{
	box-sizing: border-box;
	display: inline-block;
	font-size: 1.8em;
	padding: 10px 0px;
	width: 49%;
	border-radius: 8px;
	background: linear-gradient(45deg, #ffd79a, #fff1dd, #ffdbd8);
	cursor: pointer;
}

.singlePlayerModeSelectButton {
	width: 33%;
}

.multiplayerModeSelectButton {
	width: 45%;
}

.modeSelectButton.selected {
	border-bottom: none;
	opacity: 1;
	background-color: #9deae8;
	border: 2px solid black;
}

.gameModeDiv {
	width: 90%;
	max-width: 600px;
	margin: auto;
}


.storeSpan {
	position: absolute;
	top: 0;
	left: 0;
	top: env(safe-area-inset-top);
	left: env(safe-area-inset-left);
	height: 32px;
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
	height: 32px;
    background: #00000022;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
}


.storeIcon {
	max-width: 24px;
	margin-left: 3px;
}

.logInSpan {
	position: absolute;
	top: 0;
	top: env(safe-area-inset-top);
	right: 61px;
	right: calc(61px + env(safe-area-inset-right));
	height: 32px;
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background: #00000022;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
}

.logInIcon {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
	margin-left: 3px;
}

.genericButton {
	font-size: 1.8em;
	padding: 4px 12px;
	margin: 0px 4px;
}

.newsButton {
	position: relative;
}

.newsButton span {
	display: flex;
	align-items: center;
	justify-self: center;
}

.newsButtonIcon {
	height: 1em;
	margin-right: 10px;
}

.notificationBadge {
	position: absolute;
	top: -8px;
	right: -8px;
	padding: 3px 8px;
	border-radius: 50%;
	background: #f05e5e;
	color: white;
	font-size: 0.5em;
}

.genericButtonRowContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 0.8em;
}

.adDiv {
	display: inline-block;
}
#topHand {
	position: absolute;
	top: 0;
	left: calc(10.52vh + var(--sal));
	left: calc(calc(var(--vh) * 10.52) + var(--sal));
	max-height: 12vh;
	max-height: calc(var(--vh) * 12);
	width: calc(100vw - 21.04vh - var(--sal) - var(--sar));
	width: calc(calc(var(--vw) * 100) - calc(var(--vh) * 21.04) - var(--sal) - var(--sar));
	background-color: #5a3e32;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

#leftHand {
	position: absolute;
	padding-left: var(--sal);
	left: 0;
	top: 0;
	max-width: 10.52vh;
	max-width: calc(var(--vh) * 10.52);
	width: 10.52vh;
	width: calc(var(--vh) * 10.52);
	height: 100vh;
	height: calc(var(--vh) * 100);
	background-color: #4c3329;
}

#rightHand {
	position: absolute;
	padding-right: var(--sar);
	right: 0;
	top: 0;
	max-width:10.52vh;
	max-width:calc(var(--vh) * 10.52);
	width: 10.52vh;
	width: calc(var(--vh) * 10.52);
	height: 100vh;
	height: calc(var(--vh) * 100);
	background-color: #4c3329;
}

@keyframes goToCorrectLocation {
  0% {
	  transform: translateY(-55vh);
	  transform: translateY(calc(var(--vh) * -55));
	}
  100% {
	  transform: none;
  }
}

.animateTile {
	animation: goToCorrectLocation 6s cubic-bezier(0.05, 1.14, 0, 0.95) forwards;
}

/*We would use bottom, however Safari treats bottom as the bottom of the viewport, and Safari has the viewport != visible area bug.
This means that something using bottom is off the page - hence we must use top. */
#userHand, #userHandExposed {
	position: absolute;
	left: calc(10.52vh + var(--sal));
	left: calc(calc(var(--vh) * 10.52) + var(--sal));
	height: 12vh;
	height: calc(var(--vh) * 12);
	max-height: 12vh;
	max-height: calc(var(--vh) * 12);
	width: calc(100vw - 21.04vh - var(--sal) - var(--sar));
	width: calc(calc(var(--vw) * 100) - calc(var(--vh) * 21.04) - var(--sal) - var(--sar));
	background-color: #7d4b37;
}

#gameBoard #userHand {
	z-index: 1; /*Allows tiles in userHand to show up above tiles in handForExposed - needed for indicating last tile drawn. */
	top: 85vh;
	top: calc(var(--vh) * 85);
	height: 15vh;
	height: calc(var(--vh) * 15);
	max-height: 15vh;
	max-height: calc(var(--vh) * 15);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

#gameBoard #userHandExposed {
	bottom: 15vh;
	bottom: calc(var(--vh) * 15);
	background-color: #a04622;
	display: flex;
	align-items: flex-start;
	justify-content: left;
}

.infoTextHandForExposed {
	color: white;
	font-size: 1em;
	margin: 4px;
	text-align: center;
	width: 100%;
}

#gameBoard #tilePlacemat {
	position: absolute;
	bottom: 0;
	background-color: #FFFFFF00;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	left: 22%;
	bottom: 1%;
}

#gameBoard.chinese #tilePlacemat img {
	max-width: calc(100% / 4);
}

#tilePlacemat img {
	max-height: calc(var(--gameBoardCenterHeight) * 0.2);
	max-width: calc(100% / 6);
	box-sizing: border-box;

}

#tilePlacemat img.notFilled {
	border: 2px dashed black;
}


#leftHandContainer, #rightHandContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: center;
}

#topHand img, #userHandExposed img {
	min-height: 0;
	min-width: 0;
	max-height: 12vh;
	max-height: calc(var(--vh) * 12);
}

#leftHand img {
	transform: rotate(270deg);
}

#rightHand img {
	transform: rotate(90deg);
}

#leftHand img, #rightHand img {
	max-width: 9.52vh;
	max-width: calc(var(--vh) * 9.52);
	max-height: 10.5vh;
	max-height: calc(var(--vh) * 10.5);
}

#leftHand img:not(:first-child), #rightHand img:not(:first-child) {
	margin-top: calc(-4vh - 0.6vh * var(--negativeMarginMultiplier)); /*It seems like the elements height does not reflect the fact that it has been transformed. Negative margin to remove some of this. */
	margin-top: calc(calc(var(--vh) * -4) - calc(var(--vh) * 0.6) * var(--negativeMarginMultiplier)); /*It seems like the elements height does not reflect the fact that it has been transformed. Negative margin to remove some of this. */
}

#userHand img {
	min-height: 0;
	min-width: 0;
	max-height: 15vh;
	max-height: calc(var(--vh) * 15);
}

#userHand img:not(:first-child), #userHandExposed img:not(:first-child), #topHand img:not(:first-child) {
	margin-left: calc(calc(100vw - 19.04vh) / 17 / -10 * var(--negativeMarginMultiplier)); /*Negative margin of 10%. Allows even more tiles to fit. */
	margin-left: calc(calc(calc(var(--vw) * 100) - calc(var(--vh) * 19.04)) / 17 / -10 * var(--negativeMarginMultiplier)); /*Negative margin of 10%. Allows even more tiles to fit. */
}

#tilePlacemat img {
	margin-right: 2%;
	border-radius: 10%;
}

@keyframes discardSlotPulse {
  0% {
    background-color: #3D003F99;
  }
  50% {
    background-color: #FF4136B0;
  }
  100% {
	background-color: #3D003F99;
  }
}

#tilePlacemat img.pending {
	animation: discardSlotPulse 4s infinite;
}




/* calc(min(var(--gameBoardCenterHeight), var(--gameBoardCenterWidth)) * 0.2) */

#compass {
	position: absolute;
	right: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
	top: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
	width: calc(var(--gameBoardCenterSmallerDimension) * 0.2);
	height: calc(var(--gameBoardCenterSmallerDimension) * 0.2);
}



#bottomNametag, #leftNametag, #rightNametag, #topNametag {
	position: absolute;
	margin: 0;
	text-align: center;
	font-size: 2.2vmin;

}

#bottomNametag {
	right: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
	width: calc(var(--gameBoardCenterSmallerDimension) * 0.2);
	top: calc(var(--gameBoardCenterSmallerDimension) * 0.26);
}

#leftNametag {
	height: calc(var(--gameBoardCenterSmallerDimension) * 0.2);
	right: calc(var(--gameBoardCenterSmallerDimension) * 0.26);
	top: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
	writing-mode: vertical-rl;
	transform: rotate(180deg)
}

#topNametag {
	right: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
	width: calc(var(--gameBoardCenterSmallerDimension) * 0.2);;
	top: calc(var(--gameBoardCenterSmallerDimension) * 0.01);
}

#rightNametag {
	height: calc(var(--gameBoardCenterSmallerDimension) * 0.2);
	writing-mode: vertical-rl;
	right: calc(var(--gameBoardCenterSmallerDimension) * 0.01);
	top: calc(var(--gameBoardCenterSmallerDimension) * 0.06);
}

#wallAndDiscardContainer {
	max-width: 70%;
	padding-top: 1%;
	padding-left: 1%;
}

.tileGridPopupView, .wall {
	display: flex;
	flex-wrap: wrap;
}

.tileGridPopupView {
	justify-content: center;
}

.wall {
	align-items: center; /*For the number prefix*/
	margin-bottom: 1%;
}

.wall, .wall img {
	transition: all 1.6s linear;
	margin-left: 0;
}

.wall img {
	width: calc(1.6vw + 1.6vmin - 1.3vmax);
	width: calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax);
}

.wall p {
	display: inline-block;
	margin: 0;
	width: calc(2 * calc(1.6vw + 1.6vmin - 1.3vmax));
	width: calc(2 * calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax));
	text-align: center;
	font-size: calc(1.1 * calc(1.6vw + 1.6vmin - 1.3vmax));
	font-size: calc(1.1 * calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax));
}

.wall.smallView {
	position: absolute;
	top: 63%;
	right: 1%;
	width: 25%;
	margin: 0;
}

/* Overlap the wall tiles in smallView. */
/*1n + 3 because we want to ignore both the number element, and the first tile 
(since we don't want the negative margin to cause the tile to overlap the number of tiles remaining)*/
.wall.smallView img:nth-child(1n+3) {
	margin-left: calc(5px + -1 * calc(1.6vw + 1.6vmin - 1.3vmax));
	margin-left: calc(5px + -1 * calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax));
}

.wall.smallView img:nth-child(1n+5) {
	margin-left: calc(4px + -1 * calc(1.6vw + 1.6vmin - 1.3vmax));
	margin-left: calc(4px + -1 * calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax));
}

.wall.smallView img:nth-child(1n+15) {
	margin-left: calc(3px + -1 * calc(1.6vw + 1.6vmin - 1.3vmax));
	margin-left: calc(3px + -1 * calc(calc(var(--vw) * 1.6) + 1.6vmin - 1.3vmax));
}


#discardPile {
	display: flex;
	flex-wrap: wrap;
}

#discardPile img {
	/*Max discard pile size is 100 tiles for American Mah Jongg. We'll allow four rows of tiles to show. 
	We can allocate about 60% of the space to tiles so the maximum height of any tile should be no more than 12%. */
	max-width: calc(100% / 25);
	max-height: calc(var(--gameBoardCenterHeight) * 0.12);
}

#fullscreenControls {
	position: absolute;
	right: 1%;
	bottom: 2%;
	max-height: 5%;
	max-width: 5%;
}

#syncButton {
	position: absolute;
	right: 1%;
	bottom: 8%;
	max-height: 5%;
	max-width: 5%;
}

#historyButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	right: 7%;
	bottom: 2%;
}



/* Make these from the left */
#gameBoard.chinese #proceedButton {
	width: 92%;
}

#gameBoard.chinese #proceedButton.shrinkForClaimButton {
	width: 77%;
} 


#proceedButton {
	position: absolute;
	bottom: 22%;
	left: 1%;
	width: 76%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
}

#gameBoard.american #proceedButton.shrinkForHintButton {
	width: 50%;
}

#gameBoard.chinese #hintButton {
	display: none;
}

.suggestedHandsTable {
	background: #fdfdfd;
	color: black;
	display: inline-block;
	width: 100%;
	max-height: 40vh;
	max-height: calc(var(--vh) * 40);
	overflow: scroll;
}

.suggestedHandsTable img {
	width: calc(100% / 14);
	max-width: 64px; /*Don't let it get too huge. */
}

.suggestedHandsItem {
	border-bottom: 1px solid black;
}

#hintButton {
	position: absolute;
	bottom: 22%;
	left: 52%;
	width: 24%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
}

@keyframes animateScale {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
	transform: scaleY(1.2) scaleX(0.9);
  }
  100% {
	transform: scaleY(1) scaleX(1);
  }
}

.scaleAnimation {
	animation: animateScale 3s linear 6s infinite;
}

#endGameButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	bottom: 2%;
	left: 1%;
}

#goMahjongButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	bottom: 12%;
	right: 7%;
}

#gameBoard.chinese #goMahjongButton {
	bottom: 12%;
}

#proceedButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#newGameNoLobbyButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	bottom: 12%;
    left: 1%;
}

#claimButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	bottom: 22%;
    right: 7%;
}

#swapJokerButton {
	position: absolute;
	width: 14%;
	height: 8%;
	border-radius: 250000px;
	font-size: 2.1vh;
	font-size: calc(var(--vh) * 2.1);
	bottom: 22%;
	right: 7%;
}

#gameBoard.chinese #swapJokerButton {
	display: none;
}

#instructionBubble {
	pointer-events: none;
	position: absolute;
	right: 1%;
	top: 32%;
	background-color: #fdffcb;
	font-size: calc(1.1vmin + 0.70vmax);
	padding: 0 1%;
	border-radius: 10px;
	width: 25%;
	height: 30%;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.swapJokerOptionMenuButton {
	font-size: inherit;
	width: 60%;
	margin-left: 20%;
	display: block;
}

.historyMenuButtonContainer {
	max-height: 35vh;
	max-height: calc(var(--vh) * 35);
	overflow: scroll;
}

.historyMenuButtonContainer button {
	font-size: inherit;
	width: 100%;
}

#gameBoard {
	position: absolute;
	top: 0;
	width: 100vw;
	width: calc(var(--vw) * 100);
	height: 100vh;
	height: calc(var(--vh) * 100);
	background-color: #c3f6c3;
}

.gameBoardCenterContainer {
	/*Area not used up by the hands. */
	position: relative;
	margin-left: calc(10.52vh + var(--sal));
	margin-left: calc(calc(var(--vh) * 10.52) + var(--sal));
	margin-top: 12vh;
	margin-top: calc(var(--vh) * 12);
	
	height: calc(100% - 39vh);
	height: calc(100% - calc(var(--vh) * 39));
	width: calc(100% - calc(2 * (10.52vh + var(--sal))));
	width: calc(100% - calc(2 * (calc(var(--vh) * 10.52) + var(--sal))));
}

.gameboardVideoContainer {
	position: absolute;
	top: 48%;
	left: 0%;

	padding: 1%;
	width: 72%;
	height: 22%;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.gameboardVideoItem {
	height: 100%;
	width: 25%;
	position: relative;
}

.gameboardVideoItem > video {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	display: block;
}

.videoControlsOverlay {
	opacity: 0;
	z-index: 1;
	display: flex;
    align-items: center;
    justify-content: space-evenly;
	position: absolute;
    left: 0px;
    top: 0px;
	right: 0;
	bottom: 0;
    background-color: #FFFFFFAA;
}

.videoControlsOverlay:hover {
	opacity: 1;
}

.videoControlsButton {
	width: 40%;
	max-height: 90%;
}

.panel {
	max-width: calc(100% - var(--sar) - var(--sal));
	padding-left: var(--sal);
	padding-right: var(--sar);
	z-index: 1000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	background: lightgoldenrodyellow;
	font-size: 1em;
	text-align: center;
	overflow-y: auto;
}

.fitToBoardArea {
	top: 12vh;
	top: calc(var(--vh) * 12);
	bottom: 27vh;
	bottom: calc(var(--vh) * 27);
	left: 10.5vh;
	left: calc(var(--vh) * 10.5);
	right: 10.5vh;
	right: calc(var(--vh) * 10.5);
}

.panel p {
	margin: 0.25em;
}

.panelHeader {
	font-size: 2em;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.panelClose {
	float: right;
	cursor: pointer;
	font-size: 1.25em;
	margin-right: 0.5em;
}

.tableContainer {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

.tableContainer table {
	width: 100%;
	border-spacing: 1px;
}

.tableContainer td {
	border: 1px solid black;
}

.itemTableContainer {
	font-size: 2em;
}

.itemTableContainer img {
	max-width: 8vw;
	max-width: calc(var(--vw) * 8);
	max-height: calc(calc(100vh - 3em - 24px - 1.5em) / 5);
	max-height: calc(calc(calc(var(--vh) * 100) - 3em - 24px - 1.5em) / 5);
}

.notMahjongList {
	text-align: left;
}
#errorPopupCover {
	position: fixed;
	bottom: 0;
	width: 100vw;
	width: calc(var(--vw) * 100);
	height: 100vh;
	height: calc(var(--vh) * 100);
	background-color: #00000040;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#errorPopup {
	max-width: 72vw;
	max-width: calc(var(--vw) * 72);
	background-color: #368a36;
	border: 5px solid #ffbd17;
	border-radius: 1vh;
	border-radius: calc(var(--vh) * 1);
	text-align: center;
	padding: 8px;
	max-height: 100vh;
	max-height: calc(var(--vh) * 100);
	overflow-y: auto;
	overscroll-behavior: contain;
}

#errorPopup .headerText {
	font-size: 1.15em;
	color: #ffe100;
	margin-block-start: 0;
	margin-block-end: 0;
}

#errorPopup #messageText {
	font-size: 1.7em;
	color: white;
	margin-bottom: 0;
	margin-block-start: 0.5em;
}

#errorPopup > *:last-child {
	padding-bottom: var(--minimumBottomMargin);
	padding-bottom: calc(20px + var(--minimumBottomMargin));
}

#errorPopup #messageText input, #errorPopup #messageText select {
	font-size: 0.75em;
}


#notificationBar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99; /*Below errorPopupCover*/
	background-color: #fafa70;
	text-align: center;
	font-size: 1em;
	min-height: 50px;
}

@keyframes fadeInAndOut {
  0% {
	  opacity: 1;
  }
  50% {
	  opacity: 1;
  }
  75% {
	  opacity: 0.8;
  }
  100% {
	  opacity: 0;
  }
}

.blocklessAlertCover {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 98;
	opacity: 0;
	pointer-events: none;
}

.blocklessAlertCover p {
	text-align: center;
	font-size: 3vw;
	font-size: calc(var(--vw) * 3);
	margin:0;
	
	/*Attempt to force the alert into the area where the discard pile would be - above the videos and to the left of the instructionBubble*/
	margin-right: 20vw;
	margin-right: calc(var(--vw) * 20);
	margin-bottom: 20vh;
	margin-bottom: calc(var(--vh) * 20);
}

.everythingContainer {
    display: flex;
    height: calc(100% - 3em);
}

.listingDiv {
    width: 30%;
    display: inline-block;
    font-size: 1.6em;
    overflow-y: auto;
    background-color: lightgoldenrodyellow;
    padding-bottom: var(--minimumBottomMargin);
}

.listingDiv p {
    margin: 0;
}

.listItemPublishedTime {
    font-size: 0.5em;
}

.listingItem {
    padding: 10px;
    border: 1px solid #888888;
    cursor: pointer;
}

.articleFrame {
    width: 70%;
    height: 100%;
    height: calc(100% - var(--minimumBottomMargin));
    border: none;
    border-top: 1px solid #888888;
    border-left: 1px solid #888888;
}

.storeTopDiv {
	font-size: 0.7em;
	color: #ffe100;
}

.storePopupBottomDiv {
	padding-bottom: var(--minimumBottomMargin);
	padding-bottom: calc(20px + var(--minimumBottomMargin));
}

.storeContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.noLongerForSaleSubscriptionManagementDiv {
	font-size: 1.3em;
	margin: 1em;
}

.storeCategory {
	/*Really tiny width to ensure flex-grow is triggered making all equal sizes*/
	width: 10px;
	flex-grow: 1;
	font-size: 1.7em;
	text-align: left;
	padding: 16px;
	box-sizing: border-box;
	margin-top: 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.storeCategory:not(:first-of-type) {
	border-left: 1px solid black;
}

.storeCategoryTitle {
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	/*Override a general style on popups*/
	margin: 0 !important;
}

.storeCategoryOwnedSubscriptionDetails {
	text-align: center;
}

.storeCategoryDescription {
	font-size: 0.8em;
	text-align: center;
}

.storeCategoryDescriptionContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5em;
}


.storePlan {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20px;
	border: 1px solid black;
	border-radius: 16px;
	margin: 6px;
	background: white;
}

.storePlan:hover {
	filter: brightness(0.95);
	cursor: pointer;
}

.storePlanPrice {
	float: right;
}

.restorePurchasesButton {
	padding: 8px 20px;
	font-size: 1.3em;
	border-radius: 1em;
	margin: 8px;
}




.accountManagerScreenOverlay {
    display: none;
    position: absolute;
    top: 0px;
    /*right value based on .loginSpan in roomManager*/
    right: -61px;
    right: calc(-61px - env(safe-area-inset-left));
    background-color: #000000bb;
    height: 100vh;
    height: calc(var(--vh) * 100);
    width: 100vw;
    width: calc(var(--vw) * 100);
}

.accountDiv {
    display: none;
    font-size: 1rem;
    text-align: left;
    position: absolute;
    right: 0px;
    top:46px;
    background-color: #eee;
    min-width: 250px;
    padding: 12px 16px;
    z-index: 15000;
    border:1px solid black;
}


.logInSpan.expanded .accountDiv, .logInSpan.expanded .accountManagerScreenOverlay {
    display: block;
}

.loginEntry {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.passwordVisibilityToggle {
    width: 1em;
    margin-left: -30px;
    vertical-align: middle;
}

.accountDiv input, .accountDiv button {
    font-size: 1em;
}

.accountDiv button {
    padding: 4px;
    margin-bottom: 4px;
}
.cardTrackingContainer {
    display: flex;
    flex-wrap: wrap;
	padding-bottom: var(--minimumBottomMargin);
	padding-bottom: calc(20px + var(--minimumBottomMargin));
}


.achievementBlockItem {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin: 2px 2px;
    width: calc(50% - 4px);
    box-sizing: border-box;
    border: 1px solid black;
    background-color: #222222;
}

.achievementContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-height: 4em;
    max-height: 4em;
    min-width: 4em;
    max-width: 4em;
    font-size: 1.5em;
    border-radius: 50%;
    border: double 8px transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.logGameWithCardButton {
    justify-content: center;
}

.achievementBlockItemTitle {
    font-size: 1.2em;
    margin: 0.3em;
    margin-bottom: 0.6em;
}

.detailsContainer {
    width: 100%;
}

.handsListDiv {
    display: flex;
    flex-wrap: wrap;
}

.handCompletedDiv {
    margin: 4px;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    padding: 4px;
    margin: 4px;
    border-radius: 4px;
    border: 1px solid #555555;
}

.sectionEditLockContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sectionEditLockButton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    color: white;
    border: 1px solid #555555;
    padding: 8px;
    border-radius: 4px
}

.editLockIcon {
    max-width: 1em;
    max-height: 1em;
    filter: invert(1);
}

.gameTypeSelectorBar {
    display: flex;
    align-items: center;;
    /* position: absolute;
    bottom: 0; */
    position: sticky;
    top: 0px;
    width: 100%;
    height: 50px;
    z-index: 10
}


.gameTypeSelectorBar p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 100%;
    margin: 0;
    border: 1px solid #555555;
    box-sizing: border-box;
    cursor: pointer;
    background-color: black;
}

.gameTypeSelectorBar p.selectedGameType {
    background-color: #3d3d79;
}

.gameTypeSelectorBar p.backToCardsButton {
    background-color: #cccccc;
    color: black;
}

.redBlueGradient {
	background: linear-gradient(45deg, #ffa163, #ff9dda, #a3a3ff);
}

.yellowBlueGradient {
	background: linear-gradient(45deg, #ffff39, #5bff5b, #97b9ed);
}

.lightYellowBlueGradient {
	background: linear-gradient(45deg, #ffffd9, #ddffdd, #d1e2fc)
}

.yellowSalmonGradient {
	background: linear-gradient(45deg, #ffe304, #ffcb00, #ffafa0);
}

.purpleBlueGradient {
	background: linear-gradient(45deg, #e2aff9, #bbc4ee, #d4fffc);
}

.orangeGreenGradient {
	background: linear-gradient(45deg, #ffce73, yellow, lightgreen);
}

.redWhiteGradient {
    background: linear-gradient(45deg, #ffa4a4, #ffe7b2);
}
/*
From https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css
 */

.shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
.shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
.shepherd-title{color:rgba(0,0,0,.75);display:flex;flex:1 0 auto;font-size:1rem;font-weight:400;margin:0;padding:0}
.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;justify-content:flex-end;line-height:2em;padding:.75rem .75rem 0}.shepherd-has-title .shepherd-content .shepherd-header{background:#e6e6e6;padding:1em}
.shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
.shepherd-content{border-radius:5px;outline:none;padding:0}
.shepherd-element{background:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:calc(var(--vw) * 100);z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:calc(var(--vh) * 100);opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}










:root {
	/*
	While viewport relative units work fine on desktop, some mobile browsers will not show the entire viewport, due to the url bar.
	See https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/

	To counteract this, we will use a CSS variable that will be dynamically changed by JavaScript.
	In order to convert vh to use the relative variable, use the following two find and replace regexp. (note: make sure that every single declaration ends in a semicolon)

	Find and replace (-)?([\d.]+)vh with calc(var(--vh) * $1$2)
	*/
	--vh: 1vh;
	--vw: 1vw;

	/*Complex math doesn't work in CSS, as one of two sides in division and multiplication
	must be a number - dividing 100vw by 500px to get a ratio is not allowed
	must be a number - dividing calc(var(--vw) * 100) by 500px to get a ratio is not allowed

	Therefore, we need to make these enviroment variables accessible to JavaScript*/
	--sat: env(safe-area-inset-top);
	--sar: env(safe-area-inset-right);
	--sab: env(safe-area-inset-bottom);
	--sal: env(safe-area-inset-left);

	/*Vh and Vh except inside safe area*/
	--safeAreaVw: calc(calc(100vw - var(--sal) - var(--sar)) / 100);
	--safeAreaVh: calc(calc(100vh - var(--sat) - var(--sab)) / 100);

	--negativeMarginMultiplier: 0; /*This is adjusted for tile grouping*/

	--minimumBottomMargin: 0px; /*This will be set when we have bottom banner ads to ensure there is suffecient padding for things to scroll. */



	--gameBoardCenterWidth: calc(calc(100 * var(--safeAreaVw)) - calc(2 * (10.52vh + var(--sal))));
	--gameBoardCenterHeight: calc(calc(100 * var(--safeAreaVh)) - 39vh);
	--gameBoardCenterSmallerDimension: min(var(--gameBoardCenterHeight), var(--gameBoardCenterWidth));

}

html, body {
	width: 100vw;
	width: calc(var(--vw) * 100);
	height: 100vh;
	height: calc(var(--vh) * 100);
	margin: 0;
	padding: 0;
	background-color: black;
	font-family: sans-serif;
}

button, select {
    color: black; /*iOS seems to use some darkish-blue color as the default now*/
}

body {
	/*The notch isn't very large, so when we have a notch, we'll scale the entire screen. */
	/*We need to translate slightly further, as the scale reduces the size from both sides evenly. */
	/*Translate is processed AFTER scale, so we must multiply the translation to counteract*/
}

.globalSettingsIcon {
	z-index: 500; /*Some things, like the score summary window and store, need to go over this still. */
	position: absolute;
	width: 32px;

	top: 0px;
	right: 0px;

	/* Increase size of clickable area. */
	padding-top: calc(env(safe-area-inset-top) + 8px);
	padding-right: calc(env(safe-area-inset-right) + 8px);
	padding-left: 12px;
	padding-bottom: 12px;
}



.idfaPopupMessage ul {
	margin: 0px;
	text-align: left;
}

.idfaPopupMessage > ul {
	margin-top: 10px;
}

.idfaPopupDismissButton {
	font-size: 1rem;
	border: none;
	border-radius: 10px;
	padding: 10px 15px;
	margin-top: 8px;
}