/* The screens of shared/gdscreens.js on the 360-wide logical screen. The
   designed ones (splash, how to play, gold) are the final art at the positions
   in shared/finalart.js; --g1/--g2 (set by sizeScreens) are the extra height
   of a phone taller than the 360 x 640 design, split above and below it. */
.screen { position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; pointer-events: none; }
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; }
/* A screen fading out takes no taps: its buttons ask for pointer-events
   themselves, and visibility only turns hidden when the fade ends, so for a
   quarter second a tap where How to's BACK or the stall screen's BACK had
   been went to them instead of the dig (a thumb starting to mash went back
   to the splash, or left for the store). !important beats `#ui button`. */
.screen:not(.on), .screen:not(.on) * { pointer-events: none !important; }
.screen img { -webkit-user-drag: none; }
/* NEXT pressed while the game's art is still on its way: it pulses until it lands. */
.fbtn.wait { animation: fbtn-wait .7s ease-in-out infinite alternate; }
@keyframes fbtn-wait { to { opacity: .45; transform: scale(.96); } }

/* The designer's background: top part, the extra height (the rows under the
   split, then the same mirrored, so both seams meet a matching row), the rest. */
.fbg { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; }
.fbg i { flex: none; display: block; width: 360px; background: var(--bg) no-repeat; background-size: 360px 640px; }
.fbg .t { height: var(--split); }
.fbg .g { height: var(--g1, 0px); background-position: 0 calc(-1 * var(--split)); }
.fbg .g.f { height: var(--g2, 0px); transform: scaleY(-1); }
.fbg .b { height: calc(640px - var(--split)); background-position: 0 calc(-1 * var(--split)); }

