/* set pieces in the close-ups: the play pill, the progress line and the captions */
.scene-ui { position: absolute; left: calc((100% - var(--pr, 0px)) / 2); bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(620px, calc(100% - 32px - var(--pr, 0px))); pointer-events: none; z-index: 7; }
.scene-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 10px; border: 0; border-radius: 999px; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, rgba(40, 28, 16, .9), rgba(16, 12, 8, .92)); box-shadow: 0 0 0 1px rgba(236, 211, 154, .45), 0 12px 40px -10px rgba(0, 0, 0, .8), 0 0 40px -12px rgba(255, 170, 60, .55); transition: transform .2s, box-shadow .2s; }
.scene-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--gold-hi), 0 14px 44px -10px rgba(0, 0, 0, .8), 0 0 50px -8px rgba(255, 170, 60, .7); }
.scene-btn i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 13px; color: #1a1208; background: radial-gradient(circle at 40% 35%, #ffe7a8, #d4a24a); box-shadow: 0 0 18px rgba(255, 190, 90, .6); }
.scene-btn span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.scene-btn small { font: 500 9.5px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); }
.scene-btn b { font: 500 17px/1.1 var(--display); color: var(--text); }
.scene-prog { width: 180px; height: 2px; border-radius: 1px; background: rgba(255, 240, 210, .12); overflow: hidden; opacity: 0; transition: opacity .3s; }
.scene-prog b { display: block; height: 100%; width: 0; background: var(--gold-hi); box-shadow: 0 0 8px var(--gold); }
.scene-ui.on .scene-prog { opacity: 1; }
.scene-ui.on .scene-btn { padding: 6px 14px 6px 6px; }
.scene-ui.on .scene-btn i { width: 26px; height: 26px; font-size: 10px; }
.scene-ui.on .scene-btn b { font-size: 14px; }
.scene-cap { margin: 0; padding: 12px 20px; border-radius: 12px; font: italic 400 17px/1.5 var(--body); text-align: center; color: #f6ecd8; text-shadow: 0 1px 3px #000;
  background: rgba(8, 6, 4, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.scene-cap.in { opacity: 1; transform: none; }
.scene-cap:empty { display: none; }
.world.in-dio .dio-exit.show ~ .scene-ui { opacity: .3; }
.scene-chip { margin: 6px 0 2px; }
@media (max-width: 820px) { .scene-ui { bottom: calc(54svh + 14px); } .scene-cap { font-size: 15px; padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .scene-cap { transition: none; } }