/*
	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:
		radial-gradient(120% 55% at 50% 0%, rgba(90, 150, 230, 0.16) 0%, rgba(90, 150, 230, 0) 70%),
		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), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

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 {
	font-weight: bold;
	letter-spacing: 0.2px;
	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: 64px;
	padding: 11px 40px 11px 68px;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-repeat: no-repeat;
	background-size: 40px 40px, 100% 100%;
	background-position: 14px center, 0 0;
	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: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);

	-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: a glossy tile in the type's colour with a white glyph, the same colour tints the row from the left */
.big-dialog.play-choose-dialog .play-icon[item-icon="friend"] {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2338e28e'/><stop offset='1' stop-color='%230a9a52'/></linearGradient></defs><rect width='44' height='44' rx='13' fill='url(%23g)'/><path d='M0 13a13 13 0 0 1 13-13h18a13 13 0 0 1 13 13v7H0z' fill='white' fill-opacity='.13'/><rect x='.75' y='.75' width='42.5' height='42.5' rx='12.25' fill='none' stroke='white' stroke-opacity='.28' stroke-width='1.5'/><circle cx='28.5' cy='16.5' r='3.7' fill='white' fill-opacity='.7'/><path d='M27.4 22.6c4.9-.5 8.3 2.4 8.3 7.4h-6.6c-.1-2.9-.6-5.3-1.7-7.4z' fill='white' fill-opacity='.7'/><circle cx='18' cy='17' r='4.8' fill='white'/><path d='M8.8 31.5c0-5.3 4.1-8.8 9.2-8.8s9.2 3.5 9.2 8.8z' fill='white'/></svg>"),
		linear-gradient(90deg, rgba(13, 204, 103, 0.16) 0%, rgba(13, 204, 103, 0) 62%);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="random"] {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2352b6ff'/><stop offset='1' stop-color='%231d6fe0'/></linearGradient></defs><rect width='44' height='44' rx='13' fill='url(%23g)'/><path d='M0 13a13 13 0 0 1 13-13h18a13 13 0 0 1 13 13v7H0z' fill='white' fill-opacity='.13'/><rect x='.75' y='.75' width='42.5' height='42.5' rx='12.25' fill='none' stroke='white' stroke-opacity='.28' stroke-width='1.5'/><g fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 16h4.3c5.4 0 8 12 13.6 12h4.6'/><path d='M10.5 28h4.3c2.1 0 3.6-1.7 5-4'/><path d='M24.4 20c1.4-2.3 2.9-4 5-4h3.6'/><path d='M29.6 12.5l3.5 3.5-3.5 3.5'/><path d='M29.6 24.5l3.5 3.5-3.5 3.5'/></g></svg>"),
		linear-gradient(90deg, rgba(66, 165, 245, 0.17) 0%, rgba(66, 165, 245, 0) 62%);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="girlvsboy"] {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff6eb0'/><stop offset='1' stop-color='%236f6bff'/></linearGradient></defs><rect width='44' height='44' rx='13' fill='url(%23g)'/><path d='M0 13a13 13 0 0 1 13-13h18a13 13 0 0 1 13 13v7H0z' fill='white' fill-opacity='.13'/><rect x='.75' y='.75' width='42.5' height='42.5' rx='12.25' fill='none' stroke='white' stroke-opacity='.28' stroke-width='1.5'/><g fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='16.5' cy='18' r='5.6'/><path d='M16.5 23.6v8.6M12.8 28.6h7.4'/><circle cx='27' cy='22.5' r='5.6'/><path d='M31 18.5l4-4M30.2 14.5h4.8v4.8'/></g></svg>"),
		linear-gradient(90deg, rgba(236, 100, 160, 0.16) 0%, rgba(236, 100, 160, 0) 62%);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="tournament"] {
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffd65c'/><stop offset='1' stop-color='%23e3930f'/></linearGradient></defs><rect width='44' height='44' rx='13' fill='url(%23g)'/><path d='M0 13a13 13 0 0 1 13-13h18a13 13 0 0 1 13 13v7H0z' fill='white' fill-opacity='.13'/><rect x='.75' y='.75' width='42.5' height='42.5' rx='12.25' fill='none' stroke='white' stroke-opacity='.3' stroke-width='1.5'/><path d='M15.2 13.4h-3.4c0 4.3 2 6.6 5 7M28.8 13.4h3.4c0 4.3-2 6.6-5 7' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round'/><path d='M15 11h14v6.6c0 4.5-3.1 7.9-7 7.9s-7-3.4-7-7.9z' fill='white'/><path d='M20 25h4v4.4h-4z' fill='white'/><rect x='15.5' y='29.2' width='13' height='3.8' rx='1.6' fill='white'/><path d='M22 13.6l1.15 2.3 2.5.35-1.82 1.77.43 2.5L22 19.33l-2.26 1.19.43-2.5-1.82-1.77 2.5-.35z' fill='%23e8a215'/></svg>"),
		linear-gradient(90deg, rgba(229, 194, 54, 0.15) 0%, rgba(229, 194, 54, 0) 62%);
}

