/*
 * The three materials the whole app (and so the whole site) is built from,
 * ported from theme_tokens.gd's own stylebox builders:
 *
 *   1. CREAM CARD   make_card_stylebox()  - cream face + a SOLID, unblurred
 *                   copy of its own shape offset N px down. Not a soft blur.
 *   2. GUMMY BUTTON make_gummy_stylebox() - gradient face, a solid lift
 *                   beneath it, and an INSET dark band along the bottom of
 *                   the face. Pressing collapses the lift.
 *   3. WOOD CHROME  make_wood_stylebox()  - carved honey wood, the layer
 *                   between the illustrated world and the cream paper.
 *
 * Anything that needs a surface uses one of these. No ad-hoc shadows.
 */

/* ==========================================================================
   1. Cream card
   ========================================================================== */

.card {
  background: var(--card-cream);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow:
    0 6px 0 var(--card-bevel),
    0 16px 28px var(--card-shadow);
}

.card--hero {
  border-radius: 28px;
  padding: var(--s6);
  box-shadow:
    0 10px 0 var(--card-bevel-hero),
    0 26px 44px var(--card-shadow);
}

.card--tight {
  padding: var(--s4);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  color: var(--ink-card-title);
}

.card p {
  color: var(--ink-card-body);
}

/* A card that lifts slightly when pointed at. Transform only - the shadow
   distance changes with it so the card reads as rising, not growing. */
.card--lift {
  transition:
    transform var(--react-up) var(--ease-out),
    box-shadow var(--react-up) var(--ease-out);
}

@media (hover: hover) {
  .card--lift:hover {
    transform: translateY(-4px);
    box-shadow:
      0 10px 0 var(--card-bevel),
      0 22px 34px var(--card-shadow);
  }
}

.card--sunken {
  background: var(--card-sunken);
  box-shadow: inset 0 3px 0 rgba(15, 61, 107, 0.08);
}

/* ==========================================================================
   2. Gummy button
   ========================================================================== */

.btn {
  --lift: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-pill);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--gummy-blue-top), var(--gummy-blue-bottom));
  color: #fff;
  box-shadow:
    0 var(--lift) 0 var(--gummy-blue-lift),
    inset 0 -4px 0 var(--gummy-blue-inset);
  transition:
    transform var(--react-down) var(--ease-out),
    box-shadow var(--react-down) var(--ease-out),
    filter var(--react-up) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    filter: saturate(1.08) brightness(1.04);
  }
}

/* The press: the button drops the exact height of its own lift, into its own
   shadow. Same trick icon_button.gd plays in the app. */
.btn:active {
  transform: translateY(var(--lift));
  box-shadow:
    0 0 0 var(--gummy-blue-lift),
    inset 0 -2px 0 var(--gummy-blue-inset);
}

.btn--lg {
  min-height: 62px;
  font-size: 1.2rem;
  padding: 0 var(--s7);
  --lift: 7px;
}

.btn--gold {
  background: linear-gradient(var(--gem-gold-0), var(--gem-gold-1));
  color: var(--gem-ink);
  box-shadow:
    0 var(--lift) 0 var(--gem-shadow),
    inset 0 -4px 0 var(--gummy-gold-inset);
}
.btn--gold:active {
  box-shadow: 0 0 0 var(--gem-shadow), inset 0 -2px 0 var(--gummy-gold-inset);
}

.btn--green {
  background: linear-gradient(var(--cta-green-0), var(--cta-green-1));
  color: #0d3d18;
  box-shadow:
    0 var(--lift) 0 #2c9c3d,
    inset 0 -4px 0 rgba(9, 80, 26, 0.26);
}
.btn--green:active {
  box-shadow: 0 0 0 #2c9c3d, inset 0 -2px 0 rgba(9, 80, 26, 0.26);
}

.btn--coop {
  background: linear-gradient(var(--coop-1), var(--coop-0));
  color: #fff;
  box-shadow:
    0 var(--lift) 0 var(--coop-shadow),
    inset 0 -4px 0 rgba(60, 20, 110, 0.3);
}
.btn--coop:active {
  box-shadow: 0 0 0 var(--coop-shadow), inset 0 -2px 0 rgba(60, 20, 110, 0.3);
}

/* Quiet button: a cream face on a cream card. Used where a gummy CTA would
   shout - notably the legal pages. */
.btn--quiet {
  background: var(--card);
  color: var(--ink-card-title);
  box-shadow:
    0 var(--lift) 0 var(--card-bevel),
    inset 0 -3px 0 rgba(15, 61, 107, 0.06);
}
.btn--quiet:active {
  box-shadow: 0 0 0 var(--card-bevel), inset 0 -2px 0 rgba(15, 61, 107, 0.06);
}

.btn[aria-disabled='true'],
.btn:disabled {
  pointer-events: none;
  filter: grayscale(0.5);
  opacity: 0.55;
}

/* ==========================================================================
   3. Wood chrome
   ========================================================================== */

