/* Responsive gameplay board sizing.
   Avoid custom-property multiplication in calc(): some mobile browsers discard
   those width expressions. The board is fluid first, then capped explicitly by
   column count so every card remains inside the viewport on mobile and desktop. */

.card-grid {
  --responsive-gap: clamp(0.2rem, 1vw, 0.46rem);
  width: 100%;
  max-width: 24rem;
  gap: var(--responsive-gap);
  align-items: start;
  justify-content: center;
}

.card-grid[aria-colcount="3"] {
  max-width: 18rem;
}

.card-grid[aria-colcount="4"] {
  max-width: 24rem;
}

.card-grid[aria-colcount="5"] {
  --responsive-gap: clamp(0.14rem, 0.8vw, 0.38rem);
  max-width: 26rem;
}

/* Keep dense six-row boards compact. The game screen itself remains vertically
   scrollable, so no card can be clipped by browser chrome on short displays. */
.card-grid[aria-rowcount="6"] {
  max-width: min(100%, 24rem);
  --responsive-gap: clamp(0.12rem, 0.55dvh, 0.3rem);
}

.memory-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 430px) {
  .game-screen {
    padding-inline: calc(0.45rem + var(--safe-left)) calc(0.45rem + var(--safe-right));
  }

  .game-header {
    grid-template-columns: 2.75rem 1fr 2.75rem;
    margin-bottom: 0.45rem;
  }

  .icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .game-title-wrap h1 {
    font-size: 1.45rem;
  }

  .game-stats {
    gap: 0.32rem;
    margin-bottom: 0.38rem;
  }

  .game-stats div {
    min-height: 3rem;
    border-radius: 11px;
  }

  .progress-track {
    margin-top: 0.5rem;
  }

  .game-message {
    margin: 0.38rem auto 0.28rem;
    font-size: 0.76rem;
  }

  .card-grid {
    width: 100%;
    max-width: 100%;
  }

  .card-grid[aria-colcount="5"] {
    --responsive-gap: clamp(0.1rem, 0.65vw, 0.28rem);
  }

  .pairs-label {
    margin-top: 0.48rem;
  }
}

@media (max-width: 360px) {
  .card-grid {
    --responsive-gap: 0.16rem;
  }

  .card-grid[aria-colcount="5"] {
    --responsive-gap: 0.1rem;
  }

  .game-stats span {
    font-size: 0.61rem;
  }

  .game-stats strong {
    font-size: 0.96rem;
  }
}

@media (max-height: 760px) {
  .game-screen {
    padding-top: calc(0.45rem + var(--safe-top));
  }

  .game-header {
    margin-bottom: 0.3rem;
  }

  .game-stats {
    margin-bottom: 0.28rem;
  }

  .game-stats div {
    min-height: 2.85rem;
  }

  .progress-track {
    margin-top: 0.4rem;
  }

  .game-message {
    min-height: 1rem;
    margin: 0.3rem auto 0.22rem;
  }

  .pairs-label {
    margin-top: 0.4rem;
  }

  .card-grid[aria-rowcount="6"] {
    --responsive-gap: clamp(0.08rem, 0.4dvh, 0.22rem);
  }
}

@media (max-height: 640px) {
  .game-title-wrap p {
    margin-top: 0;
    font-size: 0.62rem;
  }

  .game-stats div {
    min-height: 2.55rem;
  }

  .progress-track {
    margin-top: 0.28rem;
  }

  .game-message {
    margin-top: 0.22rem;
    font-size: 0.72rem;
  }

}

@media (orientation: landscape) and (max-height: 520px) {
  .game-screen {
    padding-top: calc(0.3rem + var(--safe-top));
    padding-bottom: calc(0.55rem + var(--safe-bottom));
  }

  .game-header,
  .game-stats {
    width: min(92vw, 36rem);
  }

  .card-grid {
    max-width: 24rem;
  }

  .card-grid[aria-colcount="5"] {
    max-width: 26rem;
  }

  .card-grid[aria-rowcount="6"] {
    max-width: 24rem;
  }
}

@media (min-width: 760px) {
  .card-grid[aria-colcount="3"] {
    max-width: 22rem;
  }

  .card-grid[aria-colcount="4"] {
    max-width: 28rem;
  }

  .card-grid[aria-colcount="5"] {
    max-width: 31rem;
  }

  .card-grid[aria-rowcount="6"] {
    max-width: 28rem;
  }
}

