* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b1f3f; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* 1080 x 1920 artboard, the Figma frame size; scaled to the window by app.js */
#stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: center; overflow: hidden; background: linear-gradient(180deg, #f4f4f4 0%, #e5eaff 100%); font-family: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif; }
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.screen.on { opacity: 1; pointer-events: auto; }
.piece { position: absolute; display: block; pointer-events: none; }
/* only on the screen that is showing: a child's `auto` would otherwise beat its hidden screen's `none` */
.piece.tap { cursor: pointer; transition: transform 120ms ease, filter 120ms ease; }
.screen.on .piece.tap { pointer-events: auto; }
.piece.tap:active { transform: scale(0.97); filter: brightness(0.92); }
.piece.off { display: none; }
[data-screen="attract"] { cursor: pointer; }

.disc { position: absolute; border-radius: 50%; background: #fff; }
#captureDisc { left: -101px; top: 511px; width: 1282px; height: 1282px; }
#liveView { position: absolute; left: -60px; top: 552px; width: 1200px; height: 1200px; border-radius: 50%; background: #1b2b3a; }
#reviewDisc { left: 65px; top: 297px; width: 951px; height: 951px; }
#shotView { position: absolute; left: 95px; top: 327px; width: 890px; height: 890px; border-radius: 50%; background: #1b2b3a; }
.count { position: absolute; left: 0; right: 0; top: 965px; height: 373px; line-height: 373px; text-align: center; color: #fff; font: 600 308px/373px "Avenir Next", "Segoe UI", system-ui, sans-serif; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 420ms ease-out; }
@keyframes flash { 0% { opacity: .95 } 100% { opacity: 0 } }
.screen:not(.on) .cam-error { pointer-events: none; }
.cam-error { position: absolute; left: 140px; right: 140px; top: 900px; padding: 48px; border-radius: 24px; background: rgba(255, 255, 255, .96); text-align: center; display: none; }
.cam-error.on { display: block; }
.cam-error p { margin: 0 0 32px; font-size: 46px; line-height: 1.25; color: #0b1f3f; }
.cam-error button { font: inherit; font-size: 46px; padding: 18px 54px; border: 0; background: #0067a6; color: #fff; }

/* poll: track 550 x 43 at x 327; rows at y 1070 / 1182 / 1295 / 1409 */
.track { position: absolute; left: 327px; width: 550px; height: 43px; background: #fff; }
.track i { display: block; height: 100%; width: 0; background: #0067a6; transition: width 900ms cubic-bezier(.2, .8, .2, 1); }
.pct { position: absolute; left: 890px; width: 110px; height: 43px; line-height: 43px; text-align: center; font-size: 55px; color: #0067a6; }

#cardView { position: absolute; left: 132px; top: 312px; width: 815px; height: 1223px; background: #fff; box-shadow: 0 10px 40px rgba(0, 40, 90, .18); }
#qrBox { position: absolute; left: 248px; top: 934px; width: 584px; height: 584px; background: #fff; display: grid; place-items: center; }
#qr img, #qr svg { display: block; width: 500px; height: 500px; image-rendering: pixelated; }
#qrNote { position: absolute; left: -100px; right: -100px; bottom: -74px; margin: 0; text-align: center; font-size: 40px; color: #0067a6; }

#printImg { display: none; }
@media print {
  @page { size: 4in 6in; margin: 0; }
  html, body { background: #fff; height: auto; overflow: visible; }
  #stage { display: none; }
  #printImg { display: block; width: 4in; height: 6in; object-fit: cover; }
}