* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0b0b0b; }
body { font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; }

[data-track]::-webkit-scrollbar { display: none; }
[data-track] { scrollbar-width: none; }

@keyframes ofFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ofIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Nav links */
.of-nav-link { color: #b3b3b3; cursor: pointer; transition: color .2s ease; }
.of-nav-link:hover { color: #fff; }
.of-nav-link.active { color: #fff; font-weight: 600; }

/* Poster card hover (replaces the legacy style-hover attribute) */
.of-card {
  position: relative; min-width: 160px; aspect-ratio: 2/3; border-radius: 6px;
  overflow: hidden; cursor: pointer; background: #141414;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: transform .28s ease, box-shadow .28s ease, outline-color .2s ease;
  outline: 2px solid transparent; outline-offset: -2px; z-index: 2;
}
/* Lift only on devices that actually hover (avoids "sticky hover" after a tap on touch screens) */
@media (hover: hover) {
  .of-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 24px 54px rgba(0,0,0,.8);
    outline-color: rgba(255,255,255,.9);
    z-index: 25;
  }
}

/* Generic interactive press feedback for buttons */
.of-btn { cursor: pointer; user-select: none; transition: filter .15s ease, background .15s ease; }
.of-btn:hover { filter: brightness(1.08); }
.of-btn:active { transform: translateY(1px); }

.of-arrow { opacity: 0; transition: opacity .2s ease; }
[data-row]:hover .of-arrow { opacity: 1; }

/* On touch devices the hover arrows never appear, so hide them entirely and let users swipe the row. */
@media (hover: none) {
  .of-arrow { display: none; }
}

/* ===================================================================
   Responsive / mobile
   Inline styles in app.js are the desktop defaults; these media-query
   rules use !important to override them on small screens.
   =================================================================== */
@media (max-width: 768px) {
  /* ---- Top nav ---- */
  .of-nav { gap: 14px !important; padding: 12px 16px !important; }
  .of-logo { font-size: 22px !important; }
  .of-nav-links { display: none !important; }   /* parody menu items — drop on mobile to save room */
  .of-nav-kids { display: none !important; }
  .of-nav-actions { gap: 16px !important; }

  /* ---- Hero ---- */
  .of-hero { height: 74vh !important; min-height: 440px !important; }
  .of-hero-img { display: none !important; }     /* foreground poster would collide with the text */
  .of-hero-scrim {
    background: linear-gradient(0deg, rgba(11,11,11,.97) 8%, rgba(11,11,11,.55) 48%, rgba(11,11,11,.15) 100%) !important;
  }
  .of-hero-content { left: 16px !important; right: 16px !important; bottom: 7% !important; max-width: none !important; }
  .of-hero-title { font-size: 46px !important; }
  .of-hero-sub { font-size: 21px !important; }
  .of-hero-meta { gap: 10px !important; flex-wrap: wrap; }
  .of-hero-synopsis { font-size: 14px !important; max-width: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .of-hero-btns { gap: 10px !important; }
  .of-hero-btns .of-btn { flex: 1 1 0; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }

  /* ---- Rows ---- */
  .of-rows { margin-top: 6px !important; }
  .of-row-label { font-size: 17px !important; margin-left: 16px !important; }
  .of-track { padding: 14px 16px !important; gap: 8px !important; }
  .of-card { width: 132px !important; min-width: 132px !important; }
  .of-rank { font-size: 104px !important; margin-right: -16px !important; -webkit-text-stroke-width: 2px !important; }

  /* ---- Detail modal ---- */
  .of-modal-overlay { padding: 14px 0 0 !important; }
  .of-modal { border-radius: 10px 10px 0 0 !important; }
  .of-modal-poster { flex: 1 1 100% !important; width: 100% !important; aspect-ratio: 3 / 4 !important; max-height: 55vh !important; }
  .of-modal-info { flex: 1 1 100% !important; min-width: 0 !important; padding: 20px 18px 30px !important; }
  .of-modal-title { font-size: 28px !important; }
}

@media (max-width: 420px) {
  .of-hero-title { font-size: 38px !important; }
  .of-hero-sub { font-size: 18px !important; }
  .of-card { width: 116px !important; min-width: 116px !important; }
  .of-rank { font-size: 88px !important; }
}