/* หิวดึก — compat.css: very small / odd phones only (iPhone SE 1st gen 320 px, Galaxy Fold cover 280 px).
   Everything here sits behind max-width ≤ 349px so the normal 360 px+ layout (game.css / hud.css) is untouched. */
@media (max-width: 349px) {
  #hud { left: calc(4px + var(--safe-l, 0px)); right: calc(4px + var(--safe-r, 0px)); gap: 4px 6px; }
  .who { gap: 5px; padding: 3px 8px 3px 3px; }
  .lvring { width: 32px; height: 32px; } .lvring b { width: 25px; height: 25px; font-size: 13px; }
  #pname { font-size: 12px; max-width: 64px; } .xp { width: 56px; }
  .money { gap: 4px; min-width: -webkit-max-content; min-width: max-content; } .money .pill { flex-shrink: 0; }
  .pill { gap: 2px; padding: 2px 6px 2px 2px; font-size: 13px; }
  .pill img { width: 20px; height: 20px; }
  #meters { gap: 4px; }
  .meter { gap: 2px; padding: 2px 5px 2px 2px; }
  .meter img { width: 18px; height: 18px; }
  .meter .bar { width: 30px; height: 8px; }
  .card-h h2 { font-size: 15px; gap: 6px; } .card-h .hico { width: 28px; height: 28px; }
  .card-h { padding: 6px 10px; min-height: 44px; }
  .card-h[style*="url"] { min-height: 64px; }
  .dock-btn { width: 54px; }
}
@media (max-width: 299px) {
  .who { padding-right: 6px; }
  #pname { max-width: 44px; } .xp { width: 40px; }
  #hud { gap: 4px 4px; } .money { gap: 3px; }
  .pill { font-size: 12px; padding-right: 3px; } .pill img { width: 18px; height: 18px; }
  .meter .bar { width: 22px; }
  .card-h h2 { font-size: 14px; }
  .card-h .hico { display: none; }
  .dock-btn { width: 50px; } .dock-btn .tx { font-size: 10px; }
  /* the gem "+" 44px touch box: overhang the pill by 5px (not 11px) so it stays inside a 280px screen */
  #gemplus { margin-right: -5px; }
}