/* =============================================================
   mobile.css — mobile-native UX layer (loaded last).
   Centralises the app's touch feel, tab-bar polish, and the
   bottom-sheet detail modal so mobile behaviour lives in one
   debuggable place instead of being scattered across files.
   ============================================================= */

/* Remove the grey tap-flash on touch across interactive elements */
a, button, .anime-card, .bnav-item, .day-tab, .nav-btn, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Tactile press feedback (all pointers) */
.anime-card:active { transform: scale(.985); }
.nav-btn:active { transform: scale(.97); }

/* Prevent :hover states sticking after a tap on touch devices */
@media (hover: none) {
  .anime-card:hover { transform: none; box-shadow: none; }
  .anime-card:hover .card-cover img { transform: none; }
}

/* The bottom-sheet grab handle is desktop-hidden by default … */
.sheet-handle { display: none; }

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* ── Tab bar: native active indicator + press feel ────────── */
  .bnav-item { transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
  .bnav-item::after {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 0; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--accent-light); transform: translateX(-50%);
    transition: width var(--fast) var(--ease);
  }
  .bnav-item.active::after { width: 22px; }
  .bnav-item:active { transform: scale(.92); }

  /* ── Day tabs: momentum + snap ────────────────────────────── */
  #day-tabs {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  #day-tabs .day-tab { scroll-snap-align: center; }
  .day-tab:active { transform: scale(.95); }

  /* ── Detail modal → native bottom sheet ───────────────────── */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100%; max-width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    animation: sheet-up .34s cubic-bezier(.32,.72,0,1);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    will-change: transform;
    touch-action: pan-y;
  }
  .sheet-handle {
    display: block; position: sticky; top: 0; z-index: 12;
    width: 40px; height: 5px; margin: 9px auto 1px;
    border-radius: 3px; background: var(--border-hi);
  }
  /* Bigger invisible grab target around the handle */
  .sheet-handle::after { content: ""; position: absolute; inset: -12px -60px; }
  .modal-close-btn { top: 12px; right: 12px; }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}