/* Immersive play: build-time game cover (#play-cover) + runtime play layer
   (.play-layer, assets/play/play.mjs). Section colour = body[data-accent]. */

/* ── Cover ─────────────────────────────────────────────────────────── */
.play-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-end: var(--space-6);
  border-block-end: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  background:
    radial-gradient(ellipse 55% 85% at 82% 45%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 9%, var(--bg-raised)), color-mix(in oklab, var(--bg) 70%, transparent));
}
.play-cover__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-7);
}
@media (min-width: 900px) {
  .play-cover__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    min-block-size: min(46vh, 460px);
    padding-block: var(--space-7);
  }
}
.play-cover__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h1);
  line-height: 0.95;
  color: var(--text);
  text-wrap: balance;
}
.play-cover__tagline {
  margin: var(--space-3) 0 0 !important;
  max-inline-size: 56ch;
  color: var(--text-muted) !important;
  font-size: var(--step-1) !important;
  line-height: 1.45;
  text-align: start !important;
}
.play-cover__stats { display: flex; gap: var(--space-5); margin: var(--space-4) 0 0; }
.play-cover__stats[hidden] { display: none; }
/* Space for the runtime-filled rows is reserved at build time (no layout shift). */
.play-cover__stats { min-block-size: 3.1rem; }
.play-cover__stats.is-empty { visibility: hidden; }
.play-cover__modes:empty { min-block-size: 40px; }
.play-cover__stats dt { font-size: var(--step--1); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.play-cover__stats dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.play-cover__modes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.play-cover__modes[hidden] { display: none; }
.play-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  color: var(--text-muted);
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.play-chip:hover { border-color: color-mix(in oklab, var(--accent) 60%, var(--border-strong)); color: var(--text); }
.play-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); color: var(--text); }
.play-chip[aria-pressed="true"] > i { color: var(--accent); }
.play-cover__actions { margin-block-start: var(--space-5); }
.play-cover__play {
  min-block-size: 56px;
  padding-inline: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.play-cover__play:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--accent-ink); transform: translateY(-2px); }
/* Signature glow (tokens.css --neon) on the primary Play button's hover and press only. */
.play-cover__play:hover { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--neon) 75%, transparent); }
.play-cover__play:active { transform: translateY(0); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--neon) 80%, transparent); }
.play-cover__play:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.play-cover__visual { display: none; }
@media (min-width: 900px) {
  .play-cover__visual { display: grid; place-items: center; }
  .play-cover__art {
    inline-size: min(100%, 340px);
    block-size: auto;
    aspect-ratio: 1;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.7), 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
    transform: rotate(-3deg);
  }
  .play-cover--noart .play-cover__visual::before {
    content: '';
    inline-size: 260px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      repeating-radial-gradient(circle, color-mix(in oklab, var(--accent) 40%, transparent) 0 2px, transparent 2px 14px),
      radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
  }
}
@media (max-width: 899px) {
  .play-cover__art { display: none; }
}
.play-anchor { display: block; scroll-margin-block-start: calc(var(--header-stuck) + var(--space-4)); }

/* ── Layer ─────────────────────────────────────────────────────────── */
html.play-open, html.play-open body { overflow: hidden; }
.play-layer {
  position: fixed;
  inset: 0;
  z-index: 2500;                 /* above header and drawer, below site modals (3000) */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
}
.play-layer[hidden] { display: none; }
.play-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--quiz-surface,
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in oklab, var(--violet) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in oklab, var(--cyan) 12%, transparent), transparent 70%),
    var(--bg));
}
.play-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  background: linear-gradient(180deg, rgb(4 2 18 / 0.75), transparent);
}
.play-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
}
.play-bar__btn:hover { background: var(--surface-2); }
.play-bar__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.play-bar__btn--icon { inline-size: var(--tap); justify-content: center; padding: 0; }
.play-bar__btn[aria-pressed="true"] { color: var(--accent); }
.play-bar__logo { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-muted); text-decoration: none; }
.play-bar__logo:hover { color: var(--text); }
.play-bar__score { margin-inline: auto; display: grid; justify-items: center; line-height: 1; }
.play-bar__score.is-empty { visibility: hidden; }
.play-bar__label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.play-bar__score b { font-family: var(--font-display); font-size: var(--step-3); color: var(--text); font-variant-numeric: tabular-nums; }
.play-bar__score b.is-pop { animation: play-pop 260ms var(--ease); color: var(--accent); }
.play-bar__best { font-size: var(--step--1); color: var(--text-muted); }
.play-bar__tools { display: flex; gap: var(--space-1); }
@media (max-width: 599px) {
  .play-bar__btn span, .play-bar__logo { display: none; }
  .play-bar__btn[data-act="back"] { inline-size: var(--tap); justify-content: center; padding: 0; }
}
.play-slot {
  min-block-size: 0;
  display: grid;
  place-items: center;
  /* Oversized games must keep their first row inside the scroll origin. */
  align-items: start;
  align-items: safe center;
  padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
  overflow: auto;
  transition: filter var(--dur-med) var(--ease);
}
.play-slot:focus { outline: none; }
.play-slot > * { inline-size: min(100%, 1100px); margin: 0 !important; }
.play-hidden { display: none !important; }

