/* Backdrops belong to deck-backdrops.css; portraits keep their original atlas. */
.rule-card-game:not(.poker) .being-art{background-image:url('./art/beings-atlas.webp')}
/* Upright indices, a framed ink portrait and a stable band for every guest's name. */
.lf .folklore-card{
  --card-ink:#29372d;
  container-type:inline-size;padding:0;background:#efe7d7;color:var(--card-ink);
  border-top:1px solid #d8cfbd;border-right:1px solid #d8cfbd;
  border-bottom:1px solid #d8cfbd;border-left:1px solid #d8cfbd;
  border-radius:7px;box-shadow:none;
}
.lf .playing-card.folklore-card{aspect-ratio:5/7;box-shadow:none}
.lf .playing-card.folklore-card:hover:not(:disabled){background:#efe7d7}
.lf .playing-card.folklore-card:hover:not(:disabled):not(.chosen){transform:translateY(-4px)}
.lf .playing-card.folklore-card.chosen{
  transform:translateY(-8px);border-color:var(--red);outline:2px solid var(--red);outline-offset:2px;
}
.lf .playing-card.folklore-card.chosen:after{content:none}
.lf .playing-card.folklore-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.folklore-card[data-suit="EMBER"]{--card-ink:#a13d28}
.folklore-card[data-suit="TIDE"]{--card-ink:#175d81}
.folklore-card[data-suit="GROVE"]{--card-ink:#365b36}
.folklore-card[data-suit="GALE"]{--card-ink:#80591b}
.folklore-card:before{content:none}
.lf .folklore-card .card-corner{
  position:absolute;top:4%;left:7%;right:auto;bottom:auto;
  display:flex;flex-direction:row;align-items:center;gap:clamp(3px,3cqw,7px);
  width:auto;margin:0;color:var(--card-ink);text-align:center;
  font:500 clamp(13px,14cqw,25px)/1 Georgia,serif;
  font-variant-numeric:lining-nums;z-index:2;
}
.lf .folklore-card .corner-suit{
  display:block;width:clamp(14px,16cqw,27px);height:clamp(14px,16cqw,27px);
  margin:0;object-fit:contain;
}
.lf .folklore-card .folklore-face{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
}
.lf .folklore-card .portrait-frame{
  position:absolute;top:16.5%;left:14%;width:72%;aspect-ratio:1;
  display:block;overflow:hidden;background:#f1e8d5;
  border:1px solid #cfc3ac;border-radius:3px;
}
.lf .folklore-card .folklore-face .being-art{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:1;margin:0;border:0;
  mix-blend-mode:normal;filter:none;mask-image:none;
}
.lf.rule-card-game .folklore-card .folklore-face .card-label{
  position:absolute;top:68%;left:4%;right:4%;height:19%;
  display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;
  font:600 clamp(10px,12cqw,23px)/1.04 Georgia,serif;
  letter-spacing:0;text-align:center;color:#33372c;
  white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;text-transform:none;
}
.lf.rule-card-game .folklore-card .folklore-face .card-realm{
  position:absolute;top:auto;bottom:3.5%;left:5%;right:5%;
  display:block;margin:0;padding:0;border:0;
  font:500 clamp(10px,8cqw,11px)/1.1 var(--mono);
  letter-spacing:.055em;text-align:center;color:var(--card-ink);
}
.lf .folklore-card .held-score{bottom:-18px;font:10px/1.2 var(--mono);letter-spacing:.2px}
.lf .folklore-card .effective-identity{
  position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;
  display:flex;flex-direction:column;gap:2px;padding:4px 3px;
  border:1px solid #59644c;border-left:3px solid var(--gold);border-radius:3px;
  background:#26352e;color:#f0e8d7;text-align:center;pointer-events:none;
}
.lf .folklore-card .effective-heading{font:700 10px/1 var(--mono);letter-spacing:.08em;color:#e2c381}
.lf .folklore-card .effective-kind{font:600 12px/1.1 var(--serif);text-wrap:balance}
.lf .folklore-card .effective-details{font:10px/1.2 var(--sans)}
.lf .folklore-card .effective-identity .held-score{position:static;margin-top:3px;transform:none;color:#e2c381}
.rule-card-game:not(.poker) .hand{row-gap:30px}
/* Effective identity belongs below the printed face; neither its index nor art is covered. */
.rule-card-game:not(.poker) .hand:has(.effective-identity){row-gap:90px;padding-bottom:76px}
.lf .preparation-kept-cards:has(.effective-identity){row-gap:76px;padding-bottom:70px}
/* Keep both guests legible: the example sentence has its own row, never a card's label. */
.rule-card-game:not(.poker) .opening-exhibit{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;
  gap:20px;height:auto;padding:30px 18px 18px;
}
.rule-card-game:not(.poker) .opening-exhibit .orbit{inset:0;transform:none}
.rule-card-game:not(.poker) .exhibit-card{
  position:relative;inset:auto;width:100%;height:auto;aspect-ratio:5/7;
  align-self:start;filter:none;
}
.rule-card-game:not(.poker) .exhibit-front{order:1;transform:rotate(-4deg) translateY(12px)}
.rule-card-game:not(.poker) .exhibit-back{order:2;transform:rotate(4deg) translateY(-12px)}
.rule-card-game:not(.poker) .floating-rule{
  position:relative;inset:auto;order:3;grid-column:1/-1;
  justify-self:center;max-width:100%;margin-top:16px;transform:none;
}
.rule-card-game:not(.poker) .floating-rule span{overflow-wrap:normal}
.rule-card-game:not(.poker) .exhibit-caption{
  position:relative;inset:auto;order:4;grid-column:1/-1;margin:0;
}
@media(max-width:650px){
  .rule-card-game:not(.poker) .opening{grid-template-columns:minmax(0,1fr)}
  .rule-card-game:not(.poker) .opening-exhibit{gap:12px;padding:8px 0 0}
  .rule-card-game:not(.poker) .exhibit-card{transform:none}
  .rule-card-game:not(.poker) .floating-rule{margin-top:4px;width:100%}
  .rule-card-game:not(.poker) .floating-rule span{width:100%;padding:14px 12px}
}
@media(min-width:1051px) and (max-width:1240px){.rule-card-game:not(.poker) .hand{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:440px){.rule-card-game:not(.poker) .hand{grid-template-columns:repeat(3,minmax(0,1fr))}}