.manual-film-stage{position:relative;background:#171717}
.film-play-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;border:1px solid #ffffff80;border-radius:999px;padding:16px 24px;background:#f4f3eb;color:#20211e;font:500 16px/1.2 Arial,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 2px 18px #0002;transition:background .2s}
.film-play-prompt:hover{background:var(--accent)}
.film-play-prompt[hidden]{display:none}
.film-play-prompt svg{width:20px;height:20px}
.film-controls{display:flex;align-items:center;gap:20px;padding:4px 0 0;font:13px/1.4 Arial,sans-serif}
.film-controls button{font:inherit;color:var(--ink);border:0;border-bottom:1px solid #999b90;padding:6px 0;background:transparent;cursor:pointer;min-height:36px}
.film-controls .film-toggle{margin-right:auto}
.film-status{color:#65665f;font-size:12px}
.film-play-prompt:focus-visible,.film-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@media(max-width:700px){.film-play-prompt{padding:13px 20px;font-size:15px}.film-controls{gap:16px}.film-status:empty{display:none}}
/* A quiet editorial prompt, with a lime accent on interaction. */
.film-play-prompt{flex-direction:column;gap:12px;padding:12px;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;font:500 11px/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px #0009}
.film-play-prompt svg{box-sizing:border-box;width:64px;height:64px;padding:21px;border:1px solid #ffffffb3;border-radius:50%;background:#20211e38;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:background .2s,color .2s,border-color .2s,transform .2s}
.film-play-prompt:hover{background:transparent}
.film-play-prompt:hover svg,.film-play-prompt:focus-visible svg{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:scale(1.06)}
.film-play-prompt:focus-visible{outline:2px solid white;outline-offset:6px;border-radius:4px}
@media(max-width:700px){.film-play-prompt{padding:12px;gap:10px;font-size:10px}.film-play-prompt svg{width:56px;height:56px;padding:18px}}
@media(prefers-reduced-motion:reduce){.film-play-prompt svg{transition:none}}

.film-click-surface{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;z-index:1}
.film-click-surface:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.film-play-prompt{z-index:2}

/* Centre the circle on the film; keep its caption outside the centring box. */
.film-play-prompt>span{position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%)}

/* Optical lift balances the circle with the caption beneath it. */
.film-play-prompt{margin-top:-6px}

.film-controls .film-toggle{margin-right:0}
.film-controls .film-replay{display:inline-flex;align-items:center;gap:5px;margin-right:auto}
.film-replay svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:360px){.film-controls{gap:10px;font-size:12px}}