/* The canvas covers exactly the video's box; the stage is the unit that goes full screen. */
.overlay-player{min-width:0}
.overlay-stage{position:relative;display:grid}
.overlay-stage>video{grid-area:1/1;min-width:0}
.overlay-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Captions the canvas cannot fit: HTML text over the picture's bottom; left/bottom/max-width/font-size are set by the player (full screen too: the stage is the positioning box). */
.overlay-sub{position:absolute;z-index:2;margin:0;width:max-content;box-sizing:border-box;padding:.35em .8em;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;font:700 16px/1.4 system-ui,-apple-system,"Noto Sans",sans-serif;text-align:center;border-radius:.4em;pointer-events:none;overflow-wrap:anywhere}
/* Pages set display on these; hidden must still win. */
.overlay-canvas[hidden],.overlay-sub[hidden],.overlay-caption[hidden],.overlay-bar[hidden],.overlay-stage .overlay-status[hidden],.overlay-bar .overlay-fullscreen[hidden]{display:none!important}
.overlay-stage:fullscreen{background:#000}
.overlay-stage:-webkit-full-screen{background:#000}
.overlay-stage:fullscreen>video{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;margin:0}
.overlay-stage:-webkit-full-screen>video{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;margin:0}
/* Captions as text under a narrow player; three lines of room so the page does not jump. */
.overlay-caption{margin:0;padding:10px 14px;box-sizing:content-box;min-height:calc(1.5em * 3);background:#0f0f0f;color:#fff;font:700 15px/1.5 system-ui,-apple-system,"Noto Sans JP",sans-serif;text-align:center;border-radius:0 0 10px 10px}
.overlay-bar{display:flex;justify-content:flex-end;padding:6px 0 0}
.overlay-bar .overlay-fullscreen{display:inline-flex;align-items:center;justify-content:center;min-height:0;height:auto;width:auto;margin:0;padding:5px 12px;border:1px solid rgba(128,128,128,.45);border-radius:999px;background:transparent;color:inherit;font:600 12px/1.4 system-ui,-apple-system,"Noto Sans JP",sans-serif;letter-spacing:0;text-decoration:none;cursor:pointer;opacity:.8}
.overlay-bar .overlay-fullscreen:hover{opacity:1;background:rgba(128,128,128,.14)}
.overlay-bar .overlay-fullscreen:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}
/* '準備中…' while a wait stops the video (the translation's or a voice line's, the same word): over the picture, so full
   screen shows it too, with a turning ring. */
.overlay-stage .overlay-status{position:absolute;left:50%;bottom:12%;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);box-sizing:border-box;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:600 14px/1.4 system-ui,-apple-system,"Noto Sans JP",sans-serif;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-stage .overlay-status.is-loading::before{content:"";flex:none;width:12px;height:12px;box-sizing:border-box;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:overlay-spin 1s linear infinite}
@keyframes overlay-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.overlay-stage .overlay-status.is-loading::before{animation-duration:3s}}