/* ────────────────────────────────────────────────────────────────
   Shared game styles – mobile-first
   ──────────────────────────────────────────────────────────────── */

:root
{
	--game-bg: #ececec;
	--game-card-bg: #efefef;
	--game-card-border: #d9d9d9;
	--game-control-bg: #e6e6e6;
	--game-text: #2f2f2f;
	--game-green: #06b11f;
	--game-red: #ff123f;
	--game-blue: #1181ff;
	--game-soft-shadow: 0 1px 7px rgba(0, 0, 0, .15);
}

.game-page-body
{
	background: var(--game-bg);
}

.game-page
{
	max-width: 980px;
	padding-top: 2.1rem;
	padding-bottom: 3rem;
}

.game-title
{
	font-size: clamp(2.8rem, 4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.25rem;
	color: #171717;
}

.game-switcher
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
	margin: 0 auto .95rem;
	max-width: 920px;
}

.game-switcher__link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .45rem .85rem;
	border-radius: 999px;
	border: 1px solid #cbcbcb;
	background: #dfdfdf;
	color: #2d2d2d;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	min-height: 34px;
}

.game-switcher__link.is-active
{
	background: #0b67da;
	border-color: #0b67da;
	color: #fff;
}

.game-shell
{
	max-width: 760px;
	margin: 0 auto;
}

.game-tabs
{
	display: inline-flex;
	gap: .35rem;
	margin: 0 auto -.05rem;
	border-bottom: 0;
	flex-wrap: nowrap;
}

.game-tabs .nav-link
{
	min-width: 128px;
	border: 1px solid #c9c9c9;
	background: #d2d2d2;
	color: #2a2a2a;
	font-weight: 600;
	border-radius: 10px 10px 0 0;
	padding: .58rem 1.55rem;
	line-height: 1.2;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset;
}

.game-tabs .nav-link.active
{
	background: #ececec;
	border-color: #d2d2d2;
	color: #161616;
}

.game-card
{
	background: var(--game-card-bg);
	border: 1px solid var(--game-card-border);
	border-radius: 14px;
	padding: 1rem 1.35rem 1.35rem;
	box-shadow: 0 10px 18px rgba(0, 0, 0, .1);
}

.game-card .tab-content
{
	margin-top: .55rem;
}

.game-card .tab-pane
{
	padding-top: .2rem;
}

.game-result-pill
{
	display: none;
	max-width: 210px;
	margin: 0 auto .9rem;
	border-radius: 8px;
	font-weight: 700;
	padding: 0 .9rem;
	font-size: 1.04rem;
	line-height: 1;
	height: 36px;
	align-items: center;
	justify-content: center;
}

.game-result-pill:not(:empty)
{
	display: inline-flex;
	box-shadow: 0 0 9px rgba(6, 177, 31, .45);
	background: var(--game-green);
	color: #fff;
}

.game-result-pill.is-loss:not(:empty)
{
	background: var(--game-red);
	box-shadow: 0 0 9px rgba(255, 18, 63, .45);
}

.game-visual
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 152px;
	margin-bottom: .8rem;
}

.game-visual img
{
	max-width: 100%;
	height: auto;
}

.game-manual-form .form-label,
.game-auto-form .form-label
{
	font-size: .92rem;
	font-weight: 600;
	color: #6a6a6a;
	margin-bottom: .28rem;
}

.game-card .form-select,
.game-card .form-control
{
	background: var(--game-control-bg);
	border: 1px solid #dedede;
	border-radius: 8px;
	box-shadow: none;
	color: var(--game-text);
	min-height: 42px;
	font-weight: 600;
	padding-top: .45rem;
	padding-bottom: .45rem;
}

.game-card .form-control::placeholder
{
	color: #8f8f8f;
}

.game-card .form-check
{
	margin: 0;
	text-align: left;
}

.game-card .form-check-label
{
	font-size: .95rem;
	color: #525252;
}

.game-card .form-check-input
{
	border: 1px solid #b8b8b8;
}

.game-card .form-check-input:checked
{
	background-color: #0b67da;
	border-color: #0b67da;
}

