/* Desktop / widescreen scaling (Full HD+) */

@media (min-width: 1920px) {
  #gameContainer { width: min(92vw, 1200px); }

  .start-screen-image { max-width: 95%; max-height: 70%; }
  .start-screen-btn { font-size: 1.6rem; padding: 18px 42px; }
  .mini-action-btn { font-size: 1.05rem; padding: 10px 18px; }

  #pauseOverlay .pauseCard { max-width: 560px; padding: 24px 22px; }
  #pauseOverlay .pauseCard h2 { font-size: 2.4rem; }
  #pauseOverlay .pauseCard p { font-size: 1.15rem; }
  #pauseOverlay .pauseCard .start-screen-btn { font-size: 1.6rem; padding: 18px 42px; }

  .uiCard { width: min(92%, 560px); padding: 24px 22px; }
  .uiCard h2 { font-size: 2.4rem; }
  .howToRow { font-size: 1.15rem; }
  .howToRow .key { font-size: 1.4rem; min-width: 42px; height: 40px; }
  #closeHowToBtn { font-size: 1.6rem; padding: 18px 42px; }
}

/* QHD (2560x1440) */
@media (min-width: 2560px) {
  #gameContainer { width: min(92vw, 1500px); }

  .start-screen-image { max-height: 75%; }
  .start-screen-btn { font-size: 1.8rem; padding: 20px 50px; }
  .mini-action-btn { font-size: 1.1rem; padding: 12px 20px; }

  #pauseOverlay .pauseCard { max-width: 680px; padding: 28px 26px; }
  #pauseOverlay .pauseCard h2 { font-size: 2.8rem; }
  #pauseOverlay .pauseCard p { font-size: 1.25rem; }
  #pauseOverlay .pauseCard .start-screen-btn { font-size: 1.8rem; padding: 20px 50px; }

  .uiCard { width: min(92%, 680px); padding: 28px 26px; }
  .uiCard h2 { font-size: 2.8rem; }
  .howToRow { font-size: 1.25rem; }
  .howToRow .key { font-size: 1.6rem; min-width: 48px; height: 46px; }
  #closeHowToBtn { font-size: 1.8rem; padding: 20px 50px; }
}

/* Ultrawide 3440x1440 */
@media (min-width: 3200px) {
  #gameContainer { width: min(92vw, 1700px); }

  .start-screen-image { max-height: 80%; }
  .start-screen-btn { font-size: 2rem; padding: 22px 56px; }
}

/* 4K (3840x2160) */
@media (min-width: 3840px) {
  #gameContainer { width: min(92vw, 2100px); }

  #pauseOverlay .pauseCard { max-width: 860px; padding: 34px 30px; }
  #pauseOverlay .pauseCard h2 { font-size: 3.2rem; }
  #pauseOverlay .pauseCard p { font-size: 1.4rem; }
  #pauseOverlay .pauseCard .start-screen-btn { font-size: 2rem; padding: 22px 56px; }

  .uiCard { width: min(92%, 860px); padding: 34px 30px; }
  .uiCard h2 { font-size: 3.2rem; }
  .howToRow { font-size: 1.4rem; }
  .howToRow .key { font-size: 1.8rem; min-width: 54px; height: 52px; }
  #closeHowToBtn { font-size: 2rem; padding: 22px 56px; }
}

/* =====================================================
   FULLSCREEN ONLY: scale HUD buttons on widescreens
   Applies only when #fullscreen is in Fullscreen API mode
===================================================== */

@media (min-width: 1920px) {
  #fullscreen:fullscreen .pause-btn,
  #fullscreen:fullscreen .mute-btn,
  #fullscreen:fullscreen .restart-btn {
    top: calc(18px + var(--pad-safe-top));
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  #fullscreen:fullscreen .restart-btn {
    right: calc(18px + var(--pad-safe-right));
  }

  #fullscreen:fullscreen .mute-btn {
    right: calc(18px + var(--pad-safe-right) + 56px + 12px);
  }

  #fullscreen:fullscreen .pause-btn {
    right: calc(18px + var(--pad-safe-right) + (56px + 12px) * 2);
  }
}

@media (min-width: 2560px) {
  #fullscreen:fullscreen .pause-btn,
  #fullscreen:fullscreen .mute-btn,
  #fullscreen:fullscreen .restart-btn {
    top: calc(20px + var(--pad-safe-top));
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  #fullscreen:fullscreen .restart-btn {
    right: calc(20px + var(--pad-safe-right));
  }

  #fullscreen:fullscreen .mute-btn {
    right: calc(20px + var(--pad-safe-right) + 64px + 14px);
  }

  #fullscreen:fullscreen .pause-btn {
    right: calc(20px + var(--pad-safe-right) + (64px + 14px) * 2);
  }
}

@media (min-width: 3200px) {
  #fullscreen:fullscreen .pause-btn,
  #fullscreen:fullscreen .mute-btn,
  #fullscreen:fullscreen .restart-btn {
    width: 72px;
    height: 72px;
    font-size: 32px;
  }
}