/* label with a short hint under it */
.big-dialog.play-choose-dialog .play-icon-name {
	display: block;
}

.big-dialog.play-choose-dialog .play-icon-sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: normal;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.58);
}

/* free coins: a row like the others in quiet gold, the moving coin on a dark tile carries the attention */
.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"] {
	overflow: hidden;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23334058'/><stop offset='1' stop-color='%23192232'/></linearGradient></defs><rect width='44' height='44' rx='13' fill='url(%23g)'/><path d='M0 13a13 13 0 0 1 13-13h18a13 13 0 0 1 13 13v7H0z' fill='white' fill-opacity='.08'/><rect x='.75' y='.75' width='42.5' height='42.5' rx='12.25' fill='none' stroke='%23ffcf5a' stroke-opacity='.75' stroke-width='1.5'/></svg>"),
		linear-gradient(90deg, rgba(255, 196, 64, 0.15) 0%, rgba(255, 196, 64, 0) 62%);
	background-size: 40px 40px, 100% 100%;
	background-position: 14px center, 0 0;
	border-color: rgba(255, 210, 110, 0.3);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"] .play-icon-sub {
	color: rgba(255, 222, 150, 0.75);
}

/* the coin floats and turns once in a while, a spark follows the turn */
.big-dialog.play-choose-dialog .play-icon-coin {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	pointer-events: none;
	-webkit-perspective: 120px;
	perspective: 120px;
	-webkit-animation: playCoinFloat 2.25s ease-in-out infinite alternate;
	animation: playCoinFloat 2.25s ease-in-out infinite alternate;
}

.big-dialog.play-choose-dialog .play-icon-coin img {
	position: absolute;
	top: 7px;
	left: 7px;
	width: 26px;
	height: 26px;
	-webkit-filter: drop-shadow(0 2px 2px rgba(150, 90, 0, 0.35));
	filter: drop-shadow(0 2px 2px rgba(150, 90, 0, 0.35));
	-webkit-animation: playCoinTurn 4.5s ease-in-out infinite;
	animation: playCoinTurn 4.5s ease-in-out infinite;
}

.big-dialog.play-choose-dialog .play-icon-coin::after {
	content: "";
	position: absolute;
	top: 1px;
	right: 0;
	width: 11px;
	height: 11px;
	opacity: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z' fill='%23fff3b8'/></svg>") no-repeat center / contain;
	-webkit-animation: playCoinSpark 4.5s ease-in-out infinite;
	animation: playCoinSpark 4.5s ease-in-out infinite;
}

@-webkit-keyframes playCoinFloat {
	from { -webkit-transform: translateY(1px); transform: translateY(1px); }
	to { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}
@keyframes playCoinFloat {
	from { -webkit-transform: translateY(1px); transform: translateY(1px); }
	to { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}
@-webkit-keyframes playCoinTurn {
	0%, 64% { -webkit-transform: rotateY(0) scale(1); transform: rotateY(0) scale(1); }
	72% { -webkit-transform: rotateY(180deg) scale(1.1); transform: rotateY(180deg) scale(1.1); }
	80%, 100% { -webkit-transform: rotateY(360deg) scale(1); transform: rotateY(360deg) scale(1); }
}
@keyframes playCoinTurn {
	0%, 64% { -webkit-transform: rotateY(0) scale(1); transform: rotateY(0) scale(1); }
	72% { -webkit-transform: rotateY(180deg) scale(1.1); transform: rotateY(180deg) scale(1.1); }
	80%, 100% { -webkit-transform: rotateY(360deg) scale(1); transform: rotateY(360deg) scale(1); }
}
@-webkit-keyframes playCoinSpark {
	0%, 74%, 100% { opacity: 0; -webkit-transform: scale(0.4) rotate(0); transform: scale(0.4) rotate(0); }
	82% { opacity: 1; -webkit-transform: scale(1.15) rotate(45deg); transform: scale(1.15) rotate(45deg); }
	92% { opacity: 0; -webkit-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); }
}
@keyframes playCoinSpark {
	0%, 74%, 100% { opacity: 0; -webkit-transform: scale(0.4) rotate(0); transform: scale(0.4) rotate(0); }
	82% { opacity: 1; -webkit-transform: scale(1.15) rotate(45deg); transform: scale(1.15) rotate(45deg); }
	92% { opacity: 0; -webkit-transform: scale(0.6) rotate(90deg); transform: scale(0.6) rotate(90deg); }
}

.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"]:hover {
	border-color: rgba(255, 210, 110, 0.5);
}

