/*
   Slot page styles.
   Desktop rules scoped under .d-content, mobile under .slot-wrap —
   both device views reuse the same .slot-* class names with different values.
*/

/* Section nav (Slot / Live Casino / Sports) — shared/_section_switch.php, on all three
   pages, both devices. Raised casino buttons; the current page is the gold one. */
/* Flex-wrap: one row while every label fits, a second row on screens too narrow for that */
.sect-switch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centres a wrapped button */
	gap: 0.5rem;
	margin: 0.25rem 0 1.125rem; /* + .slot-wrap top padding = equal space above and below */
}

.sect-switch-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4375rem;
	flex: 1 1 0;
	min-width: max-content; /* never truncate the label — wrap instead */
	max-width: calc(50% - 0.25rem); /* half width at most, so a wrapped button matches the row above */
	height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid #6b5520;
	border-radius: 0.625rem;
	background: linear-gradient(180deg, #2b2b36 0%, #15151c 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.5), 0 3px 0 #0a0a0f;
	color: var(--gold-light-text);
	font-family: var(--font-brand);
	font-size: 0.78125rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.15s, transform 0.1s, box-shadow 0.1s;
}

.sect-switch-btn iconify-icon {
	flex-shrink: 0;
	font-size: 1.1875rem;
}

.sect-switch-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sect-switch-btn:hover {
	filter: brightness(1.2);
}

/* Pressed: sinks into its bottom edge */
.sect-switch-btn:active {
	transform: translateY(2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #0a0a0f;
}

.sect-switch-btn.is-active {
	border-color: #8a5d00;
	background: linear-gradient(180deg, #fff1b0 0%, #f5c542 45%, #c8900c 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #7a5000, 0 0 1rem rgba(var(--gold-rgb), 0.35);
	color: #3a1d00;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Light theme — ivory buttons with deep-gold text; the gold current-page button is unchanged */
[data-theme="light"] .sect-switch-btn:not(.is-active) {
	border-color: rgba(200, 150, 12, 0.45);
	background: linear-gradient(180deg, #ffffff 0%, #f6f1e3 100%);
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(200, 150, 12, 0.12), 0 3px 0 #e2d6b4;
	color: #8a5d00;
}

[data-theme="light"] .sect-switch-btn:not(.is-active):active {
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(200, 150, 12, 0.12), 0 1px 0 #e2d6b4;
}

[data-theme="light"] .sect-switch-btn:not(.is-active):hover {
	filter: brightness(0.97);
}

.d-content .sect-switch {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.875rem;
	margin: 1.5rem 0; /* .d-content has no top padding */
}

.d-content .sect-switch-btn {
	max-width: none;
	height: 3.25rem;
	font-size: 0.9375rem;
}

.d-content .sect-switch-btn iconify-icon {
	font-size: 1.375rem;
}

/* Desktop */

/* Full-bleed hero. The artwork (public/banners/*.png, 1920×600) already carries
   the LuckyBet777 logo and the section wordmark, so the hero is just the image. */
.d-content .slot-hero {
	position: relative;
	aspect-ratio: var(--banner-ratio);
	margin: 0 var(--shell-bleed) 1.75rem;
	overflow: hidden;
	background-image: url('../../../public/banners/slot.png');
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-lg);
}

/* Bottom fade — dissolves the artwork's base into the page */
.d-content .slot-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 87%, var(--bg-base) 100%);
	pointer-events: none;
}

.d-content .slot-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--gold-rgb), 0.22) 0%, transparent 60%);
	pointer-events: none;
}

/* Layout: provider rail + content */
.d-content .slot-layout {
	display: grid;
	grid-template-columns: 13rem 1fr;
	gap: 1.5rem;
	align-items: start;
}

/* Provider rail */
.d-content .slot-providers {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.d-content .slot-provider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	color: var(--text-secondary);
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.5rem;
	cursor: pointer;
	overflow: hidden;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.d-content .slot-provider:hover {
	color: var(--text-primary);
	background: var(--bg-card-hover);
}

.d-content .slot-provider.is-active {
	color: var(--text-primary);
	background: var(--bg-card-alt);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-glow);
}

.d-content .slot-provider-icon {
	width: 3.5rem;
	height: 2rem;
	object-fit: contain;
	flex-shrink: 0;
}

.d-content .slot-provider-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Toolbar: search, with the gamelist category tabs stacked under it */
.d-content .slot-toolbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	margin-bottom: 1.5rem;
}

/* Category tabs + grid/list toggle on one row; the tabs scroll sideways so the
   toggle always keeps its place at the right end. */
.d-content .slot-filter-row,
.slot-wrap .slot-filter-row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.d-content .slot-filter-row {
	align-self: stretch;
	/* The controls take their height from this row (no vertical padding), so set
	   it — without it the row shrank to ~31px. Matches mobile. */
	height: 2.5rem;
}

/* Mobile: search on its own row, the controls on the row beneath it (.slot-toolbar
   is a column). Kept as a real nowrap row rather than flattened into the toolbar
   with display:contents — in a wrapping container the toggle drops to a third
   line as soon as the controls no longer fit, instead of the category label
   giving way, and nothing can shrink to prevent it. */
.slot-wrap .slot-filter-row {
	flex-wrap: nowrap;
	align-items: center;
}

.slot-wrap .slot-filter-row .slot-sort,
.slot-wrap .slot-filter-row .slot-view-toggle {
	height: 2.5rem;
	margin-left: 0;
}

/* Filters sit together at the left, the view toggle holds the right gutter, and
   the slack falls between them — the controls keep their natural size instead of
   one being stretched to fill the row. Works the same whether or not the
   category picker is there (a provider with one category and no new/hot split
   gets none): whatever is present starts at the left, the toggle stays right. */
.slot-wrap .slot-filter-row .slot-view-toggle {
	margin-left: auto;
}

.slot-wrap .slot-filter-row .slot-cat .custom-select-trigger,
.slot-wrap .slot-filter-row .slot-sort .custom-select-trigger,
.slot-wrap .slot-filter-row .slot-view-toggle {
	border-radius: 62.4375rem;
}

/* The category dropdown joins the sort and view toggle on the controls row now
   that it is a control rather than a full-width tab strip. It sizes to its
   label like the sort does, but it is the one that gives when the row runs out
   of room on a narrow phone: category names are the long ones ("Table Games"),
   so it shrinks and the component's own ellipsis takes over. */
.slot-wrap .slot-filter-row .slot-cat {
	height: 2.5rem;
	flex: 0 1 auto;
	min-width: 0;
}

/* Sort — the shared custom_select component (components/custom-select.css),
   sized to content and stretched to the row height; it and the
   grid/list toggle sit together at the row's right end. */
.d-content .slot-sort,
.slot-wrap .slot-sort {
	flex-shrink: 0;
	width: auto;
	margin-left: auto;
}

