/* The theater's box (owner: theater): the sound control (the box's primary button), and the TV picture as a
   click target. Loaded after house.css. Scoped to #theater so these rules cannot reach other rooms. */
/* "Pause" while a cue plays (the sound icon gives way to the pause icon: house.css .primary[data-playing]).
   The pill keeps one width whatever it says: its longer words lie in the same cell, unseen (with the icon's
   room), so it is as wide as the longest ("Turn the sound back on") and does not shrink or grow under the
   pointer; the icon and the words it shows sit in the middle */
#theater .sound-on { padding: 0 14px; }
#theater .sound-on__words { display: grid; }
#theater .sound-on__words > * { grid-area: 1 / 1; }
#theater .sound-on__now { display: inline-flex; align-items: center; gap: 8px; justify-self: center; }
#theater .sound-on__room { visibility: hidden; padding-left: 26px; }

/* 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; }