.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"]::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, 235, 180, 0.12) 50%, rgba(255, 255, 255, 0) 100%);

	-webkit-transform: skewX(-20deg);
	transform: skewX(-20deg);
	-webkit-animation: freeCoinsShine 4.5s ease-in-out infinite;
	animation: freeCoinsShine 4.5s ease-in-out infinite;
}

.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"]::after {
	border-color: rgba(255, 210, 110, 0.7);
}

@-webkit-keyframes freeCoinsShine {
	0%, 55% { left: -60%; }
	100% { left: 130%; }
}
@keyframes freeCoinsShine {
	0%, 55% { left: -60%; }
	100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"],
	.big-dialog.play-choose-dialog .play-icon[item-icon="freecoins"]::before,
	.big-dialog.play-choose-dialog .play-icon-coin,
	.big-dialog.play-choose-dialog .play-icon-coin img,
	.big-dialog.play-choose-dialog .play-icon-coin::after {
		-webkit-animation: none;
		animation: none;
	}
}

/* tournament row and its terms form one card: entry, win and loss side by side in gold */
.big-dialog.play-choose-dialog .play-icon[item-icon="tournament"] {
	-webkit-border-radius: 16px 16px 0 0;
	border-radius: 16px 16px 0 0;
}

.big-dialog.play-choose-dialog .play-tournament-info {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	margin-top: -1px;
	padding: 9px 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-top-color: rgba(229, 194, 54, 0.22);
	background: linear-gradient(180deg, rgba(229, 194, 54, 0.07) 0%, rgba(0, 0, 0, 0.2) 100%);
	text-align: center;

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

.big-dialog.play-choose-dialog .play-tournament-stat {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	min-width: 0;
}

.big-dialog.play-choose-dialog .play-tournament-stat + .play-tournament-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.big-dialog.play-choose-dialog .play-tournament-stat span {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.55);
}

.big-dialog.play-choose-dialog .play-tournament-stat b {
	display: block;
	margin-top: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	white-space: nowrap;
	color: #f2c94c;
}

.big-dialog.play-choose-dialog .play-tournament-stat img {
	width: 15px;
	height: 15px;
	margin-left: 1px;
	vertical-align: -2px;
}

/* 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); }
}

/* room for the badge, so a long name wraps instead of running under it */
.big-dialog.games-dialog .switch-game-button[has-badge="yes"] {
	padding-right: 112px !important;
}

/* small second line under a game name (poker: "Texas Hold'em" / "Poker"), the badge sits on it */
.big-dialog.games-dialog .switch-game-sub {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}

.big-dialog.games-dialog .switch-game-sub-text {
	vertical-align: middle;
	opacity: 0.6;
}

.big-dialog.games-dialog .switch-game-sub .switch-game-new {
	position: static;
	display: inline-block;
	height: 18px;
	margin: 0 0 0 8px;
	padding: 0 7px;
	font-size: 10px;
	line-height: 18px;
	vertical-align: middle;
}

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

/* a big amount ("-250 000") stays on one line inside the pill */
.game-finish-dialog .coins-counter {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	box-sizing: border-box;
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.game-finish-dialog .coins-counter img[item-id="coin-icon"] {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	height: auto;
	margin-right: 4px;
	vertical-align: middle;
}

.game-finish-dialog .coins-counter span[item-id="coin-count"] {
	margin-left: 0;
}

/* wider than the 80px column: stays centred under the photo */
.game-finish-dialog td > div:has(> .coins-counter) {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

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