/*
	skin: lobby, menus, messenger, search and finish dialogs.
	lobby rules are scoped to body[data-page="lobby"] so game screens keep their own look.
*/

/* ---------- dialogs (lobby) ---------- */
body[data-page="lobby"] .big-dialog:not([item-closing]):not([item-style="dark"]) {
	background-color: rgba(6, 12, 20, 0.66);
}

/*
	open animation: dialog.js animates margin-top/margin-bottom with jQuery (slide / slideDown),
	which relayouts the flex-centered dialog every frame and flickers on phones.
	the margins are pinned here and a GPU-friendly transform/opacity keyframe is used instead.
	fill-mode is "backwards" only, so the jQuery fade-out on close still works.
*/
body[data-page="lobby"] .big-dialog:not([item-style="dark"]) .big-dialog-inner {
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

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

	-webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

	-webkit-animation: skin-dialog-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	animation: skin-dialog-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

body[data-page="lobby"] .big-dialog:not([item-closing]):not([item-style="dark"]) {
	-webkit-animation: skin-backdrop-in 0.2s ease-out backwards;
	animation: skin-backdrop-in 0.2s ease-out backwards;
}

body[data-page="lobby"] .big-dialog.friends-dialog .big-dialog-inner {
	-webkit-animation-name: skin-sheet-in;
	animation-name: skin-sheet-in;
}

@-webkit-keyframes skin-dialog-in {
	0% { opacity: 0; -webkit-transform: translateY(-18px) scale(0.97); }
	100% { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}

@keyframes skin-dialog-in {
	0% { opacity: 0; transform: translateY(-18px) scale(0.97); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@-webkit-keyframes skin-sheet-in {
	0% { opacity: 0; -webkit-transform: translateY(40px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes skin-sheet-in {
	0% { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes skin-backdrop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes skin-backdrop-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body[data-page="lobby"] .big-dialog,
	body[data-page="lobby"] .big-dialog .big-dialog-inner {
		-webkit-animation: none;
		animation: none;
	}
}

body[data-page="lobby"] .big-dialog:not([item-style="dark"]) .big-dialog-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-page="lobby"] .big-dialog-footer {
	padding: 12px 16px 16px;
}

body[data-page="lobby"] .big-dialog-button,
.game-finish-dialog .big-dialog-button,
.search-dialog .big-dialog-button {
	min-height: 44px;
	padding: 10px 14px;
	font-size: 16px;

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

	-webkit-box-shadow: 0 3px 10px rgba(13, 204, 103, 0.25);
	box-shadow: 0 3px 10px rgba(13, 204, 103, 0.25);

	-webkit-transition: opacity 0.15s ease, transform 0.1s ease;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

body[data-page="lobby"] .big-dialog-button[button-style="light"],
.game-finish-dialog .big-dialog-button[button-style="light"],
.search-dialog .big-dialog-button[button-style="light"] {
	background-color: #eef0f3 !important;
	color: #3a3a3a !important;

	-webkit-box-shadow: none;
	box-shadow: none;
}

body[data-page="lobby"] .big-dialog-button[button-style="red"] {
	-webkit-box-shadow: 0 3px 10px rgba(241, 7, 55, 0.25);
	box-shadow: 0 3px 10px rgba(241, 7, 55, 0.25);
}

body[data-page="lobby"] .big-dialog-button:hover,
.game-finish-dialog .big-dialog-button:hover,
.search-dialog .big-dialog-button:hover {
	opacity: 0.88;
}

body[data-page="lobby"] .big-dialog-button:active,
.game-finish-dialog .big-dialog-button:active,
.search-dialog .big-dialog-button:active {
	-webkit-transform: scale(0.98);
	transform: scale(0.98);
}

/* ---------- buttons / inputs (lobby) ---------- */
body[data-page="lobby"] .app-button,
.search-dialog .app-button {
	min-height: 46px;
	padding: 11px 16px;
	font-size: 16px;

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

	-webkit-box-shadow: 0 3px 10px rgba(13, 204, 103, 0.22);
	box-shadow: 0 3px 10px rgba(13, 204, 103, 0.22);

	-webkit-transition: opacity 0.15s ease, transform 0.1s ease;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

body[data-page="lobby"] .app-button:hover,
.search-dialog .app-button:hover {
	opacity: 0.9;
}

body[data-page="lobby"] .app-button:active,
.search-dialog .app-button:active {
	-webkit-transform: scale(0.98);
	transform: scale(0.98);
}

body[data-page="lobby"] .app-button[button-style="light"],
.search-dialog .app-button[button-style="light"] {
	background-color: #eef0f3 !important;

	-webkit-box-shadow: none;
	box-shadow: none;
}

body[data-page="lobby"] .app-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background-color: #f1f3f5;
	border: 1px solid transparent;
	font-size: 16px;
	color: #1e1e1e;
	outline: none;

	-webkit-border-radius: 12px;
	border-radius: 12px;

	-webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body[data-page="lobby"] .app-input:focus {
	background-color: #ffffff;
	border-color: #0dcc67;
}

body[data-page="lobby"] .app-select {
	box-sizing: border-box;
	padding: 12px 14px;
	background-color: #f1f3f5;
	font-size: 16px;
	color: #1e1e1e;

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

/* play type buttons ("who do you want to play with") */
body[data-page="lobby"] .play-icon {
	background-position: 14px center;
}

body[data-page="lobby"] .play-icon[item-icon="tournament"] {
	-webkit-box-shadow: 0 3px 10px rgba(63, 81, 181, 0.28);
	box-shadow: 0 3px 10px rgba(63, 81, 181, 0.28);
}

body[data-page="lobby"] .app-button-desc {
	margin-top: -22px;
	padding-top: 30px;
	padding-bottom: 10px;
	background-color: #f1f3f5;
	font-size: 13.5px;
	color: #555555;

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

/* ---------- "who do you want to play with" dialog: dark, in the game's colours ---------- */
.big-dialog.play-choose-dialog .big-dialog-inner {
	width: 340px;
	max-width: calc(100% - 40px);
	background-color: #16283a;
	background-image: linear-gradient(180deg, #1c3247 0%, #12202f 100%);

	-webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body[data-page="lobby"] .big-dialog.play-choose-dialog .big-dialog-header {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.big-dialog.play-choose-dialog .big-dialog-title {
	color: #ffffff;
}

.play-choose-dialog .big-dialog-content > div {
	padding: 14px 16px 18px !important;
}

.play-choose-dialog .big-dialog-content > div > div {
	margin-top: 10px !important;
}

.play-choose-dialog .big-dialog-content > div > div:first-child {
	margin-top: 0 !important;
}

/* row: light icon chip + label + chevron on a translucent card */
.big-dialog.play-choose-dialog .app-button.play-icon {
	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 60px;
	padding: 12px 40px 12px 68px;
	background-color: rgba(255, 255, 255, 0.07) !important;
	background-repeat: no-repeat;
	background-size: 22px 22px, 40px 40px;
	background-position: 23px center, 14px center;
	border: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	text-align: left;
	color: #ffffff !important;

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

	-webkit-box-shadow: none;
	box-shadow: none;

	-webkit-transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.big-dialog.play-choose-dialog .app-button.play-icon:hover {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.18);
}

.big-dialog.play-choose-dialog .app-button.play-icon:active {
	-webkit-transform: scale(0.985);
	transform: scale(0.985);
}

.big-dialog.play-choose-dialog .app-button.play-icon::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 2px solid rgba(255, 255, 255, 0.4);
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* chips: same light disc for all, a thin ring in the type's colour is the only accent */
.big-dialog.play-choose-dialog .play-icon[item-icon="friend"] {
	background-image:
		url(../images/icon-play-friend.svg),
		radial-gradient(circle, #eef2f6 0, #eef2f6 17px, rgba(13, 204, 103, 0.9) 18px, rgba(13, 204, 103, 0.9) 19.5px, transparent 20px);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="random"] {
	background-image:
		url(../images/icon-play-random.svg),
		radial-gradient(circle, #eef2f6 0, #eef2f6 17px, rgba(66, 165, 245, 0.9) 18px, rgba(66, 165, 245, 0.9) 19.5px, transparent 20px);
	background-size: 18px 18px, 40px 40px;
	background-position: 25px center, 14px center;
}

.big-dialog.play-choose-dialog .play-icon[item-icon="girlvsboy"] {
	background-image:
		url(../images/icon-play-girlvsboy.svg?2),
		radial-gradient(circle, #eef2f6 0, #eef2f6 17px, rgba(236, 100, 160, 0.9) 18px, rgba(236, 100, 160, 0.9) 19.5px, transparent 20px);
	background-size: 20px 20px, 40px 40px;
	background-position: 24px center, 14px center;
}

.big-dialog.play-choose-dialog .play-icon[item-icon="tournament"] {
	background-image:
		url(../images/icon-play-tournament.svg),
		radial-gradient(circle, #eef2f6 0, #eef2f6 17px, rgba(229, 194, 54, 0.95) 18px, rgba(229, 194, 54, 0.95) 19.5px, transparent 20px);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"] {
	background-image:
		url(../images/icon-promo.png?2),
		radial-gradient(circle, #eef2f6 0, #eef2f6 17px, rgba(171, 71, 255, 0.9) 18px, rgba(171, 71, 255, 0.9) 19.5px, transparent 20px);
}

/* tournament info tucked under its row, numbers in gold */
.big-dialog.play-choose-dialog .app-button-desc {
	position: relative;
	box-sizing: border-box;
	margin-top: -16px;
	padding: 26px 14px 11px;
	background-color: rgba(0, 0, 0, 0.28);
	font-size: 13.5px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.72);

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

.big-dialog.play-choose-dialog .app-button-desc b {
	font-family: Arial, Helvetica, sans-serif;
	color: #e5c236;
}

.big-dialog.play-choose-dialog .app-button-desc img {
	width: 16px !important;
}

.big-dialog.play-choose-dialog .app-button-desc img[style*="margin-right: 36px"] {
	margin-right: 18px !important;
}

/* coins picker that follows "random" */
body[data-page="lobby"] .play-coins {
	position: relative;
	margin-bottom: 8px;
	padding: 13px 40px 13px 14px;
	background-color: #fbf8ea;
	border: 1px solid rgba(164, 148, 23, 0.18);
	font-size: 15.5px;

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

	-webkit-transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body[data-page="lobby"] .play-coins:hover {
	background-color: #f7f0cf;
	border-color: rgba(164, 148, 23, 0.4);
}

body[data-page="lobby"] .play-coins:active {
	-webkit-transform: scale(0.985);
	transform: scale(0.985);
}

body[data-page="lobby"] .play-coins[item-disabled="yes"] {
	background-color: #f4f5f7;
	border-color: rgba(0, 0, 0, 0.06);
	color: #9aa0a6;
	cursor: not-allowed;
	opacity: 0.6;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

body[data-page="lobby"] .play-coins[item-disabled="yes"]:hover {
	background-color: #f4f5f7;
	border-color: rgba(0, 0, 0, 0.06);
}

body[data-page="lobby"] .play-coins[item-disabled="yes"]:active {
	-webkit-transform: none;
	transform: none;
}

body[data-page="lobby"] .play-coins[item-disabled="yes"]::after {
	border-color: transparent;
}

body[data-page="lobby"] .play-coins::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid #b3a44a;
	border-bottom: 2px solid #b3a44a;

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* ---------- choose game dialog ---------- */
.big-dialog.games-dialog .big-dialog-inner {
	width: 340px;
	max-width: calc(100% - 40px);
}

.big-dialog.games-dialog .big-dialog-content > div:first-child {
	padding: 12px 14px 6px !important;
}

.big-dialog.games-dialog .dialog-list > div {
	margin-bottom: 8px !important;
	text-align: left !important;
}

.big-dialog.games-dialog .switch-game-button {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 66px;
	margin: 0;
	padding: 12px 44px 12px 78px !important;
	background-color: #f4f6f8 !important;
	border: 1px solid transparent;
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
	color: #1e1e1e !important;

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

	-webkit-box-shadow: none !important;
	box-shadow: none !important;

	-webkit-transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.big-dialog.games-dialog .switch-game-button:hover {
	opacity: 1;
	background-color: #eaeef2 !important;
	border-color: rgba(13, 204, 103, 0.35);
}

.big-dialog.games-dialog .switch-game-button:active {
	-webkit-transform: scale(0.985);
	transform: scale(0.985);
}

.big-dialog.games-dialog .switch-game-button img {
	left: 14px;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	background-color: #ffffff;

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

	-webkit-box-shadow: 0 0 0 2px #ffffff, 0 3px 10px rgba(0, 0, 0, 0.18);
	box-shadow: 0 0 0 2px #ffffff, 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* chevron */
.big-dialog.games-dialog .switch-game-button::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 2px solid #aab2bb;
	border-bottom: 2px solid #aab2bb;

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* NEW badge (text, no blinking) */
.big-dialog.games-dialog .switch-game-new {
	position: absolute;
	right: 40px;
	top: 50%;
	width: auto;
	height: 20px;
	margin-top: -10px;
	padding: 0 8px;
	background-image: none;
	background-color: #ff3b5c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	letter-spacing: 0.6px;
	color: #ffffff;

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

	-webkit-box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35);
	box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35);

	-webkit-animation: skin-new-pulse 1.8s ease-in-out infinite;
	animation: skin-new-pulse 1.8s ease-in-out infinite;
}

@-webkit-keyframes skin-new-pulse {
	0%, 100% { -webkit-box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35); }
	50% { -webkit-box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35), 0 0 0 5px rgba(255, 59, 92, 0.16); }
}

@keyframes skin-new-pulse {
	0%, 100% { box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35); }
	50% { box-shadow: 0 2px 6px rgba(255, 59, 92, 0.35), 0 0 0 5px rgba(255, 59, 92, 0.16); }
}

/* facebook group block under the list */
.big-dialog.games-dialog .big-dialog-content > div:nth-child(2) {
	background-color: transparent !important;
	padding: 4px 14px 14px !important;
}

.big-dialog.games-dialog .big-dialog-content > div:nth-child(2) table {
	padding: 10px 12px !important;
	background-color: #1b80e4 !important;
	background-image: linear-gradient(135deg, #1e88f0 0%, #1565c0 100%);

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

	-webkit-box-shadow: 0 4px 14px rgba(24, 119, 242, 0.28);
	box-shadow: 0 4px 14px rgba(24, 119, 242, 0.28);
}

/* ---------- side menu ---------- */
body[data-page="lobby"] .user-menu-content {
	box-sizing: border-box;
	max-height: 100%;
	overflow-y: auto;
	padding: 92px 12px 14px;
	background-color: rgba(255, 255, 255, 0.97);

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

	-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* tile grid: 3 columns on phones, 4 centered columns on wide screens */
body[data-page="lobby"] .user-menu-container[is-open="yes"] .user-menu-content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 8px;
	align-content: start;
}

body[data-page="lobby"] .user-menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 96px;
	margin-top: 0;
	padding: 12px 6px 10px;
	background-color: #f4f6f8;
	border: 1px solid transparent;
	text-align: center;

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

	-webkit-transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body[data-page="lobby"] .user-menu-item:hover {
	background-color: #eaeef2;
	border-color: rgba(13, 204, 103, 0.35);
}

body[data-page="lobby"] .user-menu-item:active {
	-webkit-transform: scale(0.97);
	transform: scale(0.97);
}

body[data-page="lobby"] .user-menu-item-photo {
	display: block;
	flex: none;
	width: 46px;
	height: 46px;
	background-color: #ffffff;
	background-size: 24px 24px;

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

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

body[data-page="lobby"] .user-menu-item[item-id="switch"] .user-menu-item-photo {
	background-size: cover;
}

body[data-page="lobby"] .user-menu-item-name {
	display: block;
	max-width: 100%;
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.25;
	color: #1e1e1e;
	word-wrap: break-word;
}

body[data-page="lobby"] .user-menu-item[item-id="logout"] .user-menu-item-photo {
	background-color: rgba(229, 53, 43, 0.08);
}

body[data-page="lobby"] .user-menu-item[item-id="logout"] .user-menu-item-name {
	color: #e5352b;
}

body[data-page="lobby"] .user-menu-item[item-id="manage"] .user-menu-item-photo {
	background-color: rgba(63, 81, 181, 0.1);
}

/* the phone/email row has no item-id: full width, no tile look */
body[data-page="lobby"] .user-menu-item:not([item-id]) {
	grid-column: 1 / -1;
	min-height: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
}

body[data-page="lobby"] .user-menu-item:not([item-id]):hover {
	background-color: transparent;
}

body[data-page="lobby"] .login-creditial {
	background-color: #1e1e1e !important;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.3px;

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

body[data-page="lobby"] .user-menu-profile {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	padding: 10px 12px;
	background-color: #f4f6f8;

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

body[data-page="lobby"] .user-menu-profile:empty {
	display: none;
}

body[data-page="lobby"] .user-menu-profile img.round {
	-webkit-box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* desktop: left drawer with a vertical list (phones keep the tile grid above) */
@media screen and (min-width: 760px) {
	body[data-page="lobby"] .user-menu-container[is-open="yes"] .user-menu-content {
		display: block;
		width: 340px;
		height: 100vh;
		max-height: 100vh;
		padding: 78px 14px 18px;
		background-color: #ffffff;

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

		-webkit-box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35);
		box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35);

		-webkit-animation: skin-drawer-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
		animation: skin-drawer-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	}

	body[data-page="lobby"] .user-menu-profile {
		margin: 0 0 12px;
		padding: 12px 14px;
	}

	body[data-page="lobby"] .user-menu-item {
		flex-direction: row;
		justify-content: flex-start;
		min-height: 0;
		margin-top: 2px;
		padding: 7px 10px;
		background-color: transparent;
		text-align: left;

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

	body[data-page="lobby"] .user-menu-item:hover {
		background-color: #f1f4f7;
		border-color: transparent;
	}

	body[data-page="lobby"] .user-menu-item:active {
		-webkit-transform: none;
		transform: none;
		background-color: #e8edf2;
	}

	body[data-page="lobby"] .user-menu-item-photo {
		width: 40px;
		height: 40px;
		background-color: #f1f3f5;
		background-size: 22px 22px;

		-webkit-border-radius: 12px;
		border-radius: 12px;

		-webkit-box-shadow: none;
		box-shadow: none;
	}

	body[data-page="lobby"] .user-menu-item[item-id="switch"] .user-menu-item-photo {
		background-size: cover;
	}

	body[data-page="lobby"] .user-menu-item-name {
		margin: 0 0 0 14px;
		font-size: 15px;
		line-height: 1.3;
	}

	body[data-page="lobby"] .user-menu-item[item-id="logout"] {
		margin-top: 12px;
	}

	body[data-page="lobby"] .user-menu-item[item-id="logout"]:hover {
		background-color: rgba(229, 53, 43, 0.07);
	}

	body[data-page="lobby"] .user-menu-item:not([item-id]) {
		padding: 0 0 10px;
	}

	body[data-page="lobby"] .user-menu-item:not([item-id]):hover {
		background-color: transparent;
	}
}

@-webkit-keyframes skin-drawer-in {
	0% { opacity: 0; -webkit-transform: translateX(-30px); }
	100% { opacity: 1; -webkit-transform: translateX(0); }
}

@keyframes skin-drawer-in {
	0% { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}

/* ---------- lobby user block ---------- */
/*
	main.css centers .user-container absolutely on tall screens; when its content is taller
	than the free space it slides up under the game carousel. keep it in normal flow below
	the top bar instead, with a top gap that still roughly centers it on big screens.
*/
@media screen and (min-height: 768px) {
	body[data-page="lobby"] .user-container {
		position: relative;
		top: auto;
		left: auto;
		padding-top: max(0px, calc(50vh - 440px));

		-webkit-transform: none;
		transform: none;
	}
}

body[data-page="lobby"] .user-container .user-photo {
	-webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.35);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.35);
}

body[data-page="lobby"] .user-container .coins-counter {
	padding: 4px 12px 4px 6px;
	background-color: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 18px;

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

/* ---------- ratings ---------- */
body[data-page="lobby"] .users-ratings {
	width: 300px;
	max-width: 100%;
}

body[data-page="lobby"] .users-ratings-switch {
	display: inline-block;
	margin: 3px 1px;
	padding: 6px 12px;
	font-size: 14px;

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

	-webkit-transition: background-color 0.15s ease, color 0.15s ease;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body[data-page="lobby"] .users-ratings[item-style="light"] .users-ratings-switch {
	background-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
}

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-switch {
	background-color: #f1f3f5;
	color: #555555;
}

body[data-page="lobby"] .users-ratings .users-ratings-switch[item-selected="yes"] {
	padding: 6px 12px;
	border-bottom: 0;
	background-color: #0dcc67;
	color: #ffffff !important;

	-webkit-box-shadow: 0 2px 8px rgba(13, 204, 103, 0.3);
	box-shadow: 0 2px 8px rgba(13, 204, 103, 0.3);
}

body[data-page="lobby"] .users-ratings span[style*="width: 24px"],
body[data-page="lobby"] .users-ratings span[style*="width: 4px"] {
	width: 2px !important;
}

body[data-page="lobby"] .users-ratings-item {
	margin-bottom: 6px;
	padding: 8px 10px;

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

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

body[data-page="lobby"] .users-ratings[item-style="light"] .users-ratings-item {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-page="lobby"] .users-ratings[item-style="light"] .users-ratings-item:hover {
	background-color: rgba(255, 255, 255, 0.11);
}

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-item {
	background-color: #f6f7f9;
}

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-item:hover {
	background-color: #eef0f3;
}

body[data-page="lobby"] .users-ratings-item-photo {
	width: 44px;
	height: 44px;

	-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-item-photo {
	-webkit-box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
}

body[data-page="lobby"] .users-ratings-item td > b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px !important;
}

body[data-page="lobby"] .users-ratings[item-style="light"] .users-ratings-item td > b {
	color: rgba(255, 255, 255, 0.6) !important;
}

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-item td > b {
	color: #9aa0a6 !important;
}

body[data-page="lobby"] .users-ratings-item-wins {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 8px;
	background-color: rgba(76, 175, 80, 0.16);
	font-size: 12.5px;
	color: #5fd08a;

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

body[data-page="lobby"] .users-ratings[item-style="dark"] .users-ratings-item-wins {
	background-color: rgba(31, 157, 85, 0.1);
	color: #1f9d55;
}

body[data-page="lobby"] .users-ratings-item-wins span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13.5px !important;
	font-weight: bold;
}

/* ---------- friends (play with friend + messenger list) ---------- */
body[data-page="lobby"] .friends-list,
.friends-dialog .friends-list {
	padding: 8px 12px 12px;
}

body[data-page="lobby"] .friend-item,
.friends-dialog .friend-item {
	margin-bottom: 6px;
	padding: 10px 12px;
	background-color: #f6f7f9;

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

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

body[data-page="lobby"] .friend-item:hover,
.friends-dialog .friend-item:hover {
	background-color: #eef0f3;
}

body[data-page="lobby"] .friend-item-photo,
.friends-dialog .friend-item-photo {
	width: 52px;
	height: 52px;

	-webkit-box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.15);
}

body[data-page="lobby"] .friend-item[item-online] .friend-item-photo::before,
.friends-dialog .friend-item[item-online] .friend-item-photo::before {
	border-color: #f6f7f9;
}

body[data-page="lobby"] .friend-item-name,
.friends-dialog .friend-item-name {
	font-size: 15.5px;
	color: #1e1e1e;
}

body[data-page="lobby"] .friend-item-play {
	width: auto;
	min-width: 96px;
	margin-top: 6px;
	padding: 6px 16px;
	background-color: #0dcc67;
	font-size: 14px;

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

	-webkit-box-shadow: 0 2px 6px rgba(13, 204, 103, 0.3);
	box-shadow: 0 2px 6px rgba(13, 204, 103, 0.3);
}

body[data-page="lobby"] .friend-item-delete {
	opacity: 0.45;

	-webkit-transition: opacity 0.15s ease, background-color 0.15s ease;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

body[data-page="lobby"] .friend-item-delete:hover {
	opacity: 1;
	background-color: rgba(229, 53, 43, 0.1);
}

/* messenger list (bottom sheet) */
.big-dialog.friends-dialog .big-dialog-inner {
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

	-webkit-box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 600px) {
	.big-dialog.friends-dialog .big-dialog-inner {
		width: 360px;
		max-width: calc(100% - 40px);
	}
}

.friends-dialog .friends-list::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	margin: 2px auto 12px;
	background-color: rgba(0, 0, 0, 0.15);

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

.friends-dialog .friend-item[item-msg] {
	padding-right: 42px;
}

.friends-dialog .friend-item-message {
	margin-top: 2px;
	overflow: hidden;
	font-size: 13.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.friends-dialog .friend-item[item-msg] .friend-item-message {
	color: #1e1e1e;
}

.friends-dialog .friend-item[item-msg]::after {
	content: attr(item-msg);
	right: 12px;
	width: auto;
	min-width: 20px;
	height: 20px;
	margin-top: -10px;
	padding: 0 6px;
	box-sizing: border-box;
	background-color: #ff3b5c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	color: #ffffff;
	text-align: center;

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

/* ---------- messenger conversation ---------- */
.chat-container[item-source="chat"] {
	background-color: rgba(0, 0, 0, 0.45);
}

.chat-container[item-source="chat"] .chat {
	background-color: #0f1922;
	background-image: linear-gradient(180deg, #13202c 0%, #0b131b 100%);
}

@media only screen and (min-width: 600px) {
	.chat-container[item-source="chat"] .chat {
		height: 520px;
		max-height: calc(100% - 40px);

		-webkit-box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
	}
}

.chat-container[item-source="chat"] .chat-conversation messages {
	padding: 56px 12px 10px;
}

.chat-container[item-source="chat"] .chat-user-icon {
	width: 32px;
	height: 32px;
	margin-top: 14px;
}

.chat-container[item-source="chat"] .chat-msg-text {
	box-sizing: border-box;
	max-width: 78%;
	min-width: 36px;
	margin-top: 4px;
	padding: 9px 14px;
	font-size: 15.5px !important;
	line-height: 1.4;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.chat-container[item-source="chat"] .chat-msg[item-sender="me"] .chat-msg-text {
	background-color: #0dcc67;
	background-image: linear-gradient(135deg, #14d273 0%, #0aa958 100%);
	color: #ffffff;

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

.chat-container[item-source="chat"] .chat-msg[item-sender="it"] .chat-msg-text {
	background-color: #243442;
	background-image: none;
	color: #eef3f7;

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

.chat-container[item-source="chat"] .chat-input-container {
	background-color: rgba(0, 0, 0, 0.25);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-container[item-source="chat"] .chat-input {
	width: calc(100% - 70px);
	height: 44px;
	padding-left: 16px;
	padding-right: 52px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 16px;
	color: #ffffff;
	outline: none;

	-webkit-border-radius: 22px;
	border-radius: 22px;

	-webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chat-container[item-source="chat"] .chat-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.chat-container[item-source="chat"] .chat-input:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(13, 204, 103, 0.6);
}

.chat-container[item-source="chat"] .chat-send {
	top: 16px;
}

/* ---------- search (random opponent) ---------- */
.big-dialog.search-dialog .big-dialog-inner {
	width: 320px;
	max-width: calc(100% - 40px);

	-webkit-border-radius: 18px;
	border-radius: 18px;

	-webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.search-dialog .big-dialog-title {
	font-size: 16px;
}

/* radar: rings + crosshair drawn with gradients, a rotating sweep and a soft pulse in the middle */
.search-dialog .random-container {
	height: 190px;
	background-color: #eef3f8;
	background-image:
		radial-gradient(circle at 50% 50%, rgba(13, 204, 103, 0.18) 0, rgba(13, 204, 103, 0.18) 4px, transparent 5px),
		repeating-radial-gradient(circle at 50% 50%, rgba(16, 61, 104, 0.10) 0, rgba(16, 61, 104, 0.10) 1px, transparent 1px, transparent 30px),
		linear-gradient(rgba(16, 61, 104, 0.07), rgba(16, 61, 104, 0.07)),
		linear-gradient(rgba(16, 61, 104, 0.07), rgba(16, 61, 104, 0.07)),
		radial-gradient(circle at 50% 50%, #f6f9fc 0%, #e6edf4 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 1px 100%, 100% 1px, 100% 100%;
	background-position: center, center, center, center, center;

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

	-webkit-box-shadow: inset 0 0 0 1px rgba(16, 61, 104, 0.08);
	box-shadow: inset 0 0 0 1px rgba(16, 61, 104, 0.08);
}

/* rotating sweep */
.search-dialog .random-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 300px;
	margin: -150px 0 0 -150px;
	background-image: conic-gradient(from 0deg, rgba(13, 204, 103, 0) 0deg, rgba(13, 204, 103, 0) 290deg, rgba(13, 204, 103, 0.28) 358deg, rgba(13, 204, 103, 0.55) 360deg);
	pointer-events: none;

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

	-webkit-animation: search-sweep 2.6s linear infinite;
	animation: search-sweep 2.6s linear infinite;
}

/* expanding ring */
.search-dialog .random-container::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border: 2px solid rgba(13, 204, 103, 0.5);
	pointer-events: none;

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

	-webkit-animation: search-ping 2.6s ease-out infinite;
	animation: search-ping 2.6s ease-out infinite;
}

/* while connecting, the sweep stops and the big preloader circles the matched player */
.search-dialog .random-container[item-type="connecting"] {
	background-image:
		url(../images/puff-dark.svg),
		radial-gradient(circle at 50% 50%, #f6f9fc 0%, #e6edf4 100%);
	background-size: 120px 120px, 100% 100%;
	background-position: center, center;
}

.search-dialog .random-container[item-type="connecting"]::before,
.search-dialog .random-container[item-type="connecting"]::after {
	display: none;
}

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

@keyframes search-sweep {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@-webkit-keyframes search-ping {
	0% { -webkit-transform: scale(0.3); opacity: 0.9; }
	100% { -webkit-transform: scale(2.6); opacity: 0; }
}

@keyframes search-ping {
	0% { transform: scale(0.3); opacity: 0.9; }
	100% { transform: scale(2.6); opacity: 0; }
}

.search-dialog .random-item {
	z-index: 1;

	-webkit-box-shadow: 0 0 0 3px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 0 3px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* candidate avatars fall through the radar on the compositor (transform/opacity only) */
.search-dialog .random-item-drop {
	top: 50%;
	margin-top: 0;
	width: 56px;
	height: 56px;
	will-change: transform, opacity;

	-webkit-animation: search-drop 1.15s cubic-bezier(0.45, 0, 0.55, 1) forwards;
	animation: search-drop 1.15s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@-webkit-keyframes search-drop {
	0% { opacity: 0; -webkit-transform: translate(-50%, -50%) translateY(-150px) scale(0.7); }
	20% { opacity: 1; -webkit-transform: translate(-50%, -50%) translateY(-70px) scale(0.9); }
	50% { opacity: 1; -webkit-transform: translate(-50%, -50%) translateY(0) scale(1); }
	80% { opacity: 1; -webkit-transform: translate(-50%, -50%) translateY(70px) scale(0.9); }
	100% { opacity: 0; -webkit-transform: translate(-50%, -50%) translateY(150px) scale(0.7); }
}

@keyframes search-drop {
	0% { opacity: 0; transform: translate(-50%, -50%) translateY(-150px) scale(0.7); }
	20% { opacity: 1; transform: translate(-50%, -50%) translateY(-70px) scale(0.9); }
	50% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
	80% { opacity: 1; transform: translate(-50%, -50%) translateY(70px) scale(0.9); }
	100% { opacity: 0; transform: translate(-50%, -50%) translateY(150px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
	.search-dialog .random-item-drop {
		-webkit-animation-duration: 0.01s;
		animation-duration: 0.01s;
	}
}

.search-dialog div[item-id="buttons"] .app-button {
	width: auto;
	min-width: 160px;
}

@media (prefers-reduced-motion: reduce) {
	.search-dialog .random-container::before,
	.search-dialog .random-container::after {
		-webkit-animation: none;
		animation: none;
		opacity: 0;
	}
}

/* ---------- game finish dialog ---------- */
.game-finish-dialog {
	--gf-a: #3b82f6;
	--gf-b: #2563eb;
	--gf-t: #1e1e1e;
}

.game-finish-dialog.gf-won {
	--gf-a: #18c46f;
	--gf-b: #0a9e50;
	--gf-t: #0a9e50;
}

.game-finish-dialog.gf-lost {
	--gf-a: #5b6573;
	--gf-b: #2f3742;
	--gf-t: #1e1e1e;
}

.big-dialog.game-finish-dialog .big-dialog-inner {
	width: 340px;
	max-width: calc(100% - 40px);

	-webkit-border-radius: 18px;
	border-radius: 18px;

	-webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.game-finish-dialog .big-dialog-footer {
	padding: 12px 20px 18px;
}

/* standard two-player layout: logo, site name, message, players, likes, share */
.gf-std .big-dialog-content > div {
	background-image: linear-gradient(180deg, var(--gf-a) 0%, var(--gf-b) 100%);
	background-repeat: no-repeat;
	background-size: 100% 76px;
}

.gf-std .big-dialog-content > div > div:nth-child(1) img {
	width: 56px !important;
	height: 56px;
	margin-left: -28px !important;
	margin-top: -28px !important;
	background-color: #ffffff;

	-webkit-box-shadow: 0 0 0 4px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 0 4px #ffffff, 0 6px 16px rgba(0, 0, 0, 0.3);
}

.gf-std .big-dialog-content > div > div:nth-child(2) {
	box-sizing: border-box;
	height: 76px;
	margin-bottom: 0 !important;
	padding: 38px 0 0 !important;
	border-bottom: 0 !important;
	font-size: 13px !important;
	font-weight: normal !important;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.9);
}

.gf-std .big-dialog-content > div > div:nth-child(3) {
	padding: 18px 24px 4px !important;
	font-size: 18px !important;
	line-height: 1.35;
	color: var(--gf-t);
}

.gf-std .big-dialog-content > div > div:nth-child(4) {
	width: auto !important;
	margin: 14px 20px 18px !important;
	padding: 14px 8px;
	background-color: #f6f7f9;

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

.gf-std .big-dialog-content > div > div:nth-child(4) img.round {
	width: 60px !important;
	height: 60px;
	object-fit: cover;

	-webkit-box-shadow: 0 0 0 3px #ffffff, 0 3px 10px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 3px #ffffff, 0 3px 10px rgba(0, 0, 0, 0.15);
}

.gf-std .big-dialog-content > div > div:nth-child(4) td:first-child img.round {
	-webkit-box-shadow: 0 0 0 3px var(--gf-a), 0 3px 10px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 3px var(--gf-a), 0 3px 10px rgba(0, 0, 0, 0.15);
}

.gf-std .big-dialog-content > div > div:nth-child(4) td:nth-child(2) > div {
	margin-top: 14px !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px !important;
	font-weight: bold;
	letter-spacing: 1px;
	color: #1e1e1e;
}

.game-finish-dialog .coins-counter {
	padding: 2px 9px 2px 5px;
	background-color: #ffffff;
	font-size: 14px;

	-webkit-border-radius: 12px;
	border-radius: 12px;

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

.game-finish-dialog .coins-counter img[item-id="coin-icon"] {
	width: 16px;
	margin-right: 2px;
}

.game-finish-dialog .game-user-likes {
	width: auto;
	margin: 0 20px;
	padding-bottom: 8px;
}

.game-finish-dialog .game-user-likes-title {
	padding: 2px 0 10px;
	border-top: 0;
	font-size: 13.5px;
	color: #8a8f98;
}

.game-finish-dialog .game-user-likes-item {
	width: 56px;
	height: 56px;
	background-color: #f1f3f5;
	border: 0;

	-webkit-transition: background-color 0.15s ease, transform 0.1s ease;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.game-finish-dialog .game-user-likes-item:hover {
	background-color: rgba(13, 204, 103, 0.12);
	border: 0;
}

.game-finish-dialog .game-user-likes-item:active {
	-webkit-transform: scale(0.94);
	transform: scale(0.94);
}

.game-finish-dialog .game-user-likes img {
	height: 26px;
	margin-top: 8px;
}

.game-finish-dialog .game-user-likes-item div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555555;
}

.gf-std .big-dialog-content > div > div:nth-child(6) {
	padding: 8px 20px 4px !important;
}

.game-finish-dialog .game-share-fb {
	min-height: 44px;
	font-size: 15px;

	-webkit-border-radius: 12px;
	border-radius: 12px;

	-webkit-box-shadow: 0 3px 10px rgba(24, 119, 242, 0.25);
	box-shadow: 0 3px 10px rgba(24, 119, 242, 0.25);
}