/* Hover card reveal. card-reveal.js positions it beside the hovered piece and scales it with the window. */
.card-reveal{--reveal-accent:var(--ember,#f6a034);position:fixed;z-index:80;left:0;top:0;width:288px;pointer-events:none;border-radius:16px;overflow:hidden;background:#0f1d27f7;border:1px solid color-mix(in srgb,var(--reveal-accent) 55%,transparent);box-shadow:0 22px 60px #020a12e6,0 0 0 1px #ffffff0d inset,0 0 34px color-mix(in srgb,var(--reveal-accent) 18%,transparent);color:var(--ink,#f4f3e8);opacity:0;transform:scale(.96);transform-origin:var(--reveal-origin,left center);transition:opacity .16s ease-out,transform .2s cubic-bezier(.2,.8,.3,1.15)}
.card-reveal[data-faction=veil]{--reveal-accent:var(--veil,#69d6d6)}
.card-reveal[data-side=left]{--reveal-origin:right center}
.card-reveal[data-side=vertical]{--reveal-origin:center bottom}
.card-reveal[data-state=closed]{display:none}
.card-reveal[data-state=measuring]{visibility:hidden;transition:none}
.card-reveal[data-state=open]{opacity:1;transform:none}
/* The whole illustration: contained over a blurred copy of itself, so nothing is cropped whatever its proportions. */
.card-reveal-art{position:relative;display:flex;align-items:center;justify-content:center;height:min(300px,42vh);overflow:hidden;background:#0a151d}
.card-reveal-backdrop{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(18px) saturate(1.2) brightness(.55)}
.card-reveal-image{position:relative;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 26px #0009}
.card-reveal-art>.dr-art{position:absolute;inset:0;width:100%;height:100%}
.card-reveal-art::after{content:"";position:absolute;inset:auto 0 0;height:36px;background:linear-gradient(transparent,#0f1d27f7);pointer-events:none}
.card-reveal-strength{position:absolute;z-index:1;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:center;min-width:44px;padding:4px 6px 3px;border-radius:10px;background:#0d1c26e6;border:1px solid color-mix(in srgb,var(--reveal-accent) 60%,transparent);line-height:1}
.card-reveal-strength small{font-size:9px;letter-spacing:.08em;color:var(--muted,#b2c2cb)}
.card-reveal-strength b{font-size:22px}
.card-reveal-body{padding:10px 14px 14px}
.card-reveal-type{display:flex;align-items:center;gap:5px;margin:0;color:var(--reveal-accent);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.card-reveal-type .dr-icon{width:14px;height:14px}
.card-reveal h2{margin:3px 0 9px;font-size:22px;line-height:1.1;letter-spacing:-.3px}
.card-reveal-costs{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:6px;padding:8px 0;margin-bottom:9px;border-block:1px solid #a2bbc52b}
.card-reveal-costs>span{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.card-reveal-costs small{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint,#8297a7)}
.card-reveal-costs b{font-size:15px;line-height:20px}
.card-reveal .dr-pip{width:20px;min-width:20px;height:20px;font-size:12px}
.card-reveal-keywords{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.card-reveal .dr-keyword{font-size:11px;padding:3px 7px;min-height:0}
.card-reveal-rules .dr-ability{margin:0 0 6px;font-size:13px;line-height:1.4;color:#dce8e6}
.card-reveal .dr-trigger{color:var(--reveal-accent);font-weight:700}
.card-reveal-flavor{margin:8px 0 0;font-size:12px;line-height:1.4;font-style:italic;color:var(--muted,#b2c2cb)}
@media(prefers-reduced-motion:reduce){.card-reveal{transition:none;transform:none}}