/* Vault Runner — HTML dialog skin (art brief "UI skin & type": a CSS token sheet + one brushed-steel texture).
   The SDK's dialogs (bet menu, buy panel, autoplay, settings, pay table, rules, error) keep their markup; this
   sheet restyles them through the classes they expose (.pop-up-wrap, .ui-popup-standard-content-wrap, .rectangle …).
   Loaded from app.html after the fonts. Selectors carry three classes so they beat the components' scoped rules. */
:root {
	--vr-black: #0e1418;
	--vr-steel-d: #1d2a33;
	--vr-steel: #3e4f5e;
	--vr-steel-l: #5b6e7e;
	--vr-glass: #c2ccd5;
	--vr-cyan: #3cc1a6;
	--vr-cyan-l: #7fe0cb;
	--vr-amber: #b7791f;
	--vr-amber-h: #d98a1f;
	--vr-gold: #ffe08a;
	--vr-red: #e0402f;
	--vr-radius: 14px;
	--vr-radius-s: 8px;
	/* asset URLs are relative to this stylesheet (/ui/), like the game's own asset URLs, so the build works from
	   the root of a host (how the SDK sample and the ACP serve it) and from a sub-path alike */
	--vr-texture: url('../assets/sprites/ui/steel_tile.png');
	--vr-panel: linear-gradient(180deg, rgba(46, 62, 74, 0.92), rgba(20, 29, 36, 0.96));
	--vr-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* the dim + blur behind every dialog: vault black, not neutral grey */
.pop-up-wrap .top-layer,
.pop-up-wrap .top-layer .ui-popup-standard-content-wrap {
	color: var(--vr-glass);
}
.pop-up-wrap .blur-layer {
	background-color: rgba(14, 20, 24, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* the panel */
.pop-up-wrap .top-layer .ui-popup-standard-content-wrap {
	background: var(--vr-panel), var(--vr-texture);
	border: 1px solid var(--vr-steel);
	border-top: 3px solid var(--vr-amber-h);
	border-radius: var(--vr-radius);
	box-shadow: var(--vr-shadow);
	padding: 1.1rem 1.4rem 1.3rem;
	box-sizing: border-box;
	max-height: 96vh;
}
.pop-up-wrap .top-layer .ui-popup-standard-content-wrap[style*='100%'] {
	width: min(96vw, 1100px);
}

/* titles: gold small caps on a hairline */
.pop-up-wrap .top-layer .ui-modal-title-wrap {
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vr-gold);
	padding-bottom: 0.4rem;
	border-bottom: 1px solid rgba(60, 193, 166, 0.35);
	width: 100%;
}

/* the close × */
.pop-up-wrap .top-layer .close-button {
	color: var(--vr-glass);
	opacity: 0.85;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.pop-up-wrap .top-layer .close-button:hover {
	opacity: 1;
	transform: scale(1.1);
	color: var(--vr-cyan-l);
}

/* button plates (BaseIcon .rectangle) — steel with an amber top edge; hover lifts, press dips */
.pop-up-wrap .top-layer .rectangle {
	background: linear-gradient(180deg, #34444f 0%, #24313b 55%, #1d2a33 100%) !important;
	border: 1px solid var(--vr-steel-l) !important;
	border-radius: var(--vr-radius-s);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 var(--vr-black);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
/* selected option (the SDK marks it with an inline white border) */
.pop-up-wrap .top-layer .rectangle[style*='white solid'] {
	border: 2px solid var(--vr-cyan-l) !important;
	box-shadow: 0 0 0 3px rgba(60, 193, 166, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pop-up-wrap .top-layer .button:hover .rectangle,
.pop-up-wrap .top-layer button:hover .rectangle {
	border-color: var(--vr-cyan-l) !important;
	box-shadow: 0 0 0 3px rgba(127, 224, 203, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 var(--vr-black);
	transform: translateY(-1px);
}
.pop-up-wrap .top-layer .button:active .rectangle,
.pop-up-wrap .top-layer button:active .rectangle {
	transform: translateY(1px);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
.pop-up-wrap .top-layer .base-button-content {
	color: var(--vr-gold);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pop-up-wrap .top-layer .button.disabled .rectangle,
.pop-up-wrap .top-layer button:disabled .rectangle {
	opacity: 0.45;
}

/* the Break-In card */
/* the buy card: the key art (720 x 400, sprites/ui/buy_card_breakin) sits across the top of the card — the SDK's
   card has no image slot, so the art is the card's background and the padding reserves its 1.8:1 band */
.pop-up-wrap .top-layer .bonus-card-wrap {
	background:
		url('../assets/sprites/ui/buy_card_breakin.webp') top center / 100% auto no-repeat,
		linear-gradient(180deg, rgba(14, 20, 24, 0.75), rgba(14, 20, 24, 0.92));
	border: 1px solid var(--vr-steel);
	border-radius: var(--vr-radius-s);
	box-shadow: inset 0 0 0 1px rgba(60, 193, 166, 0.12);
	padding-top: calc(0.5rem + 55.5%);
	overflow: hidden;
}

/* settings sliders and the dropdown chevrons */
.pop-up-wrap .top-layer input.range,
.pop-up-wrap .top-layer input[type='range'] {
	accent-color: var(--vr-cyan);
}
.pop-up-wrap .top-layer .toggle .content:after {
	color: var(--vr-cyan-l);
}
.pop-up-wrap .top-layer .toggle .content {
	color: var(--vr-glass);
}

/* the game-version / small print */
.pop-up-wrap .top-layer .game-version,
.pop-up-wrap .top-layer .fine {
	color: var(--vr-steel-l);
}