/* ANIMAL RACE V3 — READABLE RESPONSIVE UI */

body {
  font-size: 16px !important;
  line-height: 1.5;
}

button {
  touch-action: manipulation;
}

header {
  height: auto !important;
  min-height: 82px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  gap: 12px;
}

.brand strong {
  font-size: 17px !important;
}

.brand span {
  font-size: 10px !important;
}

.headerStats small,
.infoStrip small {
  font-size: 11px !important;
}

.headerStats strong,
.infoStrip strong {
  font-size: 15px !important;
}

.eyebrow,
.featureHeading > span,
.storeEyebrow,
.catColorTop span {
  font-size: 12px !important;
}

.intro h1 {
  font-size: clamp(32px, 5.5vw, 74px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em !important;
}

.intro > p,
.overlayCard p,
.featureGrid p,
.storeHeader p,
.storeBottom p,
.catColorTop p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.intro > p {
  max-width: 370px !important;
}

.overlayCard {
  width: min(520px, 94%) !important;
  padding: clamp(16px, 3vw, 28px) !important;
}

.overlayCard > span,
.keys small {
  font-size: 12px !important;
}

.overlayCard h2,
.catColorTop h2 {
  font-size: clamp(24px, 3vw, 34px) !important;
}

kbd {
  font-size: 13px !important;
  min-width: 36px !important;
}

#playButton,
#catColorConfirm {
  min-height: 54px !important;
  font-size: 16px !important;
}

.trollMessage,
.checkpointPopup {
  font-size: 14px !important;
}

.featureHeading h2 {
  font-size: clamp(26px, 3vw, 42px) !important;
}

.featureGrid strong {
  font-size: 18px !important;
}

.featureGrid article {
  min-height: 155px !important;
  padding: 20px !important;
}

.ecoCurrency,
.storeWallet span {
  font-size: 14px !important;
}

#ecoStoreButton {
  min-height: 44px !important;
  font-size: 14px !important;
}

.storeHeader h2 {
  font-size: clamp(25px, 3vw, 38px) !important;
}

.skinCard h3 {
  font-size: 17px !important;
}

.skinPrice {
  font-size: 13px !important;
  min-height: 52px !important;
}

.rarity {
  font-size: 11px !important;
}

.skinActions button,
#topupButton {
  min-height: 44px !important;
  font-size: 13px !important;
}

.storeBottom strong {
  font-size: 15px !important;
}

.catColorChoice strong {
  font-size: 14px !important;
}

.catColorFree,
.doubleJumpHint {
  font-size: 12px !important;
}

footer {
  font-size: 13px !important;
}

/* TABLET / PHONE */
@media (max-width: 760px) {

  header {
    flex-wrap: wrap !important;
    justify-content: space-between;
    padding: 12px !important;
  }

  .brand {
    flex: 1 1 135px;
  }

  .headerStats {
    order: 2;
  }

  #ecoWallet {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  #ecoWallet .ecoCurrency.diamond {
    display: flex !important;
  }

  .gameShell {
    border-radius: 10px !important;
  }

  .mobileControls button {
    min-width: 54px;
    min-height: 54px;
    font-size: 24px !important;
  }

  .infoStrip {
    grid-template-columns: repeat(2,1fr);
  }

  .featureGrid {
    grid-template-columns: 1fr 1fr;
  }

  .storeGrid {
    grid-template-columns: 1fr 1fr !important;
  }

  .catColorGrid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 480px) {

  .intro {
    padding-top: 26px !important;
  }

  .intro h1 {
    font-size: 34px !important;
  }

  .storeGrid {
    grid-template-columns: 1fr !important;
  }

  .featureGrid {
    grid-template-columns: 1fr !important;
  }

  .overlayCard {
    max-height: 90dvh;
    overflow-y: auto;
  }

  .storePanel {
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }

  .skinCard {
    min-height: 260px;
  }
}