/*
//=====================================================================================
*/

.arena_page
{
	--marquee: 118px;
	--host_w: 172px;
	--plaque_w: 176px;
	--side_w: 196px;
	--recent_h: 204px;
}

.arena_page .chip .icon
{
	color: #67e8f9;
}

.arena_side .arena_controls
{
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

.arena_modes
{
	flex: none;
	margin-bottom: 10px;
}

.arena_hint
{
	flex: none;
	min-height: 2.6em;
	margin: 0 2px 14px;
	color: var(--text_mute);
	font-size: 12.5px;
	line-height: 1.3;
}

.arena_stake_field
{
	flex: none;
}

.arena_stakes
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.arena_stake
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 76px;
	padding: 0 4px 9px;
	border-radius: 12px;
	color: var(--text_dim);
	background: linear-gradient(180deg, #17122f, #110e22);
	border: 1px solid var(--line);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s, color 0.2s;
}

.arena_stake:hover:not(:disabled)
{
	color: var(--text);
	border-color: rgba(245, 196, 81, 0.3);
	transform: translateY(-2px);
}

.arena_stake[aria-checked="true"]
{
	color: #fde68a;
	background: linear-gradient(180deg, #2a1f5c, #181238);
	border-color: rgba(245, 196, 81, 0.6);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.2), 0 8px 16px -10px rgba(0, 0, 0, 0.9);
}

.arena_stake:disabled
{
	cursor: default;
	opacity: 0.55;
}

.stake_pile
{
	position: relative;
	width: 34px;
	height: 34px;
}

.stake_coin
{
	position: absolute;
	left: calc(6px + var(--level) * 1.5px - var(--level) * var(--level) * 0.5px);
	bottom: calc(var(--level) * 5px);
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55));
}

.stake_value
{
	font: 700 15px/1 var(--font_game);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.arena_custom_field
{
	flex: none;
	margin-bottom: 12px;
}

.arena_custom_field .field_box
{
	height: 46px;
}

.arena_custom_field input::placeholder
{
	font-size: 13.5px;
}

.arena_controls[data-mode="private"] .arena_stake_field
{
	margin-bottom: 10px;
}

.arena_custom_field[hidden],
.arena_join[hidden],
.arena_page .play_button[hidden]
{
	display: none;
}

.arena_payout
{
	display: grid;
	flex: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 14px;
}

.arena_payout div
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 10px 10px 11px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.arena_payout dt
{
	overflow: hidden;
	color: var(--text_mute);
	font-size: 11.5px;
	line-height: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.arena_payout dd
{
	margin: 0;
	overflow: hidden;
	color: var(--text);
	font: 700 15px/1 var(--font_game);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.arena_payout .is_win
{
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.09), rgba(52, 211, 153, 0.02)), var(--surface);
	border-color: rgba(52, 211, 153, 0.22);
}

.arena_payout .is_win dd
{
	color: #6ee7b7;
}

.arena_actions
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}

.arena_actions .play_button
{
	margin-top: 0;
}

.arena_actions .play_button .icon
{
	width: 19px;
	height: 19px;
}

.arena_actions .play_button:hover .icon
{
	transform: none;
}

.arena_actions .play_button:disabled
{
	cursor: default;
	opacity: 0.55;
}

.arena_actions .play_button.is_busy .icon
{
	display: none;
}

