#field-story{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#16271f;color:#f4e7cc;overflow:hidden}
#field-story::backdrop{background:#15241e}
#scene-canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.scene-heading{position:absolute;top:22px;left:32px;right:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none;text-shadow:0 2px 12px #000}
.scene-heading small{font:400 11px/1.4 system-ui;letter-spacing:.22em;color:#cbb88e}.scene-heading h2{font:normal 28px/1.2 Georgia,serif;margin:6px 0 0;color:#fff0ce}.scene-heading button{pointer-events:auto;background:#152820d9;border:1px solid #bca47a70;font-size:13px}
.scene-caption{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 56px));box-sizing:border-box;background:linear-gradient(115deg,#172c26f7,#182721f5);border:1px solid #bda77668;box-shadow:0 10px 45px #0006;border-radius:12px;padding:18px 24px 14px}
.scene-caption::before{content:'';position:absolute;top:-1px;left:24px;width:50px;height:2px;background:#dfbd76}
#scene-speaker{color:#e7c786;font:400 12px/1.5 system-ui;letter-spacing:.13em;text-transform:uppercase}
#scene-line{font:normal 20px/1.45 Georgia,serif;color:#f9edd8;min-height:58px;margin:5px 0 12px;white-space:pre-line}
.scene-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px}.scene-navigation button{font-size:14px;padding:9px 16px;min-height:38px}.scene-navigation small{font:11px/1.4 system-ui;color:#a4b8a3;text-align:center}
.scene-progress{display:flex;gap:5px;margin-top:12px}.scene-progress i{height:2px;flex:1;background:#526456}.scene-progress i.past{background:#bda477}.scene-progress i.current{background:#f4d492}
#field-story.scene-loading #scene-canvas{opacity:.25}#field-story.scene-loading .scene-caption{pointer-events:none}
@media(max-width:700px){.scene-heading{top:14px;left:18px;right:18px;gap:10px}.scene-heading h2{font-size:20px;max-width:220px}.scene-heading small{font-size:9px}.scene-heading button{font-size:11px;padding:8px;max-width:115px}.scene-caption{bottom:12px;width:calc(100% - 24px);padding:14px 16px 12px}#scene-line{font-size:17px;min-height:74px}.scene-navigation small{font-size:9px;max-width:120px}.scene-navigation button{font-size:12px;padding:8px 11px}}
@media(max-height:560px){.scene-heading{top:10px}.scene-heading h2{font-size:20px}.scene-caption{bottom:8px;padding:10px 18px;width:min(900px,calc(100% - 32px))}#scene-line{font-size:16px;min-height:24px;margin-bottom:7px}.scene-navigation button{min-height:30px;padding:5px 12px}.scene-progress{margin-top:7px}}

#scene-title:focus{outline:none}

/* Cinematics auto-play; safe-area controls remain reachable on iPhone. */
.scene-heading{top:max(14px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
.scene-caption{bottom:max(10px,env(safe-area-inset-bottom))}
.scene-navigation{justify-content:flex-start}.scene-navigation small{text-align:left;max-width:none}
#scene-skip,#scene-pause{min-height:44px}
@media(max-height:560px){.scene-caption{padding:8px 14px}#scene-line{margin:3px 0 4px}.scene-progress{margin-top:4px}.scene-heading h2{font-size:18px}}

.scene-insert .scene-heading>div{visibility:hidden}
@media(max-height:560px) and (orientation:landscape){
 .scene-insert .scene-caption{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));transform:none;width:32%;padding:12px}
 .scene-insert #scene-line{font-size:17px;line-height:1.35;min-height:48px;margin:6px 0 10px}
 .scene-insert .scene-navigation{align-items:flex-start;flex-direction:column;gap:5px}
 .scene-insert .scene-navigation small{font-size:9px}
}

/* Scene navigation stays optional: automatic playback continues after a seek. */
.scene-navigation{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px;align-items:center}
.scene-navigation button{min-width:0;min-height:44px;white-space:normal}
.scene-navigation small,#scene-retry{grid-column:1/-1}
#scene-back:disabled{opacity:.4;cursor:default}
@media(max-height:560px) and (orientation:landscape){
 .scene-insert .scene-navigation{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:4px;align-items:center}
 .scene-insert .scene-navigation button{font-size:11px;padding:5px 3px;min-height:44px}
 .scene-insert .scene-navigation small{grid-column:1/-1}
}