/* Category — the same component, sized the same way, so every shared rule below
   lists the two together. It keeps the left end of the row (where the tab strip
   used to start); the sort's margin-left:auto pushes sort + toggle to the right. */
.d-content .slot-cat,
.slot-wrap .slot-cat {
	flex-shrink: 0;
	width: auto;
}

/* Roomier than the --sm default: these sit on a bare toolbar rather than in a
   form, so the label wants air around it and between it and the caret. Vertical
   size still comes from the row height, so only padding-x is set. */
.d-content .slot-cat .custom-select-trigger,
.slot-wrap .slot-cat .custom-select-trigger,
.d-content .slot-sort .custom-select-trigger,
.slot-wrap .slot-sort .custom-select-trigger {
	height: 100%;
	gap: 0.625rem;
	padding: 0 1.125rem;
	border-radius: 0.625rem;
}

.slot-wrap .slot-cat .custom-select-trigger,
.slot-wrap .slot-sort .custom-select-trigger {
	gap: 0.5rem;
	padding: 0 0.9375rem;
	font-size: 0.75rem;
}

/* Under ~360px the extra padding costs more than it gives: three controls share
   the row, so it comes straight out of the category label until even the default
   "All Games" ellipsizes. Trim it back on those screens only. */
@media (max-width: 22.5rem) {
	.slot-wrap .slot-cat .custom-select-trigger,
	.slot-wrap .slot-sort .custom-select-trigger {
		gap: 0.375rem;
		padding: 0 0.5rem;
	}
}

/* The panel matches the trigger's width by default; let long labels fit. */
.d-content .slot-sort .custom-select-panel,
.slot-wrap .slot-sort .custom-select-panel {
	left: auto;
	min-width: 100%;
	white-space: nowrap;
}

/* Category names run longer than the trigger ("Fishing Games", "Table Games"),
   and each row carries a count pill, so let the panel outgrow the trigger.
   It hangs from the left edge, the side the control sits on. */
.d-content .slot-cat .custom-select-panel,
.slot-wrap .slot-cat .custom-select-panel {
	right: auto;
	min-width: 100%;
	width: max-content;
	max-width: min(18rem, 80vw);
}

/* Rows matched to the roomier triggers above — the default --sm padding reads
   cramped under them, and the extra width also separates the label from its
   count pill. */
.d-content .slot-cat .custom-select-option,
.slot-wrap .slot-cat .custom-select-option,
.d-content .slot-sort .custom-select-option,
.slot-wrap .slot-sort .custom-select-option {
	gap: 0.75rem;
	padding: 0.6875rem 1.125rem;
}

/* Grid / list toggle — matches the live-dev lobby's .glby-toggle: a rounded,
   gold-hairline box of two flush icon buttons; the active one is filled with
   the gold gradient. Stretched to the controls row's height. */
.d-content .slot-view-toggle,
.slot-wrap .slot-view-toggle {
	display: flex;
	flex-shrink: 0;
	overflow: hidden;
	background: rgba(20, 16, 10, 0.72);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.12);
	border-radius: 0.75rem;
}

[data-theme="light"] .d-content .slot-view-toggle,
[data-theme="light"] .slot-wrap .slot-view-toggle {
	background: var(--bg-card-alt);
	border-color: rgba(0, 0, 0, 0.15);
}

/* live-dev's tan icon is under 3:1 on the light background */
[data-theme="light"] .d-content .slot-view-btn:not(.is-active),
[data-theme="light"] .slot-wrap .slot-view-btn:not(.is-active) {
	color: var(--text-secondary);
}

/* Flush edge to edge, no radius of their own: the active button's gold fill runs
   to the track's inside edge and the track's overflow:hidden rounds the outer
   corners — live-dev's .glby-toggle (11px 13px, 15px) rather than two inset
   pills. Vertical size comes from the track's height, so only padding-x here. */
.d-content .slot-view-btn,
.slot-wrap .slot-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.8125rem;
	font-size: 0.9375rem;
	color: #9a8f78;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.slot-wrap .slot-view-btn {
	padding: 0 0.6875rem;
	font-size: 0.875rem;
}

.d-content .slot-view-btn:not(.is-active):hover,
.slot-wrap .slot-view-btn:not(.is-active):hover {
	color: var(--text-primary);
}

.d-content .slot-view-btn.is-active,
.slot-wrap .slot-view-btn.is-active {
	color: #2a1c00;
	background: linear-gradient(180deg, #f5c451, #e8a93a);
}

/* Game count — a small pill on each dropdown row, like the live-dev lobby's .cnt.
   .custom-select-option-label is flex:1, so the pill is pushed to the row's end. */
.d-content .slot-tab-count,
.slot-wrap .slot-tab-count {
	display: inline-block;
	min-width: 1.625rem;
	margin-left: 0.375rem;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	vertical-align: middle;
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 62.4375rem;
}

.slot-wrap .slot-tab-count {
	min-width: 1.375rem;
	margin-left: 0.3125rem;
	padding: 0.0625rem 0.375rem;
	font-size: 0.6875rem;
}

/* No check mark here: the gold fill and left bar already mark the selected row,
   and the tick ran into long labels ("Name A - Z"). */
.d-content .slot-cat .custom-select-option.is-selected::after,
.slot-wrap .slot-cat .custom-select-option.is-selected::after,
.d-content .slot-sort .custom-select-option.is-selected::after,
.slot-wrap .slot-sort .custom-select-option.is-selected::after {
	content: none;
}

/* On the selected row the pill sits on a gold tint — a neutral dark fill keeps
   it legible where the white one washed out. */
.d-content .slot-cat .custom-select-option.is-selected .slot-tab-count,
.slot-wrap .slot-cat .custom-select-option.is-selected .slot-tab-count {
	color: inherit;
	background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .d-content .slot-tab-count,
[data-theme="light"] .slot-wrap .slot-tab-count {
	background: rgba(0, 0, 0, 0.08);
}

.d-content .slot-search {
	position: relative;
	width: 16rem;
}

.d-content .slot-search input {
	width: 100%;
	padding: 0.625rem 1rem 0.625rem 2.625rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: var(--text-primary);
	background: var(--bg-field);
	border: 0.0625rem solid var(--border-field);
	border-radius: 62.4375rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* --text-secondary, not --text-muted: muted is under 3:1 on the card in both themes */
.d-content .slot-search input::placeholder {
	color: var(--text-secondary);
}

.d-content .slot-search input:focus {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-glow);
}

.d-content .slot-search-icon {
	position: absolute;
	left: 0.9375rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--text-secondary);
	font-size: 1.125rem;
	pointer-events: none;
}

/* Game grid */
.d-content .slot-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.75rem;
}

.d-content .slot-card {
	cursor: pointer;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.875rem;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s;
}