.game-bet-input .btn,
.game-card .btn-outline-secondary
{
	background: #f2f2f2;
	border: 1px solid #dedede;
	color: #808080;
	font-weight: 700;
	min-width: 38px;
	padding-left: .55rem;
	padding-right: .55rem;
}

.game-card .btn-success
{
	background: var(--game-green);
	border: 0;
	padding: .58rem 2rem;
	font-weight: 700;
	border-radius: 9px;
	box-shadow: var(--game-soft-shadow);
	min-width: 118px;
}

.game-card .btn-danger
{
	background: var(--game-red);
	border: 0;
	border-radius: 9px;
	padding: .58rem 2rem;
	font-weight: 700;
	box-shadow: var(--game-soft-shadow);
}

#autoStat
{
	min-height: 1.5rem;
}

.game-auto-summary
{
	background: var(--game-card-bg);
	border: 1px solid var(--game-card-border);
	border-radius: 12px;
	padding: .95rem 1.5rem 1.2rem;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .09);
	margin-bottom: .85rem;
}

.game-auto-grid
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .85rem;
}

.game-auto-grid label
{
	display: block;
	font-size: .92rem;
	font-weight: 600;
	margin-bottom: .3rem;
	color: #5d5d5d;
}

.game-auto-grid strong
{
	display: block;
	background: #e3e3e3;
	border-radius: 8px;
	padding: .5rem .55rem;
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	color: #303030;
}

#autoProfit
{
	background: var(--game-green);
	color: #fff;
}

.game-auto-timer
{
	font-size: 2.75rem;
	font-weight: 700;
	margin: .85rem 0 .8rem;
}

.game-auto-actions
{
	display: flex;
	justify-content: center;
	gap: .7rem;
	flex-wrap: wrap;
}

#autoShowBets
{
	background: var(--game-blue);
	border: 0;
	border-radius: 9px;
	font-weight: 700;
	padding: .58rem 2rem;
	box-shadow: var(--game-soft-shadow);
}

.stack-input
{
	display: block;
	width: 100%;
	margin-top: .35rem;
}

.game-manual-form,
.game-auto-form
{
	max-width: 640px;
	margin: 0 auto;
}

.game-auto-form
{
	padding-top: .1rem;
}

.game-manual-form .col-12.col-md-2:last-child,
.game-manual-form .col-12.col-md-3:last-child,
.game-manual-form .col-12.col-md-4:last-child
{
	padding-left: .1rem;
}

/* coin */
#coin
{
	width: 130px;
	height: 130px;
	margin: 0 auto;
}

#coin img
{
	width: 130px;
	height: 130px;
	object-fit: contain;
}

#coin.spin
{
	animation: flip .7s ease;
}

@keyframes flip
{
	from { transform: rotateY(0deg); }
	to { transform: rotateY(720deg); }
}

/* roll */
#dieBox
{
	width: 110px;
	height: 110px;
	margin: 0 auto;
}

#dieBox img
{
	width: 110px;
	height: 110px;
}

/* high low */
.game-visual-highlow
{
	position: relative;
	max-width: 318px;
	margin: 0 auto;
}

#numberBox
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	pointer-events: none;
}

.highlow-digit
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(50px, 8vw, 62px);
	height: clamp(58px, 9.2vw, 74px);
	background-color: transparent;
	background-image: url("/static/assets/high_low/Hi-Lo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	border-radius: 8px;
}

.highlow-digit span
{
	position: static;
	font-size: clamp(1.95rem, 4.2vw, 2.65rem);
	font-weight: 900;
	font-family: "Arial Black", Impact, sans-serif;
	letter-spacing: .03rem;
	line-height: 1;
	color: #f5f5f5;
	text-shadow: 0 2px 2px rgba(0, 0, 0, .7);
}

/* rps */
.game-visual-rps
{
	gap: 1rem;
}

.game-visual-rps img
{
	width: min(36vw, 182px);
}

.rps-vs
{
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	font-weight: 700;
	text-transform: uppercase;
	color: #333;
}

/* roulette */
.game-visual-roulette
{
	position: relative;
	max-width: 332px;
	margin: 0 auto;
}

