/* Original page: white, Flash stage 756×465 centred both ways, stage colour #ededed. */
:root {
  --stage-w: 756;
  --stage-h: 465;
  --max-scale: 1.5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; }
.frame {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}
#stage {
  position: relative;
  width: min(calc(100vw - 32px), calc((100vh - 32px) * 756 / 465), calc(756px * var(--max-scale)));
  aspect-ratio: 756 / 465;
  /* #ededed stage; white under the bottom bar so no seam shows when scaled */
  background: linear-gradient(to bottom, #ededed calc(100% * 400 / 465), #fff 0);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#stage .layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#stage .layer .hit { pointer-events: visiblePainted; }
#stage .videohost {
  position: absolute; left: 0; top: 0;
  width: 100%; height: calc(100% * 400 / 465);
  visibility: hidden;
  background: #ededed;
}
#stage .videohost video { width: 100%; height: 100%; display: block; object-fit: fill; }

/* Browsers won't play sound without a click, so the loading word gains a small cue. */
.gesture-cue {
  position: absolute; z-index: 5;
  left: 0; right: 0; top: calc(100% * 228 / 465);
  margin: 0; text-align: center;
  font: 900 clamp(8px, 1.45cqw, 13px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: #999;
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
#stage { container-type: inline-size; }
.needs-gesture .gesture-cue { opacity: 1; animation: cue 1.2s steps(2) infinite; }
.needs-gesture #stage { cursor: pointer; }
@keyframes cue { 50% { color: #000; } }
.noscript { text-align: center; font: 14px Helvetica, Arial, sans-serif; }