/* Desktop viewport fit.
   The board was capped by width alone, so on short desktop windows the lower
   rows fell outside the visual viewport (measured: 1366x768 lost 154px of the
   6-row board, 1280x720 lost 149px, and every 125%/150% zoom step lost more).
   Cap the board by the available height as well: subtract the measured game
   chrome (header, stats, progress, message, pairs label, padding, row gaps)
   from the viewport, then convert that height budget into a width using the
   card aspect ratio (0.774) times columns over rows.
   Literal lengths are used instead of custom properties inside the
   multiplication, per the calc() note at the top of this file.
   Scoped to precise pointers so touch layouts keep their existing sizing. */
@media (min-width: 760px) and (hover: hover) and (pointer: fine) {
  .card-grid[aria-rowcount="3"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 16.5rem) * 1.032));
    max-width: min(28rem, calc((100dvh - 16.5rem) * 1.032));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 16.5rem) * 0.774));
    max-width: min(28rem, calc((100dvh - 16.5rem) * 0.774));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="5"] {
    max-width: min(31rem, calc((100vh - 16.5rem) * 0.9675));
    max-width: min(31rem, calc((100dvh - 16.5rem) * 0.9675));
  }

  .card-grid[aria-rowcount="6"][aria-colcount="5"] {
    max-width: min(28rem, calc((100vh - 16.5rem) * 0.645));
    max-width: min(28rem, calc((100dvh - 16.5rem) * 0.645));
  }
}

/* Shorter desktop windows run the compact chrome from the height queries
   above, so the height budget grows back by the amount those queries save. */
@media (min-width: 760px) and (hover: hover) and (pointer: fine) and (max-height: 760px) {
  .card-grid[aria-rowcount="3"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 13rem) * 1.032));
    max-width: min(28rem, calc((100dvh - 13rem) * 1.032));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 13rem) * 0.774));
    max-width: min(28rem, calc((100dvh - 13rem) * 0.774));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="5"] {
    max-width: min(31rem, calc((100vh - 13rem) * 0.9675));
    max-width: min(31rem, calc((100dvh - 13rem) * 0.9675));
  }

  .card-grid[aria-rowcount="6"][aria-colcount="5"] {
    max-width: min(28rem, calc((100vh - 13rem) * 0.645));
    max-width: min(28rem, calc((100dvh - 13rem) * 0.645));
  }
}

@media (min-width: 760px) and (hover: hover) and (pointer: fine) and (max-height: 640px) {
  .card-grid[aria-rowcount="3"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 12.5rem) * 1.032));
    max-width: min(28rem, calc((100dvh - 12.5rem) * 1.032));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 12.5rem) * 0.774));
    max-width: min(28rem, calc((100dvh - 12.5rem) * 0.774));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="5"] {
    max-width: min(31rem, calc((100vh - 12.5rem) * 0.9675));
    max-width: min(31rem, calc((100dvh - 12.5rem) * 0.9675));
  }

  .card-grid[aria-rowcount="6"][aria-colcount="5"] {
    max-width: min(28rem, calc((100vh - 12.5rem) * 0.645));
    max-width: min(28rem, calc((100dvh - 12.5rem) * 0.645));
  }
}

@media (min-width: 760px) and (hover: hover) and (pointer: fine) and (max-height: 520px) {
  .card-grid[aria-rowcount="3"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 11.75rem) * 1.032));
    max-width: min(28rem, calc((100dvh - 11.75rem) * 1.032));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="4"] {
    max-width: min(28rem, calc((100vh - 11.75rem) * 0.774));
    max-width: min(28rem, calc((100dvh - 11.75rem) * 0.774));
  }

  .card-grid[aria-rowcount="4"][aria-colcount="5"] {
    max-width: min(31rem, calc((100vh - 11.75rem) * 0.9675));
    max-width: min(31rem, calc((100dvh - 11.75rem) * 0.9675));
  }

  .card-grid[aria-rowcount="6"][aria-colcount="5"] {
    max-width: min(28rem, calc((100vh - 11.75rem) * 0.645));
    max-width: min(28rem, calc((100dvh - 11.75rem) * 0.645));
  }
}