/*
 * SPEED GAMING — the provider HUD frame.
 *
 * Every Speed Gaming title wears this frame; a game themes it through the
 * --game-* variables below and owns everything inside the play area. The frame
 * is the same on every title so a player who knows one knows them all:
 *
 *   top-left     the provider badge, and the round's state under it
 *   top-centre   the meter: the multiple, the win in money, the speed gauge
 *   top-right    recent results, info, sound
 *   bottom       the deck: balance and bet, the launch button, auto/turbo/mode
 *
 * Shapes lean forward (--sg-slant): plates, chips and buttons are skewed
 * parallelograms with upright text. Meaning colours are provider-wide and never
 * re-themed: red is danger or a prize not yet won, green is saved or paid,
 * white is information. See brand/README.md.
 */
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-700i.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-800i.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: block; }
@font-face { font-family: 'Barlow Condensed'; src: url('fonts/barlow-condensed-900i.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: block; }

:root {
	/* provider */
	--sg-font: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
	--sg-ink: #07080f;
	--sg-panel: linear-gradient(180deg, rgba(28, 33, 56, .94), rgba(9, 11, 22, .94));
	--sg-panel-flat: rgba(11, 13, 26, .82);
	--sg-line: rgba(255, 255, 255, .16);
	--sg-cyan: #27e3ff;
	--sg-violet: #8a5cff;
	--sg-speed: linear-gradient(90deg, var(--sg-cyan), var(--sg-violet));
	--sg-slant: -12deg;
	/* meaning: provider-wide, never themed */
	--sg-good: #43e08c;
	--sg-bad: #ff3b4e;
	/* the game themes these */
	--game-accent: #ff8a3d;
	--game-accent-2: #ffd23f;
	--game-hi: #fff4d6;
	--game-glow: rgba(255, 170, 60, .55);
	--game-cta: linear-gradient(180deg, #ffd27a 0%, #ff9a3c 48%, #ff5f12 100%);
	--game-cta-ink: #2a0c00;
	--game-cta-edge: #8e3000;
	--game-display: var(--sg-font);
}

.sg { font-family: var(--sg-font); color: #fff; }
/* the stage is the frame's container: layout follows the game's own shape, not
   the browser window, so a portrait preview inside a desktop page is portrait */
.sg { container: stage / size; }
/* zero-specificity reset: every component below wins over it */
.sg :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

/* a skewed panel behind upright content: the frame's one shape */
.sg-skew { position: relative; isolation: isolate; }
.sg-skew::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant));
	background: var(--sg-panel); border: 1.5px solid var(--sg-line); border-radius: 7px;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ── top ── */
.sg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between;
	align-items: flex-start; padding: 10px 14px; pointer-events: none; }
.sg-brand { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.sg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; font: italic 800 12px/1 var(--sg-font);
	letter-spacing: 2px; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.sg-badge b { font-weight: 900; color: #fff; }
.sg-badge em { font-style: italic; font-weight: 800; background: var(--sg-speed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-mark { width: 22px; height: 14px; flex: none; }
.sg-tag { font: italic 700 11px/1 var(--sg-font); letter-spacing: 1.6px; color: var(--game-accent-2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .85); max-width: 32cqw; }
.sg-right { display: flex; gap: 10px; align-items: center; }
/* recent results fill only the room between the meter and the icons; whole chips
   that do not fit wrap onto a hidden second line instead of sliding under the meter */
.sg-history { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 5px;
	height: 24px; overflow: hidden; width: max(0px, calc(50cqw - 300px)); padding-left: 4px; }
.sg-history .chip { position: relative; isolation: isolate; font: italic 800 12px/1 var(--sg-font); letter-spacing: .5px;
	padding: 5px 9px; font-variant-numeric: tabular-nums; }
.sg-history .chip::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant));
	background: rgba(11, 13, 26, .78); border: 1px solid var(--sg-line); border-radius: 4px; }
.sg-history .chip.win::before { background: rgba(67, 224, 140, .9); border-color: transparent; }
.sg-history .chip.win { color: #032; }
.sg-history .chip.big::before { background: linear-gradient(180deg, var(--game-accent-2), var(--game-accent)); border-color: transparent; }
.sg-history .chip.big { color: #2a1200; }
.sg-icons { display: flex; gap: 7px; pointer-events: auto; }
.sg-icon { width: 34px; height: 32px; display: grid; place-items: center; font: italic 900 16px/1 var(--sg-font); }
.sg-icon.off { opacity: .5; }

/* ── the meter: the number nothing ever covers ── */
.sg-meter { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex;
	flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.sg-plate { min-width: 236px; padding: 3px 30px 8px; text-align: center; }
.sg-plate::before { border-color: rgba(255, 255, 255, .22); }
/* speed wings: streaks trailing off both ends of the plate */
.sg-plate::after { content: ''; position: absolute; top: 22%; bottom: 22%; left: -64px; right: -64px; z-index: -2;
	transform: skewX(var(--sg-slant));
	background:
		repeating-linear-gradient(180deg, transparent 0 5px, rgba(39, 227, 255, .55) 5px 7px) left / 54px 100% no-repeat,
		repeating-linear-gradient(180deg, transparent 0 5px, rgba(138, 92, 255, .55) 5px 7px) right / 54px 100% no-repeat;
	-webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
	mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.sg-mult { font: italic 900 54px/1 var(--sg-font); letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--game-hi);
	text-shadow: 0 0 18px var(--game-glow), 0 3px 0 rgba(0, 0, 0, .55); padding-right: 4px; }
.sg-win { font: italic 700 13px/1 var(--sg-font); letter-spacing: 2.4px; color: rgba(255, 255, 255, .7); margin-top: 1px; }
.sg-win b { font: italic 900 20px/1 var(--sg-font); letter-spacing: .6px; color: var(--game-accent-2); margin-left: 5px; }
/* the speed gauge: a tachometer of five forward-leaning bars */
.sg-gauge { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 6px; height: 17px; }
.sg-gauge i { display: block; width: 15px; transform: skewX(var(--sg-slant)); background: rgba(255, 255, 255, .16); border-radius: 2px; }
.sg-gauge i:nth-child(1) { height: 6px; } .sg-gauge i:nth-child(2) { height: 8px; } .sg-gauge i:nth-child(3) { height: 10px; }
.sg-gauge i:nth-child(4) { height: 13px; } .sg-gauge i:nth-child(5) { height: 16px; }
.sg-gauge i.on:nth-child(1), .sg-gauge i.on:nth-child(2) { background: var(--sg-cyan); box-shadow: 0 0 8px var(--sg-cyan); }
.sg-gauge i.on:nth-child(3), .sg-gauge i.on:nth-child(4) { background: var(--sg-violet); box-shadow: 0 0 8px var(--sg-violet); }
.sg-gauge i.on:nth-child(5) { background: var(--game-accent-2); box-shadow: 0 0 10px var(--game-accent-2); }
.sg-gauge span { font: italic 800 12px/1 var(--sg-font); letter-spacing: 2px; margin-left: 7px; color: rgba(255, 255, 255, .85); min-width: 44px; text-align: left; }
.sg-plate.gear3::before { box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 24px rgba(138, 92, 255, .45); }
.sg-plate.gear4::before { border-color: var(--game-accent-2); box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 32px var(--game-glow); }
.sg-plate.chase::before { border-color: var(--sg-bad); box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 22px rgba(255, 59, 78, .5); }
.sg-plate.chase .sg-win::before { content: 'SAFE · '; color: #fff; }
/* a prize that is not his yet is red; won, it turns green */
.sg-prize { padding: 5px 16px 6px; font: italic 900 17px/1 var(--sg-font); letter-spacing: 1px; color: #ffe2e5; }
.sg-prize::before { background: linear-gradient(180deg, rgba(150, 18, 34, .95), rgba(70, 6, 16, .95)); border-color: var(--sg-bad);
	box-shadow: 0 0 18px rgba(255, 59, 78, .5); }
.sg-prize:empty { display: none; }
.sg-prize.lost { text-decoration: line-through; opacity: .7; }
.sg-prize.won::before { background: linear-gradient(180deg, rgba(24, 120, 66, .96), rgba(8, 60, 30, .96)); border-color: var(--sg-good);
	box-shadow: 0 0 18px rgba(67, 224, 140, .5); }
.sg-prize.won { color: #eafff2; }
.sg-zone { padding: 4px 13px; font: italic 800 12px/1 var(--sg-font); letter-spacing: 1.6px; white-space: nowrap; }
.sg-zone::before { background: var(--sg-panel-flat); box-shadow: none; }

/* ── the deck ── */
.sg-deck { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 14px; padding: 20px 18px calc(10px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(7, 8, 15, 0), rgba(7, 8, 15, .8) 36%, rgba(7, 8, 15, .94)); }
.sg-deck::before { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--sg-speed); opacity: .55;
	-webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.sg-group { display: flex; align-items: center; gap: 9px; }
.sg-group.right { justify-content: flex-end; }
.sg-stat { display: flex; flex-direction: column; gap: 1px; }
.sg-stat .label { font: italic 700 10px/1 var(--sg-font); letter-spacing: 2.2px; color: rgba(255, 255, 255, .58); }
.sg-stat .val { font: italic 900 21px/1.05 var(--sg-font); letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.sg-step { width: 34px; height: 32px; display: grid; place-items: center; font: italic 900 21px/1 var(--sg-font); }
.sg-step:active, .sg-pill:active { transform: translateY(1px); }
/* the launch button: the game's colour, the provider's shape */
.sg-cta { position: relative; isolation: isolate; width: 232px; height: 58px; display: flex; align-items: center; justify-content: center;
	gap: 10px; font: italic 900 30px/1 var(--sg-font); letter-spacing: 3px; color: var(--game-cta-ink); }
.sg-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant)); border-radius: 9px;
	background: var(--game-cta);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 5px 0 var(--game-cta-edge), 0 0 26px var(--game-glow); }
/* a sheen that crosses the button now and then, and the chevrons that say "go" */
.sg-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant)); border-radius: 9px; overflow: hidden;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 47%, transparent 59%) -160px 0 / 160% 100% no-repeat;
	animation: sg-sheen 3.6s ease-in-out infinite; }
@keyframes sg-sheen { 0%, 62% { background-position: -260px 0; } 100% { background-position: 360px 0; } }
.sg-cta .sg-chev { width: 22px; height: 18px; flex: none; }
.sg-cta:active { transform: translateY(2px); }
.sg-cta:disabled { filter: grayscale(.4) brightness(.8); cursor: default; }
.sg-cta.stop { color: #04232a; }
.sg-cta.stop::before { background: linear-gradient(180deg, #b6f6ff 0%, var(--sg-cyan) 50%, #0d9fbf 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 #075a6b, 0 0 22px rgba(39, 227, 255, .45); }
.sg-pill { position: relative; isolation: isolate; height: 32px; padding: 0 14px; display: inline-flex; align-items: center;
	font: italic 800 13px/1 var(--sg-font); letter-spacing: 1.6px; white-space: nowrap; }
.sg-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant)); border-radius: 6px;
	background: var(--sg-panel); border: 1.5px solid var(--sg-line); box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.sg-pill.on { color: #04232a; }
.sg-pill.on::before { background: linear-gradient(180deg, #b6f6ff, var(--sg-cyan)); border-color: transparent; box-shadow: 0 3px 0 #075a6b, 0 0 14px rgba(39, 227, 255, .45); }
select.sg-pill { appearance: none; -webkit-appearance: none; color: #fff; border: 0; background: none; padding-right: 26px; cursor: pointer;
	font: italic 800 13px/1 var(--sg-font); letter-spacing: 1.4px; }
.sg-select { position: relative; display: inline-flex; isolation: isolate; }
.sg-select::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant)); border-radius: 6px;
	background: var(--sg-panel); border: 1.5px solid var(--sg-line); box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.sg-select::after { content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
	border-right: 2px solid var(--sg-cyan); border-bottom: 2px solid var(--sg-cyan); transform: rotate(45deg); pointer-events: none; }
select.sg-pill option { color: #000; }

/* ── the rules sheet ── */
.sg-sheet-wrap { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(3, 4, 12, .66); padding: 16px; }
.sg-sheet-wrap[hidden] { display: none; }
.sg-sheet { width: min(580px, 100%); max-height: 100%; overflow: auto; border-radius: 16px; background: var(--sg-panel);
	border: 1.5px solid var(--sg-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.sg-sheet header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; position: relative;
	border-bottom: 1px solid var(--sg-line); }
.sg-sheet header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sg-speed); }
.sg-sheet .body { padding: 14px 18px 18px; }
.sg-sheet h2 { font: 400 26px/1 var(--game-display); margin: 0 0 10px; color: var(--game-accent-2); letter-spacing: .5px; }
.sg-sheet h3 { font: italic 900 19px/1.1 var(--sg-font); margin: 14px 0 4px; letter-spacing: 1px; text-transform: uppercase; }
.sg-sheet p { margin: 0 0 6px; font: 600 15px/1.42 var(--sg-font); color: rgba(255, 255, 255, .86); letter-spacing: .2px; }
.sg-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 2px; }
.sg-key { border-radius: 10px; padding: 9px 11px; font: 600 14px/1.35 var(--sg-font); }
.sg-key b { display: block; font: italic 900 17px/1.1 var(--sg-font); letter-spacing: 1px; margin-bottom: 2px; }
.sg-key.good { background: rgba(67, 224, 140, .13); border: 1.5px solid var(--sg-good); }
.sg-key.good b { color: var(--sg-good); }
.sg-key.bad { background: rgba(255, 59, 78, .13); border: 1.5px solid var(--sg-bad); }
.sg-key.bad b { color: var(--sg-bad); }

/* ── the rules pages: every title's paytable is built from these ──
 * .sg-tabs over .sg-page sections; .sg-card = art + name + .sg-fx (what it does to
 * the win, in the meaning colours: .grow gold, .save green, .bad red, .info white)
 * + a line + .odds; .sg-table for modes/zones; .sg-roster for a line-up of art;
 * .sg-steps for a worked example; .sg-ladder for the win tiers. */
.sg-sheet.wide { width: min(880px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; }
.sg-sheet.wide .body { overflow: auto; min-height: 0; }
.sg-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 10px 16px 9px; border-bottom: 1px solid var(--sg-line);
	scrollbar-width: none; flex: none; }
.sg-tabs::-webkit-scrollbar { display: none; }
.sg-tabs button { position: relative; isolation: isolate; flex: none; padding: 7px 13px; font: italic 800 13px/1 var(--sg-font);
	letter-spacing: 1.4px; color: rgba(255, 255, 255, .72); cursor: pointer; }
.sg-tabs button::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant));
	background: rgba(255, 255, 255, .06); border: 1px solid var(--sg-line); border-radius: 5px; }
