/* ===== Math Hero Chronicles — store download badges + promo video =====
   Shared by every page (x-dc pages, legal pages, 404). Badges follow the
   official App Store / Google Play badge layout (black plate, thin grey
   rim, logo + two-line label). Built in-page — no third-party badge images. */

.mhc-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mhc-badges--center { justify-content: center; }

.mhc-badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 7px 18px 7px 13px;
  background: #000; color: #fff;
  border: 1px solid #a6a6a6; border-radius: 10px;
  text-decoration: none; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.7);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mhc-badge:hover { transform: translateY(-2px); border-color: #FFD86A; box-shadow: 0 12px 24px -10px rgba(255,216,106,0.45); }
.mhc-badge:focus-visible { outline: 2px solid #FFD86A; outline-offset: 3px; }
.mhc-badge svg { width: 27px; height: 27px; flex: 0 0 auto; display: block; }
.mhc-badge-text { display: flex; flex-direction: column; line-height: 1; }
.mhc-badge-small { font-size: 11px; font-weight: 500; letter-spacing: .2px; margin-bottom: 3px; color: #fff; }
.mhc-badge-small--caps { font-size: 10px; letter-spacing: .9px; text-transform: uppercase; }
.mhc-badge-big { font-size: 21px; font-weight: 600; letter-spacing: -.3px; color: #fff; white-space: nowrap; }

/* Compact variant (footers) */
.mhc-badges--sm { gap: 10px; }
.mhc-badges--sm .mhc-badge { min-height: 44px; padding: 5px 14px 5px 11px; gap: 8px; border-radius: 9px; }
.mhc-badges--sm .mhc-badge svg { width: 22px; height: 22px; }
.mhc-badges--sm .mhc-badge-small { font-size: 9.5px; margin-bottom: 2px; }
.mhc-badges--sm .mhc-badge-small--caps { font-size: 8.5px; }
.mhc-badges--sm .mhc-badge-big { font-size: 17px; }

/* Visually hidden helper (e.g. "opens in a new tab") */
.mhc-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Promo video (home) — vertical 9:16, capped so it never dominates desktop */
.mhc-video-frame {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto;
  aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  background: #0e0a20; border: 1.5px solid rgba(255,216,106,0.35);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8), 0 0 0 6px rgba(255,255,255,0.03);
}
.mhc-video-frame video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #0e0a20; }

/* Phone: footers stack + centre, so centre the badge row with them */
@media (max-width: 768px) {
  footer .mhc-badges { justify-content: center; margin-bottom: 10px; }
}

/* Small phones: keep the two main badges side by side (still >= 44px tall) */
@media (max-width: 400px) {
  .mhc-badges { gap: 10px; }
  .mhc-badge { min-height: 48px; padding: 6px 12px 6px 10px; gap: 8px; }
  .mhc-badge svg { width: 24px; height: 24px; }
  .mhc-badge-small { font-size: 10px; }
  .mhc-badge-small--caps { font-size: 9px; }
  .mhc-badge-big { font-size: 18px; }
  .mhc-video-frame { max-width: 300px; }
}