/* ── How-to strip, countdown, sheets ──────────────────────────────── */
.play-howto {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-end: var(--space-5);
  z-index: 2;
  max-inline-size: min(320px, calc(100% - 2 * var(--gutter)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface-1) 92%, transparent);
  color: var(--text-muted);
  box-shadow: var(--shadow-2);
  animation: play-in 300ms var(--ease);
  pointer-events: none;           /* taps reach the game underneath */
  pointer-events: none;
}
.play-howto[hidden] { display: none; }
@media (max-width: 599px) {
  .play-howto { inset-block: calc(var(--tap) + var(--space-5)) auto; inset-inline: var(--gutter); max-inline-size: none; }
}
.play-howto b { color: var(--accent); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.play-howto ul { margin: var(--space-2) 0 0; padding-inline-start: 1.1em; list-style: disc; }
/* Keep the strip small whatever the game's copy: each line at most two lines tall. */
.play-howto { font-size: var(--step--1); line-height: 1.4; max-inline-size: min(300px, calc(100% - 2 * var(--gutter))); }
.play-howto li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.play-howto li + li { margin-block-start: var(--space-1); }
.play-countdown {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 12rem);
  color: var(--accent);
  pointer-events: none;
  text-shadow: 0 8px 40px color-mix(in oklab, var(--accent) 50%, transparent);
}
.play-countdown[hidden] { display: none; }
.play-countdown.is-tick { animation: play-tick 330ms var(--ease); }
.play-layer.is-sheet .play-slot { filter: blur(3px) brightness(0.55); }
.play-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 4;
  margin-inline: auto;
  inline-size: min(560px, 100%);
  padding: var(--space-6) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-block-end: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, var(--surface-1)), var(--surface-1));
  box-shadow: 0 -20px 50px -20px rgb(0 0 0 / 0.7);
  text-align: center;
  animation: play-up 320ms var(--ease);
}
.play-sheet[hidden] { display: none; }
.play-sheet h2, .play-finish__kicker { margin: 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: var(--text); }
.play-finish__score { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.play-finish__best { margin: var(--space-2) 0 0; font-weight: 700; color: var(--amber); }
/* Signature neon: the result numeral and the new-best line are the live
   readout of the run; the sheet's chrome stays on the soft palette. */
.play-finish__score { color: var(--neon); text-shadow: 0 6px 30px color-mix(in srgb, var(--neon) 40%, transparent); }
.play-finish__best { color: var(--neon-amber); }
.play-finish__best[hidden] { display: none; }
.play-sheet__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-5); }
.play-sheet .btn { min-block-size: var(--tap); }
.play-sheet__primary { background: var(--accent) !important; color: var(--accent-ink) !important; min-inline-size: 12rem; }
.play-sheet__primary:hover { background: color-mix(in srgb, var(--accent) 88%, white) !important; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--neon) 75%, transparent); }
.play-sheet__primary:active { box-shadow: 0 5px 16px -6px color-mix(in srgb, var(--neon) 80%, transparent); }
.play-more { margin-block-start: var(--space-5); }
.play-more h3 { margin: 0 0 var(--space-2); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.play-more ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.play-more a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
}
.play-more a:hover { border-color: var(--accent); color: var(--text); }
.play-more i { color: var(--accent); }

/* ── Juice ─────────────────────────────────────────────────────────── */
.play-fx { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.play-spark { position: absolute; inline-size: 7px; block-size: 7px; border-radius: 50%; animation: play-spark 650ms var(--ease) forwards; }
.play-float { position: absolute; transform: translateX(-50%); font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); animation: play-float 700ms var(--ease) forwards; }
.play-shake { animation: play-shake 380ms var(--ease); }
@keyframes play-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes play-tick { 0% { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 0.9; } }
@keyframes play-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes play-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes play-spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
@keyframes play-float { to { transform: translate(-50%, -34px); opacity: 0; } }
@keyframes play-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .play-cover__play, .play-chip, .play-slot { transition: none; }
  .play-sheet, .play-howto, .play-bar__score b.is-pop, .play-countdown.is-tick { animation: none; }
}

/* ── Quiz template (pages below a cover) ──────────────────────────────
   Keyed on body[data-play] (set by the build) rather than the runtime's
   .has-play, so the page paints in its final layout (no shift when
   play.mjs boots).
   Every quiz page under its cover reads the same: optional how-to steps,
   one stats row (stats left, reset right), one glass game panel, a quiet
   disclaimer. Works for the parameters, Steam, Size and arcade layouts. */
