/* The title card (Dex, 27 Sep: D and B from the card board). Front: the holo
   foil (a crop of Harry's own file, never redrawn). Back: the stat card. Hover,
   focus or tap flips it. Drawn at 250 x 350 and scaled with --s. */
.fc{--s:1;position:relative;display:block;width:calc(250px * var(--s));height:calc(350px * var(--s));perspective:1000px;color:inherit;text-decoration:none;flex:none;-webkit-tap-highlight-color:transparent}
.fc-in{position:absolute;left:0;top:0;width:250px;height:350px;transform-origin:0 0;transform:scale(var(--s));transform-style:preserve-3d}
.fc-deal{position:absolute;inset:0;transform-style:preserve-3d}
.fc-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.25,1)}
.fc:hover .fc-flip,.fc:focus-visible .fc-flip,.fc.flipped .fc-flip{transform:rotateY(180deg)}
.fc:focus-visible{outline:none}.fc:focus-visible .fc-face{box-shadow:0 0 0 4px #fffff5}
.fc-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2)}
.fc-art{background:var(--art) 50% 18%/cover no-repeat}   /* card.jpg: his file pre-shrunk, so the halftone never turns to moiré */

/* D, the holo foil */
.fc-D{background:#111;border:6px solid #1c1c1c}
.fc-D .fc-art{position:absolute;inset:0}
.fc-D .foil{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.8;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,0,160,.55) 35%,rgba(0,220,255,.55) 45%,rgba(255,240,0,.55) 55%,rgba(0,255,120,.5) 65%,transparent 80%) var(--fx,30%) var(--fy,40%)/250% 250%}
.fc-D .nm{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.fc-D .nm b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:32px;line-height:1;text-transform:uppercase}
.fc-D .nm i{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.fc-D .no{position:absolute;top:10px;right:12px;font-family:Anton,Impact,sans-serif;font-size:22px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* B, the stat card */
.fc-B{transform:rotateY(180deg);background:#000d0b;color:#fffff5;border:3px solid var(--kit);font-family:"Barlow Condensed",var(--sans);padding:16px 16px 12px;display:flex;flex-direction:column}
.fc-B .top{display:flex;justify-content:space-between;align-items:flex-start}
.fc-B .no{font-family:Anton,Impact,sans-serif;font-size:58px;line-height:.85;color:color-mix(in oklab,var(--kit) 55%,#fff)}
.fc-B .ser{font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:right;opacity:.7;line-height:1.3}
.fc-B .fc-art{height:120px;border-radius:6px;margin:12px 0 10px;background-position:50% 22%}
.fc-B h4{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.fc-B dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:10px 0 0;font-size:15px}
.fc-B dt{text-transform:uppercase;letter-spacing:.08em;opacity:.6;font-size:12px;align-self:center}
.fc-B dd{margin:0;font-weight:700;text-align:right}
.fc-B .tbc{display:inline-block;border:1px dashed currentColor;border-radius:3px;padding:0 4px;opacity:.7;font-weight:500;font-size:.8em;line-height:1.3}
.fc-B .foot{margin-top:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;border-top:1px solid rgba(255,255,245,.2);padding-top:6px}

@keyframes fc-deal{0%{transform:translate(-170%,-60%) rotate(-38deg)}70%{transform:translate(4%,1%) rotate(1deg)}100%{transform:none}}
@keyframes fc-shine{0%{background-position:130% 0}100%{background-position:-30% 0}}
.fc.dealt .fc-deal{animation:fc-deal .8s cubic-bezier(.2,.8,.25,1) both}
.fc.dealt .fc-D::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:fc-shine 1.1s .75s ease-out both}
@media (prefers-reduced-motion: reduce){.fc-flip{transition:none}.fc.dealt .fc-deal{animation:none}.fc.dealt .fc-D::after{display:none}}