.d-content .slot-card:hover {
	transform: translateY(-0.25rem);
}

.d-content .slot-card-media {
	position: relative;
	overflow: hidden;
}

.d-content .slot-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.25s;
}

.d-content .slot-card:hover .slot-card-thumb {
	transform: scale(1.03);
}

/* Hover overlay + Play Now */
.d-content .slot-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 13, 0.62);
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.d-content .slot-card:hover .slot-card-overlay {
	opacity: 1;
	transform: translateY(0);
}

/* Extends .btn-gold — pill radius + slide-up entrance */
.d-content .slot-card-play {
	padding: 0.625rem 1.5rem;
	border-radius: 62.4375rem;
	opacity: 0;
	transform: translateY(1rem);
	transition: transform 0.3s ease 0.05s, opacity 0.3s ease 0.05s;
}

.d-content .slot-card:hover .slot-card-play {
	opacity: 1;
	transform: translateY(0);
}

.d-content .slot-card-fav {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(0, 0, 0, 0.45);
	border: 0.0625rem solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(0.25rem);
	cursor: pointer;
	transition: background 0.15s, transform 0.15s, color 0.15s;
}

.d-content .slot-card-fav:hover {
	background: rgba(0, 0, 0, 0.65);
	transform: scale(1.08);
}

.d-content .slot-card-fav iconify-icon {
	font-size: 1.125rem;
}

.d-content .slot-card-fav.is-fav {
	color: #ff4d6d;
}

/* Card info (bottom) */
.d-content .slot-card-info {
	padding: 0.75rem 0.75rem 0.875rem;
}

.d-content .slot-card-title {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.d-content .slot-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.d-content .slot-card-rtp b {
	color: #34d399;
	font-weight: 700;
}

.d-content .slot-card-count {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
}

.d-content .slot-card-count::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0.375rem #34d399;
}

.d-content .slot-empty {
	grid-column: 1 / -1;
	padding: 3rem 0;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Coming-soon text panel — larger, bolder than the standard empty-state text. */
.slot-coming-soon .slot-empty {
	font-size: 1.75rem;
	font-weight: 700;
	padding: 4rem 0;
}

@media (max-width: 64rem) {
	.d-content .slot-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile */

.slot-wrap {
	padding: 0.875rem;
}

.slot-wrap .slot-hero {
	position: relative;
	aspect-ratio: var(--banner-ratio);
	margin: 0 var(--shell-bleed) 1.25rem;
	overflow: hidden;
	background-image: url('../../../public/banners/slot.png');
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-md);
}

/* Bottom fade — dissolves the artwork's base into the page */
.slot-wrap .slot-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 87%, var(--bg-base) 100%);
	pointer-events: none;
}

/* Light theme: no fade (both devices) — dark art fading into a light page smudges grey */
[data-theme="light"] .slot-hero::after {
	display: none;
}

.slot-wrap .slot-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(var(--gold-rgb), 0.22) 0%, transparent 60%);
	pointer-events: none;
}

/* Provider rail (horizontal scroll) */
/* Horizontal scroll rail wrapper — holds the side arrows that scroll the rail.
   Arrows appear only when there's more to scroll that way (toggled by
   slot-mobile.js via .can-scroll-left / .can-scroll-right). */
.slot-wrap .slot-rail {
	position: relative;
	margin-bottom: 0.875rem;
}

.slot-wrap .slot-rail-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	padding: 0;
	color: var(--gold-text);
	font-size: 1rem;
	background: var(--bg-card);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.45);
	border-radius: 50%;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.slot-wrap .slot-rail-arrow:active {
	background: var(--bg-card-alt);
}

.slot-wrap .slot-rail-arrow--prev {
	left: -0.375rem;
}

.slot-wrap .slot-rail-arrow--next {
	right: -0.375rem;
}

.slot-wrap .slot-rail.can-scroll-left .slot-rail-arrow--prev,
.slot-wrap .slot-rail.can-scroll-right .slot-rail-arrow--next {
	opacity: 1;
	pointer-events: auto;
}

.slot-wrap .slot-providers {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.slot-wrap .slot-providers::-webkit-scrollbar {
	display: none;
}

.slot-wrap .slot-provider {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	width: 4.5rem;
	padding: 0.625rem 0.25rem;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--text-secondary);
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.5rem;
	cursor: pointer;
	overflow: hidden;
}

.slot-wrap .slot-provider.is-active {
	color: var(--text-primary);
	background: var(--bg-card-alt);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-glow);
}

.slot-wrap .slot-provider-icon {
	width: 3.25rem;
	height: 1.75rem;
	object-fit: contain;
}

/* Light theme: logos are drawn for dark — faint edge so pale ones hold up */
[data-theme="light"] .slot-provider-icon {
	filter: drop-shadow(0 0 0.0625rem rgba(0, 0, 0, 0.6));
}

/* Single-colour white logos — render black on light. Add slugs here. */
[data-theme="light"] .slot-provider[data-provider="besoft"] .slot-provider-icon {
	filter: brightness(0);
}

.slot-wrap .slot-provider-name {
	width: 100%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tabs */
.slot-wrap .slot-tabs {
	margin-bottom: 0.875rem;
}

/* Toolbar: search, then category tabs + grid/list toggle */
/* Two stacked rows: the search, then the filter controls. */
.slot-wrap .slot-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/* Own row (the toolbar above stacks it over the controls). It used to share the
   top row with the sort and view toggle, which worked while the category picker
   was a full-width tab strip below; as a dropdown the picker joins that row, and
   four controls at 390px squeezed the search to 57px. */
.slot-wrap .slot-search {
	position: relative;
	min-width: 0;
}

.slot-wrap .slot-search input {
	width: 100%;
	height: 2.5rem;
	padding: 0.625rem 1rem 0.625rem 2.625rem;
	font-size: 0.8125rem;
	color: var(--text-primary);
	background: var(--bg-field);
	border: 0.0625rem solid var(--border-field);
	border-radius: 62.4375rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.slot-wrap .slot-search input::placeholder {
	color: var(--text-secondary);
}

.slot-wrap .slot-search input:focus {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-glow);
}

.slot-wrap .slot-search-icon {
	position: absolute;
	left: 0.9375rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--text-secondary);
	font-size: 1.125rem;
	pointer-events: none;
}

/* Game grid */
.slot-wrap .slot-grid {
	display: grid;
	/* auto-fill/auto-fit: adapts continuously instead of snapping at a
	   breakpoint, so split-view and Stage Manager widths are covered too.
	   Minimum sized against this grid's real container so a phone keeps the
	   column count it renders today. */
	grid-template-columns: repeat(auto-fill, minmax(clamp(10rem, 33vw, 19rem), 1fr));
	gap: 0.75rem;
}

