:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0c100d; color: #e8efe9; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { position: relative; height: 100dvh; }
iframe { display: block; width: 100%; height: 100%; border: 0; }
[hidden] { display: none !important; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #0c100d;
  text-align: center; padding: 1.5rem; box-sizing: border-box; z-index: 2; }
.overlay h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 8vw, 3rem); }
.overlay p { margin: .5rem 0; }
.card { width: min(100%, 25rem); padding: 2rem 1.25rem; border: 1px solid #41694f;
  border-radius: 1rem; background: rgba(12, 22, 16, .96); }
.eyebrow { color: #4ade9a; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; }
#result-shots { font-size: 2rem; }
button { margin-top: 1.25rem; border: 0; border-radius: .6rem; padding: .9rem 1.5rem;
  background: #4ade9a; color: #06170e; font: 700 1rem system-ui, sans-serif; }
.hint { position: absolute; z-index: 1; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem);
  padding: .7rem 1rem; border-radius: 3rem; background: rgba(12, 22, 16, .9);
  border: 1px solid #4ade9a; font-size: .9rem; text-align: center; pointer-events: none; }