/* Per-family viewer approximations. Real _w clips the coating; _e / _cc stay
   independent. No new etch/emboss, no official Shader/UV parity claim. */
#tilt-card[data-material] {
  --band-contrast: 1.1;
  --reference-saturation: 1.2;
  --spectrum: repeating-linear-gradient(115deg, #ff74bc 0px, #b887ff 23px, #64bfff 47px, #69e8cb 70px, #ffe492 93px, #ffa180 117px, #ff74bc 140px);
  --silver: linear-gradient(112deg, #303944 0%, #9ba8b5 25%, #f8fbff 45%, #b7c7d1 55%, #535d6b 80%, #d4dae1 100%);
  --metal-image: var(--spectrum);
  --metal-size: 220% 220%;
  --metal-blend: soft-light;
  --metal-base: .38;
  --metal-hover: .56;
  --metal-saturation: 1.1;
  --detail-base: 0;
  --detail-hover: 0;
  --detail-size: calc(32px * var(--grain-scale, 1)) auto;
}
#tilt-card[data-material] > .foil {
  background-image: var(--metal-image);
  background-size: var(--metal-size);
  background-position: var(--px) var(--py);
  background-blend-mode: normal;
  mix-blend-mode: var(--metal-blend);
  filter: saturate(var(--metal-saturation));
  opacity: 0;
}
#tilt-card[data-material].has-foil:not(.no-effects) > .foil {
  opacity: min(1, calc(var(--metal-base) * var(--material-strength, 1) * var(--foil-boost, 1)));
}
#tilt-card[data-material].has-foil.interacting:not(.no-effects) > .foil {
  opacity: min(1, calc(var(--metal-hover) * var(--material-strength, 1) * var(--foil-boost, 1)));
}
#tilt-card[data-material] > .foil-detail {
  /* Pattern stays fixed on the card; the colored reflection moves across it. */
  mask-image: var(--mask-image);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}
#tilt-card[data-material] .foil-grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask-image: var(--detail-pattern);
  mask-mode: alpha;
  mask-size: var(--detail-size);
  mask-position: center;
  mask-repeat: repeat;
  background-image: radial-gradient(ellipse at var(--px) var(--py), #fff6, transparent 60%), var(--spectrum);
  background-size: 100% 100%, 240% 240%;
  background-position: center, var(--px) var(--py);
}
#tilt-card[data-material].has-foil:not(.no-effects) > .foil-detail {
  opacity: min(1, calc(var(--detail-base) * var(--material-strength, 1)));
}
#tilt-card[data-material].has-foil.interacting:not(.no-effects) > .foil-detail {
  opacity: min(1, calc(var(--detail-hover) * var(--material-strength, 1)));
}
#tilt-card[data-material] > .foil-aux {
  mask-image: var(--mask-image);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
}
#tilt-card[data-material] .foil-aux-color {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask-image: var(--aux-mask);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background-image: var(--spectrum);
  background-size: 220% 220%;
  background-position: var(--px) var(--py);
}
#tilt-card[data-material="gold-rainbow"].has-foil.has-aux.aux-enabled:not(.no-effects) > .foil-aux {
  opacity: min(1, calc(.3 * var(--material-strength, 1)));
}

/* User-approved models replace the generic foil/detail layers. Only wired on
   pages opted in via [data-approved-fx]; comparison pages keep generic layers. */
[data-approved-fx] #tilt-card > .reference-shine,
[data-approved-fx] #tilt-card > .radiant-ref { display: none; }
[data-approved-fx] #tilt-card.reference-card > .reference-shine { display: grid; }
[data-approved-fx] #tilt-card.radiant-lab > .radiant-ref { display: block; }
[data-approved-fx] #tilt-card[data-material="sw-holo"] > .foil,
[data-approved-fx] #tilt-card[data-material="sw-holo"] > .foil-detail,
[data-approved-fx] #tilt-card[data-material="sw-holo"] > .glare,
[data-approved-fx] #tilt-card[data-material="radiant-holo"] > .foil,
[data-approved-fx] #tilt-card[data-material="radiant-holo"] > .foil-detail,
[data-approved-fx] #tilt-card[data-material="radiant-holo"] > .glare { display: none; }
[data-approved-fx] #tilt-card[data-preview-mode="rainbow"] > .reference-shine,
[data-approved-fx] #tilt-card[data-preview-mode="rainbow"] > .radiant-ref { display: none; }

