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

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

.segmented_four .segment
{
	font-size: 13.5px;
}

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

.keno_tool
{
	gap: 7px;
	height: 40px;
	padding: 0 12px;
	font-size: 13.5px;
}

.keno_tool:disabled
{
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

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

.keno_counts[hidden]
{
	display: none;
}

.keno_counts .field_chip
{
	height: 30px;
}

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

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

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

.keno_stage
{
	gap: 12px;
}

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

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

.keno_felt
{
	position: absolute;
	inset: 30px;
	border-radius: 34px;
	background: radial-gradient(ellipse 50% 60% at 33% 45%, rgba(255, 255, 255, 0.06), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 45% 40%, #34248c 0%, #22185f 50%, #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);
}

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

.keno_title
{
	position: absolute;
	left: 44px;
	top: 43px;
	width: 540px;
	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;
}

.keno_machine,
.keno_fx
{
	position: absolute;
	left: 0;
	top: 0;
	width: 960px;
	height: 520px;
	pointer-events: none;
}

.keno_fx
{
	z-index: 4;
}

.keno_well
{
	position: absolute;
	left: 44px;
	top: 74px;
	z-index: 1;
	width: 540px;
	height: 394px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(6, 4, 15, 0.6), rgba(10, 6, 26, 0.46));
	box-shadow: inset 0 3px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 1.5px rgba(245, 196, 81, 0.34), 0 1px 0 rgba(255, 255, 255, 0.05);
}

.keno_board
{
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(8, 57px);
	grid-auto-rows: 66px;
	gap: 9px 8px;
	justify-content: center;
	align-content: center;
}

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

.keno_tile
{
	position: relative;
	width: 57px;
	height: 66px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	perspective: 420px;
	-webkit-tap-highlight-color: transparent;
}

.keno_tile:focus-visible
{
	outline: none;
}

.keno_tile:focus-visible .tile_face
{
	box-shadow: inset 0 0 0 2px #fff, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tile_side
{
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	bottom: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #1d1442, #110b29);
	box-shadow: 0 6px 9px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
	transition: background 0.3s;
}

.tile_flip
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 57px;
	transform-style: preserve-3d;
	transition: transform 0.55s var(--ease), translate 0.12s var(--ease);
}

.tile_face,
.tile_back
{
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 12px;
	backface-visibility: hidden;
}

.tile_face
{
	color: #dcd4ff;
	font: 700 22px/1 var(--font_game);
	background: linear-gradient(160deg, #4b3b98 0%, #35297c 55%, #2a1f63 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(167, 139, 250, 0.16);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
	transition: background 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.3s, filter 0.3s;
}

.tile_face::before
{
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 5px;
	height: 9px;
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.tile_back
{
	transform: rotateY(180deg);
	background: radial-gradient(circle at 50% 38%, #3d2c8c, #1a113e 78%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}

.tile_gem
{
	position: absolute;
	left: 3px;
	top: 3px;
	width: 51px;
	height: 51px;
	color: rgb(var(--ball, 167, 139, 250));
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45));
}

.tile_glint
{
	position: absolute;
	right: 4px;
	top: 3px;
	width: 13px;
	height: 13px;
	color: #fff;
	fill: #fff;
	opacity: 0;
}

.keno_tile.is_hit .tile_glint
{
	opacity: 0.95;
}

.tile_gem_number
{
	position: relative;
	color: #fff;
	font: 800 20px/1 var(--font_game);
	text-shadow: 0 0 2px #140b30, 0 0 2px #140b30, 0 1px 1px #140b30, 0 2px 3px rgba(0, 0, 0, 0.6);
}

.keno_board:not(.is_locked) .keno_tile:hover .tile_flip
{
	translate: 0 -2px;
}

.keno_board:not(.is_locked) .keno_tile:hover .tile_face
{
	color: #fff;
	background: linear-gradient(160deg, #5a48b0 0%, #3f3190 55%, #30246f 100%);
}

.keno_board:not(.is_locked) .keno_tile:active .tile_flip
{
	translate: 0 4px;
}

.keno_board.is_locked .keno_tile
{
	cursor: default;
}

.keno_tile.is_picked .tile_face
{
	color: #fff7d6;
	background: linear-gradient(160deg, #b197fc 0%, #7c3aed 52%, #5b21b6 100%);
	box-shadow: inset 0 0 0 2px rgba(245, 196, 81, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(46, 16, 101, 0.45);
	text-shadow: 0 1px 1px rgba(46, 16, 101, 0.85);
}

.keno_board:not(.is_locked) .keno_tile.is_picked:hover .tile_face
{
	background: linear-gradient(160deg, #c4b1ff 0%, #8b4cf6 52%, #6526c7 100%);
}

.keno_tile.is_picked .tile_side
{
	background: linear-gradient(180deg, #4c1d95, #2b0f61);
}

.keno_tile.is_drawn .tile_face
{
	color: rgba(220, 212, 255, 0.5);
	background: linear-gradient(160deg, #2c2262, #20184b);
}

.keno_tile.is_drawn .tile_face::after
{
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	border: 3px solid rgba(var(--ball, 167, 139, 250), 0.62);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
	animation: keno_ring 0.45s var(--ease) both;
}

.keno_tile.is_cold .tile_face
{
	opacity: 0.58;
	filter: saturate(0.55);
}

.keno_tile.is_hit .tile_flip
{
	transform: rotateY(180deg);
}

.keno_tile.is_hit .tile_side
{
	background: linear-gradient(180deg, #8a6414, #4d3407);
}

@keyframes keno_glint
{
	0%,
	100%
	{
		opacity: 0.25;
		scale: 0.5;
		rotate: 0deg;
	}

	45%
	{
		opacity: 1;
		scale: 1.1;
		rotate: 45deg;
	}
}

@keyframes keno_ring
{
	from
	{
		opacity: 0;
		scale: 1.5;
	}
}

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

.keno_owl_box
{
	position: absolute;
	left: 770px;
	top: 234px;
	z-index: 2;
	width: 172px;
	height: 248px;
}

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

.keno_owl .owl_rig
{
	transform-origin: 98px 212px;
}

.keno_owl .owl_shadow
{
	transform-origin: 98px 214px;
}

.keno_owl .owl_lever
{
	transform-origin: 10px 120px;
}

.keno_owl .owl_wing_near
{
	transform-origin: 84px 128px;
}

.keno_owl .owl_wing_far
{
	transform-origin: 124px 128px;
}

.keno_owl .owl_head
{
	transform-origin: 98px 120px;
}

.keno_owl .owl_body
{
	transform-origin: 98px 202px;
}

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

.keno_owl .owl_pupil
{
	translate: var(--look_x, 0px) var(--look_y, 0px);
	transition: translate 0.14s ease-out;
}

.keno_owl .owl_happy,
.keno_owl .owl_sigh,
.keno_owl .owl_feather
{
	opacity: 0;
}

.keno_owl .owl_eyes,
.keno_owl .owl_happy
{
	transition: opacity 0.15s;
}

.keno_owl.is_cheering .owl_eyes,
.keno_owl.is_happy .owl_eyes
{
	opacity: 0;
}

.keno_owl.is_cheering .owl_happy,
.keno_owl.is_happy .owl_happy
{
	opacity: 1;
}

.keno_owl.is_slumping .owl_lid
{
	animation: none;
	transform: scaleY(0.55);
}

.keno_owl .owl_feather_a
{
	--feather_x: -22px;
	--feather_y: -26px;
	--feather_turn: -70deg;
}

.keno_owl .owl_feather_b
{
	--feather_x: 20px;
	--feather_y: -30px;
	--feather_turn: 80deg;
}

.keno_owl .owl_feather_c
{
	--feather_x: 4px;
	--feather_y: -34px;
	--feather_turn: 40deg;
}

@media (prefers-reduced-motion: no-preference)
{
	.keno_tile.is_hit .tile_glint
	{
		animation: keno_glint 2.4s ease-in-out 0.5s infinite;
	}

	.keno_tile:nth-child(3n).is_hit .tile_glint
	{
		animation-delay: 1.3s;
	}

	.keno_owl .owl_body
	{
		animation: owl_breathe 3.4s ease-in-out infinite;
	}

	.keno_owl .owl_lid
	{
		animation: owl_blink 4.8s infinite;
	}

	.keno_owl .owl_head
	{
		animation: owl_tilt 8.6s ease-in-out infinite;
	}

	.keno_owl .owl_goggles
	{
		animation: owl_goggles 13s ease-in-out infinite;
	}

	.keno_owl .owl_wing_far
	{
		animation: owl_adjust 13s ease-in-out infinite;
	}

	.keno_owl.is_cheering .owl_wing_far
	{
		animation: owl_flap 0.3s ease-in-out infinite alternate;
	}

	.keno_owl.is_cheering .owl_body
	{
		animation: owl_puff 0.7s var(--ease) both;
	}

	.keno_owl.is_cheering .owl_rig
	{
		animation: owl_bounce 0.46s ease-in-out 4;
	}

	.keno_owl.is_cheering .owl_feather
	{
		animation: owl_feather 1.5s ease-out both;
	}

	.keno_owl.is_happy .owl_head
	{
		animation: owl_nod 0.55s ease-in-out 2;
	}

	.keno_owl.is_slumping .owl_head
	{
		animation: owl_droop 2.7s var(--ease) both;
	}

	.keno_owl.is_slumping .owl_body
	{
		animation: owl_sag 2.7s var(--ease) both;
	}

	.keno_owl.is_slumping .owl_wing_far
	{
		animation: owl_hang 2.7s var(--ease) both;
	}

	.keno_owl.is_slumping .owl_sigh
	{
		animation: owl_sigh 1.9s ease-out 0.4s both;
	}

	.keno_owl.is_shrug .owl_head
	{
		animation: owl_shake 0.9s ease-in-out both;
	}
}

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

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

@keyframes owl_blink
{
	0%,
	90%,
	96%,
	100%
	{
		transform: scaleY(0);
	}

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

@keyframes owl_tilt
{
	0%,
	30%,
	60%,
	88%,
	100%
	{
		transform: rotate(0deg);
	}

	38%,
	52%
	{
		transform: rotate(-7deg);
	}

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

@keyframes owl_goggles
{
	0%,
	79%,
	96%,
	100%
	{
		transform: translateY(0);
	}

	83%,
	90%
	{
		transform: translateY(26px);
	}

	93%
	{
		transform: translateY(-3px);
	}
}

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

	30%
	{
		transform: rotate(-6deg);
	}

	60%,
	74%
	{
		transform: rotate(2deg);
	}

	78%,
	92%
	{
		transform: rotate(-148deg);
	}

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

@keyframes owl_flap
{
	from
	{
		transform: rotate(-150deg);
	}

	to
	{
		transform: rotate(-112deg);
	}
}

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

	40%
	{
		transform: scale(1.13, 1.1);
	}

	100%
	{
		transform: scale(1.07, 1.06);
	}
}

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

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

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

	15%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 0;
		transform: translate(var(--feather_x), var(--feather_y)) rotate(var(--feather_turn));
	}
}

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

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

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

	25%,
	82%
	{
		transform: translateY(8px) rotate(10deg);
	}
}

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

	25%,
	82%
	{
		transform: scale(1.04, 0.94);
	}
}

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

	25%,
	82%
	{
		transform: rotate(12deg);
	}
}

@keyframes owl_sigh
{
	0%
	{
		opacity: 0;
		transform: translate(0, 0) scale(0.5);
	}

	25%
	{
		opacity: 0.9;
	}

	100%
	{
		opacity: 0;
		transform: translate(20px, 6px) scale(1.3);
	}
}

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

	25%
	{
		transform: rotate(-7deg);
	}

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

	75%
	{
		transform: rotate(-3deg);
	}
}

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

.keno_pays
{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	flex: none;
}

.keno_pays[hidden]
{
	display: none;
}

.keno_pays_head
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: 0 4px;
	color: var(--text_mute);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.keno_pays_head span
{
	display: flex;
	align-items: center;
}

.keno_pays_head span:nth-child(1),
.pay_hits
{
	height: 15px;
}

.keno_pays_head span:nth-child(2),
.pay_multiplier
{
	height: 19px;
}

.keno_pays_head span:nth-child(3),
.pay_chance
{
	height: 14px;
}

.keno_pays_row
{
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 6px;
}

.pay_cell
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 7px 2px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.pay_hits
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--text_mute);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pay_gem
{
	width: 12px;
	height: 12px;
	color: #a78bfa;
}

.pay_multiplier
{
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
	color: var(--text_mute);
	font: 700 15px/1 var(--font_display);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pay_chance
{
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
	color: var(--text_mute);
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pay_cell.is_paying
{
	background: rgba(var(--pay), 0.08);
	border-color: rgba(var(--pay), 0.26);
}

.pay_cell.is_paying .pay_multiplier
{
	color: color-mix(in srgb, rgb(var(--pay)) 55%, #fff);
}

.pay_cell.is_paying .pay_gem
{
	color: rgb(var(--pay));
}

.pay_cell.is_live
{
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--gold);
	animation: cell_hit 0.45s var(--ease);
}

.pay_cell.is_won
{
	border-color: transparent;
	background: rgba(52, 211, 153, 0.14);
	box-shadow: 0 0 0 2px #34d399;
	animation: cell_hit 0.6s var(--ease);
}

.pay_cell.is_won .pay_multiplier
{
	color: #a7f3d0;
}

.pay_cell.is_lost
{
	border-color: transparent;
	box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.75);
}

.keno_pays_empty
{
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0 14px;
	color: var(--text_mute);
	font-size: 13px;
	text-align: center;
	border: 1px dashed var(--line_strong);
	border-radius: 10px;
}

.keno_pays_empty[hidden]
{
	display: none;
}

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

.keno_pill.is_flat
{
	color: var(--text_mute);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: none;
}

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

@media (max-height: 760px) and (min-width: 1101px)
{
	.keno_stage
	{
		gap: 10px;
	}

	.keno_page .game_controls .field
	{
		margin-bottom: 10px;
	}

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

	.keno_page .game_controls .field_box
	{
		height: 46px;
	}

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

	.pay_cell
	{
		padding: 5px 2px;
	}

	.keno_tool
	{
		height: 36px;
	}
}

@media (max-height: 700px) and (min-width: 1101px)
{
	.pay_chance,
	.keno_pays_head span:nth-child(3)
	{
		display: none;
	}
}

@media (max-width: 1100px)
{
	.keno_scene
	{
		flex: none;
		height: calc((100vw - 48px) * 0.54);
		max-height: 560px;
	}
}

@media (max-width: 600px)
{
	.keno_pays_head
	{
		display: none;
	}

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

	.pay_multiplier
	{
		font-size: 12px;
	}

	.pay_chance
	{
		display: none;
	}
}

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