.slot-wrap .slot-card {
	min-width: 0;
	cursor: pointer;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s, border-color 0.18s;
}

/* Tap-active mirrors desktop hover (no hover on touch) */
.slot-wrap .slot-card.is-showing {
	transform: translateY(-0.25rem);
	border-color: var(--border-strong);
}

.slot-wrap .slot-card-media {
	position: relative;
	overflow: hidden;
}

.slot-wrap .slot-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.25s;
}

.slot-wrap .slot-card.is-showing .slot-card-thumb {
	transform: scale(1.03);
}

/* Overlay + Play Now */
.slot-wrap .slot-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 13, 0.62);
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.slot-wrap .slot-card.is-showing .slot-card-overlay {
	opacity: 1;
	transform: translateY(0);
}

/* Extends .btn-gold — pill radius, smaller, slide-up entrance */
.slot-wrap .slot-card-play {
	padding: 0.4375rem 0.875rem;
	font-size: 0.6875rem;
	border-radius: 62.4375rem;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: transform 0.3s ease 0.05s, opacity 0.3s ease 0.05s;
}

.slot-wrap .slot-card.is-showing .slot-card-play {
	opacity: 1;
	transform: translateY(0);
}

.slot-wrap .slot-card-fav {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(0, 0, 0, 0.45);
	border: 0.0625rem solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(0.25rem);
	cursor: pointer;
}

.slot-wrap .slot-card-fav iconify-icon {
	font-size: 1rem;
}

.slot-wrap .slot-card-fav.is-fav {
	color: #ff4d6d;
}

/* Card info (bottom) */
.slot-wrap .slot-card-info {
	padding: 0.5rem 0.5rem 0.625rem;
}

.slot-wrap .slot-card-title {
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-wrap .slot-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.375rem;
	font-size: 0.625rem;
	color: var(--text-secondary);
}

.slot-wrap .slot-card-rtp b {
	color: #34d399;
	font-weight: 700;
}

.slot-wrap .slot-card-count {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.slot-wrap .slot-card-count::before {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0.3125rem #34d399;
}

.slot-wrap .slot-empty {
	grid-column: 1 / -1;
	padding: 2.5rem 0;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.8125rem;
}

/* Provider status ribbons (shared) — diagonal banner across the top-right corner */

.slot-status {
	position: absolute;
	top: 0.7rem;
	right: -1.7rem;
	z-index: 2;
	width: 6rem;
	padding: 0.25rem 0;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	transform: rotate(45deg);
	pointer-events: none;
}

/* "Exclusive" is long — shrink it to fit the diagonal */
.slot-status--exclusive {
	font-size: 0.5rem;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(107deg, #c0392b 0%, #8e1010 100%);
}

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

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

/* Maintenance: unavailable, dim the card, center a wrench on a diamond backdrop */
.slot-provider:disabled {
	cursor: not-allowed;
}

.slot-provider-maint {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 13, 0.6);
	pointer-events: none;
}

/* Inline app-game login form (918Kaya / Mega888 / LuckyBet777) — replaces the
   card; spans the full grid row so the credentials/start/download fit. */

/* App-game forms live in the content area, not the card grid. The provider rail
   reveals one (replacing the cards) when its game is selected. */
.slot-appforms {
	display: none;
}

.slot-appforms.is-open {
	display: block;
}

.slot-appform {
	background: var(--bg-card);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.45);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.slot-appform-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1rem;
	border-bottom: 0.0625rem solid rgba(var(--gold-rgb), 0.18);
}

.slot-appform-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
}

.slot-appform-tag {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gold-text);
}

.slot-appform-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	font-size: 1.25rem;
	cursor: pointer;
}

.slot-appform-section {
	padding: 0.875rem 1rem;
}

/* Sections are separated by a hairline, not boxed — so the whole thing reads
   as ONE form rather than several stacked panels. */
.slot-appform-section+.slot-appform-section {
	border-top: 0.0625rem solid rgba(var(--gold-rgb), 0.12);
}

.slot-appform-section-title {
	position: relative;
	padding-left: 0.625rem;
	margin-bottom: 0.25rem;
	color: var(--gold-text);
	font-weight: 800;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.slot-appform-section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	bottom: 0.1rem;
	width: 0.1875rem;
	border-radius: 0.375rem;
	background: rgba(var(--gold-rgb), 0.9);
}

.slot-appform-label {
	display: block;
	margin: 0.625rem 0 0.25rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.slot-appform-field {
	display: flex;
	gap: 0.5rem;
}

.slot-appform-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-primary);
	background: var(--bg-base);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.45);
	border-radius: 0.5rem;
	outline: none;
}

/* Mobile/shared form copy button (desktop uses the .btn-gold-outline component). */
.slot-wrap .slot-appform-copy {
	flex: 0 0 auto;
	padding: 0.5rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-primary);
	background: rgba(var(--gold-rgb), 0.16);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.45);
	border-radius: 0.5rem;
	cursor: pointer;
}

.slot-appform-start {
	display: block;
	width: 100%;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
}

.slot-appform-start[disabled],
.slot-appform-start.is-loading,
.slot-appform-start.is-launching,
.slot-appform-start.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.slot-appform-start-img {
	display: block;
	width: 100%;
	height: auto;
}

.slot-appform-muted {
	margin-top: 0.375rem;
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.slot-appform-downloads {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	margin-top: 0.625rem;
}

.slot-appform-dl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-primary);
	background: var(--bg-card-alt);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.5rem;
	text-decoration: none;
}

.slot-appform-dl.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

.slot-appform-notes {
	margin: 0.625rem 0 0;
	padding-left: 1.125rem;
}

.slot-appform-notes li {
	margin-bottom: 0.3125rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--text-secondary);
}

/* Desktop app-game form — credentials/download panel (new design).
   Scoped to .d-content so the shared mobile form (slot-wrap) keeps the old layout. */
