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

.cf_sides .cf_side
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cf_side_coin
{
	width: 20px;
	height: 20px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.cf_side[aria-checked="false"] .cf_side_coin
{
	opacity: 0.6;
	filter: saturate(0.6);
}

.cf_switch
{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 2px;
	color: var(--text_mute);
	font-size: 13px;
	text-align: left;
	transition: color 0.2s;
}

.cf_switch:hover
{
	color: var(--text_dim);
}

.cf_switch_track
{
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px var(--line_strong);
	transition: background 0.2s, box-shadow 0.2s;
}

.cf_switch_knob
{
	position: absolute;
	left: 3px;
	top: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #b9b2d6;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: translate 0.2s var(--ease), background 0.2s;
}

.cf_switch[aria-checked="true"]
{
	color: var(--text);
}

.cf_switch[aria-checked="true"] .cf_switch_track
{
	background: rgba(139, 92, 246, 0.55);
	box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.6);
}

.cf_switch[aria-checked="true"] .cf_switch_knob
{
	translate: 14px 0;
	background: #fff;
}

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

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

.cf_counts[hidden]
{
	display: none;
}

.cf_counts .field_chip
{
	height: 30px;
}

.coinflip_page .field_box input:read-only
{
	color: var(--text_dim);
}

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

#cf_profit .money
{
	color: #6ee7b7;
	font-weight: 600;
}

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

.cf_stage
{
	gap: 10px;
}

.cf_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 180px;
}

.cf_rig
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 960px;
	height: 600px;
	transform: translate(-50%, -50%) scale(var(--cf_scale, 1));
}

.cf_felt
{
	position: absolute;
	inset: 30px;
	border-radius: 34px;
	background: radial-gradient(ellipse 46% 52% at 50% 56%, rgba(255, 255, 255, 0.07), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 45%, #34248c 0%, #22185f 52%, #140d38 100%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.34), inset 0 0 70px rgba(0, 0, 0, 0.55), 0 0 0 15px #1d1438, 0 0 0 16px rgba(245, 196, 81, 0.3), 0 0 0 29px #0f0a22, 0 40px 70px rgba(0, 0, 0, 0.6);
}

.cf_felt::after
{
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 26px;
	border: 1px solid rgba(245, 196, 81, 0.15);
}

.cf_crest
{
	position: absolute;
	left: 400px;
	top: 92px;
	width: 160px;
	height: 134px;
	opacity: 0.1;
}

.cf_title
{
	position: absolute;
	left: 0;
	right: 0;
	top: 50px;
	color: rgba(245, 196, 81, 0.62);
	font: 700 21px/1 var(--font_game);
	letter-spacing: 0.5em;
	text-align: center;
	text-indent: 0.5em;
	white-space: nowrap;
}

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

.cf_marker
{
	position: absolute;
	top: 96px;
	z-index: 1;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	align-items: center;
	column-gap: 14px;
	width: 216px;
	height: 134px;
	padding: 16px 18px 15px;
	border-radius: 20px;
	color: #ede9fe;
	text-align: left;
	background: linear-gradient(180deg, rgba(8, 5, 22, 0.66), rgba(20, 12, 50, 0.52));
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.34), inset 0 3px 16px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
	transition: background 0.3s, box-shadow 0.3s, color 0.3s;
	-webkit-tap-highlight-color: transparent;
}

#cf_marker_heads
{
	left: 64px;
}

#cf_marker_tails
{
	left: 680px;
}

.cf_marker:focus-visible
{
	outline: none;
	box-shadow: inset 0 0 0 2px #fff, inset 0 3px 16px rgba(0, 0, 0, 0.6);
}

.cf_marker:disabled
{
	cursor: default;
}

.cf_marker:not(:disabled):not(.is_picked):hover
{
	background: linear-gradient(180deg, rgba(30, 20, 72, 0.7), rgba(36, 24, 84, 0.58));
}

.cf_marker_coin
{
	width: 76px;
	height: 76px;
	filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s var(--ease);
}

.cf_marker_text
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

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

