/* Holographic card finishes — driven by js/holo.js (G.Holo).
   Original implementation: each finish is 2–4 absolutely positioned layers appended inside the card
   element, each masked by the card image itself (so rounded corners/alpha are respected) and blended
   onto the artwork. JS only writes custom properties (pointer position, tilt, "on" amount) and a
   transform on the tilting element — no layout properties are animated.

   Custom properties (set by JS on .hcard):
     --hx, --hy   pointer position 0..100 across the card (unitless, for calc)
     --px, --py   the same as percentages (light position)
     --bg-x/-y    derived background positions (37–63 % / 33–67 %) for slow-moving foil gradients
     --hdx, --hdy pointer offset from centre −1..1 (parallax, tilt)
     --dist-from-center  0..1
     --hon        interaction amount 0..1 (springs to 0 at rest)
     --hk         intensity multiplier
     --himg       url() of the card art, used as the mask                                         */

:root {
  --h-spectrum: hsl(2 100% 73%), hsl(40 100% 66%), hsl(75 95% 64%), hsl(150 90% 62%), hsl(190 100% 64%), hsl(225 100% 72%), hsl(275 100% 74%), hsl(320 100% 74%), hsl(2 100% 73%);
  /* sparse white sparkles */
  --h-glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* denser sparkles (vault / gold) */
  --h-glitter-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* multicoloured crackle patches (amazing) */
  --h-crackle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.035' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='5 0 0 0 -1.2 0 5 0 0 -1.2 0 0 5 0 -1.2 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

.hcard { isolation: isolate; --hx: 50; --hy: 50; --hdx: 0; --hdy: 0; --hon: 0; --hk: 1; --rest: 0.2;
  --px: 50%; --py: 50%; --bg-x: 50%; --bg-y: 50%; --dist-from-center: 0;
  /* illustration window of the framed fronts (◊–◊◊◊◊): x 7–93 %, y 10–52 % (measured on the 367×512 art) */
  --win-x: linear-gradient(90deg, transparent 6.8%, #000 7.4% 92.6%, transparent 93.2%);
  --win-y: linear-gradient(transparent 9.6%, #000 10.2% 51.6%, transparent 52.2%);
  /* foil strength: a little at rest, full while interacting */
  --amt: calc((var(--rest) + (1 - var(--rest)) * var(--hon)) * var(--hk)); }
.hcard.hcard-live { cursor: grab; }
/* hide the pages' older single-layer sheens while a full finish is attached */
.hcard > .holo, .hcard > .lp-holo { display: none !important; }
.hcard-box { position: relative; display: block; }
.hcard-box > img { display: block; width: 100%; height: 100%; }
.hcard-fit { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.hcard-fit > img { display: block; }

.hcard-l { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-repeat: no-repeat;
  -webkit-mask-image: var(--himg); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: var(--himg); mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center; }

/* ---------- shared glare: a soft light that follows the pointer ---------- */
.hcard-glare { mix-blend-mode: overlay; opacity: calc(var(--hon) * 0.85);
  background-image: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 22%, rgba(20, 24, 50, 0.4) 90%); }

/* ---------- GLOSS (◊–◊◊◊) ---------- */
.hcard-gloss .hcard-foil { mix-blend-mode: screen; opacity: calc(0.1 + var(--hon) * 0.45);
  background-image: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.55) 44%, rgba(255, 255, 255, 0.15) 52%, transparent 66%);
  background-size: 280% 280%; background-position: var(--px) var(--py); }
.hcard-gloss .hcard-tex { display: none; }
.hcard-r3.hcard-gloss .hcard-foil { opacity: calc(0.16 + var(--hon) * 0.6); }

/* ---------- HOLO: vertical prism bands over the artwork ---------- */
.hcard-holo { --rest: 0.25; }
.hcard-holo .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.75); filter: brightness(0.6) contrast(1.5) saturate(1.3);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--h-spectrum));
  background-size: 100% 100%, 46% 100%; background-repeat: repeat, repeat-x;
  background-position: 0 0, calc(50% + var(--hdx) * 110%) 0;
  /* foil only inside the illustration window */
  -webkit-mask-image: var(--himg), var(--win-x), var(--win-y); mask-image: var(--himg), var(--win-x), var(--win-y);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }
