/* Card-only rules extracted for display integration on 2026-09-11; preserved rendering parameters. */
.stage {
  display: grid;
  place-items: center;
  perspective: 1000px;
  height: 510px;
  background: radial-gradient(ellipse at center, #47665324, transparent 65%);
  touch-action: pan-y;
}
.tilt-card {
  width: min(300px, 80%);
  aspect-ratio: 0.716;
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.24s ease;
  box-shadow:
    0 24px 45px #0009,
    0 0 40px #a2edba0b;
  border-radius: 4.55% / 3.5%;
  --px: 50%;
  --py: 50%;
  isolation: isolate;
}
.tilt-card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: fill;
}
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s;
}
.foil {
  mask-image: var(--mask-image);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background: repeating-linear-gradient(
    120deg,
    #f992e0 0%,
    #80baff 16%,
    #8cf0c4 32%,
    #f5efa0 48%,
    #f992e0 64%
  );
  background-size: 260% 260%;
  background-position: var(--px) var(--py);
  mix-blend-mode: color-dodge;
}
.etch {
  background-image:
    var(--etch-image),
    radial-gradient(circle at var(--px) var(--py), #eee, #17171a);
  background-size: 100% 100%;
  background-blend-mode: difference;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(
    circle at var(--px) var(--py),
    white,
    transparent 85%
  );
}
/* FlatSilver is not the generic rainbow foil. CC patterns are packed RGBA
   data: the backend exposes A (shape) and R*A (detail) as luminance masks.
   The outer white-plate mask clips both layers out of the illustration/text.
   Shared textures stay uncropped. The square CC tile is displayed at card
   width, keeping round symbols round and repeating vertically. This visual
   calibration follows the supplied photo, not an official UV reconstruction. */
.tilt-card[data-profile="flat-silver"] .foil {
  background-image:
    radial-gradient(ellipse at var(--px) var(--py), #ffffff66, transparent 66%),
    linear-gradient(
      112deg,
      #252930 8%,
      #747d88 25%,
      #e6edf4 41%,
      #ffffff 46%,
      #ccd6e0 51%,
      #707984 67%,
      #252930 92%
    );
  background-size:
    100% 100%,
    150% 150%;
  background-position:
    center,
    var(--px) var(--py);
  background-blend-mode: screen;
  mix-blend-mode: hard-light;
}


.tilt-card[data-profile="sunpillar"] .cast-shape {
  mask-size: var(--cc-tile-width, 100%) auto;
}
.tilt-card[data-profile="sunpillar"] .cast-detail {
  mask-size: var(--cc-tile-width, 100%) auto;
}
.tilt-card[data-profile="sunpillar"] .foil {
  background-image: radial-gradient(
      ellipse at var(--px) var(--py),
      #fff6 0%,
      transparent 65%
    ),
    linear-gradient(
      112deg,
      #10141b 8%,
      #46515d 25%,
      #c7d2df 41%,
      #fff 46%,
      #b6c6d4 51%,
      #525b68 67%,
      #10141b 92%
    );
  background-size: 100% 100%, 150% 150%;
  background-position: center, var(--px) var(--py);
  background-blend-mode: screen;
  mix-blend-mode: hard-light;
}
.tilt-card[data-profile="sunpillar"] .foil {
  opacity: calc(var(--foil-base-opacity, 0.18) * 1.8 * var(--foil-boost, 1));
}
.tilt-card[data-profile="sunpillar"].interacting.has-foil:not(.no-effects) .foil {
  opacity: calc(var(--foil-hover-opacity, 0.45) * 1.55 * var(--foil-boost, 1));
}
.tilt-card[data-profile="sunpillar"].has-foil:not(.has-pattern):not(.no-effects) .foil {
  opacity: calc(var(--foil-base-opacity, 0.18) * 2.0 * var(--foil-boost, 1));
}
.tilt-card[data-profile="sunpillar"].interacting.has-foil:not(.has-pattern):not(.no-effects) .foil {
  opacity: calc(var(--foil-hover-opacity, 0.45) * 1.9 * var(--foil-boost, 1));
}
.cast {
  mask-image: var(--mask-image);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: hard-light;
}
.cast-shape,
.cast-detail {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask-mode: luminance;
  /* Previously 139.665%: symbols were ~40% too large. A 100%-width square
     tile gives ~4 alternating large/small balls per row, at any card size. */
  mask-size: var(--cc-tile-width, 100%) auto;
  mask-position: var(--cc-pattern-x, center) center;
  mask-repeat: repeat;
}
.cast-shape {
  mask-image: var(--pattern-shape);
  background-image: linear-gradient(
    120deg,
    #505b79,
    #bdf3f4 22%,
    #e8c7f4 40%,
    #ffffec 52%,
    #a6c3ed 68%,
    #535d76 90%
  );
  background-size: 250% 250%;
  background-position: var(--px) var(--py);
}
.cast-detail {
  mask-image: var(--pattern-detail);
  background: radial-gradient(
    circle at var(--px) var(--py),
    #fff 5%,
    #a1a4ac 48%,
    #303847 95%
  );
  mix-blend-mode: multiply;
}
.has-pattern.has-foil:not(.no-effects) .cast {
  opacity: 0.22;
}
.interacting.has-pattern.has-foil:not(.no-effects) .cast {
  opacity: 0.72;
}
.tilt-card[data-profile="non-foil"] .foil,
.tilt-card[data-profile="non-foil"] .etch,
.tilt-card[data-profile="non-foil"] .cast {
  display: none;
}
.glare {
  background: radial-gradient(
    circle at var(--px) var(--py),
    #ffffff9c,
    transparent 60%
  );
  mix-blend-mode: soft-light;
}
/* Calibrated against the supplied Master Ball reverse-holo photo. The 100%-width
   source tile is further scaled to about 66.5% of card width, making the large
   motifs much smaller than the initial preview. This affects both Master and
   Poké Ball variants; UV parity remains unverified. */
.tilt-card.has-pattern {
  --cc-tile-width: 66.5%;
}
/* SouthernCross mirror ex: smaller stars, denser repeat. Keep shape/detail
   at the same scale; do not change the calibrated Ball patterns or etching. */
.tilt-card.has-pattern.is-sunpillar {
  --cc-tile-width: 50%;
}
.tilt-card.is-masterball {
  --cc-pattern-x: -11%;
}
.tilt-card.is-pokeball {
  --cc-pattern-x: 4%;
}
.interacting.has-foil:not(.no-effects) .foil {
  opacity: 0.45;
}
/* A plain silver reverse (ph) must remain distinguishable from non-foil at
   rest, not only during pointer movement. Keep CC's base gentler so it does
   not wash out the smaller ball motifs. All rules respect the effect toggle. */
.tilt-card[data-profile="flat-silver"].has-foil:not(.no-effects) .foil {
  opacity: 0.28;
}
.tilt-card[data-profile="flat-silver"].interacting.has-foil:not(.no-effects)
  .foil {
  opacity: 0.54;
}
.tilt-card[data-profile="flat-silver"].has-foil:not(.has-pattern):not(
    .no-effects
  )
  .foil {
  opacity: 0.42;
}
.tilt-card[data-profile="flat-silver"].interacting.has-foil:not(
    .has-pattern
  ):not(.no-effects)
  .foil {
  opacity: 0.78;
}
/* Original hover rendering, now visible at rest with the centered light.
   Pointer movement still changes the gradient/mask via --px / --py. */
.has-etch:not(.no-effects) .etch {
  opacity: 0.6;
}
.interacting:not(.no-effects) .glare {
  opacity: 0.55;
}