/* Màn hình rộng nằm ngang (desktop, laptop, tablet ngang): dùng cả chiều rộng thay vì cột 680px của điện thoại.
   Ván chơi chia ba cột: HUD bên trái, bàn chơi ở giữa cao hết cỡ, booster bên phải. Canvas vẫn phủ cả màn hình và vẽ
   bàn theo khung #board-slot (js/game-screen.js relayout), nên chỉ cần sắp lại các khối DOM bằng CSS.
   Màn chính và bản đồ giữ nguyên cột 680px ở giữa như trên điện thoại. Nạp sau style.css. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #app { max-width: none; }
  #screen-title, #screen-map { left: max(0px, calc(50% - 340px)); right: max(0px, calc(50% - 340px)); }

  #screen-game.active {
    display: grid; column-gap: 8px; grid-template-rows: minmax(0, 1fr);
    grid-template-columns: clamp(300px, 22vw, 400px) minmax(0, 1fr) clamp(300px, 22vw, 400px); /* hai bên bằng nhau: bàn nằm giữa màn hình */
  }
  #screen-game .g-hud { grid-column: 1; grid-row: 1; align-self: start; margin: 16px 0 0 16px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 26px; }
  #screen-game #board-slot { grid-column: 2; grid-row: 1; margin: 16px 0; }
  #screen-game .g-boosters { grid-column: 3; grid-row: 1; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 16px 0 0; }
}

/* Màn hình lớn: booster to hơn cho cân với bàn chơi */
@media (min-width: 1500px) and (min-height: 900px) and (min-aspect-ratio: 5/4) {
  #screen-game .booster { width: 96px; padding: 10px 4px 8px; }
  #screen-game .booster svg { width: 46px; height: 46px; }
  #screen-game .booster em { font-size: 13px; }
}

/* Màn hình lớn: HUD to hơn cho cân với bàn chơi (đổi kích thước thật, không dùng zoom để tọa độ kẹo bay về mục tiêu vẫn đúng) */
@media (min-width: 1300px) and (min-height: 780px) and (min-aspect-ratio: 5/4) {
  #screen-game .g-hud { padding: 12px 16px 14px; gap: 12px; border-radius: 30px; }
  #screen-game .g-top .icon-btn { width: 56px; height: 56px; }
  #screen-game .g-top .icon-btn svg { width: 28px; height: 28px; }
  #screen-game .g-level, #screen-game .g-moves { height: 68px; min-width: 112px; }
  #screen-game .g-level small, #screen-game .g-moves small { font-size: 13px; }
  #screen-game .g-level b, #screen-game .g-moves b { font-size: 36px; }
  #screen-game[data-mode="zen"] .g-level b, #screen-game[data-mode="daily"] .g-level b { font-size: 24px; }
  #screen-game .goal { min-height: 60px; padding: 5px 18px 5px 6px; border-radius: 22px; gap: 10px; }
  #screen-game .goal .gicon { width: 50px; height: 50px; }
  #screen-game .goal .gicon img { width: 46px; height: 46px; }
  #screen-game .goal .gicon .ico-star { width: 36px; height: 36px; }
  #screen-game .goal .lbl { font-size: 13px; }
  #screen-game .goal .num { font-size: 30px; }
  #screen-game .score-track { height: 18px; }
  #screen-game .star-mark { width: 32px; height: 32px; margin: -17px 0 0 -16px; }
  #screen-game .score-num span { font-size: 14px; }
  #screen-game .score-num b { font-size: 28px; }
}