/* Epic catalogue and game compositions; shared foundations live in wargods-epic.css. */
.site[data-skin="wargods-epic"] {
  & .epic-heroes-catalog__toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; padding:18px; border:1px solid var(--epic-line); background:var(--epic-ink); }
  & .epic-heroes-catalog__toolbar>div { display:flex; flex-wrap:wrap; gap:8px; }
  & .epic-heroes-catalog__toolbar button { min-height:44px; padding:9px 15px; border:1px solid var(--epic-line); background:var(--epic-panel); color:var(--text); cursor:pointer; }
  & .epic-heroes-catalog__toolbar button:is(:hover,:focus-visible),& .epic-heroes-catalog__toolbar button[aria-pressed="true"] { border-color:var(--epic-gold); color:var(--epic-ivory); }
  & .epic-heroes-catalog__toolbar input { min-height:44px; padding:10px 14px; border:1px solid var(--epic-line); background:#080b13; color:var(--text); }
  & .epic-hero-card { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:end; min-width:0; min-height:280px; aspect-ratio:3/4; padding:0; overflow:hidden; border:1px solid var(--epic-line); background:var(--epic-ink); color:var(--epic-ivory); text-align:center; cursor:pointer; transition:border-color var(--epic-fast),box-shadow var(--epic-fast); }
  & .epic-hero-card:is(:hover,:focus-visible),& .epic-hero-card.is-active { border-color:var(--epic-gold); box-shadow:0 0 16px #d9a84e38; }
  & .epic-hero-card::after { content:""; position:absolute; z-index:-1; inset:45% 0 0; background:linear-gradient(0deg,#060910,transparent); }
  & .epic-hero-card__art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
  & .epic-hero-card__mark-only { position:absolute; top:25%; left:30%; width:40%; height:35%; object-fit:contain; }
  & .epic-hero-card__initial { position:absolute; inset:20% 0 auto; font:100px var(--heading); color:var(--epic-gold); }
  & .epic-hero-card strong { position:relative; padding:16px 10px; font:600 22px var(--heading); text-shadow:0 2px 8px #000; }
  & .epic-hero-card small { position:relative; padding:0 10px 15px; color:var(--epic-gold); }
  & .cinema-game { position:relative; isolation:isolate; display:flex; align-items:end; min-height:500px; overflow:hidden; background:var(--epic-ink); }
  & .cinema-game:only-child { min-height:560px; }
  & .cinema-game > img:not(.cinema-game__mark) { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
  & .cinema-game::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#070c14ed, #070c1470 55%,transparent),linear-gradient(0deg,#070c14e0,transparent 70%); }
  & .cinema-game__copy { position:relative; width:100%; padding:clamp(28px,4vw,60px); background:none; }
  & .cinema-game__copy h3 { max-width:22ch; font-size:clamp(30px,3.5vw,52px); }
  & .cinema-game__copy p { max-width:48ch; }
  & .cinema-game img.cinema-game__mark { position:absolute; right:6%; top:12%; width:24%; height:28%; object-fit:contain; }
  & .cinema-game--poster { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
  & .cinema-game--poster::before { display:none; }
  & .cinema-game--poster > img:not(.cinema-game__mark) { position:relative; height:520px; padding:24px; object-fit:contain; z-index:0; }
}
@media(max-width:1199px) {
  .site[data-skin="wargods-epic"] {
  }
}
@media(max-width:767px) {
  .site[data-skin="wargods-epic"] {
    & .epic-hero-card { min-height:320px; aspect-ratio:4/5; }
    & .epic-heroes-catalog__toolbar > *,& .epic-heroes-catalog__toolbar input { min-width:0; max-width:100%; }
    & .epic-heroes-catalog__toolbar label,& .epic-heroes-catalog__toolbar input { width:100%; }
    & .cinema-game,& .cinema-game:only-child { min-height:520px; }
    & .cinema-game::before { background:linear-gradient(0deg,#070c14 0%,#070c14d0 40%,#070c1430 90%); }
    & .cinema-game__copy { padding:24px; }
    & .cinema-game--poster { display:block; }
    & .cinema-game--poster > img:not(.cinema-game__mark) { height:360px; }
  }
}