/* Site demo extras (Bill, 2026-10-13): the "visual demo only" note and the way back to the site. Everything else is the app's own CSS. */
[hidden].dpop{display:none!important}
.dpop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(38,38,38,.55);opacity:0;transition:opacity .2s}
.dpop.in{opacity:1}
.dpop-card{position:relative;width:100%;max-width:360px;padding:30px 24px 20px;border-radius:22px;background:#fff;color:#262626;text-align:center;
  box-shadow:0 18px 50px rgba(1,40,90,.22);transform:translateY(12px);transition:transform .25s cubic-bezier(.32,.72,0,1)}
.dpop.in .dpop-card{transform:none}
.dpop-card h3{margin:0 0 10px;padding:0 34px;font-family:"Denuo Display","Russo One",var(--sans);font-weight:400;font-size:22px;line-height:1.1}
.dpop-card p{margin:0 0 20px;font-size:15px;line-height:1.45;color:#5e5e5e}
.dpop-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:#ececec;color:#262626;font-size:16px}
.dpop-cta{display:block;padding:15px 18px;border-radius:29px;background:#0083fe;color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.dpop-back{margin-top:10px;padding:10px;border:0;background:none;color:#5e5e5e;font-size:14px;text-decoration:underline}
.dpop-x:focus-visible,.dpop-cta:focus-visible,.dpop-back:focus-visible{outline:3px solid #0083fe;outline-offset:3px}

/* computers (Bill, 2026-10-13): the app's phone backgrounds stretched across a wide screen read as blue on blue, loading screen included.
   On a computer the demo uses the app's light gradient instead: white with soft blue at the corners. Phones keep the app's exact look. */
@media (min-width:760px){
  body.r2:not([data-screen="games"]) #r2bg{background:radial-gradient(110% 55% at 0% 0%, rgba(0,131,254,.075), transparent 62%), radial-gradient(90% 45% at 100% 100%, rgba(0,131,254,.06), transparent 60%), #f4f4f4 !important}
  body.r2:not([data-screen="games"]) #r2bg .lay{background-image:none !important}
  body.r2 #ask .links .link{color:var(--night);text-shadow:none}
  #r2splash, #r2splash .flow{background:radial-gradient(110% 55% at 0% 0%, rgba(0,131,254,.075), transparent 62%), radial-gradient(90% 45% at 100% 100%, rgba(0,131,254,.06), transparent 60%), #f4f4f4 !important}
}