/* The store badges (option C, contract 2), the QR code and the phone install bar (contract 3).

   A slot is <div data-store-badges data-slot="hero|card|drawer|footer|install"> with plain links to
   both stores inside. This sheet needs no script: a link that goes to a store shows that store's own
   badge at one size, in the visitor's language, in the order the stores ask for, set before anything
   else arrives, so nothing moves. The link's words stay in the page for screen readers.

   The files in images/badges/ are the vendors' own, byte for byte (docs/store-badges.md has the
   sources and the rules; scripts/check-store-badges.mjs holds their checksums). Never restyle one
   here: no shadow, filter, press or season colour. A link that is not a way into a store (a store
   not live yet, a country it does not serve) gets words, never a badge and never a store's logo.

   Specificity: css/v2.css, v2-skin.css and v2-home.css paint `html .store-live .sl-badge` candy with
   !important. These selectors out-rank them. */

html { scroll-padding-bottom: calc(var(--consent-h, 0px) + var(--installbar-h, 0px) + 78px); } /* 78px clears the accessibility button, as in css/a11y.css */

/* Which file for which language. Only the pair a page uses is downloaded.
   Hebrew takes Google's English badge: Google's Hebrew file has its words reversed, and Google bars a
   badge with illegible text. Hindi takes Apple's English badge: Apple's tool has no Hindi. Both are
   in docs/store-badges.md. --sb-ios-size: Apple's Hebrew file alone has a margin, 42 high around a
   40-high badge, so it is drawn larger to keep the same visible height. */
html { --sb-ios: url(/images/badges/app-store-en.svg); --sb-play: url(/images/badges/google-play-en.svg); --sb-ios-size: auto 100%; }
html[lang="he"] { --sb-ios: url(/images/badges/app-store-he.svg); --sb-ios-size: auto 105%; }
html[lang="es-419"] { --sb-ios: url(/images/badges/app-store-es-419.svg); --sb-play: url(/images/badges/google-play-es-419.svg); }
html[lang="pt-BR"] { --sb-ios: url(/images/badges/app-store-pt-BR.svg); --sb-play: url(/images/badges/google-play-pt-BR.svg); }
html[lang="id"] { --sb-ios: url(/images/badges/app-store-id.svg); --sb-play: url(/images/badges/google-play-id.svg); }
html[lang="hi"] { --sb-play: url(/images/badges/google-play-hi.svg); }

/* The sizes. --sb-h is the height a badge asks for; on a phone too narrow for that both shrink
   together, and under 350px, before the menu's narrower row falls under Apple's 40px minimum, they stack. The two widths come from the
   artwork (119.664 x 40 and 238.96 x 70.87), so the heights always match and Google's badge is the
   wider, as Google asks. The gap is the quarter of the height both stores ask to keep clear. */
html body [data-store-badges] {
  --sb-h: 48px;
  --sb-gap: calc(var(--sb-h) / 4);
  --sb-max: calc(var(--sb-h) * 6.3634 + var(--sb-gap));
  display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: var(--sb-gap);
  width: min(100%, var(--sb-max)); margin: 0; padding: 0; animation: none;
}
html body .about-inner [data-store-badges] { margin-block-end: 22px; } /* how-to-play and release-date: between the title and its text */