.sg-tabs button:hover { color: #fff; }
.sg-tabs button[aria-selected="true"] { color: var(--sg-ink); }
.sg-tabs button[aria-selected="true"]::before { background: var(--sg-cyan); border-color: var(--sg-cyan); box-shadow: 0 0 12px rgba(39, 227, 255, .45); }
.sg-page[hidden] { display: none; }
.sg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.sg-card { display: grid; grid-template-columns: 68px 1fr; grid-auto-rows: min-content; column-gap: 12px; row-gap: 5px; padding: 11px;
	border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--sg-line); }
.sg-card.grow { border-color: rgba(255, 210, 63, .35); }
.sg-card.save { border-color: rgba(67, 224, 140, .45); background: rgba(67, 224, 140, .06); }
.sg-card.bad { border-color: rgba(255, 59, 78, .45); background: rgba(255, 59, 78, .06); }
.sg-card .art { grid-row: 1 / span 4; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 10px;
	background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }
.sg-card .art img, .sg-card .art svg { max-width: 64px; max-height: 64px; width: 64px; height: 64px; object-fit: contain; }
.sg-card h4 { margin: 1px 0 0; font: italic 900 16px/1.1 var(--sg-font); letter-spacing: .8px; text-transform: uppercase; }
.sg-card p { margin: 0; font: 600 13.5px/1.36 var(--sg-font); color: rgba(255, 255, 255, .8); }
.sg-card .odds { font: italic 700 11.5px/1.2 var(--sg-font); letter-spacing: 1px; color: rgba(255, 255, 255, .5); text-transform: uppercase; }
.sg-fx { position: relative; isolation: isolate; justify-self: start; max-width: 100%; padding: 4px 10px 3px; font: italic 900 14px/1.15 var(--sg-font);
	letter-spacing: .5px; }
