/* =========================
   RESPONSIVE — ≤380px
========================= */

@media (max-width: 380px) {

  /* BASE FONT */
  * { font-size: 9px; }

  /* POPUP */
  .popup-box { padding: 20px 14px 16px; }

  /* BUILDING PICKER — grelha mais confortável em ecrãs pequenos */
  .bpicker-grid { gap: 8px; }
  .bpicker-name { font-size: 7.5px; }
  .bpicker-cost { font-size: 8.5px; }
  .bpicker-rarity-mini { font-size: 6px; }

  /* BUILD CONFIRM */
  .bconfirm-img { width: 78px; }
  .bconfirm-stat-value { font-size: 11px; }
}

/* =========================
   RESPONSIVE — ≤340px
========================= */

@media (max-width: 340px) {

  * { font-size: 8px; }

  .header-name { max-width: 80px; font-size: 10px; }
  .header-currency { font-size: 10px; }

}