.cf_marker_share
{
	color: #fff;
	font: 800 31px/1 var(--font_display);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

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

.cf_marker_bar
{
	grid-column: 1 / -1;
	height: 6px;
	margin-top: 12px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cf_marker_fill
{
	display: block;
	width: var(--share, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #b8680a, #f5c451);
	transition: width 0.6s var(--ease);
}

.cf_marker_tag
{
	position: absolute;
	left: 50%;
	top: -11px;
	padding: 5px 12px 4px;
	border-radius: 999px;
	color: #3b2208;
	font: 800 10.5px/1 var(--font_game);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	background: linear-gradient(180deg, #fff3c4, #f5c451 55%, #c98a1c);
	box-shadow: inset 0 -1px 0 rgba(120, 60, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.45);
	opacity: 0;
	translate: -50% 4px;
	transition: opacity 0.25s, translate 0.25s var(--ease);
}

.cf_marker.is_picked
{
	color: #2a1604;
	background: linear-gradient(165deg, #fff0b8 0%, #f5c451 40%, #d6951f 82%, #b8740f 100%);
	box-shadow: inset 0 0 0 2px #fff3c4, inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -4px 0 rgba(120, 60, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.5);
}

.cf_marker.is_picked .cf_marker_name
{
	color: #6b3a06;
}

.cf_marker.is_picked .cf_marker_share
{
	color: #2a1604;
}

.cf_marker.is_picked .cf_marker_count
{
	color: #7a4f17;
}

.cf_marker.is_picked .cf_marker_bar
{
	background: rgba(90, 50, 0, 0.2);
	box-shadow: inset 0 1px 2px rgba(90, 50, 0, 0.35);
}

.cf_marker.is_picked .cf_marker_fill
{
	background: linear-gradient(90deg, #6b3a06, #a85f0c);
}

.cf_marker.is_picked .cf_marker_tag
{
	opacity: 1;
	translate: -50% 0;
}

.cf_marker.is_landed .cf_marker_coin
{
	animation: cf_marker_pop 0.55s var(--ease);
}

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

.cf_track
{
	position: absolute;
	left: 64px;
	top: 384px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 262px;
}

.cf_track_head
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 0 4px;
}

.cf_track_title
{
	color: rgba(245, 196, 81, 0.7);
	font: 700 13px/1 var(--font_game);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.cf_track_run
{
	color: #fff;
	font: 800 17px/1 var(--font_game);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cf_tray
{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 5px;
	padding: 10px 11px;
	border-radius: 16px;
	background: linear-gradient(180deg, #7a3d18 0%, #5a2a0f 45%, #3d1b08 100%);
	box-shadow: inset 0 2px 0 rgba(255, 220, 170, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 0 0 0 1.5px rgba(245, 196, 81, 0.42), 0 10px 18px rgba(0, 0, 0, 0.5);
}

.cf_slot
{
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #170802, #2c1306 72%);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 220, 170, 0.14);
}

.cf_slot svg
{
	position: absolute;
	inset: 1.5px;
	width: calc(100% - 3px);
	height: calc(100% - 3px);
	filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.55));
}

.cf_slot.is_run
{
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 0 0 2px #f5c451;
}

.cf_track_note
{
	padding: 0 4px;
	color: rgba(237, 233, 254, 0.55);
	font-size: 12.5px;
}

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

.cf_podium
{
	position: absolute;
	left: 320px;
	top: 406px;
	z-index: 1;
	width: 320px;
	height: 132px;
	overflow: visible;
}

.cf_shadow
{
	position: absolute;
	left: 400px;
	top: 421px;
	z-index: 1;
	width: 160px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(3, 1, 10, 0.78), rgba(3, 1, 10, 0.4) 55%, rgba(3, 1, 10, 0));
	transform-origin: 50% 50%;
}

.cf_coin_zone
{
	position: absolute;
	inset: 0;
	z-index: 3;
	perspective: 1200px;
	perspective-origin: 480px 330px;
	pointer-events: none;
}

.cf_coin
{
	position: absolute;
	left: 395px;
	top: 264px;
	width: 170px;
	height: 170px;
	transform-style: preserve-3d;
}

.cf_coin_tilt,
.cf_coin_spin
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.cf_coin_tilt
{
	transform: rotateY(-22deg) rotateX(6deg);
}

.cf_face
{
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	backface-visibility: hidden;
}

.cf_face svg
{
	display: block;
	width: 100%;
	height: 100%;
}

.cf_face_shade
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(26, 12, 2, 0.6), rgba(26, 12, 2, 0.95));
	opacity: var(--cf_shade, 0);
}

.cf_face_glint
{
	position: absolute;
	left: -30%;
	right: -30%;
	top: -30%;
	height: 160%;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0) 64%);
	translate: 0 var(--cf_glint, -40%);
}

.cf_layer
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(#f0bd55 0deg 2.4deg, #9a5b10 2.4deg 4.8deg);
	box-shadow: inset 0 0 0 1px rgba(90, 45, 4, 0.6);
}

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

.cf_raccoon_box
{
	position: absolute;
	left: 544px;
	top: 222px;
	z-index: 2;
	width: 242px;
	height: 308px;
}

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

.cf_raccoon .rc_tail
{
	transform-origin: 140px 236px;
}

.cf_raccoon .rc_body
{
	transform-origin: 111px 258px;
}

.cf_raccoon .rc_head
{
	transform-origin: 111px 150px;
	rotate: var(--rc_tilt, 0deg);
	transition: rotate 0.12s ease-out;
}

.cf_raccoon .rc_ties
{
	transform-origin: 154px 96px;
}

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

.cf_raccoon .rc_pupils
{
	translate: var(--rc_look_x, 0px) var(--rc_look_y, 0px);
	transition: translate 0.14s ease-out;
}

.cf_raccoon .rc_brows
{
	transition: translate 0.25s var(--ease);
}

.cf_raccoon .rc_arm_near
{
	transform-origin: 72px 162px;
}

.cf_raccoon .rc_fore
{
	transform-origin: 66px 204px;
}

.cf_raccoon .rc_thumb
{
	transform-origin: 100px 201px;
}

.cf_raccoon .rc_arm_up
{
	transform-origin: 74px 164px;
}

.cf_raccoon .rc_arm_far
{
	transform-origin: 146px 162px;
}

.cf_raccoon .rc_happy,
.cf_raccoon .rc_grin,
.cf_raccoon .rc_whistle,
.cf_raccoon .rc_arm_up,
.cf_raccoon .rc_note
{
	opacity: 0;
}

.cf_raccoon .rc_eyes,
.cf_raccoon .rc_smirk,
.cf_raccoon .rc_arm_near
{
	transition: opacity 0.15s;
}

.cf_raccoon.is_cheer .rc_eyes,
.cf_raccoon.is_cheer .rc_smirk,
.cf_raccoon.is_cheer .rc_arm_near,
.cf_raccoon.is_smug .rc_smirk
{
	opacity: 0;
}

.cf_raccoon.is_cheer .rc_happy,
.cf_raccoon.is_cheer .rc_grin,
.cf_raccoon.is_cheer .rc_arm_up,
.cf_raccoon.is_smug .rc_whistle
{
	opacity: 1;
}

.cf_raccoon.is_smug .rc_brows
{
	translate: 0 -3px;
}

.cf_raccoon.is_busy .rc_knuckle
{
	opacity: 0;
}

.cf_raccoon .rc_note_a
{
	--note_x: 22px;
	--note_y: -16px;
	--note_turn: 14deg;
}

.cf_raccoon .rc_note_b
{
	--note_x: 28px;
	--note_y: -28px;
	--note_turn: -10deg;
}

.cf_fx
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	width: 960px;
	height: 600px;
	pointer-events: none;
}

.cf_stage .stage_status
{
	flex: 1 1 auto;
	min-width: 0;
}

.cf_stage .stage_label
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cf_stage .recent_list
{
	flex: 0 1 auto;
	min-width: 0;
}

.cf_pill
{
	flex: none;
	min-width: 0;
	width: 32px;
	padding: 0;
}

.cf_pill svg
{
	width: 18px;
	height: 18px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.cf_pill.is_win
{
	box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.45);
}

.cf_cell
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.cf_cell svg
{
	width: 18px;
	height: 18px;
}

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

@media (prefers-reduced-motion: no-preference)
{
	.cf_raccoon .rc_body
	{
		animation: rc_breathe 3.2s ease-in-out infinite;
	}

	.cf_raccoon .rc_lid
	{
		animation: rc_blink 4.6s infinite;
	}

	.cf_raccoon .rc_head
	{
		animation: rc_tilt 7.4s ease-in-out infinite;
	}

	.cf_raccoon .rc_tail
	{
		animation: rc_swish 2.8s ease-in-out infinite;
	}

	.cf_raccoon .rc_ties
	{
		animation: rc_flutter 1.6s ease-in-out infinite;
	}

	.cf_raccoon .rc_knuckle
	{
		animation: rc_roll 2.4s ease-in-out infinite;
	}

	.cf_raccoon.is_cheer
	{
		animation: rc_hop 0.5s ease-in-out 3;
	}

	.cf_raccoon.is_cheer .rc_arm_up
	{
		animation: rc_pump 0.5s ease-in-out 4;
	}

	.cf_raccoon.is_cheer .rc_tail
	{
		animation: rc_wag 0.36s ease-in-out infinite alternate;
	}

	.cf_raccoon.is_smug .rc_note
	{
		animation: rc_note 1.3s ease-out infinite;
	}

	.cf_raccoon.is_smug .rc_note_b
	{
		animation-delay: 0.6s;
	}

	.cf_raccoon.is_smug .rc_head
	{
		animation: rc_sway 1.3s ease-in-out infinite;
	}
}

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

	50%
	{
		transform: scale(1.016, 1.028);
	}
}

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

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

