#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;
}

#roomManager a {
	color: #fffde1;
}

#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;
	margin: 4px;
}

.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;
}

.copyLinkButton {
	margin-left: 5px;
}

#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;
}

#gameSettingsElem > div {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 10px;
	margin: 4px auto;
	width: fit-content;
}

#gameSettingsElem label {
	text-align: right;
	justify-self: end;
}

#gameSettingsElem select {
	justify-self: start;
}

.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: 0 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;
	user-select: none;
	padding: 12px 0px;
}

.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: calc(33.33% - 8px);
	margin: 4px;
}

.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: 118px;
	right: calc(118px + 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: 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);
	position: relative;
	z-index: 1;
}

#userHand.dragSourceVisible::before {
	content: "";
	position: absolute;
	left: var(--dragSourceLeftPx, 0px);
	top: var(--dragSourceTopPx, 0px);
	width: var(--dragSourceWidthPx, 0px);
	height: var(--dragSourceHeightPx, 0px);
	background-color: #9aa0a61a;
	border: 2px dashed #9aa0a6;
	border-radius: 0.8vh;
	border-radius: calc(var(--vh) * 0.8);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 3500;
}

#userHand img.dragSourceTile {
	opacity: 0.9;
	filter: saturate(0);
}

#userHand.dropIndicatorVisible::after {
	content: "";
	position: absolute;
	left: var(--dropIndicatorLeftPx, 0px);
	top: calc(var(--dropIndicatorTopPx, 0px) - 5px);
	width: 4px;
	height: calc(var(--dropIndicatorHeightPx, 0px) + 5px);
	transform: translateX(-50%);
	background-color: #65ffff;
	border-radius: 2px;
	z-index: 5000;
	pointer-events: none;
	box-shadow: 0 0 6px #65ffff99;
}

#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. */
}

#userHand img {
	cursor: grab;
}

#userHand img:active {
	cursor: grabbing;
}

html.tileDragInProgress, html.tileDragInProgress * {
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
}

#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);
}

#gameBoard.american #compass {
	display: none;
}



#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 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.wall {
	position: relative;
	display: inline-block;
	margin-bottom: 1%;
	cursor: pointer;
}

.wall img {
	height: calc(var(--gameBoardCenterHeight) * 0.18);
	display: block;
}

.wallCounter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: calc(var(--gameBoardCenterHeight) * 0.08);
	font-weight: bold;
	color: white;
	text-shadow: 0 0 4px black, 0 0 4px black;
	pointer-events: none;
}


#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: 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;
	opacity: 0.8;
}

.suggestedHandsItem:hover {
	opacity: 1;
}

.suggestedHandSelected {
	background-color: #d0e8ff;
	border-left: 3px solid #0070cc;
	opacity: 1;
}

.suggestedHandsTopRow {
	display: block;
}

.suggestedHandsTopRow > p {
	margin: 0 0 0.75rem 0;
}

#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);
}

.fitToBoardArea .panelHeader {
	font-size: 1em;
}

.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.25em;
	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 .floatingLabel {
    white-space: nowrap;
}

.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;
	filter: brightness(0) invert(1);

	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;
}

.globalHelpIcon {
	z-index: 500;
	position: absolute;
	top: 0px;
	right: calc(56px + env(safe-area-inset-right));
	padding-top: calc(env(safe-area-inset-top) + 8px);
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: white;
	cursor: pointer;
}



.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;
}