/*
 * Bonus Hunt stream overlay (OBS Browser Source). Transparent page, one
 * near-black panel per layout, sized for its recommended source size:
 * compact 600×180, dashboard 700×500, table 900×700. Tokens from tokens.css.
 * Plus Jakarta Sans for text, Archivo for the numbers that carry the hunt.
 */
html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
body { font-family: var(--font-ui); color: var(--fg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
h1, h2, p, dl, dd, dt { margin: 0; }

.ov-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(10, 10, 12, 0.86);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ov--compact .ov-panel { width: 600px; height: 180px; padding: 18px 22px 14px; }
.ov--dashboard .ov-panel { width: 700px; height: 500px; padding: 24px 28px 18px; }
.ov--table .ov-panel { width: 900px; height: 700px; padding: 24px 28px 18px; }

/* States: idle / turned off show one quiet line, live and finished show the hunt. */
.ov-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ov-body > * { flex: none; }
.ov-empty { display: none; }
body[data-status="off"] .ov-body, body[data-status="idle"] .ov-body { display: none; }
body[data-status="off"] .ov-empty, body[data-status="idle"] .ov-empty { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1; font-size: 20px; font-weight: 700; color: var(--fg-label); }
.ov-empty span { font-size: 14px; font-weight: 500; color: var(--fg-tertiary); }
body[data-status="off"] .ov-panel { background: rgba(10, 10, 12, 0.6); }

/* Head */
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ov-head__text { min-width: 0; }
.ov-title { font-size: 20px; line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov--dashboard .ov-title, .ov--table .ov-title { font-size: 26px; }
.ov-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--fg-secondary); }
.ov-chip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-label); background: rgba(255, 255, 255, 0.06); }
body[data-status="live"] .ov-chip { color: var(--accent-badge); background: rgba(109, 74, 255, 0.16); }
body[data-status="demo"] .ov-chip { color: var(--fg-primary); background: rgba(255, 255, 255, 0.1); }
body[data-status="live"] .ov-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
.ov-count { flex: none; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 22px; font-variant-numeric: tabular-nums; }
.ov--dashboard .ov-count, .ov--table .ov-count { font-size: 28px; }
.ov-count__label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--fg-tertiary); letter-spacing: 0.02em; }

.ov-progress { height: 4px; margin: 12px 0 0; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ov-progress span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width 0.6s ease; }
.ov--dashboard .ov-progress, .ov--table .ov-progress { margin-top: 16px; height: 5px; }