.d-content .slot-appform {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

/* Panel — capped and centred. The promo card used to take the left 20rem of
   this row, so the panel sat at ~700px and its internals (2-up credentials,
   3-up downloads, the 3:1 Start banner) are tuned for that. Alone in the row
   it stretched to ~1040px at 1440. The cap holds it near the designed width;
   60rem leaves ~64px either side at 1440, close enough to the provider rail
   to read as one row rather than two islands. */
.d-content .slot-appform-panel {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 60rem;
	margin-inline: auto;
	padding: 1.5rem;
	background: var(--bg-card);
	border: 0.0625rem solid rgba(255, 255, 255, 0.25);
	border-radius: 0.875rem;
	box-shadow: var(--shadow-md);
}

/* Match the deposit card border: white on dark, black on light. */
[data-theme="light"] .d-content .slot-appform-panel {
	border-color: rgba(0, 0, 0, 0.25);
}

.d-content .slot-appform-panel .slot-appform-section {
	padding: 0;
}

/* Start Game artwork is a 7.9:1 image (1130x143). Left to fill the panel it
   becomes a ~115px-tall bar with a long empty stretch between the rocket and
   the arrow, so cap it near the width it had beside the promo and centre it. */
.d-content .slot-appform-start {
	align-self: center;
	width: 100%;
	max-width: 44rem;
}

.d-content .slot-appform-panel .slot-appform-section+.slot-appform-section {
	border-top: 0;
}

.d-content .slot-appform-section-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

/* Override the shared title's left gold bar — desktop uses a leading icon instead.
   White label with a larger gold icon, uniform across all section headers. */
.d-content .slot-appform-section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0;
	margin-bottom: 0;
	color: var(--text-primary);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.d-content .slot-appform-section-title::before {
	display: none;
}

.d-content .slot-appform-section-title iconify-icon {
	font-size: 1.25rem;
	color: var(--gold-text);
}

.d-content .slot-appform-secure {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	color: var(--text-label);
}

.d-content .slot-appform-secure iconify-icon {
	font-size: 0.875rem;
}

/* Guest locked state — replaces the credential boxes; whole card opens login. */
.d-content .slot-appform-locked {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem;
	text-align: left;
	background: var(--bg-base);
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.625rem;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.d-content .slot-appform-locked:not(.slot-appform-locked--info):hover {
	border-color: rgba(var(--gold-rgb), 0.55);
}

/* Info variant — logged-in member with no account yet; not clickable. */
.d-content .slot-appform-locked--info {
	cursor: default;
}

.d-content .slot-appform-locked-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.5rem;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.12);
	border-radius: 50%;
}

.d-content .slot-appform-locked-text {
	flex: 1 1 auto;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

.d-content .slot-appform-locked-cta {
	flex: 0 0 auto;
	padding: 0.5rem 1.375rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--text-on-gold);
	background: var(--gold-gradient);
	border-radius: 0.5rem;
}

/* Credentials — minmax(0, …) for the same min-content reason as the mobile
   pair below; the columns are wide enough here that it never bites, but a
   bare 1fr would break the same way if this panel ever narrowed. */
.d-content .slot-appform-creds {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.875rem;
}

.d-content .slot-appform-cred {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.875rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
}

.d-content .slot-appform-cred-label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.d-content .slot-appform-cred-label iconify-icon {
	font-size: 1.25rem;
	color: var(--gold-text);
}

.d-content .slot-appform-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* The cred box provides the frame, so the value reads as plain text inside it. */
.d-content .slot-appform-input {
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-primary);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.d-content .slot-appform-eye {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--text-secondary);
	background: transparent;
	border: 0;
	font-size: 1.125rem;
	cursor: pointer;
}

.d-content .slot-appform-eye:hover {
	color: var(--gold-text);
}

/* Layout only — .btn-gold-outline (components/buttons.css) drives the look. */
.d-content .slot-appform-copy {
	flex: 0 0 auto;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
}

.d-content .slot-appform-msg:empty {
	display: none;
}

/* Download app */
.d-content .slot-appform-downloads {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
}

.d-content .slot-appform-dl {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 0.375rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
	color: var(--text-primary);
	text-decoration: none;
}

.d-content .slot-appform-dl-os {
	font-size: 3.25rem;
	color: var(--text-secondary);
}

.d-content .slot-appform-dl-os--android {
	font-size: 3.5rem;
	color: #a4c639;
}

.d-content .slot-appform-dl-os--apple {
	font-size: 3.25rem;
	color: var(--text-primary);
}

/* 5.5rem wrapped "Download iOS App" onto two lines while "Download APK" fit,
   so the two cards sat at different heights. 8rem clears the longest label and
   still leaves room beside the 3.5rem OS icon in a 222px card. */
.d-content .slot-appform-dl-text {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	max-width: 8rem;
	gap: 0.25rem;
	line-height: 1.25;
}

.d-content .slot-appform-dl-text b {
	font-size: 0.8125rem;
	font-weight: 700;
}

.d-content .slot-appform-dl-text small {
	font-size: 0.6875rem;
	color: var(--text-secondary);
}

.d-content .slot-appform-dl-go {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	font-size: 1.375rem;
	color: var(--text-primary);
}

.d-content .slot-appform-qr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.5rem 0.375rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
}

.d-content .slot-appform-qr-img {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	padding: 0.1875rem;
	border-radius: 0.375rem;
	background: #fff;
	overflow: hidden;
}

.d-content .slot-appform-qr-img canvas,
.d-content .slot-appform-qr-img img {
	width: 100%;
	height: 100%;
	display: block;
}

.d-content .slot-appform-qr-text {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	font-size: 0.6875rem;
	line-height: 1.3;
	gap: 0.25rem;
	color: var(--text-secondary);
}

.d-content .slot-appform-qr-text b {
	font-size: 0.75rem;
	color: var(--gold-text);
}

/* Visible border on every content card, matching the form's outer cards. */
.d-content .slot-appform-locked,
.d-content .slot-appform-cred,
.d-content .slot-appform-dl,
.d-content .slot-appform-qr,
.d-content .slot-appform-notes-wrap {
	border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .d-content .slot-appform-locked,
[data-theme="light"] .d-content .slot-appform-cred,
[data-theme="light"] .d-content .slot-appform-dl,
[data-theme="light"] .d-content .slot-appform-qr,
[data-theme="light"] .d-content .slot-appform-notes-wrap {
	border-color: rgba(0, 0, 0, 0.25);
}

/* Important notes (collapsible) — styled like the deposit guide (.d-guide).
   border-color comes from the shared content-card rule above. */
.d-content .slot-appform-notes-wrap {
	background: var(--bg-base);
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.625rem;
}

.d-content .slot-appform-notes-wrap>summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.125rem;
	cursor: pointer;
	list-style: none;
	color: var(--text-primary);
	font-weight: 600;
	font-size: 0.875rem;
}

.d-content .slot-appform-notes-wrap>summary::-webkit-details-marker {
	display: none;
}

.d-content .slot-appform-notes-wrap>summary>iconify-icon:first-of-type {
	color: var(--gold-text);
	font-size: 1.375rem;
}

.d-content .slot-appform-notes-wrap>summary>span {
	flex: 1;
}

.d-content .slot-appform-notes-caret {
	color: var(--text-secondary);
	transition: transform 0.2s;
}

.d-content .slot-appform-notes-wrap[open] .slot-appform-notes-caret {
	transform: rotate(180deg);
}

.d-content .slot-appform-notes-wrap .slot-appform-notes {
	margin: 0;
	padding: 0 1.125rem 1rem 2.5rem;
	list-style: disc;
}

/* Description slightly lighter than the shared --text-secondary. */
.d-content .slot-appform-notes li {
	color: var(--text-label);
}

