/* Three cards fanned like a hand (site/card-fan.mjs), on index tiles that lead with their own cards: the card
   index's sets, tags and printing kinds, keywords and theorycraft decks. Loaded on pages that show one. */
.card-fan{position:relative;display:block;height:150px;clip-path:inset(0);background:color-mix(in srgb,var(--soft) 35%,transparent)}
.card-fan img{position:absolute;left:50%;bottom:-24px;height:142px;width:auto;aspect-ratio:744/1039;border-radius:5px;box-shadow:0 6px 14px #0005;transform-origin:50% 100%;transform:translateX(-50%)}
.card-fan img:nth-child(1){z-index:2}
.card-fan img:nth-child(2){transform:translateX(-50%) translateX(-54%) rotate(-9deg)}
.card-fan img:nth-child(3){transform:translateX(-50%) translateX(54%) rotate(9deg)}
/* Battlefields are landscape: three overlapping cards hung from the top. */
.card-fan img.is-wide{height:auto;width:58%;aspect-ratio:1039/744;bottom:auto;top:22px;transform-origin:50% 50%}
.card-fan img.is-wide:nth-child(2){transform:translateX(-50%) translateX(-42%) translateY(10px) rotate(-7deg)}
.card-fan img.is-wide:nth-child(3){transform:translateX(-50%) translateX(42%) translateY(10px) rotate(7deg)}

/* The card index: one tile per set, tag and printing kind, its fan above its name and count. */
.directory-tiles{list-style:none;margin:20px 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.directory-tiles a{display:flex;flex-direction:column;gap:2px;height:100%;padding:0 0 14px;background:var(--bg2);border:1px solid var(--soft);color:var(--ink);text-decoration:none;transition:border-color .15s}
.directory-tiles a:hover,.directory-tiles a:focus-visible{border-color:var(--ac)}
.directory-tiles strong{padding:0 16px;font:600 21px/1.1 var(--head);text-transform:uppercase;overflow-wrap:anywhere}
.directory-tiles span:not(.card-fan){padding:0 16px;font:13px/1.5 var(--mono);color:var(--muted)}
.directory-tiles .card-fan{height:176px;margin-bottom:12px}
.directory-tiles .card-fan img:not(.is-wide){height:168px}
@media(max-width:1000px){.directory-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
 .directory-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .directory-tiles .card-fan{height:116px}
 .directory-tiles .card-fan img:not(.is-wide){height:110px;bottom:-18px}
 .directory-tiles strong{padding:0 10px;font-size:16px}
 .directory-tiles span:not(.card-fan){padding:0 10px}
}