#tilt-card[data-material="rainbow"] { --metal-base: .55; --metal-hover: .55; }
#tilt-card[data-material="flat-silver"] { --metal-image: var(--silver); --metal-blend: hard-light; --metal-saturation: 0; --metal-base: .3; --metal-hover: .62; --metal-size: 170% 170%; }
#tilt-card[data-material="flat-silver"].has-pattern { --metal-base: .2; --metal-hover: .45; }
#tilt-card[data-material="sw-holo"] { --metal-image: linear-gradient(90deg, #a7d2e8, #e0b2d6 28%, #e5ddb3 53%, #a3dacf 76%, #aec8ea); --metal-base: .17; --metal-hover: .3; --detail-base: .32; --detail-hover: .78; --detail-size: calc(32px * var(--grain-scale, 1)) 100%; }
#tilt-card[data-material="angled-pillars"] { --metal-base: .16; --metal-hover: .34; --detail-base: .28; --detail-hover: .72; --detail-size: calc(24px * var(--grain-scale, 1)) calc(24px * var(--grain-scale, 1)); }
#tilt-card[data-material="sun-beam"] { --metal-base: .2; --metal-hover: .46; --detail-base: .12; --detail-hover: .46; --detail-size: 100% 100%; }
#tilt-card[data-material="sun-pillar"] { --metal-base: .28; --metal-hover: .5; --detail-base: .15; --detail-hover: .38; --detail-size: calc(48px * var(--grain-scale, 1)) 100%; }
/* Approved small shared stars are not mixed with an invented second pattern. */
#tilt-card[data-material="sun-pillar"].has-pattern { --detail-base: 0; --detail-hover: 0; --metal-base: .55; --metal-hover: .55; }
#tilt-card[data-material="sun-lava"] { --metal-base: .18; --metal-hover: .34; --detail-base: .2; --detail-hover: .55; --detail-size: calc(42px * var(--grain-scale, 1)) calc(70px * var(--grain-scale, 1)); }
#tilt-card[data-material="tinsel"] { --metal-base: .15; --metal-hover: .3; --detail-base: .24; --detail-hover: .7; --detail-size: calc(64px * var(--grain-scale, 1)) calc(64px * var(--grain-scale, 1)); }
#tilt-card[data-material="squares"] { --metal-base: .16; --metal-hover: .3; --detail-base: .26; --detail-hover: .6; --detail-size: calc(26px * var(--grain-scale, 1)) calc(26px * var(--grain-scale, 1)); }
#tilt-card[data-material="galaxy"] { --metal-image: var(--silver); --metal-base: .12; --metal-hover: .25; --detail-base: .3; --detail-hover: .8; --detail-size: calc(88px * var(--grain-scale, 1)) calc(88px * var(--grain-scale, 1)); }
#tilt-card[data-material="sv-holo"] { --metal-image: linear-gradient(125deg, #6f858e, #c7e3e2 25%, #f0e7eb 48%, #b6c3e0 67%, #778892); --metal-blend: hard-light; --metal-base: .2; --metal-hover: .44; --metal-saturation: .55; }
#tilt-card[data-material="sv-ultra"] { --metal-base: .32; --metal-hover: .54; --metal-size: 260% 260%; --metal-saturation: .85; }
#tilt-card[data-material="sw-secret"] { --metal-image: linear-gradient(115deg, #877757, #efe1b5 24%, #d4ece6 43%, #eccfe5 60%, #f8e9b5 78%, #88785a); --metal-blend: hard-light; --metal-base: .24; --metal-hover: .48; }
#tilt-card[data-material="radiant-holo"] { --metal-base: .18; --metal-hover: .34; --detail-base: .28; --detail-hover: .66; --detail-size: calc(32px * var(--grain-scale, 1)) calc(32px * var(--grain-scale, 1)); }
#tilt-card[data-material="confetti"] { --metal-base: .14; --metal-hover: .3; --detail-base: .25; --detail-hover: .72; --detail-size: calc(110px * var(--grain-scale, 1)) calc(110px * var(--grain-scale, 1)); }
#tilt-card[data-material="ace-foil"] { --metal-image: linear-gradient(115deg, #993564, #ed7eb8 22%, #fae1ef 44%, #ceb4ee 62%, #eb8cc4 80%, #963462); --metal-base: .28; --metal-hover: .52; --metal-saturation: .85; }
#tilt-card[data-material="sv-scodix"] { --metal-image: radial-gradient(ellipse at var(--px) var(--py), #fff, #d9e8ec 16%, #a698b5 32%, #53616c 56%, #c1cbd1 82%); --metal-size: 100% 100%; --metal-blend: soft-light; --metal-base: .22; --metal-hover: .48; }
#tilt-card[data-material="gold-rainbow"] { --metal-image: linear-gradient(115deg, #927541, #f2dfa6 23%, #f9edc8 40%, #d3e4cf 53%, #ecd1c4 66%, #e6d19a 82%, #947641); --metal-base: .25; --metal-hover: .48; --metal-saturation: .85; }
#tilt-card[data-material="solid-color"] { --metal-image: var(--silver); --metal-saturation: 0; --metal-base: .25; --metal-hover: .5; --metal-blend: soft-light; }
#tilt-card[data-material="unknown"] { --metal-base: .2; --metal-hover: .35; --metal-saturation: .65; }

/* Manual comparison does not change identity or turn NonFoil into a holo. */
#tilt-card[data-material][data-preview-mode="rainbow"] { --metal-image: var(--spectrum); --metal-size: 220% 220%; --metal-blend: soft-light; --metal-saturation: 1.1; --metal-base: .55; --metal-hover: .55; --detail-base: 0; --detail-hover: 0; }
#tilt-card[data-preview-mode="rainbow"] > .foil-detail,
#tilt-card[data-preview-mode="rainbow"] > .foil-aux { display: none; }
#tilt-card[data-material="non-foil"] > .layer,
#tilt-card[data-preview-mode="off"] > .layer,
#tilt-card[data-material].no-effects > .layer { display: none; }
.material-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 18px 0; }
.material-controls label { margin: 0; font-size: 11px; color: var(--muted); }
.material-controls select { margin: 6px 0 0; }
.material-controls input[type="range"] { display: block; width: 125px; max-width: 100%; padding: 0; margin-top: 6px; accent-color: var(--accent); }
.material-controls output { color: var(--accent); font-variant-numeric: tabular-nums; }
.material-controls .material-check { display: flex; align-items: center; gap: 6px; }
.material-controls input[type="checkbox"] { width: 16px; margin: 0; }
#material-info { font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
#material-sample { width: 100%; margin: 8px 0 16px; }