/* Componentes: carrosséis, cartões, Top 10, janela de detalhes */

/* ---------- faixas (carrosséis) ---------- */
.rows { position: relative; z-index: 3; padding-bottom: 3rem; }
.view-home > .hero + .rows { margin-top: -9vw; }
.row { margin-bottom: .6rem; }
.row-title { font-size: 1.3rem; font-weight: 600; padding: 0 var(--pad); margin-bottom: .1rem; color: #e5e5e5; }
.row-wrap { position: relative; }
.row-track {
  display: flex; gap: 6px; overflow-x: auto; padding: 1.4rem var(--pad) 2.2rem; scroll-padding-left: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.row-track::-webkit-scrollbar { display: none; }
.row-arrow {
  position: absolute; top: 1.4rem; bottom: 2.2rem; width: var(--pad); min-width: 38px; z-index: 6; display: grid; place-items: center;
  font-size: 2.2rem; color: #fff; background: rgba(20, 20, 20, .55); opacity: 0; transition: opacity .2s;
}
.row-arrow.prev { left: 0; border-radius: 0 4px 4px 0; }
.row-arrow.next { right: 0; border-radius: 4px 0 0 4px; }
.row-wrap:hover .row-arrow { opacity: 1; }
.row-arrow:hover { background: rgba(20, 20, 20, .85); }

/* ---------- cartões ---------- */
.card {
  position: relative; flex: 0 0 auto; width: clamp(210px, 18vw, 300px); aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; cursor: pointer; background: var(--card); color: #fff; text-align: left;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.card-ghost {
  position: absolute; right: 10px; top: 2px; font-family: var(--font-display); font-size: 4.4rem; line-height: 1;
  color: rgba(255, 255, 255, .14); pointer-events: none; letter-spacing: .02em;
}
.card-ghost.big { font-size: 13rem; right: 24px; top: -10px; }
.card-title {
  position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; flex-direction: column; gap: 2px;
  transition: transform .2s; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.card-title strong { font-size: 1.12rem; line-height: 1.15; }
.card-title small { color: rgba(255, 255, 255, .78); font-size: .78rem; }
.card-title .snip {
  font-family: var(--font-read); font-size: .76rem; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.card-progress i { display: block; height: 100%; background: var(--accent); }
.card-actions {
  position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; gap: 6px; opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.card-chapter .card-title, .card-book .card-title { padding-bottom: 0; }

@media (hover: hover) {
  .card:hover, .card:focus-visible { transform: scale(1.16); z-index: 5; box-shadow: 0 16px 34px rgba(0, 0, 0, .7); }
  .row-track > .card:first-child:hover, .row-track > .top10:first-child .card:hover { transform-origin: left center; }
  .row-track > .card:last-child:hover { transform-origin: right center; }
  .card:hover .card-actions, .card:focus-visible .card-actions, .card:focus-within .card-actions { opacity: 1; transform: none; pointer-events: auto; }
  .card:hover .card-title, .card:focus-visible .card-title { transform: translateY(-40px); }
  .card:hover .card-title .snip, .card:focus-visible .card-title .snip { -webkit-line-clamp: 1; }
  .card-portrait:hover .card-title { transform: translateY(-40px); }
}
@media (hover: none) { .card-actions { display: none; } }

/* ---------- Top 10 ---------- */
.row-top10 .row-track { gap: 1.2rem; }
.top10 { display: flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
.rank {
  font-family: var(--font-display); font-size: clamp(7rem, 11vw, 10.5rem); line-height: .9; color: #141414;
  -webkit-text-stroke: 3px #6b6b6b; margin-right: -1.1rem; position: relative; z-index: 1; letter-spacing: -.08em;
}
.card-portrait { width: clamp(112px, 10.5vw, 160px); aspect-ratio: 2 / 3; z-index: 2; }
.card-portrait .card-ghost { right: 6px; top: 6px; font-size: 3.4rem; }
.card-portrait .card-title strong { font-size: 1rem; }

/* ---------- janela de detalhes ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300; overflow-y: auto; background: rgba(0, 0, 0, .72);
  padding: 3vh 1rem; opacity: 0; transition: opacity .18s;
}
.modal-backdrop.show { opacity: 1; }
.modal {
  width: min(860px, 100%); margin: 0 auto; background: var(--bg-2); border-radius: 8px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .75); outline: none; transform: translateY(14px) scale(.985); transition: transform .2s;
}
.modal-backdrop.show .modal { transform: none; }
.modal-art { position: relative; aspect-ratio: 16 / 8; min-height: 230px; max-height: 420px; }
.modal-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, var(--bg-2)); }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-2); font-size: 1.2rem; color: #fff;
}
.modal-close:hover { background: #333; }
.modal-close.inline { position: static; }
.modal-art-bottom { position: absolute; z-index: 2; left: 2rem; right: 2rem; bottom: 1.6rem; }
.modal-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; margin-bottom: 1rem; text-shadow: 0 3px 12px rgba(0, 0, 0, .5); }
.modal-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.modal-body { padding: .6rem 2rem 2rem; }
.modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.tag { border: 1px solid var(--dim); padding: 0 .4rem; border-radius: 3px; font-size: .75rem; color: #ddd; }
.meta-progress { color: #5ec27a; font-weight: 600; }
.modal-desc { font-size: 1.1rem; line-height: 1.55; color: #e6e6e6; max-width: 62ch; }
.modal-sub { margin: 1.8rem 0 .6rem; font-size: 1.4rem; }
.ep-list { display: grid; max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--line); }
.ep { display: flex; align-items: center; gap: 1rem; padding: 1rem .9rem; text-align: left; border-bottom: 1px solid var(--line); border-radius: 4px; }
.ep:hover { background: #2a2a2a; }
.ep.current { background: #262626; box-shadow: inset 3px 0 var(--accent); }
.ep-num { font-size: 1.5rem; color: var(--muted); width: 2.6rem; text-align: center; flex: none; }
.ep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.ep-body strong { font-size: 1rem; }
.ep-body strong em { font-style: normal; font-size: .72rem; margin-left: .6rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .05em; }
.ep-body > span { color: var(--muted); font-size: .88rem; line-height: 1.4; font-family: var(--font-read); }
.ep-check { color: #5ec27a; font-size: 1.3rem; }

.modal-picker { width: min(560px, 100%); margin-top: 6vh; }
.picker-head { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem .4rem; }
.picker-body { padding: .8rem 1.4rem 1.6rem; display: grid; gap: 1rem; }
.chap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; max-height: 52vh; overflow-y: auto; }
.chap { height: 44px; border-radius: 5px; background: var(--card); font-weight: 600; }
.chap:hover { background: #3a3a3a; }
.chap.done { color: #8fd9a3; }
.chap.current { background: var(--accent); color: #fff; }

@media (max-width: 820px) {
  .card { width: 44vw; }
  .card-ghost { font-size: 3.2rem; }
  .card-title strong { font-size: 1rem; }
  .modal-backdrop { padding: 0; }
  .modal { border-radius: 0; min-height: 100vh; }
  .modal-body { padding: .4rem 1.2rem 2rem; }
  .modal-art-bottom { left: 1.2rem; right: 1.2rem; }
  .ep-list { max-height: none; }
  .row-arrow { display: none; }
  .rank { font-size: 7rem; }
  .card-portrait { width: 28vw; }
  .row-title { font-size: 1.1rem; }
}