.hcard-holo .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--hon) * 0.8);
  background-image: var(--h-glitter); background-size: 200px; background-repeat: repeat;
  background-position: calc(var(--hdx) * 14px) calc(var(--hdy) * 14px);
  -webkit-mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 15%, transparent 45%);
  mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 15%, transparent 45%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---------- REVERSE HOLO: metallic foil on frame + text box, artwork left clean ---------- */
.hcard-reverse { --rest: 0.3; }
.hcard-reverse .hcard-sheen, .hcard-reverse .hcard-foil, .hcard-reverse .hcard-tex {
  /* card minus the illustration window */
  -webkit-mask-image: var(--himg), var(--win-x), var(--win-y); mask-image: var(--himg), var(--win-x), var(--win-y);
  -webkit-mask-composite: xor, source-in; mask-composite: exclude, intersect; }
.hcard-reverse .hcard-sheen { mix-blend-mode: soft-light; opacity: calc(var(--amt) * 0.9);
  background-image: linear-gradient(105deg, #2a2a2a 10%, #f4f4f4 30%, #5c5c5c 42%, #ffffff 54%, #3c3c3c 68%, #e6e6e6 84%);
  background-size: 300% 100%; background-position: calc(100% - var(--hx) * 1%) 0; }
.hcard-reverse .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.55); filter: brightness(0.7) contrast(1.3);
  background-image: linear-gradient(125deg, var(--h-spectrum)); background-size: 260% 260%; background-position: var(--px) var(--py); }
.hcard-reverse .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.9);
  background-image: var(--h-glitter-dense); background-size: 160px; background-repeat: repeat;
  background-position: calc(var(--hdx) * -10px) calc(var(--hdy) * -10px); }

/* ---------- AMAZING: splashy multicoloured crackle ---------- */
.hcard-amazing { --rest: 0.22; }
.hcard-amazing .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.55); filter: brightness(0.75) contrast(1.4) saturate(1.5);
  background-image: var(--h-crackle); background-size: 260px; background-repeat: repeat;
  background-position: calc(var(--hdx) * 26px) calc(var(--hdy) * 26px);
  -webkit-mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 30%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 30%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hcard-amazing .hcard-tex { mix-blend-mode: soft-light; opacity: calc(var(--amt) * 0.9);
  background-image: linear-gradient(140deg, var(--h-spectrum)); background-size: 300% 300%; background-position: calc(100% - var(--hx) * 1%) var(--py); }

/* ---------- RAINBOW FOIL (☆): pastel diagonal rainbow + fine sparkle ---------- */
.hcard-rainbow { --rest: 0.3; }
.hcard-rainbow .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.62); filter: brightness(0.72) contrast(1.25) saturate(0.95);
  background-image: linear-gradient(115deg, var(--h-spectrum), hsl(40 100% 66%), hsl(150 90% 62%), hsl(225 100% 72%), hsl(320 100% 74%));
  background-size: 400% 400%; background-position: var(--bg-x) var(--bg-y); }
.hcard-rainbow .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.9);
  background-image: var(--h-glitter); background-size: 180px; background-repeat: repeat;
  background-position: calc(var(--hdx) * -12px) calc(var(--hdy) * -12px);
  -webkit-mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 20%, rgba(0, 0, 0, 0.2) 60%);
  mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 20%, rgba(0, 0, 0, 0.2) 60%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---------- ETCHED FULL-ART (☆): engraved line texture that catches the rainbow ---------- */
.hcard-etched { --rest: 0.3; }
.hcard-etched .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.7); filter: brightness(0.8) contrast(1.3);
  background-image: linear-gradient(120deg, var(--h-spectrum)); background-size: 300% 300%;
  background-position: calc(100% - var(--hx) * 1%) calc(100% - var(--hy) * 1%);
  -webkit-mask-image: var(--himg), repeating-linear-gradient(62deg, #000 0 1px, transparent 1px 3.4px);
  mask-image: var(--himg), repeating-linear-gradient(62deg, #000 0 1px, transparent 1px 3.4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hcard-etched .hcard-tex { mix-blend-mode: overlay; opacity: calc(var(--amt) * 0.8);
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 47%, transparent 62%);
  background-size: 260% 260%; background-position: var(--px) var(--py); }