/* ===========================================================================
   Mobile app-game form — same markup/design as desktop (.d-content), tuned for
   a single narrow column. Scoped to .slot-wrap; overrides the old shared rules
   above. Keep visually in step with the .d-content block.
   =========================================================================== */
.slot-wrap .slot-appform {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

/* Panel */
.slot-wrap .slot-appform-panel {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: 1.25rem;
	background: var(--bg-card);
	border: 0.0625rem solid rgba(255, 255, 255, 0.25);
	border-radius: 0.875rem;
	box-shadow: var(--shadow-md);
}

[data-theme="light"] .slot-wrap .slot-appform-panel {
	border-color: rgba(0, 0, 0, 0.25);
}

.slot-wrap .slot-appform-panel .slot-appform-section {
	padding: 0;
}

/* Start Game artwork is a 3:1 image (300x100). At full panel width it grows
   ~125px tall on a phone and far more on wider shells, so cap it near its
   native width and centre it — max ~96px tall, and no upscaling blur. */
.slot-wrap .slot-appform-start {
	align-self: center;
	max-width: 18rem;
}

.slot-wrap .slot-appform-panel .slot-appform-section+.slot-appform-section {
	border-top: 0;
}

.slot-wrap .slot-appform-section-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem 0.75rem;
	margin-bottom: 0.875rem;
}

/* White label with a leading gold icon (no left bar) — matches desktop. */
.slot-wrap .slot-appform-section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0;
	margin-bottom: 0;
	color: var(--text-primary);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.slot-wrap .slot-appform-section-title::before {
	display: none;
}

.slot-wrap .slot-appform-section-title iconify-icon {
	font-size: 1.125rem;
	color: var(--gold-text);
}

.slot-wrap .slot-appform-secure {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.625rem;
	color: var(--text-label);
}

.slot-wrap .slot-appform-secure iconify-icon {
	font-size: 0.8125rem;
}

/* Guest locked state — replaces the credential boxes; whole card opens login. */
.slot-wrap .slot-appform-locked {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.875rem 1rem;
	text-align: left;
	background: var(--bg-base);
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.625rem;
	cursor: pointer;
}

/* Info variant — logged-in member with no account yet; not clickable. */
.slot-wrap .slot-appform-locked--info {
	cursor: default;
}

.slot-wrap .slot-appform-locked-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.25rem;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.12);
	border-radius: 50%;
}

.slot-wrap .slot-appform-locked-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

.slot-wrap .slot-appform-locked-cta {
	flex: 0 0 auto;
	padding: 0.4375rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--text-on-gold);
	background: var(--gold-gradient);
	border-radius: 0.5rem;
}

/* Credentials — stacked single column on mobile.
   minmax(0, …), not a bare 1fr: 1fr means minmax(auto, 1fr), and that auto
   floor is the item's min-content — here the input's default intrinsic width
   (~191px) plus the Copy button, so the box refused to go under ~289px and
   hung off the right edge below ~390px. min-width:0 on the input doesn't
   reach this; the floor belongs to the grid item, not the flex row. */
.slot-wrap .slot-appform-creds {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.slot-wrap .slot-appform-cred {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
}

.slot-wrap .slot-appform-cred-label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.slot-wrap .slot-appform-cred-label iconify-icon {
	font-size: 1.125rem;
	color: var(--gold-text);
}

.slot-wrap .slot-appform-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* The cred box provides the frame, so the value reads as plain text inside it. */
.slot-wrap .slot-appform-input {
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.slot-wrap .slot-appform-eye {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-right: 0.375rem;
	color: var(--text-secondary);
	background: transparent;
	border: 0;
	font-size: 1.125rem;
	cursor: pointer;
}

.slot-wrap .slot-appform-eye:hover {
	color: var(--gold-text);
}

.slot-wrap .slot-appform-msg:empty {
	display: none;
}

/* Download app — two app buttons side by side, QR full-width below. */
.slot-wrap .slot-appform-downloads {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	margin: 0;
}

.slot-wrap .slot-appform-dl {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 0.375rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
	color: var(--text-primary);
	text-decoration: none;
}

.slot-wrap .slot-appform-dl-os {
	font-size: 3rem;
	color: var(--text-secondary);
}

.slot-wrap .slot-appform-dl-os--android {
	font-size: 3.25rem;
	color: #a4c639;
}

.slot-wrap .slot-appform-dl-os--apple {
	font-size: 3rem;
	color: var(--text-primary);
}

.slot-wrap .slot-appform-dl-text {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	max-width: 5rem;
	gap: 0.25rem;
	line-height: 1.25;
}

.slot-wrap .slot-appform-dl-text b {
	font-size: 0.8125rem;
	font-weight: 700;
}

.slot-wrap .slot-appform-dl-text small {
	font-size: 0.625rem;
	color: var(--text-secondary);
}

.slot-wrap .slot-appform-dl-go {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	font-size: 1.25rem;
	color: var(--text-primary);
}

.slot-wrap .slot-appform-qr {
	grid-column: 1 / -1;
	justify-self: center;
	width: 100%;
	max-width: 14rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.625rem;
	background: var(--bg-base);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 0.625rem;
}

.slot-wrap .slot-appform-qr-img {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	padding: 0.1875rem;
	border-radius: 0.375rem;
	background: #fff;
	overflow: hidden;
}

.slot-wrap .slot-appform-qr-img canvas,
.slot-wrap .slot-appform-qr-img img {
	width: 100%;
	height: 100%;
	display: block;
}

.slot-wrap .slot-appform-qr-text {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	font-size: 0.6875rem;
	line-height: 1.3;
	gap: 0.25rem;
	color: var(--text-secondary);
}

.slot-wrap .slot-appform-qr-text b {
	font-size: 0.75rem;
	color: var(--gold-text);
}

/* Visible border on every content card, matching the form's outer cards. */
.slot-wrap .slot-appform-locked,
.slot-wrap .slot-appform-cred,
.slot-wrap .slot-appform-dl,
.slot-wrap .slot-appform-qr,
.slot-wrap .slot-appform-notes-wrap {
	border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .slot-wrap .slot-appform-locked,
[data-theme="light"] .slot-wrap .slot-appform-cred,
[data-theme="light"] .slot-wrap .slot-appform-dl,
[data-theme="light"] .slot-wrap .slot-appform-qr,
[data-theme="light"] .slot-wrap .slot-appform-notes-wrap {
	border-color: rgba(0, 0, 0, 0.25);
}

/* Important notes (collapsible) — styled like the deposit guide. */
.slot-wrap .slot-appform-notes-wrap {
	background: var(--bg-base);
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: 0.625rem;
}

.slot-wrap .slot-appform-notes-wrap>summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	cursor: pointer;
	list-style: none;
	color: var(--text-primary);
	font-weight: 600;
	font-size: 0.8125rem;
}

.slot-wrap .slot-appform-notes-wrap>summary::-webkit-details-marker {
	display: none;
}

.slot-wrap .slot-appform-notes-wrap>summary>iconify-icon:first-of-type {
	color: var(--gold-text);
	font-size: 1.25rem;
}

.slot-wrap .slot-appform-notes-wrap>summary>span {
	flex: 1;
}

.slot-wrap .slot-appform-notes-caret {
	color: var(--text-secondary);
	transition: transform 0.2s;
}

.slot-wrap .slot-appform-notes-wrap[open] .slot-appform-notes-caret {
	transform: rotate(180deg);
}

.slot-wrap .slot-appform-notes-wrap .slot-appform-notes {
	margin: 0;
	padding: 0 1rem 0.875rem 2.25rem;
	list-style: disc;
}

.slot-wrap .slot-appform-notes-wrap .slot-appform-notes li {
	margin-bottom: 0.3125rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--text-label);
}

[data-theme="light"] .slot-provider-maint {
	background: rgba(0, 0, 0, 0.35);
}

.slot-provider-maint::before {
	content: "";
	position: absolute;
	width: 1.75rem;
	height: 1.75rem;
	background: linear-gradient(135deg, #f7b955 0%, #f59e0b 100%);
	border-radius: 0.3125rem;
	transform: rotate(45deg);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.45);
}

.slot-provider-maint iconify-icon {
	position: relative;
	font-size: 1rem;
	color: var(--text-on-gold);
}

/* Mobile: smaller ribbon for the compact provider cards */
.slot-wrap .slot-status {
	top: 0.55rem;
	right: -1.55rem;
	width: 5.25rem;
	font-size: 0.5rem;
}

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

.slot-wrap .slot-provider-maint::before {
	width: 1.75rem;
	height: 1.75rem;
}

.slot-wrap .slot-provider-maint iconify-icon {
	font-size: 1rem;
}

/* Game card extras (admin-managed cnf_game data) */

/* Per-card "Hot" ribbon — diagonal banner in the media corner */
.slot-card-ribbon {
	top: 0.6rem;
	right: -1.7rem;
}

/* Category label + maintenance wrench in the card meta row */
.slot-card-cat {
	text-transform: capitalize;
}

.slot-card-state iconify-icon {
	color: #f5a623;
	font-size: 0.875rem;
}

/* Maintenance games: dim and signal unavailable */
.slot-card.is-maintenance {
	opacity: 0.78;
}

.slot-card.is-maintenance .slot-card-thumb {
	filter: grayscale(0.45);
}

.slot-card-play[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Provider sub-game cards (Besoft/Jili): text placeholder stands in for games
   without a provider image (otherwise identical to the lobby cards). */
.d-content .slot-card-thumb--ph,
.slot-wrap .slot-card-thumb--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-primary);
	background: var(--bg-card-alt);
}

