/* Banner — 16:5 box = the 1920×600 desktop spec, so art shows whole at any width */
.banner {
	width: var(--shell-max);
	aspect-ratio: var(--banner-ratio);
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: calc(-1 * var(--shell-half));
	margin-right: calc(-1 * var(--shell-half));
	overflow: hidden;
}

.banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Marquee */
.marquee {
	width: var(--shell-max);
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: calc(-1 * var(--shell-half));
	margin-right: calc(-1 * var(--shell-half));
	background: rgba(var(--gold-rgb), 0.10);
	border-top: 0.0625rem solid var(--border);
	border-bottom: 0.0625rem solid var(--border);
	overflow: hidden;
}

.marquee-track {
	overflow: hidden;
	padding: 0.5rem 0;
	width: 100%;
}

.marquee-inner {
	display: flex;
	align-items: center;
	width: max-content;
	animation: marquee-scroll 30s linear infinite;
}

/* One half of the loop, built by assets/js/marquee.js. */
.marquee-group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.marquee-item {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-primary);
}

.marquee-title {
	color: var(--gold-text);
	font-weight: 700;
}

.marquee-item::after {
	content: '·';
	display: inline-block;
	padding: 0 0.625rem;
	color: var(--text-muted);
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* 3-step Join */
.join-steps {
	width: var(--shell-max);
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: calc(-1 * var(--shell-half));
	margin-right: calc(-1 * var(--shell-half));
	padding: 1.75rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 1.5rem;
}

.step {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.step-icon {
	width: 7.5rem;
	height: 7.5rem;
	object-fit: contain;
	flex-shrink: 0;
}

.step-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.step-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: 0.0625rem;
}

.step-sub {
	font-size: 0.8125rem;
	color: var(--gold-text);
	font-weight: 500;
}

[data-theme="light"] .step-sub {
	color: #705D00;
}

/* Watch Live */
.watch-live-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 2.5rem 0 1rem;
}

.watch-live-icon {
	font-size: 1.125rem;
	color: var(--gold-text);
}

.watch-live-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
}

.watch-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: rgba(var(--red-rgb), 0.12);
	border: 0.0625rem solid rgba(var(--red-rgb), 0.5);
	color: var(--red-text);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.0625rem;
	border-radius: 62.4375rem;
}

.watch-live-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: #fff;
}

.watch-live-dot-red {
	background: var(--red);
	animation: live-pulse 1.5s ease-in-out infinite;
}

/* Nothing live: one-line note that links through to the recordings. */
.watch-live-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 1rem 1.125rem;
	border-radius: 0.875rem;
	background: var(--bg-card);
	border: 0.0625rem dashed var(--border);
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.watch-live-empty-text {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.watch-live-empty-link {
	color: var(--gold-text);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

@media (hover: hover) {
	.watch-live-empty:hover {
		border-color: var(--border-strong);
		background: var(--bg-card-hover);
	}
}

/* .watch-live-grid layout: see "Swipeable card rails" at the end of this file. */

/* .watch-live-card and its parts: see assets/css/components/watch-live-card.css */

/* Lucky Draw */
.lucky-draw-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 2.5rem 0 1rem;
}

.lucky-draw-icon {
	font-size: 1.125rem;
	color: var(--gold-text);
}

.lucky-draw-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
}

.lucky-draw-see-all {
	margin-left: auto;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.18);
	border: 0.0625rem solid var(--border);
	border-radius: 62.4375rem;
	text-decoration: none;
	transition: background 0.15s;
}

.lucky-draw-see-all:hover {
	background: rgba(var(--gold-rgb), 0.15);
}

/* .lucky-draw layout: see "Swipeable card rails" at the end of this file. */

.lucky-draw-card {
	width: 100%;
	height: auto;
	display: block;
}

/* Live Transaction */
.live-txn {
	background: #0a0a0d;
	border: 0.125rem solid var(--gold);
	border-radius: 0.75rem;
	overflow: hidden;
}

[data-theme="light"] .live-txn {
	background: var(--bg-card);
}

.live-txn-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	margin-top: 2.5rem;
}

.live-txn-header-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.live-txn-icon {
	font-size: 1.75rem;
	color: var(--gold-text);
}

.live-txn-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
}

.live-txn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: var(--red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.0938rem;
	border-radius: 0.375rem;
}

