.cutscene{position:fixed;inset:0;z-index:60;background:#05060cf2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));animation:cutscene-in .35s ease}
@keyframes cutscene-in{from{opacity:0}to{opacity:1}}
.cutscene-frame{position:relative;width:min(100%,calc((100dvh - 120px)*16/9));aspect-ratio:16/9;background:#000;border:1px solid rgba(224,193,138,.45);border-radius:8px;overflow:hidden;box-shadow:0 20px 80px #000a}
.cutscene video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.cutscene-play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;align-items:center;gap:12px;padding:14px 26px;min-height:52px;border-radius:999px;border:1px solid #e0c18a;background:#191c2ae6;color:#f0d49f;font-size:18px;letter-spacing:.08em;cursor:pointer}
.cutscene-play span{font-size:20px}
.cutscene-play[hidden]{display:none}
.cutscene-bar{width:min(100%,calc((100dvh - 120px)*16/9));display:flex;align-items:center;justify-content:space-between;gap:12px;color:#f0d49f;font-size:16px;letter-spacing:.06em}
.cutscene-skip{min-height:44px;min-width:88px;padding:0 18px;border-radius:6px;border:1px solid rgba(224,193,138,.6);background:transparent;color:#f0d49f;font-size:16px;cursor:pointer}
.cutscene-skip:hover,.cutscene-skip:focus-visible{background:rgba(224,193,138,.15)}
.cutscene-replay{min-height:44px}
@media (orientation:landscape) and (max-height:500px){.cutscene{gap:6px;padding:8px}.cutscene-frame,.cutscene-bar{width:min(100%,calc((100dvh - 64px)*16/9))}}