/* Viewer, embed, view-once gate and expired page. The instant frame is sized by whichever
   viewport axis is tighter, inside the safe area, so it never overflows (bug 3). */
:root {
  --page: #1B1530; --pad: 14px; --cap: 56px; --gap: clamp(12px, 3.5vh, 40px);
  --safe-t: max(var(--gap), env(safe-area-inset-top)); --safe-b: max(var(--gap), env(safe-area-inset-bottom));
  --safe-l: max(var(--gap), env(safe-area-inset-left)); --safe-r: max(var(--gap), env(safe-area-inset-right));
  --vh: 100vh;
  color-scheme: dark;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
@media (max-height: 560px) { :root { --pad: 8px; --cap: 40px; --gap: 8px; } }
@media (max-width: 380px) { :root { --pad: 10px; --gap: 10px; } }

/* html carries the page color too: no white showing past body at the bottom corners / overscroll */
html, body { background: var(--page); block-size: 100%; }
body { color: #F4F1FF; min-block-size: var(--vh); display: grid; place-items: center; overflow: hidden;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }

.frame {
  --w: min(calc(100vw - var(--safe-l) - var(--safe-r) - 2 * var(--pad)),
           calc((var(--vh) - var(--safe-t) - var(--safe-b) - var(--pad) - var(--cap)) * 0.5625));
  inline-size: calc(var(--w) + 2 * var(--pad)); padding: var(--pad) var(--pad) 0;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
}
.frame-media { container-type: inline-size; }
.frame-cap { block-size: var(--cap); }
@media (max-height: 560px) { .frame-cap { font-size: 1rem; } .frame { border-radius: 12px; } .cap-hint { display: none; } }

/* Caption = link to the landing page (new tab). Title on the start side, small hint on the end. */
.cap-link { display: flex; align-items: center; gap: 10px; inline-size: 100%; block-size: 100%; color: inherit; text-decoration: none; min-inline-size: 0; }
.cap-link > span:first-child { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cap-hint { flex: none; font: 600 .75rem/1 var(--body); letter-spacing: 0; opacity: .62; white-space: nowrap; transition: opacity .15s; }
.cap-link:hover .cap-hint, .cap-link:focus-visible .cap-hint { opacity: 1; }
.cap-hint .flip { display: inline-block; }
.cap-hint bdi { font-family: "Bricolage Grotesque", var(--body); font-weight: 700; }

/* Gesture surface */
.stage { position: absolute; inset: 0; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; }

/* In-canvas brand mark is clickable too */
.brandlink { position: absolute; z-index: 2; min-block-size: 32px; border-radius: 6px; } /* box from the engine's brandRect() */
.brandlink:focus-visible { outline-offset: -3px; }

/* Instagram-style progress: segments (<=15) or a continuous bar + counter. Physical direction follows the page (RTL fills right-to-left). */
.bar { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; display: flex; align-items: center; gap: 3px;
  padding: max(8px, 3cqi) 3cqi 0; pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.bar i { flex: 1; block-size: 3px; border-radius: 3px; background: rgb(255 255 255 / .36); overflow: hidden; }
.bar b { display: block; block-size: 100%; inline-size: 0; background: #fff; border-radius: inherit; }
.bar output { flex: none; margin-inline-start: 6px; font: 600 .6875rem/1 var(--body); color: #fff; font-variant-numeric: tabular-nums; }
.held .bar, .held .brandlink { opacity: 0; }

/* End card */
.end { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 9cqi 7cqi;
  background: linear-gradient(to bottom, rgb(27 21 48 / .15), rgb(27 21 48 / .82) 55%); color: #fff; animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
.end h1, .card h1 { font-size: clamp(1.5rem, 12cqi, 3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-block-end: 6px; }
:is(.end, .card) h1:lang(ar) { line-height: 1.3; letter-spacing: 0; }
:is(.end, .card) .btn { inline-size: 100%; padding-inline: 16px; text-align: center; }
:is(.end, .card) .sub { font-size: .875rem; text-align: center; opacity: .85; }
.end .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .7); background: transparent; }
.end .btn-ghost:hover { background: rgb(255 255 255 / .12); }
.end .again svg { inline-size: 18px; block-size: 18px; }
@media (max-height: 560px) {
  .end, .card { gap: 8px; padding: 6cqi; }
  :is(.end, .card) .btn-lg { min-block-size: 44px; font-size: .9375rem; padding-inline: 10px; }
  .frame .card p { font-size: .8125rem; }
  :is(.end, .card) .sub { display: none; }
  .end h1, .card h1 { font-size: 10cqi; }
}
.play { z-index: 3; }
:focus-visible { outline-color: var(--sun); }

/* Full-frame cards: view-once gate, already opened, expired */
.card { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 16px; padding: 9cqi 7cqi; overflow-y: auto;
  background: radial-gradient(120% 70% at 50% 28%, #3A2E66 0%, #2A2245 45%, #1E1836 100%); color: #fff; }
.card p { opacity: .82; font-size: clamp(.875rem, 4.6cqi, 1.0625rem); }
.card .btn { margin-block-start: 6px; }
.card > h1 { margin-block-start: auto; }
.seal { flex: none; margin: auto; inline-size: 34cqi; block-size: 34cqi; border-radius: 50%;
  display: grid; place-items: center; font-size: 15cqi; line-height: 1; background: var(--frame, var(--sun)); box-shadow: 0 0 0 3cqi rgb(255 255 255 / .06), 0 0 0 7cqi rgb(255 255 255 / .035); }
.card[aria-busy="true"] .btn { opacity: .6; pointer-events: none; }
.card .err { color: var(--sun); opacity: 1; }
@media (max-height: 560px) { .seal { display: none; } }

/* Embed: the story fills the iframe, nothing else */
html.embed, html.embed body { background: transparent; color-scheme: normal; }
.embed body { padding: 0; }
.embed .frame { --w: min(100vw, calc(var(--vh) * 0.5625)); inline-size: var(--w); padding: 0; background: none; border-radius: 0; box-shadow: none; }
.embed .frame-media { border-radius: 0; }
.embed .frame-cap { display: none; }