.digital-screens{position:fixed;inset:auto;z-index:42;pointer-events:none;background:transparent!important;opacity:0;visibility:hidden;transition:opacity .35s ease;overflow:hidden}
.digital-screens.is-active{visibility:visible;opacity:1}
.digital-screens>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent!important;pointer-events:none}
.digital-screens-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.digital-screens-hit{position:absolute;pointer-events:auto;cursor:grab;touch-action:pan-y;outline-offset:5px}
.digital-screens-hit:active{cursor:grabbing}
.digital-screens-hit:focus-visible{outline:1px dashed #777}

body.digital-screens-active .screen>.fcount,body.digital-screens-active .screen>.timeline{z-index:4}
@media(prefers-reduced-motion:reduce){.digital-screens{transition:none}}
/* Keep the grain visible without animating a four-viewport layer over WebGL. */
html.digital-screens-active::after{animation:none;inset:0}
body.digital-screens-active .fsub,body.digital-screens-active .fsub h2{color:#0a0a0a!important;-webkit-text-fill-color:#0a0a0a}
.digital-screens-status{position:absolute;right:5vw;bottom:5vh;z-index:4;color:#fff;font:500 12px/1.4 "Clash Display Variable", Arial, sans-serif;pointer-events:none}
.digital-screens-status[hidden]{display:none}

/* The interactive surface is a body-level layer, above the film's clipping/stacking context. */
.digital-screens>.fcount,.digital-screens>.timeline{z-index:4;pointer-events:none}
.digital-screens{--hud:#0a0a0a}
.digital-screens-hit[data-pointer-focus]:focus-visible{outline:none}
body.digital-screens-active :is(.ink-hd,.inkbar,.ink-cmyk,.ink-bomb,.ink-pop,.ink-sign,.ink-frame,.ink-hint),
body.digital-screens-active :is(.ink-hd,.inkbar,.ink-cmyk,.ink-bomb,.ink-pop,.ink-sign,.ink-frame,.ink-hint) *{pointer-events:none!important}
body.menu-open .digital-screens,body.overlay-active .digital-screens{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  /* The old static placeholder layout collapsed the video and its input surface. */
  body.has-film .film{height:700vh;margin-top:-100vh}
  body.has-film .film>.stage{position:sticky;top:0;height:100vh}
  body.has-film .film .screen{position:absolute;inset:0}
  body.has-film .film .track{display:none!important}
}

body.digital-screens-active .fsubs{z-index:43}

/* Matrix behind the actual rig; HUD and film captions remain above both. */
.digital-screens .digital-screens-webgl{z-index:1}
.digital-screens .fabc-matrix-rain{z-index:0}
.digital-screens-plate{z-index:0}
.digital-screens-hit{z-index:2}
.digital-screens-status{color:#111}

.digital-screens-status{pointer-events:auto;background:#fff;border:1px solid #aaa;border-radius:20px;padding:10px 16px;cursor:pointer}.digital-screens-status:disabled{cursor:wait}

/* przycisk „Play animations” / „Tap to play the screens” — gdy iPhone blokuje autostart albo włączone jest „Ogranicz ruch” */
.digital-screens .ds-play{position:absolute;left:50%;top:clamp(84px,13vh,140px);transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 16px;border:1px solid #080808;border-radius:999px;background:#080808;color:#fff;font:600 15px/1 "Clash Display Variable","Helvetica Neue",Arial,sans-serif;cursor:pointer;pointer-events:auto;white-space:nowrap;box-shadow:0 10px 30px rgba(10,10,10,.22)}
.digital-screens .ds-play::before{content:"";width:0;height:0;border-left:10px solid #4dff88;border-top:6px solid transparent;border-bottom:6px solid transparent}
.digital-screens .ds-play:hover{background:#262626}.digital-screens .ds-play:focus-visible{outline:2px solid #c98bff;outline-offset:3px}
.digital-screens .ds-play[hidden]{display:none}