.wood {
  position: relative;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(138, 75, 31, 0.14) 0 2px,
      rgba(138, 75, 31, 0) 2px 9px
    ),
    linear-gradient(var(--wood-light), var(--wood-honey));
  border-radius: 18px;
  box-shadow:
    0 7px 0 var(--wood-dark),
    0 18px 30px rgba(74, 38, 12, 0.28),
    inset 0 2px 0 rgba(255, 244, 214, 0.55);
}

/* A carved wooden plaque, used for section headers. The two brass screws are
   decorative anchors only - never a tap target (master system section 3). */
.plaque {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s6);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px var(--wood-dark);
}

.plaque::before,
.plaque::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--brass) 60%, #9a6a05);
  box-shadow: inset 0 -1px 1px rgba(90, 55, 0, 0.6);
}

/* ==========================================================================
   Chips, pills and badges
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3);
  border-radius: var(--r-pill);
  background: var(--card-sunken);
  color: var(--ink-card-meta);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
}

.chip--gold {
  background: var(--gold-chip-bg);
  color: var(--gold-chip-ink);
}
.chip--leaf {
  background: #e2fbe7;
  color: #17702c;
}
.chip--grape {
  background: #f1e8ff;
  color: #59279c;
}
.chip--berry {
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.chip--coop {
  background: #f3e9ff;
  color: var(--coop-link-ink);
}

/* The gem price on a Pal card. */
.gem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  color: var(--gold-chip-ink);
}

.gem svg {
  width: 16px;
  height: 16px;
  fill: var(--gold-chip-diamond);
}

/* ==========================================================================
   Site header and footer
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(30, 143, 232, 0.82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 2px solid rgba(9, 64, 124, 0.18);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--header-h);
  padding-block: var(--s2);
}

.site-header__mark {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  border-radius: 10px;
}

.site-header__mark img {
  width: 132px;
  transition: width var(--react-up) var(--ease-out);
}

.site-header[data-condensed='true'] .site-header__mark img {
  width: 104px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.site-nav a {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-pill);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--react-up) var(--ease-out);
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.site-nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    inset: var(--header-h) var(--gutter) auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: var(--s3);
    border-radius: var(--r-card);
    background: var(--card-cream);
    box-shadow: 0 6px 0 var(--card-bevel), 0 20px 34px var(--card-shadow);
  }

  .site-nav[hidden] {
    display: none;
  }

  .site-nav a {
    color: var(--ink-card-title);
    justify-content: flex-start;
  }

  .site-nav a:hover,
  .site-nav a[aria-current='page'] {
    background: var(--card-sunken);
    color: var(--ink-card-title);
  }

  .site-nav .btn {
    margin-top: var(--s2);
  }
}

.site-footer {
  background: rgba(255, 253, 246, 0.86);
  border-top: 3px solid var(--card-bevel);
  padding-block: var(--s8) var(--s6);
  margin-top: var(--s9);
}

.site-footer__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* h2, not h4: these are the footer's section headings, and jumping from the
   page's h2 straight to h4 is a heading-order break for screen readers. The
   size here is a visual choice, not a structural one. */
.site-footer h2 {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-card-meta);
  margin-bottom: var(--s3);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.site-footer a {
  color: var(--ink-card-body);
  text-decoration: none;
  /* A standalone navigation link is a tap target, so it gets the full 44px
     even though its text is only ~20px tall. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer a:hover {
  color: var(--sky-0);
  text-decoration: underline;
}

.site-footer__base {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 2px solid var(--card-bevel);
  color: var(--ink-card-muted);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
}

/* ==========================================================================
   Store badges
   ========================================================================== */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 58px;
  padding: 0 var(--s5);
  border-radius: 16px;
  background: #10243a;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 0 #061524, 0 16px 26px rgba(6, 21, 36, 0.3);
  transition: transform var(--react-down) var(--ease-out), box-shadow var(--react-down) var(--ease-out);
}

.store-badge:hover {
  color: #fff;
}

.store-badge:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #061524;
}

.store-badge svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex: none;
}

.store-badge span {
  display: block;
  line-height: 1.15;
}