.live-txn-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #fff;
	animation: live-pulse 1.5s ease-in-out infinite;
}

/* @keyframes live-pulse: see assets/css/components/watch-live-card.css */

.live-txn-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: #0a0a0d;
}

@keyframes live-txn-out {
	0%   { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-1rem); }
}

@keyframes live-txn-in {
	0%   { opacity: 0; transform: translateY(1rem); }
	100% { opacity: 1; transform: translateY(0); }
}

.live-txn-val {
	display: inline-block;
	animation: live-txn-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.live-txn-val.is-out {
	animation: live-txn-out 0.3s ease-in both;
}

/* Header — two-tone gold (TOP UP deeper, WITHDRAW lighter) */
.live-txn-table thead th {
	color: var(--text-on-gold);
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: 0.125rem;
	padding: 0.875rem;
	text-align: center;
	border: none;
}

.live-txn-table thead th:first-child {
	background: #FABB2E;
}

.live-txn-table thead th:last-child {
	background: #FFEEA1;
}

/* Body cells — dark gaps drawn via dark borders */
.live-txn-table tbody td {
	color: var(--text-primary);
	font-size: 0.8125rem;
	padding: 0.875rem;
	text-align: center;
	border: 0.0625rem solid #0a0a0d;
}

.live-txn-table tbody tr:nth-child(odd) td {
	background: #000;
}

.live-txn-table tbody tr:nth-child(even) td {
	background: #FEF6E326;
}

/* Light theme overrides */
[data-theme="light"] .live-txn-table {
	background: var(--bg-card);
}

[data-theme="light"] .live-txn-table tbody td {
	border-color: var(--bg-base);
}

[data-theme="light"] .live-txn-table tbody tr:nth-child(odd) td {
	background: var(--bg-card-alt);
}

[data-theme="light"] .live-txn-table tbody tr:nth-child(even) td {
	background: var(--bg-card);
}

.live-txn-table tbody td.live-txn-amount {
	color: #FABB2E;
	font-weight: 700;
}

.live-txn-table tbody td.live-txn-provider {
	font-weight: 700;
}

/* Games */
.games {
	margin: 2.5rem 0;
}

.games-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.games-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
}

.games-see-all {
	margin-left: auto;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.18);
	border: 0.0625rem solid var(--border);
	border-radius: 62.4375rem;
	text-decoration: none;
	transition: background 0.15s;
}

.games-see-all:hover {
	background: rgba(var(--gold-rgb), 0.15);
}

.games-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

/* Desktop: at full content width each grid tile grew to ~630px. Cap the grid
   and centre it — images keep their own aspect (no cropping). Direct children
   only, so the mobile lobby's nested .games-grid is untouched. The header is
   capped too, so "See All" lines up with the cards' right edge. */
.games > .games-header,
.games > .games-grid {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}

.games-card {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 0.875rem;
}

