/* minimal extras — Tailwind does most work */
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card{transition:transform .15s ease, box-shadow .15s ease;cursor:pointer}
.card:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.card img{aspect-ratio:2/3;object-fit:cover;width:100%}
.nav-btn.active{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#dc2626}
/* season dropdown: native popup must stay dark, otherwise white-on-white */
#m-season option{background:#14141f;color:#fff}
#modal-close{pointer-events:auto}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#333;border-radius:8px}
code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px}

/* ---- loading skeletons + spinner (replaces blank black page) ---- */
.skeleton{position:relative;overflow:hidden;background:#1c1c2a;border-radius:.5rem;min-height:1rem}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{display:block;height:.9rem;margin-top:.6rem}
.skeleton-line.short{width:55%}
.spinner{display:inline-block;width:1.1em;height:1.1em;flex:none;border-radius:9999px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#ef4444;
  animation:spin .8s linear infinite;vertical-align:-0.2em}
@keyframes spin{to{transform:rotate(360deg)}}
.inline-loader{display:flex;align-items:center;gap:.6rem;color:#a1a1aa;font-size:.9rem;padding:.75rem 0}
.hero-spinner{display:inline-block;width:1em;height:1em;border-radius:9999px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#ef4444;
  animation:spin .8s linear infinite;vertical-align:-0.15em;margin-right:.5rem}
#hero.hero-loading #hero-img{opacity:.15;filter:blur(2px)}
#hero.hero-loading #hero-title{color:#d4d4d8}
#grid:empty{min-height:40vh}

/* ---- interaction protection: no text selection / long-press menus,
   except inside editable fields. Scrolling, video, and controls unaffected
   (no touch-action / pointer-events changes). ---- */
body{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#player,#player *,#modal,#modal *{-webkit-touch-callout:none}
#player{user-select:none;-webkit-user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-touch-callout:default;user-select:text;-webkit-user-select:text}
#search{-webkit-user-select:text;user-select:text}