/* viewer.css — plain CSS that every browser in the wild reads the same way (SPEC S-3.7):
   no CSS variables (Chromium 38 dropped every colour that used one: black text on black),
   no grid, no gap, no inset, no flexbox. Every colour is written out; every element that holds
   text has its own colour and background, so nothing falls back to the browser's black text.
   Colours: text #ffffff, dim #b8c0c8, accent #ffd34d, panel rgba(0,0,0,0.75), button #222a33. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000000; color: #ffffff;
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.3; }
@media (min-width: 960px) { html, body { font-size: 22px; } }
@media (min-width: 1600px) { html, body { font-size: 30px; } }

#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; }
#stage .pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; object-fit: contain; }
#stage .hidden { visibility: hidden; }

/* centred message (S-2.4: every state is told in plain words) */
#msg { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -2.5em; text-align: center; display: none; }
#msg .box { display: inline-block; max-width: 80%; padding: 0.8em 1.4em; background: #000000; background: rgba(0, 0, 0, 0.75); color: #ffffff;
  border: 2px solid #445566; border-radius: 10px; }
#msg .title { font-size: 1.5em; font-weight: bold; color: #ffffff; }
#msg .line { margin-top: 0.4em; color: #b8c0c8; }

/* a note over the playing picture */
#note { position: absolute; top: 1em; left: 0; width: 100%; text-align: center; display: none; }
#note span { display: inline-block; padding: 0.4em 1em; background: rgba(0, 0, 0, 0.75); color: #ffffff; border-radius: 8px; }

/* camera buttons: the only interaction (S-5.1) */
#bar { position: absolute; left: 0; bottom: 0.8em; width: 100%; text-align: center; display: none; }
.cam { display: inline-block; margin: 0.2em 0.25em; padding: 0.35em 0.9em; background: #222a33; color: #ffffff;
  border: 3px solid #445566; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.cam .num { color: #ffd34d; font-weight: bold; margin-right: 0.4em; }
.cam.on { border-color: #ffd34d; background: #33302a; }
.cam.next { border-color: #ffffff; }
.cam.dead { opacity: 0.3; filter: alpha(opacity=30); }          /* S-5.10: transparent while the camera is down */
.cam.grey { background: #3a3a3a; color: #8a8a8a; border-color: #555555; cursor: default; } /* S-8.4 */
.cam.grey .num { color: #8a8a8a; }

/* TV camera list, opened with OK (S-5.6d) */
#list { position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: rgba(0, 0, 0, 0.85); color: #ffffff;
  overflow: hidden; display: none; }
#list .head { padding: 0.8em 1em 0.4em; color: #b8c0c8; }
#list .row { padding: 0.4em 1em; margin: 0.15em 0.6em; border: 3px solid transparent; border-radius: 8px; color: #ffffff; }
#list .row .num { color: #ffd34d; font-weight: bold; margin-right: 0.5em; }
#list .row.focus { border-color: #ffd34d; background: #33302a; }
#list .row.on { color: #ffd34d; }
#list .row.dead { opacity: 0.3; filter: alpha(opacity=30); }

/* S-5.5a: next camera loading, over the camera that keeps playing */
#loading { position: absolute; top: 1em; right: 1em; padding: 0.4em 0.8em 0.4em 0.5em; background: rgba(0, 0, 0, 0.75);
  color: #ffffff; border-radius: 8px; display: none; }
#loading .spin { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; vertical-align: -0.1em;
  border: 3px solid #445566; border-top-color: #ffd34d; border-radius: 50%;
  -webkit-animation: flspin 1s linear infinite; animation: flspin 1s linear infinite; }
@-webkit-keyframes flspin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes flspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* S-5.13: only when the device blocks sound */
#sound { position: absolute; bottom: 5em; left: 0; width: 100%; text-align: center; display: none; }
#sound span { display: inline-block; padding: 0.5em 1.2em; background: #ffd34d; color: #000000; font-weight: bold; border-radius: 8px; }

/* ticket entry (S-7.3), usable with a TV remote */
#ticket { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -4em; text-align: center; display: none; }
#ticket .box { display: inline-block; padding: 1em 1.6em; background: rgba(0, 0, 0, 0.75); border: 2px solid #445566; border-radius: 10px; color: #ffffff; }
#ticket .title { font-size: 1.4em; font-weight: bold; margin-bottom: 0.6em; color: #ffffff; }
#ticket input { font-size: 1.2em; padding: 0.3em 0.5em; width: 10em; background: #ffffff; color: #000000; border: 3px solid #445566; border-radius: 6px;
  text-transform: uppercase; }
#ticket input:focus { border-color: #ffd34d; }
#ticket button { font-size: 1.2em; padding: 0.3em 0.9em; margin-left: 0.4em; background: #222a33; color: #ffffff; border: 3px solid #445566; border-radius: 6px; }
#ticket button:focus { border-color: #ffd34d; }
#ticket .err { margin-top: 0.6em; color: #ff8a8a; min-height: 1.3em; }
/* the ended screen: the message above, a code for the next event under it */
#msg.up { margin-top: -8em; }
#ticket.under { margin-top: -1em; }