:root {
  --red: #e50914;
  --red-hi: #f6121d;
  --bg: #141414;
  --bg-2: #181818;
  --text: #fff;
  --muted: #b3b3b3;
  --card-w: 15.5rem;
  --nav-h: 4.25rem;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

.btn {
  border: 0;
  border-radius: .25rem;
  padding: .7rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn.sm { padding: .45rem 1rem; font-size: .9rem; }
.btn-play { background: #fff; color: #000; }
.btn-play:hover { background: rgba(255, 255, 255, .78); }
.btn-sec { background: rgba(109, 109, 110, .7); color: #fff; }
.btn-sec:hover { background: rgba(109, 109, 110, .5); }

.icon-btn {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 50%;
  line-height: 1;
}
.icon-btn:hover { background: rgba(255, 255, 255, .15); }
.icon-btn.big { font-size: 1.7rem; }

/* ------------------------------------------------------------ navegació */

#nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 max(1rem, 3vw);
  z-index: 60;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 10%, transparent);
  transition: background .3s;
}
#nav.solid { background: #141414; }

.logo {
  color: var(--red);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.logo span { color: var(--text); margin-left: .15rem; font-weight: 300; }

/* desplegable de sèries */
.dropdown { position: relative; }

.dd-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .25rem;
  color: #e5e5e5;
  font-size: .92rem;
  padding: .35rem .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.dd-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dd-btn .caret { font-size: .7rem; transition: transform .2s; }
.dd-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.dd-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.dd-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 19rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  background: rgba(18, 18, 18, .97);
  border: 1px solid #333;
  border-radius: .3rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7);
  padding: .3rem;
  z-index: 70;
}

.dd-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: #e5e5e5;
  padding: .5rem .7rem;
  border-radius: .2rem;
  cursor: pointer;
  font-size: .9rem;
}
.dd-item:hover { background: #2a2a2a; color: #fff; }
.dd-item.on { border-left-color: var(--red); color: #fff; font-weight: 700; background: rgba(229, 9, 20, .12); }
.dd-item .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-item .meta { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; flex: none; }
.dd-item.on .meta { color: #d8d8d8; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

.search-box {
  display: flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .6);
  border-radius: .2rem;
  padding: .3rem .55rem;
}
.search-box .ico { font-size: .85rem; opacity: .8; }
#search { background: transparent; border: 0; outline: 0; width: 11rem; font-size: .9rem; }

.switch { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); cursor: pointer; }
.switch input { accent-color: var(--red); }

/* ------------------------------------------------------------ hero */

.hero { position: relative; height: min(80vh, 46rem); }
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .95) 0%, rgba(20, 20, 20, .55) 42%, transparent 72%),
    linear-gradient(0deg, var(--bg) 2%, transparent 45%);
}
.hero-body {
  position: absolute;
  left: max(1rem, 3vw);
  bottom: 18%;
  max-width: 34rem;
}
.hero-body h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin: 0 0 .5rem; font-weight: 900; letter-spacing: -.02em; }
#hero-meta { margin: 0 0 .6rem; color: #46d369; font-weight: 700; font-size: .95rem; }
#hero-desc {
  margin: 0 0 1.2rem;
  color: #e5e5e5;
  font-size: 1.02rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ files */

.rows { position: relative; margin-top: -6rem; padding-bottom: 3rem; z-index: 2; }

.row { margin: 0 0 2.6rem; scroll-margin-top: calc(var(--nav-h) + .5rem); }
.row h2 {
  font-size: 1.25rem;
  margin: 0 0 .6rem;
  padding: 0 max(1rem, 3vw);
  font-weight: 700;
}
.row h2 .sub { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: .6rem; }