body[data-play] :is(.parameters-page, .steam-page, .gts-page) { display: grid; gap: var(--space-4); }
body[data-play] :is(.parameters-heading, .steam-heading, .gts-heading, .wheel-heading):not(:has(h1, h2, p)) { display: contents; }
body[data-play] :is(.parameters-heading, .steam-heading, .gts-heading, .wheel-heading):not(:has(h1, h2, p)):empty { display: none; }
body[data-play] .howto-strip { justify-content: flex-start !important; margin: 0 !important; }
body[data-play] .parameters-statrow {
  display: flex !important;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
}
body[data-play][data-experience="quizzes"] { --play-panel-padding: 0px; --play-panel-background: transparent; }
body[data-play] :is(.parameters-panel, .steam-game, .gts, .arcade-shell, .wheel-panel) {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: var(--play-panel-padding, clamp(var(--space-4), 3vw, var(--space-7))) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--play-panel-background, var(--quiz-surface, linear-gradient(125deg, color-mix(in srgb, var(--accent) 13%, var(--bg-raised)), var(--bg-raised) 65%))) !important;
  box-shadow: none !important;
}
/* Readable measure for review/clue content inside the full-width panel. */
body[data-play] .steam-game > * { max-inline-size: 860px; margin-inline: auto; }
body[data-play] :is(.parameters-disclaimer, .steam-disclaimer, .gts-disclaimer) {
  margin: 0 !important;
  max-inline-size: 80ch;
  color: var(--text-faint) !important;
  font-size: var(--step--1) !important;
  text-align: start !important;
}
.play-slot :is(.parameters-page, .steam-page, .gts-page) { inline-size: min(100%, 1100px) !important; margin-inline: auto !important; }

/* ── Compact cover (v3): a slim band, no artwork ──────────────────────
   Title + one-line tagline on the left, mode chips + Play on the right;
   the game sits directly below on the first screen. */
.play-cover--compact { margin-block-end: var(--space-4); background: none; border: 0; }
.play-cover--compact .play-cover__inner {
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 0 !important;
  padding-block: var(--space-5) var(--space-4) !important;
  gap: var(--space-3);
}
.play-cover--compact .play-cover__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  align-items: center;
}
/* The side block holds the mode chips and Play + its hint line as one column, so the chips and the
   button keep one steady gap whatever the title and tagline heights are. */
.play-cover--compact .play-cover__side { display: grid; gap: var(--space-3); justify-items: start; min-inline-size: 0; }
@media (min-width: 900px) {
  .play-cover--compact .play-cover__text { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title side" "tag side" "stats side"; }
  .play-cover--compact .play-cover__title { grid-area: title; }
  .play-cover--compact .play-cover__tagline { grid-area: tag; }
  .play-cover--compact .play-cover__stats { grid-area: stats; }
  .play-cover--compact .play-cover__side { grid-area: side; justify-items: end; max-inline-size: 36rem; }
  .play-cover--compact .play-cover__modes { justify-content: flex-end; }
}
.play-cover--compact .play-cover__title { font-size: var(--step-h1); }
.play-cover--compact .play-cover__tagline {
  margin: 0 !important;
  font-size: var(--step-0) !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.play-cover--compact .play-cover__stats { margin: 0; min-block-size: 0; }
.play-cover--compact .play-cover__stats.is-empty { display: none; }
.play-cover--compact .play-cover__modes { margin: 0; }
.play-cover--compact .play-cover__modes:empty:not([hidden]) { min-block-size: 40px; }
.play-cover--compact .play-cover__actions { margin: 0; }
.play-cover--compact .play-cover__play { min-block-size: 48px; padding-inline: var(--space-6); font-size: var(--step-1); }

/* Play bar: the primary action names full screen; a quiet link plays in place. */
.play-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.play-cover--compact .play-cover__actions { flex-direction: column; align-items: flex-end; }
@media (max-width: 899px) { .play-cover--compact .play-cover__actions { align-items: flex-start; } }
.play-cover__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--step--1); }
.play-cover__hint { color: var(--text-faint); }
.play-cover__inline { color: var(--text-muted); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); text-underline-offset: 0.2em; }
.play-cover__inline:hover { color: var(--text); text-decoration-color: var(--accent); }
.play-cover__inline i { font-size: 0.8em; }
.play-cover__play > i { font-size: 0.8em; }

/* Requested instructions stay in the paused sheet, with complete text. */
.play-sheet { max-block-size: calc(100dvh - max(var(--space-2), env(safe-area-inset-top, 0px))); overflow-y: auto; overscroll-behavior-y: contain; }
.play-howto.is-expanded {
  position: static; inline-size: 100%; max-inline-size: none;
  margin-block: var(--space-4); padding: var(--space-4);
  background: var(--surface-2); box-shadow: none;
  font-size: 1rem; line-height: 1.5; text-align: start;
  pointer-events: auto; animation: none;
}
.play-howto.is-expanded li { display: list-item; -webkit-line-clamp: unset; overflow: visible; }

