.yuma-cinematic {
    padding: 0; border: 0; margin: auto; width: min(100vw, 520px); max-width: 100vw;
    height: 100dvh; max-height: 100dvh; overflow: hidden;
    color: #fff; background: #171719; font-family: "Readex Pro", system-ui, sans-serif;
}
.yuma-cinematic::backdrop { background: #171719; }
.yuma-cinematic [hidden] { display: none !important; }
.cinematic-image, .cinematic-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinematic-video { object-position: center; }
.cinematic-image { opacity: .65; }
.cinematic-top { position: absolute; inset: env(safe-area-inset-top, 0px) 0 auto; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 16px; background: #171719e6; }
.cinematic-top h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.yuma-cinematic button { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #ffffff80; border-radius: 4px; color: #fff; background: #171719; font: inherit; font-size: .875rem; cursor: pointer; }
.yuma-cinematic button:focus-visible { outline: 3px solid #3fe3cf; outline-offset: 2px; }
.cinematic-bottom { position: absolute; inset: auto 0 env(safe-area-inset-bottom, 0px); padding: 16px; display: grid; gap: 8px; background: #171719ed; max-height: calc(100% - 76px); overflow-y: auto; }
.cinematic-subtitle { font-size: 1rem; line-height: 1.65; margin: 0; text-align: center; }
.cinematic-status { margin: 0; font-size: .875rem; line-height: 1.5; }
.cinematic-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cinematic-caption { margin: 0; font-size: .75rem; color: #fff; opacity: .85; text-align: center; }
.cinematic-transcript { margin: 0; padding-inline-start: 24px; line-height: 1.65; font-size: .9375rem; }
.yuma-cinematic[dir="rtl"] h2 { font-family: "Lalezar", "Readex Pro", sans-serif; font-size: 1.25rem; }
@media (orientation: landscape) {
    .yuma-cinematic { width: min(100vw, 1100px); }
    .cinematic-image, .cinematic-video { object-fit: contain; }
    .cinematic-bottom { inset-inline: 20%; max-height: calc(100% - 64px); }
}
@media (max-height: 420px) {
    .cinematic-bottom { padding: 8px; gap: 4px; }
    .cinematic-caption { display: none; }
    .cinematic-top { padding: 4px 8px; }
}