/****************************************
  ==== RESETS
****************************************/

html,body,div,canvas { margin: 0; padding: 0; }
::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/
@font-face { font-family: Avenir; src: url('/wp-content/themes/rummikub2026/assets/css/img/fonts/AvenirNextCondensed-Medium.ttf'); } 

html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; }

body {
	background-image: url("/wp-content/themes/rummikub2026/assets/css/img/background.png"),url("/wp-content/themes/rummikub2026/assets/css/img/lowresbackground.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#game {
	margin-top: 10vh;
	width: 100%;
	min-height: 700px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: -40px;
}

#gameContainer {
	position:relative;
	width: 900px;
	height: 506px;
	margin-top: -50px;
	box-shadow: 5px 10px 20px #040c20,-5px 10px 20px #040c20;
}

#unity-canvas {
	width: 900px;
	height: 506px;
	background: url('/wp-content/themes/rummikub2026/assets/js/Build_3_9_16/WebGL.jpg') center / cover;
}

#overlayContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000bb;
	z-index: 5;
}

#kinkajooLogo {
	height: 100px;
	width: 185px;
	position: absolute;
	bottom: 6px;
	right: 12px;
	border: none;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('/wp-content/themes/rummikub2026/assets/css/img/kinkajoo_logo_blue.png');
}

#copyrightText {
	position: absolute;
	bottom: 20px;
	left: 30px;
	text-align: left;
	font-size: 0.8em;
}

.textObject {
	color : #fff;
	font-family: Avenir, sans-serif;
	text-align: center;
	font-size: 1.3em;
	user-select: none;
}

.popup {
	height:440px;
	width:800px;
	background: url("/wp-content/themes/rummikub2026/assets/css/img/popup.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.popup::after {
	content: url('/wp-content/themes/rummikub2026/assets/css/img/popup.png');
	display: none;
}

.popup > p {
	text-align:center;
	font-size: 26px;
	font-family: Avenir, sans-serif;
	color: #fff;
	padding: 0;
}

.popupTitle {
	margin: 0px 0px 30px 0px;
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translate(-50%, 0%);
}

#paypalPopupProcessingText {
	visibility: hidden;
	margin: 10px 0px 50px 0px;
}

#paypalButtonContainer {
	padding: 0 100px 0 100px;
}

.popupCloseButton {
	position: absolute;
	right: 40px;
	top: 40px;
	background: url('/wp-content/themes/rummikub2026/assets/css/img/close_button.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
}

.loadingText {
	height: 43px;
	width: 138px;
	text-align: center;
	font-size: 36px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.ellipsisText {
	height: 43px;
	width: 40px;
	position: absolute;
	text-align: left;
	font-size: 36px;
	right: -40px;
	top: 0px;
}

.loadingSpinner {
	height: 100px;
	width: 100px;
	background: url('/wp-content/themes/rummikub2026/assets/css/img/spinner.png') center / cover;
}

#tipsContainer {
	display: flex;
	align-content: center;
	flex-direction: column;
	justify-content: center;
	top: 65%;
	width: 100%;
}

#tipsContainer > p {
	text-align: center;
	font-size: 1.3em;
}
.popupButton {
	width: 263px;
	height: 175px;
	border: none;
	cursor: pointer;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	padding: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	color: white;
}

.confirmButton {
	background-image: url('/wp-content/themes/rummikub2026/assets/css/img/green_button_up.png');
}

.confirmButton:active {
	background-image: url('/wp-content/themes/rummikub2026/assets/css/img/green_button_down.png');
}

.confirmButton::before {
	content: url('/wp-content/themes/rummikub2026/assets/css/img/green_button_up.png');
	display: none;
}

.cancelButton::before {
	content: url('/wp-content/themes/rummikub2026/assets/css/img/red_button_up.png');
	display: none;
}

.cancelButton {
	background-image: url('/wp-content/themes/rummikub2026/assets/css/img/red_button_up.png');
}
.cancelButton:active {
	background-image: url('/wp-content/themes/rummikub2026/assets/css/img/red_button_down.png');
}

.confirmButton::after {
	content: url('/wp-content/themes/rummikub2026/assets/css/img/green_button_down.png');
	display: none;
}

.cancelButton::after {
	content: url('/wp-content/themes/rummikub2026/assets/css/img/red_button_down.png');
	display: none;
}

.buttonContainer {
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: row;
	gap: 50px;
}

.progressBarEmpty {
	position:absolute;
	bottom:0px;
	height:5px;
	width:100%;
	background: url('/wp-content/themes/rummikub2026/assets/css/img/progressBarEmpty.png') no-repeat;
}

.progressBarFull {
	background: url('/wp-content/themes/rummikub2026/assets/css/img/progressBarFull.png') no-repeat left / cover;
	float: left;
	width: 0%; 
	height: 100%;
	display: inline-block;
}

.fullScreen{
	background-image: url("/wp-content/themes/rummikub2026/assets/css/img/fullscreen_button.png");
	background-repeat: no-repeat;
	position: absolute;
	width: 40px;
	height: 40px;
	background-size:contain;
	bottom: -48px;
	right: 0px;
	cursor:pointer;
}

.contact{
	background-image: url("/wp-content/themes/rummikub2026/assets/css/img/contact_button.png");
	background-repeat: no-repeat;
	position: absolute;
	width: 40px;
	height: 40px;
	background-size:contain;
	bottom: -48px;
	right: 48px;
	cursor:pointer;
}

.bottomContainer {
	position: absolute;
	width: 100%;
}

.linkContainer {
	position: absolute;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	gap: 50px;
	color: white;
	padding: 0;
	margin: 15px 0 0 0;
}

.bottomLink {
	text-decoration: none;
	color: inherit;
	user-select: none;
}

.bottomLink:visited {
	text-decoration: none;
	color: inherit;
}

.bottomLink:hover {
	text-decoration: none;
	color: inherit;
}

.tooltiptext {
	font-family: Arial, Verdana;
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.5s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #000 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.tooltip {
	border: 1px solid #4444aa;
	border-radius: 10px;
}

.centered_element {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.spinning {
	-webkit-animation:spin 1.5s linear infinite;
	-moz-animation:spin 1.5s linear infinite;
	animation:spin 1.5s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }