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

:root
{
	--bg: #08070f;
	--bg_soft: #0b0a16;
	--surface: #110f20;
	--surface_raise: #161329;
	--surface_high: #1c1834;
	--line: rgba(255, 255, 255, 0.06);
	--line_soft: rgba(255, 255, 255, 0.035);
	--line_accent: rgba(167, 139, 250, 0.16);
	--line_strong: rgba(167, 139, 250, 0.32);
	--text: #f2f0fa;
	--text_dim: #aca6c9;
	--text_mute: #756f96;
	--violet: #8b5cf6;
	--violet_soft: #a78bfa;
	--violet_deep: #6d28d9;
	--indigo: #5b5bf0;
	--cyan: #67e8f9;
	--pink: #f472b6;
	--gold: #f5c451;
	--gold_deep: #d99a1e;
	--green: #34d399;
	--red: #fb7185;
	--radius_s: 10px;
	--radius_m: 14px;
	--radius_l: 18px;
	--shadow_card: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 34px -22px rgba(0, 0, 0, 0.9);
	--ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--ease_soft: cubic-bezier(0.4, 0, 0.2, 1);
	--font_body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font_display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font_game: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", sans-serif;
	--sidebar: 240px;
	--rail: 280px;
	--gap: 20px;
	--topbar: 64px;
}

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

*,
*::before,
*::after
{
	box-sizing: border-box;
}

html
{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--topbar) + 16px);
	background: var(--bg);
}

body
{
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(1100px 600px at 92% -14%, rgba(124, 58, 237, 0.1), transparent 64%), var(--bg);
	background-attachment: fixed;
	color: var(--text);
	font: 14px/1.5 var(--font_body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.is_locked
{
	overflow: hidden;
}

a
{
	color: inherit;
	text-decoration: none;
}

button
{
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1,
h2,
h3,
p
{
	margin: 0;
}

:focus-visible
{
	outline: 2px solid var(--violet_soft);
	outline-offset: 2px;
	border-radius: 8px;
}

::selection
{
	background: rgba(139, 92, 246, 0.4);
	color: #fff;
}

[hidden]
{
	display: none !important;
}

.sprite
{
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.icon
{
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.icon_small
{
	width: 16px;
	height: 16px;
}

.coin
{
	width: 20px;
	height: 20px;
	flex: none;
}

.money
{
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	vertical-align: -0.14em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.money .coin
{
	width: 1.05em;
	height: 1.05em;
}

body:not(.is_guest) .guest_only,
body:not(.is_member) .member_only
{
	display: none;
}

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

.intro
{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: radial-gradient(60% 60% at 50% 46%, #1b1342 0%, #0c0a1b 55%, #06050c 100%);
	animation: intro_out 0.9s var(--ease_soft) 2.2s forwards;
}

.intro.intro_skip
{
	animation: intro_out 0.45s var(--ease_soft) forwards;
}

.intro_halo
{
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.24), transparent 66%);
	animation: intro_halo 2.4s var(--ease) both;
}

.intro_center
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	animation: intro_lift 0.9s var(--ease_soft) 2.2s forwards;
}

.intro_mark
{
	width: 104px;
	height: 87px;
	overflow: visible;
}

.intro_stroke
{
	fill: none;
	stroke: url(#g_brand);
	stroke-width: 0.6;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: intro_draw 1.3s cubic-bezier(0.65, 0, 0.25, 1) 0.15s forwards;
}

.intro_fill
{
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: intro_fill 1s var(--ease) 1s forwards;
}

.intro_word
{
	color: #ede9fe;
	font: 300 24px/1 var(--font_display);
	letter-spacing: 0.9em;
	margin-right: -0.9em;
	opacity: 0;
	animation: intro_word 1.2s var(--ease) 1.05s forwards;
}

.intro_line
{
	width: 132px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.07);
}

.intro_progress
{
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--violet), var(--cyan));
	transform: scaleX(0);
	transform-origin: left center;
	animation: intro_progress 1.95s cubic-bezier(0.45, 0, 0.2, 1) 0.2s forwards;
}

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

.app
{
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	min-height: 100vh;
}

.shell
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.main
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 100%;
	max-width: 1600px;
	min-height: calc(100dvh - var(--topbar));
	padding: 24px 28px 40px;
}

.scrim
{
	display: none;
}

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

.brand
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.brand_mark
{
	width: 38px;
	height: 32px;
	flex: none;
	filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.35));
}

.brand_word
{
	margin-right: -0.36em;
	font: 300 20px/1 var(--font_display);
	letter-spacing: 0.36em;
	color: #ece8fb;
}

.brand_compact
{
	display: none;
}

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

.sidebar
{
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100vh;
	padding: 14px 16px 18px;
	overflow-y: auto;
	scrollbar-width: none;
	background: var(--bg_soft);
	border-right: 1px solid var(--line);
}

.sidebar_head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	padding: 0 6px;
}

.sidebar .sidebar_close
{
	display: none;
}

.nav_label
{
	padding: 0 12px;
	color: var(--text_mute);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nav
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: -10px;
}

.nav_item
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 42px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--text_dim);
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.nav_item:hover
{
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
}

.nav_item_active,
.nav_item_active:hover
{
	color: #fff;
	background: rgba(139, 92, 246, 0.14);
}

.nav_item_active .icon
{
	color: var(--violet_soft);
}

.nav_item_active::before
{
	content: "";
	position: absolute;
	left: -16px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--violet_soft);
}

.nav_live,
.nav_count
{
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 700;
}

.nav_live
{
	color: #fecdd3;
	background: rgba(251, 113, 133, 0.12);
	letter-spacing: 0.06em;
}

.nav_count
{
	color: #e9d5ff;
	background: rgba(139, 92, 246, 0.22);
}

.vip
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 20px 16px 18px;
	text-align: center;
	border-radius: var(--radius_m);
	background: radial-gradient(120% 70% at 50% 0%, rgba(245, 196, 81, 0.09), transparent 62%), var(--surface);
	border: 1px solid rgba(245, 196, 81, 0.16);
}

.vip_crown
{
	width: 44px;
	height: 33px;
	filter: drop-shadow(0 4px 10px rgba(217, 154, 30, 0.35));
}

.vip_title
{
	margin-top: 4px;
	font: 650 15px/1 var(--font_display);
	letter-spacing: 0.02em;
}

.vip_text
{
	color: var(--text_mute);
	font-size: 12.5px;
	line-height: 1.5;
}

.vip_ladder
{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 8px 0 10px;
	font-size: 11px;
	font-weight: 600;
}

.vip_tier_gold
{
	color: var(--gold);
}

.vip_tier_platinum
{
	color: #cbd5e1;
}

.vip_tier
{
	color: var(--tier, var(--text_dim));
}

.tone_bronze
{
	--tier: #e7a771;
}

.tone_silver
{
	--tier: #d4d8e2;
}

.tone_gold
{
	--tier: #f5c451;
}

.tone_platinum
{
	--tier: #a5d8ff;
}

.tone_diamond
{
	--tier: #67e8f9;
}

.vip_bar
{
	position: relative;
	height: 4px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.07);
}

.vip_fill
{
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gold_deep), var(--gold));
	transition: width 1.2s var(--ease);
}

.sidebar_link
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--text_dim);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.sidebar_link:hover
{
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
}

.online_dot
{
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14);
}

@media (max-height: 820px) and (min-width: 1025px)
{
	.sidebar
	{
		gap: 14px;
		padding: 12px 14px 14px;
	}

	.nav_item
	{
		height: 38px;
	}

	.vip
	{
		gap: 4px;
		padding: 14px;
	}

	.vip_crown
	{
		width: 34px;
		height: 26px;
	}

	.vip_text
	{
		font-size: 12px;
		line-height: 1.45;
	}
}

@media (max-height: 720px) and (min-width: 1025px)
{
	.nav_label,
	.vip_crown,
	.vip_text
	{
		display: none;
	}

	.nav
	{
		margin-top: 0;
	}

	.nav_item
	{
		height: 34px;
	}

	.vip_title
	{
		margin-top: 0;
	}

	.vip_ladder
	{
		margin: 4px 0 6px;
	}
}

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

.topbar
{
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--topbar);
	padding: 0 28px;
	background: rgba(8, 7, 15, 0.78);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--line);
}

.topbar .topbar_menu
{
	display: none;
}

.search_wrap
{
	position: relative;
	flex: 1;
	max-width: 440px;
}

.search
{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 40px;
	padding: 0 10px 0 14px;
	border-radius: 10px;
	color: var(--text_mute);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.search:focus-within
{
	color: var(--violet_soft);
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(139, 92, 246, 0.5);
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.search input
{
	flex: 1;
	min-width: 0;
	height: 100%;
	color: var(--text);
	font: inherit;
	background: none;
	border: 0;
	outline: 0;
}

.search input::placeholder
{
	color: var(--text_mute);
}

.search input::-webkit-search-cancel-button
{
	filter: invert(0.6);
}

.search kbd
{
	padding: 0 7px;
	color: var(--text_mute);
	font: 500 11px/18px var(--font_body);
	border: 1px solid var(--line);
	border-radius: 5px;
}

.search_menu
{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 240px;
	padding: 6px;
	border-radius: 12px;
	background: var(--surface_raise);
	border: 1px solid var(--line_accent);
	box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
	animation: menu_in 0.22s var(--ease) both;
}

.search_item
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 9px;
	color: var(--text_mute);
	transition: background 0.15s, color 0.15s;
}

.search_item:hover,
.search_item:focus-visible
{
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.search_icon
{
	width: 30px;
	height: 30px;
	flex: none;
}

.search_meta
{
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.search_name
{
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
}

.search_hint
{
	color: var(--text_mute);
	font-size: 11.5px;
}

.search_none
{
	padding: 12px 10px;
	color: var(--text_mute);
	font-size: 13px;
}

.topbar_actions
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.member_tools,
.guest_tools
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.icon_button
{
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 10px;
	color: var(--text_dim);
	background: transparent;
	border: 1px solid var(--line);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.icon_button:hover
{
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.notify_count
{
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 9px;
	color: #fff;
	font: 700 10px/17px var(--font_body);
	text-align: center;
	background: var(--violet);
	box-shadow: 0 0 0 2px var(--bg);
}

.profile_wrap
{
	position: relative;
}

.profile
{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 10px 0 5px;
	border-radius: 12px;
	border: 1px solid var(--line);
	transition: background 0.2s, border-color 0.2s;
}

.profile:hover,
.profile[aria-expanded="true"]
{
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.profile[aria-expanded="true"] .icon
{
	transform: rotate(180deg);
}

.profile_meta
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
}

.profile_name
{
	font-size: 13px;
	font-weight: 600;
}

.profile_level
{
	color: var(--text_mute);
	font-size: 11px;
}

.profile_menu
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 6px;
	border-radius: 12px;
	background: var(--surface_raise);
	border: 1px solid var(--line_accent);
	box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
	animation: menu_in 0.22s var(--ease) both;
}

.menu_item
{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--text_dim);
	font-size: 13px;
	text-align: left;
	transition: background 0.15s, color 0.15s;
}

.menu_item:hover
{
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.menu_item .icon
{
	width: 17px;
	height: 17px;
}

.menu_divider
{
	height: 1px;
	margin: 5px 4px;
	background: var(--line);
}

.menu_danger:hover
{
	color: #fecdd3;
	background: rgba(251, 113, 133, 0.1);
}

.avatar
{
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	color: #fff;
	font: 700 11px/1 var(--font_body);
	background: linear-gradient(135deg, hsl(var(--hue, 265) 62% 58%), hsl(calc(var(--hue, 265) + 40) 56% 42%));
}

.profile .avatar
{
	width: 32px;
	height: 32px;
}

.avatar.has_art
{
	overflow: hidden;
	background: #1d1438;
}

.avatar_art
{
	display: block;
	width: 100%;
	height: 100%;
}

a.player_link
{
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.15s ease;
}

a.player_link:hover,
a.player_link:focus-visible
{
	color: #f5c451;
	text-decoration: underline;
	text-decoration-color: rgba(245, 196, 81, 0.45);
	text-underline-offset: 3px;
}

.wallet_pill
{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 5px 0 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(245, 196, 81, 0.2);
}

.wallet_amount
{
	margin-right: 4px;
	font: 650 14.5px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
}

.wallet_add,
.square_button
{
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 9px;
	color: #fff;
	background: var(--violet);
	transition: background 0.2s, transform 0.2s;
}

.wallet_add:hover,
.square_button:hover
{
	background: #7c4ff0;
	transform: scale(1.04);
}

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

.button
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0 22px;
	overflow: hidden;
	border-radius: 12px;
	font: 600 14.5px/1 var(--font_body);
	white-space: nowrap;
	transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}

.button:active
{
	transform: scale(0.98);
}

.button:hover .icon
{
	transform: translateX(3px);
}

.button_primary
{
	color: #fff;
	background: linear-gradient(180deg, #8f62f7, #7340ea);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 26px -12px rgba(124, 58, 237, 0.8);
}

.button_primary:hover
{
	background: linear-gradient(180deg, #9a70f8, #7c4ff0);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 30px -12px rgba(124, 58, 237, 0.9);
}

.button_primary::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
	transform: translateX(-130%);
	transition: transform 0.9s var(--ease);
}

.button_primary:hover::after
{
	transform: translateX(130%);
}

.button_ghost
{
	color: var(--text);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.button_ghost:hover
{
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
}

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

.button_outline
{
	color: #ddd6fe;
	border: 1px solid var(--line_strong);
}

.button_outline:hover
{
	color: #fff;
	background: rgba(139, 92, 246, 0.12);
}

.button_small
{
	height: 36px;
	padding: 0 16px;
	font-size: 13px;
	border-radius: 10px;
}

.text_link
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--violet_soft);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.2s;
}

.text_link:hover
{
	color: #ede9fe;
}

.text_link:hover .icon
{
	transform: translateX(3px);
}

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

.hero
{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 48px 52px;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius_l);
	background: radial-gradient(85% 130% at 78% 48%, #26125f 0%, #170c3d 38%, #0e0a24 70%, #0b0919 100%);
	border: 1px solid var(--line_accent);
	box-shadow: var(--shadow_card);
}

.hero::before
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(45% 60% at 0% 0%, rgba(103, 232, 249, 0.06), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(236, 72, 153, 0.1), transparent 70%);
}

.hero_particles
{
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero_floor
{
	position: absolute;
	left: 30%;
	right: -24%;
	bottom: -10%;
	z-index: -1;
	height: 54%;
	background-image: linear-gradient(rgba(167, 139, 250, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, 0.16) 1px, transparent 1px);
	background-size: 46px 46px;
	transform: perspective(360px) rotateX(64deg);
	transform-origin: center bottom;
	-webkit-mask-image: linear-gradient(to top, #000 6%, transparent 80%);
	mask-image: linear-gradient(to top, #000 6%, transparent 80%);
	pointer-events: none;
}

.hero_copy
{
	position: relative;
	z-index: 2;
	max-width: 460px;
}

.eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	color: #d6ccfb;
	font-size: 12px;
	font-weight: 500;
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.28);
}

.eyebrow::before
{
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--violet_soft);
}

.hero_title
{
	margin: 18px 0 16px;
	font: 700 clamp(40px, 4vw, 58px)/1.02 var(--font_display);
	letter-spacing: -0.028em;
}

.hero_title span
{
	display: block;
}

.gradient_text
{
	padding-bottom: 0.08em;
	background: linear-gradient(92deg, #ddd6fe 0%, #a78bfa 45%, #67e8f9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero_text
{
	max-width: 400px;
	color: var(--text_dim);
	font-size: 16px;
	line-height: 1.6;
}

.hero_actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.hero_stage
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 58%;
	pointer-events: none;
	transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px), 0);
}

.hero_rays
{
	position: absolute;
	left: 50%;
	top: 45%;
	width: 720px;
	height: 720px;
	margin: -360px 0 0 -360px;
	background: repeating-conic-gradient(from 0deg, rgba(196, 181, 253, 0.06) 0deg 3deg, transparent 3deg 20deg);
	-webkit-mask-image: radial-gradient(circle, #000 10%, transparent 60%);
	mask-image: radial-gradient(circle, #000 10%, transparent 60%);
	animation: spin 180s linear infinite;
}

.hero_art
{
	position: absolute;
	left: 50%;
	top: 50%;
	height: 108%;
	aspect-ratio: 560 / 400;
	overflow: visible;
	transform: translate(-50%, -50%);
}

.hero_orbit,
.hero_v,
.hero_gleam,
.hero_crown,
.hero_pulse,
.hero_spark,
.art_bob,
.art_twinkle,
.art_tumble
{
	transform-box: fill-box;
	transform-origin: center;
}

.hero_orbit
{
	animation: spin 120s linear infinite;
}

.hero_orbit_reverse
{
	animation-duration: 160s;
	animation-direction: reverse;
}

.hero_gleam
{
	animation: gleam 10s var(--ease_soft) 3s infinite;
}

.hero_crown
{
	animation: float 9s ease-in-out infinite;
}

.hero_pulse
{
	animation: ring 7s ease-out infinite;
}

.hero_pulse_late
{
	animation-delay: -3.5s;
}

.hero_spark
{
	animation: twinkle 5s ease-in-out infinite;
}

.hero_spark_b
{
	animation-delay: -1.8s;
}

.hero_spark_c
{
	animation-delay: -3.4s;
}

.float
{
	position: absolute;
	filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45));
	translate: calc(var(--px, 0) * var(--depth, 1) * 10px) calc(var(--py, 0) * var(--depth, 1) * 8px);
	animation: float 11s ease-in-out infinite;
}

.float_coin_a
{
	left: 17%;
	top: 58%;
	width: 66px;
	height: 66px;
	--tilt: -16deg;
	--depth: 1.6;
	animation-delay: -2s;
}

.float_coin_b
{
	right: 5%;
	top: 22%;
	width: 74px;
	height: 74px;
	--tilt: 12deg;
	--depth: 2;
	animation-duration: 13s;
}

.float_die_a
{
	left: 26%;
	bottom: 8%;
	width: 56px;
	height: 56px;
	--tilt: -10deg;
	--depth: 1.2;
	animation-delay: -5s;
	animation-duration: 12s;
}

.float_die_b
{
	right: 16%;
	bottom: 8%;
	width: 46px;
	height: 46px;
	--tilt: 14deg;
	--depth: 0.9;
	animation-delay: -7s;
}

.float_gem_a
{
	right: 4%;
	top: 4%;
	width: 38px;
	height: 38px;
	--tilt: 10deg;
	--depth: 1.3;
	animation-delay: -3s;
	animation-duration: 10s;
}

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

.label
{
	color: var(--text_mute);
	font-size: 12px;
	font-weight: 500;
}

.balance_row
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.coin_large
{
	width: 30px;
	height: 30px;
}

.balance_amount
{
	font: 650 28px/1 var(--font_display);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.square_button
{
	width: 34px;
	height: 34px;
}

.level_row
{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	color: var(--text_mute);
	font-size: 11.5px;
	font-weight: 500;
}

.level_percent
{
	color: var(--text_dim);
	font-variant-numeric: tabular-nums;
}

.join_title
{
	margin: 4px 0 6px;
	font: 650 20px/1.2 var(--font_display);
	letter-spacing: -0.01em;
}

.join_text
{
	margin-bottom: 16px;
	color: var(--text_dim);
	font-size: 13px;
}

.join_text strong
{
	color: var(--gold);
	font-weight: 600;
}

.meter
{
	position: relative;
	display: block;
	height: 5px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.07);
}

.meter_thin
{
	height: 4px;
	margin-top: 8px;
}

.meter_fill
{
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--violet), var(--violet_soft));
	transform: scaleX(var(--fill, 0));
	transform-origin: left center;
	transition: transform 1.4s var(--ease);
}

.meter_fill_cyan
{
	background: linear-gradient(90deg, #22d3ee, var(--cyan));
}

.rail_card
{
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--radius_m);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow_card);
	transition: background 0.25s, border-color 0.25s;
}

.rail_card:hover
{
	background: var(--surface_raise);
	border-color: var(--line_accent);
}

.rail_icon
{
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
}

.rail_icon svg
{
	width: 28px;
	height: 28px;
	transition: transform 0.5s var(--ease);
}

.rail_card:hover .rail_icon svg
{
	transform: scale(1.08);
}

.rail_icon .wheel_spin
{
	transition: transform 1.8s cubic-bezier(0.2, 0.9, 0.1, 1);
}

.rail_card:hover .rail_icon .wheel_spin
{
	transform: rotate(360deg);
}

.rail_meta
{
	min-width: 0;
}

.rail_title
{
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.rail_text
{
	display: block;
	overflow: hidden;
	color: var(--text_mute);
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rail_tag
{
	padding: 4px 8px;
	border-radius: 7px;
	color: var(--text_dim);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.04);
}

.rail_tag_ready
{
	color: #6ee7b7;
	background: rgba(52, 211, 153, 0.1);
}

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

.section_head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.section_title
{
	display: flex;
	align-items: center;
	gap: 10px;
	font: 650 18px/1.2 var(--font_display);
	letter-spacing: -0.01em;
}

.tint_crash
{
	--tint_a: #38bdf8;
	--tint_b: #3730a3;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #e9d5ff 45%, #f472b6 92%);
	--title_edge: #3b0764;
}

.tint_dice
{
	--tint_a: #a78bfa;
	--tint_b: #5b21b6;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #ddd6fe 50%, #a78bfa 92%);
	--title_edge: #2e1065;
}

.tint_mines
{
	--tint_a: #2dd4bf;
	--tint_b: #115e59;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #a5f3fc 50%, #2dd4bf 92%);
	--title_edge: #0b3b3a;
}

.tint_plinko
{
	--tint_a: #f472b6;
	--tint_b: #9d174d;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fbcfe8 50%, #fb923c 92%);
	--title_edge: #4a0d2b;
}

.tint_tower
{
	--tint_a: #fb923c;
	--tint_b: #9a3412;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fed7aa 50%, #f97316 92%);
	--title_edge: #431407;
}

.tint_limbo
{
	--tint_a: #38bdf8;
	--tint_b: #1e3a8a;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #bae6fd 50%, #38bdf8 92%);
	--title_edge: #0c2a4d;
}

.tint_keno
{
	--tint_a: #4ade80;
	--tint_b: #166534;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #bbf7d0 50%, #4ade80 92%);
	--title_edge: #052e16;
}

.tint_wheel
{
	--tint_a: #e879f9;
	--tint_b: #86198f;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #f5d0fe 50%, #e879f9 92%);
	--title_edge: #4a044e;
}

.tint_hilo
{
	--tint_a: #fb923c;
	--tint_b: #7c2d12;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #ffedd5 50%, #fdba74 92%);
	--title_edge: #431407;
}

.tint_coinflip
{
	--tint_a: #fbbf24;
	--tint_b: #92400e;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fef3c7 50%, #fbbf24 92%);
	--title_edge: #451a03;
}

.tint_blackjack
{
	--tint_a: #34d399;
	--tint_b: #065f46;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #d1fae5 50%, #34d399 92%);
	--title_edge: #022c22;
}

.tint_poker
{
	--tint_a: #f87171;
	--tint_b: #7f1d1d;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fee2e2 50%, #f87171 92%);
	--title_edge: #450a0a;
}

.tint_arena
{
	--tint_a: #22d3ee;
	--tint_b: #1e40af;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #cffafe 50%, #22d3ee 92%);
	--title_edge: #082f49;
}

.tint_roulette
{
	--tint_a: #ef4444;
	--tint_b: #1c1917;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fecaca 50%, #ef4444 92%);
	--title_edge: #2a0a0a;
}

.tint_candy
{
	--tint_a: #f472b6;
	--tint_b: #6d28d9;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fce7f3 50%, #f9a8d4 92%);
	--title_edge: #500724;
}

.tint_derby
{
	--tint_a: #a3e635;
	--tint_b: #3f6212;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #ecfccb 50%, #a3e635 92%);
	--title_edge: #1a2e05;
}

.tint_cups
{
	--tint_a: #facc15;
	--tint_b: #713f12;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fef9c3 50%, #facc15 92%);
	--title_edge: #422006;
}

.tint_gum
{
	--tint_a: #f9a8d4;
	--tint_b: #9d174d;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #fce7f3 50%, #f472b6 92%);
	--title_edge: #500724;
}

.tint_fishing
{
	--tint_a: #22d3ee;
	--tint_b: #155e75;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #cffafe 50%, #22d3ee 92%);
	--title_edge: #083344;
}

.tint_rumble
{
	--tint_a: #60a5fa;
	--tint_b: #1e3a8a;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #dbeafe 50%, #60a5fa 92%);
	--title_edge: #172554;
}

.tint_capsule
{
	--tint_a: #c084fc;
	--tint_b: #6b21a8;
	--title_fill: linear-gradient(180deg, #ffffff 10%, #f3e8ff 50%, #c084fc 92%);
	--title_edge: #3b0764;
}

.art_bob
{
	animation: bob 4s ease-in-out infinite;
}

.art_twinkle
{
	animation: twinkle 2.6s ease-in-out infinite;
}

.art_twinkle_late
{
	animation-delay: -1.3s;
}

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

.live_dot
{
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--red);
}

.live_dot::after
{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--red);
	animation: live 3s ease-out infinite;
}

.art_tumble
{
	animation: tumble 3.5s ease-in-out infinite;
}

.art_tumble_late
{
	animation-delay: -1.7s;
}

.panel
{
	min-width: 0;
	padding: 16px 18px 8px;
	border-radius: var(--radius_l);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow_card);
}

.panel_head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 30px;
	margin-bottom: 6px;
}

.panel_title
{
	font: 650 15px/1.2 var(--font_display);
}

.panel_live
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fda4af;
	font-size: 11px;
	font-weight: 600;
}

.panel_live .live_dot
{
	width: 6px;
	height: 6px;
}

.tabs
{
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 9px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--line);
}

.tab
{
	padding: 3px 9px;
	border-radius: 6px;
	color: var(--text_mute);
	font-size: 11.5px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.tab:hover
{
	color: var(--text);
}

.tab[aria-selected="true"]
{
	color: #fff;
	background: rgba(139, 92, 246, 0.3);
}

.board_list,
.feed_list
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.board_row
{
	display: grid;
	grid-template-columns: 22px 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 2px;
	border-top: 1px solid var(--line_soft);
	animation: row_in 0.5s var(--ease) both;
	animation-delay: calc(var(--index, 0) * 50ms);
}

.board_row:first-child,
.feed_row:first-child
{
	border-top: 0;
}

.board_rank
{
	display: grid;
	place-items: center;
	color: var(--text_mute);
	font: 600 13px/1 var(--font_display);
}

.board_rank .icon
{
	width: 18px;
	height: 18px;
	color: var(--gold);
}

.board_rank_2
{
	color: #d4d8e2;
}

.board_rank_3
{
	color: #e8a66a;
}

.board_name,
.feed_name
{
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.amount
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #f1d27f;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.amount .coin
{
	width: 14px;
	height: 14px;
}

.feed_row
{
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	border-top: 1px solid var(--line_soft);
	border-radius: 10px;
}

.feed_row_new
{
	animation: feed_in 0.8s var(--ease) both;
}

.feed_thumb
{
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--tint_a, var(--violet)), var(--tint_b, var(--violet_deep)));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.feed_thumb svg
{
	width: 20px;
	height: 20px;
}

.feed_meta
{
	min-width: 0;
}

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

.feed_who
{
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 6px;
	min-width: 0;
}

.feed_who .avatar
{
	width: 18px;
	height: 18px;
	font-size: 7px;
}

.feed_amount
{
	flex: none;
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.feed_row_big .feed_amount
{
	color: #f1d27f;
}

.feed_game
{
	display: block;
	overflow: hidden;
	color: var(--text_mute);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.feed_time
{
	color: var(--text_mute);
	font-size: 11.5px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

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

.footer
{
	margin-top: auto;
	padding: 36px 28px 28px;
	background: var(--bg_soft);
	border-top: 1px solid var(--line);
}

.footer_grid
{
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 32px;
	max-width: 2344px;
	margin: 0 auto;
}

.footer_about
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.footer_about p
{
	max-width: 300px;
	color: var(--text_mute);
	font-size: 13px;
	line-height: 1.6;
}

.footer_column h4
{
	margin: 4px 0 14px;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
}

.footer_column ul
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer_column a
{
	color: var(--text_mute);
	font-size: 13px;
	transition: color 0.2s;
}

.footer_column a:hover
{
	color: var(--text);
}

.footer_bottom
{
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 2344px;
	margin: 32px auto 0;
	padding-top: 20px;
	color: var(--text_mute);
	font-size: 12px;
	border-top: 1px solid var(--line);
}

.footer_bottom p
{
	flex: 1;
	max-width: 760px;
	line-height: 1.6;
}

.footer_copy
{
	margin-left: auto;
	white-space: nowrap;
}

.age_badge
{
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	color: #fda4af;
	font-size: 11px;
	font-weight: 700;
	border: 1.5px solid rgba(251, 113, 133, 0.45);
}

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

.auth
{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr);
	min-height: 100vh;
}

.auth_stage
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 52px 52px;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(80% 70% at 55% 42%, #241258 0%, #150b38 42%, #0b0918 85%);
	border-right: 1px solid var(--line);
}

.auth_stage .hero_floor
{
	left: -10%;
	right: -10%;
	bottom: -6%;
	height: 46%;
}

.auth_emblem
{
	position: relative;
	flex: 1;
	min-height: 280px;
}

.auth_emblem .hero_art
{
	height: 100%;
	max-height: 440px;
}

.auth_emblem .float_coin_a
{
	left: 10%;
	top: 56%;
}

.auth_emblem .float_coin_b
{
	right: 9%;
	top: 18%;
}

.auth_emblem .float_die_a
{
	left: 20%;
	bottom: 4%;
}

.auth_emblem .float_gem_a
{
	right: 14%;
	top: auto;
	bottom: 10%;
}

.auth_copy
{
	position: relative;
	max-width: 480px;
}

.auth_title
{
	margin: 16px 0 22px;
	font: 700 clamp(32px, 3vw, 44px)/1.08 var(--font_display);
	letter-spacing: -0.026em;
}

.auth_title span
{
	display: block;
}

.auth_perks
{
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.auth_perks li
{
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text_dim);
	font-size: 14px;
}

.perk_icon
{
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 10px;
	color: var(--violet_soft);
	background: rgba(139, 92, 246, 0.12);
	border: 1px solid rgba(139, 92, 246, 0.2);
}

.perk_icon .icon
{
	width: 17px;
	height: 17px;
}

.auth_panel
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 88px 40px 72px;
	background: var(--bg);
}

.auth_back
{
	position: absolute;
	top: 28px;
	left: 40px;
}

.auth_back .icon
{
	transform: none;
}

.auth_back:hover .icon
{
	transform: translateX(-3px);
}

.auth_card
{
	width: 100%;
	max-width: 400px;
}

.auth_card.is_shaking
{
	animation: shake 0.45s var(--ease_soft);
}

.auth_tabs
{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 30px;
	padding: 4px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.auth_tab
{
	position: relative;
	z-index: 1;
	height: 38px;
	border-radius: 9px;
	color: var(--text_mute);
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s;
}

.auth_tab[aria-selected="true"]
{
	color: #fff;
}

.auth_tabs_slider
{
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.24);
	border: 1px solid rgba(167, 139, 250, 0.3);
	transition: transform 0.45s var(--ease);
}

.auth_tabs.is_register .auth_tabs_slider
{
	transform: translateX(100%);
}

.auth_form
{
	animation: form_in 0.45s var(--ease) both;
}

.auth_heading
{
	font: 700 26px/1.2 var(--font_display);
	letter-spacing: -0.02em;
}

.auth_sub
{
	margin: 6px 0 26px;
	color: var(--text_dim);
}

.auth_sub strong
{
	color: var(--gold);
	font-weight: 600;
}

.field
{
	display: block;
	margin-bottom: 16px;
}

.field_label
{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	color: var(--text_dim);
	font-size: 13px;
	font-weight: 500;
}

.field_box
{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 6px 0 14px;
	border-radius: 12px;
	color: var(--text_mute);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.field_box:focus-within
{
	color: var(--violet_soft);
	background: var(--surface_raise);
	border-color: rgba(139, 92, 246, 0.55);
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.field.is_invalid .field_box
{
	border-color: rgba(251, 113, 133, 0.55);
}

.field_box input
{
	flex: 1;
	min-width: 0;
	height: 100%;
	color: var(--text);
	font: 15px var(--font_body);
	background: none;
	border: 0;
	outline: 0;
}

.field_box input::placeholder
{
	color: var(--text_mute);
}

.field_box input:-webkit-autofill
{
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 40px var(--surface_raise) inset;
	caret-color: var(--text);
}

.field_toggle
{
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	color: var(--text_mute);
	transition: color 0.2s, background 0.2s;
}

.field_toggle:hover
{
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}

.field_hint
{
	margin-top: 7px;
	color: var(--text_mute);
	font-size: 12px;
}

.field_hint_warn
{
	color: #fcd34d;
}

.strength_label
{
	color: var(--text_mute);
	font-weight: 500;
}

.strength
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin-top: 9px;
}

.strength span
{
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	transition: background 0.3s;
}

.strength[data-score="1"] span:nth-child(-n + 1)
{
	background: #fb7185;
}

.strength[data-score="2"] span:nth-child(-n + 2)
{
	background: #fbbf24;
}

.strength[data-score="3"] span:nth-child(-n + 3)
{
	background: #a3e635;
}

.strength[data-score="4"] span
{
	background: var(--green);
}

.check
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text_dim);
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

.check input
{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.check_box
{
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 5px;
	color: #fff;
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.16);
	transition: background 0.2s, border-color 0.2s;
}

.check_box .icon
{
	width: 12px;
	height: 12px;
	stroke-width: 2.4;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s, transform 0.25s var(--ease);
}

.check input:checked + .check_box
{
	background: var(--violet);
	border-color: var(--violet);
}

.check input:checked + .check_box .icon
{
	opacity: 1;
	transform: none;
}

.check input:focus-visible + .check_box
{
	outline: 2px solid var(--violet_soft);
	outline-offset: 2px;
}

.check a
{
	color: var(--violet_soft);
}

.auth_row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 6px 0 18px;
}

.auth_terms
{
	margin: 4px 0 18px;
}

.auth_error
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #fecdd3;
	font-size: 13px;
	background: rgba(251, 113, 133, 0.08);
	border: 1px solid rgba(251, 113, 133, 0.22);
	animation: form_in 0.3s var(--ease) both;
}

.auth_error .icon
{
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.auth_submit
{
	width: 100%;
	height: 50px;
	font-size: 15px;
}

.spinner
{
	display: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	animation: spin 0.8s linear infinite;
}

.auth_submit.is_busy
{
	pointer-events: none;
}

.auth_submit.is_busy .spinner
{
	display: block;
}

.auth_submit.is_busy .auth_submit_text
{
	opacity: 0.75;
}

.auth_submit .icon_done
{
	display: none;
}

.auth_submit.is_done
{
	background: linear-gradient(180deg, #22c58d, #0f9f6e);
}

.auth_submit.is_done .auth_submit_text,
.auth_submit.is_done .spinner
{
	display: none;
}

.auth_submit.is_done .icon_done
{
	display: block;
	width: 22px;
	height: 22px;
	stroke-width: 2.4;
	animation: pop 0.4s var(--ease) both;
}

.auth_switch
{
	margin-top: 22px;
	color: var(--text_mute);
	font-size: 13.5px;
	text-align: center;
}

.auth_switch button
{
	color: var(--violet_soft);
	font-weight: 600;
}

.auth_switch button:hover
{
	color: #ede9fe;
}

.auth_notice
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(52, 211, 153, 0.07);
	border: 1px solid rgba(52, 211, 153, 0.22);
	color: var(--text_dim);
	font-size: 13px;
}

.auth_notice > .icon
{
	color: var(--green);
}

.auth_notice strong
{
	color: var(--text);
	font-weight: 600;
}

.auth_notice .text_link
{
	margin-left: auto;
}

.auth_legal
{
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 24px;
	color: var(--text_mute);
	font-size: 12px;
	text-align: center;
}

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

.visually_hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.game_header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.game_back
{
	flex-basis: 100%;
}

.game_back .icon
{
	transform: none;
}

.game_back:hover .icon
{
	transform: translateX(-3px);
}

.game_heading
{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-right: auto;
}

.game_icon
{
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0.06)), var(--surface);
	border: 1px solid var(--line_accent);
}

.game_icon svg
{
	width: 34px;
	height: 34px;
}

.game_name
{
	font: 700 28px/1.1 var(--font_display);
	letter-spacing: -0.02em;
}

.game_tagline
{
	margin-top: 4px;
	color: var(--text_dim);
}

.chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--text_dim);
	font-size: 12.5px;
	font-weight: 500;
	background: var(--surface);
	border: 1px solid var(--line);
}

.chip .icon
{
	width: 15px;
	height: 15px;
	color: var(--green);
}

.chip_button
{
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip_button:hover
{
	color: var(--text);
	background: var(--surface_raise);
	border-color: rgba(52, 211, 153, 0.35);
}

.game_page
{
	--game_header: 48px;
	--play_offset: calc(16px + var(--game_header) + var(--gap) + 20px);
	--play_min: 500px;
	max-width: 2240px;
	padding-top: 16px;
}

.game_page .game_header
{
	flex-wrap: nowrap;
	gap: 18px;
	height: var(--game_header);
}

.game_page .game_back
{
	flex: none;
}

.game_page .game_heading
{
	min-width: 0;
	gap: 12px;
}

.game_page .game_heading > div
{
	min-width: 0;
}

.game_page .game_icon
{
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
}

.game_page .game_icon svg
{
	width: 28px;
	height: 28px;
}

.game_page .game_name
{
	font-size: 24px;
}

.game_page .game_tagline
{
	margin-top: 2px;
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.game_page .chips
{
	flex-wrap: nowrap;
}

.game_area
{
	height: max(var(--play_min), calc(100dvh - var(--topbar) - var(--play_offset)));
	min-height: 0;
}

.game_layout
{
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: var(--gap);
	align-items: stretch;
}

.game_controls
{
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.field_aside
{
	color: var(--text_mute);
	font-weight: 400;
}

.field_aside strong
{
	color: var(--text_dim);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.field_box .coin
{
	width: 18px;
	height: 18px;
}

.field_box input
{
	font-variant-numeric: tabular-nums;
}

.field_chip
{
	height: 32px;
	min-width: 38px;
	padding: 0 9px;
	border-radius: 8px;
	color: var(--text_dim);
	font-size: 12.5px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.05);
	transition: background 0.2s, color 0.2s;
}

.field_chip:hover
{
	color: #fff;
	background: rgba(139, 92, 246, 0.24);
}

.field_suffix
{
	padding-right: 8px;
	color: var(--text_mute);
	font-weight: 600;
}

.field_box_static
{
	color: var(--text_mute);
	background: rgba(255, 255, 255, 0.02);
}

.field_box_static output
{
	color: #6ee7b7;
	font: 600 15px var(--font_body);
	font-variant-numeric: tabular-nums;
}

.segmented
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.segment
{
	height: 38px;
	border-radius: 9px;
	color: var(--text_mute);
	font-size: 14px;
	font-weight: 500;
	transition: background 0.25s, color 0.25s;
}

.segment:hover
{
	color: var(--text);
}

.segment[aria-checked="true"]
{
	color: #fff;
	background: rgba(139, 92, 246, 0.24);
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}

.game_controls .auth_error
{
	margin-top: 2px;
}

.play_button
{
	width: 100%;
	height: 54px;
	margin-top: auto;
	font-size: 16px;
}

.play_button.is_busy
{
	pointer-events: none;
}

.play_button.is_rolling
{
	cursor: default;
	opacity: 0.6;
	filter: saturate(0.7);
	transition: opacity 0.2s, filter 0.2s;
}

.play_button.is_busy .spinner
{
	display: block;
}

.play_hint
{
	margin-top: 12px;
	color: var(--text_mute);
	font-size: 12px;
	text-align: center;
}

kbd
{
	padding: 1px 6px;
	border-radius: 5px;
	color: var(--text_dim);
	font: 600 11px/1.6 var(--font_body);
	border: 1px solid var(--line_strong);
}

.game_stage
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 18px 24px 20px;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	background: radial-gradient(70% 90% at 50% 0%, rgba(139, 92, 246, 0.12), transparent 70%), var(--surface);
	transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}

.game_stage::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.6s var(--ease);
	pointer-events: none;
}

.game_stage.is_win
{
	border-color: rgba(52, 211, 153, 0.4);
}

.game_stage.is_win::after
{
	opacity: 1;
	background: radial-gradient(60% 70% at 50% 30%, rgba(52, 211, 153, 0.12), transparent 70%);
}

.game_stage.is_loss
{
	border-color: rgba(251, 113, 133, 0.28);
}

.game_stage.is_loss::after
{
	opacity: 1;
	background: radial-gradient(60% 70% at 50% 30%, rgba(251, 113, 133, 0.07), transparent 70%);
}

.recent_list
{
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	min-height: 26px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
	mask-image: linear-gradient(to right, transparent, #000 56px);
}

.roll_pill
{
	display: inline-grid;
	place-items: center;
	min-width: 54px;
	height: 26px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--text_dim);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.05);
}

.roll_pill.is_win
{
	color: #a7f3d0;
	background: rgba(52, 211, 153, 0.16);
}

.recent_list .roll_pill:last-child
{
	animation: pill_in 0.4s var(--ease) both;
}

.stage_coins
{
	position: absolute;
	inset: 0;
	z-index: 6;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.stage_top
{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.stage_status
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
}

.stage_label
{
	color: var(--text_mute);
	font-size: 13px;
	font-weight: 500;
}

.stage_value
{
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.stage_value strong
{
	min-height: 1em;
	color: var(--text);
	font: 800 44px/1 var(--font_display);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	transition: color 0.4s var(--ease);
}

.stage_value strong[data-state="win"]
{
	color: #6ee7b7;
}

.stage_value strong[data-state="loss"]
{
	color: #fda4af;
}

.stage_parts
{
	color: var(--text_mute);
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.table_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 140px;
	margin: -14px -8px 0;
	perspective: calc(1100px * var(--table_scale, 1));
	perspective-origin: 50% calc(43% - 191px * var(--table_scale, 1));
}

.table_plane
{
	position: absolute;
	left: 50%;
	top: 43%;
	width: 620px;
	height: 360px;
	margin: -180px 0 0 -310px;
	transform-style: preserve-3d;
	transform: scale(var(--table_scale, 1)) rotateX(52deg);
}

.table_felt
{
	position: absolute;
	inset: 0;
	border-radius: 180px;
	background: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(255, 255, 255, 0.07), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 40%, #34248c 0%, #22185f 48%, #140d38 100%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.32), inset 0 0 70px rgba(0, 0, 0, 0.55), 0 0 0 16px #1d1438, 0 0 0 17px rgba(245, 196, 81, 0.3), 0 0 0 30px #0f0a22, 0 46px 80px rgba(0, 0, 0, 0.7);
}

.felt_ring
{
	position: absolute;
	inset: 30px;
	border-radius: 150px;
	border: 2px solid rgba(245, 196, 81, 0.28);
}

.felt_crest
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 132px;
	height: 110px;
	margin: -55px 0 0 -66px;
	opacity: 0.12;
}

.felt_title,
.felt_terms
{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(245, 196, 81, 0.55);
	white-space: nowrap;
}

.felt_title
{
	top: 46px;
	font: 700 23px/1 var(--font_game);
	letter-spacing: 0.5em;
	margin-right: -0.5em;
}

.felt_terms
{
	bottom: 48px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	color: rgba(245, 196, 81, 0.38);
}

.die
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	transform-style: preserve-3d;
}

.die_spin
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.die_core
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	backface-visibility: hidden;
}

.die_corner
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	transform-origin: 0 0;
	backface-visibility: hidden;
}

.die_corner_fill
{
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.die_edge
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7.6px;
	height: 51px;
	margin: -25.5px 0 0 -3.8px;
	backface-visibility: hidden;
}

.die_face
{
	position: absolute;
	inset: 8.75px;
	display: grid;
	grid-template-areas: "tl . tr" "ml mm mr" "bl . br";
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 6px;
	border-radius: 1px;
	backface-visibility: hidden;
}

.die_face_front
{
	transform: translateZ(34px);
}

.die_face_back
{
	transform: rotateY(180deg) translateZ(34px);
}

.die_face_right
{
	transform: rotateY(90deg) translateZ(34px);
}

.die_face_left
{
	transform: rotateY(-90deg) translateZ(34px);
}

.die_face_top
{
	transform: rotateX(90deg) translateZ(34px);
}

.die_face_bottom
{
	transform: rotateX(-90deg) translateZ(34px);
}

.pip
{
	width: 10.5px;
	height: 10.5px;
	place-self: center;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #07060c 0%, #1d1830 58%, #3b3454 100%);
	box-shadow: inset 0 2px 2.5px rgba(0, 0, 0, 0.75), inset 0 -1px 1px rgba(255, 255, 255, 0.18), 0 1px 0 rgba(255, 255, 255, 0.85), 0 -0.5px 0 rgba(120, 110, 160, 0.4);
}

.pip_tl
{
	grid-area: tl;
}

.pip_tr
{
	grid-area: tr;
}

.pip_ml
{
	grid-area: ml;
}

.pip_mm
{
	grid-area: mm;
}

.pip_mr
{
	grid-area: mr;
}

.pip_bl
{
	grid-area: bl;
}

.pip_br
{
	grid-area: br;
}

.die_shadow
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78px;
	height: 78px;
	margin: -39px 0 0 -39px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.sum_board
{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	gap: 6px;
}

.sum_cell
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 0 7px;
	border-radius: 10px;
	color: var(--text_mute);
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.sum_cell:hover
{
	color: var(--text_dim);
	border-color: rgba(255, 255, 255, 0.14);
}

.sum_bar
{
	position: relative;
	width: 8px;
	height: 26px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
}

.sum_bar::after
{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--ways, 1) / 6 * 100%);
	border-radius: inherit;
	background: rgba(167, 139, 250, 0.45);
	transition: background 0.25s;
}

.sum_value
{
	color: var(--text_dim);
	font: 700 16px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
}

.sum_odds
{
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
}

.sum_cell.is_zone
{
	background: rgba(52, 211, 153, 0.07);
	border-color: rgba(52, 211, 153, 0.26);
}

.sum_cell.is_zone .sum_bar::after
{
	background: #34d399;
}

.sum_cell.is_zone .sum_value
{
	color: #d1fae5;
}

.sum_cell.is_target
{
	box-shadow: inset 0 0 0 1.5px var(--violet_soft);
}

.sum_cell.is_hit
{
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(245, 196, 81, 0.3);
	animation: cell_hit 0.7s var(--ease);
}

.game_stats
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.stat
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
}

.stat_label
{
	color: var(--text_mute);
	font-size: 12px;
	white-space: nowrap;
}

@container (max-width: 760px)
{
	.stat
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 8px 12px;
	}
}

.stat_value
{
	font: 650 17px/1.3 var(--font_display);
	font-variant-numeric: tabular-nums;
}

.segmented_three
{
	grid-template-columns: repeat(3, 1fr);
}

.stepper
{
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 52px;
	align-items: center;
	height: 52px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
}

.stepper_button
{
	height: 100%;
	color: var(--text_dim);
	font-size: 22px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.stepper_button:hover
{
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.stepper_button:disabled
{
	opacity: 0.3;
	cursor: default;
}

.stepper_value
{
	font: 800 26px/1 var(--font_display);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

@keyframes cell_hit
{
	0%
	{
		scale: 1;
	}

	35%
	{
		scale: 1.08;
	}

	100%
	{
		scale: 1;
	}
}

.float_text
{
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 7;
	transform: translate(-50%, -100%);
	font: 800 24px/1 var(--font_display);
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
	pointer-events: none;
	animation: float_up 1.4s var(--ease) forwards;
}

.float_green
{
	color: #6ee7b7;
}

.float_gold
{
	color: #fcd34d;
	font-size: 28px;
}

.big_win
{
	position: absolute;
	inset: -10px 0;
	z-index: 8;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4px;
	background: radial-gradient(closest-side, rgba(8, 7, 15, 0.82), rgba(8, 7, 15, 0));
	pointer-events: none;
	animation: big_in 0.55s var(--ease) both;
}

.big_win_label
{
	color: var(--gold);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.big_win_amount
{
	font: 800 48px/1.05 var(--font_display);
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, #fff6d5 10%, var(--gold) 55%, var(--gold_deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 4px 22px rgba(245, 196, 81, 0.45));
}

.big_win_multiplier
{
	color: var(--text_dim);
	font-size: 14px;
	font-weight: 600;
}

.game_tools
{
	display: flex;
	gap: 8px;
}

.tool_button
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	border-radius: 9px;
	color: var(--text_mute);
	font-size: 12.5px;
	font-weight: 500;
	border: 1px solid var(--line);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tool_button:hover
{
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.12);
}

.tool_button[aria-pressed="true"]
{
	color: #fff;
	background: rgba(139, 92, 246, 0.18);
	border-color: rgba(167, 139, 250, 0.34);
}

.tool_button .icon
{
	width: 16px;
	height: 16px;
}

.tool_button[aria-pressed="true"] .icon_off,
.tool_button[aria-pressed="false"] .icon_on
{
	display: none;
}

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

.game_side .game_controls
{
	flex: 1 0 auto;
}

.game_session
{
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 16px 18px;
	overflow: hidden;
}

.session_head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.session_chart
{
	display: block;
	flex: 0 1 64px;
	width: 100%;
	min-height: 0;
	margin: 12px 0 14px;
}

.session_stats
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
	margin: 0;
}

.session_stats div
{
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
}

.session_stats dt
{
	color: var(--text_mute);
}

.session_stats dd
{
	margin: 0;
	color: var(--text_dim);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.session_stats dd.is_up
{
	color: #6ee7b7;
}

.session_stats dd.is_down
{
	color: #fda4af;
}

@keyframes float_up
{
	0%
	{
		opacity: 0;
		translate: 0 12px;
		scale: 0.8;
	}

	14%
	{
		opacity: 1;
		translate: 0 0;
		scale: 1.06;
	}

	100%
	{
		opacity: 0;
		translate: 0 -64px;
		scale: 1;
	}
}

@keyframes big_in
{
	from
	{
		opacity: 0;
		scale: 0.86;
	}
}

.game_tables
{
	padding: 14px 18px 18px;
}

.table_scroll
{
	overflow-x: auto;
}

.bets_table
{
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.bets_table th
{
	padding: 10px 12px;
	color: var(--text_mute);
	font-size: 12px;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.bets_table td
{
	padding: 10px 12px;
	color: var(--text_dim);
	font-size: 13px;
	white-space: nowrap;
	border-bottom: 1px solid var(--line_soft);
}

.bet_row_new
{
	animation: feed_in 0.7s var(--ease) both;
}

.bet_time
{
	color: var(--text_mute);
}

.bet_profit
{
	color: #fda4af;
	font-weight: 600;
}

.bet_profit.is_win
{
	color: #6ee7b7;
}

.empty_state
{
	padding: 28px 0 14px;
	color: var(--text_mute);
	text-align: center;
}

@keyframes pill_in
{
	from
	{
		opacity: 0;
		translate: 8px 0;
	}
}

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

.play_button.is_cashout
{
	background: linear-gradient(180deg, #34d399, #059669);
	box-shadow: 0 12px 30px -12px rgba(16, 185, 129, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.play_button.is_cashout:hover
{
	filter: brightness(1.08);
}

.field_mark
{
	color: var(--text_mute);
	font-weight: 700;
}

.crash_target_field.is_off .field_box
{
	opacity: 0.45;
}

.crash_target_field.is_off .field_box:focus-within
{
	opacity: 1;
}

.crash_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 180px;
	overflow: hidden;
	border-radius: var(--radius_m);
	background: radial-gradient(120% 90% at 15% 115%, rgba(124, 58, 237, 0.3), transparent 60%), radial-gradient(70% 70% at 92% 0%, rgba(236, 72, 153, 0.14), transparent 65%), linear-gradient(180deg, #0c091d, #130d2c);
	border: 1px solid var(--line);
}

.crash_canvas
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.crash_readout
{
	position: absolute;
	inset: 0 0 34px 56px;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 6px;
	text-align: center;
	pointer-events: none;
}

.crash_caption
{
	color: var(--text_mute);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.crash_value
{
	color: #fff;
	font: 800 clamp(44px, 9cqi, 120px)/1 var(--font_display);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 6px 40px rgba(167, 139, 250, 0.45);
	transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}

.crash_value[data-state="idle"],
.crash_value[data-state="launch"]
{
	color: rgba(255, 255, 255, 0.55);
	text-shadow: none;
}

.crash_value[data-state="flight"]
{
	color: var(--level, #fff);
	text-shadow: 0 6px 44px var(--level_glow, rgba(167, 139, 250, 0.45));
}

.crash_readout.is_milestone .crash_value
{
	animation: crash_pop 0.5s var(--ease);
}

.crash_value[data-state="cashed"]
{
	color: #6ee7b7;
	text-shadow: 0 6px 40px rgba(52, 211, 153, 0.45);
}

.crash_value[data-state="safe"]
{
	color: rgba(253, 164, 175, 0.85);
	text-shadow: none;
}

.crash_value[data-state="busted"]
{
	color: #fb7185;
	text-shadow: 0 6px 40px rgba(244, 63, 94, 0.5);
	animation: crash_pop 0.45s var(--ease);
}

.crash_note
{
	color: var(--text_dim);
	font-size: 13px;
	font-weight: 500;
}

.crash_countdown
{
	display: block;
	width: 160px;
	height: 5px;
	margin-top: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}

.crash_countdown_fill
{
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8b5cf6, #f472b6);
	transform-origin: left center;
	transform: scaleX(0);
}

.crash_pill.is_low
{
	color: #fda4af;
	background: rgba(244, 63, 94, 0.12);
}

.crash_pill.is_high
{
	color: #fde68a;
	background: rgba(245, 158, 11, 0.18);
}

.mines_presets
{
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.mines_presets .field_chip
{
	flex: 1;
	height: 30px;
}

.field_chip.is_active
{
	color: #fff;
	background: rgba(139, 92, 246, 0.32);
}

.field_chip:disabled
{
	opacity: 0.45;
	cursor: default;
}

.mines_random
{
	width: 100%;
	height: 40px;
	margin-top: 10px;
}

.mines_field
{
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	flex: 1 1 0;
	justify-items: center;
	gap: 6px;
	min-height: 0;
	padding: 14px 12px 8px;
	overflow: hidden;
	border-radius: var(--radius_m);
	background: radial-gradient(50% 55% at 50% 62%, rgba(34, 211, 238, 0.18), transparent 70%), radial-gradient(90% 70% at 50% 125%, rgba(124, 58, 237, 0.4), transparent 65%), radial-gradient(60% 50% at 50% -10%, rgba(236, 72, 153, 0.14), transparent 70%), linear-gradient(180deg, #0b0a1d, #120d29);
	border: 1px solid var(--line);
}

.mines_field::before
{
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
	mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
	pointer-events: none;
}

.mines_field::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	background: radial-gradient(70% 70% at 50% 55%, transparent 40%, rgba(244, 63, 94, 0.5));
	pointer-events: none;
}

.mines_field.is_busted::after
{
	animation: field_flash 0.9s var(--ease);
}

.mines_ladder
{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	height: 34px;
	overflow: hidden;
}

.ladder_step
{
	display: grid;
	flex: none;
	place-items: center;
	min-width: 68px;
	height: 30px;
	padding: 0 10px;
	border-radius: 10px;
	color: var(--text_mute);
	font: 700 13px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ladder_step.is_done
{
	color: #a5f3fc;
	background: rgba(34, 211, 238, 0.12);
	border-color: rgba(34, 211, 238, 0.35);
}

.ladder_step.is_next
{
	color: #fff;
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.5), rgba(139, 92, 246, 0.22));
	border-color: rgba(196, 181, 253, 0.65);
	box-shadow: 0 0 18px rgba(139, 92, 246, 0.5);
}

.mines_scene
{
	--board: 560px;
	--pad: 24px;
	--gap: 12px;
	--tile: calc((var(--board) - 2 * var(--pad) - 4 * var(--gap)) / 5);
	--depth: 18px;
	--slab: 36px;
	--tilt: 38deg;
	position: relative;
	width: 100%;
	height: 100%;
	perspective: calc(1500px * var(--board_scale, 1));
	perspective-origin: 50% 18%;
}

.mines_rig
{
	position: absolute;
	left: 50%;
	top: calc(50% + var(--board_shift, 0px));
	width: var(--board);
	height: var(--board);
	margin: calc(var(--board) / -2) 0 0 calc(var(--board) / -2);
	transform-style: preserve-3d;
	transform: scale(var(--board_scale, 1)) rotateX(var(--tilt));
}

.mines_rig.is_shaking
{
	animation: rig_shake 0.6s var(--ease);
}

.mines_floor
{
	position: absolute;
	inset: -6%;
	border-radius: 60px;
	background: radial-gradient(closest-side, rgba(34, 211, 238, 0.32), rgba(124, 58, 237, 0.18) 55%, transparent);
	box-shadow: 0 0 120px 40px rgba(0, 0, 0, 0.55);
	transform: translateZ(calc(var(--slab) * -1 - 6px));
}

.mines_slab
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.slab_face
{
	position: absolute;
	backface-visibility: hidden;
}

.slab_top
{
	inset: 0;
	border-radius: 26px;
	background: radial-gradient(circle at 16px 16px, rgba(245, 196, 81, 0.75) 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) 16px, rgba(245, 196, 81, 0.75) 3px, transparent 4px), radial-gradient(circle at 16px calc(100% - 16px), rgba(245, 196, 81, 0.75) 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), rgba(245, 196, 81, 0.75) 3px, transparent 4px), radial-gradient(80% 80% at 50% 40%, #2a2152, #120e27);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.45), inset 0 0 0 9px #16112d, inset 0 0 0 10px rgba(255, 255, 255, 0.08), inset 0 0 60px rgba(0, 0, 0, 0.55);
	transition: box-shadow 0.5s var(--ease);
}

.mines_rig.is_won .slab_top
{
	animation: slab_win 1.4s var(--ease);
}

.slab_front,
.slab_back
{
	left: 26px;
	right: 26px;
	top: 50%;
	height: var(--slab);
	margin-top: calc(var(--slab) / -2);
	background: linear-gradient(180deg, #3b2e74 0%, #1d1640 55%, #0e0a20 100%);
	border-top: 2px solid rgba(245, 196, 81, 0.6);
}

.slab_front
{
	transform: rotateX(-90deg) translateZ(calc(var(--board) / 2)) translateY(calc(var(--slab) / 2));
}

.slab_back
{
	transform: rotateX(90deg) translateZ(calc(var(--board) / 2)) translateY(calc(var(--slab) / -2));
}

.slab_left,
.slab_right
{
	top: 26px;
	bottom: 26px;
	left: 50%;
	width: var(--slab);
	margin-left: calc(var(--slab) / -2);
	background: linear-gradient(90deg, #120d28, #2a2156);
	border-left: 2px solid rgba(245, 196, 81, 0.45);
}

.slab_left
{
	transform: rotateY(-90deg) translateZ(calc(var(--board) / 2)) translateX(calc(var(--slab) / -2));
}

.slab_right
{
	transform: rotateY(90deg) translateZ(calc(var(--board) / 2)) translateX(calc(var(--slab) / 2));
}

.mines_board
{
	position: absolute;
	inset: var(--pad);
	display: grid;
	grid-template-columns: repeat(5, var(--tile));
	grid-template-rows: repeat(5, var(--tile));
	gap: var(--gap);
	transform-style: preserve-3d;
	transform: translateZ(1px);
}

.tile
{
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform-style: preserve-3d;
}

.tile:disabled
{
	cursor: default;
}

.tile_block
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--depth) / 2));
	transition: transform 0.22s var(--ease);
}

.tile:enabled:hover .tile_block
{
	transform: translateZ(calc(var(--depth) / 2 + 12px));
}

.tile:enabled:active .tile_block
{
	transform: translateZ(calc(var(--depth) / 2 - 3px));
}

.tile.is_open .tile_block
{
	animation: tile_flip 0.66s cubic-bezier(0.3, 0.1, 0.25, 1) both;
}

.tile_face
{
	position: absolute;
	display: grid;
	place-items: center;
	backface-visibility: hidden;
}

.tile_top,
.tile_bottom
{
	inset: 0;
	overflow: hidden;
	border-radius: 14%;
}

.tile_top
{
	background: linear-gradient(165deg, #5a45b8 0%, #3a2b80 50%, #281d5c 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(221, 214, 254, 0.25), inset 0 -10px 18px rgba(0, 0, 0, 0.25);
	transform: translateZ(calc(var(--depth) / 2));
	transition: background 0.2s, box-shadow 0.2s;
}

.tile_top::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 46%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
}

.tile:enabled:hover .tile_top
{
	background: linear-gradient(165deg, #7258e0 0%, #4a37a8 50%, #322474 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(237, 233, 254, 0.6), 0 0 30px rgba(139, 92, 246, 0.75);
}

.tile.is_pending .tile_top
{
	animation: tile_pulse 0.6s ease-in-out infinite;
}

.tile_logo
{
	width: 46%;
	height: 46%;
	opacity: 0.32;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
	transition: opacity 0.2s, transform 0.2s;
}

.tile:enabled:hover .tile_logo
{
	opacity: 0.85;
	transform: scale(1.08);
}

.tile_bottom
{
	background: radial-gradient(circle at 50% 46%, #22c3d8 0%, #0f6175 38%, #08232e 78%);
	box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.7), inset 0 0 24px rgba(103, 232, 249, 0.4);
	transform: rotateX(180deg) translateZ(calc(var(--depth) / 2));
}

.tile_bottom::before
{
	content: "";
	position: absolute;
	inset: -40%;
	background: conic-gradient(from 0deg, transparent 0 9%, rgba(255, 255, 255, 0.2) 11% 13%, transparent 15% 34%, rgba(255, 255, 255, 0.15) 36% 38%, transparent 40% 59%, rgba(255, 255, 255, 0.18) 61% 63%, transparent 65% 84%, rgba(255, 255, 255, 0.13) 86% 88%, transparent 90%);
	animation: rays_spin 7s linear infinite;
}

.tile.is_mine .tile_bottom
{
	background: radial-gradient(circle at 50% 46%, #c0264f 0%, #5b1430 40%, #20070f 80%);
	box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.7), inset 0 0 24px rgba(251, 113, 133, 0.35);
}

.tile_side
{
	background: linear-gradient(180deg, #34277a, #1a1340);
}

.tile_north,
.tile_south
{
	left: 7%;
	right: 7%;
	top: 50%;
	height: var(--depth);
	margin-top: calc(var(--depth) / -2);
}

.tile_east,
.tile_west
{
	top: 7%;
	bottom: 7%;
	left: 50%;
	width: var(--depth);
	margin-left: calc(var(--depth) / -2);
	background: linear-gradient(90deg, #1d1546, #2e226b);
}

.tile_north
{
	transform: rotateX(90deg) translateZ(calc(var(--tile) / 2));
}

.tile_south
{
	background: linear-gradient(180deg, #2a1f64, #120c2e);
	transform: rotateX(-90deg) translateZ(calc(var(--tile) / 2));
}

.tile_east
{
	transform: rotateY(90deg) translateZ(calc(var(--tile) / 2));
}

.tile_west
{
	transform: rotateY(-90deg) translateZ(calc(var(--tile) / 2));
}

.tile_art
{
	position: relative;
	display: none;
	width: 66%;
	height: 66%;
}

.tile.is_gem .tile_gem,
.tile.is_mine .tile_mine
{
	display: block;
}

.tile_gem
{
	color: #5eead4;
	filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.9));
}

.tile_mine
{
	filter: drop-shadow(0 0 12px rgba(251, 113, 133, 0.75));
}

.tile_float
{
	position: absolute;
	inset: 6%;
	display: none;
	place-items: center;
	pointer-events: none;
	transform: translateZ(calc(var(--depth) + 30px)) rotateX(calc(var(--tilt) * -1));
	transform-origin: 50% 100%;
}

.tile_float::before
{
	content: "";
	position: absolute;
	inset: 20% 10% -10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(103, 232, 249, 0.55), transparent);
	filter: blur(6px);
}

.float_gem
{
	position: relative;
	width: 78%;
	height: 78%;
	color: #67e8f9;
	filter: drop-shadow(0 0 14px rgba(103, 232, 249, 0.95)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
	animation: gem_hover 2.4s ease-in-out 1s infinite;
}

.tile.is_gem:not(.is_missed) .tile_float
{
	display: grid;
	animation: gem_rise 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.42s both;
}

.tile.is_missed .tile_bottom
{
	opacity: 0.42;
	filter: saturate(0.55);
}

.tile.is_missed .tile_bottom::before
{
	display: none;
}

.tile.is_hit .tile_bottom
{
	box-shadow: inset 0 0 0 2px #fda4af, inset 0 0 30px rgba(253, 186, 116, 0.6), 0 0 40px rgba(244, 63, 94, 0.9);
}

.tile.is_hit .tile_block
{
	animation: tile_flip 0.5s cubic-bezier(0.3, 0.1, 0.25, 1) both, tile_jolt 0.5s var(--ease) 0.5s;
}

.shard
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 3px;
	background: linear-gradient(135deg, #fda4af, #be123c 60%, #4c0519);
	box-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
	pointer-events: none;
	backface-visibility: visible;
}

.mines_banner
{
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 6px;
	text-align: center;
	background: radial-gradient(closest-side, rgba(8, 7, 15, 0.82), rgba(8, 7, 15, 0));
	pointer-events: none;
	animation: big_in 0.5s var(--ease) both;
}

.mines_banner_label
{
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.mines_banner_value
{
	color: #6ee7b7;
	font: 800 clamp(44px, 7vw, 110px)/1 var(--font_display);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 6px 40px rgba(52, 211, 153, 0.55);
}

.mines_banner_note
{
	color: var(--text);
	font-size: 15px;
	font-weight: 700;
}

.mines_banner[data-state="loss"] .mines_banner_label,
.mines_banner[data-state="loss"] .mines_banner_value
{
	color: #fb7185;
	text-shadow: 0 6px 40px rgba(244, 63, 94, 0.6);
}

@keyframes tile_flip
{
	0%
	{
		transform: translateZ(calc(var(--depth) / 2)) rotateX(0deg);
	}

	45%
	{
		transform: translateZ(calc(var(--depth) / 2 + 70px)) rotateX(115deg);
	}

	100%
	{
		transform: translateZ(calc(var(--depth) / 2)) rotateX(180deg);
	}
}

@keyframes tile_jolt
{
	30%
	{
		translate: 0 0 -10px;
	}

	60%
	{
		translate: 0 0 8px;
	}
}

@keyframes tile_pulse
{
	50%
	{
		filter: brightness(1.5);
	}
}

@keyframes gem_rise
{
	0%
	{
		opacity: 0;
		scale: 0.2;
		translate: 0 30px 0;
	}

	100%
	{
		opacity: 1;
		scale: 1;
		translate: 0 0 0;
	}
}

@keyframes gem_hover
{
	50%
	{
		translate: 0 -8%;
		rotate: 0 1 0 25deg;
	}
}

@keyframes rays_spin
{
	to
	{
		rotate: 360deg;
	}
}

@keyframes rig_shake
{
	15%
	{
		translate: -10px 4px;
	}

	30%
	{
		translate: 9px -5px;
	}

	45%
	{
		translate: -6px 3px;
	}

	60%
	{
		translate: 5px -2px;
	}

	80%
	{
		translate: -2px 1px;
	}
}

@keyframes slab_win
{
	30%
	{
		box-shadow: inset 0 0 0 2px rgba(110, 231, 183, 0.95), inset 0 0 0 9px #16112d, inset 0 0 0 10px rgba(110, 231, 183, 0.4), inset 0 0 90px rgba(52, 211, 153, 0.45);
	}
}

@keyframes field_flash
{
	15%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0;
	}
}
@keyframes crash_pop
{
	0%
	{
		scale: 1.16;
	}

	100%
	{
		scale: 1;
	}
}

.segmented_five
{
	grid-template-columns: repeat(5, 1fr);
}

.segmented_five .segment
{
	font-variant-numeric: tabular-nums;
}

.segment:disabled
{
	opacity: 0.5;
	cursor: default;
}

.plinko_counts
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 8px;
}

.plinko_counts[hidden]
{
	display: none;
}

.plinko_counts .field_chip
{
	height: 30px;
}

.plinko_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 200px;
	overflow: hidden;
	border-radius: 30px;
}

.plinko_canvas
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.plinko_pill
{
	color: color-mix(in srgb, rgb(var(--pill)) 45%, #fff);
	background: rgba(var(--pill), 0.24);
	box-shadow: inset 0 0 0 1px rgba(var(--pill), 0.4);
}

@media (max-height: 860px) and (min-width: 1101px)
{
	.game_controls
	{
		padding: 16px 18px;
	}

	.game_controls .field
	{
		margin-bottom: 12px;
	}

	.game_controls .field_label
	{
		margin-bottom: 6px;
	}

	.play_hint
	{
		display: none;
	}

	.session_chart
	{
		margin: 8px 0 10px;
	}
}

@media (max-height: 800px) and (min-width: 1101px)
{
	.game_page .game_tagline
	{
		display: none;
	}
}

@media (max-height: 760px) and (min-width: 1101px)
{
	.mines_stage .stage_value,
	.mines_stage .game_stats
	{
		display: none;
	}
}

@media (max-height: 700px) and (min-width: 1101px)
{
	.game_side .game_session
	{
		display: none;
	}

	.stage_value strong
	{
		font-size: 36px;
	}
}

@media (max-width: 1400px)
{
	.game_page .game_tagline
	{
		display: none;
	}
}

@media (max-width: 1100px)
{
	.game_area
	{
		height: auto;
	}

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

	.game_stage
	{
		order: -1;
	}

	.table_scene
	{
		flex: none;
		height: calc(350px * var(--table_scale, 1));
		min-height: 0;
	}

	.crash_scene
	{
		flex: none;
		height: clamp(260px, 56vw, 460px);
	}

	.plinko_scene
	{
		flex: none;
		height: clamp(300px, 72vw, 560px);
	}

	.mines_field
	{
		flex: none;
		height: min(102vw, 600px);
		padding: 10px 8px 14px;
	}
}

@media (max-width: 760px)
{
	.game_page .chips
	{
		display: none;
	}
}

@media (max-width: 600px)
{
	.game_stage
	{
		padding: 18px 16px 20px;
	}

	.game_stats
	{
		gap: 8px;
	}

	.stat
	{
		padding: 8px 10px;
	}

	.stat_value
	{
		font-size: 15px;
	}

	.sum_board
	{
		gap: 3px;
	}

	.sum_odds
	{
		display: none;
	}

	.sum_value
	{
		font-size: 14px;
	}

	.stage_value strong
	{
		font-size: 36px;
	}

	.game_name
	{
		font-size: 24px;
	}
}

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

.has_intro
{
	--intro_delay: 2.3s;
}

@media (prefers-reduced-motion: no-preference)
{
	.reveal
	{
		animation: rise 1s var(--ease) both;
		animation-delay: calc(var(--intro_delay, 0s) + var(--rise_delay, 0s));
	}

	.auth_stage
	{
		animation: fade_in 1.2s var(--ease) both;
	}

	.auth_card
	{
		animation: rise 0.9s var(--ease) 0.15s both;
	}
}

@keyframes rise
{
	from
	{
		opacity: 0;
		translate: 0 14px;
	}

	to
	{
		opacity: 1;
		translate: none;
	}
}

@keyframes fade_in
{
	from
	{
		opacity: 0;
	}
}

@keyframes form_in
{
	from
	{
		opacity: 0;
		translate: 0 6px;
	}
}

@keyframes menu_in
{
	from
	{
		opacity: 0;
		translate: 0 -6px;
	}
}

@keyframes pop
{
	from
	{
		opacity: 0;
		transform: scale(0.4);
	}
}

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

	20%
	{
		translate: -7px;
	}

	40%
	{
		translate: 6px;
	}

	60%
	{
		translate: -4px;
	}

	80%
	{
		translate: 2px;
	}
}

@keyframes intro_out
{
	to
	{
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes intro_lift
{
	to
	{
		opacity: 0;
		transform: translateY(-10px) scale(1.04);
		filter: blur(3px);
	}
}

@keyframes intro_halo
{
	from
	{
		opacity: 0;
		transform: scale(0.6);
	}

	to
	{
		opacity: 1;
		transform: none;
	}
}

@keyframes intro_draw
{
	to
	{
		stroke-dashoffset: 0;
	}
}

@keyframes intro_fill
{
	from
	{
		opacity: 0;
		transform: scale(0.94);
	}

	to
	{
		opacity: 1;
		transform: none;
	}
}

@keyframes intro_word
{
	from
	{
		opacity: 0;
		letter-spacing: 0.9em;
		margin-right: -0.9em;
	}

	to
	{
		opacity: 1;
		letter-spacing: 0.44em;
		margin-right: -0.44em;
	}
}

@keyframes intro_progress
{
	to
	{
		transform: scaleX(1);
	}
}

@keyframes spin
{
	to
	{
		transform: rotate(360deg);
	}
}

@keyframes float
{
	0%,
	100%
	{
		transform: translateY(0) rotate(var(--tilt, 0deg));
	}

	50%
	{
		transform: translateY(-7px) rotate(calc(var(--tilt, 0deg) + 3deg));
	}
}

@keyframes bob
{
	0%,
	100%
	{
		transform: translateY(0);
	}

	50%
	{
		transform: translateY(-5px);
	}
}

@keyframes gleam
{
	0%
	{
		transform: skewX(-18deg) translateX(0);
	}

	40%,
	100%
	{
		transform: skewX(-18deg) translateX(420px);
	}
}

@keyframes ring
{
	0%
	{
		opacity: 0.5;
		transform: scale(0.6);
	}

	100%
	{
		opacity: 0;
		transform: scale(1.4);
	}
}

@keyframes twinkle
{
	0%,
	100%
	{
		opacity: 0.15;
		transform: scale(0.6);
	}

	50%
	{
		opacity: 0.85;
		transform: scale(1);
	}
}

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

	50%
	{
		transform: translateY(-7px) rotate(6deg);
	}
}

@keyframes live
{
	from
	{
		opacity: 0.7;
		transform: scale(1);
	}

	to
	{
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes row_in
{
	from
	{
		opacity: 0;
		translate: -6px 0;
	}
}

@keyframes feed_in
{
	0%
	{
		opacity: 0;
		translate: 0 -8px;
		background: rgba(139, 92, 246, 0.14);
	}

	40%
	{
		opacity: 1;
		translate: none;
	}

	100%
	{
		background: rgba(139, 92, 246, 0);
	}
}

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

@media (max-width: 1280px)
{
	.footer_grid
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer_about
	{
		grid-column: 1 / -1;
	}
}

@media (max-width: 1100px)
{
	.auth
	{
		grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
	}

	.auth_stage
	{
		padding: 28px 36px 40px;
	}
}

@media (max-width: 1024px)
{
	.app
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar
	{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		transform: translateX(-104%);
		transition: transform 0.4s var(--ease);
		box-shadow: 30px 0 60px rgba(0, 0, 0, 0.6);
	}

	.sidebar.is_open
	{
		transform: none;
	}

	.sidebar .sidebar_close
	{
		display: inline-grid;
	}

	.scrim
	{
		position: fixed;
		inset: 0;
		z-index: 35;
		display: block;
		background: rgba(3, 2, 10, 0.6);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}

	.scrim.is_open
	{
		opacity: 1;
		visibility: visible;
	}

	.topbar .topbar_menu
	{
		display: inline-grid;
	}

	.brand_compact
	{
		display: inline-flex;
	}

	.brand_compact .brand_mark
	{
		width: 32px;
		height: 27px;
	}
}

@media (max-width: 860px)
{
	.auth
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.auth_stage
	{
		min-height: 0;
		padding: 22px 24px 28px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.auth_emblem
	{
		min-height: 200px;
		flex: none;
		height: 200px;
	}

	.auth_perks
	{
		display: none;
	}

	.auth_title
	{
		margin-bottom: 0;
		font-size: 30px;
	}

	.auth_panel
	{
		justify-content: flex-start;
		padding: 32px 24px 80px;
	}

	.auth_back
	{
		display: none;
	}
}

@media (max-width: 820px)
{
	.profile_meta,
	.profile > .icon,
	.search kbd
	{
		display: none;
	}

	.profile
	{
		padding: 0 4px;
	}

	.hero
	{
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 24px 30px;
	}

	.hero_stage
	{
		position: relative;
		width: auto;
		height: 250px;
		margin: 0 -24px;
		order: -1;
	}

	.hero_art
	{
		height: 112%;
	}

	.hero_floor
	{
		left: -20%;
	}

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

@media (max-width: 600px)
{
	:root
	{
		--gap: 14px;
		--topbar: 60px;
	}

	.main
	{
		padding: 16px 16px 28px;
	}

	.topbar
	{
		gap: 8px;
		padding: 0 16px;
	}

	.search_wrap
	{
		flex: 0 0 40px;
	}

	.search_wrap:focus-within
	{
		flex: 1 1 auto;
	}

	.search
	{
		gap: 0;
		padding: 0;
		justify-content: center;
	}

	.search input
	{
		flex: 0 0 0;
		width: 0;
		opacity: 0;
	}

	.search:focus-within
	{
		gap: 10px;
		padding: 0 10px 0 12px;
		justify-content: flex-start;
	}

	.search:focus-within input
	{
		flex: 1;
		width: auto;
		opacity: 1;
	}

	.topbar_actions,
	.member_tools,
	.guest_tools
	{
		gap: 6px;
	}

	.member_tools > .icon_button,
	.guest_tools .button_ghost
	{
		display: none;
	}

	.wallet_pill
	{
		padding-left: 10px;
	}

	.hero_title
	{
		font-size: 38px;
	}

	.hero_text
	{
		font-size: 15px;
	}

	.footer
	{
		padding: 28px 16px 24px;
	}

	.footer_grid
	{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
	}

	.footer_bottom
	{
		flex-wrap: wrap;
	}

	.footer_copy
	{
		margin-left: 0;
	}

	.auth_row
	{
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce)
{
	html
	{
		scroll-behavior: auto;
	}

	.intro
	{
		display: none;
	}

	*,
	*::before,
	*::after
	{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

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

.chat_toggle.is_active
{
	color: #fff;
	background: rgba(139, 92, 246, 0.18);
	border-color: rgba(139, 92, 246, 0.42);
}

.chat_drawer
{
	--chat_width: 360px;
	position: fixed;
	top: var(--topbar);
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	flex-direction: column;
	width: min(var(--chat_width), 100vw);
	background: linear-gradient(180deg, #110f20, #0b0a17);
	border-left: 1px solid var(--line_accent);
	box-shadow: -26px 0 50px -22px rgba(0, 0, 0, 0.9);
	transform: translateX(104%);
	visibility: hidden;
	transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
}

.chat_drawer.is_open
{
	transform: none;
	visibility: visible;
	transition: transform 0.32s var(--ease), visibility 0s;
}

.chat_head
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 8px 10px 8px 12px;
	border-bottom: 1px solid var(--line);
}

.chat_tabs
{
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line);
}

.chat_tab
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	border-radius: 7px;
	color: var(--text_mute);
	font-size: 12.5px;
	font-weight: 600;
	transition: background 0.2s, color 0.2s;
}

.chat_tab:hover
{
	color: var(--text);
}

.chat_tab .icon
{
	width: 16px;
	height: 16px;
}

.chat_tab[aria-selected="true"]
{
	color: #fff;
	background: rgba(139, 92, 246, 0.3);
}

.chat_tab_count
{
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	color: #fff;
	font: 700 10px/16px var(--font_body);
	text-align: center;
	background: var(--violet);
}

.chat_online
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	color: var(--text_dim);
	font-size: 12px;
	white-space: nowrap;
}

.chat_online_dot
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

.chat_close
{
	width: 32px;
	height: 32px;
}

.chat_close .icon
{
	width: 17px;
	height: 17px;
}

.chat_pane,
.friends_pane
{
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.chat_scroll,
.friends_scroll
{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 139, 250, 0.25) transparent;
}

.chat_scroll
{
	padding: 10px 8px 8px;
}

.friends_scroll
{
	padding: 6px 8px 12px;
}

.chat_list,
.friends_list
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chat_msg
{
	display: flex;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 12px;
	transition: background 0.2s;
}

.chat_msg:hover
{
	background: rgba(255, 255, 255, 0.025);
}

.chat_msg.is_mine
{
	background: rgba(139, 92, 246, 0.1);
	box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.6);
}

.chat_msg .avatar
{
	width: 30px;
	height: 30px;
	margin-top: 1px;
}

.chat_body
{
	flex: 1;
	min-width: 0;
}

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

.chat_name
{
	overflow: hidden;
	color: #ddd6fe;
	font-size: 12.5px;
	font-weight: 650;
	white-space: nowrap;
	text-overflow: ellipsis;
}

button.chat_name:hover
{
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

span.chat_name
{
	color: var(--text_mute);
	font-style: italic;
}

.chat_msg.is_mine .chat_name
{
	color: var(--gold);
}

.chat_level
{
	flex: none;
	padding: 0 5px;
	border-radius: 5px;
	color: #fde68a;
	font: 700 10px/16px var(--font_body);
	background: rgba(245, 196, 81, 0.1);
	border: 1px solid rgba(245, 196, 81, 0.28);
}

.chat_time
{
	flex: none;
	margin-left: auto;
	color: var(--text_mute);
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
}

.chat_text
{
	max-height: 13em;
	margin-top: 1px;
	overflow: hidden;
	color: var(--text);
	font-size: 13px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.chat_msg.is_system
{
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: linear-gradient(90deg, rgba(245, 196, 81, 0.09), rgba(245, 196, 81, 0.02));
	box-shadow: inset 2px 0 0 rgba(245, 196, 81, 0.45);
}

.chat_system_icon
{
	display: grid;
	place-items: center;
	flex: none;
}

.chat_system_icon .coin
{
	width: 18px;
	height: 18px;
}

.chat_system_text
{
	color: #fde68a;
	font-size: 12.5px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.chat_empty
{
	padding: 22px 14px;
	color: var(--text_mute);
	font-size: 12.5px;
	text-align: center;
}

.chat_jump
{
	position: absolute;
	left: 50%;
	bottom: 78px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	background: var(--violet);
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.9);
	transform: translateX(-50%);
}

.chat_jump .icon
{
	width: 15px;
	height: 15px;
}

.chat_form,
.friend_form
{
	padding: 10px 12px 12px;
	border-top: 1px solid var(--line);
}

.friend_form
{
	border-top: 0;
	border-bottom: 1px solid var(--line);
}

.chat_field
{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 5px 0 12px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.chat_field:focus-within
{
	border-color: rgba(139, 92, 246, 0.55);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.chat_input
{
	flex: 1;
	min-width: 0;
	height: 100%;
	color: var(--text);
	font: 13.5px var(--font_body);
	background: none;
	border: 0;
	outline: 0;
}

.chat_input::placeholder
{
	color: var(--text_mute);
}

.chat_counter
{
	color: var(--text_mute);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.chat_counter.is_over
{
	color: var(--red);
}

.chat_send
{
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 9px;
	color: #fff;
	background: linear-gradient(180deg, #8f62f7, #7340ea);
	transition: opacity 0.2s;
}

.chat_send .icon
{
	width: 17px;
	height: 17px;
}

.chat_send:disabled
{
	opacity: 0.4;
	cursor: default;
}

.chat_error
{
	margin-top: 6px;
	color: #fda4af;
	font-size: 12px;
}

.chat_gate
{
	padding: 14px 16px 16px;
	color: var(--text_dim);
	font-size: 13px;
	border-top: 1px solid var(--line);
}

.friends_pane .chat_gate
{
	border-top: 0;
}

.friends_title
{
	padding: 8px 6px 6px;
	color: var(--text_mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.friend_row
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 12px;
	transition: background 0.2s;
}

.friend_row:hover
{
	background: rgba(255, 255, 255, 0.03);
}

.friend_face
{
	position: relative;
	flex: none;
}

.friend_face .avatar
{
	width: 34px;
	height: 34px;
}

.friend_dot
{
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #3f3a5a;
	box-shadow: 0 0 0 2px #110f20;
}

.friend_row.is_online .friend_dot
{
	background: var(--green);
}

.friend_meta
{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

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

.friend_name
{
	overflow: hidden;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
	text-overflow: ellipsis;
}

a.friend_name:hover
{
	color: var(--violet_soft);
}

.friend_tag
{
	flex: none;
	padding: 0 6px;
	border-radius: 5px;
	color: var(--text_mute);
	font: 600 10px/16px var(--font_body);
	background: rgba(255, 255, 255, 0.05);
}

.friend_tag.is_friend
{
	color: #a7f3d0;
	background: rgba(52, 211, 153, 0.12);
}

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

.friend_row.is_online .friend_sub
{
	color: #86efac;
}

.friend_actions
{
	display: flex;
	flex: none;
	gap: 4px;
}

.friend_icon
{
	width: 30px;
	height: 30px;
	border-radius: 8px;
}

.friend_icon .icon
{
	width: 15px;
	height: 15px;
}

.friend_back
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	background: rgba(139, 92, 246, 0.3);
	border: 1px solid rgba(139, 92, 246, 0.5);
}

.friend_back .icon
{
	width: 15px;
	height: 15px;
}

.chat_menu
{
	position: absolute;
	top: var(--menu_top, 60px);
	left: var(--menu_left, 12px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-width: 210px;
	padding: 6px;
	border-radius: 12px;
	background: var(--surface_raise);
	border: 1px solid var(--line_accent);
	box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
	animation: menu_in 0.22s var(--ease) both;
}

.chat_menu_head
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	padding: 6px 8px 9px;
	border-bottom: 1px solid var(--line);
}

.chat_menu_name
{
	overflow: hidden;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chat_menu .menu_item:disabled
{
	opacity: 0.5;
	cursor: default;
}

.tip_dialog
{
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	overflow: visible;
	color: var(--text);
	background: transparent;
	border: 0;
}

.tip_dialog::backdrop
{
	background: rgba(3, 2, 10, 0.66);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.tip_card
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: var(--radius_l);
	background: linear-gradient(180deg, #1b1634, #120f22);
	border: 1px solid rgba(245, 196, 81, 0.32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 70px -20px rgba(0, 0, 0, 0.9);
}

.tip_head
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.tip_avatar
{
	width: 44px;
	height: 44px;
	font-size: 14px;
}

.tip_who
{
	flex: 1;
	min-width: 0;
}

.tip_title
{
	overflow: hidden;
	font: 650 18px/1.2 var(--font_display);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tip_sub
{
	margin-top: 2px;
	color: var(--text_dim);
	font-size: 12.5px;
}

.tip_close
{
	align-self: flex-start;
	width: 34px;
	height: 34px;
}

.tip_field
{
	margin: 0;
}

.tip_amount
{
	flex: 1;
	min-width: 0;
	height: 100%;
	color: var(--text);
	font: 600 17px var(--font_body);
	font-variant-numeric: tabular-nums;
	background: none;
	border: 0;
	outline: 0;
}

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

.tip_preset
{
	justify-content: center;
	padding: 0 8px;
}

.tip_info
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--line);
}

.tip_line
{
	color: var(--text_dim);
	font-size: 12.5px;
}

.tip_line.is_warn
{
	color: #fcd34d;
}

.tip_error
{
	color: #fda4af;
	font-size: 12.5px;
}

.tip_foot
{
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.tip_dialog.is_done .tip_field,
.tip_dialog.is_done .tip_presets,
.tip_dialog.is_done .tip_info,
.tip_dialog.is_done .tip_error,
.tip_dialog.is_done .tip_foot
{
	display: none;
}

.tip_dialog.is_done .tip_card
{
	border-color: rgba(52, 211, 153, 0.45);
}

@media (max-width: 600px)
{
	.chat_drawer
	{
		--chat_width: 100vw;
		border-left: 0;
	}
}

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

.badge
{
	--tier_hi: #f0b98a;
	--tier_lo: #9a5a2c;
	--badge_size: 44px;
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--badge_size);
	height: var(--badge_size);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.34), transparent 44%), linear-gradient(160deg, var(--tier_hi), var(--tier_lo));
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 8px 16px -10px rgba(0, 0, 0, 0.95);
}

.badge.tier_silver
{
	--tier_hi: #eef1f7;
	--tier_lo: #7d8396;
}

.badge.tier_gold
{
	--tier_hi: #ffe08a;
	--tier_lo: #b9780f;
}

.badge_rim
{
	position: absolute;
	inset: 15%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #2a1f4d, #1d1438 62%, #150e2b);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(245, 196, 81, 0.28);
}

.badge_icon
{
	position: relative;
	width: 44%;
	height: 44%;
	fill: none;
	stroke: var(--tier_hi);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.badge_lock
{
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 42%;
	height: 42%;
	padding: 3px;
	border-radius: 50%;
	background: var(--surface_high);
	border: 1px solid var(--line_strong);
	fill: none;
	stroke: var(--text_dim);
	stroke-width: 2;
}

.badge.is_locked
{
	background: linear-gradient(160deg, #3a3556, #1f1b33);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.badge.is_locked .badge_icon
{
	stroke: #6f6990;
}

.badge.is_locked .badge_rim
{
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
}

.badge_small
{
	--badge_size: 30px;
}

.badge_medium
{
	--badge_size: 46px;
}

.badge_large
{
	--badge_size: 64px;
}

.badge_toast
{
	--badge_size: 46px;
}

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

.engage_toasts
{
	position: fixed;
	top: calc(var(--topbar) + 14px);
	right: 18px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	width: min(360px, calc(100vw - 24px));
	pointer-events: none;
}

.engage_toast
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 14px 11px 11px;
	border-radius: var(--radius_m);
	background: linear-gradient(180deg, #1f1840, #141029);
	border: 1px solid rgba(245, 196, 81, 0.32);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--text);
	text-decoration: none;
	pointer-events: auto;
	animation: toast_in 0.42s var(--ease) both;
}

.engage_toast.is_leaving
{
	animation: toast_out 0.36s var(--ease_soft) both;
}

.engage_toast .badge
{
	animation: toast_badge 0.7s var(--ease) 0.1s both;
}

.toast_body
{
	display: grid;
	min-width: 0;
	gap: 1px;
}

.toast_kicker
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--gold);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.toast_title
{
	overflow: hidden;
	font-family: var(--font_display);
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.toast_text
{
	overflow: hidden;
	color: var(--text_dim);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.toast_reward
{
	color: var(--gold);
	font-size: 14px;
	font-weight: 700;
}

@keyframes toast_in
{
	from
	{
		opacity: 0;
		transform: translateX(26px) scale(0.96);
	}

	to
	{
		opacity: 1;
		transform: none;
	}
}

@keyframes toast_out
{
	to
	{
		opacity: 0;
		transform: translateX(30px);
	}
}

@keyframes toast_badge
{
	0%
	{
		transform: scale(0.4) rotate(-40deg);
	}

	60%
	{
		transform: scale(1.14) rotate(8deg);
	}

	100%
	{
		transform: none;
	}
}

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

.featured_pill
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px 3px 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd978, #e0a52a);
	color: #2a1a00;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.9);
}

.featured_pill .icon
{
	width: 13px;
	height: 13px;
	stroke-width: 2.4;
}

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

.race_banner
{
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 16px;
	background: radial-gradient(120% 140% at 0% 0%, rgba(245, 196, 81, 0.1), transparent 46%), linear-gradient(180deg, #171230, #110e22);
	border-color: rgba(245, 196, 81, 0.22);
}

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

.race_mark
{
	width: 34px;
	height: 34px;
	padding: 7px;
	flex: none;
	border-radius: 10px;
	background: linear-gradient(160deg, #ffe08a, #b9780f);
	fill: none;
	stroke: #2a1a00;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.race_title
{
	display: grid;
	min-width: 0;
}

.race_kicker,
.race_label
{
	color: var(--text_mute);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.race_kicker
{
	color: var(--gold);
}

.race_name
{
	overflow: hidden;
	font-family: var(--font_display);
	font-size: 14.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.race_pool,
.race_side,
.race_me
{
	display: grid;
	gap: 1px;
}

.race_pool .money
{
	color: var(--gold);
	font-family: var(--font_display);
	font-size: 16px;
	font-weight: 700;
}

.race_chips
{
	display: flex;
	flex: 1 1 0;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.race_chip
{
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 4px 10px 4px 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--line);
}

.race_chip.is_me
{
	border-color: rgba(245, 196, 81, 0.4);
}

.race_chip .avatar
{
	width: 24px;
	height: 24px;
	font-size: 10px;
}

.race_chip_rank
{
	color: var(--text_mute);
	font-size: 11px;
	font-weight: 800;
}

.race_chip_rank.rank_1
{
	color: #f5c451;
}

.race_chip_rank.rank_2
{
	color: #d4d8e2;
}

.race_chip_rank.rank_3
{
	color: #e7a771;
}

.race_chip_who
{
	display: grid;
	min-width: 0;
	line-height: 1.15;
}

.race_chip_name
{
	overflow: hidden;
	max-width: 110px;
	color: var(--text);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.race_chip_name:hover
{
	color: var(--violet_soft);
}

.race_chip_value
{
	color: var(--text_dim);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.race_empty
{
	color: var(--text_dim);
	font-size: 12.5px;
}

.race_me_rank,
.race_clock
{
	font-family: var(--font_display);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.race_me_rank
{
	color: var(--gold);
}

.race_me_value
{
	color: var(--text_dim);
	font-size: 11px;
	white-space: nowrap;
}

.race_link
{
	white-space: nowrap;
}

.race_banner.is_compact
{
	gap: 14px;
}

.race_head,
.race_pool,
.race_me,
.race_side,
.race_link
{
	flex: none;
}

.race_banner.is_compact .race_link
{
	display: none;
}

@media (max-width: 1360px)
{
	.race_banner .race_chip:nth-child(3)
	{
		display: none;
	}
}

@media (max-width: 1180px)
{
	.race_banner .race_pool
	{
		display: none;
	}
}

@media (max-width: 760px)
{
	.race_banner .race_head
	{
		flex: 1 1 auto;
		min-width: 0;
	}

	.race_banner .race_chips,
	.race_banner .race_me
	{
		display: none;
	}
}

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

.event_pill
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 11px 0 8px;
	border-radius: 999px;
	background: linear-gradient(180deg, #2a1a12, #1a110d);
	border: 1px solid rgba(251, 146, 60, 0.38);
	color: #fdba74;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.event_pill .icon
{
	width: 18px;
	height: 18px;
	stroke: #fb923c;
}

.event_pill.event_winter
{
	background: linear-gradient(180deg, #12202c, #0d151d);
	border-color: rgba(103, 232, 249, 0.38);
	color: #a5f3fc;
}

.event_pill.event_winter .icon
{
	stroke: #67e8f9;
}

html[data-event="halloween"] .topbar
{
	border-bottom-color: rgba(251, 146, 60, 0.28);
	background-image: linear-gradient(90deg, rgba(251, 146, 60, 0.08), transparent 32%, transparent 68%, rgba(139, 92, 246, 0.08));
}

html[data-event="halloween"] .brand_mark
{
	color: #fb923c;
}

html[data-event="halloween"] .nav_item_active
{
	box-shadow: inset 2px 0 0 #fb923c;
}

html[data-event="winter"] .topbar
{
	border-bottom-color: rgba(103, 232, 249, 0.26);
}

@media (max-width: 1280px)
{
	.event_pill .event_name
	{
		display: none;
	}

	.event_pill
	{
		padding: 0 7px;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.engage_toast,
	.engage_toast.is_leaving,
	.engage_toast .badge
	{
		animation: none;
	}
}

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

.music_wrap
{
	position: relative;
}

.music_toggle[aria-pressed="true"]
{
	color: var(--violet_soft);
}

.music_toggle.is_muted
{
	color: var(--text_mute);
}

.music_menu
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 232px;
	padding: 12px 14px 13px;
	border-radius: 12px;
	background: var(--surface_raise);
	border: 1px solid var(--line_accent);
	box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}

.music_menu::before
{
	content: "";
	position: absolute;
	top: -9px;
	right: 0;
	left: 0;
	height: 9px;
}

.music_wrap:hover .music_menu,
.music_wrap:focus-within .music_menu
{
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s;
}

.music_head
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.music_title
{
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
}

.music_value
{
	color: var(--text_dim);
	font: 600 12px/1 var(--font_game);
	letter-spacing: 0.04em;
}

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

.music_range
{
	--fill: 35%;
	width: 100%;
	height: 18px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.music_range::-webkit-slider-runnable-track
{
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--violet) var(--fill), rgba(255, 255, 255, 0.1) var(--fill));
}

.music_range::-moz-range-track
{
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--violet) var(--fill), rgba(255, 255, 255, 0.1) var(--fill));
}

.music_range::-webkit-slider-thumb
{
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--violet);
	appearance: none;
}

.music_range::-moz-range-thumb
{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--violet);
}

.music_toggle.is_muted + .music_menu .music_range
{
	opacity: 0.55;
}

.music_range:focus-visible
{
	outline: 2px solid var(--violet_soft);
	outline-offset: 2px;
	border-radius: 4px;
}

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