/* Gamelist New / Hot badge — the live-dev lobby's .glby-badge: a small pill in
   the thumbnail's top-left corner (New red, Hot amber). */
.slot-card-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
	padding: 0.1875rem 0.5rem;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 0.375rem;
	pointer-events: none;
}

/* A shade deeper than live-dev's #ff5b5b → #d63030 so the white label clears 4.5:1 */
.slot-card-badge--new {
	background: linear-gradient(180deg, #d93636, #b52525);
}

.slot-card-badge--hot {
	color: #3a1e00;
	background: linear-gradient(180deg, #ffb23e, #e8871f);
}

/* List view: the media wrapper is display: contents, so the badge positions
   against the card — offset it onto the thumbnail's corner. */
.d-content .slot-grid.is-list .slot-card-badge,
.slot-wrap .slot-grid.is-list .slot-card-badge {
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.125rem 0.375rem;
	font-size: 0.5625rem;
}

/* Gamelist no-results panel (search / category filter matched nothing) — a
   bordered panel with an icon and heading so it reads as a result, not as the
   muted loading line. */
.d-content .slot-empty--filter,
.slot-wrap .slot-empty--filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.5rem 1rem;
	background: var(--bg-card);
	border: 0.0625rem dashed var(--border-strong);
	border-radius: 0.875rem;
}

.slot-empty--filter .slot-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.25rem;
	font-size: 1.625rem;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.12);
	border-radius: 50%;
}

/* Bright gold washes out on the light card — use a deep gold there */
[data-theme="light"] .slot-empty--filter .slot-empty-icon {
	color: #8a6100;
}

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

.slot-empty--filter .slot-empty-hint {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

/* Gamelist list view — like the live-dev lobby: one row per game, thumbnail +
   name, no Play button (the whole row launches, see slot JS).
   .slot-card-media becomes display: contents so the thumbnail lays out as a row
   item of the card itself; the corner ribbon then pins to the card's corner. */
.d-content .slot-grid.is-list,
.slot-wrap .slot-grid.is-list {
	grid-template-columns: 1fr;
	gap: 0.625rem;
}

.d-content .slot-grid.is-list .slot-card,
.slot-wrap .slot-grid.is-list .slot-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
}

.d-content .slot-grid.is-list .slot-card:hover,
.slot-wrap .slot-grid.is-list .slot-card.is-showing {
	transform: none;
}

.d-content .slot-grid.is-list .slot-card-media,
.slot-wrap .slot-grid.is-list .slot-card-media {
	display: contents;
}

.d-content .slot-grid.is-list .slot-card-thumb,
.slot-wrap .slot-grid.is-list .slot-card-thumb {
	flex: 0 0 4rem;
	width: 4rem;
	height: 4rem;
	aspect-ratio: auto;
	border-radius: 0.5rem;
	transform: none;
}

/* No-image placeholder squeezed into the small thumbnail */
.d-content .slot-grid.is-list .slot-card-thumb--ph,
.slot-wrap .slot-grid.is-list .slot-card-thumb--ph {
	padding: 0.25rem;
	overflow: hidden;
	font-size: 0.5625rem;
	line-height: 1.2;
}

