/* Two views share one film and one cue timeline. No game runtime. */
#zx-root .zx-cab__screen:has([data-zxc-overlay]){isolation:isolate;max-width:100%}
#zx-root .zx-cab__screen>video{transition:opacity .45s ease;will-change:opacity}
#zx-root .zx-cab__screen.is-controller-view>video{opacity:1}
.zxc-overlay{position:absolute;inset:0;z-index:2;background:transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s;overflow:hidden}
.is-controller-view .zxc-overlay{opacity:1;visibility:visible}
.zxc-photo{position:absolute;height:calc(100% - 70px);aspect-ratio:4/3;left:50%;top:3%;transform:translateX(-50%)}
.zxc-photo>img{width:100%;height:100%;display:block;object-fit:contain;opacity:.5;mix-blend-mode:lighten}
.zxc-input{--press:0;position:absolute;pointer-events:none;color:#ffcc72;opacity:calc(.48 + var(--press)*.52)}
.zxc-input i{position:absolute;display:block;border:1px solid currentColor;box-shadow:0 0 calc(var(--press)*24px) currentColor;background:rgba(255,186,76,calc(var(--press)*.22))}
.zxc-input b{font:500 9px/1.4 var(--zx-font-mono);letter-spacing:.1em;color:inherit!important;white-space:nowrap}
.zxc-input--left,.zxc-input--right{top:56%;width:3%;height:25%;transform:translateY(-50%)}
.zxc-input--left{left:3%}.zxc-input--right{right:3%}
.zxc-input--left i,.zxc-input--right i{inset:0;border-radius:8px;transform:scaleX(calc(.65 + var(--press)*.35))}
.zxc-input--left b{position:absolute;right:calc(100% + 9px);top:30%;text-align:right}.zxc-input--right b{position:absolute;left:calc(100% + 9px);top:30%}
.zxc-input--launch{left:50%;top:80%;width:8%;aspect-ratio:1;transform:translate(-50%,-50%);color:#9cffb5}.zxc-input--launch i{inset:-7%;border-radius:50%;transform:scale(calc(1 + var(--press)*.2))}.zxc-input--launch b{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%)}
.zxc-input--plunger{left:82.5%;top:85%;width:8%;height:7%;color:#ffb978;transform:translate(calc(var(--press)*3px),calc(var(--press)*7px))}.zxc-input--plunger i{inset:0;border-radius:50%}.zxc-input--plunger b{position:absolute;left:calc(100% + 8px);top:30%}
.zxc-readout{position:absolute;left:22px;right:22px;bottom:62px;display:flex;align-items:center;justify-content:center;gap:9px;color:#ffd57c;font:500 11px/1.5 var(--zx-font-mono);letter-spacing:.1em;text-shadow:0 0 8px #ffad3250}.zxc-readout small{font-size:8px;color:#9fabc3;letter-spacing:.08em}.zxc-sync-lamp{height:5px;width:5px;border-radius:50%;background:#ffd57c;box-shadow:0 0 8px #ffae32}
#zx-root .zxc-toggle{position:absolute;z-index:6;bottom:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 16px;border:1px solid #d5e8ff66;border-radius:99px;background:#08101ee8;color:#f1f6ff;box-shadow:0 5px 22px #0006;cursor:pointer;font:500 11px/1.4 var(--zx-font-mono);white-space:nowrap;backdrop-filter:blur(12px)}
#zx-root .zxc-toggle small{font-size:9px;color:#bec8da!important}#zx-root .zxc-toggle[aria-pressed=true]{border-color:#ffcc7299;color:#ffe1a5;background:#161b25f2}#zx-root .zxc-toggle:focus-visible{outline:2px solid #fff0b7;outline-offset:4px}
#zx-root .zx-cab__screen .zx-cab__sound,#zx-root .zx-cab__screen .zx-cab__play{z-index:7}
#zx-root #cinema .zx-cab__strip{max-width:680px;margin-inline:auto}
@media(max-width:640px){.zxc-photo{height:calc(100% - 35px);top:-2%}.zxc-input b{font-size:6px;letter-spacing:.03em}.zxc-input--left b{right:calc(100% + 3px)}.zxc-input--right b{left:calc(100% + 3px)}.zxc-input--plunger b{display:none}.zxc-input--launch b{display:none}.zxc-readout{bottom:52px;font-size:8px;left:5px;right:5px}.zxc-readout small{display:none}#zx-root .zxc-toggle{bottom:7px;min-height:36px;padding:7px 12px;font-size:9px}#zx-root .zxc-toggle small{display:none}}
@media(hover:none){[data-zxc-hover-hint]{display:none!important}}
@media(prefers-reduced-motion:reduce){#zx-root .zx-cab__screen>video,.zxc-overlay{transition:none}.zxc-input i,.zxc-input--plunger{transform:none!important}}

/* Translucent hardware; crisp feedback on top of the uninterrupted film. */
.zxc-photo{--shake-x:0px;--shake-y:0px;--kick:0deg;transform:translateX(-50%) translate(var(--shake-x),var(--shake-y)) rotate(var(--kick))}
#zx-root button.zxc-input{background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;appearance:none;font:inherit;min-width:24px;min-height:24px}
#zx-root button.zxc-input:focus-visible{outline:2px solid white;outline-offset:5px}
.zxc-input i{border-width:2px;box-shadow:0 0 calc(var(--press)*42px) currentColor,inset 0 0 calc(var(--press)*18px) currentColor;background:rgba(255,186,76,calc(var(--press)*.65))}
.zxc-input--left,.zxc-input--right{color:#ffb83d}
.zxc-input--left i,.zxc-input--right i{transform:scaleX(calc(.8 + var(--press)*1.4))}
.zxc-input--plunger{transform:translateY(calc(var(--press)*22px));color:#8cffff}
.zxc-input--plunger:before{content:'';position:absolute;left:50%;bottom:50%;width:3px;height:calc(12px + var(--press)*28px);background:repeating-linear-gradient(0deg,#b8ffff 0 2px,transparent 2px 5px);box-shadow:0 0 12px #6dffff;transform-origin:bottom}
.zxc-solenoid{position:absolute;top:54%;width:14%;height:19%;border:2px solid #ffb943;border-radius:50%;opacity:var(--coil,0);box-shadow:0 0 28px #ffae42,inset 0 0 22px #ffae42;transform:scale(calc(.8 + var(--coil,0)*.3));background:repeating-linear-gradient(90deg,transparent 0 5px,#ffbd6650 5px 8px)}
.zxc-solenoid--left{left:8%}.zxc-solenoid--right{right:8%}
.zxc-solenoid b{position:absolute;top:105%;left:50%;transform:translateX(-50%);color:#ffe0a3;font:700 8px var(--zx-font-mono);white-space:nowrap;text-shadow:0 1px 4px #000}
.zxc-impact-ring{position:absolute;inset:15% 5% 8%;border:3px solid #9efcff;border-radius:22%;opacity:var(--impact,0);transform:scale(calc(1 + var(--impact,0)*.08));box-shadow:0 0 32px #57eaff,inset 0 0 24px #57eaff}
.zxc-readout{padding:5px 10px;background:#050d1dcc;border-radius:8px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;text-shadow:0 1px 4px #000}
#zx-root .zxc-impact-demo{pointer-events:auto;position:absolute;right:12px;bottom:14px;min-height:36px;border:1px solid #99efff88;border-radius:30px;padding:5px 10px;background:#071322dc;color:#aef7ff;font:10px var(--zx-font-mono);cursor:pointer}
@media(max-width:640px){.zxc-solenoid b{font-size:5px}.zxc-readout{bottom:49px;padding:3px 6px}#zx-root .zxc-impact-demo{right:5px;bottom:5px;font-size:7px;padding:3px 5px;min-height:28px}#zx-root .zxc-toggle{left:38%}.zxc-input--plunger{transform:translateY(calc(var(--press)*12px))}}
@media(prefers-reduced-motion:reduce){.zxc-photo{transform:translateX(-50%)!important}.zxc-solenoid,.zxc-impact-ring{transform:none!important}.zxc-input--plunger:before{height:16px}}