.game-visual-roulette img
{
	width: 332px;
}

#winnerNum
{
	position: absolute;
	left: 74%;
	top: 43%;
	transform: translate(-50%, -50%);
	width: 46%;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: clamp(2.1rem, 5.8vw, 3rem);
	font-weight: 700;
	color: #fff;
	pointer-events: none;
}

/* scratch card */
.game-visual-scratch
{
	position: relative;
	max-width: 376px;
	margin: 0 auto;
}

.scratch-board
{
	display: block;
	width: 100%;
}

.scratch-grid
{
	position: absolute;
	top: 22%;
	right: 6%;
	bottom: 8%;
	left: 45%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: .5rem;
}

.scratch-grid .square
{
	width: 100%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 30% 30%, #2f3136 0%, #181a1f 100%);
	color: #dfdfdf;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 700;
	border: 3px solid #ba8b24;
	box-sizing: border-box;
	margin: 0;
	text-transform: capitalize;
}

.scratch-grid .square img
{
	width: 76%;
	height: 76%;
	object-fit: contain;
}

.scratch-grid .square.hidden
{
	background: radial-gradient(circle at 30% 30%, #e2c66b 0%, #aa7f1f 100%);
	color: transparent;
}

/* keep old class compatibility */
.hidden
{
	background: #adb5bd;
	color: transparent;
}

@media (max-width: 991px)
{
	.game-title
	{
		font-size: clamp(2.3rem, 8vw, 2.8rem);
	}

	.game-card
	{
		padding: .95rem .85rem 1.2rem;
	}

	.game-auto-summary
	{
		padding: .9rem .75rem 1rem;
	}

	.game-auto-grid
	{
		gap: .5rem;
	}

	.game-auto-grid strong
	{
		font-size: 1.55rem;
	}

	.game-auto-timer
	{
		font-size: 2.1rem;
	}
}

.profile-btn
{
	background-color: #4F6D9A;
	border-color: #4F6D9A;
}

.withdraw-fee-refresh
{
	cursor: pointer;
}

.daily-progress-wrap { max-width: 720px; }
.daily-progress-bar {
	display: flex;
	height: 16px;
	border: 2px solid #000;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.daily-progress-segment {
	flex: 1;
	position: relative;
}
.daily-progress-segment + .daily-progress-segment {
	border-left: 1px solid #000;
}
.daily-progress-segment-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: #dc3545;
	width: 0;
	transition: width .4s ease;
}
.daily-progress-steps {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-top: 1rem;
}
.daily-progress-step {
	flex: 1;
	text-align: center;
}
.daily-progress-badge {
	display: inline-block;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: #0d6efd;
	color: #fff;
	font-weight: 600;
}
.daily-progress-step.complete .daily-progress-badge {
	background: #198754;
}
.daily-progress-label {
	font-size: .8rem;
	font-weight: 600;
	margin-top: .35rem;
}
.daily-progress-percent {
	font-size: .75rem;
	color: #6c757d;
	margin-top: .2rem;
}

/* minesweeper grid */
#grid.minesweeper-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(60px, 80px));
	gap: .5rem;
	justify-content: center;
	max-width: 420px;
	margin: 1rem auto 0;
}

#grid.minesweeper-grid .square{
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
}

.minesweeper-wrap{
	max-width: 820px;
	position: relative;
	overflow: hidden;
}