.games-card-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Diagonal corner ribbon — folds across the top-right corner of the card */
.games-status {
	position: absolute;
	top: 0.9rem;
	right: -2.1rem;
	z-index: 2;
	width: 7rem;
	padding: 0.3125rem 0;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.0625rem;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	transform: rotate(45deg);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.games-status-hot {
	background: linear-gradient(107deg, #ff7a45 0%, #f5333f 100%);
}

.games-status-new {
	background: linear-gradient(107deg, #34d399 0%, #0ea371 100%);
}

.games-status-exclusive {
	letter-spacing: 0.03125rem;
	color: #fff;
	background: linear-gradient(107deg, #c0392b 0%, #8e1010 100%);
}

/* Maintenance label is too long for a corner ribbon — show it as a bold
   centered banner across the dimmed card instead */
.games-card .games-status-maintenance {
	top: 50%;
	right: auto;
	left: 0;
	width: 100%;
	padding: 0.4375rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.1875rem;
	transform: translateY(-50%);
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.55);
	background: linear-gradient(107deg, #f56565 0%, #c53030 100%);
}

.games-card.is-maintenance .games-card-img {
	filter: grayscale(0.7) brightness(0.55);
}

/* Games — mobile category lobby (chip row on top + one panel per category).
   Only the mobile view emits .games-lobby, so these rules never reach the
   desktop grid. Categories with no games are dropped server-side, and the rail
   itself is skipped when only one category has games. */

/* Horizontal chip row; scrolls sideways if the categories outgrow the screen. */
.games-rail {
	display: flex;
	gap: clamp(0.375rem, 1.6vw, 0.5rem);
	margin: 0 0 0.875rem;
	padding-bottom: 0.125rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.games-rail::-webkit-scrollbar {
	display: none;
}

/* Sizes scale with the viewport (clamp: small-phone floor → 390px+ ceiling) so
   all four tabs fit across a typical phone instead of scrolling. */
.games-cat {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.25rem, 1.2vw, 0.375rem);
	flex: 0 0 auto;
	height: clamp(1.875rem, 8.5vw, 2.25rem);
	padding: 0 clamp(0.5rem, 2.6vw, 0.75rem);
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 62.4375rem;
	color: var(--text-secondary);
	font-size: clamp(0.625rem, 2.9vw, 0.71875rem);
	font-weight: 700;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.games-cat-icon {
	width: clamp(0.8125rem, 3.6vw, 1rem);
	height: clamp(0.8125rem, 3.6vw, 1rem);
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.games-cat:active {
	transform: scale(0.95);
}

.games-cat.is-active {
	color: var(--text-on-gold);
	background: var(--gold-gradient);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}

.games-panel {
	display: none;
}

.games-panel.is-active {
	display: block;
	animation: games-panel-in 0.3s ease both;
}

@keyframes games-panel-in {
	from { opacity: 0; transform: translateY(0.375rem); }
	to   { opacity: 1; transform: none; }
}

/* Gold gradient heading with a hairline running out to the panel edge */
.games-panel-title {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	margin: 0.125rem 0.125rem 0.625rem;
	font-family: var(--font-brand);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.15625rem;
	text-transform: uppercase;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.games-panel-title small {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.09375rem;
	color: var(--text-muted);
	/* the parent clips its background to the text, so opt this back out */
	-webkit-text-fill-color: var(--text-muted);
}

.games-panel-title::after {
	content: '';
	flex: 1;
	align-self: center;
	height: 0.0625rem;
	background: linear-gradient(90deg, var(--border), transparent);
}

/* Lobby tiles show the provider art edge to edge — the art has its own frame,
   so no rounding, border or shadow on top of it. */
.games-lobby .games-card {
	border-radius: 0;
	transition: transform 0.18s;
}

.games-lobby .games-card:active {
	transform: scale(0.97);
}

/* Light theme: the bright gold reads as washed out on a near-white card, so the
   heading switches to --gold-dark — the same darker gold the light theme
   already uses for its borders. */
[data-theme="light"] .games-panel-title {
	background: linear-gradient(107deg, var(--gold-dark), #9a7208);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Wallet card (mobile, member only) */
.wallet {
	margin: 1rem 0;
	padding: 1.125rem 1.25rem;
	background: linear-gradient(90deg, #0D0B06 0%, #181200 48%, #0B0E1A 100%);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.22);
	border-radius: 1.25rem;
	box-shadow: inset 0 0.0625rem 0 0 rgba(255, 220, 100, 0.10);
}

[data-theme="light"] .wallet {
	background: #ffffff;
}

.wallet-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.wallet-welcome {
	font-size: 0.875rem;
	color: var(--text-primary);
}

.wallet-welcome strong {
	color: var(--gold-text);
	font-weight: 700;
}

.wallet-refresh {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--gold-rgb), 0.18);
	border: none;
	border-radius: 50%;
	color: var(--gold-text);
	font-size: 1.375rem;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	flex-shrink: 0;
}

.wallet-refresh:hover {
	color: var(--gold-dark-text);
}

[data-theme="light"] .wallet-refresh {
	background: rgba(var(--gold-rgb), 0.18);
}

.wallet-refresh iconify-icon { display: flex; }

.wallet-divider {
	height: 0.0625rem;
	background: linear-gradient(90deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), 0.18) 35%, rgba(var(--gold-rgb), 0.18) 65%, rgba(var(--gold-rgb), 0) 100%);
	margin-bottom: 0.875rem;
}

.wallet-balance-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.125rem;
}

.wallet-currency {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold-text);
}

.wallet-balance {
	font-size: 2rem;
	font-weight: 800;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.0312rem;
	line-height: 1;
}

.wallet-eye {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--gold-rgb), 0.18);
	border: none;
	border-radius: 50%;
	color: var(--gold-text);
	font-size: 1.125rem;
	cursor: pointer;
}

.wallet-eye iconify-icon { display: flex; }

[data-theme="light"] .wallet-eye {
	background: rgba(var(--gold-rgb), 0.18);
}

.wallet-actions {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: 0.625rem;
	margin: 0.875rem 0 1rem;
}

.wallet-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.5rem;
	border-radius: 62.4375rem;
	font-size: 0.8125rem;
	font-weight: 900;
	border: 0.0625rem solid transparent;
	cursor: pointer;
	white-space: nowrap;
}

.wallet-btn-deposit {
	background: var(--gold-gradient);
	color: var(--text-on-gold);
}

.wallet-btn-withdraw {
	background: transparent;
	color: var(--red-text);
	border-color: var(--red);
}

.wallet-btn-history {
	background: var(--bg-card-alt);
	color: var(--text-primary);
	border-color: var(--border-strong);
}

/* Login CTA (mobile, guest only) */
.login-cta {
	margin: 1rem 0;
	padding: 1.25rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.875rem;
	text-align: center;
}

.login-cta-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 0.375rem 0;
}

