/* The theater's box (owner: theater): the sound control, and the TV picture as a click target.
   Loaded after house.css. Scoped to #theater so these rules cannot reach other rooms. */
#theater .sound-on { margin: 1rem 0 .2rem; display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 48px; padding: .65rem 1rem; border: 0; border-radius: 12px; background: var(--mustard); color: var(--mustard-ink); font-weight: 600; font-size: 1.05rem; cursor: pointer; text-align: left; }
#theater .sound-on svg { width: 22px; height: 22px; flex: none; }
#theater .sound-on .on { display: none; }
#theater .sound-on:hover { background: #f1bd55; }
#theater .sound-on[data-state="on"] { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 500; }
#theater .sound-on[data-state="on"]:hover { box-shadow: inset 0 0 0 1.5px var(--mustard); }
#theater .sound-on[data-state="on"] .on { display: block; }
#theater .sound-on[data-state="on"] .off { display: none; }

/* placed over the TV picture by world/theater.js; live only while the theater's box is. Reduced motion
   keeps it: the still TV draws the same "Turn the sound on" invitation (no WebGL: no TV, no target) */
#theater .tv-hot { position: fixed; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; pointer-events: none; z-index: 1; -webkit-tap-highlight-color: transparent; }
#theater .panel.is-on ~ .tv-hot { pointer-events: auto; }
.no-webgl #theater .tv-hot { display: none; }
/* while the sound is on the control steps aside (the cue's own Pause button has focus) */
#theater .sound-on[hidden] { display: none; }