.minesweeper-title{
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.minesweeper-subtitle{
	color: #6c757d;
	max-width: 640px;
	margin: 0 auto;
}

.minesweeper-stats{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	align-items: center;
}

.minesweeper-stat{
	background: #f2f2f2;
	border-radius: 12px;
	padding: .6rem 1.2rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	display: inline-flex;
	gap: .35rem;
	align-items: center;
	font-weight: 600;
	color: #212529;
}

.minesweeper-stat .value{
	font-weight: 700;
}

.minesweeper-stat .suffix{
	margin-left: .2rem;
	font-weight: 600;
}

.minesweeper-stat--success{
	background: #0e9b2a;
	color: #fff;
}

.minesweeper-info-btn{
	border: none;
	background: #10a135;
	border-radius: 12px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
	padding: 0;
}

.minesweeper-info-btn img{
	width: 20px;
	height: 20px;
}

.minesweeper-banners{
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;
	min-height: 2.5rem;
}

.minesweeper-confetti{
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
}

.minesweeper-confetti img{
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	width: 220px;
	max-width: 45%;
}

.minesweeper-confetti-left{
	left: -20px;
}

.minesweeper-confetti-right{
	right: -20px;
}

.minesweeper-wrap.is-win .minesweeper-confetti{
	opacity: 1;
}

.minesweeper-banner{
	padding: .45rem 1.8rem;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
	background: #e9ecef;
	color: #212529;
}

.minesweeper-banner--danger{
	background: #e01b1b;
	color: #fff;
	box-shadow: 0 0 16px rgba(224, 27, 27, 0.6);
}

.minesweeper-banner--safe,
.minesweeper-banner--success{
	background: #13a531;
	color: #fff;
	box-shadow: 0 0 16px rgba(19, 165, 49, 0.45);
}

.minesweeper-banner--warning{
	background: #fff3cd;
	color: #856404;
	box-shadow: 0 0 16px rgba(255, 193, 7, 0.3);
}

#grid.minesweeper-grid .square{
	border-radius: 12px;
	background: #f4f4f4;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#grid.minesweeper-grid .square.hidden{
	background: #e5e5e5 url("/cdn-cgi/image/quality=medium-high,format=auto,fit=scale-down/static/assets/minesweeper/Block-img.png") center / 70% no-repeat;
	color: transparent;
}

#grid.minesweeper-grid .square.is-revealed{
	background: #f1f1f1;
}

#grid.minesweeper-grid .square.is-reward{
	background: #f7f2df;
}

#grid.minesweeper-grid .square.is-empty{
	background: #eeeeee;
}

#grid.minesweeper-grid .square.is-mine{
	background: #e31b1b;
	box-shadow: 0 0 18px rgba(227, 27, 27, 0.6);
}

#grid.minesweeper-grid .tile-image{
	width: 65%;
	height: 65%;
	object-fit: contain;
	display: none;
}

#grid.minesweeper-grid .square.is-revealed .tile-image{
	display: block;
}

.minesweeper-actions{
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.minesweeper-btn{
	border: none;
	border-radius: 12px;
	padding: .85rem 2.8rem;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.minesweeper-btn--start{
	background: #10a127;
}

.minesweeper-btn--cashout{
	background: #f5b200;
	color: #fff;
}

.minesweeper-btn:disabled{
	opacity: .6;
	box-shadow: none;
}

.minesweeper-modal{
	border-radius: 12px;
}

.minesweeper-key-list{
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: .75rem;
}

.minesweeper-key-list li{
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #444;
	font-weight: 600;
}

.minesweeper-key-list img{
	width: 20px;
	height: 20px;
}

/* wheel of fortune */
#wheel
{
	transition: transform 2s ease-out;
}

/* rotating banner */
.rotating-banner-wrapper {
	display: flex;
	justify-content: center;
}

.rotating-banner-link {
	display: inline-block;
	width: 300px;
	max-width: 100%;
}

.rotating-banner-link img {
	width: 100%;
	height: auto;
}

#promoBanner .promo-cta {
	font-weight: 700;
}

@media (max-width: 767px)
{
	.game-page
	{
		padding-top: 1.6rem;
	}

	.game-title
	{
		font-size: 2.1rem;
	}

	.game-switcher
	{
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: .2rem;
		scrollbar-width: thin;
	}

	.game-auto-grid
	{
		grid-template-columns: 1fr;
	}

	.game-auto-timer
	{
		font-size: 1.4rem;
	}

	#numberBox
	{
		gap: .22rem;
	}

	.game-visual-rps img
	{
		width: min(36vw, 132px);
	}

	.highlow-digit
	{
		width: clamp(38px, 11vw, 56px);
		height: clamp(50px, 14vw, 64px);
	}

	.scratch-grid
	{
		gap: .36rem;
		top: 21%;
		right: 5%;
		bottom: 6%;
		left: 46%;
	}
}