/* The design itself, centred. */
.board { position: absolute; left: 0; top: var(--g1, 0px); width: 360px; height: 640px; }
.board > * { position: absolute; margin: 0; }
.board .art { display: block; pointer-events: none; }
.fbtn { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.fbtn img { display: block; width: 100%; height: 100%; pointer-events: none; transition: transform .08s, filter .08s; }
.fbtn:active img, .fbtn.down img { transform: translateY(2px); filter: brightness(.9); }
.fbtn:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

/* "Khoda pahad, nikla sona?!": the banner drops in, the shovel swings from
   it, the nugget pops up and bobs, the sparkles twinkle, then the line and
   the bar. Steps keep the motion as chunky as the art. */
.gold.on .banner { animation: g-drop .45s steps(5) both; }
.gold.on .shovel { transform-origin: 50% 0; animation: g-drop .45s steps(5) both, g-swing 2.4s ease-in-out .5s infinite; }
.gold.on .nugget { animation: g-pop .5s cubic-bezier(.3, 1.6, .5, 1) .35s both, g-bob 1.8s steps(4) .9s infinite; }
.gold .spark { opacity: 0; }
.gold.on .spark { animation: g-twinkle 1.6s steps(4) calc(.6s + var(--d, 0s)) infinite; }
.gold.on .line { animation: g-fade .35s steps(3) .8s both; }
.gold .cta { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.gold.on .cta { opacity: 1; visibility: visible; transition-delay: 1.1s; animation: g-nudge 1.2s steps(2) 2.4s infinite; }
@keyframes g-drop { from { transform: translateY(-40px); opacity: 0; } }
@keyframes g-swing { 50% { transform: rotate(4deg); } 0%, 100% { transform: rotate(-4deg); } }
@keyframes g-pop { from { transform: scale(.3) translateY(30px); opacity: 0; } }
@keyframes g-bob { 50% { transform: translateY(-3px); } }
@keyframes g-twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 35%, 65% { opacity: 1; transform: scale(1); } }
@keyframes g-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes g-nudge { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .gold.on * { animation: none !important; } .gold .spark { opacity: 1; } }

/* The form and thanks: ours, on the explainer's background, a column centred
   on the screen. */
.screen .col { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--safe-top, 0px) + 16px) 0 16px; }
.screen .brands { width: 172px; display: block; margin-bottom: 10px; }
.lead, .done { width: 300px; text-align: center; }
.screen .lime { margin: 0; color: #FCDE94; font-size: 18px; line-height: 1.01; white-space: pre-line; }
#s-form .fbanner { width: 330px; margin-bottom: 8px; }
/* The prize coin (the form and thanks): a shine sweeps across it every few seconds. */
.prize-coin { margin: 8px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.prize-coin .shine { position: relative; display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px #2A0A16, 0 0 18px rgba(255, 200, 60, 0.55); }
.prize-coin img { display: block; width: 100%; height: 100%; }
.prize-coin .shine::after { content: ''; position: absolute; inset: -20%; transform: translateX(-120%) rotate(20deg);
  background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 240, 0.75) 50%, transparent 65%); animation: coin-shine 3.2s ease-in-out infinite; }
@keyframes coin-shine { 0%, 55% { transform: translateX(-120%) rotate(20deg); } 85%, 100% { transform: translateX(120%) rotate(20deg); } }
.prize-coin figcaption { color: #FCDE94; font: 400 14px/.79 var(--px-font); text-transform: uppercase; white-space: nowrap; }
.prize-coin.small .shine { width: 60px; height: 60px; }
.lead label { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; text-align: left; }
.lead label .px-h { flex: none; width: 104px; font-size: 15px; }
.lead input { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid #FFF8FF; border-radius: 0; background: transparent;
  color: #FFF8FF; font: 400 20px/1.04 var(--px-font); padding: 2px 0; outline: none; -webkit-user-select: text; user-select: text; }
.lead input:focus { border-bottom-color: var(--px-yellow); }
.lead .err { margin: 3px 0 0; min-height: 12px; text-align: right; color: var(--px-yellow); font: 400 12px/.95 var(--px-font); }
#s-form .submit { width: 168px; margin-top: 30px; }
.tnc { margin: 10px 0 0; color: rgba(255, 248, 255, 0.75); font: 400 12px/.75 var(--px-font); }
.done > .px-h { margin: 6px 0 0; font-size: 16px; line-height: 1.05; }
/* Thanks: the coin's caption and the line under it read as one sentence. */
#s-thanks .prize-coin figcaption { font-size: 18px; line-height: 1.01; }
#s-thanks .done > .lime { margin: 2px 0 0; }
#s-thanks .done > p.px-h { margin-top: 12px; }
#s-thanks .again { width: 190px; margin-top: 34px; }
/* Saving: dots that keep moving until the database confirms; a second line
   only once the network is slow. */
#s-saving .dots i { display: inline-block; font-style: normal; animation: saving-dot 1.2s infinite both; }
#s-saving .dots i:nth-child(2) { animation-delay: .2s; }
#s-saving .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes saving-dot { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }
#s-saving .slow { visibility: hidden; margin-top: 12px; font-size: 14px; }
#s-saving.slow .slow { visibility: visible; }

/* Short screens (logical height under 700, e.g. an iPhone in Safari): the
   form and thanks, tighter, so they fit without losing the brands. */
.short .screen .brands { width: 136px; margin-bottom: 4px; }
.short #s-form .fbanner { margin-bottom: 2px; }
.short .prize-coin { margin: 2px 0 0; }
.short .prize-coin .shine { width: 54px; height: 54px; }
.short .prize-coin.small .shine { width: 46px; height: 46px; }
.short .lead label { margin-top: 6px; }
.short #s-form .submit { margin-top: 26px; }
.short .tnc { margin-top: 6px; }
.short #s-thanks .again { margin-top: 28px; }

/* The play screens' brand strip, top left (the icons sit top right) */
.brand-strip { position: absolute; left: 10px; top: calc(var(--safe-top, 0px) + 8px); z-index: 9; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: rgba(34, 0, 16, 0.62); box-shadow: inset 0 0 0 2px rgba(255, 242, 0, 0.45);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; pointer-events: none; }
.brand-strip.on { opacity: 1; visibility: visible; }
.brand-strip img { display: block; height: 22px; width: auto; }
.brand-strip img + i + img { height: 16px; }
.brand-strip i { width: 1px; height: 22px; background: rgba(255, 248, 238, 0.45); }

/* Screen-reader text */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }