html, body {
	height: 100%;
}

body {
	font-family: 'Conv_bpg_arial';
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}

body[disable-scroll] {
	overflow-y: hidden !important;
}

body[disable-scroll] .content {
	overflow-y: hidden !important;
}

* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

input, textarea {
	-webkit-tap-highlight-color: #000000;
	-webkit-touch-callout: default;

	-webkit-user-select: auto;
	-moz-user-select: auto;
	user-select: auto;
}

*:focus {
	outline: 0;
}

a {
	text-decoration: none;
}

.round {
	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.shadow {
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
	box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
}

.text-shadow {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	-webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.invisible {
	width: 1px;
	height: 1px;
	border: none;
	overflow: hidden;
	visibility: hidden;
}

.logged-only:not([user-logged]) {
	display: none;
}

button {
	font-family: 'Conv_bpg_arial';
}

@font-face {
	font-family: BPGMrgvlovaniCaps; src:url('../fonts/bpg_mrgvlovani_caps_2010.ttf');
}

@font-face {
	font-family: 'Conv_bpg_arial';
	src: url('../fonts/bpg_arial.eot');
	src: url('../fonts/bpg_arial.woff') format('woff'), url('../fonts/bpg_arial.ttf') format('truetype'), url('../fonts/bpg_arial.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* keyframes */
@-webkit-keyframes spinner {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spinner {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes status-online {
	0% { -webkit-box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
	70%, 100% { -webkit-box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
}

@keyframes status-online {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
}
/* keyframes */

/* online / playing indicator on avatars (friends, ratings, history, notifications) */
.games-history-item:nth-child(3n+2),
.friend-item:nth-child(3n+2),
.users-ratings-item:nth-child(3n+2),
.notifications-item:nth-child(3n+2) {
	--status-delay: -0.8s;
}

.games-history-item:nth-child(3n),
.friend-item:nth-child(3n),
.users-ratings-item:nth-child(3n),
.notifications-item:nth-child(3n) {
	--status-delay: -1.6s;
}

@media (prefers-reduced-motion: reduce) {
	.games-history-item-photo::before,
	.games-history-item-photo::after,
	.friend-item-photo::before,
	.friend-item-photo::after,
	.users-ratings-item-photo::before,
	.users-ratings-item-photo::after,
	.notifications-item-icon::before,
	.notifications-item-icon::after {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* common */
.content {
	height: 100%;
}

.middle {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	text-align: center;

	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.lang-icon {
	position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	z-index: +1;

	-webkit-border-radius: 5px;
    border-radius: 5px;
}

.lang-icon img {
    vertical-align: middle;
    width: 28px;

	-webkit-border-radius: 4px;
    border-radius: 4px;
}

.top {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
}

.logo {
	display: inline-block;
	width: 64px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	background-image: url(../images/logo.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.growthAnimate {
	-webkit-animation: growthAnimate .5s 1;
	animation: growthAnimate .5s 1;
}

@-webkit-keyframes growthAnimate {
	0% {
    	font-size: 20px;
    }

    50% {
    	font-size: 30px;
    }

	100% {
    	font-size: 25px;
    }
}

@keyframes growthAnimate {
    0% {
		transform: scale(1);
    }

    50% {
    	transform: scale(1.5);
    }

	100% {
    	transform: scale(1);
    }
}
/* common */

/* checkbox */
.app-checkbox {
	display: none;
}

.app-checkbox-ui {
	cursor: pointer;
}

.app-checkbox:checked + .app-checkbox-ui .app-checkbox-ui-box {
	background-color: #0dcc67;
}

.app-checkbox:checked + .app-checkbox-ui .app-checkbox-ui-box:after {
	position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -4px;
    display: block;
    content: "";
    width: 8px;
    height: 16px;
    box-sizing: border-box;
    transform: rotate(45deg);
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.app-checkbox-ui-box {
	position: relative;
	border: 2px solid #0dcc67;
	width: 20px;
	height: 20px;
	text-align: center;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.app-checkbox-ui-label {
	font-family: Conv_bpg_arial;
	font-size: 16px;
	font-weight: normal;
	line-height: 20px;
	color: #7d7d7d;
}

.app-checkbox-ui-label a {
	font-family: Conv_bpg_arial;
	font-size: 16px;
	font-weight: normal;
	color: #585858;
}

.app-checkbox-ui[item-style="red"] .app-checkbox-ui-box {
	border: 2px solid #f93e2b;
}

.app-checkbox:checked + .app-checkbox-ui[item-style="red"] .app-checkbox-ui-box {
	background-color: #f93e2b;
}
/* checkbox */

/* toast */
.toast {
	position: absolute;
	left: 0px;
    text-align: center;
	font-size: 18px;
    padding: 10px;
    padding-left: 16px;
	padding-right: 16px;
	margin-left: 8px;
	margin-right: 8px;
	visibility: hidden;
	z-index: 1000001;

    -webkit-border-radius: 16px;
    border-radius: 16px;
}

.toast[toast-style="default"] {
	background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

.toast[toast-style="light"] {
	background-color: rgba(255, 255, 255, 0.9);
	color: #2D2D2D;
	
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
	box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
}

.toast[toast-position="top"] {
	top: 20px;
}

.toast[toast-position="center"] {
	top: 50%;

	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.toast[toast-position="bottom"] {
	bottom: 20px;
}
/* toast */

/* preloader */
@keyframes preloader_blinker_frames {
	50% {
		opacity: 0.1;
	}
}

@-webkit-keyframes preloader_blinker_frames {
	50% {
		opacity: 0.1;
	}
}

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: +1;
}

.preloader[is-onTop="yes"] {
	z-index: 1000000000 !important;
}

.preloader[has-graphics="yes"] {
	background-color: rgba(0, 0, 0, 0.8);
	background-image: url(../images/preloader.svg);
	background-repeat: no-repeat;
	background-size: 64px 64px;
	background-position: center center;
}

.preloader[item-icon="update"] {
	background-image: url(../images/updating.svg);
}

.preloader-text {
	font-size: 17px;
	color: #ffffff;
	position: absolute;
	top: 50%;
	margin-top: 64px;
	width: 100%;
	text-align: center;

	-webkit-animation: preloader_blinker_frames 1s linear infinite;
	animation: preloader_blinker_frames 1s linear infinite;
	
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
/* preloader */

/* button / input /select */
.app-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;

	padding: 10px;
	width: 100%;
	outline: 0;
	box-shadow: none;
	border: 0;
	cursor: pointer;

	-webkit-border-radius: 5px;
    border-radius: 5px;

	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
	box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
}

.app-button {
	display: inline-block;
	width: 100%;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	border: none;
	font-size: 17px;
	background-color: #0dcc67;
	color: #ffffff;
	cursor: pointer;
	
	-webkit-border-radius: 25px;
    border-radius: 25px;
}

.app-button[button-style="light"] {
	background-color: #e0e0e0 !important;
    color: #3a3a3a !important;;
}

.app-button:hover {
	opacity: 0.7;
}

.app-button-desc {
	width: 100%;
    font-size: 14px;
    margin-top: -40px;
    padding-top: 50px;
    padding-bottom: 8px;
    background-color: #e4e4e4;
	color: #484848;
	
    -webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.app-input {
	background-color: rgba(0, 0, 0, 0.1);
	width: calc(100% - 20px);
	padding: 10px;
	border: none;
	
	-webkit-border-radius: 5px;
    border-radius: 5px;
}
/* button / input */

/* icons */
.circle-icon {
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	background-repeat: no-repeat;
	background-position: center center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	vertical-align: middle;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.circle-icon:hover {
	opacity: 0.7;
}
/* icons */

/* main area */
.main-area {
	position: relative;
	width: 100%;
	height: 100%;
}
/* main area */

/* user */
.user-warning {
	background-color: #b2b2b21a;
    font-size: 15px;
    padding: 5px;
    margin-top: 5px;
	cursor: pointer;

	-webkit-border-radius: 5px;
    border-radius: 5px;
}

.user-container {
	text-align: center;
}

@media screen and (min-height: 768px) {
	.user-container {
		position: absolute;
		left: 0px;
		top: 50%;
		width: 100%;

		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
	}
}

.user-photo {
	margin-left: auto;
	margin-right: auto;
	width: 80px;
	height: 80px;
	background-color: #F0F0F0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
	box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
	
	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.user-photo[item-size="small"] {
	width: 56px !important;
	height: 56px !important;
}

.user-name {
	display: inline-block;
	margin-top: 16px;
	font-size: 18px;
}

.user-name-edit {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.3);
	background-image: url(../images/icon-edit.svg);
	background-size: 16px 16px;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-left: 8px;
	cursor: pointer;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.user-name-edit:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

.user-photo-upload {
	width: 40px;
	height: 40px;
	margin-left: 40px;
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(../images/icon-camera.svg);
	background-size: 28px 28px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.user-photo-upload[item-state="loading"] {
	background-image: url(../images/puff-dark.svg);
}

.user-photo-upload:hover {
	background-color: rgba(255, 255, 255, 0.9);
}
/* user */

/* play button */

/* neon border pulse */
@-webkit-keyframes play-neon-pulse {
	0%, 100% {
		-webkit-box-shadow: 0 0 4px rgba(76, 175, 80, 0.2);
		opacity: 0.5;
	}
	50% {
		-webkit-box-shadow: 0 0 8px rgba(76, 175, 80, 0.35);
		opacity: 0.8;
	}
}
@keyframes play-neon-pulse {
	0%, 100% {
		box-shadow: 0 0 4px rgba(76, 175, 80, 0.2);
		opacity: 0.5;
	}
	50% {
		box-shadow: 0 0 8px rgba(76, 175, 80, 0.35);
		opacity: 0.8;
	}
}

/* button glow breathing */
@-webkit-keyframes play-btn-glow {
	0%, 100% { -webkit-box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2), 0 0 12px rgba(76, 175, 80, 0.06); }
	50% { -webkit-box-shadow: 0 3px 14px rgba(76, 175, 80, 0.3), 0 0 20px rgba(76, 175, 80, 0.1); }
}
@keyframes play-btn-glow {
	0%, 100% { box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2), 0 0 12px rgba(76, 175, 80, 0.06); }
	50% { box-shadow: 0 3px 14px rgba(76, 175, 80, 0.3), 0 0 20px rgba(76, 175, 80, 0.1); }
}

/* shimmer sweep */
@-webkit-keyframes play-btn-streak {
	0%, 70%, 100% { left: -100%; }
	85% { left: 150%; }
}
@keyframes play-btn-streak {
	0%, 70%, 100% { left: -100%; }
	85% { left: 150%; }
}

/* --- wrapper --- */
.play-button-wrap {
	position: relative;
	display: inline-block;
	padding: 3px;

	-webkit-border-radius: 31px;
	border-radius: 31px;
}

/* neon border ring - static, pulsing glow */
.play-button-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid rgba(76, 175, 80, 0.6);
	pointer-events: none;

	-webkit-border-radius: 31px;
	border-radius: 31px;

	-webkit-animation: play-neon-pulse 3s ease-in-out infinite;
	animation: play-neon-pulse 3s ease-in-out infinite;
}

/* --- button --- */
.play-button {
	position: relative;
	background-color: #4caf50;
	background-image: url(../images/icon-joystick.svg);
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 30px 30px;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.5px;
	border: none;
	padding: 14px 10px;
	width: 270px;
	cursor: pointer;
	text-align: center;
	overflow: hidden;

	-webkit-border-radius: 28px;
	border-radius: 28px;

	-webkit-box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2), 0 0 12px rgba(76, 175, 80, 0.06);
	box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2), 0 0 12px rgba(76, 175, 80, 0.06);

	-webkit-animation: play-btn-glow 4s ease-in-out infinite;
	animation: play-btn-glow 4s ease-in-out infinite;

	-webkit-transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* shimmer streak */
.play-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	pointer-events: none;

	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);

	-webkit-animation: play-btn-streak 4s ease-in-out infinite;
	animation: play-btn-streak 4s ease-in-out infinite;
}

/* inner highlight */
.play-button::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 15%;
	right: 15%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	pointer-events: none;
}

.play-button:hover {
	background-color: #43a047;

	-webkit-transform: scale(1.03);
	transform: scale(1.03);

	-webkit-box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3), 0 0 24px rgba(76, 175, 80, 0.1);
	box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3), 0 0 24px rgba(76, 175, 80, 0.1);
}

.play-button:active {
	-webkit-transform: scale(0.97);
	transform: scale(0.97);

	-webkit-box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
	box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
}

/* play button */

/* progress */
.circle-progress {
	width: 100%;
	height: 100%;
}

.circle-progress svg {
	width: 100%;
	height: 100%;
}

.circle-progress svg circle {
	transform: rotate(-90deg);
	transform-origin: center;
	stroke: #ff0063;
	stroke-dasharray: 0, 100;
}

.circle-animation svg circle {
	animation-name: circle-animation;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;

	-webkit-animation-name: circle-animation;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}

@keyframes circle-animation {
	to {
		stroke-dasharray: 100, 100;
	}
}

@-webkit-keyframes circle-animation {
	to {
		stroke-dasharray: 100, 100;
	}
}

.user-info:not([user-i='0']) .circle-progress::before,
.user-info:not([user-i='0']) .circle-progress::after {
  	content: "";
  	position: absolute;
  	top: 0px;
  	left: 0px;
  	right: 0px;
  	bottom: 0px;

	-webkit-border-radius: 50%;
  	border-radius: 50%;
}

.user-info[user-action="yes"][user-i='1'] .circle-progress::before,
.user-info[user-action="yes"][user-i='2'] .circle-progress::before,
.user-info[user-action="yes"][user-i='3'] .circle-progress::before {
  	animation: user_ripple .5s linear 0.5s 1 forwards;
}


@keyframes user_ripple {
	0% {
		box-shadow: 0 0 0 .1rem rgba(255, 255, 255, 0.3);
	}

	100% {
		box-shadow: 0 0 0 8rem rgba(255, 255, 255, 0);
	}
}
/* progress */

/* coins history */
.coins-history-list {
	padding: 20px;
    padding-top: 0px;
    margin-top: 20px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.coins-history-item {
	margin-top: 16px;
}

.coins-history-item-coins {
	font-size: 24px;
}

.coins-history-item-note {
	font-weight: bold;
	font-size: 15px;
}

.coins-history-item-date {
	font-size: 16px;
	margin-top: 6px;
}

.coins-history-circle {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.coins-history-circle[item-id="1"] {
	border: 5px solid #4CAF50;
    color: #4caf50;
    font-weight: bold;
}


.coins-history-circle[item-id="2"] {
	border: 5px solid #ffa307;
    color: #ffa307;
    font-weight: bold;
}


.coins-history-circle[item-id="3"] {
	border: 5px solid #e81303;
    color: #e81303;
    font-weight: bold;
}

/* coins history */

/* games history */
.games-history-list {
	padding: 20px;
}

.games-history-item {
	margin-bottom: 16px;
	cursor: pointer;
}

.games-history-item[item-online="online"] .games-history-item-photo::before,
.games-history-item[item-online="playing"] .games-history-item-photo::before {
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 1;
    content: "";
    width: 12px;
    height: 12px;
    background: #25d366 linear-gradient(180deg, #4ff094, #1fbf5f);
    border: 2px solid #ffffff;

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: status-online 2.4s ease-out infinite;
    animation: status-online 2.4s ease-out infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.games-history-item[item-online="playing"] .games-history-item-photo::before {
    background: #f0c555 linear-gradient(180deg, #ffdc7c, #e7ae35);
    -webkit-animation: none;
    animation: none;
}

.games-history-item[item-online="playing"] .games-history-item-photo::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    pointer-events: none;
    background: conic-gradient(rgba(240, 197, 85, 0.14) 0deg, rgba(240, 197, 85, 0.14) 110deg, #f0c555 310deg, #fff3c4 350deg, rgba(240, 197, 85, 0.14) 351deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: spinner 2.2s linear infinite;
    animation: spinner 2.2s linear infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.games-history-item-photo {
	position: relative;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 56px;
	height: 56px;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.games-history-item-name {
	font-weight: bold;
	font-size: 15px;
}

.games-history-item-score {
	font-size: 16px;
}

/* games history */

/* game p2p */
.game-p2p-item {
	overflow: hidden;

	-webkit-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.game-p2p-header {
	padding: 6px 8px;
	font-size: 14px;
	color: #ffffff;
}

.game-p2p-item[item-type="friend"] {
	border: 1px solid rgba(37, 211, 102, 0.3);
}

.game-p2p-item[item-type="friend"] .game-p2p-header {
	background-color: #25d366;
}

.game-p2p-item[item-type="tournament"] {
	border: 1px solid rgba(23, 138, 228, 0.3);
}

.game-p2p-item[item-type="tournament"] .game-p2p-header {
	background-color: #178ae4;
}

.game-p2p-item[item-type="random"] {
	border: 1px solid rgba(253, 180, 45, 0.3);
}

.game-p2p-item[item-type="random"] .game-p2p-header {
	background-color: #fdb42d;
}
/* game p2p */

/* friends */
.friends-list {
	padding: 10px;
	overflow-x: hidden;
}

.friends-other {
	background-color: rgba(0, 0, 0, 0.05);
	font-size: 16px;
	padding: 15px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	color: #9c00b7;
	cursor: pointer;
}

.friends-other:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.friend-item {
	position: relative;
	padding: 12px;
}

.friend-item.clickable {
	cursor: pointer;

	-webkit-border-radius: 10px;
    border-radius: 10px;
}

.friend-item[item-online="online"] .friend-item-photo::before,
.friend-item[item-online="playing"] .friend-item-photo::before {
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 1;
    content: "";
    width: 12px;
    height: 12px;
    background: #25d366 linear-gradient(180deg, #4ff094, #1fbf5f);
    border: 2px solid #ffffff;

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: status-online 2.4s ease-out infinite;
    animation: status-online 2.4s ease-out infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.friend-item[item-online="playing"] .friend-item-photo::before {
    background: #f0c555 linear-gradient(180deg, #ffdc7c, #e7ae35);
    -webkit-animation: none;
    animation: none;
}

.friend-item[item-online="playing"] .friend-item-photo::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    pointer-events: none;
    background: conic-gradient(rgba(240, 197, 85, 0.14) 0deg, rgba(240, 197, 85, 0.14) 110deg, #f0c555 310deg, #fff3c4 350deg, rgba(240, 197, 85, 0.14) 351deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: spinner 2.2s linear infinite;
    animation: spinner 2.2s linear infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.friend-item[item-msg]::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	background-color: #ff0034;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.friend-item-play {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    font-size: 17px;
    background-color: #3f51b5;
    color: #ffffff;
	cursor: pointer;
	
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.friend-item-play:hover {
	opacity: 0.7;
}

.friend-item.clickable .friend-item-photo {
	cursor: pointer;
}

.friend-item-photo {
	position: relative;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 56px;
	height: 56px;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.friend-item-delete {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../images/icon-delete.svg);
	background-size: 24px 24px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	vertical-align: middle;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.friend-item-name {
	font-weight: bold;
	font-size: 17px;
}

.friend-item-message {
	font-size: 15px;
	color: #959595;
}

.friends-dialog {
	justify-content: end !important;
    align-items: end !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
}

.friends-dialog .big-dialog-inner {
	max-height: calc(100% - 100px) !important;
	margin-left: 10px !important;
    margin-right: 10px !important;

	-webkit-border-bottom-right-radius: 0px !important;
	-webkit-border-bottom-left-radius: 0px !important;
	-moz-border-radius-bottomright: 0px !important;
	-moz-border-radius-bottomleft: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
}
/* friends */

/* random */
.random-container {
	position: relative;
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.random-container[item-type="loading"] {
	background-image: url(../images/puff-dark.svg);
	background-repeat: no-repeat;
	background-size: 64px 64px;
	background-position: center center;
}

.random-container[item-type="connecting"] {
	background-image: url(../images/puff-dark.svg);
	background-repeat: no-repeat;
	background-size: 120px 120px;
	background-position: center center;
}

.random-item {
	position: absolute;
	top: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 64px;
	height: 64px;
	margin-top: -64px;
	border-radius: 50%;
	overflow: hidden;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
/* random */

/* fb group */
.fb-group-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-left: 16px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	background-image: url(../images/icon-fb.svg?v2);
}

.fb-group-tooltip {
	position: relative;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 16px;
	padding: 10px;
	vertical-align: middle;

	-webkit-border-radius: 8px;
    border-radius: 8px;
}

.fb-group-tooltip::after {
	content: "";
    position: absolute;
    top: 8px;
    right: 0%;
    margin-right: -24px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.6);
}
/* fb group */

/* users ratings */
.users-ratings {
	width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.users-ratings-title {
	padding-top: 20px;
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 17px;
	color: #ffffff;
}

.users-ratings[item-style="dark"] .users-ratings-item-name {
	color: #585858;
}

.users-ratings-item {
	margin-bottom: 10px;
	cursor: pointer;
	text-align: left;
}

.big-dialog .users-ratings-item[item-user-online="online"] .users-ratings-item-photo::before,
.big-dialog .users-ratings-item[item-user-online="playing"] .users-ratings-item-photo::before {
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 1;
    content: "";
    width: 12px;
    height: 12px;
    background: #25d366 linear-gradient(180deg, #4ff094, #1fbf5f);
    border: 2px solid #ffffff;

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: status-online 2.4s ease-out infinite;
    animation: status-online 2.4s ease-out infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.big-dialog .users-ratings-item[item-user-online="playing"] .users-ratings-item-photo::before {
    background: #f0c555 linear-gradient(180deg, #ffdc7c, #e7ae35);
    -webkit-animation: none;
    animation: none;
}

.big-dialog .users-ratings-item[item-user-online="playing"] .users-ratings-item-photo::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    pointer-events: none;
    background: conic-gradient(rgba(240, 197, 85, 0.14) 0deg, rgba(240, 197, 85, 0.14) 110deg, #f0c555 310deg, #fff3c4 350deg, rgba(240, 197, 85, 0.14) 351deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: spinner 2.2s linear infinite;
    animation: spinner 2.2s linear infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.users-ratings-item-photo {
	position: relative;
	display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 40px;
	height: 40px;
	
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.users-ratings-item-name {
	font-weight: bold;
	font-size: 15px;
	color: #ffffff;
}

.users-ratings-item-wins {
	margin-top: 2px;
	font-size: 14px;
	color: #4caf50;
}

.users-ratings-item-status {
	display: none;
}

.users-ratings-switch {
	cursor: pointer;
}

.users-ratings[item-style="light"] .users-ratings-switch {
	color: #ffffff;
}

.users-ratings-switch[item-selected="yes"] {
	padding: 2px;
    padding-bottom: 5px;
    color: #2196f3 !important;
    border-bottom: 2px solid #2d9bf3;
}
/* users ratings */

/* user stickers */
.user-sticker {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 40px 40px;
	background-position: center center;
	vertical-align: middle;

	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
}

.user-sticker:hover {
	width: 48px;
	height: 48px;
	background-size: 48px 48px;
}
/* user stickers */

/* user rating */

/* --- profile dialog shell --- */
.profile-dialog .big-dialog-inner {
	width: 320px;
	max-width: 96%;
	background-color: #ffffff;

	-webkit-border-radius: 14px;
	border-radius: 14px;

	-webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.profile-dialog .big-dialog-content {
	background-color: #fafafa;
}

.profile-dialog .big-dialog-footer {
	background-color: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-dialog .big-dialog-button[button-style="light"] {
	background-color: #f0f0f0 !important;
	color: #444444 !important;
}

.profile-dialog .profile-photo {
	-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* --- status badge --- */
.user-status {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 40px 40px;
	background-position: center center;
	vertical-align: middle;
}

.user-status[item-size="small"] {
	width: 24px;
	height: 32px;
	background-size: 32px 32px;
}

/* --- likes pill --- */
.user-likes {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 18px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	width: 140px;
	padding: 6px 20px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.04);

	-webkit-border-radius: 20px;
	border-radius: 20px;

	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
}

.user-likes img {
	height: 28px;
	vertical-align: middle;
}

.user-likes span {
	margin-left: 6px;
	font-weight: bold;
	color: #333;
}

.user-likes table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.user-likes table td {
	width: 50%;
	text-align: center;
}

/* --- action icons --- */
.user-actions {
	width: 260px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 22px;
}

.user-actions table {
	width: 100%;
}

.user-actions table td {
	width: 25%;
	text-align: center;
}

.user-actions-icon {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #f2f3f5;
	background-size: 20px;
	cursor: pointer;

	-webkit-border-radius: 50%;
	border-radius: 50%;

	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.user-actions-icon:hover {
	background-color: #e8e9ec;

	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);

	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-actions-icon:active {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.user-actions-icon[item-id="add-friend"] {
	background-image: url(../images/icon-add-friend.svg);
	background-size: 24px;
}

.user-actions-icon[item-id="is-friend"] {
	background-image: url(../images/icon-friendship.svg);
	background-size: 24px;
}

.user-actions-icon[item-id="message"] {
	background-image: url(../images/icon-message.svg);
}

.user-actions-icon[item-id="report"] {
	background-image: url(../images/icon-report.svg);
}

.user-actions-icon[item-id="send-coins"] {
	background-image: url(../images/icon-profile-send-coins.svg);
}

/* --- ratings section --- */
.user-ratings {
	width: 270px;
	margin-left: auto;
	margin-right: auto;
}

/* --- rating tabs (pill style) --- */
.user-rating-switch {
	display: inline-block;
	cursor: pointer;
	padding: 5px 8px;
	font-size: 15px;
	color: #666;
	background-color: transparent;

	-webkit-border-radius: 16px;
	border-radius: 16px;

	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.user-rating-switch:hover {
	background-color: rgba(33, 150, 243, 0.06);
	color: #2196f3;
}

.user-rating-switch[item-selected="yes"] {
	padding: 5px 8px;
	color: #ffffff;
	background-color: #2196f3;
	border-bottom: none;

	-webkit-box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
	box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* user rating */

/* user menu */
.user-menu-profile {
	cursor: pointer;
}

.user-menu-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 72px;
	z-index: +1;

	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
}

.user-menu-container[is-open="yes"] {
	background-color: rgba(0, 0, 0, 0.6);
	height: 100%;
	
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.12);
}

.user-menu-container[is-open="yes"] .user-menu-content {
	display: block;
	opacity: 1;
}

.user-menu {
	position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: +1;
	padding-top: 24px;
	padding-bottom: 24px;
}

.user-menu-item {
	margin-top: 20px;
	cursor: pointer;
}

.user-menu-item-photo {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: center center;
	vertical-align: middle;
}

.user-menu-item-name {
	display: inline-block;
	margin-left: 12px;
	font-size: 18px;
	vertical-align: middle;
}

.user-menu-content {
	display: none;
	position: absolute;
    top: 0px;
	left: 0px;
	width: 100%;
	opacity: 0;
	background-color: rgba(255, 255, 255, 0.9);
	padding-top: 92px;
	padding-bottom: 20px;
	padding-left: 20px;

	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
}

.user-menu-icon {
	width: 30px;
	cursor: pointer;
	vertical-align: middle;
}

.user-menu-icon:after, 
.user-menu-icon:before, 
.user-menu-icon div {
	display: block;
	background-color: #4caf50;
	content: '';
	height: 4px;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.user-menu-icon:after {
	margin-top: 6px;
}

.user-menu-icon:before {
	margin-bottom: 6px;
}

.user-menu-container[is-open="yes"] .user-menu-icon:before {
	-webkit-transform: translateY(10px) rotate(135deg);
	transform: translateY(10px) rotate(135deg);
}

.user-menu-container[is-open="yes"] .user-menu-icon:after {
	-webkit-transform: translateY(-10px) rotate(-135deg);
	transform: translateY(-10px) rotate(-135deg);
}

.user-menu-container[is-open="yes"] .user-menu-icon div {
	-webkit-transform: scale(0);
	transform: scale(0);
}
/* user menu */

/* edit profile */
.edit-item {
	margin-bottom: 30px;
}

.edit-item-title {
	font-size: 18px;
	padding-bottom: 10px;
}

.edit-item-title img {
	width: 20px;
	margin-right: 5px;
	vertical-align: middle;
}

/* edit profile */

/* settings */
.settings-item {
	margin-bottom: 30px;
}

.settings-item-title {
	font-size: 18px;
	padding-bottom: 10px;
}

.settings-item-title img {
	width: 20px;
	margin-right: 5px;
	vertical-align: middle;
}

.settings-bg-item {
	display: inline-block;
	width: 64px;
	height: 64px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	opacity: 0.8;
	border: 5px solid #ffffff;
	cursor: pointer;

	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.settings-bg-item:hover {
	opacity: 1;
}

.settings-bg-item[item-selected="yes"] {
	border: 5px solid #E91E63;
	opacity: 1 !important;
}

.settings-card-item {
	display: inline-block;
	width: 72px;
	height: 96px;
	background-repeat: no-repeat;
	background-size: 90% 90%;
	background-position: center center;
	border: 2px solid transparent;
	text-align: center;
	vertical-align: top;
	cursor: pointer;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.settings-card-item:hover {
	border: 2px solid rgba(0, 0, 0, 0.2);
}

.settings-card-item[item-selected="yes"] {
	border: 2px solid #008eff;
}

/* settings */

/* coins */
@-webkit-keyframes coins_send {
	from {
    	background-color: #ffdf00;
    }

    to {
    	background-color: #ff9d00;
    }
}

@keyframes coins_send {
    from {
    	background-color: #ffdf00;
    }

    to {
    	background-color: #ff9d00;
    }
}

.coins-send {
	margin-left: 12px;
	width: 20px;
	vertical-align: middle;
	padding: 5px;
	background-color: #ffdf00;
	cursor: pointer;

	-webkit-animation: coins_send 1s infinite alternate;
    animation: coins_send 1s infinite alternate;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.coins-send:hover {
	opacity: 0.6;
}

.coins-counter {
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
}

.coins-counter img[item-id="coin-icon"] {
	width: 24px;
	margin-right: 4px;
	vertical-align: middle;
}

.coins-counter span[item-id="coin-count"] {
	margin-left: 2px;
}

.coins-counter span[item-id="coin-count"][item-type="positive"] {
	color: #02af53;
}

.coins-counter span[item-id="coin-count"][item-type="negative"] {
	color: #ff0b0b;
}

.coin-flake {
	position: absolute;
	top: -100px;
	left: 0%;
	background-image: url(../images/coin.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	width: 48px;
	height: 48px;
	z-index: +1;
}

/* coins */



/* play coins */
.play-coins {
	font-size: 15px;
    font-weight: bold;
    padding: 12px;
    background-color: rgb(164 148 23 / 10%);
    margin-bottom: 10px;
	cursor: pointer;

	-webkit-border-radius: 8px;
    border-radius: 8px;
}

.play-coins:hover {
	background-color: rgb(164 148 23 / 15%);
}
/* play coins */

/* play icons */
.play-icon {
    background-size: 24px 24px;
    background-position: 10px center;
    background-repeat: no-repeat;
}

.play-icon[item-icon="tournament"] {
	background-image: url(../images/icon-play-tournament.svg);
	background-color: #3f51b5;
}

.play-icon[item-icon="friend"] {
	background-image: url(../images/icon-play-friend.svg);
}

.play-icon[item-icon="random"] {
	background-image: url(../images/icon-play-random.svg);
	background-size: 20px 20px;
}

.play-icon[item-icon="girlvsboy"] {
	background-image: url(../images/icon-play-girlvsboy.svg?2);
	background-size: 20px 20px;
}

.play-icon[item-icon="freecoins"] {
	background-color: #9d09f3;
	background-image: url(../images/icon-promo.png?2);
	background-size: 24px 24px;

	box-shadow: 2px 1px 13px -5px rgba(157,9,243,0.7);
	-webkit-box-shadow: 2px 1px 13px -5px rgba(157,9,243,0.7);
	-moz-box-shadow: 2px 1px 13px -5px rgba(157,9,243,0.7);
}
/* play icons */

/* assets icons */
.assets-icon {
    background-size: 24px 24px;
    background-position: 10px center;
    background-repeat: no-repeat;
}

.assets-icon[item-icon="coins"] {
	background-image: url(../images/coin.png);
	background-color: #ee6400;
}

.assets-icon[item-icon="boxes"] {
	background-image: url(../images/icon-box.svg?v3);
	background-color: #3f55b5;
}
/* assets icons */

/* sound control */
.sound-control {
	position: absolute;
	left: 15px;
    top: 90px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
	background-color: rgba(255, 255, 255, 0.1);
    background-image: url(../images/icon-sound.svg?v7);
    z-index: +1;
    cursor: pointer;

	-webkit-border-radius: 50%;
    border-radius: 50%;
}

.sound-control[item-game="yes"] {
	background-color: rgba(255, 255, 255, 0.2) !important;
	left: 5px !important;
    top: 70px !important;
}

.sound-control[item-disabled="yes"] {
	background-image: url(../images/icon-sound-disabled.svg?v7);
}

/* sound control */

/* boxes */
.boxes-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url(../images/icon-box.svg?v3);
    cursor: pointer;

    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.boxes-icon[icon-position="top"] {
	position: absolute;
    left: 15px;
    top: 165px;
    z-index: +1;
}

.boxes-icon[icon-position="top"]::before {
	content: 'NEW';
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -16px;
	font-size: 8px;
	font-weight: bold;
	letter-spacing: 0.5px;
	color: #fff;
	background: linear-gradient(180deg, #ff6b00, #e04000);
	padding: 2px 6px;
	z-index: 2;
	white-space: nowrap;

	-webkit-border-radius: 6px;
	border-radius: 6px;

	box-shadow: 0 2px 6px rgba(255, 80, 0, 0.5);

	-webkit-animation: newBadgePulse 2s ease-in-out infinite;
	animation: newBadgePulse 2s ease-in-out infinite;
}

@-webkit-keyframes newBadgePulse {
	0%, 100% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 2px 6px rgba(255, 80, 0, 0.5); }
	50% { -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 2px 10px rgba(255, 80, 0, 0.8); }
}

@keyframes newBadgePulse {
	0%, 100% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 2px 6px rgba(255, 80, 0, 0.5); }
	50% { -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 2px 10px rgba(255, 80, 0, 0.8); }
}

.boxes-icon[icon-position="top"]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 16px;
    height: 16px;
	z-index: -1;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: blinking 1s infinite alternate;
    animation: blinking 1s infinite alternate;
}

.boxes-icon span {
	display: block;
    bottom: 0px;
    position: absolute;
    margin-bottom: -6px;
    margin-right: -6px;
    right: 0px;
    text-align: center;
    min-width: 16px;
    padding: 5px;
    background-color: #0b0b0b;
    color: #ffffff;
	
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
/* boxes */

/* smiles */
.smile-item {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: center center;
}
/* smiles */

/* toggle switch */
.toggle-switch {
	display: none;
}

.toggle-switch + label {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
	background: #434257;
	cursor: pointer;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.toggle-switch:checked + label {
	background: #00d084;
}

.toggle-switch + label::before {
	content: "";
	position: absolute; 
	left: 1px;
	top: 1px;
	width: 24px;
	height: 24px;
	background: #ffffff;
	border-radius: 50%;

	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.toggle-switch:checked + label::before {
	margin-left: 24px;
}

.toggle-switch + label::after {
	content: '';
	position: absolute;
    top: 0px;
    left: 26px;
    width: 20px;
	height: 100%;
	background-image: url(../images/icon-toggle-unchecked.svg?v2);
    background-size: 12px 12px;
    background-position: center center;
    background-repeat: no-repeat;
}

.toggle-switch:checked + label::after {
	left: 4px;
	background-size: 14px 14px;
	background-image: url(../images/icon-toggle-checked.svg?v2);
}

/* toggle switch */

/* roulette */

/* ========== BONUS GAMES: shared pieces (roulette, doors, treasure, 5x3 slots) ========== */

/* the "won" card */
.bn-total-card {
	margin-top: 8px;
	padding: 9px 14px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	background-color: #0b4a30;
	background-image:
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.1), transparent 70%),
		repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.06) 0, rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 3px),
		linear-gradient(180deg, #0f5c3b, #083823);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.bn-total-label {
	font-size: 12px;
	color: rgba(230, 255, 240, 0.72);
}

.bn-total-row {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.bn-total-row .bn-coin-img {
	width: 22px;
	height: 22px;
	margin-right: 7px;
	-webkit-filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.4));
	filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.4));
}

.bn-total-row .bn-total {
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	color: #ffd700;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
	font-variant-numeric: tabular-nums;
}

.bn-total-row .bn-total.bump {
	-webkit-animation: slotBump 0.25s ease;
	animation: slotBump 0.25s ease;
}

/* the result line under a game */
.rl-result,
.dr-result,
.tr-result,
.gs-result {
	min-height: 30px;
	margin-top: 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.rl-result span,
.dr-result span,
.tr-result span,
.gs-result span {
	display: inline-block;
	padding: 6px 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	font-weight: bold;
	font-size: 14px;
	-webkit-animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
	animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.rl-result .win, .dr-result .win, .tr-result .win, .gs-result .win {
	color: #ffe27a;
	background: rgba(255, 215, 0, 0.1);
	text-shadow: 0 0 10px rgba(255, 200, 60, 0.5);
}

.rl-result .special, .dr-result .special, .tr-result .special, .gs-result .special {
	color: #7ff0b0;
	background: rgba(46, 204, 113, 0.12);
}

.rl-result .lose, .dr-result .lose, .tr-result .lose, .gs-result .lose {
	color: rgba(255, 255, 255, 0.45);
	font-weight: normal;
}

/* the prize shown inside a door or a chest */
.bn-prize {
	text-align: center;
	-webkit-animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
	animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.bn-prize img {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 3px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.8));
	filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.8));
}

.bn-prize b {
	display: block;
	font: 900 13px/1.15 "Arial Black", Arial, sans-serif;
	color: #ffe27a;
	text-shadow: 0 1px 0 #5a2a00, 0 0 8px rgba(255, 190, 60, 0.6);
}

.bn-prize-special b {
	font: bold 9px/1.15 Arial, sans-serif;
	color: #9ff0c0;
	text-shadow: 0 0 6px rgba(80, 230, 150, 0.5);
	max-width: 68px;
	margin: 0 auto;
}

.bn-prize-none b {
	font: 10px/1.15 Arial, sans-serif;
	color: rgba(255, 255, 255, 0.35);
	text-shadow: none;
}

.dr-hint,
.tr-hint {
	position: relative;
	z-index: 3;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: rgba(255, 215, 0, 0.65);
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
	-webkit-animation: bnHint 2s ease-in-out infinite;
	animation: bnHint 2s ease-in-out infinite;
}

.dr-hint.hidden,
.tr-hint.hidden {
	opacity: 0 !important;
}

@-webkit-keyframes bnHint { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes bnHint { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@-webkit-keyframes progress-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes progress-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

/* ========== ROULETTE ========== */

.big-dialog.roulette-dialog {
	background:
		radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 196, 120, 0.18), transparent 70%),
		radial-gradient(ellipse 90% 50% at 50% 110%, rgba(90, 20, 140, 0.35), transparent 70%),
		rgba(4, 2, 10, 0.93);
}

.roulette-dialog .big-dialog-inner {
	width: 380px;
	max-width: 96%;
	position: relative;
	background-color: #150a26;
	background-image:
		radial-gradient(ellipse at 50% 15%, rgba(170, 110, 255, 0.18), transparent 60%),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 14px),
		linear-gradient(180deg, #24123f 0%, #150a26 50%, #0a0414 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-border-radius: 18px;
	border-radius: 18px;
	box-shadow: 0 0 60px rgba(120, 40, 200, 0.25), 0 18px 60px rgba(0, 0, 0, 0.75);
}

.roulette-dialog .big-dialog-header {
	height: 50px;
	background: linear-gradient(180deg, #120618 0%, #080210 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.roulette-dialog .big-dialog-title {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffd34d;
	text-shadow: 0 2px 0 #4a1a00, 0 0 12px rgba(255, 190, 60, 0.45);
}

.roulette-dialog .big-dialog-footer,
.doors-dialog .big-dialog-footer,
.treasure-dialog .big-dialog-footer,
.gs-dialog .big-dialog-footer {
	padding: 12px 16px 16px;
	border-top: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.roulette-dialog .big-dialog-button[button-style="light"],
.doors-dialog .big-dialog-button[button-style="light"],
.treasure-dialog .big-dialog-button[button-style="light"],
.gs-dialog .big-dialog-button[button-style="light"] {
	background: linear-gradient(180deg, #1e1626 0%, #0d0812 100%) !important;
	color: #ffe08a !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-weight: bold;
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
	-webkit-transition: -webkit-filter 0.15s;
	transition: filter 0.15s;
}

.roulette-dialog .big-dialog-button[button-style="light"]:hover,
.doors-dialog .big-dialog-button[button-style="light"]:hover,
.treasure-dialog .big-dialog-button[button-style="light"]:hover,
.gs-dialog .big-dialog-button[button-style="light"]:hover {
	opacity: 1;
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);
}

.roulette-dialog .big-dialog-button.rl-auto-btn.on {
	background: linear-gradient(180deg, #ff6a5a 0%, #b4121f 100%) !important;
	color: #ffffff !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 14px rgba(255, 80, 80, 0.5);
}

/* --- scene --- */
.rl-scene {
	--wheel: 270px;
	position: relative;
	padding: 10px 12px 12px;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}

.rl-stage {
	padding: 14px 0 8px;
}

.rl-wheel-wrap {
	position: relative;
	width: var(--wheel);
	height: var(--wheel);
	margin: 0 auto;
}

/* bulbs around the rim */
.rl-bulbs {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 4;
}

.rl-bulbs b {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffcf5a;
	box-shadow: 0 0 6px #ffbe3b, 0 0 2px #fff inset;
	-webkit-animation: slotBulb 1.6s linear infinite;
	animation: slotBulb 1.6s linear infinite;
}

.rl-scene.rl-win .rl-bulbs b {
	-webkit-animation-duration: 0.45s;
	animation-duration: 0.45s;
}

/* --- wheel --- */
.roulette {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 0 3px #2a1540, 0 0 44px rgba(255, 200, 80, 0.16);
	-webkit-transition: box-shadow 0.4s;
	transition: box-shadow 0.4s;
}

.rl-scene.rl-win .roulette {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 0 3px #2a1540, 0 0 60px rgba(255, 210, 90, 0.5);
}

.roulette canvas {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

/* --- hub / spin button --- */
.roulette span {
	cursor: pointer;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 31%;
	height: 31%;
	margin: -15.5%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #4a3560 0%, #1a0f28 60%, #0c0714 100%);
	color: #ffd700;
	z-index: 5;
	box-shadow: 0 0 0 3px #e9bf55, 0 0 0 5px #2a1540, 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.18), inset 0 -6px 12px rgba(0, 0, 0, 0.5);
	-webkit-animation: slotReady 1.6s ease-in-out infinite;
	animation: slotReady 1.6s ease-in-out infinite;
	-webkit-transition: -webkit-transform 0.12s ease;
	transition: transform 0.12s ease;
	-webkit-tap-highlight-color: transparent;
}

.roulette span:hover {
	-webkit-filter: brightness(1.15);
	filter: brightness(1.15);
}

.roulette span:active {
	-webkit-transform: scale(0.94);
	transform: scale(0.94);
}

.roulette span[item-loading="yes"] {
	cursor: default;
	-webkit-animation: none;
	animation: none;
}

.roulette span.busy {
	-webkit-filter: none;
	filter: none;
}

.spin-icon {
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 22px solid #ffd700;
	margin-left: 5px;
	-webkit-filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.45));
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.45));
}

.rl-hub-spin {
	width: 46%;
	height: 46%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 3px solid rgba(255, 215, 0, 0.18);
	border-top-color: #ffe27a;
	-webkit-animation: slotRays 0.7s linear infinite;
	animation: slotRays 0.7s linear infinite;
}

.rl-hub-prize {
	font: 900 20px/1 "Arial Black", Arial, sans-serif;
	text-shadow: 0 2px 0 #4a1a00, 0 0 10px rgba(255, 190, 60, 0.6);
}

.rl-hub-prize.none {
	font-size: 16px;
	text-shadow: none;
}

.rl-hub-prize img {
	display: block;
	width: 36px;
	height: 36px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.8));
	filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.8));
}

/* --- pointer: hangs from the top, flaps on every pin --- */
.rl-pointer {
	position: absolute;
	top: -16px;
	left: 50%;
	width: 36px;
	height: 50px;
	margin-left: -18px;
	z-index: 6;
	pointer-events: none;
}

.rl-pointer i {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform-origin: 50% 10px;
	transform-origin: 50% 10px;
	will-change: transform;
}

.rl-pointer i:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 9px;
	margin-left: -13px;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 38px solid #f2c14a;
	-webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}

.rl-pointer i:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff8d8, #e9bf55 50%, #8a5a06 100%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

/* --- progress and legend --- */
.rl-progress {
	margin-top: 10px;
	position: relative;
	z-index: 2;
}

.rl-progress-track {
	position: relative;
	width: 100%;
	height: 6px;
	background-color: rgba(255, 255, 255, 0.07);
	overflow: hidden;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.rl-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #ffd700, #ffab00, #ffd700, #ffab00, #ffd700);
	background-size: 200% 100%;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
	-webkit-animation: progress-shimmer 2.5s linear infinite;
	animation: progress-shimmer 2.5s linear infinite;
	-webkit-transition: width 0.6s ease;
	transition: width 0.6s ease;
}

.rl-progress-labels {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.3);
	margin-top: 4px;
}

.rl-legend {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 8px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	position: relative;
	z-index: 2;
}

.rl-legend img {
	width: 20px;
	height: 20px;
	margin-right: 7px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255, 215, 0, 0.25);
}

@media (max-width: 380px) {
	.rl-scene { --wheel: 236px; }
}

@media (max-height: 680px) {
	.rl-scene { --wheel: 230px; padding-top: 6px; }
	.rl-stage { padding: 12px 0 4px; }
	.rl-result { margin-top: 6px; min-height: 26px; }
	.rl-legend { margin-top: 6px; }
}

@media (max-height: 600px) {
	.rl-scene { --wheel: 200px; }
	.rl-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rl-bulbs b,
	.roulette span,
	.rl-progress-bar {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* roulette */

/* report */
.report-button {
	display: inline-block;
	font-size: 17px;
	text-align: center;
	padding: 10px;
	color: #d90000;
	cursor: pointer;
}

.report-button img {
	width: 24px;
	margin-right: 4px;
	vertical-align: middle;
}

.report-dialog .big-dialog-button {
	background-color: #f93e2b;
}
/* report */

/* notification */
.notification {
	position: fixed;
    left: 50%;
    top: 20px;
    width: 300px;
    padding-top: 10px;
    margin-left: -150px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 10100000;

	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	
	-webkit-border-radius: 16px;
	border-radius: 16px;
}

.notification table {
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
}

.notification-close {
	width: 24px;
	padding: 10px;
	vertical-align: middle;
	cursor: pointer;
}

.notification-icon {
	width: 46px;
	vertical-align: middle;

	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.notification-actions {
	display: -webkit-flex;
	display: flex;
	background-color: rgba(0, 0, 0, 0.05);
	margin-top: 5px;
}

.notification-action {
	font-size: 16px;
    flex: 1;
    color: #4caf50;
    padding: 10px;
	cursor: pointer;
    text-align: center;
}
/* notification */

/* notifications */
.notifications-container::before {
	content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: +1;
}

.notifications {
    position: absolute;
    top: 150px;
    right: 15px;
    width: 280px;
    padding: 10px;
    min-height: 100px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: +1;

    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.notifications::before {
	content: "";
    position: absolute;
    border-width: 8px;
    border-style: solid;
    position: absolute;
    top: 0px;
    right: 12px;
    margin-top: -15px;
    border-color: transparent;
    border-bottom-color: #e7e7e8;
}

.notifications-content {
	-ms-overflow-style: none;
  	scrollbar-width: none;
	overflow-y: auto;
}

.notifications-content::-webkit-scrollbar {
	display: none;
}

.notifications-content:empty {
	background-image: url(../images/icon-notifications.svg);
	background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 150px;
}

.notifications-content[is-loading="yes"] {
	background-image: url(../images/puff-dark.svg);
	background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 150px;
}

.notifications-title {
	text-align: center;
    padding: 15px;
    font-size: 18px;
    color: #121212;
}

.notifications-item {
    width: 100%;
    padding-top: 15px;
    background-color: #ffffff;
    margin-bottom: 10px;

	-webkit-border-radius: 10px;
    border-radius: 10px;
}

.notifications-item table {
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
}

.notifications-item-close {
	width: 20px;
	padding: 10px;
	vertical-align: middle;
	cursor: pointer;
}

.notifications-item[item-online="online"] .notifications-item-icon::before,
.notifications-item[item-online="playing"] .notifications-item-icon::before {
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 1;
    content: "";
    width: 12px;
    height: 12px;
    background: #25d366 linear-gradient(180deg, #4ff094, #1fbf5f);
    border: 2px solid #ffffff;

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: status-online 2.4s ease-out infinite;
    animation: status-online 2.4s ease-out infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.notifications-item[item-online="playing"] .notifications-item-icon::before {
    background: #f0c555 linear-gradient(180deg, #ffdc7c, #e7ae35);
    -webkit-animation: none;
    animation: none;
}

.notifications-item[item-online="playing"] .notifications-item-icon::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    pointer-events: none;
    background: conic-gradient(rgba(240, 197, 85, 0.14) 0deg, rgba(240, 197, 85, 0.14) 110deg, #f0c555 310deg, #fff3c4 350deg, rgba(240, 197, 85, 0.14) 351deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000000 calc(100% - 2px));

    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: spinner 2.2s linear infinite;
    animation: spinner 2.2s linear infinite;
    -webkit-animation-delay: var(--status-delay, 0s);
    animation-delay: var(--status-delay, 0s);
}

.notifications-item-icon {
	position: relative;
	display: inline-block;
	height: 46px;
	width: 46px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	vertical-align: middle;
	cursor: pointer;

	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.notifications-item-actions {
	display: -webkit-flex;
	display: flex;
	margin-top: 5px;
}

.notifications-item-action {
	font-size: 16px;
    flex: 1;
    background-color: rgba(0, 0, 0, 0.05);
    color: #3f51b5;
    padding: 10px;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
	cursor: pointer;

	-webkit-border-radius: 20px;
    border-radius: 20px;
}

.notifications-item-action:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.notifications-item-action img {
	width: 16px;
	margin-right: 4px;
	vertical-align: middle;
	opacity: 0.6;
}

.notifications-icon {
	position: absolute;
	right: 15px;
    top: 90px;
    display: inline-block;
    width: 40px;
    height: 40px;
	background-color: rgba(255, 255, 255, 0.1);
    z-index: +1;
    cursor: pointer;

	-webkit-border-radius: 50%;
    border-radius: 50%;

	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
}

.notifications-container ~ .notifications-icon {
	background-color: rgba(255, 255, 255, 1);
	z-index: +1;
}

.notifications-icon img {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
}

.notifications-icon[item-notifications]::before {
	content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 14px;
    height: 14px;
	
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: blinking_notifications 5s infinite alternate;
    animation: blinking_notifications 5s infinite alternate;
}

@keyframes blinking_notifications {
	0% {
		width: 14px;
		height: 14px;
		background-color: #ffee01;
		transform: scale(1);
	}

	25% {
		width: 14px;
		height: 14px;
		background-color: #f30909;
		transform: scale(0.7);
	}

	50% {
		width: 14px;
		height: 14px;
		background-color: #ffee01;
		transform: scale(1);
	}

	75% {
		width: 14px;
		height: 14px;
		background-color: #f30909;
		transform: scale(0.7);
	}

    100% {
		width: 40px;
		height: 40px;
		background-color: #ffee01;
		transform: scale(1);
	}
}

/* notifications */

/* login */
.login-line {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 30px;
	margin-bottom: 15px;
}

.login-button {
    height: 40px;
    line-height: 40px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
    font-size: 17px;
    background-color: #17c561;
    background-image: url(../images/icon-login.svg?5);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 16px center;
    color: #ffffff;
	font-weight: bold;
    cursor: pointer;

    -webkit-border-radius: 25px;
    border-radius: 25px;
}

.signup-line {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 30px;
	margin-bottom: 15px;
}

.signup-button {
    height: 40px;
    line-height: 40px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
    font-size: 17px;
    background-color: #17c561;
    background-image: url(../images/icon-signup.svg);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: 17px center;
    color: #ffffff;
	font-weight: bold;
    cursor: pointer;

    -webkit-border-radius: 25px;
    border-radius: 25px;
}

.signup-upload {
	background-image: url(../images/signup-upload.svg?3);
}

.signup-upload[item-state="loading"] {
	background-image: url(../images/puff-dark.svg);
}

.fb-login-btn {
    height: 40px;
    line-height: 40px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
    font-size: 17px;
    background-color: #4266B3;
    color: #ffffff;
	font-weight: bold;
    cursor: pointer;

    -webkit-border-radius: 25px;
    border-radius: 25px;
}

.google-login-btn {
    height: 40px;
    line-height: 40px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
    font-size: 17px;
    background: #ffffff url(../images/icon-google.svg) 14px center / 20px 20px no-repeat;
    color: #1f1f1f;
	font-weight: bold;
    cursor: pointer;

    -webkit-border-radius: 25px;
    border-radius: 25px;
}

/* sign in with apple (iOS app only): Apple's black button with the white logo */
.apple-login-btn {
    height: 40px;
    line-height: 40px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
    font-size: 17px;
    background: #000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.37 12.7c0-2.3 1.88-3.4 1.97-3.46-1.07-1.57-2.74-1.78-3.33-1.8-1.42-.15-2.77.83-3.49.83-.72 0-1.83-.81-3.01-.79-1.55.02-2.98.9-3.78 2.29-1.61 2.8-.41 6.94 1.16 9.21.77 1.11 1.68 2.36 2.88 2.31 1.16-.05 1.6-.75 3-.75s1.79.75 3.01.73c1.24-.02 2.03-1.13 2.79-2.25.88-1.29 1.24-2.54 1.26-2.6-.03-.01-2.42-.93-2.46-3.72zM14.08 5.94c.64-.78 1.07-1.85.95-2.94-.92.04-2.04.61-2.7 1.39-.59.69-1.11 1.79-.97 2.85 1.03.08 2.08-.52 2.72-1.3z'/%3E%3C/svg%3E") 14px center / 20px 20px no-repeat;
    color: #ffffff;
	font-weight: bold;
    cursor: pointer;

    -webkit-border-radius: 25px;
    border-radius: 25px;
}

/* old lobby: Google / Apple now come first, so they take the top gap and Facebook below them the small one */
body:not([data-lobby="v2"]) .google-login-btn,
body:not([data-lobby="v2"]) .apple-login-btn {
	margin-top: 30px;
}
body:not([data-lobby="v2"]) div[item-id="google-button"]:not([style*="none"]) ~ div .fb-login-btn,
body:not([data-lobby="v2"]) div[item-id="apple-button"]:not([style*="none"]) ~ div .fb-login-btn {
	margin-top: 12px;
}
/* login */

/* by */
.by {
	color: #ffffff;
	font-size: 16px;
	margin-top: 30px;
}

.by span {
	color: #8a8a8a;
	font-size: 15px;
}
/* by */

/* game float */
.game-float {
	position: fixed;
    left: 10px;
    bottom: 10px;
    width: 64px;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.game-float span {
	content: "";
	display: block;
	position: absolute;
	top: 14px;
	left: 14px;
	width: 36px;
	height: 36px;
	background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
	overflow: hidden;

	-webkit-transition: background-image 2s ease;
	transition: background-image 2s ease;

	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.game-float[game-id="game"] span {
	background-image: url(../../files/games/game/logo.png?58);
}

.game-float[game-id="bura3"] span {
	background-image: url(../../files/games/bura3/logo.png?58);
}

.game-float[game-id="bura5"] span {
	background-image: url(../../files/games/bura5/logo.png?58);
}

.game-float[game-id="jeirani"] span {
	background-image: url(../../files/games/jeirani/logo.png?58);
}

.game-float[game-id="checkers"] span {
	background-image: url(../../files/games/checkers/logo.png?58);
}
/* game float */

/* smart tooltip */
.smart-tooltip {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	padding: 10px;
	min-width: 100px;
	height: 30px;
	line-height: 30px;
    text-align: center;
    font-size: 17px;
	white-space: nowrap;
	border-color: rgba(0, 0, 0, 0.8);

	-webkit-transition: all 0.15s linear;
	transition: all 0.15s linear;

	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.smart-tooltip[item-mode="right"] {
	margin-left: -10px;
	
	-webkit-transform: translate(-100%, 0%);
	transform: translate(-100%, 0%);
}

.smart-tooltip::after {
	content: "";
    position: absolute;
    border-width: 12px;
    border-style: solid;
}

.smart-tooltip[item-arrow="left"]::after {
	top: 13px;
	left: 0px;
	margin-left: -24px;
	border-color: transparent;
    border-right-color: inherit;
}

.smart-tooltip[item-arrow="right"]::after {
	top: 13px;
	right: 0px;
	margin-right: -23px;
	border-color: transparent;
    border-left-color: #070f17;
}

.smart-tooltip[item-arrow="top"]::after {
    top: 0px;
    left: 50%;
    margin-top: -24px;
    margin-left: -12px;
    border-color: transparent;
    border-bottom-color: inherit;
}

.smart-tooltip[item-arrow="bottom"]::after {
	bottom: 0px;
	left: 50%;
	margin-bottom: -24px;
	margin-left: -12px;
	border-color: transparent;
    border-top-color: inherit;
}
/* smart tooltip */

/* promo code */
.promo-dialog-hide {
	left: calc(100% - 64px) !important;
    top: 165px !important;
	background-color: transparent !important;
	width: 40px !important;
	height: 40px !important;
	opacity: 0 !important;
	overflow: hidden !important;

	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

@-webkit-keyframes promo_icon {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes promo_icon {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.promo-icon {
    position: absolute;
    right: 15px;
    top: 165px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    background-color: #102a44;
    background-image: url(../images/icon-promo.png?v8);
    cursor: pointer;
	z-index: +1;

	-webkit-animation: promo_icon 2s infinite alternate;
    animation: promo_icon 2s infinite alternate;

    -webkit-border-radius: 50%;
    border-radius: 50%;
}

@-webkit-keyframes promo_code_text {
	from {
		color: #000000;
	}

	to {
		color: #cbc825;
	}
}

@keyframes promo_code_text {
	from {
		color: #000000;
	}

	to {
		color: #cbc825;
	}
}

.promo-code-text {
	-webkit-animation: promo_code_text 1s infinite alternate;
    animation: promo_code_text 1s infinite alternate;
}

.promo-share-button {
	background-color: #3f51b5 !important;
}
/* promo code */

/* auth */
.auth-otp-button {
	display: inline-block;
	width: 100%;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	border: none;
	font-size: 13px;
	background-color: #3f51b5;
	color: #ffffff;
	cursor: pointer;
	
	-webkit-border-radius: 7px;
    border-radius: 7px;
}

.auth-otp-button:hover {
	opacity: 0.7;
}

/* profile */
.big-dialog[data-gender="female"] .big-dialog-content {
	border-top: 3px solid #ff4da6;
}

.big-dialog[data-gender="male"] .big-dialog-content {
	border-top: 3px solid #4a90d9;
}

.profile-dialog .profile-id {
	display: inline-block;
	padding: 3px 14px 3px 4px;
	border: 1px solid transparent;
	-webkit-border-radius: 999px;
	border-radius: 999px;
}

.profile-dialog[data-gender="female"] .profile-id {
	border-color: #ff4da6;
	-webkit-box-shadow: 0 0 10px rgba(255, 77, 166, 0.3);
	box-shadow: 0 0 10px rgba(255, 77, 166, 0.3);
}

.profile-dialog[data-gender="male"] .profile-id {
	border-color: #4a90d9;
	-webkit-box-shadow: 0 0 10px rgba(74, 144, 217, 0.3);
	box-shadow: 0 0 10px rgba(74, 144, 217, 0.3);
}

/* ========== DOORS GAME ========== */

/* --- game picker --- */
.games-pick-dialog .big-dialog-inner {
	width: 400px;
	max-width: 96%;
	background-color: #0f1923;
	background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.08), transparent 60%), linear-gradient(180deg, #16243a 0%, #0f1923 100%);
	border: 1px solid rgba(255, 215, 0, 0.15);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.games-pick-dialog .big-dialog-header {
	border-bottom: 1px solid rgba(255, 215, 0, 0.12);
}

.games-pick-dialog .big-dialog-title {
	color: #ffd700;
}

.games-pick {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	padding: 20px 18px 24px;
}

.game-choice-btn {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	height: 124px;
	background: linear-gradient(170deg, #1d2f4a 0%, #0d1b2a 100%);
	border: 2px solid rgba(255, 215, 0, 0.3);
	cursor: pointer;
	overflow: hidden;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.game-choice-btn:before {
	content: "";
	position: absolute;
	left: -40%;
	top: -60%;
	width: 60%;
	height: 220%;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.08) 50%, transparent 80%);
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	-webkit-transition: left 0.6s ease;
	transition: left 0.6s ease;
}

.game-choice-btn:hover {
	border-color: #ffd700;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 215, 0, 0.25);
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
}

.game-choice-btn:hover:before {
	left: 110%;
}

.game-choice-btn:active {
	-webkit-transform: translateY(0) scale(0.97);
	transform: translateY(0) scale(0.97);
}

.game-choice-icon {
	line-height: 0;
	margin-bottom: 10px;
}

.game-choice-icon svg {
	width: 50px;
	height: 50px;
	-webkit-filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
	-webkit-transition: -webkit-transform 0.25s ease;
	transition: transform 0.25s ease;
}

.game-choice-btn:hover .game-choice-icon svg {
	-webkit-transform: scale(1.08);
	transform: scale(1.08);
}

.game-choice-label {
	font-size: 13px;
	font-weight: bold;
	color: #ffd700;
	letter-spacing: 0.5px;
}

/* --- doors icon (left side, below boxes icon) --- */
.doors-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	background-position: center center;
	background-color: rgba(255, 255, 255, 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23ffd700'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23ffd700'/%3E%3C/svg%3E");
	cursor: pointer;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.doors-icon[icon-position="top"] {
	position: absolute;
	left: 15px;
	top: 215px;
	z-index: +1;
}

.doors-icon[icon-position="top"]::after {
	content: '';
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 16px;
	height: 16px;
	z-index: -1;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: blinking 1s infinite alternate;
	animation: blinking 1s infinite alternate;
}

/* --- dialog shell --- */
.big-dialog.doors-dialog {
	background:
		radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 180, 100, 0.16), transparent 70%),
		radial-gradient(ellipse 90% 50% at 50% 110%, rgba(120, 40, 20, 0.4), transparent 70%),
		rgba(6, 3, 3, 0.93);
}

.doors-dialog .big-dialog-inner {
	width: 420px;
	max-width: 96%;
	position: relative;
	background-color: #1c0f12;
	background-image:
		radial-gradient(ellipse at 50% 12%, rgba(255, 170, 110, 0.14), transparent 60%),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		linear-gradient(180deg, #2b1518 0%, #1c0f12 50%, #0d0608 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-border-radius: 18px;
	border-radius: 18px;
	box-shadow: 0 0 60px rgba(160, 60, 30, 0.25), 0 18px 60px rgba(0, 0, 0, 0.75);
}

.doors-dialog .big-dialog-header,
.treasure-dialog .big-dialog-header {
	height: 50px;
	background: linear-gradient(180deg, #160808 0%, #0b0304 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.doors-dialog .big-dialog-title,
.treasure-dialog .big-dialog-title {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffd34d;
	text-shadow: 0 2px 0 #4a1a00, 0 0 12px rgba(255, 190, 60, 0.45);
}

/* --- scene --- */
.dr-scene {
	--door: 80px;
	position: relative;
	padding: 10px 10px 12px;
	-webkit-user-select: none;
	user-select: none;
}

/* the hallway */
.dr-hall {
	position: relative;
	padding: 12px 6px 22px;
	overflow: hidden;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	box-shadow: 0 0 0 2px #7a5a28, inset 0 0 40px rgba(0, 0, 0, 0.6), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.dr-wall {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 24%;
	background:
		repeating-linear-gradient(90deg, rgba(255, 220, 160, 0.03) 0, rgba(255, 220, 160, 0.03) 2px, transparent 2px, transparent 22px),
		radial-gradient(ellipse at 50% 0%, rgba(255, 190, 110, 0.18), transparent 60%),
		linear-gradient(180deg, #3a1d24 0%, #22121a 100%);
}

.dr-floor {
	position: absolute;
	left: 0;
	right: 0;
	top: 76%;
	bottom: 0;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 28px),
		linear-gradient(180deg, #4a2d18 0%, #2a180c 100%);
	box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.5);
}

.dr-floor:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(180deg, #b8860b, #6a4a10);
}

.dr-hint {
	margin-bottom: 10px;
}

.dr-grid {
	position: relative;
	z-index: 2;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	gap: 16px 10px;
}

/* --- a door --- */
.dr-door {
	position: relative;
	width: var(--door);
	height: calc(var(--door) * 1.42);
	cursor: pointer;
	-webkit-perspective: 700px;
	perspective: 700px;
	-webkit-transition: opacity 0.4s ease, -webkit-filter 0.4s ease, -webkit-transform 0.25s ease;
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.dr-door:not(.locked):hover {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
}

.dr-door.locked {
	cursor: default;
}

.dr-door.dimmed {
	opacity: 0.35;
	-webkit-filter: grayscale(0.8);
	filter: grayscale(0.8);
}

.dr-frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-border-radius: 7px 7px 3px 3px;
	border-radius: 7px 7px 3px 3px;
	background: linear-gradient(180deg, #f6d98a 0%, #c9973a 40%, #8a5a06 100%);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
}

.dr-door:not(.locked):hover .dr-frame {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 200, 80, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* the room behind */
.dr-room {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	overflow: hidden;
	-webkit-border-radius: 4px 4px 2px 2px;
	border-radius: 4px 4px 2px 2px;
	background: radial-gradient(ellipse at 50% 65%, #2b1d10 0%, #120b06 60%, #070402 100%);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8);
}

.dr-glow {
	position: absolute;
	left: -30%;
	right: -30%;
	top: -30%;
	bottom: -30%;
	background: radial-gradient(circle, rgba(255, 215, 120, 0.85) 0%, rgba(255, 170, 50, 0.3) 40%, transparent 70%);
	opacity: 0;
	-webkit-transition: opacity 0.6s ease;
	transition: opacity 0.6s ease;
}

.dr-door.lit .dr-glow {
	opacity: 1;
	-webkit-animation: drGlow 1.4s ease-in-out infinite alternate;
	animation: drGlow 1.4s ease-in-out infinite alternate;
}

.dr-prize {
	position: relative;
	z-index: 2;
}

/* the leaf, hinged on the left */
.dr-leaf {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	-webkit-border-radius: 4px 4px 2px 2px;
	border-radius: 4px 4px 2px 2px;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 9px),
		linear-gradient(90deg, #7a4218 0%, #b06f36 28%, #8d5222 55%, #a8683a 80%, #6e3a14 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 160, 0.2);
	-webkit-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 1.1s cubic-bezier(0.3, 0.85, 0.3, 1.02);
	transition: transform 1.1s cubic-bezier(0.3, 0.85, 0.3, 1.02);
}

.dr-door.open .dr-leaf {
	-webkit-transform: rotateY(-108deg);
	transform: rotateY(-108deg);
	-webkit-transition: -webkit-transform 1.1s cubic-bezier(0.3, 0.85, 0.3, 1.02);
	transition: transform 1.1s cubic-bezier(0.3, 0.85, 0.3, 1.02);
}

.dr-door:not(.open) .dr-leaf {
	-webkit-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.dr-door.knock .dr-leaf {
	-webkit-animation: drKnock 0.5s ease-in-out;
	animation: drKnock 0.5s ease-in-out;
}

.dr-panel {
	position: absolute;
	left: 15%;
	right: 15%;
	height: 32%;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.06));
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 220, 160, 0.25);
}

.dr-panel.p1 { top: 10%; }
.dr-panel.p2 { top: 55%; }

.dr-knob {
	position: absolute;
	right: 9%;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff6c9, #e9bf55 50%, #8a5a06 100%);
	box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.dr-plate {
	position: absolute;
	top: 3px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	padding: 0 7px;
	font: 900 11px/16px "Arial Black", Arial, sans-serif;
	font-style: normal;
	color: #3a2200;
	background: linear-gradient(180deg, #ffe07a, #b9780d);
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* light on the floor and the shadow */
.dr-beam {
	position: absolute;
	left: -12%;
	right: -12%;
	top: 100%;
	height: 34px;
	background: linear-gradient(180deg, rgba(255, 205, 100, 0.55), rgba(255, 205, 100, 0));
	-webkit-clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
	clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.dr-door.lit .dr-beam {
	opacity: 1;
}

.dr-shadow {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -7px;
	height: 9px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

.dr-scene.dr-win .dr-hall {
	box-shadow: 0 0 0 2px #e9bf55, inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 200, 70, 0.45), 0 12px 30px rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes drKnock {
	0%, 24%, 52%, 100% { -webkit-transform: rotateY(0deg); }
	10%, 38% { -webkit-transform: rotateY(7deg) translateX(-1px); }
}
@keyframes drKnock {
	0%, 24%, 52%, 100% { transform: rotateY(0deg); }
	10%, 38% { transform: rotateY(7deg) translateX(-1px); }
}

@-webkit-keyframes drGlow { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes drGlow { from { opacity: 0.75; } to { opacity: 1; } }

@media (max-width: 380px) {
	.dr-scene { --door: 70px; }
	.dr-grid { gap: 14px 8px; }
}

@media (max-height: 640px) {
	.dr-scene { --door: 66px; }
	.dr-hall { padding-bottom: 16px; }
	.dr-result { margin-top: 6px; min-height: 26px; }
}

/* ========== END DOORS GAME ========== */

/* ========== TREASURE GAME ========== */

.big-dialog.treasure-dialog {
	background:
		radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 196, 120, 0.16), transparent 70%),
		radial-gradient(ellipse 90% 50% at 50% 110%, rgba(60, 20, 120, 0.4), transparent 70%),
		rgba(3, 2, 8, 0.93);
}

.treasure-dialog .big-dialog-inner {
	width: 400px;
	max-width: 96%;
	position: relative;
	background-color: #120a20;
	background-image:
		radial-gradient(ellipse at 50% 20%, rgba(255, 190, 90, 0.1), transparent 55%),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
		linear-gradient(180deg, #1f1234 0%, #120a20 55%, #080412 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-border-radius: 18px;
	border-radius: 18px;
	box-shadow: 0 0 60px rgba(120, 60, 200, 0.2), 0 18px 60px rgba(0, 0, 0, 0.75);
}

.tr-scene {
	--chest: 104px;
	position: relative;
	padding: 10px 10px 12px;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

.tr-rays {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 560px;
	height: 560px;
	margin: -280px 0 0 -280px;
	background: repeating-conic-gradient(from 0deg, rgba(255, 215, 90, 0.18) 0deg 8deg, transparent 8deg 22deg);
	-webkit-mask: radial-gradient(circle, #000 0%, transparent 58%);
	mask: radial-gradient(circle, #000 0%, transparent 58%);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
	-webkit-animation: slotRays 14s linear infinite;
	animation: slotRays 14s linear infinite;
}

.tr-scene.tr-open .tr-rays {
	opacity: 1;
}

.tr-dust {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

.tr-dust i {
	position: absolute;
	width: 3px;
	height: 3px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffd98a;
	box-shadow: 0 0 6px #ffd98a;
	opacity: 0;
	-webkit-animation: trDust 7s ease-in-out infinite;
	animation: trDust 7s ease-in-out infinite;
}

.tr-hint {
	margin: 4px 0 0;
}

.tr-row {
	position: relative;
	z-index: 2;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	gap: 14px;
	padding: 34px 0 18px;
}

/* --- a chest --- */
.tr-chest {
	position: relative;
	width: var(--chest);
	height: calc(var(--chest) * 0.92);
	cursor: pointer;
	-webkit-perspective: 600px;
	perspective: 600px;
	-webkit-filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
	filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.4s ease, -webkit-filter 0.4s ease;
	transition: transform 0.3s ease, opacity 0.4s ease, filter 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}

.tr-chest:not(.locked):hover {
	-webkit-transform: translateY(-4px) scale(1.04);
	transform: translateY(-4px) scale(1.04);
	-webkit-filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 200, 80, 0.45));
	filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 200, 80, 0.45));
}

.tr-chest.locked {
	cursor: default;
}

.tr-chest.dimmed {
	opacity: 0.35;
	-webkit-filter: grayscale(0.8) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
	filter: grayscale(0.8) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}

.tr-chest.big {
	-webkit-filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 200, 60, 0.9));
	filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 200, 60, 0.9));
}

.tr-body,
.tr-lid,
.tr-lock {
	position: absolute;
}

.tr-body svg,
.tr-lid svg,
.tr-lock svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tr-body {
	left: 0;
	right: 0;
	bottom: 0;
	height: 56%;
	z-index: 3;
}

.tr-lid {
	left: 0;
	right: 0;
	bottom: calc(56% - 3px);
	height: 42%;
	z-index: 4;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.5, 0, 0.7, 0.4);
	transition: transform 0.55s cubic-bezier(0.5, 0, 0.7, 0.4);
}

.tr-chest.open .tr-lid {
	-webkit-transform: translateY(-48%) rotateX(38deg);
	transform: translateY(-48%) rotateX(38deg);
	-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.3, 1.25, 0.4, 1);
	transition: transform 0.9s cubic-bezier(0.3, 1.25, 0.4, 1);
}

/* the gold inside, the light pouring out */
.tr-inside {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: calc(56% - 4px);
	height: 26%;
	-webkit-border-radius: 50% 50% 0 0;
	border-radius: 50% 50% 0 0;
	background: radial-gradient(ellipse at 50% 100%, #fff1b0 0%, #f2b628 35%, rgba(242, 182, 40, 0) 72%);
	opacity: 0;
	z-index: 2;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.tr-chest.lit .tr-inside {
	opacity: 1;
	-webkit-animation: drGlow 1.2s ease-in-out infinite alternate;
	animation: drGlow 1.2s ease-in-out infinite alternate;
}

.tr-beam {
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 56%;
	height: 170%;
	background: linear-gradient(0deg, rgba(255, 225, 130, 0.6) 0%, rgba(255, 225, 130, 0.12) 55%, rgba(255, 225, 130, 0) 100%);
	-webkit-clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
	clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	-webkit-transition: opacity 0.6s ease;
	transition: opacity 0.6s ease;
}

.tr-chest.lit .tr-beam {
	opacity: 1;
}

/* the padlock */
.tr-lock {
	left: 50%;
	width: 24%;
	height: 28%;
	margin-left: -12%;
	bottom: calc(56% - 15%);
	z-index: 5;
	-webkit-transform-origin: 50% 20%;
	transform-origin: 50% 20%;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s ease 0.15s;
	transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s ease 0.15s;
}

.tr-chest.unlocked .tr-lock {
	-webkit-transform: translateY(16px) rotate(-35deg);
	transform: translateY(16px) rotate(-35deg);
	opacity: 0;
}

.tr-chest.rattle .tr-lock {
	-webkit-animation: trRattle 0.5s linear;
	animation: trRattle 0.5s linear;
}

.tr-chest.rattle .tr-body,
.tr-chest.rattle .tr-lid {
	-webkit-animation: trShake 0.5s linear;
	animation: trShake 0.5s linear;
}

.tr-prize {
	position: absolute;
	left: -14%;
	right: -14%;
	bottom: calc(56% + 16%);
	text-align: center;
	z-index: 6;
	pointer-events: none;
}

.tr-prize .bn-prize b {
	font-size: 17px;
}

.tr-prize .bn-prize-special b {
	font-size: 10px;
}

.tr-prize .bn-prize img {
	width: 34px;
	height: 34px;
}

.tr-num {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: rgba(255, 215, 0, 0.5);
}

.tr-scene.tr-win .tr-dust i {
	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
}

@-webkit-keyframes trRattle {
	0%, 48%, 100% { -webkit-transform: rotate(0deg); }
	6%, 30% { -webkit-transform: rotate(-12deg) translateX(-1px); }
	18%, 42% { -webkit-transform: rotate(12deg) translateX(1px); }
}
@keyframes trRattle {
	0%, 48%, 100% { transform: rotate(0deg); }
	6%, 30% { transform: rotate(-12deg) translateX(-1px); }
	18%, 42% { transform: rotate(12deg) translateX(1px); }
}

@-webkit-keyframes trShake {
	0%, 48%, 100% { -webkit-transform: translateX(0); }
	6%, 30% { -webkit-transform: translateX(-2px); }
	18%, 42% { -webkit-transform: translateX(2px); }
}
@keyframes trShake {
	0%, 48%, 100% { transform: translateX(0); }
	6%, 30% { transform: translateX(-2px); }
	18%, 42% { transform: translateX(2px); }
}

@-webkit-keyframes trDust {
	0% { opacity: 0; -webkit-transform: translateY(0); }
	20%, 80% { opacity: 0.55; }
	100% { opacity: 0; -webkit-transform: translateY(-40px); }
}
@keyframes trDust {
	0% { opacity: 0; transform: translateY(0); }
	20%, 80% { opacity: 0.55; }
	100% { opacity: 0; transform: translateY(-40px); }
}

@media (max-width: 380px) {
	.tr-scene { --chest: 90px; }
	.tr-row { gap: 10px; }
}

@media (max-height: 640px) {
	.tr-scene { --chest: 84px; }
	.tr-row { padding: 26px 0 14px; }
	.tr-result { margin-top: 6px; min-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.tr-rays,
	.tr-dust i,
	.dr-hint,
	.tr-hint {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* ========== END TREASURE GAME ========== */

/* ========== SLOT GAME ========== */

/* --- dialog (slots only) --- */
.big-dialog.slot-dialog {
	background:
		radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 196, 120, 0.2), transparent 70%),
		radial-gradient(ellipse 90% 50% at 50% 110%, rgba(150, 14, 36, 0.4), transparent 70%),
		rgba(6, 2, 6, 0.93);
}

.big-dialog.slot-dialog:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 12% 3%, rgba(255, 190, 90, 0.42) 0, transparent 30px),
		radial-gradient(circle at 38% 1%, rgba(255, 70, 80, 0.32) 0, transparent 38px),
		radial-gradient(circle at 66% 4%, rgba(255, 200, 110, 0.36) 0, transparent 26px),
		radial-gradient(circle at 90% 2%, rgba(200, 80, 255, 0.26) 0, transparent 36px),
		radial-gradient(circle at 8% 97%, rgba(255, 80, 90, 0.32) 0, transparent 36px),
		radial-gradient(circle at 32% 99%, rgba(255, 196, 100, 0.36) 0, transparent 28px),
		radial-gradient(circle at 62% 96%, rgba(255, 120, 60, 0.3) 0, transparent 34px),
		radial-gradient(circle at 88% 98%, rgba(255, 190, 90, 0.4) 0, transparent 30px),
		radial-gradient(circle at 5% 30%, rgba(255, 190, 90, 0.34) 0, transparent 40px),
		radial-gradient(circle at 10% 70%, rgba(255, 60, 70, 0.28) 0, transparent 54px),
		radial-gradient(circle at 95% 24%, rgba(255, 70, 90, 0.3) 0, transparent 48px),
		radial-gradient(circle at 92% 64%, rgba(255, 196, 100, 0.32) 0, transparent 40px);
	-webkit-animation: slotAmbient 5s ease-in-out infinite alternate;
	animation: slotAmbient 5s ease-in-out infinite alternate;
}

.slot-dialog .big-dialog-inner {
	width: 400px;
	max-width: 96%;
	position: relative;
	background-color: #2a0610;
	background-image:
		radial-gradient(ellipse at 50% 18%, rgba(255, 170, 110, 0.16), transparent 60%),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 14px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 14px),
		linear-gradient(180deg, #3d0a18 0%, #2a0610 50%, #16030a 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-border-radius: 18px;
	border-radius: 18px;
	box-shadow: 0 0 60px rgba(180, 20, 40, 0.28), 0 18px 60px rgba(0, 0, 0, 0.75);
}

.slot-dialog .big-dialog-header {
	height: 50px;
	background: linear-gradient(180deg, #1c0509 0%, #0e0205 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.slot-dialog .big-dialog-title {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffd34d;
	text-shadow: 0 2px 0 #4a1a00, 0 0 12px rgba(255, 190, 60, 0.45);
}

.slot-dialog .big-dialog-title img {
	-webkit-filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.6));
	filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.6));
}

.slot-dialog .big-dialog-footer {
	padding: 12px 16px 16px;
	border-top: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.slot-dialog .big-dialog-button[button-style="light"] {
	background: linear-gradient(180deg, #1e1416 0%, #0d0809 100%) !important;
	color: #ffe08a !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-weight: bold;
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
	-webkit-transition: -webkit-filter 0.15s;
	transition: filter 0.15s;
}

.slot-dialog .big-dialog-button[button-style="light"]:hover {
	opacity: 1;
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);
}

/* --- scene --- */
.slot-scene {
	--cell: 76px;
	position: relative;
	padding: 14px 12px 12px;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}

/* --- cabinet --- */
.slot-machine {
	position: relative;
	padding: 10px 10px 14px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 210, 140, 0.2), transparent 55%),
		linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, transparent 60%),
		linear-gradient(180deg, #6a0f22 0%, #3c0814 42%, #1a0309 100%);
	box-shadow:
		0 0 0 2px #c9973a,
		0 14px 30px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -10px 24px rgba(0, 0, 0, 0.45);
	-webkit-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
}

.slot-machine.win-state {
	box-shadow:
		0 0 0 2px #ffd970,
		0 0 34px rgba(255, 200, 70, 0.55),
		0 14px 30px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -10px 24px rgba(0, 0, 0, 0.45);
}

/* --- marquee --- */
.slot-marquee {
	position: relative;
	margin: 0 6px 10px;
	padding: 9px 0 10px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	background: linear-gradient(180deg, #170306, #0a0103);
	box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.slot-title {
	font: 900 22px/1 "Arial Black", Arial, sans-serif;
	letter-spacing: 3px;
	background: linear-gradient(180deg, #fff6c9 0%, #ffd34d 45%, #d08a12 55%, #ffe486 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-filter: drop-shadow(0 2px 0 #5a2a00) drop-shadow(0 0 10px rgba(255, 190, 60, 0.45));
	filter: drop-shadow(0 2px 0 #5a2a00) drop-shadow(0 0 10px rgba(255, 190, 60, 0.45));
}

.slot-title i {
	font-style: normal;
	font-size: 13px;
	vertical-align: 4px;
	margin: 0 6px;
}

.slot-bulbs {
	position: absolute;
	left: 10px;
	right: 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	pointer-events: none;
}

.slot-bulbs.top {
	top: -4px;
}

.slot-bulbs.bottom {
	bottom: -4px;
}

.slot-bulbs b {
	width: 7px;
	height: 7px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffcf5a;
	box-shadow: 0 0 6px #ffbe3b, 0 0 2px #fff inset;
	-webkit-animation: slotBulb 1.6s linear infinite;
	animation: slotBulb 1.6s linear infinite;
}

.slot-machine.party .slot-bulbs b {
	-webkit-animation-duration: 0.45s;
	animation-duration: 0.45s;
}

/* --- reel window --- */
.slot-window {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 8px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background: linear-gradient(180deg, #120914, #07040b);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.slot-reel {
	position: relative;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	height: calc(var(--cell) * 3);
	overflow: hidden;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: linear-gradient(90deg, #d9d0c2 0%, #fffaf0 22%, #ffffff 50%, #fffaf0 78%, #d9d0c2 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.slot-reel + .slot-reel {
	margin-left: 6px;
}

/* the drum curves away at the top and the bottom */
.slot-reel:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 4, 14, 0.78) 0%, rgba(10, 4, 14, 0.18) 22%, transparent 36%, transparent 64%, rgba(10, 4, 14, 0.18) 78%, rgba(10, 4, 14, 0.78) 100%);
}

.slot-reel.tense {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px #ffd34d, 0 0 18px rgba(255, 200, 60, 0.8);
	-webkit-animation: slotTense 0.5s ease-in-out infinite alternate;
	animation: slotTense 0.5s ease-in-out infinite alternate;
}

.slot-cell {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: var(--cell);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	will-change: transform;
}

.slot-cell svg {
	width: 78%;
	height: 86%;
	overflow: visible;
}

.slot-reel.fast .slot-cell svg {
	-webkit-filter: url(#slot-vblur);
	filter: url(#slot-vblur);
}

.slot-cell.win svg {
	-webkit-animation: slotWinSym 0.7s ease-in-out infinite alternate;
	animation: slotWinSym 0.7s ease-in-out infinite alternate;
}

/* --- payline --- */
.slot-line {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 0;
	pointer-events: none;
	z-index: 3;
}

.slot-line:before,
.slot-line:after {
	content: "";
	position: absolute;
	top: -9px;
	border: 9px solid transparent;
	-webkit-filter: drop-shadow(0 0 2px #000);
	filter: drop-shadow(0 0 2px #000);
}

.slot-line:before {
	left: -4px;
	border-left: 11px solid #e9bf55;
	border-right: 0;
}

.slot-line:after {
	right: -4px;
	border-right: 11px solid #e9bf55;
	border-left: 0;
}

.slot-line span {
	position: absolute;
	left: 10px;
	right: 10px;
	top: -1.5px;
	height: 3px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, #ffe27a 12%, #fff6c9 50%, #ffe27a 88%, transparent);
	box-shadow: 0 0 10px #ffc93c, 0 0 22px rgba(255, 190, 50, 0.7);
	opacity: 0;
	-webkit-transform: scaleX(0.2);
	transform: scaleX(0.2);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	transition: opacity 0.2s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.slot-line.on span {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	-webkit-animation: slotLine 0.5s ease-in-out 0.35s 5 alternate;
	animation: slotLine 0.5s ease-in-out 0.35s 5 alternate;
}

/* --- spin button --- */
.slot-controls {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 14px;
}

.slot-spin-btn {
	position: relative;
	width: 92px;
	height: 92px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font: 900 19px/1 "Arial Black", Arial, sans-serif;
	letter-spacing: 1.5px;
	color: #ffffff;
	text-shadow: 0 2px 0 #7a0d1a, 0 0 8px rgba(255, 255, 255, 0.35);
	background: radial-gradient(circle at 50% 35%, #ff7a6a 0%, #e8253a 45%, #9b0d22 100%);
	box-shadow:
		0 0 0 4px #2a0d22, 0 0 0 6px #c9973a,
		0 7px 0 6px #1c0716,
		0 14px 22px 6px rgba(0, 0, 0, 0.55),
		inset 0 3px 6px rgba(255, 255, 255, 0.45), inset 0 -8px 14px rgba(80, 0, 10, 0.6);
	cursor: pointer;
	-webkit-transition: -webkit-transform 0.12s ease, box-shadow 0.12s ease, -webkit-filter 0.2s;
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s;
	-webkit-animation: slotReady 1.6s ease-in-out infinite;
	animation: slotReady 1.6s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
}

.slot-spin-btn:after {
	content: "";
	position: absolute;
	left: 22%;
	top: 10%;
	width: 56%;
	height: 30%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.slot-spin-btn:active:not(.disabled),
.slot-spin-btn.press {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	box-shadow:
		0 0 0 4px #2a0d22, 0 0 0 6px #c9973a,
		0 2px 0 6px #1c0716,
		0 6px 12px 6px rgba(0, 0, 0, 0.5),
		inset 0 3px 6px rgba(255, 255, 255, 0.35), inset 0 -4px 10px rgba(80, 0, 10, 0.6);
}

.slot-spin-btn.disabled {
	-webkit-filter: saturate(0.35) brightness(0.7);
	filter: saturate(0.35) brightness(0.7);
	cursor: default;
	-webkit-animation: none;
	animation: none;
}

/* --- result --- */
.slot-result {
	min-height: 30px;
	margin-top: 12px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.slot-result span {
	display: inline-block;
	padding: 6px 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	font-weight: bold;
	font-size: 14px;
	-webkit-animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
	animation: slotPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.slot-result .win {
	color: #ffe27a;
	background: rgba(255, 215, 0, 0.1);
	text-shadow: 0 0 10px rgba(255, 200, 60, 0.5);
}

.slot-result .special {
	color: #7ff0b0;
	background: rgba(46, 204, 113, 0.12);
}

.slot-result .lose {
	color: rgba(255, 255, 255, 0.45);
	font-weight: normal;
}

/* --- total --- */
.slot-total-card {
	margin-top: 8px;
	padding: 9px 14px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	background-color: #0b4a30;
	background-image:
		radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.1), transparent 70%),
		repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.06) 0, rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 3px),
		linear-gradient(180deg, #0f5c3b, #083823);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.slot-total-label {
	font-size: 12px;
	color: rgba(230, 255, 240, 0.72);
}

.slot-total-row {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.slot-total-row .slot-coin-img {
	width: 22px;
	height: 22px;
	margin-right: 7px;
	-webkit-filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.4));
	filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.4));
}

.slot-total-row .slot-total {
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	color: #ffd700;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
	font-variant-numeric: tabular-nums;
}

.slot-total-row .slot-total.bump {
	-webkit-animation: slotBump 0.25s ease;
	animation: slotBump 0.25s ease;
}

/* --- floating "+N" --- */
.slot-float {
	position: absolute;
	left: 50%;
	top: 40%;
	z-index: 6;
	pointer-events: none;
	font: 900 30px/1 "Arial Black", Arial, sans-serif;
	color: #ffe27a;
	text-shadow: 0 3px 0 #7a4300, 0 0 16px rgba(255, 190, 40, 0.8);
	-webkit-animation: slotFloat 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
	animation: slotFloat 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* --- big win / jackpot --- */
.slot-big {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 8;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 45%, rgba(40, 10, 40, 0.55), rgba(5, 2, 10, 0.88));
	overflow: hidden;
	cursor: pointer;
	-webkit-animation: slotBigIn 0.35s ease both;
	animation: slotBigIn 0.35s ease both;
}

.slot-big.out {
	-webkit-animation: slotBigOut 0.4s ease forwards;
	animation: slotBigOut 0.4s ease forwards;
}

.slot-rays {
	position: absolute;
	left: 50%;
	top: 45%;
	width: 640px;
	height: 640px;
	margin: -320px 0 0 -320px;
	background: repeating-conic-gradient(from 0deg, rgba(255, 215, 90, 0.28) 0deg 8deg, transparent 8deg 22deg);
	-webkit-mask: radial-gradient(circle, #000 0%, transparent 62%);
	mask: radial-gradient(circle, #000 0%, transparent 62%);
	-webkit-animation: slotRays 9s linear infinite;
	animation: slotRays 9s linear infinite;
}

.slot-big-title {
	position: relative;
	font: 900 40px/1 "Arial Black", Arial, sans-serif;
	letter-spacing: 2px;
	background: linear-gradient(180deg, #fffbe0 0%, #ffd34d 45%, #c97a06 56%, #ffe486 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-filter: drop-shadow(0 3px 0 #5a2a00) drop-shadow(0 0 18px rgba(255, 190, 60, 0.7));
	filter: drop-shadow(0 3px 0 #5a2a00) drop-shadow(0 0 18px rgba(255, 190, 60, 0.7));
	-webkit-animation: slotBigTitle 0.7s cubic-bezier(0.25, 1.7, 0.5, 1) both;
	animation: slotBigTitle 0.7s cubic-bezier(0.25, 1.7, 0.5, 1) both;
}

.slot-big-title.ka {
	font-family: Arial, sans-serif;
	font-size: 30px;
	font-weight: 900;
}

.slot-big-amount {
	position: relative;
	margin-top: 12px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	font: 900 34px/1 "Arial Black", Arial, sans-serif;
	color: #ffffff;
	text-shadow: 0 3px 0 #6a3a00, 0 0 14px rgba(255, 210, 90, 0.9);
	-webkit-animation: slotBigTitle 0.7s cubic-bezier(0.25, 1.7, 0.5, 1) 0.18s both;
	animation: slotBigTitle 0.7s cubic-bezier(0.25, 1.7, 0.5, 1) 0.18s both;
}

.slot-big-amount img {
	width: 34px;
	height: 34px;
	margin-right: 10px;
}

.slot-big-hint {
	position: relative;
	margin-top: 18px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.slot-fx {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	pointer-events: none;
}

@media (max-height: 720px) {
	.slot-scene { --cell: 64px; padding-top: 10px; }
	.slot-spin-btn { width: 76px; height: 76px; font-size: 16px; }
	.slot-controls { margin-top: 10px; }
	.slot-marquee { padding: 7px 0 8px; margin-bottom: 8px; }
	.slot-title { font-size: 19px; }
}

@media (max-height: 620px) {
	.slot-scene { --cell: 56px; padding: 8px 10px 8px; }
	.slot-spin-btn { width: 66px; height: 66px; font-size: 14px; }
	.slot-result { margin-top: 8px; min-height: 26px; }
	.slot-total-card { margin-top: 6px; padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.big-dialog.slot-dialog:before,
	.slot-bulbs b,
	.slot-rays,
	.slot-spin-btn {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* --- keyframes --- */
@-webkit-keyframes slotAmbient { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes slotAmbient { from { opacity: 0.55; } to { opacity: 1; } }

@-webkit-keyframes slotBulb { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; box-shadow: none; } }
@keyframes slotBulb { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; box-shadow: none; } }

@-webkit-keyframes slotTense { to { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff1b0, 0 0 28px rgba(255, 220, 90, 1); } }
@keyframes slotTense { to { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff1b0, 0 0 28px rgba(255, 220, 90, 1); } }

@-webkit-keyframes slotWinSym {
	from { -webkit-transform: scale(1); -webkit-filter: drop-shadow(0 0 0 rgba(255, 210, 60, 0)); }
	to { -webkit-transform: scale(1.1); -webkit-filter: drop-shadow(0 0 8px rgba(255, 200, 40, 0.95)); }
}
@keyframes slotWinSym {
	from { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 210, 60, 0)); }
	to { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 200, 40, 0.95)); }
}

@-webkit-keyframes slotLine { to { opacity: 0.35; } }
@keyframes slotLine { to { opacity: 0.35; } }

@-webkit-keyframes slotReady { 50% { -webkit-filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 90, 80, 0.6)); } }
@keyframes slotReady { 50% { filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 90, 80, 0.6)); } }

@-webkit-keyframes slotPop { from { -webkit-transform: scale(0.4); opacity: 0; } }
@keyframes slotPop { from { transform: scale(0.4); opacity: 0; } }

@-webkit-keyframes slotBump { 50% { -webkit-transform: scale(1.18); color: #fff3b0; } }
@keyframes slotBump { 50% { transform: scale(1.18); color: #fff3b0; } }

@-webkit-keyframes slotFloat {
	0% { -webkit-transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
	18% { -webkit-transform: translate(-50%, -6px) scale(1.15); opacity: 1; }
	70% { opacity: 1; }
	100% { -webkit-transform: translate(-50%, -60px) scale(1); opacity: 0; }
}
@keyframes slotFloat {
	0% { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
	18% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; }
	70% { opacity: 1; }
	100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

@-webkit-keyframes slotBigIn { from { opacity: 0; } }
@keyframes slotBigIn { from { opacity: 0; } }

@-webkit-keyframes slotBigOut { to { opacity: 0; } }
@keyframes slotBigOut { to { opacity: 0; } }

@-webkit-keyframes slotRays { to { -webkit-transform: rotate(360deg); } }
@keyframes slotRays { to { transform: rotate(360deg); } }

@-webkit-keyframes slotBigTitle { from { -webkit-transform: scale(0.2); opacity: 0; } }
@keyframes slotBigTitle { from { transform: scale(0.2); opacity: 0; } }

/* ========== END SLOT GAME ========== */

/* ========== SLOT 2 GAME (5x3 Reel King) ========== */
/* one cabinet for both 5x3 games; .gs-king and .gs-fruit set the colours */

.big-dialog.gs-dialog {
	background:
		radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 196, 120, 0.18), transparent 70%),
		radial-gradient(ellipse 90% 50% at 50% 110%, var(--gs-halo, rgba(20, 40, 150, 0.4)), transparent 70%),
		rgba(3, 3, 8, 0.93);
}

.big-dialog.gs-dialog.gs-fruit {
	--gs-halo: rgba(170, 60, 10, 0.45);
}

.big-dialog.gs-dialog:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 12% 3%, rgba(255, 190, 90, 0.4) 0, transparent 30px),
		radial-gradient(circle at 38% 1%, rgba(255, 70, 80, 0.3) 0, transparent 38px),
		radial-gradient(circle at 66% 4%, rgba(255, 200, 110, 0.34) 0, transparent 26px),
		radial-gradient(circle at 90% 2%, rgba(200, 80, 255, 0.24) 0, transparent 36px),
		radial-gradient(circle at 8% 97%, rgba(255, 80, 90, 0.3) 0, transparent 36px),
		radial-gradient(circle at 32% 99%, rgba(255, 196, 100, 0.34) 0, transparent 28px),
		radial-gradient(circle at 62% 96%, rgba(255, 120, 60, 0.28) 0, transparent 34px),
		radial-gradient(circle at 88% 98%, rgba(255, 190, 90, 0.38) 0, transparent 30px),
		radial-gradient(circle at 5% 30%, rgba(255, 190, 90, 0.32) 0, transparent 40px),
		radial-gradient(circle at 10% 70%, rgba(255, 60, 70, 0.26) 0, transparent 54px),
		radial-gradient(circle at 95% 24%, rgba(255, 70, 90, 0.28) 0, transparent 48px),
		radial-gradient(circle at 92% 64%, rgba(255, 196, 100, 0.3) 0, transparent 40px);
	-webkit-animation: slotAmbient 5s ease-in-out infinite alternate;
	animation: slotAmbient 5s ease-in-out infinite alternate;
}

.gs-dialog .big-dialog-inner {
	width: 440px;
	max-width: 97%;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-border-radius: 18px;
	border-radius: 18px;
	box-shadow: 0 0 60px var(--gs-glow, rgba(40, 70, 220, 0.28)), 0 18px 60px rgba(0, 0, 0, 0.75);
	background-color: var(--gs-bg, #0b1340);
	background-image:
		radial-gradient(ellipse at 50% 18%, rgba(255, 220, 160, 0.12), transparent 60%),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 14px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 14px),
		linear-gradient(180deg, var(--gs-bg1, #152060) 0%, var(--gs-bg, #0b1340) 50%, var(--gs-bg2, #04071c) 100%);
}

.gs-dialog.gs-fruit .big-dialog-inner {
	--gs-glow: rgba(255, 120, 30, 0.3);
	--gs-bg1: #7a2a12;
	--gs-bg: #4a1608;
	--gs-bg2: #1c0803;
}

.gs-dialog .big-dialog-header {
	height: 50px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}

.gs-dialog .big-dialog-title {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ffd34d;
	text-shadow: 0 2px 0 #4a1a00, 0 0 12px rgba(255, 190, 60, 0.45);
}

/* --- scene --- */
.gs-scene {
	--cell: 60px;
	position: relative;
	padding: 12px 10px 10px;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}

.gs-sun {
	display: none;
}

.gs-scene.gs-fruit .gs-sun {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
}

.gs-scene.gs-fruit .gs-sun:before {
	content: "";
	position: absolute;
	left: 50%;
	top: -80px;
	width: 600px;
	height: 600px;
	margin-left: -300px;
	background: repeating-conic-gradient(from 0deg, rgba(255, 230, 120, 0.11) 0deg 9deg, transparent 9deg 24deg);
	-webkit-mask: radial-gradient(circle, #000 0%, transparent 58%);
	mask: radial-gradient(circle, #000 0%, transparent 58%);
	pointer-events: none;
	-webkit-animation: slotRays 40s linear infinite;
	animation: slotRays 40s linear infinite;
}

/* --- cabinet --- */
.gs-machine {
	position: relative;
	z-index: 1;
	padding: 10px 10px 14px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 220, 160, 0.2), transparent 55%),
		linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, transparent 60%),
		linear-gradient(180deg, var(--gs-m1, #233a9e) 0%, var(--gs-m2, #122263) 42%, var(--gs-m3, #070d2e) 100%);
	box-shadow:
		0 0 0 2px #c9973a,
		0 14px 30px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -10px 24px rgba(0, 0, 0, 0.45);
	-webkit-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
}

.gs-scene.gs-fruit .gs-machine {
	--gs-m1: #c8451c;
	--gs-m2: #7e2410;
	--gs-m3: #2e0a04;
}

.gs-machine.win-state {
	box-shadow:
		0 0 0 2px #ffd970,
		0 0 34px rgba(255, 200, 70, 0.55),
		0 14px 30px rgba(0, 0, 0, 0.6),
		inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -10px 24px rgba(0, 0, 0, 0.45);
}

/* --- marquee --- */
.gs-marquee {
	position: relative;
	margin: 0 6px 10px;
	padding: 9px 0 10px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	background: linear-gradient(180deg, #0a0614, #040208);
	box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gs-title {
	font: 900 20px/1 "Arial Black", Arial, sans-serif;
	letter-spacing: 3px;
	background: linear-gradient(180deg, #fff6c9 0%, #ffd34d 45%, #d08a12 55%, #ffe486 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-filter: drop-shadow(0 2px 0 #5a2a00) drop-shadow(0 0 10px rgba(255, 190, 60, 0.45));
	filter: drop-shadow(0 2px 0 #5a2a00) drop-shadow(0 0 10px rgba(255, 190, 60, 0.45));
}

.gs-title i {
	font-style: normal;
	font-size: 14px;
	vertical-align: 2px;
	margin: 0 8px;
}

.gs-bulbs {
	position: absolute;
	left: 10px;
	right: 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	pointer-events: none;
}

.gs-bulbs.top { top: -4px; }
.gs-bulbs.bottom { bottom: -4px; }

.gs-bulbs b {
	width: 7px;
	height: 7px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ffcf5a;
	box-shadow: 0 0 6px #ffbe3b, 0 0 2px #fff inset;
	-webkit-animation: slotBulb 1.6s linear infinite;
	animation: slotBulb 1.6s linear infinite;
}

.gs-machine.party .gs-bulbs b {
	-webkit-animation-duration: 0.45s;
	animation-duration: 0.45s;
}

/* --- reel window --- */
.gs-window {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 8px 14px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background: linear-gradient(180deg, #120914, #07040b);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gs-reel {
	position: relative;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	height: calc(var(--cell) * 3);
	overflow: hidden;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background: linear-gradient(90deg, #d9d0c2 0%, #fffaf0 22%, #ffffff 50%, #fffaf0 78%, #d9d0c2 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.gs-reel + .gs-reel {
	margin-left: 4px;
}

.gs-reel:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 4, 14, 0.7) 0%, rgba(10, 4, 14, 0.12) 16%, transparent 30%, transparent 70%, rgba(10, 4, 14, 0.12) 84%, rgba(10, 4, 14, 0.7) 100%);
}

.gs-reel.tense {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px #ffd34d, 0 0 18px rgba(255, 200, 60, 0.8);
	-webkit-animation: slotTense 0.5s ease-in-out infinite alternate;
	animation: slotTense 0.5s ease-in-out infinite alternate;
}

.gs-cell {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: var(--cell);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	will-change: transform;
}

.gs-cell svg {
	width: 86%;
	height: 86%;
	overflow: visible;
}

.gs-reel.fast .gs-cell svg {
	-webkit-filter: url(#gs-vblur);
	filter: url(#gs-vblur);
}

.gs-cell.win svg {
	-webkit-animation: slotWinSym 0.7s ease-in-out infinite alternate;
	animation: slotWinSym 0.7s ease-in-out infinite alternate;
}

/* --- the three paylines --- */
.gs-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	pointer-events: none;
	z-index: 3;
}

.gs-line[data-row="0"] { top: calc(8px + var(--cell) * 0.5); }
.gs-line[data-row="1"] { top: calc(8px + var(--cell) * 1.5); }
.gs-line[data-row="2"] { top: calc(8px + var(--cell) * 2.5); }

.gs-line em {
	position: absolute;
	top: -8px;
	width: 12px;
	height: 16px;
	font: 900 9px/16px Arial, sans-serif;
	font-style: normal;
	text-align: center;
	color: #3a2200;
	background: linear-gradient(180deg, #ffe07a, #b9780d);
	-webkit-border-radius: 3px;
	border-radius: 3px;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s, box-shadow 0.3s;
	transition: opacity 0.3s, box-shadow 0.3s;
}

.gs-line em:first-child { left: 1px; }
.gs-line em:last-child { right: 1px; }

.gs-line span {
	position: absolute;
	left: 14px;
	right: 14px;
	top: -1.5px;
	height: 3px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, #ffe27a 10%, #fff6c9 50%, #ffe27a 90%, transparent);
	box-shadow: 0 0 10px #ffc93c, 0 0 22px rgba(255, 190, 50, 0.7);
	opacity: 0;
	-webkit-transform: scaleX(0.2);
	transform: scaleX(0.2);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	transition: opacity 0.2s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.gs-line.on span {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	-webkit-animation: slotLine 0.5s ease-in-out 0.35s 5 alternate;
	animation: slotLine 0.5s ease-in-out 0.35s 5 alternate;
}

.gs-line.on em {
	opacity: 1;
	box-shadow: 0 0 8px #ffc93c;
}

/* --- spin button --- */
.gs-controls {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 14px;
}

.gs-spin-btn {
	position: relative;
	width: 84px;
	height: 84px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font: 900 18px/1 "Arial Black", Arial, sans-serif;
	letter-spacing: 1.5px;
	color: #ffffff;
	text-shadow: 0 2px 0 #7a0d1a, 0 0 8px rgba(255, 255, 255, 0.35);
	background: radial-gradient(circle at 50% 35%, var(--gs-b1, #ff7a6a) 0%, var(--gs-b2, #e8253a) 45%, var(--gs-b3, #9b0d22) 100%);
	box-shadow:
		0 0 0 4px #1a0d22, 0 0 0 6px #c9973a,
		0 7px 0 6px #120716,
		0 14px 22px 6px rgba(0, 0, 0, 0.55),
		inset 0 3px 6px rgba(255, 255, 255, 0.45), inset 0 -8px 14px rgba(80, 0, 10, 0.6);
	cursor: pointer;
	-webkit-transition: -webkit-transform 0.12s ease, box-shadow 0.12s ease, -webkit-filter 0.2s;
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s;
	-webkit-animation: slotReady 1.6s ease-in-out infinite;
	animation: slotReady 1.6s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
}

.gs-scene.gs-fruit .gs-spin-btn {
	--gs-b1: #ffc36a;
	--gs-b2: #ff7a00;
	--gs-b3: #b4420a;
	text-shadow: 0 2px 0 #7a3a00, 0 0 8px rgba(255, 255, 255, 0.35);
}

.gs-spin-btn:after {
	content: "";
	position: absolute;
	left: 22%;
	top: 10%;
	width: 56%;
	height: 30%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.gs-spin-btn:active:not(.disabled),
.gs-spin-btn.press {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	box-shadow:
		0 0 0 4px #1a0d22, 0 0 0 6px #c9973a,
		0 2px 0 6px #120716,
		0 6px 12px 6px rgba(0, 0, 0, 0.5),
		inset 0 3px 6px rgba(255, 255, 255, 0.35), inset 0 -4px 10px rgba(80, 0, 10, 0.6);
}

.gs-spin-btn.disabled {
	-webkit-filter: saturate(0.35) brightness(0.7);
	filter: saturate(0.35) brightness(0.7);
	cursor: default;
	-webkit-animation: none;
	animation: none;
}

@media (max-height: 720px) {
	.gs-scene { padding-top: 8px; }
	.gs-spin-btn { width: 72px; height: 72px; font-size: 15px; }
	.gs-controls { margin-top: 10px; }
	.gs-marquee { padding: 7px 0 8px; margin-bottom: 8px; }
	.gs-title { font-size: 17px; }
}

@media (max-height: 620px) {
	.gs-scene { padding: 6px 8px 6px; }
	.gs-spin-btn { width: 62px; height: 62px; font-size: 13px; }
	.gs-result { margin-top: 6px; min-height: 24px; }
	.bn-total-card { margin-top: 6px; padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.big-dialog.gs-dialog:before,
	.gs-bulbs b,
	.gs-sun:before,
	.gs-spin-btn {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* ========== END FRUIT GAME ========== */

/* ========== ONE-TIME SECOND CHANCE ========== */
.rescue-reward {
	position: relative;
	overflow: hidden;
	min-height: 260px;
	padding: 28px 20px 22px;
	text-align: center;
}

.rescue-reward-rays {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 220px;
	height: 220px;
	margin-left: -110px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 210, 55, 0.35) 0%, rgba(255, 210, 55, 0.08) 48%, rgba(255, 210, 55, 0) 70%);
	-webkit-animation: rescueRewardGlow 1.2s ease-in-out infinite alternate;
	animation: rescueRewardGlow 1.2s ease-in-out infinite alternate;
}

.rescue-reward-box {
	position: relative;
	z-index: 1;
	width: 112px;
	height: 112px;
	-webkit-animation: rescueRewardBox 0.7s cubic-bezier(.2, .9, .3, 1.25) both;
	animation: rescueRewardBox 0.7s cubic-bezier(.2, .9, .3, 1.25) both;
}

.rescue-reward-title {
	position: relative;
	z-index: 1;
	margin-top: 8px;
	font-size: 18px;
	font-weight: bold;
}

.rescue-reward-coins {
	position: relative;
	z-index: 1;
	margin-top: 12px;
	color: #ffd237;
	font-size: 30px;
	font-weight: bold;
	-webkit-animation: rescueRewardCoins 0.45s 0.45s ease-out both;
	animation: rescueRewardCoins 0.45s 0.45s ease-out both;
}

.rescue-reward-coins img {
	width: 28px;
	vertical-align: -3px;
}

.rescue-reward-text {
	position: relative;
	z-index: 1;
	margin-top: 12px;
	font-size: 14px;
	color: #aaa;
}

@-webkit-keyframes rescueRewardGlow {
	from { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.65; }
	to { -webkit-transform: scale(1.08); transform: scale(1.08); opacity: 1; }
}

@keyframes rescueRewardGlow {
	from { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.65; }
	to { -webkit-transform: scale(1.08); transform: scale(1.08); opacity: 1; }
}

@-webkit-keyframes rescueRewardBox {
	0% { -webkit-transform: translateY(28px) scale(0.55); transform: translateY(28px) scale(0.55); opacity: 0; }
	70% { -webkit-transform: translateY(-6px) scale(1.08); transform: translateY(-6px) scale(1.08); opacity: 1; }
	100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes rescueRewardBox {
	0% { -webkit-transform: translateY(28px) scale(0.55); transform: translateY(28px) scale(0.55); opacity: 0; }
	70% { -webkit-transform: translateY(-6px) scale(1.08); transform: translateY(-6px) scale(1.08); opacity: 1; }
	100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; }
}

@-webkit-keyframes rescueRewardCoins {
	from { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
	to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@keyframes rescueRewardCoins {
	from { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
	to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/* ========== END ONE-TIME SECOND CHANCE ========== */

/* ========== 12-HOUR GIFT CHEST ========== */
.timed-chest-widget {
	position: absolute;
	top: 225px;
	right: 15px;
	z-index: 1;
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	cursor: pointer;
	border: 1px solid rgba(255, 211, 70, 0.55);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(255, 214, 90, 0.22), rgba(16, 32, 58, 0.96) 72%);
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
	-webkit-transition: border-color 0.2s, box-shadow 0.2s;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.timed-chest-widget:hover {
	border-color: rgba(255, 222, 92, 0.9);
}

.timed-chest-widget[item-ready="yes"] {
	border-color: #ffd237;
	box-shadow: 0 5px 18px rgba(255, 196, 35, 0.35), inset 0 0 12px rgba(255, 221, 91, 0.12);
}

.timed-chest-widget[item-ready="yes"]::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border: 1px solid rgba(255, 211, 70, 0.5);
	border-radius: 50%;
	-webkit-animation: promoRing 2.2s ease-out infinite;
	animation: promoRing 2.2s ease-out infinite;
}

.timed-chest-widget[item-ready="yes"]::after {
	content: "✦";
	position: absolute;
	top: -7px;
	right: -4px;
	color: #ffe36e;
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 0 8px rgba(255, 222, 83, 0.9);
	-webkit-animation: promoStar 1.35s ease-in-out infinite alternate;
	animation: promoStar 1.35s ease-in-out infinite alternate;
}

.timed-chest-widget[item-loading="yes"] {
	pointer-events: none;
	opacity: 0.6;
}

.timed-chest-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -16px 0 0 -15px;
}

.timed-chest-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.timed-chest-widget[item-ready="yes"] .timed-chest-icon {
	-webkit-animation: timedChestWiggle 2.4s ease-in-out infinite;
	animation: timedChestWiggle 2.4s ease-in-out infinite;
}

.timed-chest-countdown {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 5px;
	padding: 2px 6px;
	color: #ffe27c;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: 0.3px;
	white-space: nowrap;
	border: 1px solid rgba(255, 211, 70, 0.3);
	border-radius: 8px;
	background: rgba(8, 17, 34, 0.9);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.timed-chest-widget[item-ready="yes"] .timed-chest-countdown {
	color: #18202d;
	border-color: transparent;
	background: linear-gradient(180deg, #ffe98b, #ffc62e);
	box-shadow: 0 3px 10px rgba(255, 198, 46, 0.3);
}

@-webkit-keyframes timedChestWiggle {
	0%, 50%, 100% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); }
	10% { -webkit-transform: rotate(-10deg) translateY(-2px); transform: rotate(-10deg) translateY(-2px); }
	20% { -webkit-transform: rotate(9deg) translateY(-2px); transform: rotate(9deg) translateY(-2px); }
	30% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }
	40% { -webkit-transform: rotate(4deg); transform: rotate(4deg); }
}
@keyframes timedChestWiggle {
	0%, 50%, 100% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); }
	10% { -webkit-transform: rotate(-10deg) translateY(-2px); transform: rotate(-10deg) translateY(-2px); }
	20% { -webkit-transform: rotate(9deg) translateY(-2px); transform: rotate(9deg) translateY(-2px); }
	30% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }
	40% { -webkit-transform: rotate(4deg); transform: rotate(4deg); }
}
/* opening ceremony */
.tc-ceremony {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000002;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.tc-ceremony.tc-ceremony-in {
	opacity: 1;
}

.tc-ceremony.tc-ceremony-out {
	opacity: 0;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.tc-ceremony-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(circle at 50% 40%, rgba(66, 36, 112, 0.98) 0%, rgba(22, 16, 46, 0.985) 38%, rgba(6, 9, 20, 0.99) 75%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.tc-ceremony-stage,
.tc-ceremony-info {
	position: relative;
	width: 300px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.tc-ceremony-stage {
	height: 270px;
	pointer-events: none;
}

.tc-ceremony-rays {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 560px;
	height: 560px;
	margin: -280px 0 0 -280px;
	opacity: 0;
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
	-webkit-transition: opacity 0.7s ease, -webkit-transform 0.9s cubic-bezier(.2, 1.2, .4, 1);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2, 1.2, .4, 1);
}

.tc-ceremony-rays::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 216, 95, 0.2) 0deg 8deg, rgba(255, 216, 95, 0) 8deg 22.5deg);
	-webkit-mask: radial-gradient(circle, #000 14%, transparent 64%);
	mask: radial-gradient(circle, #000 14%, transparent 64%);
	-webkit-animation: tcRaysSpin 16s linear infinite;
	animation: tcRaysSpin 16s linear infinite;
}

.tc-ceremony[item-stage="charge"] .tc-ceremony-rays {
	opacity: 0.35;
	-webkit-transform: scale(0.75);
	transform: scale(0.75);
}

.tc-ceremony[item-stage="open"] .tc-ceremony-rays,
.tc-ceremony[item-stage="done"] .tc-ceremony-rays,
.tc-ceremony[item-stage="leave"] .tc-ceremony-rays {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.tc-ceremony-halo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	margin: -120px 0 0 -120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 226, 110, 0.55) 0%, rgba(255, 186, 40, 0.18) 45%, rgba(255, 186, 40, 0) 70%);
	opacity: 0.45;
	-webkit-animation: tcHaloCharge 0.55s ease-in-out infinite alternate;
	animation: tcHaloCharge 0.55s ease-in-out infinite alternate;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-halo,
.tc-ceremony[item-stage="done"] .tc-ceremony-halo,
.tc-ceremony[item-stage="leave"] .tc-ceremony-halo {
	opacity: 1;
	-webkit-animation: tcHaloOpen 1.6s ease-in-out infinite alternate;
	animation: tcHaloOpen 1.6s ease-in-out infinite alternate;
}

.tc-ceremony-beam {
	position: absolute;
	bottom: 128px;
	left: 50%;
	z-index: 1;
	width: 96px;
	height: 240px;
	margin-left: -48px;
	border-radius: 50% 50% 20px 20px;
	background: linear-gradient(to top, rgba(255, 240, 170, 0.9), rgba(255, 220, 110, 0.35) 55%, rgba(255, 220, 110, 0));
	-webkit-filter: blur(5px);
	filter: blur(5px);
	opacity: 0;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-beam,
.tc-ceremony[item-stage="done"] .tc-ceremony-beam,
.tc-ceremony[item-stage="leave"] .tc-ceremony-beam {
	-webkit-animation: tcBeam 1.3s ease-out both;
	animation: tcBeam 1.3s ease-out both;
}

.tc-ceremony-chest {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 150px;
	height: 150px;
	margin: -62px 0 0 -75px;
	-webkit-filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
	filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
	-webkit-animation: tcChestDrop 0.55s cubic-bezier(.2, 1.35, .45, 1) both, tcChestRumble 1.1s 0.55s ease-in both, tcChestShake 0.14s 1.65s linear infinite;
	animation: tcChestDrop 0.55s cubic-bezier(.2, 1.35, .45, 1) both, tcChestRumble 1.1s 0.55s ease-in both, tcChestShake 0.14s 1.65s linear infinite;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-chest,
.tc-ceremony[item-stage="done"] .tc-ceremony-chest,
.tc-ceremony[item-stage="leave"] .tc-ceremony-chest {
	-webkit-animation: tcChestPop 0.6s cubic-bezier(.2, 1.5, .4, 1) both;
	animation: tcChestPop 0.6s cubic-bezier(.2, 1.5, .4, 1) both;
}

.tc-ceremony-chest-base,
.tc-ceremony-chest-lid {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.tc-ceremony-chest-base svg,
.tc-ceremony-chest-lid svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tc-ceremony-chest-lid {
	-webkit-transform-origin: 50% 44%;
	transform-origin: 50% 44%;
	-webkit-animation: tcLidRattle 0.32s 0.6s ease-in-out infinite;
	animation: tcLidRattle 0.32s 0.6s ease-in-out infinite;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-chest-lid,
.tc-ceremony[item-stage="done"] .tc-ceremony-chest-lid,
.tc-ceremony[item-stage="leave"] .tc-ceremony-chest-lid {
	-webkit-animation: tcLidOpen 0.7s cubic-bezier(.2, 1.4, .4, 1) both;
	animation: tcLidOpen 0.7s cubic-bezier(.2, 1.4, .4, 1) both;
}

.tc-ceremony .tc-inner-glow {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease 0.1s;
	transition: opacity 0.3s ease 0.1s;
}

.tc-ceremony[item-stage="open"] .tc-inner-glow,
.tc-ceremony[item-stage="done"] .tc-inner-glow,
.tc-ceremony[item-stage="leave"] .tc-inner-glow {
	opacity: 1;
}

.tc-ceremony-flash {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	width: 60px;
	height: 60px;
	margin: -40px 0 0 -30px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff 0%, rgba(255, 244, 196, 0.85) 35%, rgba(255, 230, 140, 0) 70%);
	opacity: 0;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-flash {
	-webkit-animation: tcFlash 0.7s ease-out both;
	animation: tcFlash 0.7s ease-out both;
}

.tc-ceremony-burst {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
}

.tc-burst-coin,
.tc-burst-confetti {
	position: absolute;
	top: 130px;
	left: 50%;
	opacity: 0;
}

.tc-burst-coin {
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	-webkit-animation: tcCoinBurst 1.5s cubic-bezier(.2, .7, .4, 1) both;
	animation: tcCoinBurst 1.5s cubic-bezier(.2, .7, .4, 1) both;
}

.tc-burst-confetti {
	width: 7px;
	height: 12px;
	margin: -6px 0 0 -3px;
	border-radius: 2px;
	background: var(--c);
	-webkit-animation: tcConfetti 1.9s ease-out both;
	animation: tcConfetti 1.9s ease-out both;
}

.tc-ceremony-info {
	min-height: 178px;
	text-align: center;
}

.tc-ceremony-hint {
	padding-top: 14px;
	color: #e6dcff;
	font-size: 15px;
	letter-spacing: 0.4px;
	-webkit-animation: tcHintPulse 0.9s ease-in-out infinite alternate;
	animation: tcHintPulse 0.9s ease-in-out infinite alternate;
}

.tc-ceremony:not([item-stage="charge"]) .tc-ceremony-hint {
	display: none;
}

.tc-ceremony-title,
.tc-ceremony-amount,
.tc-ceremony-next,
.tc-ceremony-collect {
	opacity: 0;
	-webkit-transition: opacity 0.4s ease, -webkit-transform 0.5s cubic-bezier(.2, 1.5, .4, 1);
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2, 1.5, .4, 1);
}

.tc-ceremony[item-stage="charge"] .tc-ceremony-title,
.tc-ceremony[item-stage="charge"] .tc-ceremony-amount,
.tc-ceremony[item-stage="charge"] .tc-ceremony-next,
.tc-ceremony[item-stage="charge"] .tc-ceremony-collect {
	display: none;
}

.tc-ceremony-title {
	color: #ffffff;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.5px;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.tc-ceremony-amount {
	margin-top: 6px;
	color: #ffd84f;
	font-size: 46px;
	font-weight: bold;
	line-height: 1.15;
	white-space: nowrap;
	text-shadow: 0 0 18px rgba(255, 200, 40, 0.55), 0 3px 0 #a86a00;
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.tc-ceremony-amount img {
	width: 38px;
	vertical-align: -4px;
	-webkit-filter: drop-shadow(0 0 8px rgba(255, 210, 60, 0.7));
	filter: drop-shadow(0 0 8px rgba(255, 210, 60, 0.7));
}

.tc-ceremony-amount.tc-ceremony-amount-pop {
	-webkit-animation: tcAmountPop 0.45s ease-out;
	animation: tcAmountPop 0.45s ease-out;
}

.tc-ceremony-next {
	margin-top: 8px;
	color: #aebbd0;
	font-size: 13px;
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

.tc-ceremony-collect {
	position: relative;
	display: inline-block;
	min-width: 170px;
	margin-top: 18px;
	padding: 12px 28px;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	pointer-events: none;
	color: #3a2300;
	font-size: 17px;
	font-weight: bold;
	border-radius: 26px;
	background: linear-gradient(180deg, #fff09a 0%, #ffc52e 55%, #f0a516 100%);
	box-shadow: 0 6px 22px rgba(255, 186, 36, 0.45), inset 0 -3px 0 rgba(150, 90, 0, 0.35);
	-webkit-transform: translateY(16px) scale(0.9);
	transform: translateY(16px) scale(0.9);
}

.tc-ceremony-collect::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
	-webkit-animation: tcCollectShine 2.2s 0.6s ease-in-out infinite;
	animation: tcCollectShine 2.2s 0.6s ease-in-out infinite;
}

.tc-ceremony[item-stage="open"] .tc-ceremony-title,
.tc-ceremony[item-stage="open"] .tc-ceremony-amount,
.tc-ceremony[item-stage="done"] .tc-ceremony-title,
.tc-ceremony[item-stage="done"] .tc-ceremony-amount,
.tc-ceremony[item-stage="done"] .tc-ceremony-next,
.tc-ceremony[item-stage="done"] .tc-ceremony-collect,
.tc-ceremony[item-stage="leave"] .tc-ceremony-title,
.tc-ceremony[item-stage="leave"] .tc-ceremony-amount,
.tc-ceremony[item-stage="leave"] .tc-ceremony-next {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.tc-ceremony[item-stage="done"] .tc-ceremony-collect {
	pointer-events: auto;
}

.tc-fly-coin {
	position: fixed;
	z-index: 100000003;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.75s cubic-bezier(.55, -0.25, .7, 1), opacity 0.75s ease-in;
	transition: transform 0.75s cubic-bezier(.55, -0.25, .7, 1), opacity 0.75s ease-in;
}

.tc-balance-pulse {
	display: inline-block;
	-webkit-animation: tcBalancePulse 0.55s ease-out;
	animation: tcBalancePulse 0.55s ease-out;
}

@media (max-height: 560px) {
	.tc-ceremony-stage,
	.tc-ceremony-info {
		zoom: 0.72;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-ceremony-rays::before,
	.tc-ceremony-halo,
	.tc-ceremony-chest,
	.tc-ceremony-chest-lid,
	.tc-ceremony-hint,
	.tc-ceremony-collect::after {
		-webkit-animation: none !important;
		animation: none !important;
	}

	.tc-ceremony[item-stage="open"] .tc-ceremony-chest-lid,
	.tc-ceremony[item-stage="done"] .tc-ceremony-chest-lid,
	.tc-ceremony[item-stage="leave"] .tc-ceremony-chest-lid {
		-webkit-transform: translateY(-34px) rotate(-14deg);
		transform: translateY(-34px) rotate(-14deg);
	}
}

@-webkit-keyframes tcRaysSpin {
	from { -webkit-transform: rotate(0); transform: rotate(0); }
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes tcRaysSpin {
	from { -webkit-transform: rotate(0); transform: rotate(0); }
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes tcHaloCharge {
	from { -webkit-transform: scale(0.75); transform: scale(0.75); }
	to { -webkit-transform: scale(0.95); transform: scale(0.95); }
}
@keyframes tcHaloCharge {
	from { -webkit-transform: scale(0.75); transform: scale(0.75); }
	to { -webkit-transform: scale(0.95); transform: scale(0.95); }
}
@-webkit-keyframes tcHaloOpen {
	from { -webkit-transform: scale(1.05); transform: scale(1.05); }
	to { -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@keyframes tcHaloOpen {
	from { -webkit-transform: scale(1.05); transform: scale(1.05); }
	to { -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@-webkit-keyframes tcBeam {
	0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); }
	25% { opacity: 1; -webkit-transform: scaleY(1.12); transform: scaleY(1.12); }
	100% { opacity: 0.5; -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes tcBeam {
	0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); }
	25% { opacity: 1; -webkit-transform: scaleY(1.12); transform: scaleY(1.12); }
	100% { opacity: 0.5; -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@-webkit-keyframes tcChestDrop {
	0% { opacity: 0; -webkit-transform: translateY(-160px) scale(0.6) rotate(-12deg); transform: translateY(-160px) scale(0.6) rotate(-12deg); }
	60% { opacity: 1; -webkit-transform: translateY(8px) scale(1.06, 0.92) rotate(2deg); transform: translateY(8px) scale(1.06, 0.92) rotate(2deg); }
	100% { opacity: 1; -webkit-transform: translateY(0) scale(1) rotate(0); transform: translateY(0) scale(1) rotate(0); }
}
@keyframes tcChestDrop {
	0% { opacity: 0; -webkit-transform: translateY(-160px) scale(0.6) rotate(-12deg); transform: translateY(-160px) scale(0.6) rotate(-12deg); }
	60% { opacity: 1; -webkit-transform: translateY(8px) scale(1.06, 0.92) rotate(2deg); transform: translateY(8px) scale(1.06, 0.92) rotate(2deg); }
	100% { opacity: 1; -webkit-transform: translateY(0) scale(1) rotate(0); transform: translateY(0) scale(1) rotate(0); }
}
@-webkit-keyframes tcChestRumble {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	10% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
	20% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
	35% { -webkit-transform: rotate(-4deg) translateY(-2px); transform: rotate(-4deg) translateY(-2px); }
	50% { -webkit-transform: rotate(4deg) translateY(-3px); transform: rotate(4deg) translateY(-3px); }
	62% { -webkit-transform: rotate(-6deg) translateY(-4px) scale(1.03); transform: rotate(-6deg) translateY(-4px) scale(1.03); }
	74% { -webkit-transform: rotate(6deg) translateY(-5px) scale(1.05); transform: rotate(6deg) translateY(-5px) scale(1.05); }
	86% { -webkit-transform: rotate(-7deg) translateY(-6px) scale(1.07); transform: rotate(-7deg) translateY(-6px) scale(1.07); }
	100% { -webkit-transform: rotate(0) translateY(-6px) scale(1.08); transform: rotate(0) translateY(-6px) scale(1.08); }
}
@keyframes tcChestRumble {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	10% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
	20% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
	35% { -webkit-transform: rotate(-4deg) translateY(-2px); transform: rotate(-4deg) translateY(-2px); }
	50% { -webkit-transform: rotate(4deg) translateY(-3px); transform: rotate(4deg) translateY(-3px); }
	62% { -webkit-transform: rotate(-6deg) translateY(-4px) scale(1.03); transform: rotate(-6deg) translateY(-4px) scale(1.03); }
	74% { -webkit-transform: rotate(6deg) translateY(-5px) scale(1.05); transform: rotate(6deg) translateY(-5px) scale(1.05); }
	86% { -webkit-transform: rotate(-7deg) translateY(-6px) scale(1.07); transform: rotate(-7deg) translateY(-6px) scale(1.07); }
	100% { -webkit-transform: rotate(0) translateY(-6px) scale(1.08); transform: rotate(0) translateY(-6px) scale(1.08); }
}
@-webkit-keyframes tcChestShake {
	0%, 100% { -webkit-transform: translate(0, -6px) rotate(0) scale(1.08); transform: translate(0, -6px) rotate(0) scale(1.08); }
	25% { -webkit-transform: translate(-3px, -7px) rotate(-5deg) scale(1.08); transform: translate(-3px, -7px) rotate(-5deg) scale(1.08); }
	75% { -webkit-transform: translate(3px, -5px) rotate(5deg) scale(1.08); transform: translate(3px, -5px) rotate(5deg) scale(1.08); }
}
@keyframes tcChestShake {
	0%, 100% { -webkit-transform: translate(0, -6px) rotate(0) scale(1.08); transform: translate(0, -6px) rotate(0) scale(1.08); }
	25% { -webkit-transform: translate(-3px, -7px) rotate(-5deg) scale(1.08); transform: translate(-3px, -7px) rotate(-5deg) scale(1.08); }
	75% { -webkit-transform: translate(3px, -5px) rotate(5deg) scale(1.08); transform: translate(3px, -5px) rotate(5deg) scale(1.08); }
}
@-webkit-keyframes tcChestPop {
	0% { -webkit-transform: translateY(-6px) scale(1.08); transform: translateY(-6px) scale(1.08); }
	30% { -webkit-transform: translateY(6px) scale(1.18, 0.86); transform: translateY(6px) scale(1.18, 0.86); }
	100% { -webkit-transform: translateY(14px) scale(1); transform: translateY(14px) scale(1); }
}
@keyframes tcChestPop {
	0% { -webkit-transform: translateY(-6px) scale(1.08); transform: translateY(-6px) scale(1.08); }
	30% { -webkit-transform: translateY(6px) scale(1.18, 0.86); transform: translateY(6px) scale(1.18, 0.86); }
	100% { -webkit-transform: translateY(14px) scale(1); transform: translateY(14px) scale(1); }
}
@-webkit-keyframes tcLidRattle {
	0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); }
	50% { -webkit-transform: translateY(-3px) rotate(-2deg); transform: translateY(-3px) rotate(-2deg); }
}
@keyframes tcLidRattle {
	0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); }
	50% { -webkit-transform: translateY(-3px) rotate(-2deg); transform: translateY(-3px) rotate(-2deg); }
}
@-webkit-keyframes tcLidOpen {
	0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); }
	45% { -webkit-transform: translateY(-58px) rotate(-24deg); transform: translateY(-58px) rotate(-24deg); }
	100% { -webkit-transform: translateY(-34px) rotate(-14deg); transform: translateY(-34px) rotate(-14deg); }
}
@keyframes tcLidOpen {
	0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); }
	45% { -webkit-transform: translateY(-58px) rotate(-24deg); transform: translateY(-58px) rotate(-24deg); }
	100% { -webkit-transform: translateY(-34px) rotate(-14deg); transform: translateY(-34px) rotate(-14deg); }
}
@-webkit-keyframes tcFlash {
	0% { opacity: 1; -webkit-transform: scale(0.3); transform: scale(0.3); }
	100% { opacity: 0; -webkit-transform: scale(9); transform: scale(9); }
}
@keyframes tcFlash {
	0% { opacity: 1; -webkit-transform: scale(0.3); transform: scale(0.3); }
	100% { opacity: 0; -webkit-transform: scale(9); transform: scale(9); }
}
@-webkit-keyframes tcCoinBurst {
	0% { opacity: 0; -webkit-transform: translate(0, 0) scale(0.3) rotate(0); transform: translate(0, 0) scale(0.3) rotate(0); }
	10% { opacity: 1; }
	45% { opacity: 1; -webkit-transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
	100% { opacity: 0; -webkit-transform: translate(var(--x2), var(--y2)) scale(0.8) rotate(var(--r)); transform: translate(var(--x2), var(--y2)) scale(0.8) rotate(var(--r)); }
}
@keyframes tcCoinBurst {
	0% { opacity: 0; -webkit-transform: translate(0, 0) scale(0.3) rotate(0); transform: translate(0, 0) scale(0.3) rotate(0); }
	10% { opacity: 1; }
	45% { opacity: 1; -webkit-transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
	100% { opacity: 0; -webkit-transform: translate(var(--x2), var(--y2)) scale(0.8) rotate(var(--r)); transform: translate(var(--x2), var(--y2)) scale(0.8) rotate(var(--r)); }
}
@-webkit-keyframes tcConfetti {
	0% { opacity: 0; -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; -webkit-transform: translate(var(--x), var(--y)) rotate(var(--r)); transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes tcConfetti {
	0% { opacity: 0; -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; -webkit-transform: translate(var(--x), var(--y)) rotate(var(--r)); transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@-webkit-keyframes tcHintPulse {
	from { opacity: 0.55; }
	to { opacity: 1; }
}
@keyframes tcHintPulse {
	from { opacity: 0.55; }
	to { opacity: 1; }
}
@-webkit-keyframes tcAmountPop {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	40% { -webkit-transform: scale(1.18); transform: scale(1.18); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes tcAmountPop {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	40% { -webkit-transform: scale(1.18); transform: scale(1.18); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes tcCollectShine {
	0% { left: -60%; }
	55%, 100% { left: 130%; }
}
@keyframes tcCollectShine {
	0% { left: -60%; }
	55%, 100% { left: 130%; }
}
@-webkit-keyframes tcBalancePulse {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	40% { -webkit-transform: scale(1.3); transform: scale(1.3); color: #ffd84f; }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes tcBalancePulse {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	40% { -webkit-transform: scale(1.3); transform: scale(1.3); color: #ffd84f; }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
/* ========== END 12-HOUR GIFT CHEST ========== */

/* ========== PROMO INVITE REFRESH ========== */
.promo-icon {
	border: 1px solid rgba(255, 211, 70, 0.72);
	background-size: 27px 27px;
	background-color: #173250;
	box-shadow: 0 5px 18px rgba(255, 196, 35, 0.24), inset 0 0 12px rgba(255, 221, 91, 0.08);
	-webkit-animation: promoAttention 2.2s ease-in-out infinite;
	animation: promoAttention 2.2s ease-in-out infinite;
}

.promo-icon::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border: 1px solid rgba(255, 211, 70, 0.45);
	border-radius: 50%;
	-webkit-animation: promoRing 2.2s ease-out infinite;
	animation: promoRing 2.2s ease-out infinite;
}

.promo-icon::after {
	content: "✦";
	position: absolute;
	top: -8px;
	right: -5px;
	color: #ffe36e;
	font-size: 13px;
	line-height: 1;
	text-shadow: 0 0 8px rgba(255, 222, 83, 0.9);
	-webkit-animation: promoStar 1.35s ease-in-out infinite alternate;
	animation: promoStar 1.35s ease-in-out infinite alternate;
}

.promo-invite-content {
	padding: 6px 16px 18px;
}

.promo-invite-hero {
	position: relative;
	overflow: hidden;
	margin: -6px -16px 18px;
	padding: 25px 22px 20px;
	text-align: center;
	border-bottom: 1px solid rgba(255, 215, 73, 0.18);
	background: linear-gradient(180deg, rgba(255, 205, 48, 0.13), rgba(255, 205, 48, 0));
}

.promo-invite-rays {
	position: absolute;
	top: -58px;
	left: 50%;
	width: 220px;
	height: 220px;
	margin-left: -110px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 218, 74, 0.31), rgba(255, 218, 74, 0) 68%);
	-webkit-animation: promoHeroGlow 1.5s ease-in-out infinite alternate;
	animation: promoHeroGlow 1.5s ease-in-out infinite alternate;
}

.promo-invite-icon-wrap {
	position: relative;
	z-index: 1;
	width: 78px;
	height: 78px;
	margin: 0 auto;
	border: 1px solid rgba(255, 223, 101, 0.52);
	border-radius: 25px;
	background: linear-gradient(145deg, rgba(255, 218, 72, 0.25), rgba(255, 170, 28, 0.08));
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	-webkit-transform: rotate(-4deg);
	transform: rotate(-4deg);
	-webkit-animation: promoGiftFloat 1.8s ease-in-out infinite alternate;
	animation: promoGiftFloat 1.8s ease-in-out infinite alternate;
}

.promo-invite-icon {
	width: 52px;
	height: 52px;
	margin-top: 13px;
	object-fit: contain;
}

.promo-invite-star {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff1a3;
	box-shadow: 0 0 8px #ffd237;
}
.promo-invite-star-1 { top: -7px; right: 3px; }
.promo-invite-star-2 { right: -10px; bottom: 13px; }
.promo-invite-star-3 { bottom: -7px; left: 8px; }

.promo-invite-message {
	position: relative;
	z-index: 1;
	max-width: 320px;
	margin: 17px auto 0;
	color: #dce7f7;
	font-size: 14px;
	line-height: 1.45;
}

.promo-code-card {
	padding: 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.055);
}

.promo-code-label {
	margin-bottom: 7px;
	color: #aebdd2;
	font-size: 12px;
}

.promo-code-input-wrap {
	position: relative;
}

.promo-code-input {
	height: 46px !important;
	padding-right: 50px !important;
	box-sizing: border-box;
	color: #ffe27c !important;
	font-size: 21px !important;
	font-weight: bold;
	letter-spacing: 3px;
	text-align: center;
	border-color: rgba(255, 211, 70, 0.42) !important;
	background: rgba(255, 211, 70, 0.09) !important;
}

.promo-code-copy {
	position: absolute;
	top: 50%;
	right: 8px;
	padding: 6px 10px;
	cursor: pointer;
	color: #ffe27c;
	font-family: inherit;
	font-size: 11px;
	font-weight: bold;
	border: 1px solid rgba(255, 211, 70, 0.45);
	border-radius: 8px;
	background: rgba(255, 211, 70, 0.14);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.promo-code-copy:active {
	background: rgba(255, 211, 70, 0.28);
}

.v2-promo-dialog .promo-code-input {
	padding-right: 96px !important;
	padding-left: 96px !important;
}

.promo-reward-split {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-bottom: 13px;
	overflow: hidden;
	border: 1px solid rgba(255, 211, 70, 0.38);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 211, 70, 0.15), rgba(255, 162, 35, 0.06));
}

.promo-reward-side {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 8px 10px;
	text-align: center;
}

.promo-reward-side + .promo-reward-side {
	border-left: 1px dashed rgba(255, 211, 70, 0.35);
}

.promo-reward-label {
	color: #bdc9da;
	font-size: 12px;
}

.promo-reward-value {
	margin-top: 3px;
	color: #ffd84f;
	font-size: 21px;
	font-weight: bold;
	white-space: nowrap;
}

.promo-reward-value img {
	width: 21px;
	vertical-align: -3px;
}

.promo-steps {
	margin: 13px 0 0;
	padding: 0 2px;
	list-style: none;
	counter-reset: promo-step;
	text-align: left;
}

.promo-steps li {
	position: relative;
	margin-top: 7px;
	padding-left: 29px;
	color: #d3deee;
	font-size: 13px;
	line-height: 20px;
	counter-increment: promo-step;
}

.promo-steps li::before {
	content: counter(promo-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	color: #ffd84f;
	font-size: 11px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	border: 1px solid rgba(255, 211, 70, 0.5);
	border-radius: 50%;
	background: rgba(255, 211, 70, 0.14);
}

@media (max-height: 760px) {
	.v2-promo-dialog .promo-invite-hero {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin-bottom: 13px;
		padding: 13px 18px;
		text-align: left;
	}

	.v2-promo-dialog .promo-invite-rays {
		top: -90px;
		left: 50px;
	}

	.v2-promo-dialog .promo-invite-icon-wrap {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		width: 54px;
		height: 54px;
		margin: 0 14px 0 0;
		border-radius: 18px;
	}

	.v2-promo-dialog .promo-invite-icon {
		width: 36px;
		height: 36px;
		margin-top: 9px;
	}

	.v2-promo-dialog .promo-invite-message {
		margin: 0;
	}

	.v2-promo-dialog .promo-invite-star {
		display: none;
	}

	.v2-promo-dialog .promo-reward-split {
		margin-bottom: 10px;
	}

	.v2-promo-dialog .promo-steps {
		margin-top: 10px;
	}

	.v2-promo-dialog .promo-steps li {
		margin-top: 5px;
	}
}

.v2-promo-dialog .promo-share-button::before,
.v2-promo-dialog .big-dialog-button[button-style="light"]::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -2px 7px 0 -4px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.v2-promo-dialog .promo-share-button::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.6 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.3-1.5 1.6-1.5h1.7V4.1c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.6v3.1h2.7v8z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.6 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.3-1.5 1.6-1.5h1.7V4.1c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.6v3.1h2.7v8z'/></svg>");
}

.v2-promo-dialog .big-dialog-button[button-style="light"]::before {
	width: 14px;
	height: 14px;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
}

.promo-stats {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-top: 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.055);
}

.promo-stat {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 8px 10px;
	text-align: center;
}

.promo-stat + .promo-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-stat-value {
	color: #ffffff;
	font-size: 19px;
	font-weight: bold;
	white-space: nowrap;
}

.promo-stat-earned .promo-stat-value {
	color: #ffd84f;
}

.promo-stat-value img {
	width: 18px;
	vertical-align: -2px;
}

.promo-stat-label {
	margin-top: 3px;
	color: #aebdd2;
	font-size: 11px;
}

.promo-stat-since {
	margin-top: 1px;
	color: rgba(174, 189, 210, 0.6);
	font-size: 9px;
}

@-webkit-keyframes promoAttention {
	0%, 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
	10% { -webkit-transform: scale(1.08) rotate(-5deg); transform: scale(1.08) rotate(-5deg); }
	20% { -webkit-transform: scale(1.08) rotate(5deg); transform: scale(1.08) rotate(5deg); }
	30% { -webkit-transform: scale(1.04) rotate(0); transform: scale(1.04) rotate(0); }
}
@keyframes promoAttention {
	0%, 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
	10% { -webkit-transform: scale(1.08) rotate(-5deg); transform: scale(1.08) rotate(-5deg); }
	20% { -webkit-transform: scale(1.08) rotate(5deg); transform: scale(1.08) rotate(5deg); }
	30% { -webkit-transform: scale(1.04) rotate(0); transform: scale(1.04) rotate(0); }
}
@-webkit-keyframes promoRing {
	0% { opacity: 0.7; -webkit-transform: scale(0.82); transform: scale(0.82); }
	70%, 100% { opacity: 0; -webkit-transform: scale(1.35); transform: scale(1.35); }
}
@keyframes promoRing {
	0% { opacity: 0.7; -webkit-transform: scale(0.82); transform: scale(0.82); }
	70%, 100% { opacity: 0; -webkit-transform: scale(1.35); transform: scale(1.35); }
}
@-webkit-keyframes promoStar {
	from { opacity: 0.55; -webkit-transform: scale(0.75) rotate(0); transform: scale(0.75) rotate(0); }
	to { opacity: 1; -webkit-transform: scale(1.25) rotate(25deg); transform: scale(1.25) rotate(25deg); }
}
@keyframes promoStar {
	from { opacity: 0.55; -webkit-transform: scale(0.75) rotate(0); transform: scale(0.75) rotate(0); }
	to { opacity: 1; -webkit-transform: scale(1.25) rotate(25deg); transform: scale(1.25) rotate(25deg); }
}
@-webkit-keyframes promoHeroGlow {
	from { opacity: 0.7; -webkit-transform: scale(0.9); transform: scale(0.9); }
	to { opacity: 1; -webkit-transform: scale(1.08); transform: scale(1.08); }
}
@keyframes promoHeroGlow {
	from { opacity: 0.7; -webkit-transform: scale(0.9); transform: scale(0.9); }
	to { opacity: 1; -webkit-transform: scale(1.08); transform: scale(1.08); }
}
@-webkit-keyframes promoGiftFloat {
	from { -webkit-transform: translateY(2px) rotate(-4deg); transform: translateY(2px) rotate(-4deg); }
	to { -webkit-transform: translateY(-5px) rotate(3deg); transform: translateY(-5px) rotate(3deg); }
}
@keyframes promoGiftFloat {
	from { -webkit-transform: translateY(2px) rotate(-4deg); transform: translateY(2px) rotate(-4deg); }
	to { -webkit-transform: translateY(-5px) rotate(3deg); transform: translateY(-5px) rotate(3deg); }
}
/* ========== END PROMO INVITE REFRESH ========== */

/* ========== FREE COINS DIALOG ========== */
.free-coins-content {
	padding: 6px 16px 18px;
}

.free-coins-hero {
	position: relative;
	overflow: hidden;
	height: 122px;
	margin: -6px -16px 14px;
	border-bottom: 1px solid rgba(255, 215, 73, 0.16);
	background: linear-gradient(180deg, rgba(171, 71, 255, 0.16), rgba(255, 205, 48, 0.05) 70%, rgba(255, 205, 48, 0));
}

.free-coins-hero .promo-invite-rays {
	top: -70px;
}

.free-coins-hero-coin {
	position: absolute;
	top: 44px;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	-webkit-filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
	-webkit-animation: promoGiftFloat 1.8s ease-in-out infinite alternate;
	animation: promoGiftFloat 1.8s ease-in-out infinite alternate;
}

.free-coins-hero-coin-2 {
	width: 32px;
	height: 32px;
	margin: -10px 0 0 -62px;
	opacity: 0.9;
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.free-coins-hero-coin-3 {
	width: 28px;
	height: 28px;
	margin: -26px 0 0 32px;
	opacity: 0.85;
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.free-coins-hero .promo-invite-star-1 { top: 22px; right: auto; left: 50%; margin-left: 44px; }
.free-coins-hero .promo-invite-star-2 { top: 58px; right: auto; bottom: auto; left: 50%; margin-left: -78px; }
.free-coins-hero .promo-invite-star-3 { top: 16px; bottom: auto; left: 50%; margin-left: -40px; }

.free-coins-card {
	position: relative;
	padding: 14px;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.055);
}

.free-coins-card + .free-coins-card {
	margin-top: 12px;
}

.free-coins-card-fb {
	border-color: rgba(24, 119, 242, 0.45);
	background: linear-gradient(135deg, rgba(24, 119, 242, 0.16), rgba(255, 255, 255, 0.04));
}

.free-coins-card-invite {
	border-color: rgba(171, 71, 255, 0.42);
	background: linear-gradient(135deg, rgba(171, 71, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.free-coins-card-head {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.free-coins-card-icon {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.92);
}

.free-coins-card-icon img {
	width: 20px;
	height: 20px;
}

.free-coins-card-invite .free-coins-card-icon {
	background: linear-gradient(180deg, #b24dff, #8a12e6);
}

.free-coins-card-invite .free-coins-card-icon img {
	opacity: 1 !important;
	-webkit-filter: brightness(0) invert(1) !important;
	filter: brightness(0) invert(1) !important;
}

.free-coins-card-title {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
}

.free-coins-card-amount {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	padding: 5px 9px 5px 11px;
	color: #ffd84f;
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	border: 1px solid rgba(255, 211, 70, 0.4);
	border-radius: 999px;
	background: rgba(255, 211, 70, 0.1);
}

.free-coins-card-amount img {
	width: 18px;
	margin-left: 3px;
	vertical-align: -3px;
}

.free-coins-card-desc {
	margin-top: 10px;
	color: #c3cfe0;
	font-size: 13.5px;
	line-height: 1.45;
}

.free-coins-card-desc b {
	color: #ffffff;
}

.free-coins-steps {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-top: 10px;
}

.free-coins-step {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9px;
	background: rgba(0, 0, 0, 0.16);
}

.free-coins-step + .free-coins-step {
	margin-left: 6px;
}

.free-coins-step[item-done="yes"] {
	color: rgba(255, 255, 255, 0.3);
	text-decoration: line-through;
}

.free-coins-step[item-active="yes"] {
	color: #3b2300;
	border-color: rgba(255, 211, 70, 0.9);
	background: linear-gradient(180deg, #ffe08a, #e9a521);
	box-shadow: 0 3px 10px rgba(255, 180, 40, 0.3);
}

.free-coins-content .app-button.free-coins-button {
	position: relative;
	overflow: hidden;
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	color: #ffffff !important;
	font-weight: bold;
	border: 0;
	border-radius: 12px;
}

.free-coins-content .app-button.free-coins-button[item-id="fb_share"] {
	background: linear-gradient(180deg, #2d8cff, #1464d8) !important;
	box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
}

.free-coins-content .app-button.free-coins-button[item-id="invite"] {
	background: linear-gradient(180deg, #b24dff, #8a12e6) !important;
	box-shadow: 0 6px 16px rgba(157, 9, 243, 0.32);
}

.free-coins-content .app-button.free-coins-button::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
	-webkit-animation: freeCoinsShine 3.6s ease-in-out infinite;
	animation: freeCoinsShine 3.6s ease-in-out infinite;
}

.free-coins-content .app-button.free-coins-button[item-id="invite"]::before {
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}

.free-coins-hero-message {
	position: absolute;
	right: 16px;
	bottom: 12px;
	left: 16px;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.35;
	text-align: center;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.free-coins-card-desc b {
	white-space: nowrap;
}

@media (max-width: 380px) {
	.free-coins-card-title {
		font-size: 14px;
	}

	.free-coins-card-icon {
		margin-right: 8px;
	}

	.free-coins-card-amount {
		padding: 4px 7px 4px 9px;
		font-size: 15px;
	}
}

.free-coins-step-label,
.free-coins-step-value {
	display: block;
}

.free-coins-step-label {
	margin-bottom: 1px;
	font-size: 10px;
	font-weight: normal;
	opacity: 0.8;
}

.free-coins-step[item-done="yes"] .free-coins-step-value {
	text-decoration: line-through;
}

.free-coins-step[item-done="yes"] {
	text-decoration: none;
}

.free-coins-note {
	margin-top: 9px;
	color: #9fb0c8;
	font-size: 12px;
	text-align: center;
}

.free-coins-note::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: -2px 5px 0 0;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/><path d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/><path d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center / contain;
}

.free-coins-content .app-button.free-coins-button .free-coins-button-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -2px 7px 0 -4px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.free-coins-content .app-button.free-coins-button[item-id="fb_share"] .free-coins-button-icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.6 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.3-1.5 1.6-1.5h1.7V4.1c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.6v3.1h2.7v8z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.6 21.5v-8h2.7l.4-3.1h-3.1V8.4c0-.9.3-1.5 1.6-1.5h1.7V4.1c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.6v3.1h2.7v8z'/></svg>");
}

.free-coins-content .app-button.free-coins-button[item-id="invite"] .free-coins-button-icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='4'/><path d='M1.5 20c0-4 3.4-6.5 7.5-6.5s7.5 2.5 7.5 6.5z'/><path d='M19 7v8M15 11h8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='4'/><path d='M1.5 20c0-4 3.4-6.5 7.5-6.5s7.5 2.5 7.5 6.5z'/><path d='M19 7v8M15 11h8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
}

.free-coins-content .app-button.free-coins-button[item-wait="yes"] {
	cursor: default;
	color: #b9c6d8 !important;
	background: rgba(255, 255, 255, 0.09) !important;
	box-shadow: none;
	font-variant-numeric: tabular-nums;
}

.free-coins-content .app-button.free-coins-button[item-wait="yes"]::before {
	display: none;
}

.free-coins-content .app-button.free-coins-button[item-wait="yes"] .free-coins-button-icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/><path d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/><path d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
	.free-coins-hero-coin,
	.free-coins-hero .promo-invite-rays,
	.free-coins-content .app-button.free-coins-button::before {
		-webkit-animation: none;
		animation: none;
	}
}
@media (max-height: 700px) {
	.free-coins-hero {
		height: 92px;
		margin-bottom: 10px;
	}

	.free-coins-hero-coin {
		top: 32px;
	}

	.free-coins-hero-message {
		bottom: 9px;
		font-size: 13px;
	}

	.free-coins-hero .promo-invite-star {
		display: none;
	}

	.free-coins-card {
		padding: 11px 12px;
	}

	.free-coins-card + .free-coins-card {
		margin-top: 10px;
	}

	.free-coins-card-desc {
		margin-top: 8px;
		font-size: 13px;
	}

	.free-coins-steps {
		margin-top: 8px;
	}

	.free-coins-note {
		margin-top: 7px;
	}

	.free-coins-content .app-button.free-coins-button {
		margin-top: 9px;
	}
}
/* ========== END FREE COINS DIALOG ========== */

/* ========== REWARDED VIDEO WIDGET (lobby, app 4.0+) ========== */
.reward-ad-widget {
	position: absolute;
	top: 225px;
	right: 15px;
	z-index: 1;
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	cursor: pointer;
	border: 1px solid #ffd237;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(255, 214, 90, 0.26), rgba(16, 32, 58, 0.96) 72%);
	box-shadow: 0 5px 18px rgba(255, 196, 35, 0.35), inset 0 0 12px rgba(255, 221, 91, 0.12);
	-webkit-transition: top 0.3s ease, border-color 0.2s, box-shadow 0.2s;
	transition: top 0.3s ease, border-color 0.2s, box-shadow 0.2s;
}

/* under the gift chest while it is there (its countdown pill takes the space below it) */
.timed-chest-widget ~ .reward-ad-widget {
	top: 298px;
}

.reward-ad-widget[item-state="in"] {
	-webkit-animation: rewardAdIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
	animation: rewardAdIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.reward-ad-widget[item-state="out"] {
	pointer-events: none;
	-webkit-animation: rewardAdOut 0.3s ease-in forwards;
	animation: rewardAdOut 0.3s ease-in forwards;
}

.reward-ad-widget:hover {
	border-color: #ffe36e;
	box-shadow: 0 6px 22px rgba(255, 196, 35, 0.5), inset 0 0 14px rgba(255, 221, 91, 0.18);
}

.reward-ad-widget:active {
	-webkit-transform: scale(0.94);
	transform: scale(0.94);
}

.reward-ad-widget::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border: 1px solid rgba(255, 211, 70, 0.5);
	border-radius: 50%;
	-webkit-animation: promoRing 2.2s ease-out infinite;
	animation: promoRing 2.2s ease-out infinite;
}

.reward-ad-widget::after {
	content: "\2726";
	position: absolute;
	top: -7px;
	right: -4px;
	color: #ffe36e;
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 0 8px rgba(255, 222, 83, 0.9);
	-webkit-animation: promoStar 1.35s ease-in-out infinite alternate;
	animation: promoStar 1.35s ease-in-out infinite alternate;
}

.reward-ad-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	-webkit-animation: rewardAdBeat 2.6s ease-in-out infinite;
	animation: rewardAdBeat 2.6s ease-in-out infinite;
}

.reward-ad-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* a light sweep across the button every few seconds */
.reward-ad-shine {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	border-radius: 50%;
	pointer-events: none;
}

.reward-ad-shine::before {
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
	-webkit-animation: rewardAdShine 3.4s ease-in-out infinite;
	animation: rewardAdShine 3.4s ease-in-out infinite;
}

.reward-ad-label {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 5px;
	padding: 2px 7px;
	color: #18202d;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: 0.3px;
	white-space: nowrap;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffe98b, #ffc62e);
	box-shadow: 0 3px 10px rgba(255, 198, 46, 0.3);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@-webkit-keyframes rewardAdIn {
	0% { opacity: 0; -webkit-transform: scale(0.2) rotate(-25deg); transform: scale(0.2) rotate(-25deg); }
	60% { opacity: 1; -webkit-transform: scale(1.12) rotate(6deg); transform: scale(1.12) rotate(6deg); }
	100% { opacity: 1; -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
}
@keyframes rewardAdIn {
	0% { opacity: 0; -webkit-transform: scale(0.2) rotate(-25deg); transform: scale(0.2) rotate(-25deg); }
	60% { opacity: 1; -webkit-transform: scale(1.12) rotate(6deg); transform: scale(1.12) rotate(6deg); }
	100% { opacity: 1; -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
}
@-webkit-keyframes rewardAdOut {
	to { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); }
}
@keyframes rewardAdOut {
	to { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); }
}
@-webkit-keyframes rewardAdBeat {
	0%, 48%, 100% { -webkit-transform: scale(1); transform: scale(1); }
	12% { -webkit-transform: scale(1.14); transform: scale(1.14); }
	24% { -webkit-transform: scale(1); transform: scale(1); }
	36% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@keyframes rewardAdBeat {
	0%, 48%, 100% { -webkit-transform: scale(1); transform: scale(1); }
	12% { -webkit-transform: scale(1.14); transform: scale(1.14); }
	24% { -webkit-transform: scale(1); transform: scale(1); }
	36% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@-webkit-keyframes rewardAdShine {
	0% { left: -60%; }
	35%, 100% { left: 130%; }
}
@keyframes rewardAdShine {
	0% { left: -60%; }
	35%, 100% { left: 130%; }
}
/* ========== END REWARDED VIDEO WIDGET ========== */

/* iOS app: no promo / invite codes for coins (App Store rule 3.1.1) */
html.ios-app .promo-icon { display: none !important; }