/* ── Finish sheet router ──────────────────────────────────────────────
   Play again is the one primary action (full width, first); Share and Back
   sit quietly under it. .play-finish__share is the share group: further
   share actions go inside it. Then "Up next": three picture cards. */
.play-finish__xp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  min-block-size: 36px;
  padding: 4px var(--space-3) 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--step--1);
  text-decoration: none;
}
.play-finish__xp[hidden] { display: none; }
.play-finish__xp b { padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--neon-amber) 16%, transparent); color: var(--neon-amber); font-weight: 700; }
.play-finish__xp:hover { border-color: var(--border-strong); color: var(--text); }
.play-finish__xp:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.play-finish__actions { flex-direction: column; align-items: center; gap: var(--space-3); }
.play-finish__again { inline-size: min(100%, 22rem); min-block-size: 52px !important; font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.03em; text-transform: uppercase; }
:lang(ar) .play-finish__again { letter-spacing: 0; text-transform: none; }
.play-finish__secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
/* The share group keeps its own container for extra share actions, but its
   buttons flow in the same row as Back. */
.play-finish__share { display: contents; }
.play-next { margin-block-start: var(--space-5); }
.play-next h3 { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
:lang(ar) .play-next h3 { letter-spacing: 0; }
.play-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.play-next__card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  block-size: 100%;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.play-next__card:hover { border-color: color-mix(in srgb, var(--tone, var(--accent)) 60%, var(--border-strong)); background: var(--surface-3); transform: translateY(-2px); }
.play-next__card:active { transform: translateY(0); }
.play-next__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.play-next__art { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; max-inline-size: 104px; overflow: hidden; border-radius: var(--radius-md); background: color-mix(in srgb, var(--tone, var(--accent)) 14%, var(--surface-1)); }
.play-next__art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.play-next__art--icon i { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--tone, var(--accent)); }
.play-next__name { font-weight: 600; font-size: var(--step--1); line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.play-next__group { font-size: 0.75rem; color: var(--text-faint); text-align: center; }
@media (max-width: 380px) { .play-next__card { padding-inline: 4px; } .play-next__group { display: none; } }
@media (prefers-reduced-motion: reduce) { .play-next__card, .play-cover__play { transition: none; } .play-next__card:hover { transform: none; } }

/* Embed mode (?embed=1 in the home page's play window, assets/play/embed.mjs): only the play layer shows, from
   the first paint (html[data-embed] comes from the head boot script); leaving is the parent page's job. */
html[data-embed] body > :not(.play-layer):not(script):not(template):not(dialog) { display: none !important; }
html[data-embed] .play-layer :is([data-act="back"], [data-act="exit"], [data-act="fullscreen"], .play-bar__logo) { display: none !important; }
/* The frame is the stage: one row (no bar band), the pause button floats at the top end, no score readout
   (the window is small and the games show their own score). */
html[data-embed] .play-layer { grid-template-rows: minmax(0, 1fr); }
html[data-embed] .play-bar { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 3; padding: var(--space-1); background: none; }
html[data-embed] .play-bar__score { display: none; }
html[data-embed] .play-slot { padding-block: var(--space-2); }
/* Games that run their own flow (quizzes, the wheel) keep no shell bar in the frame: there is nothing to pause
   and it would sit on their own corner buttons. Shell games (Block Blast) keep the pause button at the top start,
   where their boards keep the corner free (score centred, best at the end). */
html[data-embed] .play-layer--own-flow .play-bar { display: none; }
html[data-embed] .play-bar { inset-inline: 0 auto; }

/* ── Embed: each hosted game fits the frame without scrolling, sized from --play-slot-h ── */
html[data-embed] body[data-play] :is(.parameters-panel, .steam-game, .gts, .wheel-panel) { padding: var(--space-3) !important; }
html[data-embed] body[data-play] :is(.parameters-page, .steam-page, .gts-page) { gap: var(--space-2); }
html[data-embed] :is(.howto-strip, .parameters-disclaimer, .steam-disclaimer, .gts-disclaimer, .song-rank, .steam-stats-box, .steam-progress, .gts-keys) { display: none !important; }
/* Guess the Size: the stage takes whatever the cards and controls leave. */
html[data-embed] .play-slot .gts-page,
html[data-embed] .play-slot .gts { display: flex; flex-direction: column; block-size: var(--play-slot-h, 100%); min-block-size: 0; }
html[data-embed] .play-slot .gts-page > :not(.gts) { flex: none; }
html[data-embed] .play-slot .gts { flex: 1 1 auto; }
html[data-embed] .play-slot #gts-play { flex: 1 1 auto; display: flex; flex-direction: column; min-block-size: 0; }
html[data-embed] .play-slot #gts-play > * { flex: none; }
html[data-embed] .play-slot #gts-play > .gts-stage { flex: 1 1 0; block-size: auto !important; min-block-size: 140px; }
html[data-embed] .play-slot .gts-stage canvas { position: absolute; inset: 0; }
/* Guess the Song: only the guesses made so far take a row. */
html[data-embed] .song-history .song-slot:not(.skip):not(.wrong) { display: none; }
/* Guess the Game: opened reviews scroll inside their list. */
html[data-embed] .steam-game .reviews-list { max-block-size: max(120px, calc(var(--play-slot-h, 560px) - 360px)); overflow-y: auto; }
/* Character Wheel: the wheel alone (its other views, history and leaderboard live on the full page). */
html[data-embed] :is(.wheel-tabs, .wheel-fate-info, .wheel-login-gate, .wheel-click-hint, .wheel-progress) { display: none !important; }
html[data-embed] .wheel-main { padding-block: 0 !important; }
html[data-embed] .wheel-canvas-wrap {
  inline-size: min(88vw, 520px, calc(var(--play-slot-h, 560px) - 235px));
  block-size: min(88vw, 520px, calc(var(--play-slot-h, 560px) - 235px));
}

/* ── Embed: one console (Task 14b). The home page's window is the stage: a Deck surface with one radius and the
   mode bar above it. Inside the frame every game drops its outer card, border, glow and shadow and sits edge to
   edge with the same inner padding; its playfield (Size's canvas, Block Blast's board, Song's player) keeps its own
   look. The frame is transparent, so the window's surface shows through. */
html[data-embed], html[data-embed] body { background: transparent !important; }
html[data-embed] .play-layer { background: transparent; }
html[data-embed] .play-backdrop { display: none; }
html[data-embed] .play-slot { padding: var(--space-4); }
html[data-embed] body[data-play] :is(.gts, .steam-game, .parameters-panel, .wheel-panel) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* Song's score strip and reset key: Deck tiles on the stage, no floating shadow. */
html[data-embed] :is(.parameters-statbar, .parameters-reset) { background: var(--surface-2) !important; border-color: var(--border) !important; box-shadow: none !important; }
html[data-embed] .steam-reset { box-shadow: none !important; }
/* Block Blast: its theme slab becomes the stage (no panel, radius or shadow); HUD and tray take Deck tones; the
   board keeps its theme. The theme picker stays on the full page. */
html[data-embed] .bb-game.bb-skin[data-theme] {
  --game-bg: transparent; --game-chrome: transparent; --game-surface: var(--surface-2); --game-panel: var(--surface-2);
  --game-border: var(--border); --game-ink: var(--text); --game-muted: var(--text-muted);
  --bb-tray: var(--surface-1); --bb-tray-border: 1px solid var(--border);
  border-radius: 0; box-shadow: none;
}
html[data-embed] .bb-shop { display: none; }
/* The board takes the stage (Task 17b): the card is one grid (its wrappers step aside) sized from the frame, which
   is the window. Wide windows: the board as tall as the stage, Score / Best, the combo line, the tray (three slots
   stacked) and the keys beside it. Narrow windows: Score / Best in one row, the board nearly the full width, the
   combo line and a slim tray under it. Score and Best are the same Deck tile. --bb-ring: the board's themed outline
   (8px) on both sides. */
html[data-embed].play-open .bb-play { inline-size: 100% !important; }
html[data-embed].play-open .bb-game { block-size: calc(100dvh - 2 * var(--space-4)); max-block-size: none; }
html[data-embed] .bb-game {
  --bb-ring: 16px; --bb-hud-h: 44px; --bb-msg-h: 20px; --bb-tray-h: 80px;
  --bb-size: min(calc(100vw - 2 * var(--space-4) - var(--bb-ring)), calc(100dvh - 2 * var(--space-4) - var(--bb-hud-h) - var(--bb-msg-h) - var(--bb-tray-h) - 3 * var(--space-2) - var(--bb-ring)), 560px);
  display: grid; grid-template-columns: calc(var(--bb-size) + var(--bb-ring)); grid-template-rows: var(--bb-hud-h) calc(var(--bb-size) + var(--bb-ring)) var(--bb-msg-h) var(--bb-tray-h);
  grid-template-areas: "hud" "board" "msg" "tray"; align-content: center; justify-content: center; gap: var(--space-2);
  touch-action: none;
}
html[data-embed] :is(.bb-area, .bb-wrap, .bb-stage) { display: contents; }
html[data-embed] .bb-hud { grid-area: hud; inline-size: auto; margin: 0; margin-inline-start: 36px; padding: 0; gap: var(--space-2); }
html[data-embed] :is(.bb-score, .bb-best) { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-inline-size: 0; block-size: var(--bb-hud-h); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); }
html[data-embed] :is(.bb-score, .bb-best) span { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; }
html[data-embed] :is(.bb-score, .bb-best) strong { color: var(--text); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: 0; }
html[data-embed] .bb-board { grid-area: board; place-self: center; inline-size: var(--bb-size); }
html[data-embed] :is(.bb-combo, .bb-scene-name) { grid-area: msg; place-self: center; margin: 0; block-size: var(--bb-msg-h); font-size: 15px; line-height: var(--bb-msg-h); }
html[data-embed] .bb-tray { grid-area: tray; block-size: auto; padding: 0; }
html[data-embed] .bb-keys { display: none; }
/* Pieces in the tray: up to five cells long, so a cell is a fifth of the slot at most. */
html[data-embed] .bb-piece { --bb-pc: min(clamp(14px, 4.7vw, 24px), calc((var(--bb-tray-h) - 8px) / 5)); inline-size: calc(var(--w) * var(--bb-pc)); block-size: calc(var(--h) * var(--bb-pc)); }
/* Short narrow stages (a phone's game tab, about 420-519px under the landing's mode bar; final gate 2): every game's
   slot padding halves and an empty message line folds to 0px (still a live region), so each game's controls stay inside the stage. Block
   Blast's board keeps its size (Score / Best, the combo line and the tray stay in); Guess the Song puts three stage
   keys in a row (two rows, not three, at 320px; points at 13px so "1 000 очк." stays on one line) and visually hides its "Your guess" label (the field keeps it as
   its name). */