.arena_join
{
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.arena_code_box
{
	height: 46px;
	padding-left: 13px;
}

.arena_code_box input
{
	font: 700 16px var(--font_game);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.arena_code_box input::placeholder
{
	font: 500 14px var(--font_body);
	letter-spacing: 0;
	text-transform: none;
}

.arena_join_button
{
	min-width: 62px;
	color: #fde68a;
	background: rgba(245, 196, 81, 0.12);
}

.arena_join_button:hover:not(:disabled)
{
	color: #fff7d6;
	background: rgba(245, 196, 81, 0.22);
}

.arena_join_button:disabled,
.arena_code_box input:disabled,
.arena_custom_field input:disabled
{
	cursor: default;
	opacity: 0.5;
}

/*
//=====================================================================================
*/

.arena_rules
{
	flex: none;
	padding: 14px 16px 16px;
}

.arena_rule_list
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.arena_rule_list li
{
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding: 10px 11px;
	border-radius: 12px;
	background: linear-gradient(180deg, #1a1438, #110e22);
	border: 1px solid rgba(245, 196, 81, 0.14);
}

.arena_rule_list strong
{
	color: #fde68a;
	font: 700 17px/1 var(--font_game);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.arena_rule_list span
{
	color: var(--text_dim);
	font-size: 12px;
	line-height: 1.25;
}

/*
//=====================================================================================
*/

.arena_main
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
	min-height: 0;
}

.arena_stage
{
	flex: 1 1 auto;
	padding: 24px;
}

.arena_cabinet
{
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	isolation: isolate;
	border-radius: 26px;
	background: #0f0a22;
	box-shadow: 0 0 0 9px #1d1438, 0 0 0 10px rgba(245, 196, 81, 0.32), 0 0 0 18px #0f0a22, 0 30px 50px rgba(0, 0, 0, 0.55);
}

.arena_cabinet::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	border-radius: 26px;
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.34), inset 0 0 50px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.arena_marquee
{
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: var(--marquee);
	padding: 0 var(--side_w);
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 28px), linear-gradient(180deg, #0e0924 0%, #181140 70%, #211955 100%);
}

.arena_crest
{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 120px;
	height: 100px;
	translate: -50% -50%;
	opacity: 0.07;
	pointer-events: none;
}

.arena_sign
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.arena_title
{
	color: rgba(245, 196, 81, 0.85);
	font: 700 27px/1 var(--font_game);
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	white-space: nowrap;
}

.arena_divider
{
	position: relative;
	width: 210px;
	max-width: 100%;
	height: 1px;
	margin: 2px 0;
	background: linear-gradient(90deg, transparent, rgba(245, 196, 81, 0.55), transparent);
}

.arena_divider::after
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	rotate: 45deg;
	background: #e2b04a;
}

.arena_terms
{
	color: rgba(245, 196, 81, 0.5);
	font: 600 12px/1.2 var(--font_game);
	letter-spacing: 0.26em;
	text-indent: 0.26em;
	text-transform: uppercase;
	white-space: nowrap;
}

.arena_plaque
{
	position: absolute;
	right: 22px;
	top: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: var(--plaque_w);
	padding: 11px 10px 10px;
	translate: 0 -50%;
	border-radius: 14px;
	background: radial-gradient(circle 3px at 11px 11px, #f8dc8c 0 2px, transparent 2.6px), radial-gradient(circle 3px at calc(100% - 11px) 11px, #f8dc8c 0 2px, transparent 2.6px), radial-gradient(circle 3px at 11px calc(100% - 11px), #f8dc8c 0 2px, transparent 2.6px), radial-gradient(circle 3px at calc(100% - 11px) calc(100% - 11px), #f8dc8c 0 2px, transparent 2.6px), linear-gradient(180deg, #1c1444, #0c0820);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.5), inset 0 0 0 6px #120c2c, inset 0 0 0 7px rgba(245, 196, 81, 0.2), 0 10px 18px rgba(0, 0, 0, 0.45);
}

.plaque_label
{
	color: rgba(245, 196, 81, 0.75);
	font: 700 11px/1 var(--font_game);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
}

.plaque_counts
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
}

.plaque_counts div
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.plaque_counts div + div
{
	border-left: 1px solid rgba(245, 196, 81, 0.18);
}

.plaque_counts strong
{
	color: #fff1c2;
	font: 800 24px/1 var(--font_game);
	font-variant-numeric: tabular-nums;
}

.plaque_counts span
{
	color: var(--text_mute);
	font-size: 11px;
	line-height: 1;
}

.arena_rail
{
	position: relative;
	z-index: 3;
	flex: none;
	height: 22px;
	margin: -11px -20px -11px;
	border-radius: 11px;
	background: linear-gradient(180deg, #4b3998 0%, #2d216a 42%, #1a1242 100%);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(245, 196, 81, 0.5), 0 10px 16px rgba(0, 0, 0, 0.5);
}

.arena_rail::before
{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	border-top: 1.5px dashed rgba(255, 255, 255, 0.12);
}

.arena_felt
{
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	padding: 26px 22px 20px;
	background: radial-gradient(ellipse 55% 70% at 50% 25%, rgba(255, 255, 255, 0.05), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 30%, #34248c 0%, #22185f 52%, #140d38 100%);
	box-shadow: inset 0 14px 22px rgba(0, 0, 0, 0.45), inset 0 0 70px rgba(0, 0, 0, 0.4);
}

.arena_felt::after
{
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 16px;
	bottom: 10px;
	border: 1px solid rgba(245, 196, 81, 0.15);
	border-top: 0;
	border-radius: 0 0 20px 20px;
	pointer-events: none;
}

/*
//=====================================================================================
*/

.arena_host
{
	position: absolute;
	left: calc(var(--side_w) / 2 - (var(--marquee) - 8px) * 0.625 + 4px);
	top: 0;
	z-index: 1;
	width: calc((var(--marquee) - 8px) * 1.25);
	height: calc((var(--marquee) - 8px) * 1.375);
}

.host_art
{
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.host_bob
{
	transform-origin: 100px 220px;
}

.host_head
{
	transform-origin: 100px 132px;
}

.host_pupils
{
	translate: var(--look_x, 0px) var(--look_y, 0px);
	transition: translate 0.35s var(--ease);
}

.host_lids
{
	transform-box: fill-box;
	transform-origin: 50% 0;
	transform: scaleY(0);
}

.host_arm
{
	transition: transform 0.5s var(--ease);
}

.host_arm_west
{
	transform-origin: 66px 172px;
}

.host_arm_east
{
	transform-origin: 134px 172px;
}

.host_face
{
	transition: opacity 0.15s;
}

.host_cheer
{
	opacity: 0;
}

.arena_host.is_found .host_eyes,
.arena_host.is_found .host_smile
{
	opacity: 0;
}

.arena_host.is_found .host_cheer
{
	opacity: 1;
}

.arena_host.is_found .host_arm_west
{
	transform: rotate(150deg);
}

.arena_host.is_found .host_arm_east
{
	transform: rotate(-150deg);
}

@media (prefers-reduced-motion: no-preference)
{
	.host_bob
	{
		animation: host_breathe 3.8s ease-in-out infinite;
	}

	.host_head
	{
		animation: host_sway 7.6s ease-in-out infinite;
	}

	.host_lids
	{
		animation: host_blink 5.4s infinite;
	}

	.host_pupils
	{
		animation: host_glance 11s ease-in-out 2s infinite;
	}

	.arena_host.is_nod .host_head
	{
		animation: host_nod 0.55s ease-in-out;
	}

	.arena_host.is_search .host_head
	{
		animation: host_tilt 2.4s ease-in-out infinite;
	}

	.arena_host.is_search .host_pupils
	{
		animation: host_scan 2.4s ease-in-out infinite;
	}

	.arena_host.is_search .host_arm_east
	{
		animation: host_wave 2.4s ease-in-out infinite;
	}

	.arena_host.is_found .host_bob
	{
		animation: host_hop 0.5s ease-in-out 4;
	}

	.arena_host.is_found .host_head
	{
		animation: none;
	}
}

@keyframes host_breathe
{
	0%,
	100%
	{
		transform: scale(1, 1);
	}

	50%
	{
		transform: scale(1.015, 1.03);
	}
}

@keyframes host_sway
{
	0%,
	100%
	{
		transform: rotate(0deg) translateY(0);
	}

	30%
	{
		transform: rotate(-2.5deg) translateY(-1px);
	}

	70%
	{
		transform: rotate(2deg) translateY(-1.5px);
	}
}

@keyframes host_blink
{
	0%,
	91%,
	97%,
	100%
	{
		transform: scaleY(0);
	}

	94%
	{
		transform: scaleY(1);
	}
}

@keyframes host_glance
{
	0%,
	40%,
	100%
	{
		transform: translate(0, 0);
	}

	46%,
	56%
	{
		transform: translate(-7px, -3px);
	}

	62%,
	72%
	{
		transform: translate(2px, -4px);
	}
}

@keyframes host_nod
{
	0%,
	100%
	{
		transform: none;
	}

	45%
	{
		transform: translateY(5px) rotate(3deg);
	}
}

@keyframes host_tilt
{
	0%,
	100%
	{
		transform: rotate(-5deg);
	}

	50%
	{
		transform: rotate(5deg);
	}
}

@keyframes host_scan
{
	0%,
	100%
	{
		transform: translate(-6px, 0);
	}

	50%
	{
		transform: translate(4px, 0);
	}
}

@keyframes host_wave
{
	0%,
	100%
	{
		transform: rotate(-120deg);
	}

	50%
	{
		transform: rotate(-150deg);
	}
}

@keyframes host_hop
{
	0%,
	100%
	{
		transform: translateY(0) scale(1, 1);
	}

	50%
	{
		transform: translateY(-9px) scale(0.98, 1.03);
	}
}

/*
//=====================================================================================
*/

.arena_games
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	height: 100%;
	transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

.arena_games.is_covered
{
	opacity: 0.22;
	filter: saturate(0.5);
}

.arena_game
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	min-height: 0;
	padding: 12px 12px 13px;
	border-radius: 18px;
	color: var(--text);
	text-align: center;
	background: linear-gradient(180deg, #221a4e 0%, #150f33 100%);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.28), inset 0 0 0 6px #120c2c, inset 0 0 0 7px rgba(245, 196, 81, 0.1), 0 14px 22px -12px rgba(0, 0, 0, 0.8);
	transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s;
}

.arena_game[hidden]
{
	display: none;
}

.arena_game:hover:not(:disabled)
{
	transform: translateY(-5px);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.5), inset 0 0 0 6px #120c2c, inset 0 0 0 7px rgba(245, 196, 81, 0.16), 0 22px 26px -14px rgba(0, 0, 0, 0.9);
}

.arena_game[aria-checked="true"]
{
	background: linear-gradient(180deg, #2e2270 0%, #191240 100%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.9), inset 0 0 0 6px #140d33, inset 0 0 0 7px rgba(245, 196, 81, 0.32), 0 18px 26px -12px rgba(0, 0, 0, 0.9);
}

.arena_game[aria-checked="true"]::after
{
	content: "";
	position: absolute;
	right: 14px;
	top: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(180deg, #fde68a, #d99a1e);
	box-shadow: inset 0 -2px 0 rgba(120, 60, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.45);
}

.arena_game[aria-checked="true"]::before
{
	content: "";
	position: absolute;
	right: 21.5px;
	top: 18.5px;
	z-index: 1;
	width: 6px;
	height: 10px;
	rotate: 45deg;
	border: solid #3b1d02;
	border-width: 0 2.2px 2.2px 0;
}

.arena_game:disabled
{
	cursor: default;
}

.arena_game_art
{
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	padding: 6px 4px 2px;
	border-radius: 12px;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(6, 4, 15, 0.38), rgba(6, 4, 15, 0.16));
	box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(245, 196, 81, 0.1);
}

.arena_game_svg
{
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 190px;
	aspect-ratio: 4 / 3;
	overflow: visible;
	transition: transform 0.35s var(--ease);
}

.arena_game:hover:not(:disabled) .arena_game_svg,
.arena_game[aria-checked="true"] .arena_game_svg
{
	transform: scale(1.05);
}

.arena_game_title
{
	flex: none;
	margin-top: 4px;
	color: #f8dc8c;
	font: 700 17px/1 var(--font_game);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.arena_game_rules
{
	display: -webkit-box;
	flex: none;
	max-width: 30ch;
	overflow: hidden;
	color: var(--text_dim);
	font-size: 12.5px;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.arena_game_live
{
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--text_mute);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	background: rgba(6, 4, 15, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.live_pip
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5d567f;
}

.arena_game.is_busy .live_pip
{
	background: #34d399;
}

.arena_game.is_busy .arena_game_live
{
	color: var(--text_dim);
}

.arena_game_dot
{
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference)
{
	.arena_game_art .arena_game_svg
	{
		animation: art_bob 3.6s ease-in-out infinite;
	}

	.arena_game:nth-child(2) .arena_game_svg
	{
		animation-delay: -1.2s;
	}

	.arena_game:nth-child(3) .arena_game_svg
	{
		animation-delay: -2.4s;
	}
}

@keyframes art_bob
{
	0%,
	100%
	{
		translate: 0 0;
	}

	50%
	{
		translate: 0 -4px;
	}
}

/*
//=====================================================================================
*/

.arena_overlay
{
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	padding: 18px 14px 12px;
	background: linear-gradient(180deg, rgba(9, 6, 24, 0.35), rgba(9, 6, 24, 0.6));
}

.arena_overlay[hidden]
{
	display: none;
}

.overlay_card
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: min(480px, 100%);
	max-height: 100%;
	padding: 14px 22px 14px;
	overflow: hidden;
	border-radius: 20px;
	text-align: center;
	background: radial-gradient(circle 3.4px at 14px 14px, #f8dc8c 0 2.4px, transparent 3px), radial-gradient(circle 3.4px at calc(100% - 14px) 14px, #f8dc8c 0 2.4px, transparent 3px), radial-gradient(circle 3.4px at 14px calc(100% - 14px), #f8dc8c 0 2.4px, transparent 3px), radial-gradient(circle 3.4px at calc(100% - 14px) calc(100% - 14px), #f8dc8c 0 2.4px, transparent 3px), linear-gradient(180deg, #1e1548, #0c0820);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.55), inset 0 0 0 7px #120c2c, inset 0 0 0 8px rgba(245, 196, 81, 0.22), 0 24px 40px rgba(0, 0, 0, 0.6);
}

.overlay_kicker
{
	color: rgba(245, 196, 81, 0.8);
	font: 700 11px/1 var(--font_game);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
}

.overlay_title
{
	font: 700 21px/1.15 var(--font_display);
	letter-spacing: -0.01em;
}

.overlay_card[data-state="found"] .overlay_title
{
	color: #6ee7b7;
}

.overlay_versus
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 4px 0 2px;
}

.versus_seat
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.versus_avatar
{
	width: 54px;
	height: 54px;
	font-size: 18px;
	box-shadow: 0 0 0 2px #1d1438, 0 0 0 3.5px rgba(245, 196, 81, 0.55), 0 8px 14px rgba(0, 0, 0, 0.45);
}

.versus_avatar[hidden]
{
	display: none;
}

.versus_name
{
	max-width: 100%;
	overflow: hidden;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.versus_them .versus_name
{
	color: var(--text_mute);
}

.versus_them.is_known .versus_name
{
	color: var(--text);
}

.versus_slot
{
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #2a1f60, #120c2c 75%);
}

.versus_slot[hidden]
{
	display: none;
}

.slot_ring
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px dashed rgba(245, 196, 81, 0.55);
}

.slot_mark
{
	color: rgba(245, 196, 81, 0.85);
	font: 800 24px/1 var(--font_game);
}

.versus_medal
{
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: #3b1d02;
	font: 800 15px/1 var(--font_game);
	letter-spacing: 0.04em;
	background: linear-gradient(180deg, #fff3b0, #f5c451 45%, #b45309);
	box-shadow: inset 0 -3px 0 rgba(120, 53, 15, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px #1d1438, 0 0 0 4px rgba(245, 196, 81, 0.5), 0 8px 14px rgba(0, 0, 0, 0.5);
}

.overlay_room
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin: 4px 0;
}

.overlay_card[data-state="room"] .overlay_versus
{
	display: none;
}

.overlay_room[hidden]
{
	display: none;
}

.room_code
{
	display: flex;
	gap: 6px;
}

.room_letter
{
	display: grid;
	place-items: center;
	width: 36px;
	height: 44px;
	border-radius: 9px;
	color: #fff1c2;
	font: 800 25px/1 var(--font_game);
	background: linear-gradient(180deg, #2a1f60, #140d36);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 6px 10px rgba(0, 0, 0, 0.4);
}

.room_copy .icon
{
	transition: none;
}

.room_copy:hover .icon
{
	transform: none;
}

.overlay_meta
{
	color: var(--text_dim);
	font-size: 13px;
}

.overlay_meta .money
{
	color: #fde68a;
	font-weight: 700;
}

.overlay_clock
{
	color: var(--text_mute);
	font: 600 13px/1 var(--font_game);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.overlay_cancel
{
	min-width: 120px;
	margin-top: 2px;
}

.overlay_cancel[hidden]
{
	display: none;
}

@media (prefers-reduced-motion: no-preference)
{
	.arena_overlay:not([hidden]) .overlay_card
	{
		animation: overlay_in 0.4s var(--ease) both;
	}

	.overlay_card[data-state="search"] .slot_ring,
	.overlay_card[data-state="room"] .slot_ring
	{
		animation: spin 5s linear infinite;
	}

	.overlay_card[data-state="search"] .slot_mark,
	.overlay_card[data-state="room"] .slot_mark
	{
		animation: slot_wobble 1.6s ease-in-out infinite;
	}

	.overlay_card[data-state="search"] .versus_medal,
	.overlay_card[data-state="room"] .versus_medal
	{
		animation: medal_pulse 1.6s ease-in-out infinite;
	}

	.overlay_card[data-state="found"] .versus_medal
	{
		animation: medal_clash 0.6s var(--ease) both;
	}

	.versus_them.is_known .versus_avatar
	{
		animation: seat_pop 0.55s var(--ease) both;
	}

	.overlay_card[data-state="room"] .room_letter
	{
		animation: letter_wave 2.4s ease-in-out infinite;
		animation-delay: calc(var(--i, 0) * 0.14s);
	}
}

@keyframes letter_wave
{
	0%,
	40%,
	100%
	{
		translate: 0 0;
	}

	20%
	{
		translate: 0 -5px;
	}
}

@keyframes overlay_in
{
	from
	{
		opacity: 0;
		transform: translateY(10px) scale(0.97);
	}
}

@keyframes slot_wobble
{
	0%,
	100%
	{
		transform: rotate(-8deg);
	}

	50%
	{
		transform: rotate(8deg) scale(1.08);
	}
}

@keyframes medal_pulse
{
	0%,
	100%
	{
		transform: scale(1);
	}

	50%
	{
		transform: scale(1.08);
	}
}

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

	30%
	{
		transform: scale(1.3) rotate(-10deg);
	}

	60%
	{
		transform: scale(0.95) rotate(6deg);
	}

	100%
	{
		transform: scale(1) rotate(0deg);
	}
}

@keyframes seat_pop
{
	0%
	{
		opacity: 0;
		transform: scale(0.4);
	}

	70%
	{
		opacity: 1;
		transform: scale(1.12);
	}

	100%
	{
		transform: scale(1);
	}
}

/*
//=====================================================================================
*/

.arena_recent
{
	display: flex;
	flex: none;
	flex-direction: column;
	height: var(--recent_h);
	min-height: 0;
	padding: 12px 14px 10px;
}

.arena_recent .panel_head
{
	flex: none;
	min-height: 24px;
	margin: 0 2px 8px;
}

.arena_recent_note
{
	color: var(--text_mute);
	font-size: 12px;
}

.arena_recent_list
{
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 2px 0 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
}

.arena_recent_list:empty
{
	display: none;
}

.arena_recent_empty
{
	display: grid;
	flex: 1 1 auto;
	place-items: center;
	padding: 0;
	font-size: 13px;
}

.arena_recent_empty[hidden]
{
	display: none;
}

.recent_row
{
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto 70px 96px;
	align-items: center;
	gap: 14px;
	padding: 7px 12px 7px 7px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.022);
	border: 1px solid var(--line_soft);
}

.recent_row + .recent_row
{
	margin-top: 5px;
}

.recent_game
{
	display: grid;
	place-items: center;
	width: 46px;
	height: 36px;
	border-radius: 9px;
	color: var(--text_dim);
	background: linear-gradient(180deg, #221a4e, #150f33);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.24);
}

.recent_art
{
	width: 40px;
	height: 30px;
}

.recent_body
{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.recent_who
{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.recent_who .avatar
{
	width: 22px;
	height: 22px;
	font-size: 9px;
}

.recent_name
{
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.recent_sub
{
	overflow: hidden;
	color: var(--text_mute);
	font-size: 11.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.recent_stake
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	color: var(--text_dim);
	font-size: 13px;
	font-weight: 600;
}

.recent_label
{
	color: var(--text_mute);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.recent_result
{
	justify-self: center;
	padding: 5px 9px;
	border-radius: 999px;
	font: 700 11px/1 var(--font_game);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c4bfdd;
	background: rgba(196, 191, 221, 0.1);
	box-shadow: inset 0 0 0 1px rgba(196, 191, 221, 0.2);
}

.recent_row.is_win .recent_result
{
	color: #6ee7b7;
	background: rgba(52, 211, 153, 0.12);
	box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3);
}

.recent_row.is_loss .recent_result
{
	color: #fda4af;
	background: rgba(251, 113, 133, 0.1);
	box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.28);
}

.recent_row.is_draw .recent_result
{
	color: #fde68a;
	background: rgba(245, 196, 81, 0.1);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.28);
}

.recent_row .signed_value
{
	justify-self: end;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.recent_row .signed_value.is_up
{
	color: #6ee7b7;
}

.recent_row .signed_value.is_down
{
	color: #fda4af;
}

.recent_row .signed_value.is_flat
{
	color: var(--text_mute);
}

/*
//=====================================================================================
*/

@media (max-width: 1400px) and (min-width: 1101px)
{
	.arena_page
	{
		--host_w: 146px;
		--side_w: 168px;
		--plaque_w: 150px;
	}

	.arena_title
	{
		font-size: 22px;
		letter-spacing: 0.34em;
		text-indent: 0.34em;
	}

	.arena_terms
	{
		font-size: 10.5px;
		letter-spacing: 0.18em;
		text-indent: 0.18em;
	}

	.arena_games
	{
		gap: 12px;
	}

	.arena_felt
	{
		padding: 24px 16px 16px;
	}

	.arena_game_title
	{
		font-size: 15px;
		letter-spacing: 0.14em;
		text-indent: 0.14em;
	}

	.arena_game_rules
	{
		font-size: 11.5px;
	}

	.plaque_counts strong
	{
		font-size: 21px;
	}

	.recent_row
	{
		grid-template-columns: 46px minmax(0, 1fr) auto 64px 84px;
		gap: 10px;
	}
}

@media (min-height: 1000px) and (min-width: 1101px)
{
	.arena_page
	{
		--marquee: 146px;
		--side_w: 230px;
		--plaque_w: 196px;
		--recent_h: 262px;
	}

	.arena_title
	{
		font-size: 32px;
	}

	.arena_terms
	{
		font-size: 13px;
	}

	.arena_hint
	{
		font-size: 13.5px;
	}

	.arena_stake
	{
		height: 100px;
		gap: 9px;
		padding-bottom: 12px;
	}

	.stake_pile
	{
		width: 40px;
		height: 44px;
	}

	.stake_coin
	{
		width: 27px;
		height: 27px;
		bottom: calc(var(--level) * 6px);
	}

	.stake_value
	{
		font-size: 17px;
	}

	.arena_payout div
	{
		gap: 8px;
		padding: 13px 12px;
	}

	.arena_payout dd
	{
		font-size: 18px;
	}

	.arena_rule_list li
	{
		padding: 13px 13px;
	}

	.arena_rule_list strong
	{
		font-size: 19px;
	}

	.arena_rule_list span
	{
		font-size: 12.5px;
	}

	.arena_game_title
	{
		font-size: 19px;
	}

	.arena_game_rules
	{
		font-size: 13.5px;
	}

	.arena_game_svg
	{
		max-height: 240px;
	}

	.recent_row
	{
		padding-top: 9px;
		padding-bottom: 9px;
	}
}

@media (max-height: 860px) and (min-width: 1101px)
{
	.arena_page
	{
		--marquee: 104px;
		--recent_h: 186px;
	}

	.arena_stage
	{
		padding: 22px;
	}

	.arena_stake
	{
		height: 70px;
	}

	.arena_rule_list li
	{
		padding: 9px 10px;
	}
}

@media (max-height: 940px) and (min-width: 1101px)
{
	.arena_controls[data-mode="private"] .arena_hint
	{
		display: none;
	}

	.arena_controls[data-mode="private"] .arena_modes
	{
		margin-bottom: 14px;
	}
}

@media (max-height: 780px) and (min-width: 1101px)
{
	.arena_page
	{
		--marquee: 90px;
		--host_w: 128px;
		--side_w: 150px;
		--plaque_w: 136px;
		--recent_h: 156px;
	}

	.arena_title
	{
		font-size: 20px;
	}

	.arena_divider,
	.arena_terms
	{
		display: none;
	}

	.arena_plaque
	{
		gap: 4px;
		padding: 9px 8px 13px;
	}

	.plaque_counts span
	{
		font-size: 10px;
	}

	.plaque_label
	{
		font-size: 9.5px;
	}

	.arena_hint
	{
		display: none;
	}

	.plaque_counts strong
	{
		font-size: 19px;
	}

	.arena_felt
	{
		padding: 22px 16px 14px;
	}

	.arena_game
	{
		gap: 4px;
		padding: 9px 10px 10px;
	}

	.arena_game_rules
	{
		-webkit-line-clamp: 1;
	}

	.arena_modes
	{
		margin-bottom: 12px;
	}

	.arena_modes .segment
	{
		height: 34px;
	}

	.arena_stake
	{
		height: 60px;
		gap: 4px;
		padding-bottom: 7px;
	}

	.stake_pile
	{
		height: 28px;
	}

	.stake_coin
	{
		width: 19px;
		height: 19px;
		bottom: calc(var(--level) * 4px);
	}

	.arena_payout
	{
		margin-bottom: 10px;
	}

	.arena_payout div
	{
		gap: 5px;
		padding: 8px 9px;
	}

	.arena_actions
	{
		gap: 9px;
	}

	.arena_actions .play_button
	{
		height: 48px;
	}

	.arena_code_box
	{
		height: 40px;
	}

	.arena_custom_field .field_box
	{
		height: 40px;
	}

	.arena_controls[data-mode="private"] .arena_modes
	{
		margin-bottom: 10px;
	}

	.arena_controls[data-mode="private"] .arena_stake
	{
		height: 52px;
	}

	.arena_controls[data-mode="private"] .stake_pile
	{
		height: 22px;
	}

	.arena_controls[data-mode="private"] .stake_coin
	{
		width: 16px;
		height: 16px;
		bottom: calc(var(--level) * 2px);
	}

	.arena_controls[data-mode="private"] .arena_custom_field
	{
		margin-bottom: 8px;
	}

	.arena_controls[data-mode="private"] .arena_payout
	{
		margin-bottom: 8px;
	}

	.arena_controls[data-mode="private"] .arena_payout div
	{
		padding: 7px 9px;
	}

	.arena_controls[data-mode="private"] .arena_actions
	{
		gap: 8px;
	}

	.arena_controls[data-mode="private"] .play_button
	{
		height: 46px;
	}

	.arena_rules
	{
		padding: 11px 14px 13px;
	}

	.arena_rule_list
	{
		gap: 6px;
		margin-top: 8px;
	}

	.arena_rule_list li
	{
		gap: 4px;
		padding: 7px 9px;
	}

	.arena_rule_list strong
	{
		font-size: 15px;
	}

	.arena_rule_list span
	{
		font-size: 11px;
	}

	.overlay_card
	{
		gap: 4px;
		padding: 10px 18px;
	}

	.overlay_kicker
	{
		display: none;
	}

	.overlay_versus
	{
		margin: 0;
	}

	.versus_seat
	{
		gap: 4px;
	}

	.overlay_title
	{
		font-size: 18px;
	}

	.versus_avatar,
	.versus_slot
	{
		width: 42px;
		height: 42px;
	}

	.overlay_cancel
	{
		height: 32px;
	}

	.versus_medal
	{
		width: 38px;
		height: 38px;
		font-size: 13px;
	}

	.room_letter
	{
		width: 30px;
		height: 36px;
		font-size: 21px;
	}
}

@media (max-height: 700px) and (min-width: 1101px)
{
	.arena_page
	{
		--recent_h: 136px;
	}

	.arena_rule_list span
	{
		display: none;
	}

	.arena_rule_list
	{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
//=====================================================================================
*/

@media (max-width: 1100px)
{
	.arena_page
	{
		--marquee: 100px;
		--host_w: 110px;
		--recent_h: 300px;
	}

	.arena_side .arena_controls
	{
		overflow: visible;
	}

	.arena_main
	{
		display: contents;
	}

	.arena_recent
	{
		order: 2;
		height: auto;
		min-height: 150px;
		max-height: var(--recent_h);
	}

	.arena_stage
	{
		order: -1;
		height: 560px;
		padding: 20px;
	}

	.arena_title
	{
		font-size: 20px;
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}

	.arena_terms
	{
		display: none;
	}
}

@media (max-width: 760px)
{
	.arena_page
	{
		--marquee: 92px;
		--side_w: 116px;
	}

	.arena_marquee
	{
		justify-content: flex-start;
		padding: 0 14px 0 var(--side_w);
	}

	.arena_title
	{
		font-size: 17px;
		letter-spacing: 0.2em;
		text-indent: 0;
	}

	.arena_divider
	{
		display: none;
	}

	.arena_game_title
	{
		font-size: 14px;
		letter-spacing: 0.1em;
	}

	.arena_game[aria-checked="true"]::after
	{
		right: 10px;
		top: 10px;
		width: 18px;
		height: 18px;
	}

	.arena_game[aria-checked="true"]::before
	{
		right: 16.5px;
		top: 13.5px;
		width: 5px;
		height: 8px;
	}

	.arena_game_live
	{
		max-width: 100%;
		padding: 3px 8px;
		font-size: 10.5px;
	}

	.arena_plaque
	{
		display: none;
	}

	.arena_stage
	{
		height: auto;
	}

	.arena_games
	{
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		height: auto;
	}

	.arena_game
	{
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-areas: "art title" "art rules" "art live";
		align-items: center;
		justify-items: start;
		column-gap: 12px;
		padding-right: 30px;
		text-align: left;
	}

	.arena_game_art
	{
		grid-area: art;
		height: 84px;
	}

	.arena_game_title
	{
		grid-area: title;
		text-indent: 0;
	}

	.arena_game_rules
	{
		grid-area: rules;
	}

	.arena_game_live
	{
		grid-area: live;
	}

	.arena_overlay
	{
		position: fixed;
		z-index: 60;
	}

	.recent_row
	{
		grid-template-columns: 46px minmax(0, 1fr) auto;
	}

	.recent_stake,
	.recent_result
	{
		display: none;
	}
}

/*
//=====================================================================================
*/