.d-content .slot-grid.is-list .slot-card-info,
.slot-wrap .slot-grid.is-list .slot-card-info {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.d-content .slot-grid.is-list .slot-card-overlay,
.slot-wrap .slot-grid.is-list .slot-card-overlay {
	display: none;
}

/* Big-card games (European Roulette) — just the uploaded image, horizontally
   centered when the provider is picked in the rail; clicking it launches. */
.slot-bigcards {
	display: flex;
	justify-content: center;
}

.slot-bigcard {
	position: relative;
	display: block;
	width: 100%;
	max-width: 39rem;
	margin: 0 auto;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slot-bigcard[data-launch-url]:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
}

.slot-bigcard[data-launch-url]:active {
	transform: scale(0.99);
}

.slot-bigcard-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Maintenance — dim the card and show a centered banner (matches the grid cards) */
.slot-bigcard.is-maintenance {
	cursor: default;
}

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

.slot-bigcard-status {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	width: 100%;
	padding: 0.4375rem 0;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1875rem;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	transform: translateY(-50%);
	background: linear-gradient(107deg, #f56565 0%, #c53030 100%);
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* Full-width shell — 0.875rem of side padding is right on a phone and cramped
   at 1180px. The grids stay full-width; only the gutter grows. */
@media (min-width: 48rem) {
	.slot-wrap {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}


/* 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) {
	.slot-wrap .slot-card-title { font-size: 0.9375rem; }
}

/* One more gutter step: 1.5rem is right at 820px and tight at 1366px. */
@media (min-width: 75rem) {
	.slot-wrap { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* The app form is a form, not a grid — it stops widening where the rows would
   start reading as stretched (same reason as the .d-content cap above). The
   cards and hero around it stay full-bleed. */
@media (min-width: 48rem) {
	.slot-wrap .slot-appform-panel {
		max-width: 42rem;
		margin-inline: auto;
	}

	/* Same width as the desktop pair — a 630px box around one username reads
	   as a gap, not a field. */
	.slot-wrap .slot-appform-creds {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* No banner uploaded — the card falls back to the game's name (the img alt)
   rather than a placeholder graphic, so a missing image reads as "this game has
   no artwork yet" instead of looking like a broken or half-loaded card.
   The views omit `src` entirely in that case; these rules keep the alt text
   inside the card's normal box so the grid stays even. */
.slot-card-thumb:not([src]),
.slot-bigcard-img:not([src]),
.sportbook-card-img:not([src]),
.livecasino-card-img:not([src]) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	word-break: break-word;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.04);
}

/* ---------- OS-aware downloads (components/app-launch.js) ----------
   On a phone/tablet the detected OS's button fills the row, the other OS
   becomes a small text link, and the QR hides. Desktop is unchanged. */
.slot-appform-dl-alt {
	display: none;
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--text-secondary);
}

.slot-appform-dl-alt a {
	color: var(--gold-text);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

/* One compact, centered column sized to its content — a wide card left a gap
   between the label and the download badge. fit-content keeps it from
   overflowing a narrow screen; card, link and QR share the column width. */
.d-content .slot-appform-downloads.is-os-matched,
.slot-wrap .slot-appform-downloads.is-os-matched {
	grid-template-columns: fit-content(100%);
	justify-content: center;
}

/* The QR is the Android APK link, so it only stays for Android. */
.slot-appform-downloads[data-matched-os="ios"] .slot-appform-qr,
.slot-appform-downloads[data-matched-os="android"] .slot-appform-dl[data-os="ios"],
.slot-appform-downloads[data-matched-os="ios"] .slot-appform-dl[data-os="android"] {
	display: none;
}

/* The single full-width card is a horizontal row: icon tile · label · download
   badge. The side-by-side layout caps the label at ~5rem, which wrapped here. */
.slot-appform-downloads.is-os-matched .slot-appform-dl {
	justify-content: flex-start;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
}

.slot-appform-downloads.is-os-matched .slot-appform-dl-os {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	font-size: 2.125rem;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 0.75rem;
}

[data-theme="light"] .slot-appform-downloads.is-os-matched .slot-appform-dl-os {
	background: rgba(0, 0, 0, 0.05);
}

.slot-appform-downloads.is-os-matched .slot-appform-dl-text {
	flex: 0 1 auto;
	padding-right: 0.5rem;
	min-width: 0;
	max-width: none;
	gap: 0.1875rem;
	text-align: left;
}

.slot-appform-downloads.is-os-matched .slot-appform-dl-text b {
	font-size: 1rem;
	white-space: nowrap;
}

.slot-appform-downloads.is-os-matched .slot-appform-dl-text small {
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-appform-downloads.is-os-matched .slot-appform-dl-go {
	position: static;
	margin-left: auto;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.125rem;
	color: #1a1405;
	background: var(--gold-gradient);
	border-radius: 50%;
}

.slot-appform-downloads[data-matched-os="android"] .slot-appform-dl-alt[data-os-alt="android"],
.slot-appform-downloads[data-matched-os="ios"] .slot-appform-dl-alt[data-os-alt="ios"] {
	display: block;
}

/* Android: card, then its "Using an iPhone?" link, then the QR centered below. */
.slot-appform-downloads.is-os-matched .slot-appform-dl-alt {
	order: 1;
}

.slot-appform-downloads[data-matched-os="android"] .slot-appform-qr {
	order: 2;
	grid-column: 1 / -1;
	justify-self: stretch;
	justify-content: flex-start;
	width: auto;
	max-width: none;
	padding: 0.625rem;
	gap: 0.875rem;
}

/* Enough room (the download section itself, not the viewport — on desktop the
   form sits in a narrow column): Android card and QR side by side, the
   "Using an iPhone?" link centered underneath both. */
.slot-appform-section--download {
	container: appdl / inline-size;
}

@container appdl (min-width: 34rem) {
	.d-content .slot-appform-downloads[data-matched-os="android"],
	.slot-wrap .slot-appform-downloads[data-matched-os="android"] {
		grid-template-columns: fit-content(50%) fit-content(50%);
		column-gap: 0.75rem;
	}

	.slot-appform-downloads[data-matched-os="android"] .slot-appform-qr {
		order: 0;
		grid-column: auto;
	}
}

/* ---------- "Game didn't open?" bottom sheet (components/app-launch.js) ---------- */
.app-launch-sheet {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
}

.app-launch-sheet.is-open {
	display: flex;
}

.app-launch-sheet-panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 30rem;
	padding: 1.5rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
	text-align: center;
	background: var(--bg-card);
	border-top: 0.0625rem solid var(--gold);
	border-radius: 1.25rem 1.25rem 0 0;
	animation: app-launch-sheet-up 0.22s ease-out;
}

@keyframes app-launch-sheet-up {
	from { transform: translateY(1.25rem); opacity: 0.4; }
	to { transform: none; opacity: 1; }
}

.app-launch-sheet-x {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--text-secondary);
	background: none;
	border: 0;
	cursor: pointer;
}

.app-launch-sheet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.75rem;
	font-size: 1.625rem;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.12);
	border-radius: 50%;
}

.app-launch-sheet-title {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--text-primary);
}

.app-launch-sheet-text {
	margin: 0 0 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.app-launch-sheet-dl,
.app-launch-sheet-retry {
	width: 100%;
	min-height: 3.25rem;
	font-size: 1rem;
	border-radius: 999rem;
	text-decoration: none;
}

.app-launch-sheet-alt {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.app-launch-sheet-alt a {
	color: var(--gold-text);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.app-launch-sheet-retry {
	margin-top: 0.75rem;
}