.login-cta-text {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	margin: 0 0 0.875rem 0;
}

.login-cta-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
}

.login-cta-btn {
	padding: 0.625rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}

.login-cta-btn-login {
	background: linear-gradient(180deg, #ffd44a, #e8a317);
	color: var(--text-on-gold);
	border: none;
}

.login-cta-btn-register {
	background: transparent;
	color: var(--gold-text);
	border: 0.0625rem solid var(--gold);
}

/* Mobile-only adjustments */
@media (max-width: 48rem) {
	.main-scroll {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Mobile hero: a fixed aspect-ratio box keeps every slide the same size
	   (object-fit: cover) regardless of each image's native ratio. Without it
	   the flex reel stretches to the tallest slide, so a wide banner renders
	   short with empty space below it. The inner track/reel/slide/img inherit
	   height:100% and object-fit:cover from the base rules. */
	.banner {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.live-txn-table thead th,
	.live-txn-table tbody td {
		padding: 0.5rem 0.25rem;
		letter-spacing: 0;
	}

	.live-txn-table thead th {
		font-size: 0.625rem;
	}

	/* Body values (masked accounts, PGK amounts, provider) run ~12 chars; a
	   smaller font + nowrap keeps each on one line in the narrow fixed columns
	   so long amounts like "PGK 20,000.00" don't wrap mid-row. */
	.live-txn-table tbody td {
		font-size: 0.5625rem;
		white-space: nowrap;
	}

	.lucky-draw {
		padding: 1.25rem 0;
	}

	.games-grid {
		gap: 0.75rem;
	}

	.games-status {
		top: 0.7rem;
		right: -2.25rem;
		padding: 0.25rem 0;
		font-size: 0.5rem;
		letter-spacing: 0.03125rem;
	}

	.games-status-exclusive {
		font-size: 0.4375rem;
	}

	.games-card .games-status-maintenance {
		font-size: 0.625rem;
		letter-spacing: 0.125rem;
	}

	.join-steps {
		flex-direction: column;
		padding: 1.25rem 1rem;
	}
}

/* ── Width tuning for the released shell ──
   Every selector here is scoped to .main-scroll. The mobile home view reuses
   the desktop class names verbatim (.banner, .lucky-draw, .games-grid,
   .watch-live-grid and the section titles all appear in BOTH views), so an
   unscoped rule would retune the desktop home page as a side effect.
   .main-scroll exists only in the mobile layout. Only .wallet-actions,
   .games-rail, .games-cat* and .games-panel-title are mobile-only markup and
   appear in no desktop view, but they are scoped too: "no desktop view uses
   this class today" is weaker than a guarantee, and desktop is meant to be
   untouched by this work.
   Card grids become intrinsic rather than fixed-column: auto-fill adapts
   continuously from 320px to 1366px, so there is no dead band between
   breakpoints and iPad split-view / Stage Manager widths are covered for free.
   The minimums are chosen so a phone still resolves to exactly the two columns
   it renders today. */
/* Game tiles stay at two columns at every width — three makes them too small. */
.main-scroll .games-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mobile games section opens on the chip row, not a heading like the sections
   above, so it needs a bigger gap to read as separate from Live Transaction. */
.main-scroll .games {
	margin-top: 3.5rem;
}

/* Three buttons stretched across 1180px look like banners. Cap and centre,
   matching how .refer-actions already handles itself. */
.main-scroll .wallet-actions {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 48rem) {
	/* The narrow-screen block above stops applying here, and there is no base
	   side padding on .main-scroll — without this the content meets the edges. */
	/* Content sits in a centred column capped at 56.25rem (900px); the gutter
	   grows past 1.5rem to absorb the rest. Banner and marquee bleed from the
	   centre line, so they stay full-width. */
	.main-scroll {
		padding-left: max(1.5rem, calc((100% - 56.25rem) / 2));
		padding-right: max(1.5rem, calc((100% - 56.25rem) / 2));
	}

	/* Category chips step up with the wider cards below them. */
	.main-scroll .games-cat  { height: 2.75rem; padding: 0 1.125rem; font-size: 0.8125rem; }
	.main-scroll .games-cat-icon { width: 1.125rem; height: 1.125rem; }

	/* Tablets switch to the desktop art (<picture> in mobile home), so match its 16:5 */
	.main-scroll .banner {
		aspect-ratio: var(--banner-ratio);
	}
}

/* Large tablets / landscape — one more step so a 1180-1366px screen keeps the
   same 3-4 column rhythm instead of drifting back toward a thumbnail sheet. */
/* Type was sized against a 430px column and a ~170px card. The cards are now
   250-380px wide on a tablet, so the same values read as undersized. One step
   at 48rem keeps them in proportion; phones are untouched. */
@media (min-width: 48rem) {
	.main-scroll .watch-live-title,
	.main-scroll .lucky-draw-title,
	.main-scroll .live-txn-title { font-size: 1.25rem; }

	.main-scroll .games-panel-title small { font-size: 0.6875rem; }
}

/* ── Swipeable card rails (Watch Live + Lucky Draw) ──
   Both rows are horizontally snapping rails in the mobile and desktop home
   views, at every width. Native scrolling does the work: momentum on a phone,
   trackpad and shift-scroll on a laptop, arrow keys once focused. No JS, and no
   second slider instance — assets/js/slider.js is a singleton bound to
   .banner-* and cannot be reused here.

   --rail-per-view is how many whole cards fit. The card width subtracts
   --rail-peek so a sliver of the next card always shows; that peek is the only
   thing telling a user the row scrolls, so it is load-bearing, not decoration.
   Per-view steps up with width so cards stay roughly the 150-300px tiles the old
   auto-fill grids produced, rather than 600px slabs on a laptop.

   Unscoped on purpose: these classes appear only in the two home views, and
   both are meant to get the rail. */
.watch-live-grid,
.lucky-draw {
	--rail-per-view: 2;
	--rail-peek: 2rem;
	display: flex;
	gap: var(--rail-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Stop a horizontal swipe from chaining into page scroll or the
	   browser's back gesture once the rail hits its end. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.watch-live-grid { --rail-gap: 0.875rem; }
.lucky-draw      { --rail-gap: 1.25rem; }

.watch-live-grid::-webkit-scrollbar,
.lucky-draw::-webkit-scrollbar {
	display: none;
}

/* N cards plus N gaps fill 100% minus the peek, so card N+1 starts exactly
   --rail-peek from the right edge. Direct children, so the no-id Lucky Draw
   placeholder (a bare <img>) sizes the same as a linked card. */
.watch-live-grid > *,
.lucky-draw > * {
	flex: 0 0 calc((100% - var(--rail-peek)) / var(--rail-per-view) - var(--rail-gap));
	min-width: 0;
	scroll-snap-align: start;
}

/* Home rail only: no play button over the thumbnail (/watch-live keeps it). */
.watch-live-grid .watch-live-play {
	display: none;
}

/* A bare <a> in the old grid; as a flex item it must not collapse around the image. */
.lucky-draw-card-link {
	display: block;
	position: relative;
	overflow: hidden;
}

/* Hover: zoom inside the card + gold ring. Nothing may poke out — the rail
   scrolls on x, which clips y overflow too. Same feel as .watch-live-card. */
.lucky-draw-card-link .lucky-draw-card {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.lucky-draw-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 0.125rem rgba(var(--gold-rgb), 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.lucky-draw-card-link:hover .lucky-draw-card {
		transform: scale(1.06);
		filter: brightness(1.08);
	}

	.lucky-draw-card-link:hover::after {
		opacity: 1;
	}
}

.lucky-draw-card-link:focus-visible {
	outline: none;
}

.lucky-draw-card-link:focus-visible::after {
	opacity: 1;
}

@media (max-width: 48rem) {
	.watch-live-grid,
	.lucky-draw { --rail-gap: 0.75rem; }
}

@media (min-width: 48rem) {
	.watch-live-grid,
	.lucky-draw { --rail-per-view: 3; }
}

@media (min-width: 75rem) {
	.watch-live-grid,
	.lucky-draw { --rail-per-view: 4; }
}

/* Mandatory snap suits a swipe but feels sticky under a trackpad or wheel,
   dragging the row back after every small scroll. Proximity only settles on a
   card edge when the scroll already ends near one. */
@media (hover: hover) and (pointer: fine) {
	.watch-live-grid,
	.lucky-draw { scroll-snap-type: x proximity; }
}

/* ── Rail scroll cues (assets/js/card-rail.js) ──
   The peek alone read as a layout glitch rather than "more this way", so the
   rail also fades out toward any side that still has cards, shows arrows on
   mouse/trackpad devices, and nudges once on touch. A row that fits gets none
   of this.

   Everything here moves continuously. JS writes --rail-fade-left/right every
   frame as the distance to that edge (capped at 48px), so the fades shrink as
   you arrive rather than switching off, and the arrows fade and scale rather
   than popping. */
.card-rail {
	--rail-fade-left: 0px;
	--rail-fade-right: 0px;
	position: relative;
}

/* Mask the rail itself, so the peeking card dissolves into the page. */
.card-rail > :first-child {
	-webkit-mask-image: linear-gradient(to right,
		transparent 0, #000 var(--rail-fade-left),
		#000 calc(100% - var(--rail-fade-right)), transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0, #000 var(--rail-fade-left),
		#000 calc(100% - var(--rail-fade-right)), transparent 100%);
}

.card-rail-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0.0625rem solid var(--border);
	border-radius: 50%;
	background: var(--bg-card);
	color: var(--gold-text);
	font-size: 1.25rem;
	cursor: pointer;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45);

	/* Hidden state. visibility flips only after the fade, so the button stays
	   painted while it fades out and cannot be clicked once gone. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) scale(0.8);
	transition:
		opacity 0.25s ease,
		transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
		background-color 0.2s ease,
		visibility 0s linear 0.25s;
}

.card-rail-arrow.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) scale(1);
	transition:
		opacity 0.25s ease,
		transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
		background-color 0.2s ease,
		visibility 0s;
}

.card-rail-arrow.is-visible:hover {
	background-color: rgba(var(--gold-rgb), 0.18);
	transform: translateY(-50%) scale(1.06);
}

.card-rail-arrow.is-visible:active {
	transform: translateY(-50%) scale(0.94);
	transition-duration: 0.08s;
}

.card-rail-arrow--prev { left: 0.5rem; }
.card-rail-arrow--next { right: 0.5rem; }

/* Touch devices swipe; arrows there would only sit on top of the cards. */
@media (hover: none) {
	.card-rail-arrow { display: none; }
}

/* One-time "there's more" hint on touch: ease left, then glide back. No
   overshoot — a bounce read as a glitch. */
@keyframes card-rail-nudge {
	0% {
		transform: translateX(0);
		animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
	}
	40% {
		transform: translateX(-1.75rem);
		animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1);
	}
	100% {
		transform: translateX(0);
	}
}

.card-rail > .is-nudging > * {
	animation: card-rail-nudge 1.2s both;
	will-change: transform;
}

/* ── Wide-screen proportions (found by rendering every mobile page at 820/1180) ── */

/* Game tiles: provider art is designed at 625×323 (9 of the 11 current images),
   but one upload (HB_apollo777.jpg) is a 640×800 portrait photo, which made its
   whole row several times taller than the rest. Pin the tile to the design ratio
   so a wrong-shaped upload crops instead of breaking the grid. */
.main-scroll .games-card-img {
	aspect-ratio: 625 / 323;
	object-fit: cover;
}