/* ---------- COSMOS (☆☆): galaxy star field + nebula with parallax ---------- */
.hcard-cosmos { --rest: 0.3; }
.hcard-cosmos .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.6); filter: brightness(0.85) contrast(1.25);
  background-image:
    radial-gradient(circle 1.6px at 11px 17px, #fff 40%, transparent),
    radial-gradient(circle 1.2px at 37px 44px, #fff 40%, transparent),
    radial-gradient(circle 2.2px at 20px 9px, #fff 30%, transparent),
    radial-gradient(circle 1.4px at 50px 70px, #fff 40%, transparent),
    radial-gradient(circle 3px at 71px 33px, rgba(255, 255, 255, 0.9) 20%, transparent),
    radial-gradient(ellipse 45% 35% at 28% 24%, rgba(160, 70, 255, 0.75), transparent),
    radial-gradient(ellipse 50% 40% at 76% 58%, rgba(30, 190, 255, 0.7), transparent),
    radial-gradient(ellipse 55% 35% at 40% 88%, rgba(255, 80, 170, 0.6), transparent),
    radial-gradient(ellipse 30% 25% at 85% 12%, rgba(90, 255, 200, 0.55), transparent);
  background-size: 47px 53px, 61px 59px, 83px 97px, 101px 89px, 131px 113px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    calc(var(--hdx) * -6px) calc(var(--hdy) * -6px), calc(var(--hdx) * -12px) calc(var(--hdy) * -12px),
    calc(var(--hdx) * -20px) calc(var(--hdy) * -20px), calc(var(--hdx) * -30px) calc(var(--hdy) * -30px),
    calc(var(--hdx) * -42px) calc(var(--hdy) * -42px),
    calc(50% + var(--hdx) * 8%) calc(50% + var(--hdy) * 8%), calc(50% - var(--hdx) * 10%) calc(50% - var(--hdy) * 6%),
    calc(50% + var(--hdx) * 5%) 50%, 50% calc(50% + var(--hdy) * 9%); }
.hcard-cosmos .hcard-tex { mix-blend-mode: soft-light; opacity: calc(var(--amt) * 0.9);
  background-image: linear-gradient(135deg, var(--h-spectrum)); background-size: 300% 300%; background-position: var(--px) var(--py); }

/* ---------- RADIANT (☆☆): bright criss-cross diamond lattice ---------- */
.hcard-radiant { --rest: 0.25; }
.hcard-radiant .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.7); filter: brightness(0.85) contrast(1.35) saturate(1.2);
  background-image: linear-gradient(115deg, var(--h-spectrum)); background-size: 280% 280%;
  background-position: var(--px) calc(100% - var(--hy) * 1%);
  -webkit-mask-image: var(--himg), repeating-linear-gradient(45deg, #000 0 1.6px, transparent 1.6px 10px), repeating-linear-gradient(-45deg, #000 0 1.6px, transparent 1.6px 10px);
  mask-image: var(--himg), repeating-linear-gradient(45deg, #000 0 1.6px, transparent 1.6px 10px), repeating-linear-gradient(-45deg, #000 0 1.6px, transparent 1.6px 10px);
  -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.hcard-radiant .hcard-tex { mix-blend-mode: overlay; opacity: calc(var(--amt) * 0.9);
  background-image: linear-gradient(45deg, transparent 32%, rgba(255, 255, 255, 0.75) 48%, transparent 64%),
    linear-gradient(-45deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  background-size: 260% 260%, 260% 260%;
  background-position: var(--px) var(--py), calc(100% - var(--hx) * 1%) var(--py); }

/* ---------- SHINY VAULT (☆☆): silver metallic with dense glitter ---------- */
.hcard-shiny { --rest: 0.3; }
.hcard-shiny .hcard-sheen { mix-blend-mode: soft-light; opacity: calc(var(--amt) * 1);
  background-image: linear-gradient(100deg, #333 8%, #f6f6f6 24%, #7a7a7a 38%, #ffffff 52%, #4a4a4a 66%, #eaeaea 82%, #3a3a3a 96%);
  background-size: 320% 100%; background-position: var(--px) 0; }
.hcard-shiny .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.9);
  background-image: var(--h-glitter-dense), var(--h-glitter); background-size: 160px, 230px; background-repeat: repeat;
  background-position: calc(var(--hdx) * -9px) calc(var(--hdy) * -9px), calc(var(--hdx) * 16px) calc(var(--hdy) * 16px);
  -webkit-mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 25%, rgba(0, 0, 0, 0.35) 90%);
  mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 25%, rgba(0, 0, 0, 0.35) 90%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hcard-shiny .hcard-tex { mix-blend-mode: color; opacity: calc(var(--hon) * 0.22 * var(--hk));
  background-image: linear-gradient(130deg, var(--h-spectrum)); background-size: 300% 300%; background-position: var(--px) var(--py); }

/* ---------- RAINBOW RARE (☆☆☆): saturated full-card rainbow + glitter + depth ---------- */
.hcard-rainbowrare { --rest: 0.5; }
.hcard-rainbowrare .hcard-foil { mix-blend-mode: color; opacity: calc(var(--amt) * 0.3);
  background-image: linear-gradient(125deg, var(--h-spectrum), hsl(40 100% 66%), hsl(150 90% 62%), hsl(225 100% 72%), hsl(320 100% 74%));
  background-size: 300% 300%; background-position: calc(10% + var(--hx) * 0.8%) calc(10% + var(--hy) * 0.8%); }
.hcard-rainbowrare .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.7);
  background-image: var(--h-glitter), linear-gradient(125deg, var(--h-spectrum)); background-size: 190px, 300% 300%; background-repeat: repeat, no-repeat;
  background-position: calc(var(--hdx) * -14px) calc(var(--hdy) * -14px), var(--px) var(--py);
  filter: brightness(0.75) contrast(1.4);
  -webkit-mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 18%, rgba(0, 0, 0, 0.25) 62%);
  mask-image: var(--himg), radial-gradient(circle at var(--px) var(--py), #000 0 18%, rgba(0, 0, 0, 0.25) 62%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---------- IMMERSIVE (☆☆☆): floating art window + strong prism sweep ---------- */
.hcard-immersive { --rest: 0.35; }
.hcard-immersive .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.55); filter: brightness(0.7) contrast(1.45) saturate(1.3);
  background-image: linear-gradient(110deg, transparent 18%, hsl(2 100% 73%) 28%, hsl(50 100% 66%) 34%, hsl(150 90% 62%) 40%, hsl(200 100% 66%) 46%, hsl(275 100% 74%) 52%, transparent 62%);
  background-size: 240% 240%; background-position: var(--px) var(--py); }
.hcard-immersive .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--hon) * 0.85 * var(--hk));
  background-image: var(--h-glitter); background-size: 210px; background-repeat: repeat;
  background-position: calc(var(--hdx) * 18px) calc(var(--hdy) * 18px); }

