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

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

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

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

.bj_actions
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.bj_action
{
	--tone: #a78bfa;
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 10px 0 12px;
	border-radius: 12px;
	color: var(--text);
	font: 600 14px/1 var(--font_body);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), var(--surface_raise);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 0 rgba(0, 0, 0, 0.42);
	transition: transform 0.12s var(--ease), box-shadow 0.12s, border-color 0.2s, background 0.2s, opacity 0.2s;
}

.bj_action .icon
{
	width: 21px;
	height: 21px;
	color: var(--tone);
	stroke-width: 2;
}

.bj_action kbd
{
	margin-left: auto;
	color: var(--text_mute);
}

.bj_action_hit
{
	--tone: #34d399;
}

.bj_action_stand
{
	--tone: #fb7185;
}

.bj_action_double
{
	--tone: #f5c451;
}

.bj_action_split
{
	--tone: #a78bfa;
}

.bj_action:not(:disabled):hover
{
	background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 16%, transparent), rgba(255, 255, 255, 0.02)), var(--surface_raise);
	border-color: color-mix(in srgb, var(--tone) 55%, transparent);
}

.bj_action:not(:disabled):active,
.bj_action.is_pressed
{
	transform: translateY(2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.42);
}

.bj_action:disabled
{
	opacity: 0.36;
	cursor: default;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bj_action:focus-visible
{
	outline: 2px solid color-mix(in srgb, var(--tone) 80%, #fff);
	outline-offset: 2px;
}

.bj_rules
{
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
	border-radius: 12px;
	color: var(--text_mute);
	font-size: 12.5px;
	line-height: 1.35;
	background: var(--surface);
	border: 1px solid var(--line);
}

.bj_rules li
{
	position: relative;
	padding-left: 14px;
}

.bj_rules li::before
{
	content: "";
	position: absolute;
	left: 1px;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 1px;
	background: var(--gold);
	opacity: 0.75;
	transform: rotate(45deg);
}

.bj_rules strong
{
	color: var(--text_dim);
	font-weight: 600;
}

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

.bj_stage
{
	gap: 8px;
}

.bj_stage .recent_list
{
	flex: 1 1 auto;
}

.bj_scene
{
	position: relative;
	flex: 1 1 0;
	min-height: 200px;
}

.bj_rig
{
	--bj_tilt: 52deg;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1000px;
	height: 640px;
	transform: translate(-50%, -50%) scale(var(--bj_scale, 1));
}

.bj_cat,
.bj_paws
{
	position: absolute;
	left: 260px;
	top: 36px;
	width: 480px;
	height: 300px;
	overflow: visible;
	transform-origin: 240px 214px;
	transform: scale(1.3);
}

.bj_cat
{
	z-index: 1;
}

.bj_paws
{
	z-index: 3;
	pointer-events: none;
}

.bj_view
{
	position: absolute;
	inset: 0;
	z-index: 2;
	perspective: 1250px;
	perspective-origin: 500px 250px;
	pointer-events: none;
}

.bj_plane
{
	position: absolute;
	left: 50px;
	top: 250px;
	width: 900px;
	height: 400px;
	transform-origin: 50% 0;
	transform: rotateX(var(--bj_tilt));
	transform-style: preserve-3d;
}

.bj_plane > *
{
	position: absolute;
}

.bj_skirt,
.bj_rail
{
	left: -34px;
	top: 0;
	width: 968px;
	height: 434px;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.bj_skirt_a
{
	background: #150e2c;
	transform: translateZ(-6px);
}

.bj_skirt_b
{
	background: #0e0920;
	transform: translateZ(-12px);
}

.bj_skirt_c
{
	background: #080512;
	box-shadow: 0 40px 70px rgba(0, 0, 0, 0.65);
	transform: translateZ(-18px);
}

.bj_rail
{
	background: radial-gradient(ellipse 50% 100% at 50% 0%, #1d1438 0 92.2%, #4a3887 93.4%, #2e2160 95.4%, #1a1238 97.6%, #0c0820 100%);
	box-shadow: 0 0 0 1.5px rgba(245, 196, 81, 0.34);
	transform: translateZ(0.1px);
}

.bj_felt
{
	left: 0;
	top: 0;
	width: 900px;
	height: 400px;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	background: radial-gradient(ellipse 55% 60% at 50% 32%, rgba(255, 255, 255, 0.07), transparent 72%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 26%, #36268f 0%, #23185f 50%, #140d38 100%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.4), inset 0 0 90px rgba(0, 0, 0, 0.5);
	transform: translateZ(0.2px);
}

.bj_print
{
	left: 0;
	top: 0;
	width: 900px;
	height: 400px;
	overflow: visible;
	transform: translateZ(0.3px);
}

.bj_print_text
{
	fill: rgba(245, 196, 81, 0.62);
	font: 700 16px var(--font_game);
	letter-spacing: 4px;
}

.bj_print_title
{
	fill: rgba(245, 196, 81, 0.5);
	font: 700 20px var(--font_game);
	letter-spacing: 11px;
}

.bj_edge
{
	left: -34px;
	top: 0;
	width: 968px;
	height: 12px;
	background: linear-gradient(180deg, #0b0718, #1d1438);
	box-shadow: 0 1.5px 0 rgba(245, 196, 81, 0.45);
	transform: translateZ(0.4px);
}

.bj_float
{
	left: 368px;
	top: 12px;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	width: 164px;
	height: 38px;
	padding: 4px 6px;
	border-radius: 0 0 8px 8px;
	background: #07050f;
	box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.85), 0 0 0 1.5px rgba(245, 196, 81, 0.45), 0 0 0 5px #1d1438, 0 0 0 6px rgba(245, 196, 81, 0.25);
	transform: translateZ(0.5px);
}

.bj_float_row
{
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.18) 45%, rgba(0, 0, 0, 0.4)), repeating-linear-gradient(180deg, rgb(var(--chip, 245, 196, 81)) 0 3px, rgba(0, 0, 0, 0.55) 3px 4px);
}

.bj_box
{
	transform-style: preserve-3d;
}

.bj_box > span
{
	position: absolute;
}

.bj_shoe
{
	--box_h: 38px;
	left: 550px;
	top: 10px;
	width: 78px;
	height: 76px;
}

.bj_discard
{
	--box_h: 16px;
	left: 272px;
	top: 10px;
	width: 78px;
	height: 76px;
}

.bj_discard::before
{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(170deg, #1d1438, #0b0718);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.5), inset 0 8px 12px rgba(0, 0, 0, 0.65);
	transform: translateZ(0.6px);
}

.bj_box_top
{
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(170deg, #2a1d55, #120c26);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.55), inset 0 -18px 0 -6px rgba(0, 0, 0, 0.35);
	transform: translateZ(var(--box_h));
}

.bj_box_top::after
{
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: 7px;
	height: 26px;
	border-radius: 3px;
	background: repeating-linear-gradient(180deg, #f3eee2 0 1px, #c9c0de 1px 2px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.bj_box_front
{
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--box_h);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, #1b1338, #0b0718);
	box-shadow: inset 0 1.5px 0 rgba(245, 196, 81, 0.6), inset 0 0 0 1px rgba(245, 196, 81, 0.2);
	transform-origin: 50% 100%;
	transform: rotateX(-90deg);
}

.bj_box_side
{
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--box_h);
	background: linear-gradient(90deg, #0b0718, #1a1236);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.18);
	transform-origin: 0 50%;
	transform: rotateY(-90deg);
}

.bj_shoe_card
{
	left: 11px;
	right: 11px;
	top: 6px;
	height: 18px;
	border-radius: 3px;
	background: repeating-linear-gradient(45deg, rgba(245, 196, 81, 0.25) 0 1px, transparent 1px 5px), linear-gradient(160deg, #4b31b0, #2a1a72);
	box-shadow: inset 0 0 0 2px #f4efe6, 0 -2px 0 rgba(0, 0, 0, 0.5);
}

.bj_discard_pile
{
	left: 8px;
	top: 6px;
	width: 54px;
	height: 54px;
	border-radius: 5px;
	opacity: 0;
	background: repeating-linear-gradient(45deg, rgba(245, 196, 81, 0.2) 0 1px, transparent 1px 6px), linear-gradient(160deg, #4b31b0, #2a1a72 55%, #170d42);
	box-shadow: inset 0 0 0 3px #f4efe6, 0 3px 0 #d8d0e8, 0 5px 0 #b9b0cf;
	transform: translateZ(var(--pile, 2px));
	transition: transform 0.3s var(--ease), opacity 0.3s;
}

.bj_discard.is_used .bj_discard_pile
{
	opacity: 1;
}

.bj_layer
{
	inset: 0;
	transform-style: preserve-3d;
}

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

.bj_card
{
	position: absolute;
	left: 0;
	top: 0;
	width: 74px;
	height: 104px;
	transform-style: preserve-3d;
	transition: transform 0.34s var(--ease);
}

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

.bj_card_face,
.bj_card_back
{
	position: absolute;
	inset: 0;
	border-radius: 7px;
	backface-visibility: hidden;
}

.bj_card_face
{
	background: linear-gradient(160deg, #fffdf8, #f2ede1);
	box-shadow: inset 0 0 0 1px rgba(40, 28, 80, 0.2), inset 0 -2px 0 rgba(40, 28, 80, 0.08), 0 2px 3px rgba(0, 0, 0, 0.4);
	transition: filter 0.3s;
}

.bj_card_face.is_red
{
	color: #c81e3c;
}

.bj_card_face.is_black
{
	color: #1c1631;
}

.bj_card_face svg
{
	fill: currentColor;
}

.bj_card_back
{
	background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.18) 100%), repeating-linear-gradient(45deg, rgba(245, 196, 81, 0.18) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, rgba(245, 196, 81, 0.18) 0 1px, transparent 1px 7px), linear-gradient(160deg, #4f34b8, #2a1a72 55%, #170d42);
	box-shadow: inset 0 0 0 3.5px #f4efe6, inset 0 0 0 5px #c9a24a, 0 2px 3px rgba(0, 0, 0, 0.4);
	transform: rotateY(180deg);
}

.bj_card_back::before
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #2c1d6b, #0e0828);
	box-shadow: 0 0 0 2px #c9a24a, 0 0 0 3.5px rgba(16, 9, 40, 0.8);
}

.bj_back_crest
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 23px;
	margin: -10px 0 0 -14px;
}

.bj_index
{
	position: absolute;
	left: 3px;
	top: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 15px;
}

.bj_index.is_flip
{
	left: auto;
	top: auto;
	right: 3px;
	bottom: 5px;
	transform: rotate(180deg);
}

.bj_rank
{
	font: 700 16px/0.86 Georgia, "Times New Roman", serif;
	letter-spacing: -0.03em;
}

.rank_10 .bj_rank
{
	font-size: 14px;
	letter-spacing: -0.14em;
	text-indent: -0.14em;
}

.bj_index_suit
{
	width: 10px;
	height: 10px;
}

.bj_centre
{
	position: absolute;
	inset: 0;
}

.bj_pip
{
	position: absolute;
	left: calc(17px + var(--px) * 0.26px);
	top: calc(10px + var(--py) * 0.7px);
	width: 14px;
	height: 14px;
}

.bj_pip.is_flip
{
	transform: rotate(180deg);
}

.bj_centre.is_ace .bj_ace
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -18px 0 0 -17px;
}

.bj_centre.is_ace::before
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 48px;
	height: 48px;
	margin: -25px 0 0 -24px;
	border-radius: 50%;
	border: 1.2px solid rgba(201, 162, 74, 0.75);
	box-shadow: inset 0 0 0 3px rgba(201, 162, 74, 0.14);
}

.bj_centre.is_court
{
	inset: 11px 15px;
	overflow: hidden;
	border-radius: 3px;
	background: linear-gradient(180deg, #fbf4e2, #f3e8cb);
	box-shadow: 0 0 0 1px #c9a24a, 0 0 0 2.5px #fffdf8, 0 0 0 3.2px rgba(201, 162, 74, 0.5);
}

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

.bj_card_face.is_black .bj_court
{
	color: #3c2a8c;
}

.bj_card_face.is_red .bj_court
{
	color: #b8173c;
}

.bj_court_suit
{
	position: absolute;
	left: 2px;
	top: 2px;
	width: 8px;
	height: 8px;
}

.bj_court_suit.is_flip
{
	left: auto;
	top: auto;
	right: 2px;
	bottom: 2px;
	transform: rotate(180deg);
}

.bj_card.is_idle .bj_card_face
{
	filter: brightness(0.72) saturate(0.85);
}

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

.bj_stack
{
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	transform-style: preserve-3d;
	transition: transform 0.45s var(--ease);
}

.bj_stack::before
{
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	transform: translate3d(3px, 4px, 0.1px);
}

.bj_chip
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translateZ(var(--z, 0px));
}

.bj_chip_layer
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.bj_chip_side
{
	background: linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), repeating-conic-gradient(rgb(var(--spot)) 0 12deg, rgb(var(--chip)) 12deg 45deg);
}

.bj_chip_side:nth-child(1)
{
	transform: translateZ(1.2px);
}

.bj_chip_side:nth-child(2)
{
	transform: translateZ(2.6px);
}

.bj_chip_side:nth-child(3)
{
	transform: translateZ(4px);
}

.bj_chip_top
{
	background: radial-gradient(circle closest-side, transparent 0 34%, rgba(255, 255, 255, 0.55) 35% 37%, transparent 38%), radial-gradient(circle closest-side, rgb(var(--chip)) 0 56%, rgb(var(--spot)) 57% 61%, transparent 62%), repeating-conic-gradient(rgb(var(--spot)) 0 12deg, transparent 12deg 45deg), linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.18)), rgb(var(--chip));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
	transform: translateZ(5.4px);
}

.bj_bill
{
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px)) rotateX(calc(-1 * var(--bj_tilt))) translate(var(--ax, -50%), -100%);
	transition: transform 0.34s var(--ease), opacity 0.3s;
	white-space: nowrap;
}