@media (max-height: 519.98px) and (max-aspect-ratio: 4 / 3) {
  html[data-embed] .play-slot { padding-block: var(--space-2); }
  html[data-embed] :is(#guess-message, #parameters-message):empty { min-block-size: 0; block-size: 0; margin-block: 0; padding-block: 0; }
  html[data-embed] .song-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: var(--space-2); }
  html[data-embed] #parameters-form { margin-block-end: 0; }
  html[data-embed] .song-player2 { margin-block-end: var(--space-2); padding-block: 10px; }
  html[data-embed] .song-history { margin-block-end: var(--space-1); }
  html[data-embed] .song-stage small { font-size: .8125rem; }
  html[data-embed] #parameters-form > label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-embed].play-open .bb-game { block-size: calc(100dvh - 2 * var(--space-2)); }
  html[data-embed] .bb-game { --bb-size: min(calc(100vw - 2 * var(--space-4) - var(--bb-ring)), calc(100dvh - 2 * var(--space-2) - var(--bb-hud-h) - var(--bb-msg-h) - var(--bb-tray-h) - 3 * var(--space-2) - var(--bb-ring)), 560px); }
}
@media (min-aspect-ratio: 4 / 3) {
  html[data-embed] .bb-piece { --bb-pc: min(24px, calc((100dvh - 200px) / 15)); }
  html[data-embed] .bb-game {
    --bb-side: clamp(200px, 26vw, 280px);
    --bb-size: min(calc(100dvh - 2 * var(--space-4) - var(--bb-ring)), calc(100vw - 2 * var(--space-4) - var(--bb-ring) - var(--bb-side) - var(--space-6) - 88px), 640px);
    grid-template-columns: calc(var(--bb-size) + var(--bb-ring)) var(--bb-side); grid-template-rows: var(--bb-hud-h) var(--bb-msg-h) minmax(0, 1fr) auto;
    grid-template-areas: "board hud" "board msg" "board tray" "board keys"; column-gap: var(--space-6); row-gap: var(--space-3);
  }
  html[data-embed] .bb-hud { margin-inline-start: 0; }
  html[data-embed] .bb-board { grid-row: 1 / -1; }
  html[data-embed] .bb-tray { flex-direction: column; gap: var(--space-2); }
  html[data-embed] .bb-keys { display: block; grid-area: keys; margin: 0; }
}
@media (min-aspect-ratio: 4 / 3) and (pointer: coarse) { html[data-embed] .bb-keys { display: none; } }