/* Parallax depth (both ☆☆☆ finishes): the art inside the frame slides against the tilt. */
.hcard-depth { opacity: var(--hon);
  background-image: var(--himg); background-size: 106% 106%;
  background-position: calc(50% - var(--hdx) * 50%) calc(50% - var(--hdy) * 50%);
  -webkit-mask-image: var(--himg), linear-gradient(90deg, transparent 4.5%, #000 7.5% 92.5%, transparent 95.5%), linear-gradient(transparent 3.5%, #000 6% 94%, transparent 96.5%);
  mask-image: var(--himg), linear-gradient(90deg, transparent 4.5%, #000 7.5% 92.5%, transparent 95.5%), linear-gradient(transparent 3.5%, #000 6% 94%, transparent 96.5%);
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }

/* ---------- SECRET GOLD (👑): gold tint, engraved lines, golden sparkle ---------- */
.hcard-gold { --rest: 0.55; }
.hcard-gold .hcard-sheen { mix-blend-mode: color; opacity: calc(var(--amt) * 0.6);
  background-image: linear-gradient(115deg, #8a6514 5%, #ffe48a 25%, #c8961c 42%, #fff2b5 55%, #a87b12 72%, #ffd65a 92%);
  background-size: 300% 300%; background-position: var(--px) var(--py); }
.hcard-gold .hcard-foil { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 0.8); filter: brightness(0.8) contrast(1.3);
  background-image: linear-gradient(115deg, #6b4a08 10%, #ffe89a 30%, #b07d10 45%, #fff6c8 55%, #8c6410 70%, #ffdf70 88%);
  background-size: 260% 260%; background-position: calc(100% - var(--hx) * 1%) calc(100% - var(--hy) * 1%);
  -webkit-mask-image: var(--himg), repeating-linear-gradient(-58deg, #000 0 1px, transparent 1px 3.2px);
  mask-image: var(--himg), repeating-linear-gradient(-58deg, #000 0 1px, transparent 1px 3.2px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hcard-gold .hcard-tex { mix-blend-mode: color-dodge; opacity: calc(var(--amt) * 1);
  background-image: var(--h-glitter-dense), radial-gradient(circle at var(--px) var(--py), rgba(255, 220, 120, 0.9), rgba(255, 190, 60, 0.15) 45%, transparent 70%);
  background-size: 160px, 100% 100%; background-repeat: repeat, no-repeat;
  background-position: calc(var(--hdx) * -12px) calc(var(--hdy) * -12px), 0 0;
  -webkit-mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 30%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: var(--himg), radial-gradient(farthest-side at var(--px) var(--py), #000 0 30%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* ---------- reduced motion: no tilt, a fixed gentle sheen ---------- */
.hcard.hcard-static { --hon: 0.4; --hx: 30; --hy: 26; --hdx: -0.4; --hdy: -0.48; --px: 30%; --py: 26%; --bg-x: 45%; --bg-y: 42%; --dist-from-center: 0.6; }
.hcard.hcard-static .hcard-depth { display: none; }

/* glare layer uses hard-light on the brightest finishes so the hotspot reads as a real reflection */
.hcard-gold .hcard-glare, .hcard-radiant .hcard-glare { mix-blend-mode: hard-light; opacity: calc(var(--hon) * 0.55); }

/* ---------- showcase (G.Holo.showcase) ---------- */
.hshow { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; cursor: zoom-out;
  background: radial-gradient(ellipse at 50% 45%, rgba(40, 60, 120, 0.55), rgba(8, 12, 28, 0.82));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; }
.hshow.in { opacity: 1; }
.hshow.out { opacity: 0; transition-duration: 0.38s; }
.hshow-stage { display: flex; align-items: center; justify-content: center; gap: min(calc(var(--vw1) * 4), 48px); max-width: calc(var(--vw1) * 94); }
.hshow-fly { flex: none; transform-origin: 50% 50%; }
.hshow-card { height: min(calc(var(--vh1) * 84), 760px); aspect-ratio: 367 / 512; width: auto; border-radius: 4.6% / 3.3%; cursor: grab;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5)); }
.hshow-info { cursor: default; max-width: min(calc(var(--vw1) * 34), 420px); color: #fff; font: 500 clamp(14px, calc(var(--vh1) * 2.4), 20px)/1.5 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.hshow-info b { display: block; font-size: 1.6em; font-weight: 700; line-height: 1.2; margin-bottom: 0.3em; }
.hshow-info > span:not(.marks) { display: block; opacity: 0.88; }
.hshow-info > .marks { margin: 0.2em 0 0.5em; }
@media (max-aspect-ratio: 1/1) { .hshow-stage { flex-direction: column; } .hshow-card { height: min(calc(var(--vh1) * 64), 640px); } .hshow-info { max-width: calc(var(--vw1) * 90); text-align: center; } }
.hshow-ghost { position: fixed; z-index: 9001; pointer-events: none; transform-origin: 50% 50%; border-radius: 4.6% / 3.3%; }