/* Demo-only additions on top of the verbatim app stylesheets. Nothing here
   restyles app components; it only adds the final CTA block and
   the iframe fit. */


/* @fortawesome/fontawesome-svg-core injects this for its inline icons; the app relies on it */
.svg-inline--fa { box-sizing: content-box; display: inline-block; height: 1em; overflow: visible; vertical-align: -0.125em; width: 1.25em; fill: currentColor; }

/* final CTA block after «Правильно!» */
.demo-final { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--outline); }
.demo-final__note { font-size: 0.9375rem; color: var(--on-surface-variant); margin: 0 0 0.25rem; }
.demo-final .actions-row { flex-direction: column; }
.demo-final .actions-row .btn { width: 100%; }

/* single image in the media strip (ImageLightboxGallery, non-carousel) */
.gameplay .media-strip__thumb { cursor: default; }

/* the app toggles elements by unmounting; we toggle with [hidden], which must beat display rules */
[hidden] { display: none !important; }