/* ── Embed: a game that cannot reach its API (Task 17b) ──
   One calm panel (assets/play/embed.mjs calmError), drawn like the window's own loading state: the game's icon on a
   72px tile, one line, "Try again" and "Open full game". The game's error screen (heading, raw message) and its
   floating restart key and score strip step aside while it shows. Full pages keep their own error screen. */
.play-embed-calm:not([hidden]) { display: grid !important; place-content: center; justify-items: center; min-block-size: calc(var(--play-slot-h, 100dvh) - 2 * var(--space-4)); padding: var(--space-4); }
.play-embed-calm > :not(.play-embed-error) { display: none !important; }
html[data-embed] body:has(.play-embed-calm:not([hidden])) :is(.steam-reset, .parameters-statbar, .parameters-reset) { display: none !important; }
.play-embed-error { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.play-embed-error[hidden] { display: none; }
.play-embed-error__icon { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); font-size: 2rem; }
.play-embed-error p { margin: 0; max-inline-size: 36ch; color: var(--text-muted); font-size: var(--step-0); line-height: 1.5; }
.play-embed-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.play-embed-error__actions > * { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 44px; padding-inline: var(--space-5); border-radius: var(--radius-md); font: 600 var(--step-0)/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.play-embed-error__actions > [hidden] { display: none; }
.play-embed-error__retry { border: 0; background: var(--primary); color: var(--primary-ink); }
.play-embed-error__retry:hover { background: var(--primary-hover); }
.play-embed-error__open { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.play-embed-error__open:hover { background: var(--surface-2); color: var(--text); }
.play-embed-error__open i { color: var(--text-muted); font-size: 0.85em; }
[dir="rtl"] .play-embed-error__open i { transform: scaleX(-1); }
.play-embed-error__actions > :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Focused play uses the viewport as its stage, with one compact control bar.
   Keep the browser's optional fullscreen action and the inline game intact. */
html.play-open, html.play-open body { overscroll-behavior: none; }
html:not([data-embed]) .play-layer { block-size: 100dvh; }
html:not([data-embed]) .play-bar {
  min-inline-size: 0;
  padding-block: max(var(--space-2), env(safe-area-inset-top, 0px)) var(--space-2);
  padding-inline: max(var(--space-3), env(safe-area-inset-left, 0px)) max(var(--space-3), env(safe-area-inset-right, 0px));
  border-block-end: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
html:not([data-embed]) .play-bar__score { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 2px var(--space-2); min-inline-size: 0; }
html:not([data-embed]) .play-bar__score b { font-size: var(--step-2); line-height: 1; }
html:not([data-embed]) .play-bar__best { white-space: nowrap; }
html:not([data-embed]) .play-bar__tools { margin-inline-start: auto; flex-shrink: 0; }
.play-bar__btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
[dir="rtl"] .play-bar__btn[data-act="back"] > i { transform: scaleX(-1); }
html:not([data-embed]) .play-slot { padding: var(--space-3) max(var(--space-3), env(safe-area-inset-left, 0px)) max(var(--space-3), env(safe-area-inset-bottom, 0px)) max(var(--space-3), env(safe-area-inset-right, 0px)); overscroll-behavior: contain; }
@media (max-width: 599px) {
  html:not([data-embed]) .play-bar { gap: var(--space-1); }
  html:not([data-embed]) .play-bar__score { column-gap: var(--space-1); }
  html:not([data-embed]) .play-bar__best { flex-basis: 100%; text-align: center; font-size: 0.75rem; }
  html:not([data-embed]) .play-bar__label { font-size: 0.75rem; letter-spacing: 0.03em; }
  html:not([data-embed]) .play-slot { padding-inline: max(var(--space-2), env(safe-area-inset-left, 0px)) max(var(--space-2), env(safe-area-inset-right, 0px)); }
}
/* Quizzes retain their instrument (player, clues, answer form), without a
   second raised card between the player and the stage. */
html:not([data-embed]) .play-layer :is(.parameters-panel, .steam-game, .gts, .arcade-shell, .wheel-panel) {
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
html:not([data-embed]) .play-layer :is(.parameters-page, .steam-page, .gts-page) { gap: var(--space-3); }
html:not([data-embed]) .play-layer :is(.parameters-disclaimer, .steam-disclaimer, .gts-disclaimer, .song-rank) { display: none !important; }
html:not([data-embed]) .play-layer .howto-strip { gap: var(--space-2) var(--space-4); }
html:not([data-embed]) .play-layer .howto-step { padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-muted); line-height: 1.5; }
html:not([data-embed]) .play-layer .howto-chevron { display: none; }
html:not([data-embed]) .play-layer .parameters-statbar { border-radius: var(--radius-md); background: transparent; box-shadow: none; }
html:not([data-embed]) .play-layer .parameters-reset { border-radius: var(--radius-md); background: var(--quiz-raised, var(--surface-2)); box-shadow: none; backdrop-filter: none; }
html:not([data-embed]) .play-layer .song-history .song-slot:not(.skip):not(.wrong) { display: none; }
html:not([data-embed]) .play-layer .parameters-form { margin-inline: 0; border-radius: var(--radius-md); background: var(--bg-raised); backdrop-filter: none; }
@media (hover: none) {
  .play-cover__play:hover { transform: none; }
}


/* Quizzes remain inline on arrival; their compact cover keeps the optional
   fullscreen action and page heading available. */
.play-cover--direct .play-cover__inner { min-block-size: 0; padding-block: var(--space-4); }
html:not([data-embed]) .play-layer {
  inset-block-start: var(--play-viewport-top, 0px); inset-block-end: auto;
  block-size: var(--play-viewport-h, 100dvh);
}
.play-bar__title { min-inline-size: 0; color: var(--text); font: 600 var(--step-0)/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-layer:not([data-play-layout="game"]) .play-bar__score.is-empty { display: none; }
.play-layer:not([data-play-layout="game"]) .play-bar__logo { display: none; }
.play-menu-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block: var(--space-3) var(--space-5); }
.play-menu-modes[hidden] { display: none; }
.play-menu-mode { min-block-size: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: 600 1rem/1.35 var(--font-body); white-space: normal; touch-action: manipulation; }
.play-menu-mode[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); }
.play-menu-mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.play-menu-mode > i { margin-inline-end: .4em; }
html:not([data-embed]) .play-layer:not([data-play-layout="game"]) .play-slot { align-items: stretch; align-content: stretch; }
html:not([data-embed]) .play-layer:not([data-play-layout="game"]) .play-slot > :is(.parameters-page, .steam-page, .gts-page) { inline-size: 100% !important; max-inline-size: none; min-block-size: 0; }
html:not([data-embed]) .play-layer:not([data-play-layout="game"]) .howto-strip { display: none; }
.play-sheet { max-block-size: calc(var(--play-viewport-h, 100dvh) - max(var(--space-2), env(safe-area-inset-top, 0px))); }
@media (max-width: 599px) { .play-bar__title { font-size: .9375rem; } }

/* Expanded view is a tool of the current game, alongside its mode/reset controls. */
.play-cover.has-inline-controls { background: none; border: 0; margin-block-end: 0; }
.play-cover.has-inline-controls::before, .play-cover.has-inline-controls::after { display: none; }
.play-cover.has-inline-controls .play-cover__actions { display: none; }
.play-cover.has-inline-controls .play-cover__text { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; }
.play-cover.has-inline-controls .play-cover__title { grid-column: 1; grid-row: 1; }
.play-cover.has-inline-controls :is(.play-cover__tagline, .play-cover__stats, .play-cover__side) { grid-column: 1 / -1; grid-row: auto; }
.play-cover.has-inline-controls .play-cover__side { justify-items: start; }
.play-cover.has-inline-controls .play-cover__side:not(:has([data-play-modes]:not([hidden]) .play-chip)) { display: none; }
.play-inline-controls { grid-column: 2; grid-row: 1; align-self: start; display: flex; }
.play-inline-controls .play-inline-expand > span, .gts-progress .play-inline-expand > span { display: none; }
.play-inline-controls .play-inline-expand, .gts-progress .play-inline-expand { inline-size: 44px; padding: 0; }
.gts-progress .play-inline-expand { margin-inline-start: auto; order: 5; }
.play-inline-expand:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.play-inline-expand {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex: none; min-inline-size: 44px; min-block-size: 44px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
  color: var(--accent); font: 600 .875rem/1.2 var(--font-body); text-decoration: none;
  transition: background-color 160ms var(--ease), transform 140ms var(--ease);
}
.play-inline-expand:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 24%, var(--bg-raised)); }
.play-inline-expand:active { transform: scale(.96); }
.play-layer :is(.play-inline-controls, .play-inline-expand) { display: none; }
body[data-play] .parameters-statrow { flex-direction: row; justify-content: flex-start; gap: var(--space-2); }
body[data-play] .parameters-statbar { order: -1; margin-inline-end: auto; border: 0; background: none; box-shadow: none; backdrop-filter: none; gap: var(--space-2); }
body[data-play]:not([data-experience="quizzes"]) .parameters-stat { --stat-tone: var(--cyan); border: 0; border-radius: var(--radius-md); background: linear-gradient(130deg, color-mix(in srgb, var(--stat-tone) 23%, var(--bg-raised)), var(--bg-raised)); }
body[data-play]:not([data-experience="quizzes"]) .parameters-stat:nth-child(2n) { --stat-tone: var(--amber); }
body[data-play]:not([data-experience="quizzes"]) .parameters-stat :is(span, strong) { color: var(--stat-tone); }
body[data-play]:not([data-experience="quizzes"]) .parameters-reset { margin: 0; border: 0; background: color-mix(in srgb, var(--pink) 15%, var(--bg-raised)); color: var(--pink); box-shadow: none; }
body[data-play] .howto-step { border: 0; background: none; }
@media (max-width: 600px) {
  .play-inline-expand { padding-inline: 12px; }
  .play-inline-expand > span { display: none; }
  .gts-progress:has(.play-inline-expand) .gts-dots { display: none; }
  .gts-progress:has(.play-inline-expand) .gts-catbtn { max-inline-size: none; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .play-inline-expand { transition: none; } .play-inline-expand:active { transform: none; } }