.sg-fx::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--sg-slant)); border-radius: 4px;
	background: rgba(255, 255, 255, .14); }
.sg-fx.grow { color: #241500; }
.sg-fx.grow::before { background: linear-gradient(180deg, #ffe27a, var(--game-accent-2, #ffc93a)); }
.sg-fx.save { color: #03230f; }
.sg-fx.save::before { background: var(--sg-good); }
.sg-fx.bad { color: #fff; }
.sg-fx.bad::before { background: var(--sg-bad); }
.sg-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font: 600 14px/1.3 var(--sg-font); }
.sg-table th { text-align: left; padding: 6px 8px; font: italic 800 11.5px/1 var(--sg-font); letter-spacing: 1.6px;
	color: rgba(255, 255, 255, .55); border-bottom: 1px solid var(--sg-line); }
.sg-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; color: rgba(255, 255, 255, .88); }
.sg-table td:first-child { font-weight: 800; }
.sg-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-table .thumb { display: block; width: 76px; height: 34px; object-fit: cover; border-radius: 6px; }
.sg-table .thumb.warp { background: radial-gradient(circle at 50% 50%, #fff 0, #8a5cff 18%, #121040 60%); }
.sg-table .thumb.warp.gold { background: radial-gradient(circle at 50% 50%, #fff 0, #ffd23f 25%, #4a2a00 70%); }
.sg-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.sg-roster figure { margin: 0; padding: 8px 6px 7px; border-radius: 10px; background: rgba(255, 255, 255, .045); border: 1px solid var(--sg-line);
	display: grid; justify-items: center; gap: 5px; }
.sg-roster figure.bad { border-color: rgba(255, 59, 78, .4); }
.sg-roster img { width: 76px; height: 64px; object-fit: contain; }
.sg-roster figcaption { font: italic 800 11px/1.1 var(--sg-font); letter-spacing: 1.2px; text-align: center; color: rgba(255, 255, 255, .8); }
.sg-steps { display: grid; gap: 4px; margin: 8px 0 12px; }
.sg-steps .step { display: grid; grid-template-columns: 1fr auto 78px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px;
	background: rgba(255, 255, 255, .04); font: 600 14px/1.25 var(--sg-font); }
.sg-steps .step b { text-align: right; font: italic 900 16px/1 var(--sg-font); color: var(--game-accent-2, #ffc93a); font-variant-numeric: tabular-nums; }
.sg-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.sg-ladder figure { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border-radius: 12px;
	background: radial-gradient(ellipse at 50% 40%, rgba(255, 210, 63, .12), rgba(255, 255, 255, .03) 70%); border: 1px solid var(--sg-line); }
.sg-ladder img { width: 100%; height: 74px; object-fit: contain; }
.sg-ladder figcaption { display: grid; justify-items: center; font: italic 800 13px/1.15 var(--sg-font); letter-spacing: 1px; color: rgba(255, 255, 255, .7); }
.sg-ladder figcaption b { font: italic 900 16px/1.1 var(--sg-font); color: #fff; }
.sg-note { font: italic 600 12px/1.4 var(--sg-font) !important; color: rgba(255, 255, 255, .5) !important; }

/* ── the provider sting: once, on a live session's first load ── */
.sg-intro { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none;
	background: radial-gradient(ellipse at center, #121530 0%, var(--sg-ink) 70%); animation: sg-intro-out .45s ease-in 1.25s forwards; }
.sg-intro .sg-logo { width: min(420px, 70cqw); animation: sg-intro-in .7s cubic-bezier(.2, .9, .25, 1.2) both; }
.sg-intro::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 120px; margin-top: -60px;
	background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(39, 227, 255, .2) 9px 11px);
	-webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
	animation: sg-streak 1.2s linear both; }
@keyframes sg-intro-in { from { transform: translateX(-60px) skewX(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sg-intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes sg-streak { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
@media (prefers-reduced-motion: reduce) { .sg-cta::after, .sg-intro, .sg-intro .sg-logo, .sg-intro::before { animation-duration: .01s; } }

/* ── portrait: the meter on top, the world in the middle, the deck in the thumb zone ── */
@container stage (max-aspect-ratio: 4/5) {
	.sg-cards { grid-template-columns: 1fr; }
	.sg-steps .step { grid-template-columns: 1fr auto 64px; font-size: 13px; }
	.sg-sheet-wrap { padding: 8px; }
	.sg-history { display: none; }
	.sg-tag { font-size: 10px; letter-spacing: 1px; }
	.sg-meter { top: 54px; }
	.sg-plate { min-width: 0; width: calc(100cqw - 64px); }
	.sg-mult { font-size: 48px; }
	.sg-deck { display: flex; flex-direction: column; gap: 10px; padding: 24px 16px calc(12px + env(safe-area-inset-bottom)); }
	.sg-deck .sg-group { width: 100%; justify-content: center; }
	.sg-cta { width: calc(100% - 20px); height: 58px; }
	.sg-pill { padding: 0 11px; font-size: 12px; }
}
.sg-intro[hidden] { display: none; }