/* The show's page; see index.html. */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#start {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 10;
  font: 16px system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .6);
  padding: .6em 1.1em; border-radius: 999px; pointer-events: none; transition: opacity .4s;
}
#start.gone { opacity: 0; }

#corner {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 20;
  display: flex; gap: 8px; align-items: center; transition: opacity .6s;
  font: 14px system-ui, sans-serif; color: #fff;
}
#corner.idle { opacity: 0; }
#corner button, #corner label {
  height: 38px; border: 0; border-radius: 19px; color: #fff; background: rgba(0, 0, 0, .5);
}
#corner button { width: 38px; display: grid; place-items: center; cursor: pointer; }
#corner label { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 14px; }
#corner select { font: inherit; color: #fff; background: transparent; border: 0; cursor: pointer; }
#corner select option { background: #111; }
#corner button:hover, #corner label:hover, #corner :focus-visible { background: rgba(0, 0, 0, .8); }
#reset span, #reset.armed svg { display: none; }
#corner #reset.armed { width: auto; padding: 0 14px; font: inherit; background: rgba(150, 40, 30, .9); }
#reset.armed span { display: inline; }

#credits, #status {
  position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  font: 12px system-ui, sans-serif; color: rgba(255, 255, 255, .75); background: rgba(0, 0, 0, .45);
  padding: 5px 12px; border-radius: 999px; transition: opacity .6s;
}
#credits { left: 10px; }
#status { right: 10px; pointer-events: none; max-width: min(60vw, 420px); }
#status.gone { opacity: 0; }
#credits a { color: inherit; }
#credits a:hover { color: #fff; }
#credits.idle { opacity: 0; }

#panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 30;
  display: flex; flex-direction: column; background: #000; box-shadow: -8px 0 24px rgba(0, 0, 0, .6);
  transform: translateX(105%); transition: transform .25s ease;
}
#panel.open { transform: none; }
#panel header {
  display: flex; align-items: center; gap: 8px; color: #fff; font: 15px system-ui, sans-serif;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 16px; border-bottom: 1px solid #222;
}
#panel header span { flex: 1; font-weight: 600; }
#panel header button {
  height: 32px; padding: 0 12px; border: 1px solid #333; border-radius: 8px; color: #fff;
  background: #111; font: inherit; cursor: pointer;
}
#panel header button:hover { background: #222; }
#panel iframe { flex: 1; width: 100%; border: 0; }