.bj_pill
{
	padding: 6px 11px 6px;
	border-radius: 999px;
	color: #fff;
	font: 700 17px/1 var(--font_game);
	letter-spacing: 0.02em;
	background: linear-gradient(180deg, #2a1f55, #120c28);
	box-shadow: inset 0 0 0 1.5px rgba(245, 196, 81, 0.55), 0 5px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_pill.is_soft
{
	color: #ddd6fe;
}

.bj_pill.is_twenty_one
{
	color: #a7f3d0;
	box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, 0.7), 0 5px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_pill.is_bust
{
	color: #fecdd3;
	background: linear-gradient(180deg, #5b0d24, #2a0611);
	box-shadow: inset 0 0 0 1.5px rgba(251, 113, 133, 0.75), 0 5px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_pill.is_natural
{
	color: #2b1a02;
	background: linear-gradient(180deg, #fff3b0, #f5c451 55%, #c98a1a);
	box-shadow: inset 0 0 0 1.5px #8a5310, 0 5px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_pill.is_fresh
{
	animation: bj_pop 0.32s var(--ease);
}

.bj_banner
{
	padding: 8px 16px 9px;
	border-radius: 10px;
	font: 800 20px/1 var(--font_game);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	animation: bj_banner_in 0.5s var(--ease) both;
}

.bj_banner.is_win
{
	color: #03251a;
	background: linear-gradient(180deg, #a7f3d0, #34d399 60%, #059669);
	box-shadow: inset 0 0 0 1.5px #065f46, 0 6px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_banner.is_blackjack
{
	color: #2b1a02;
	background: linear-gradient(180deg, #fff3b0, #f5c451 55%, #c98a1a);
	box-shadow: inset 0 0 0 1.5px #8a5310, 0 6px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_banner.is_push
{
	color: #ede9fe;
	background: linear-gradient(180deg, #6d5bb5, #3f3384);
	box-shadow: inset 0 0 0 1.5px #a78bfa, 0 6px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_banner.is_lose,
.bj_banner.is_bust
{
	color: #ffe4e6;
	background: linear-gradient(180deg, #9f1239, #4c0519);
	box-shadow: inset 0 0 0 1.5px #fb7185, 0 6px 0 -1px rgba(0, 0, 0, 0.45);
}

.bj_tag
{
	--ax: 0%;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--text);
	font: 600 13px/1 var(--font_body);
	background: rgba(8, 6, 18, 0.86);
	box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.4);
}

.bj_frame
{
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 14px;
	border: 2px solid #f5c451;
	background: rgba(245, 196, 81, 0.07);
	opacity: 0;
	transition: transform 0.34s var(--ease), width 0.34s var(--ease), height 0.34s var(--ease), opacity 0.3s;
}

.bj_frame.is_active
{
	opacity: 1;
}

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

.bj_celebrate[hidden]
{
	display: none;
}

.bj_celebrate_ribbon
{
	padding: 10px 34px 12px;
	color: #2b1a02;
	font: 800 54px/1 var(--font_game);
	letter-spacing: 0.02em;
	background: linear-gradient(180deg, #fff3b0, #f5c451 55%, #c98a1a);
	clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
	box-shadow: inset 0 -5px 0 rgba(138, 83, 16, 0.6);
	animation: bj_ribbon 0.7s var(--ease) both;
}

.bj_celebrate_amount
{
	color: #fde68a;
	font: 800 30px/1 var(--font_display);
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
}

.bj_recent
{
	min-width: 38px;
	font-weight: 700;
}

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

.bj_recent.is_blackjack
{
	color: #2b1a02;
	background: linear-gradient(180deg, #fde68a, #f5c451);
}

.bj_recent.is_push
{
	color: #ddd6fe;
	background: rgba(167, 139, 250, 0.16);
}

.bj_recent.is_lose
{
	color: #fda4af;
	background: rgba(251, 113, 133, 0.12);
}

@keyframes bj_pop
{
	0%
	{
		scale: 0.6;
		opacity: 0;
	}

	60%
	{
		scale: 1.12;
		opacity: 1;
	}
}

@keyframes bj_banner_in
{
	0%
	{
		opacity: 0;
		scale: 0.4;
	}

	55%
	{
		opacity: 1;
		scale: 1.15;
	}

	100%
	{
		scale: 1;
	}
}

@keyframes bj_ribbon
{
	0%
	{
		scale: 0.3 0.6;
		rotate: -8deg;
	}

	55%
	{
		scale: 1.12 1.05;
		rotate: 2deg;
	}

	100%
	{
		scale: 1;
		rotate: -2deg;
	}
}

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

.bj_cat .cat_tail
{
	transform-origin: 300px 222px;
}

.bj_cat .cat_body
{
	transform-origin: 240px 300px;
}

.bj_cat .cat_head
{
	transform-origin: 240px 168px;
}

.bj_cat .cat_lid
{
	transform-box: fill-box;
	transform-origin: 50% 0;
	transform: scaleY(0);
	transition: transform 0.18s ease-out;
}

.bj_cat .cat_pupils
{
	translate: var(--look_x, 0px) var(--look_y, 0px);
	transition: translate 0.2s ease-out;
}

.bj_cat .cat_pupil
{
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: transform 0.25s var(--ease);
}

.bj_cat .cat_brow
{
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: transform 0.25s var(--ease), translate 0.25s var(--ease);
}

.bj_cat .cat_mouth,
.bj_cat .cat_happy,
.bj_cat .cat_notes,
.bj_cat .cat_sweat
{
	opacity: 0;
	transition: opacity 0.15s;
}

.bj_cat .cat_mouth_idle
{
	opacity: 1;
}

.bj_cat.is_smug .cat_mouth_idle,
.bj_cat.is_whistle .cat_mouth_idle,
.bj_cat.is_facepalm .cat_mouth_idle,
.bj_cat.is_nod .cat_mouth_idle,
.bj_cat.is_salute .cat_mouth_idle
{
	opacity: 0;
}

.bj_cat.is_smug .cat_mouth_grin,
.bj_cat.is_whistle .cat_mouth_o,
.bj_cat.is_whistle .cat_notes,
.bj_cat.is_facepalm .cat_mouth_flat,
.bj_cat.is_facepalm .cat_sweat,
.bj_cat.is_nod .cat_mouth_smile,
.bj_cat.is_salute .cat_mouth_smile,
.bj_cat.is_salute .cat_happy
{
	opacity: 1;
}

.bj_cat.is_salute .cat_eyes
{
	opacity: 0;
}

.bj_cat.is_smug .cat_lid
{
	transform: scaleY(0.52);
}

.bj_cat.is_peek .cat_lid
{
	transform: scaleY(0.6);
}

.bj_cat.is_facepalm .cat_lid
{
	transform: scaleY(1);
}

.bj_cat.is_smug .cat_brow_l
{
	transform: rotate(10deg);
	translate: 0 3px;
}

.bj_cat.is_smug .cat_brow_r
{
	transform: rotate(-14deg);
	translate: 0 -4px;
}

.bj_cat.is_peek .cat_brow
{
	translate: 0 4px;
}

.bj_cat.is_peek .cat_brow_l
{
	transform: rotate(12deg);
}

.bj_cat.is_peek .cat_brow_r
{
	transform: rotate(-12deg);
}

.bj_cat.is_whistle .cat_brow
{
	translate: 0 -6px;
}

.bj_cat.is_whistle .cat_pupil
{
	transform: scale(2.2, 0.82);
}

.bj_cat.is_peek .cat_pupils,
.bj_cat.is_shuffling .cat_pupils
{
	translate: 0 4px;
}

.bj_paws .cat_arm_l
{
	transform-origin: 188px 170px;
}

.bj_paws .cat_fore_l
{
	transform-origin: 166px 222px;
}

.bj_paws .cat_arm_r
{
	transform-origin: 292px 170px;
}

.bj_paws .cat_fore_r
{
	transform-origin: 314px 222px;
}

.bj_paws .cat_deck
{
	opacity: 0;
	transition: opacity 0.2s;
}

.bj_paws.is_shuffling .cat_deck
{
	opacity: 1;
}

.bj_paws .deck_half
{
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.bj_paws .deck_card
{
	opacity: 0;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference)
{
	.bj_cat .cat_body
	{
		animation: bj_breathe 3.6s ease-in-out infinite;
	}

	.bj_cat .cat_head
	{
		animation: bj_head_idle 3.6s ease-in-out infinite;
	}

	.bj_paws .cat_arm
	{
		animation: bj_arm_idle 3.6s ease-in-out infinite;
	}

	.bj_cat .cat_tail
	{
		animation: bj_tail 4.2s ease-in-out infinite;
	}

	.bj_cat .cat_lid
	{
		animation: bj_blink 5.4s infinite;
	}

	.bj_cat.is_smug .cat_lid,
	.bj_cat.is_peek .cat_lid,
	.bj_cat.is_facepalm .cat_lid
	{
		animation: none;
	}

	.bj_cat.is_smug .cat_tail
	{
		animation: bj_tail_slow 2.6s ease-in-out infinite;
	}

	.bj_cat.is_smug .cat_head
	{
		animation: bj_head_smug 2.6s var(--ease) both;
	}

	.bj_cat.is_whistle .cat_head
	{
		animation: bj_head_whistle 2.9s var(--ease) both;
	}

	.bj_cat.is_whistle .cat_note_a
	{
		animation: bj_note 1.4s ease-out 2 both;
	}

	.bj_cat.is_whistle .cat_note_b
	{
		animation: bj_note 1.4s ease-out 0.45s 2 both;
	}

	.bj_cat.is_whistle .cat_tail
	{
		animation: bj_tail_up 2.9s var(--ease) both;
	}

	.bj_cat.is_facepalm .cat_head
	{
		animation: bj_head_facepalm 2.5s var(--ease) both;
	}

	.bj_cat.is_facepalm .cat_sweat
	{
		animation: bj_sweat 1.6s ease-in 0.4s both;
	}

	.bj_cat.is_facepalm .cat_tail
	{
		animation: bj_tail_droop 2.5s var(--ease) both;
	}

	.bj_cat.is_nod .cat_head
	{
		animation: bj_nod 0.62s ease-in-out 2;
	}

	.bj_cat.is_salute .cat_head
	{
		animation: bj_head_salute 1.9s var(--ease) both;
	}

	.bj_cat.is_peek .cat_head
	{
		animation: bj_head_peek 1.3s var(--ease) both;
	}

	.bj_cat.is_shuffling .cat_head
	{
		animation: bj_head_shuffle 0.65s ease-in-out infinite alternate;
	}

	.bj_paws.is_shuffling .deck_left
	{
		animation: bj_deck_left 0.26s ease-in-out infinite alternate;
	}

	.bj_paws.is_shuffling .deck_right
	{
		animation: bj_deck_right 0.26s ease-in-out infinite alternate;
	}

	.bj_paws.is_shuffling .cat_fore_l .cat_paw,
	.bj_paws.is_shuffling .cat_fore_r .cat_paw
	{
		animation: bj_paw_riffle 0.26s ease-in-out infinite alternate;
	}

	.bj_paws.is_shuffling .deck_card_a,
	.bj_paws.is_shuffling .deck_card_c,
	.bj_paws.is_shuffling .deck_card_e
	{
		animation: bj_riffle_left 0.52s ease-out infinite;
	}

	.bj_paws.is_shuffling .deck_card_b,
	.bj_paws.is_shuffling .deck_card_d,
	.bj_paws.is_shuffling .deck_card_f
	{
		animation: bj_riffle_right 0.52s ease-out infinite;
	}

	.bj_paws.is_shuffling .deck_card_b
	{
		animation-delay: 0.09s;
	}

	.bj_paws.is_shuffling .deck_card_c
	{
		animation-delay: 0.17s;
	}

	.bj_paws.is_shuffling .deck_card_d
	{
		animation-delay: 0.26s;
	}

	.bj_paws.is_shuffling .deck_card_e
	{
		animation-delay: 0.35s;
	}

	.bj_paws.is_shuffling .deck_card_f
	{
		animation-delay: 0.43s;
	}
}

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

	50%
	{
		transform: scale(1.012, 1.022);
	}
}

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

	50%
	{
		transform: translateY(-2px) rotate(-0.6deg);
	}
}

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

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

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

	35%
	{
		transform: rotate(-9deg);
	}

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

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

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

@keyframes bj_tail_up
{
	0%
	{
		transform: rotate(0deg);
	}

	20%,
	80%
	{
		transform: rotate(-18deg) scale(1.04);
	}

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

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

	25%,
	80%
	{
		transform: rotate(22deg);
	}
}

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

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

@keyframes bj_head_smug
{
	0%
	{
		transform: rotate(0deg);
	}

	25%,
	85%
	{
		transform: rotate(-6deg) translateY(-2px);
	}

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

@keyframes bj_head_whistle
{
	0%
	{
		transform: translateY(0) rotate(0deg);
	}

	18%,
	80%
	{
		transform: translateY(-6px) rotate(4deg);
	}

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

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

	18%,
	84%
	{
		transform: rotate(7deg) translateY(5px);
	}
}

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

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

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

	25%,
	70%
	{
		transform: rotate(-5deg) translateY(-2px);
	}
}

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

	25%,
	75%
	{
		transform: rotate(5deg) translateY(7px);
	}
}

@keyframes bj_head_shuffle
{
	from
	{
		transform: rotate(-1.5deg) translateY(3px);
	}

	to
	{
		transform: rotate(1.5deg) translateY(3px);
	}
}

@keyframes bj_note
{
	0%
	{
		opacity: 0;
		transform: translate(0, 6px) scale(0.6);
	}

	20%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0;
		transform: translate(18px, -34px) scale(1.15) rotate(12deg);
	}
}

@keyframes bj_sweat
{
	0%
	{
		opacity: 0;
		transform: translateY(-4px);
	}

	25%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0;
		transform: translateY(22px);
	}
}

@keyframes bj_deck_left
{
	from
	{
		transform: rotate(-4deg);
	}

	to
	{
		transform: rotate(-16deg) translateY(-2px);
	}
}

@keyframes bj_deck_right
{
	from
	{
		transform: rotate(4deg);
	}

	to
	{
		transform: rotate(16deg) translateY(-2px);
	}
}

@keyframes bj_paw_riffle
{
	from
	{
		translate: 0 0;
	}

	to
	{
		translate: 0 -3px;
	}
}

@keyframes bj_riffle_left
{
	0%
	{
		opacity: 1;
		transform: translate(-16px, 0) rotate(-24deg);
	}

	55%
	{
		opacity: 1;
		transform: translate(-6px, -14px) rotate(-6deg);
	}

	100%
	{
		opacity: 0;
		transform: translate(0, 2px) rotate(0deg);
	}
}

@keyframes bj_riffle_right
{
	0%
	{
		opacity: 1;
		transform: translate(16px, 0) rotate(24deg);
	}

	55%
	{
		opacity: 1;
		transform: translate(6px, -14px) rotate(6deg);
	}

	100%
	{
		opacity: 0;
		transform: translate(0, 2px) rotate(0deg);
	}
}

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

@media (max-height: 860px) and (min-width: 1101px)
{
	.bj_page .bj_action
	{
		height: 42px;
	}

	.bj_rules
	{
		gap: 3px;
		padding: 8px 12px;
	}
}

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

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

	.bj_page .bj_action
	{
		height: 38px;
	}

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

	.bj_rules
	{
		font-size: 12px;
	}
}

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

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

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