/* "Get the app" sheet for the offline web build. Web-only: never copied into WebPreview/, so the two apps
   are untouched by it.

   This is a SEPARATE file from play-lock.css on purpose. That file is pinned against ever setting `position`
   or `transform`, because .board-mode is absolutely positioned and centred with translate(-50%, -50%) and an
   earlier version threw the Friends tile into the middle of the board. A dialog needs `position: fixed`, so it
   cannot live there. Keep it that way.

   Logical properties throughout — the payload runs right-to-left in Arabic and Urdu. */

.webstore-scrim[hidden] { display: none; }
.webstore-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;                       /* .home-screen is z-index 10; the language/leaderboard overlays sit above it */
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 8, 20, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: webstore-fade .16s ease-out both;
}
.webstore-sheet {
  inline-size: min(340px, 100%);
  box-sizing: border-box;
  padding: 20px 18px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
  color: #16203a;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .48), inset 0 1px 0 #fff;
  text-align: center;
  animation: webstore-rise .2s cubic-bezier(.2, .9, .3, 1) both;
}
.webstore-title {
  margin: 0 0 4px;
  font-size: 1.12rem;
  font-weight: 800;
  text-wrap: balance;
}
.webstore-sub {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.35;
  color: #4a5673;
  text-wrap: balance;
}
.webstore-links { display: grid; gap: 9px; }
.webstore-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 46px;              /* a comfortable touch target on the smallest phone */
  padding-inline: 14px;
  border-radius: 13px;
  background: #16203a;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .14s ease, filter .14s ease;
}
.webstore-link:hover,
.webstore-link:focus-visible { filter: brightness(1.16); transform: translateY(-1px); }
.webstore-link:active { transform: translateY(0); }
.webstore-close {
  margin-block-start: 12px;
  border: 0;
  background: none;
  color: #63708f;
  font: inherit;
  font-size: .85rem;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  min-block-size: 40px;
}
.webstore-close:hover, .webstore-close:focus-visible { color: #16203a; background: rgba(22, 32, 58, .07); }

@keyframes webstore-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes webstore-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .webstore-scrim, .webstore-sheet { animation: none; }
  .webstore-link { transition: none; }
}