/* The live Vox lesson page. One 1920 by 1080 frame (#wrap), scaled to fit the window by vox-live.js and letterboxed on a
   near-black page. Stacking, bottom to top: the scene (paper, drawing, the act's paper wash), the act layer (start card,
   choice cards), the texture overlays from vox-tex.js, then the HUD (captions). The controls are outside the frame. The act
   layer sits under the textures on purpose, so its paper cards take the same tooth, halftone and dust as the picture. */
html, body { margin: 0; height: 100%; background: #0b0b0c; overflow: hidden; }
#wrap { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; background: #000;
  transform-origin: 50% 50%; opacity: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#wrap.ready { opacity: 1; }

#scenes { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; }
.pl { position: absolute; inset: 0; transform-origin: 50% 50%; }
.pl svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sheet { position: absolute; inset: -160px; background-color: #F1E9D8; background-repeat: repeat; background-position: 0 0; background-size: 2300px auto; }
#wash { opacity: 0; }
/* The paper a choice act lays over the picture, behind its ask and its cards: vox-live.js sets its mask for each act. */

/* Texture overlays never take a pointer: taps reach the scene's [data-part] drawings and the act's cards below them. */
#wrap > :not(#scenes):not(#act):not(#hud):not(#controls) { pointer-events: none; }
#tooth, #half1, #half2, #dust, #grain, #vig { pointer-events: none; }

#act { position: absolute; inset: 0; pointer-events: none; }
#act svg { position: absolute; left: 0; top: 0; }
#act button { pointer-events: auto; }
#hud { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }

/* Choice options are drawn in the act layer's SVG (paper cut-outs in Baskerville); each has a transparent button over it
   that takes the click, the key focus and the hover. Its text is there for screen readers, not shown. */
.card { position: absolute; box-sizing: border-box; padding: 0; border: 0; border-radius: 2px; background: transparent;
  color: transparent; font: 20px/1 'Baskerville', serif; overflow: hidden; cursor: pointer; }
.card[disabled] { cursor: default; }
.card:focus-visible, .hit:focus-visible, #controls button:focus-visible { outline: 3px solid #E5432D; outline-offset: 6px; }

/* A transparent button over a red label drawn in the act layer's SVG (Play, Play again), so it keeps the kit's wipe-in. */
.hit { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }

/* The tap act: the lesson's tappable drawings show they can be tapped. */
#wrap.taplive [data-part] { cursor: pointer; }

/* The controls: small Baskerville words, no boxes, so they read as part of the page rather than web UI. vox-live.js moves
   them out of the frame and places them (.below or .beside: in the page's dark margin when the frame is letterboxed; .in:
   the frame's bottom right corner, below the safe area, when it fills the window). */
#controls { position: fixed; z-index: 9; display: flex; gap: 1.2em; font: 26px/1.4 'Baskerville', 'Times New Roman', serif; color: #F4EEE1; }
#controls.in { color: #26323D; }
#controls.beside { flex-direction: column; align-items: flex-start; gap: .35em; }
#controls button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; opacity: .55; }
#controls button:hover { opacity: .9; }
#controls button[hidden] { display: none; }
#wrap:not(.ready) ~ #controls { visibility: hidden; }