/* ---------------------------------------------------------------- the badge */
html body [data-store-badges][data-store-badges] > a[href*="apps.apple.com"]:not(.cc-out):not(.sl-soon):not(.sb-word),
html body [data-store-badges][data-store-badges] > a[href*="play.google.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) {
  position: relative; display: block; box-sizing: border-box;
  min-width: 0; min-height: 0 !important; height: auto; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; filter: none !important; opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  color: transparent !important; font-size: 0 !important; line-height: 0; text-shadow: none !important; text-decoration: none !important;
}
html body [data-store-badges][data-store-badges] > a[href*="apps.apple.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) {
  flex: 0 0 min(var(--sb-h) * 2.9916, (100% - var(--sb-gap)) * .47013); aspect-ratio: 2.9916;
  background: var(--sb-ios) center / var(--sb-ios-size) no-repeat !important;
}
html body [data-store-badges][data-store-badges] > a[href*="play.google.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) {
  flex: 0 0 min(var(--sb-h) * 3.3718, (100% - var(--sb-gap)) * .52987); aspect-ratio: 3.3718;
  background: var(--sb-play) center / auto 100% no-repeat !important;
}
/* The link's words, for screen readers. */
html body [data-store-badges][data-store-badges] > a[href*="apps.apple.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) > *,
html body [data-store-badges][data-store-badges] > a[href*="play.google.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) > * {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* The tap reaches the 48px the site asks of a target where a narrow phone shrinks the art, inside the clear space. */
html body [data-store-badges][data-store-badges] > a[href*="apps.apple.com"]:not(.cc-out):not(.sl-soon):not(.sb-word)::after,
html body [data-store-badges][data-store-badges] > a[href*="play.google.com"]:not(.cc-out):not(.sl-soon):not(.sb-word)::after {
  content: ''; position: absolute; display: block !important; inset: -4px 0;
}

/* ---------------------------------------------------------------- the words
   What is left: a store not live yet, on the home page's closed state. Same reach as a badge. */
html body [data-store-badges] > a:not([href*="apps.apple.com"]):not([href*="play.google.com"]):not(.cc-out):not(.sl-soon) {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 0; min-width: 0; min-height: 52px !important;
  margin: 0; padding: 6px 8px !important; border: 0 !important; border-radius: 14px !important;
  background: linear-gradient(180deg, var(--face-top) 0%, var(--face) 60%) !important; color: #fff !important;
  box-shadow: 0 4px 0 var(--base), 0 10px 18px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .45) !important;
  text-shadow: 0 1px 0 var(--base) !important;
  font-family: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif !important; font-size: 15px; font-weight: 400 !important; font-synthesis: none; line-height: 1.1; letter-spacing: 0;
  text-decoration: none !important; text-transform: none !important; text-align: start; white-space: nowrap;
  opacity: 1 !important; transform: none; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease !important;
}
html body [data-store-badges] > a[hidden] { display: none !important; }
html body [data-store-badges] > a:not([href*="apps.apple.com"]):not([href*="play.google.com"]):not(.cc-out):not(.sl-soon):hover { filter: brightness(1.07); transform: translateY(-1px) !important; }
html body [data-store-badges] > a:not([href*="apps.apple.com"]):not([href*="play.google.com"]):not(.cc-out):not(.sl-soon):active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--base), 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3) !important; }
html body [data-store-badges] > a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* What is inside: half a phone's width has to hold the longest of the six languages. */
html body [data-store-badges][data-store-badges] > a * { font-family: inherit !important; font-weight: 400 !important; }
html body [data-store-badges][data-store-badges] > a > span { min-width: 0; }
html body [data-store-badges][data-store-badges] > a .sl-s { display: block; font-size: 10.5px !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: none !important; opacity: .95 !important; }
html body [data-store-badges][data-store-badges] > a .sl-c { display: block; font-size: 15px !important; line-height: 1.1 !important; letter-spacing: 0 !important; margin: 1px 0 0 !important; }
html body [data-store-badges] > a.cc-out .sl-s, html body [data-store-badges] > a.sl-soon .sl-s { white-space: normal; } /* their notes are longer than a store's name */

/* The text buttons sit in the same row at the same reach. */
html body [data-store-badges] > a.cc-out, html body [data-store-badges] > a.sl-soon {
  gap: 7px; flex: 1 1 0; min-width: 0; min-height: 52px; margin: 0; padding: 6px 8px !important; animation: none; white-space: nowrap;
}
html body [data-store-badges] > a:not([href*="apps.apple.com"]):not([href*="play.google.com"]) { order: 3; } /* a store that has the game comes before one that will, whichever store it is */
html body [data-store-badges] > a.cc-out:not(.sl-badge) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px;
  background: #2E2E55; color: #fff; text-decoration: none; font-weight: 700; line-height: 1.2; text-align: center;
}
.sb-out { display: block; font-size: 11px; font-weight: 600; white-space: normal; }
html body .hub-card [data-store-badges] > a { max-width: calc(var(--sb-h) * 3.3718); } /* the home card's slot is as wide as the card: words beside a badge stay a badge's width */

/* ---------------------------------------------------------------- the order
   The App Store first, on every device: Apple asks for its badge first in any lineup. */
html body [data-store-badges] > a[href*="apps.apple.com"] { order: 1; }
html body [data-store-badges] > a[href*="play.google.com"] { order: 2; }

/* The narrowest phones: one above the other, at Apple's minimum height or more. */
@media (max-width: 349px) {
  html body [data-store-badges][data-store-badges] > a[href*="apps.apple.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) { flex: 0 0 calc(44px * 2.9916); }
  html body [data-store-badges][data-store-badges] > a[href*="play.google.com"]:not(.cc-out):not(.sl-soon):not(.sb-word) { flex: 0 0 calc(44px * 3.3718); }
  html body [data-store-badges] > a.cc-out, html body [data-store-badges] > a.sl-soon, html body [data-store-badges] > a.sb-word, html body [data-store-badges] > a:not([href*="apps.apple.com"]):not([href*="play.google.com"]):not(.cc-out):not(.sl-soon) { flex: 0 0 100%; }
}

/* ---------------------------------------------------------------- the rating and the QR code */
html body [data-store-badges] .sb-rate { order: 3; flex: 0 0 100%; margin: 0; font-size: .86rem; font-weight: 700; color: var(--text-soft, #C9C9E4); white-space: pre-wrap; }
html body [data-store-badges] .sb-qr { display: none; }
@media (min-width: 900px) and (hover: hover) {
  /* The room for the code exists before the script adds it, so nothing below it moves. */
  html:not([data-os="android"]):not([data-os="ios"]):not([data-store-here="none"]) body [data-store-badges][data-slot="hero"]:not([data-sb-noqr]) { --sb-max: 372px; min-height: 180px; align-content: flex-start; }
  html body [data-store-badges] .sb-qr {
    order: 4; display: flex; flex: 0 0 100%; align-items: center; gap: 14px;
    padding: 8px 16px 8px 8px; border-radius: 18px; background: var(--panel, #1B1B3D); border: 1px solid var(--line, rgba(255, 255, 255, .12));
    text-align: start; line-height: 1.35;
  }
  html[dir="rtl"] body [data-store-badges] .sb-qr { padding: 8px 8px 8px 16px; }
  .sb-qr img { flex: none; width: 99px; height: 99px; border-radius: 10px; background: #fff; } /* 33 modules x 3px: whole pixels stay sharp enough to scan off a screen */
  .sb-qr b { display: block; font-size: .96rem; font-weight: 800; color: var(--moon, #fff); }
  .sb-qr .sb-qr-s { display: block; margin-top: 2px; font-size: .84rem; color: var(--text-soft, #C9C9E4); }
}

/* ---------------------------------------------------------------- the install bar (contract 3)
   Phones only. Moved by transform alone, and out of the way of focus while it is off. */
.sb-bar {
  position: fixed; z-index: 75; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(23, 23, 58, .97); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  color: #fff; font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: start;
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
.sb-bar.on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.sb-bar img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.sb-bar-t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sb-bar-t b { display: block; font-weight: 800; font-size: .98rem; }
.sb-bar-s { display: block; font-size: .8rem; color: #C9C9E4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bar-get {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 88px; padding: 0 18px; border-radius: 14px;
  background: linear-gradient(180deg, #7ACB84 0%, #4FB05C 60%); box-shadow: 0 3px 0 #24592D;
  color: #fff; font-family: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif; font-weight: 400; font-size: 1.05rem; text-decoration: none; text-shadow: 0 1px 0 #24592D;
}
.sb-bar-get:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 900px) { .sb-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sb-bar, .sb-bar.on { transition: none; } }
html.motion-off .sb-bar, html.lite .sb-bar { transition: none; }