.store-badge .store-badge__small {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

.store-badge .store-badge__big {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Until a listing actually exists, the badge is a labelled non-link. Never a
   dead link to a store page that 404s. */
.store-badge[aria-disabled='true'] {
  background: #45607a;
  box-shadow: 0 6px 0 #2c4257;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   Utility surfaces used across pages
   ========================================================================== */

/*
 * Cream panel - the lightest member of the card family, for body copy that
 * would otherwise sit directly on the sky.
 *
 * This is not decoration, it is a contrast requirement. The sky gradient is
 * painted on a FIXED layer, so it does not scroll: the top of the viewport is
 * always #1E8FE8 and the bottom always #EEF9FF, and any given paragraph
 * travels across that whole range as the page scrolls. Measured against
 * #1E8FE8, the darkest sensible ink (#0B2F52) reaches only 3.99:1 and white
 * only 3.41:1 - so NO text colour passes 4.5:1 on the sky at every scroll
 * position. Body copy therefore always gets a surface, exactly as it does in
 * the app, where cream cards hold every piece of text over the same sky.
 *
 * Large display headings are the exception: they only need 3:1, and the
 * stroked .display treatment clears that on every stop of the gradient.
 */
.panel {
  background: rgba(255, 253, 246, 0.94);
  border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  color: var(--ink-card-body);
  box-shadow: 0 4px 0 rgba(196, 214, 228, 0.7);
}

.panel > :last-child {
  margin-bottom: 0;
}

.note {
  border-left: 5px solid var(--play-blue);
  background: var(--card-sunken);
  border-radius: 0 var(--r-tile) var(--r-tile) 0;
  padding: var(--s4) var(--s5);
  color: var(--ink-card-body);
}

.note--warn {
  border-left-color: var(--berry);
  background: var(--warning-bg);
  color: var(--warning-ink);
}

.note > :last-child {
  margin-bottom: 0;
}

.divider-strip {
  width: 100%;
  max-width: 520px;
  margin: var(--s7) auto 0;
  opacity: 0.9;
}

/* ==========================================================================
   Header call to action, live store badges, footer brand column
   ========================================================================== */

.btn--sm {
  --lift: 4px;
  min-height: 44px;
  padding: 0 var(--s4);
  font-size: 0.98rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}

/* The nav's link rules (white text, translucent hover fill) would otherwise
   win over the button's own face, so the CTA restates it at nav specificity. */
/* Dark like the official Play badge, carrying the real four-colour mark -
   on a blue header a dark pill reads as "the store button" at a glance. */
.site-nav a.nav-cta {
  --lift: 4px;
  margin-left: var(--s2);
  padding: 0 var(--s4) 0 var(--s3);
  white-space: nowrap;
  color: #fff;
  background: #0b1b2b;
  box-shadow: 0 var(--lift) 0 #030b14, inset 0 -3px 0 rgba(255, 255, 255, 0.06);
}

.site-nav a.nav-cta svg {
  width: 20px;
  height: 22px;
}

.site-nav a.nav-cta:hover {
  color: #fff;
  background: #132a40;
}

.site-nav a.nav-cta:active {
  box-shadow: 0 0 0 #030b14;
}

@media (max-width: 860px) {
  .site-nav a.nav-cta,
  .site-nav a.nav-cta:hover {
    margin: var(--s2) 0 0;
    justify-content: center;
    color: #fff;
    background: #0b1b2b;
  }
}

/* Google's own badge artwork, unaltered: no recolouring, no shadow baked
   into it. Height 58px matches the App Store tile beside it. */
.store-badge-official {
  display: inline-flex;
  flex: none;
  border-radius: 10px;
  transition: transform var(--react-up) var(--ease-out);
}

.store-badge-official img {
  display: block;
  height: 58px;
  width: auto;
}

@media (hover: hover) {
  .store-badge-official:hover {
    transform: translateY(-2px);
  }
}

.store-badge-official:active {
  transform: translateY(1px);
}

.store-badge:focus-visible,
.store-badge-official:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

/* The App Store slot is drawn to sit beside the official Play badge: same
   height, same black face and hairline grey rim, so the pair reads as one
   row of store buttons rather than one real badge and one button. */
.store-badge--apple,
.store-badge--apple[aria-disabled='true'] {
  min-height: 58px;
  padding: 0 var(--s5) 0 var(--s4);
  border-radius: 10px;
  background: #000;
  border: 1.5px solid #a6a6a6;
  box-shadow: none;
}

.store-badge--apple[aria-disabled='true'] .store-badge__small {
  color: #ffd86b;
  opacity: 1;
}

.stores--center {
  justify-content: center;
}

@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: minmax(250px, 1.7fr) repeat(4, minmax(130px, 1fr));
  }
}

.site-footer__brand p {
  margin-top: var(--s4);
  color: var(--ink-card-muted);
  font-size: 0.92rem;
}

.site-footer__brand .stores {
  margin-top: var(--s4);
  gap: var(--s2);
}

.site-footer__brand .store-badge-official img {
  height: 46px;
}

.site-footer__brand .store-badge {
  min-height: 46px;
  padding: 0 var(--s3);
  border-radius: 8px;
}

.site-footer__brand .store-badge svg {
  width: 22px;
  height: 22px;
}

.site-footer__brand .store-badge .store-badge__big {
  font-size: 0.98rem;
}

.site-footer__base span:last-child {
  max-width: 62ch;
}

/* ==========================================================================
   Page hero: the opening block of every inner page
   ========================================================================== */

.page-hero {
  padding-bottom: clamp(24px, 4vw, 48px);
}

.page-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  margin-bottom: var(--s5);
}

/* Footer links are dark ink; a badge inside the footer keeps its own face. */
.site-footer .store-badge,
.site-footer .store-badge:hover {
  color: #fff;
  text-decoration: none;
}