/* Stats */
.ov-stats { display: grid; gap: 4px 16px; margin-top: 14px; }
.ov-stats--4 { grid-template-columns: repeat(4, 1fr); }
.ov-stats--3 { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; margin-top: 30px; }
.ov-stats--5 { grid-template-columns: repeat(5, 1fr); margin-top: 18px; }
.ov-stat dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
.ov-stat dd { margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-stretch: 106%; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-stats--3 .ov-stat dd { font-size: 34px; }
.ov-stats--slim .ov-stat dd { font-size: 22px; }
.ov-stat dd.is-up { color: var(--money-up); }
.ov-stat dd.is-down { color: var(--money-down); }

/* Changed values glow once, then settle. */
.is-changed { animation: ov-changed 1.6s ease-out; }
@keyframes ov-changed { 0% { color: var(--accent-text-hover); text-shadow: 0 0 18px rgba(109, 74, 255, 0.55); } 100% { text-shadow: none; } }

/* Dashboard cards */
.ov-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.ov-card { min-width: 0; padding: 16px 18px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); }
.ov-card--next { border-color: rgba(109, 74, 255, 0.35); }
.ov-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
.ov-card--next .ov-card__label { color: var(--accent-text); }
.ov-card__game { margin-top: 6px; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-card__meta { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; font-size: 14px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.ov-card__x { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--fg-primary); }
body:not(.has-next) .ov-card--next .ov-card__game::after { content: "All bonuses opened"; color: var(--fg-tertiary); font-weight: 600; }
body:not(.has-next) .ov-card--next .ov-card__suffix { display: none; }
body:not(.has-last) .ov-card:not(.ov-card--next) .ov-card__game::after { content: "None yet"; color: var(--fg-tertiary); font-weight: 600; }
.ov-best { display: flex; gap: 10px; align-items: baseline; margin-top: 16px; font-size: 14px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; }
.ov-best__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
body:not(.has-best) .ov-best { visibility: hidden; }

/* Game art: the resolved image (Overlay::art_view), or the branded tile
   (the site's art-fallback: initials on the game's tint), in the site's
   portrait frame (app.css .art-frame, 3:4, repeated here because the
   overlay page loads only tokens.css and this file). A 3:4 cover fills it.
   A square casino image is shown whole (contain) over a blurred, darkened
   copy of itself (art-frame__fill): nothing is cropped or stretched. Cards
   hold it at 48×64 left of the text, table rows at 27×36 so names line up,
   the Current game cover at 150×200. */
.ov-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.ov-card > :not(.ov-card__art) { grid-column: 2; }
.ov-card__art { grid-row: 1 / span 3; display: flex; }
.ov-card__art:empty { display: none; }
.ov-art { flex: none; display: block; width: 48px; height: 64px; border-radius: 6px; }
.art-frame { position: relative; overflow: hidden; background: #141418; isolation: isolate; }
.art-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); pointer-events: none; }
.art-frame__fill { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(18px) saturate(1.15) brightness(0.42); transform: translateZ(0); }
.art-frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.art-frame[data-fit="contain"] > .art-frame__img { object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
.art-frame[data-fit="cover"] > .art-frame__fill { display: none; }
.ov-tile { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.86); font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: 17px; letter-spacing: -0.02em; line-height: 1; background: radial-gradient(130% 90% at 20% -10%, oklch(0.55 0.12 var(--art-hue, 270) / 0.55), transparent 62%), linear-gradient(160deg, oklch(0.35 0.075 var(--art-hue, 270)), oklch(0.16 0.03 var(--art-hue, 270))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
body:not(.has-next) .ov-card--next .ov-card__art, body:not(.has-last) .ov-card--last .ov-card__art { display: none; }
.ov-game__cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ov-art-box { flex: none; display: flex; align-items: center; }
.ov-art--row { width: 27px; height: 36px; border-radius: 4px; }
.ov-tile.ov-art--row { font-size: 10px; }
.ov-game__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-table tr.is-pending .ov-art--row { opacity: 0.6; }

/* Current game (640×240): the slot being played now, never a hunt bonus.
   Its portrait cover (150×200, the site's 3:4 frame) on the left, name,
   studio and the bet the game shows on the right. In the lobby or with no
   game, the same card with a branded cover, a heading and one short line. */
.ov--current .ov-panel { width: 640px; height: 240px; padding: 20px; }
body.ov--current[data-status="idle"] .ov-body { display: flex; }
.ov-now { display: flex; gap: 22px; flex: 1; min-height: 0; }
body:not([data-now="game"]) .ov-now:not(.ov-now--empty), .ov-now--empty { display: none; }
body[data-now="lobby"] .ov-now--empty, body[data-now="none"] .ov-now--empty { display: flex; }
.ov-now__art { flex: none; display: flex; align-items: center; }
.ov-art--now { width: 150px; height: 200px; border-radius: 12px; }
.ov-tile.ov-art--now { font-size: 48px; }
.ov-now__text { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-top: 4px; }
.ov-now__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.ov-now__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ov-now__game { margin-top: 10px; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-now__provider { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-now__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.ov-now__bet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.ov-now__bet[hidden], .ov-now__bet [hidden] { display: none; }
.ov-now__bet-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
.ov-now__bet-value { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 26px; font-variant-numeric: tabular-nums; }
.ov-now__ante { flex-basis: 100%; font-size: 14px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.ov-now__demo { height: 20px; }
.ov--current .ov-brand { flex: none; font-size: 12px; }
.ov--current .ov-brand img { width: 20px; height: 20px; }
.ov-now__placeholder { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 80% at 30% 0%, rgba(109, 74, 255, 0.22), transparent 65%), linear-gradient(165deg, #1d1b26, #121117); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.ov-now__placeholder img { width: 64px; height: 64px; opacity: 0.32; }
.ov-now__game--empty { color: var(--fg-label); }
.ov-now--empty .ov-now__provider:empty { display: none; }

/* Bonus table: fixed column labels, a fixed row for the NEXT bonus, then a
   clipped track of the other rows. At most TABLE_ROWS (10) show at once.
   With more bonuses overlay.js moves the track in 5-row steps (transform
   only, no scrollbar). The three tables share one colgroup so the columns
   line up. */
.ov-table { width: 100%; border-collapse: collapse; font-size: 18px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.ov-table--head { margin-top: 18px; }
.ov-table th { padding: 0 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ov-table td { height: 43px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-table .num { text-align: right; }
.ov-col-n { width: 56px; }
.ov-col-money { width: 132px; }
.ov-col-x { width: 112px; }
.ov-table--sticky td { border-bottom-color: rgba(255, 255, 255, 0.1); }
.ov-rows { position: relative; overflow: hidden; }
/* The list scrolls (overlay.js scroller): moved every frame by a transform, never transitioned. */
.ov-table--body { will-change: transform; }
.ov-n { color: var(--fg-tertiary); }
.ov-table tr.is-opened .ov-x { font-family: var(--font-display); font-weight: 800; }
.ov-table tr.is-pending td { color: var(--fg-tertiary); }
.ov-table tr.is-next td { background: rgba(109, 74, 255, 0.14); color: var(--fg-primary); font-weight: 650; }
.ov-table tr.is-next td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ov-table tr.is-next td:nth-child(4) { color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Foot: quiet brand mark */
.ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--fg-tertiary); }
/* Brand mark: the Maxxer Cat head and the name, same quiet corner in every
   layout. Sized to stay legible when a 1080p scene is watched at 720p. */
/* The member's signature: the cat and their Maxxer Level, quiet, bottom right. Status, not an ad. */
.ov-brand { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13px; font-weight: 800; letter-spacing: 0.07em; color: rgba(243, 242, 239, 0.62); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-brand img { display: block; width: 22px; height: 22px; }
.ov--compact .ov-foot { padding-top: 6px; }
.ov--compact .ov-brand { gap: 6px; font-size: 12px; }
.ov--compact .ov-brand img { width: 18px; height: 18px; }

/* ── Placements (?place=bottom|sidebar, Overlay::PLACEMENTS) ─────────────
   Purpose-built compositions, not scaled copies. Bottom: one 200 px height
   for every layout (widths follow the content), read left to right: the
   hunt on the left, its numbers in one row, then the bonuses. Sidebar: one
   400 px width (heights follow the content), read top to bottom. Type is
   sized for a 1080p scene watched at 720p: names 16 px and up, key numbers
   24 px and up. Long values shrink to fit ([data-fit-text], overlay.js)
   before anything is cut. */
.ov-p--bottom .ov-panel { height: 200px; padding: 18px 20px; }
.ov-p--bottom.ov--compact .ov-panel { width: 960px; }
.ov-p--bottom.ov--dashboard .ov-panel { width: 1100px; }
/* The Bonus table follows a narrower source (next to Chat or Promotions, say): the pinned card stays, fewer cards scroll. */
.ov-p--bottom.ov--table .ov-panel { width: min(960px, 100vw); }
.ov-p--bottom.ov--current .ov-panel { width: 520px; height: 200px; padding: 18px; }
.ov-p--sidebar .ov-panel { width: 400px; padding: 18px; }
.ov-p--sidebar.ov--compact .ov-panel { height: 260px; }
.ov-p--sidebar.ov--dashboard .ov-panel { height: 560px; }
.ov-p--sidebar.ov--table .ov-panel { height: 620px; }
.ov-p--sidebar.ov--current .ov-panel { width: 400px; height: 168px; padding: 18px; }

/* The hunt: name, @handle and status, opened count, progress. */
.ov-ph { min-width: 0; }
.ov-ph .ov-title { font-size: 24px; }
.ov-ph .ov-meta { margin-top: 3px; font-size: 16px; }
.ov-ph .ov-chip { height: 22px; font-size: 12px; }
.ov-meta__handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-ph .ov-count { font-size: 28px; line-height: 1; white-space: nowrap; }
.ov-ph .ov-count__label { font-size: 16px; }
.ov-ph .ov-progress { height: 5px; margin: 0; }

/* Numbers: label over value, one row (Bottom) or a grid (Sidebar). */
.ov-pstats { display: grid; min-width: 0; }
.ov-pstats .ov-stat { min-width: 0; }
.ov-pstats .ov-stat dt { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-pstats .ov-stat dd { margin-top: 5px; font-size: 30px; }

/* Bottom: columns. */
.ov-p--bottom .ov-body { flex-direction: row; align-items: stretch; gap: 22px; }
.ov-p--bottom .ov-ph { flex: none; width: 230px; display: flex; flex-direction: column; }
.ov-p--bottom .ov-ph .ov-count { margin-top: auto; }
.ov-p--bottom .ov-ph .ov-progress { margin-top: 10px; }
.ov-p--bottom .ov-ph .ov-brand { margin: 12px 0 0; font-size: 12px; }
.ov-p--bottom .ov-ph .ov-brand img { width: 18px; height: 18px; }
.ov-p--bottom .ov-pstats { flex: 1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-content: center; gap: 0 18px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.ov-p--bottom .ov-pstats--4 .ov-stat dd { font-size: 34px; }
.ov-p--bottom .ov-pstats--6 { flex: none; width: 450px; grid-template-rows: auto auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 16px 16px; }
.ov-p--bottom .ov-pstats--6 .ov-stat dd { font-size: 26px; margin-top: 3px; }
/* Bottom dashboard: next over last, each one line wide enough for a long name. */
.ov-p--bottom .ov-pcards { flex: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
.ov-p--bottom .ov-pcards .ov-card { padding: 8px 12px; column-gap: 12px; align-items: center; align-content: center; }
.ov-p--bottom .ov-pcards .ov-art { width: 42px; height: 56px; border-radius: 6px; }
.ov-p--bottom .ov-pcards .ov-card__label { font-size: 11px; }
.ov-p--bottom .ov-pcards .ov-card__game { margin-top: 2px; font-size: 17px; line-height: 1.2; }
.ov-p--bottom .ov-pcards .ov-card__meta { margin-top: 1px; font-size: 14px; }
.ov-p--bottom .ov-pcards .ov-card__x { font-size: 17px; }
/* Bottom table: the hunt and two numbers on the left, then the pinned bonus and two more (at 960 wide). */
.ov-p--bottom.ov--table .ov-body { display: grid; grid-template-columns: 258px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 22px; }
.ov-p--bottom.ov--table .ov-ph { grid-column: 1; grid-row: 1; width: auto; }
.ov-p--bottom.ov--table .ov-ph .ov-count { margin-top: 8px; font-size: 30px; }
.ov-p--bottom.ov--table .ov-pstats--2 { grid-column: 1; grid-row: 2; align-self: end; padding: 0; border: 0; gap: 0 16px; }
.ov-p--bottom.ov--table .ov-pstats--2 .ov-stat dt { font-size: 15px; }
.ov-p--bottom.ov--table .ov-pstats--2 .ov-stat dd { font-size: 30px; margin-top: 2px; }
.ov-p--bottom .ov-bonuses { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.08); }

/* Sidebar: one column. */
.ov-p--sidebar .ov-ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 14px; }
.ov-p--sidebar .ov-ph .ov-progress { grid-column: 1 / -1; margin-top: 12px; }
.ov-p--sidebar .ov-ph .ov-count { padding-top: 2px; }
.ov-p--sidebar .ov-pstats { margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ov-p--sidebar .ov-pstats--6 .ov-stat dd { font-size: 27px; }
.ov-p--sidebar .ov-pstats--2 { margin-top: 14px; }
.ov-p--sidebar .ov-pstats--2 .ov-stat dd { font-size: 30px; }
.ov-p--sidebar .ov-pcards { display: grid; gap: 10px; margin-top: 18px; }
.ov-p--sidebar .ov-pcards .ov-card { padding: 12px 14px; }
.ov-p--sidebar .ov-pcards .ov-card__game { font-size: 17px; }
.ov-p--sidebar .ov-pcards .ov-card__meta { font-size: 15px; }
.ov-p--sidebar .ov-bonuses { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 14px; }
.ov-p--sidebar .ov-foot { padding-top: 8px; }

/* Bonuses: NEXT first, then a page of the others (overlay.js). */
.ov-bonuses__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
.ov-bonuses__range { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-bonuses__head .ov-brand { font-size: 12px; }
.ov-bonuses__head .ov-brand img { width: 18px; height: 18px; }
.ov-blist, .ov-bpin { list-style: none; margin: 0; padding: 0; }
.ov-blist { will-change: transform; }
.ov-bpin[hidden] { display: none !important; }
.ov-bview { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.ov-bcard { position: relative; min-width: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; }
.ov-bcard.is-next { border-color: rgba(109, 74, 255, 0.5); background: rgba(109, 74, 255, 0.12); }
.ov-bcard__n { font-size: 16px; font-weight: 700; color: var(--fg-tertiary); }
.ov-bcard__game { font-weight: 700; color: var(--fg-primary); min-width: 0; overflow: hidden; }
.ov-bcard__bet { font-size: 16px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-bcard__x { font-family: var(--font-display); font-weight: 800; font-stretch: 106%; color: var(--fg-primary); white-space: nowrap; }
.ov-bcard__win { font-size: 16px; color: var(--fg-secondary); white-space: nowrap; }
.ov-bcard.is-next .ov-bcard__x { font-family: var(--font-ui); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-text); }
.ov-bcard.is-pending .ov-bcard__x { color: var(--fg-tertiary); }
.ov-bcard .ov-art { border-radius: 6px; }

/* Bottom: the pinned card, then the others in one row that scrolls across.
   Cover and result on top, the name under them. Two cards beside the pinned
   one at 960 wide, each large enough to read on a phone. No range line or
   level badge: the room goes to the cards. */
.ov-p--bottom .ov-bonuses__head { display: none; }
.ov-p--bottom .ov-bonuses__body { flex: 1; display: flex; gap: 10px; margin-top: 0; min-height: 0; }
.ov-p--bottom .ov-bpin { flex: none; width: 198px; display: flex; }
.ov-p--bottom .ov-bpin > .ov-bcard { flex: 1; }
.ov-p--bottom .ov-bview { flex: 1; }
.ov-p--bottom .ov-blist { display: flex; gap: 10px; height: 100%; }
.ov-p--bottom .ov-blist > .ov-bcard { flex: none; width: 198px; }
.ov-p--bottom .ov-bview.has-after { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ov-p--bottom .ov-bview.has-before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.ov-p--bottom .ov-bview.has-before.has-after { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ov-p--bottom .ov-bcard { display: grid; grid-template-columns: 45px minmax(0, 1fr); grid-template-rows: 60px auto auto; column-gap: 11px; align-content: start; padding: 9px 11px; overflow: hidden; }
.ov-p--bottom .ov-bcard .ov-art { grid-row: 1; width: 45px; height: 60px; }
.ov-p--bottom .ov-bcard__top { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ov-p--bottom .ov-bcard__x { font-size: 30px; line-height: 1.05; margin-top: 1px; }
.ov-p--bottom .ov-bcard__n, .ov-p--bottom .ov-bcard__win, .ov-p--bottom .ov-bcard__bet { font-size: 17px; }
.ov-p--bottom .ov-bcard.is-next .ov-bcard__x { font-size: 16px; }
/* Two full lines, descenders included: the row never shrinks below them. */
.ov-p--bottom .ov-bcard__n, .ov-p--bottom .ov-bcard__win { line-height: 1.2; }
.ov-p--bottom .ov-bcard__game { grid-column: 1 / -1; margin-top: 5px; min-height: 2.5em; font-size: 19px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ov-p--bottom .ov-bcard__bet { grid-column: 1 / -1; margin-top: 2px; }

/* Sidebar rows: number, cover, name over bet, X over win. */
/* Sidebar: the pinned row, then the others in a column that scrolls down. */
.ov-p--sidebar .ov-bonuses__body { flex: 1; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; min-height: 0; }
.ov-p--sidebar .ov-bview { flex: 1; }
.ov-p--sidebar .ov-blist { display: grid; gap: 5px; }
.ov-p--sidebar .ov-bview.has-after { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.ov-p--sidebar .ov-bview.has-before { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.ov-p--sidebar .ov-bview.has-before.has-after { -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ov-p--sidebar .ov-bcard { display: grid; grid-template-columns: 32px 36px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; height: 58px; padding: 0 12px 0 8px; }
.ov-p--sidebar .ov-bcard__game, .ov-p--sidebar .ov-bcard__bet { display: block; }
.ov-p--sidebar .ov-bcard .ov-art { width: 36px; height: 48px; }
.ov-p--sidebar .ov-bcard__n { text-align: right; }
.ov-p--sidebar .ov-bcard__main { min-width: 0; }
.ov-p--sidebar .ov-bcard__game { font-size: 19px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.ov-p--sidebar .ov-bcard__res { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.ov-p--sidebar .ov-bcard__x { font-size: 25px; line-height: 1.1; }
.ov-p--sidebar .ov-bcard__win { font-size: 16px; }

/* Current game per placement: the same card, cover at full height. */
.ov-p--bottom.ov--current .ov-now { gap: 18px; }
.ov-p--bottom .ov-art--now { width: 123px; height: 164px; border-radius: 10px; }
/* Bigger name, studio and bet for phones. No level badge on this card: the room
   goes to the bet, and the ante note sits beside it when it fits. */
.ov-p--bottom .ov-now__label { font-size: 14px; }
.ov-p--bottom .ov-now__game { font-size: 32px; line-height: 1.15; margin-top: 4px; }
.ov-p--bottom .ov-now__provider { margin-top: 5px; font-size: 20px; }
.ov-p--bottom .ov-now__bet-label { font-size: 16px; letter-spacing: 0.06em; }
.ov-p--bottom .ov-now__bet-value { font-size: 32px; }
.ov-p--bottom .ov-now__ante { flex-basis: auto; font-size: 17px; }
.ov-p--bottom .ov-now__demo { height: 24px; font-size: 13px; }
.ov-p.ov--current .ov-brand { display: none; }
.ov-p--bottom .ov-now__placeholder img { width: 52px; height: 52px; }
.ov-p--sidebar.ov--current .ov-now { gap: 14px; }
.ov-p--sidebar .ov-art--now { width: 99px; height: 132px; border-radius: 9px; }
.ov-p--sidebar .ov-now__label { font-size: 13px; }
.ov-p--sidebar .ov-now__game { font-size: 25px; line-height: 1.15; margin-top: 4px; }
.ov-p--sidebar .ov-now__provider { font-size: 17px; margin-top: 4px; }
.ov-p--sidebar .ov-now__bet-label { font-size: 14px; letter-spacing: 0.06em; }
.ov-p--sidebar .ov-now__bet-value { font-size: 27px; }
.ov-p--sidebar .ov-now__ante { flex-basis: auto; font-size: 15px; }
.ov-p--sidebar.ov--current .ov-brand { font-size: 11px; }
.ov-p--sidebar.ov--current .ov-brand img { width: 16px; height: 16px; }
.ov-p--sidebar .ov-now__placeholder img { width: 44px; height: 44px; }
.ov-p .ov-tile.ov-art--now { font-size: 36px; }

/* Idle / off: one quiet line, sized per placement. */
.ov-p--sidebar .ov-empty { font-size: 18px; }

/* Stream overlay modules (overlay-module.php, overlay-modules.js): Chat,
   Promotions and Social links, each its own Browser Source. Recommended
   Sidebar sizes: chat 400×540, promotions 400×190, social links 400×92.
   Bottom: chat 420×200, promotions 420×200, social links 260×200, compact
   so two or three fit one row beside the hunt layouts. The panel fills
   whatever size the source is, so a streamer can make one shorter, narrower
   or wider in OBS: Bottom sizes follow the width (vw), short Sidebar
   sources get the compact rules at the end. */
.ovm-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.ovm-panel { --k: 1; width: 100vw; height: 100vh; padding: 16px 18px; }
/* Sidebar social banner: the link starts at the left, in line with the promotion logo, with room on the right for the dots. */
.ovm-p--sidebar.ovm--socials .ovm-panel { padding: 14px 40px 14px 18px; }
.ovm-p--bottom.ovm--chat .ovm-panel { padding: 14px 18px; }
.ovm-p--bottom.ovm--promos .ovm-panel { padding: 18px; }
.ovm-p--bottom.ovm--socials .ovm-panel { padding: 18px 14px; }

/* Off: one quiet line. A chat with no channel yet, and promotions or links with nothing turned on, show nothing at all. */
.ovm-empty { display: none; }
body.ovm[data-status="off"] .ovm-empty { display: flex; align-items: center; flex: 1; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--fg-label); }
body.ovm[data-status="off"] .ovm-panel { background: rgba(10, 10, 12, 0.6); }
body.ovm[data-status="off"] :is(.ovm-chat, .ovm-chat__where, .ovm-rot, .ovm-dots) { display: none; }
/* Promotions or links with nothing turned on draw nothing. A chat with no channel keeps its empty panel (background and frame, no text). */
body.ovm[data-status="empty"] .ovm-panel { visibility: hidden; }
.ovm--socials .ovm-empty { font-size: 15px; }

/* Demo chat on a member's own link: the label sits in the corner, out of the text's way. */
.ovm-chip { position: absolute; top: 10px; right: 12px; z-index: 3; height: 18px; font-size: 10px; }
.ovm-chip:empty { display: none; }

/* Chat: newest at the bottom, older lines fade out at the top edge. */
.ovm--chat .ovm-panel { background: rgba(10, 10, 12, calc(var(--ovm-bg, 0.8) * 1.075)); border-color: rgba(255, 255, 255, calc(var(--ovm-bg, 0.8) * 0.1)); box-shadow: 0 10px 30px rgba(0, 0, 0, calc(var(--ovm-bg, 0.8) * 0.44)); }
.ovm-chat__where { flex: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 90px; }
.ovm-chat__where:empty { display: none; }
.ovm-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.42em; list-style: none; margin: 6px 0 0; padding: 0; overflow: hidden; font-size: 20px; line-height: 1.32; -webkit-mask-image: linear-gradient(transparent, #000 36px); mask-image: linear-gradient(transparent, #000 36px); }
body[data-size="s"] .ovm-chat { font-size: 17px; }
body[data-size="l"] .ovm-chat { font-size: 24px; }
.ovm-p--bottom .ovm-chat { font-size: 19px; -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.ovm-p--bottom[data-size="s"] .ovm-chat { font-size: 16px; }
.ovm-p--bottom[data-size="l"] .ovm-chat { font-size: 22px; }
.ovm-msg { flex: none; overflow-wrap: anywhere; color: var(--fg-primary); animation: ovm-in 0.35s ease-out both; transition: opacity 0.6s ease; }
.ovm-msg.is-gone { opacity: 0; }
@keyframes ovm-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
	.ovm-msg, .ovm-item { animation: none; transition: none; }
}
.ovm-msg__name { font-weight: 800; margin-right: 0.4em; }
.ovm-msg__name::after { content: ":"; color: var(--fg-tertiary); font-weight: 600; }
.ovm-msg__text { font-weight: 500; }
.ovm-msg__text.is-action { font-style: italic; color: var(--fg-secondary); }
.ovm-emote { height: 1.4em; width: auto; vertical-align: -0.35em; margin: 0 0.05em; }
.ovm-chat__note { flex: none; font-size: 14px; font-weight: 600; color: var(--fg-tertiary); }
/* With a light panel or none, the text carries its own shadow so it reads over gameplay. */
body.is-bg-low .ovm-msg, body.is-bg-low .ovm-chat__where { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6); }

/* Promotions and Social links: one item at a time. The old one fades out
   before the new one comes in, so two never overlap. */
.ovm-rot { position: relative; flex: 1; min-height: 0; }
.ovm-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.ovm-item.is-on { opacity: 1; transform: none; transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; }
.ovm-item.is-out { opacity: 0; transform: translateY(-6px); }
/* A single social link is simply shown. Promotions keep their fade. */
.ovm--socials .ovm-rot.is-still .ovm-item { transition: none; }
.ovm-item__text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.ovm-item__text > * { flex: none; min-width: 0; }
.ovm-dots { position: absolute; right: 14px; bottom: 9px; display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.ovm-dots li { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 0.7s ease; }
.ovm-dots li.is-on { background: var(--accent-text); }

/* Promotion card: logo, sponsor, offer, code, call to action. */
.ovm-promo__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.ovm-promo__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.ovm-promo__logo.is-initials { font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: 40px; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.86); background: radial-gradient(120% 80% at 30% 0%, rgba(109, 74, 255, 0.3), transparent 65%), linear-gradient(165deg, #1d1b26, #121117); }
.ovm-promo__name { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovm-promo__offer { margin-top: 4px; font-size: calc(19px * var(--k)); line-height: 1.25; font-weight: 750; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ovm-promo__foot { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ovm-promo__code { display: flex; align-items: baseline; gap: 8px; max-width: 100%; margin-top: 8px; white-space: nowrap; overflow: hidden; }
.ovm-promo__code-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); }
.ovm-promo__code-value { min-width: 0; padding: 2px 8px; border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-stretch: 106%; font-size: calc(20px * var(--k)); letter-spacing: 0.02em; background: rgba(109, 74, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(109, 74, 255, 0.4); overflow: hidden; text-overflow: ellipsis; }
.ovm-promo__cta { margin-top: 6px; font-size: calc(14px * var(--k)); font-weight: 600; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovm-p--sidebar .ovm-promo { gap: 14px; }
.ovm-p--sidebar .ovm-promo__logo { width: 104px; height: 104px; padding: 8px; }
.ovm-p--sidebar .ovm-promo__logo.is-initials { font-size: 34px; }
.ovm-p--sidebar .ovm-promo__offer { font-size: calc(17px * var(--k)); }
.ovm-p--sidebar .ovm-promo__code-value { font-size: calc(18px * var(--k)); }
.ovm-p--sidebar .ovm-promo__cta { font-size: calc(13px * var(--k)); }
/* Sidebar card 170 high or more: logo and sponsor as a header, the offer
   across the full width (two lines at most), then the code and the call to
   action. A site card shows its web address as the main line and the
   description under it. Lines are limited rather than the text shrunk. */
@media (min-height: 170px) {
	.ovm-p--sidebar.ovm--promos .ovm-panel { padding: 12px 18px; }
	.ovm-p--sidebar .ovm-promo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: 0 12px; }
	.ovm-p--sidebar .ovm-promo .ovm-item__text { display: contents; }
	.ovm-p--sidebar .ovm-promo .ovm-item__text > * { grid-column: 1 / -1; }
	.ovm-p--sidebar .ovm-promo__logo { width: 42px; height: 42px; padding: 4px; border-radius: 10px; }
	.ovm-p--sidebar .ovm-promo__logo.is-initials { padding: 0; font-size: 18px; }
	.ovm-p--sidebar .ovm-promo__logo +.ovm-item__text > .ovm-promo__name { grid-column: 2; }
	.ovm-p--sidebar .ovm-promo__name { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--fg-primary); }
	.ovm-p--sidebar .ovm-promo__offer { margin-top: 8px; font-size: calc(22px * var(--k)); line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.ovm-p--sidebar .ovm-promo__foot { margin-top: 8px; }
	/* The whole code line reads as one: the word Code at nearly the code's own size. */
	.ovm-p--sidebar .ovm-promo__code { align-items: center; gap: 10px; margin-top: 0; }
	.ovm-p--sidebar .ovm-promo__code-label { font-size: calc(20px * var(--k)); font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--fg-primary); }
	.ovm-p--sidebar .ovm-promo__code-value { font-size: calc(24px * var(--k)); padding: 1px 10px; }
	.ovm-p--sidebar .ovm-promo__cta { max-width: 100%; margin-top: 0; font-size: calc(17px * var(--k)); }
	.ovm-p--sidebar .ovm-promo__code + .ovm-promo__cta { margin-top: 5px; }
	.ovm-p--sidebar .ovm-promo.is-site .ovm-promo__foot { order: 1; }
	.ovm-p--sidebar .ovm-promo.is-site .ovm-promo__offer { order: 2; margin-top: 5px; font-size: calc(16px * var(--k)); line-height: 1.3; font-weight: 600; color: var(--fg-secondary); }
	.ovm-p--sidebar .ovm-promo.is-site .ovm-promo__cta { font-family: var(--font-display); font-size: calc(26px * var(--k)); line-height: 1.15; font-weight: 800; font-stretch: 106%; color: var(--accent-text); }
}
/* Bottom card: the logo takes about a third of the width (up to the full
   height), the offer and the code get the rest. */
.ovm-p--bottom .ovm-promo { gap: 16px; }
.ovm-p--bottom .ovm-promo__logo { width: clamp(88px, 31vw, 164px); height: clamp(88px, 31vw, 164px); padding: 10px; }
.ovm-p--bottom .ovm-promo__logo.is-initials { font-size: clamp(30px, 9vw, 40px); }
.ovm-p--bottom .ovm-promo__name { font-size: 14px; }
.ovm-p--bottom .ovm-promo__offer { font-size: calc(22px * var(--k)); line-height: 1.2; }
.ovm-p--bottom .ovm-promo__code-label { font-size: calc(18px * var(--k)); font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--fg-primary); }
.ovm-p--bottom .ovm-promo__code-value { font-size: calc(25px * var(--k)); }
.ovm-p--bottom .ovm-promo__cta { font-size: calc(16px * var(--k)); }
/* Under 360 wide the code drops its label, so the code itself stays whole. */
@media (max-width: 359px) {
	.ovm-p--bottom .ovm-promo__code-label { display: none; }
}

/* Social link: the platform's mark, its name, the member's handle. */
.ovm-social__icon { --ovm-c: #26252d; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; background: var(--ovm-c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ovm-social__icon.is-light { color: #0a0a0c; }
.ovm-social__icon svg { width: 56%; height: 56%; fill: currentColor; }
.ovm-social__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); white-space: nowrap; }
.ovm-social__handle { margin-top: 2px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sidebar banner: icon and handle as one group, at the left and centred in the height. */
.ovm-p--sidebar .ovm-social { justify-content: flex-start; gap: 16px; }
.ovm-p--sidebar .ovm-social .ovm-item__text { flex: 0 1 auto; height: auto; }
.ovm-p--sidebar .ovm-social__icon { width: 52px; height: 52px; }
.ovm-p--sidebar .ovm-social__label { font-size: 13px; line-height: 1.2; }
.ovm-p--sidebar .ovm-social__handle { margin-top: 1px; font-size: calc(29px * var(--k)); line-height: 1.12; }
/* Bottom tile: the icon over the handle, centred, the icon following the width. */
.ovm-p--bottom .ovm-social { flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.ovm-p--bottom .ovm-social__icon { width: clamp(52px, 26vw, 72px); height: clamp(52px, 26vw, 72px); border-radius: 15px; }
.ovm-p--bottom .ovm-social .ovm-item__text { flex: none; height: auto; width: 100%; align-items: center; }
.ovm-p--bottom .ovm-social__label { font-size: 14px; }
.ovm-p--bottom .ovm-social__handle { max-width: 100%; font-size: calc(30px * var(--k)); }

/* Compact Sidebar sources (a short column beside a camera, say). Fewer chat
   lines and less empty panel before smaller text: the text sizes stay. */
@media (max-height: 460px) {
	.ovm-p--sidebar.ovm--chat .ovm-panel { padding: 12px 16px; }
	.ovm-p--sidebar .ovm-chat { margin-top: 4px; -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
	.ovm-p--sidebar .ovm-chat__where { font-size: 10px; }
	.ovm-p--sidebar.ovm--chat .ovm-chip { top: 9px; }
}
/* Promotion card under 170 high: the logo follows the height, code and call
   to action share one line. */
@media (max-height: 169px) {
	.ovm-p--sidebar.ovm--promos .ovm-panel { padding: 12px 14px; }
	.ovm-p--sidebar .ovm-promo { gap: 12px; }
	.ovm-p--sidebar .ovm-promo__logo { width: min(104px, calc(100vh - 40px)); height: min(104px, calc(100vh - 40px)); padding: 7px; border-radius: 10px; }
	.ovm-p--sidebar .ovm-promo__logo.is-initials { font-size: 28px; }
	.ovm-p--sidebar .ovm-promo__name { font-size: 11px; }
	.ovm-p--sidebar .ovm-promo__offer { margin-top: 2px; font-size: calc(16px * var(--k)); line-height: 1.2; }
	/* A call to action too long to sit beside the code takes its own line, so it is not cut. */
	.ovm-p--sidebar .ovm-promo__foot { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; }
	.ovm-p--sidebar .ovm-promo__code { flex: none; max-width: 100%; margin-top: 0; }
	.ovm-p--sidebar .ovm-promo__code-value { font-size: calc(17px * var(--k)); padding: 1px 7px; }
	.ovm-p--sidebar .ovm-promo__cta { flex: 1 0 auto; max-width: 100%; margin-top: 0; }
	.ovm-p--sidebar.ovm--promos .ovm-dots { right: 12px; bottom: 7px; }
}
/* Social strip under 80 high: the icon follows the height. */
@media (max-height: 79px) {
	.ovm-p--sidebar.ovm--socials .ovm-panel { padding: 9px 40px 9px 16px; }
	.ovm-p--sidebar .ovm-social { gap: 12px; }
	.ovm-p--sidebar .ovm-social__icon { width: calc(100vh - 18px); height: calc(100vh - 18px); border-radius: 9px; }
	.ovm-p--sidebar .ovm-social__label { font-size: 10px; line-height: 1.2; }
	.ovm-p--sidebar .ovm-social__handle { margin-top: 1px; font-size: calc(21px * var(--k)); line-height: 1.1; }
	.ovm-p--sidebar.ovm--socials .ovm-dots { right: 12px; bottom: 6px; }
}