@keyframes rc_tilt
{
	0%,
	34%,
	62%,
	100%
	{
		transform: rotate(0deg);
	}

	42%,
	54%
	{
		transform: rotate(-6deg);
	}

	74%,
	86%
	{
		transform: rotate(4deg);
	}
}

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

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

@keyframes rc_wag
{
	from
	{
		transform: rotate(-8deg);
	}

	to
	{
		transform: rotate(12deg);
	}
}

@keyframes rc_flutter
{
	0%,
	100%
	{
		transform: rotate(0deg) skewY(0deg);
	}

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

@keyframes rc_roll
{
	0%,
	100%
	{
		transform: translate(-9px, 2px) rotate(-30deg) scaleX(1);
	}

	14%
	{
		transform: translate(-6px, -3px) rotate(-10deg) scaleX(0.2);
	}

	28%
	{
		transform: translate(-2px, 0px) rotate(0deg) scaleX(1);
	}

	42%
	{
		transform: translate(2px, -3px) rotate(10deg) scaleX(0.2);
	}

	56%
	{
		transform: translate(6px, 0px) rotate(20deg) scaleX(1);
	}

	70%
	{
		transform: translate(9px, -3px) rotate(30deg) scaleX(0.2);
	}

	80%
	{
		transform: translate(9px, 1px) rotate(30deg) scaleX(1);
	}
}

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

	45%
	{
		transform: translateY(-12px);
	}
}

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

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

@keyframes rc_note
{
	0%
	{
		opacity: 0;
		transform: translate(0, 0) rotate(0deg) scale(0.6);
	}

	20%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0;
		transform: translate(var(--note_x), var(--note_y)) rotate(var(--note_turn)) scale(1.1);
	}
}

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

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

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

	35%
	{
		transform: scale(1.14) rotate(-6deg);
	}

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

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

@media (max-height: 760px) and (min-width: 1101px)
{
	.coinflip_page .game_controls .field
	{
		margin-bottom: 10px;
	}

	.coinflip_page .game_controls .segment
	{
		height: 34px;
	}

	.coinflip_page .game_controls .field_box
	{
		height: 44px;
	}

	.coinflip_page .session_chart
	{
		margin: 6px 0 8px;
	}

	.cf_switch
	{
		margin-top: 8px;
	}
}

@media (max-width: 1100px)
{
	.cf_scene
	{
		flex: none;
		height: calc((100vw - 48px) * 0.625);
		max-height: 600px;
	}
}

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