.row-wrap { position: relative; }
.track {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: .25rem max(1rem, 3vw) 1.5rem;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

.arrow {
  position: absolute;
  top: 0;
  bottom: 1.5rem;
  width: max(1rem, 3vw);
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  z-index: 3;
}
.row-wrap:hover .arrow { opacity: 1; }
.arrow.left { left: 0; }
.arrow.right { right: 0; }

.card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  cursor: pointer;
  transition: transform .25s;
  position: relative;
}
.card:hover { transform: scale(1.06); z-index: 4; }
.card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: .25rem;
  overflow: hidden;
  background: #2a2a2a;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, transparent 55%);
}
.card .num {
  position: absolute;
  left: .55rem;
  bottom: .4rem;
  font-size: 1.05rem;
  font-weight: 800;
  z-index: 2;
  text-shadow: 0 2px 4px #000;
}
.card .badge {
  position: absolute;
  top: .4rem;
  right: .45rem;
  background: rgba(0, 0, 0, .7);
  border-radius: 50%;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: #46d369;
  z-index: 2;
}
.card .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
  text-shadow: 0 2px 10px #000;
}
.card:hover .play { opacity: .95; }
.card .dur {
  position: absolute;
  right: .45rem;
  bottom: .4rem;
  font-size: .72rem;
  color: #ddd;
  z-index: 2;
  text-shadow: 0 1px 3px #000;
}
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); z-index: 2; }
.card .bar i { display: block; height: 100%; background: var(--red); }
.card .cap {
  margin: .4rem .1rem 0;
  font-size: .82rem;
  color: #e5e5e5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .cap.sub { margin-top: .1rem; font-size: .74rem; color: var(--muted); }

/* graella de cerca */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 1.2rem .5rem;
  padding: 0 max(1rem, 3vw) 2rem;
}
.grid .card { flex: none; width: auto; }

.empty { padding: 4rem max(1rem, 3vw); color: var(--muted); }

.foot { padding: 2rem max(1rem, 3vw) 3rem; color: #737373; font-size: .8rem; border-top: 1px solid #222; }
.foot a { text-decoration: underline; }

/* ------------------------------------------------------------ reproductor */

#player-view {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
}
#player { width: 100%; height: 100%; display: block; background: #000; }

.player-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent);
  opacity: 1;
  transition: opacity .3s;
  pointer-events: none;
}
.player-top > * { pointer-events: auto; }
#player-view.idle .player-top { opacity: 0; }
.player-title strong { display: block; font-size: 1.05rem; }
.player-title span { color: var(--muted); font-size: .85rem; }

.skip {
  position: absolute;
  right: 2rem;
  bottom: 6.5rem;
  background: rgba(40, 40, 40, .85);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  font-weight: 700;
  padding: .6rem 1.4rem;
  border-radius: .25rem;
  cursor: pointer;
}
.skip:hover { background: #fff; color: #000; }

.next-card {
  position: absolute;
  right: 2rem;
  bottom: 6.5rem;
  width: 21rem;
  background: rgba(20, 20, 20, .95);
  border: 1px solid #333;
  border-radius: .35rem;
  padding: .9rem 1rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.nc-bar { height: 3px; background: #444; border-radius: 2px; overflow: hidden; margin-bottom: .7rem; }
.nc-bar i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; }
.nc-label { margin: 0; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.nc-label strong { color: #fff; }
.nc-title { margin: .25rem 0 .8rem; font-weight: 700; font-size: 1rem; }
.nc-actions { display: flex; gap: .5rem; }

.pv-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .8);
  padding: 1rem 1.5rem;
  border-radius: .3rem;
  font-size: 1rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  background: #333;
  padding: .7rem 1.2rem;
  border-radius: .3rem;
  z-index: 200;
  font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------ mòbil */

@media (max-width: 780px) {
  :root { --card-w: 11rem; }
  .dd-btn { padding: .3rem .55rem; font-size: .85rem; }
  .dd-panel { min-width: 15rem; }
  #search { width: 6rem; }
  .switch span { display: none; }
  .hero { height: 62vh; }
  .rows { margin-top: -3rem; }
  .next-card { right: 1rem; left: 1rem; width: auto; bottom: 5rem; }
  .skip { right: 1rem; bottom: 5rem; }
}