/* Home page (/) on phones: loads after home.css and home-grid.css, whose rules
   it overrides, so it must stay the last of the three. */

/* ===== Phones, upright or on their side (short + touch) ===== */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  :root { --case-side: 6px; }
  #shelf-view { margin: 0; box-shadow: none; }
  .shelf-title { padding-left: var(--s2); }
  .plaque { font-size: var(--d-sm); }
  .bay { padding: 0 var(--s2) 9px; min-height: 98px; }
  .bay .face, .unit.t1 .bay .face, .unit.t3 .bay .face { width: 52px; height: 76px; }
  .unit.t0 .bay .face { width: 46px; height: 68px; }
  .bspine, .unit.t1 .bspine, .unit.t3 .bspine { --h: 74px; }
  .plate { margin-left: var(--s2); }
  .shelf-drawer { margin: 0 0 var(--s3); }
  /* The drawer reaches the window edge, so its close takes its tap area from the
     left, and "Xem tất cả" stands clear of it. */
  .drawer-all { margin-right: 12px; }
  .shelf-drawer .drawer-close::after { left: -10px; right: -12px; }
  .drawer-row { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .dcard .cover { width: 62px; height: 88px; }
  .continue-row { --cv-w: 56px; --cv-h: 80px; gap: var(--s3); }
  #grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s4) var(--s1); }
  .card .cover { width: 80px; height: 114px; }
}
/* Upright phones: the drawer head has no room for its count, so "Xem tất cả"
   takes the slack and the close button stays at the right end. */
@media (max-width: 640px) {
  .drawer-meta { display: none; }
  .drawer-all { margin-left: auto; }
}