/* holocards.css -- Critter Cove Holo-Cards: a holographic trading-card layer.
   Owns: .cc-holo-* (overlay gallery, foil cards, tilt/shine, pack-open reveal).
   Additive -- depends only on the :root --cc-* design tokens from funzone.css.
   The foil look is built from layered blended gradients driven by CSS custom props
   the JS writes per pointer/gyro frame: --px/--py (sheen origin), --o (glare alpha),
   --rx/--ry (3D tilt). Everything composites on the GPU for a smooth ~60fps tilt. */

/* ============================ entry shelf (in the Cove) ============================ */
.cc-holo-shelf {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--cc-r-md, 16px);
  cursor: pointer;
  color: var(--cc-ink, #eaf2ff);
  background:
    linear-gradient(100deg, rgba(69, 231, 255, 0.16), rgba(155, 108, 255, 0.16) 50%, rgba(255, 95, 210, 0.16)),
    var(--cc-surface, rgba(20, 34, 79, 0.55));
  border: 1px solid var(--cc-stroke-hi, rgba(160, 210, 255, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--cc-fast, 160ms) var(--cc-ease, ease), box-shadow var(--cc-med, 320ms);
}
.cc-holo-shelf:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(155, 108, 255, 0.6); }
.cc-holo-shelf__ico {
  flex: none; font-size: 1.7rem; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(155, 108, 255, 0.6));
}
.cc-holo-shelf__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cc-holo-shelf__title {
  font-size: 1.02rem; font-weight: 800;
  background: linear-gradient(95deg, var(--cc-cyan, #45e7ff), var(--cc-magenta, #ff5fd2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cc-holo-shelf__sub { font-size: 0.76rem; color: var(--cc-ink-dim, #9fb2d8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-holo-shelf__btn {
  flex: none;
  padding: 9px 14px; min-height: var(--cc-touch, 44px);
  border-radius: 99px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 0.84rem; color: #0b0f22;
  background: linear-gradient(95deg, var(--cc-cyan, #45e7ff), var(--cc-violet, #9b6cff));
  box-shadow: 0 6px 16px -6px var(--cc-cyan, #45e7ff);
  transition: transform var(--cc-fast, 160ms) var(--cc-ease, ease);
}
.cc-holo-shelf__btn:hover { transform: scale(1.05); }
.cc-holo-shelf__btn:focus-visible { outline: 3px solid var(--cc-cyan, #45e7ff); outline-offset: 2px; }
.cc-holo-shelf.has-new { animation: cc-holo-shelf-pulse 1.8s var(--cc-ease, ease) infinite; }
.cc-holo-shelf.has-new .cc-holo-shelf__btn { background: linear-gradient(95deg, var(--cc-magenta, #ff5fd2), var(--cc-gold, #ffd45e)); }
@keyframes cc-holo-shelf-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 0 rgba(255, 95, 210, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 22px -2px rgba(255, 95, 210, 0.7); }
}
@media (max-width: 420px) { .cc-holo-shelf__sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-holo-shelf.has-new { animation: none; } }

/* ============================ overlay + panel ============================ */
.cc-holo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 100% at 50% -10%, rgba(40, 22, 90, 0.72), rgba(7, 11, 30, 0.92));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: cc-holo-fade var(--cc-med, 320ms) var(--cc-ease, ease) both;
}
@keyframes cc-holo-fade { from { opacity: 0; } to { opacity: 1; } }

.cc-holo {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--cc-r-lg, 24px);
  background: linear-gradient(180deg, var(--cc-surface-2, rgba(13, 22, 56, 0.78)), rgba(10, 16, 40, 0.92));
  border: 1px solid var(--cc-stroke-hi, rgba(160, 210, 255, 0.55));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: cc-holo-rise var(--cc-med, 320ms) var(--cc-ease, ease) both;
}
@keyframes cc-holo-rise { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

.cc-holo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--cc-stroke, rgba(122, 162, 247, 0.28));
}
.cc-holo-title {
  margin: 0;
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(95deg, var(--cc-cyan, #45e7ff), var(--cc-violet, #9b6cff) 45%, var(--cc-magenta, #ff5fd2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cc-cyan, #45e7ff);
  filter: drop-shadow(0 1px 6px rgba(155, 108, 255, 0.4));
}
.cc-holo-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--cc-ink-dim, #9fb2d8); }

.cc-holo-x {
  flex: none;
  width: var(--cc-touch, 44px); height: var(--cc-touch, 44px);
  border-radius: 50%;
  border: 1px solid var(--cc-stroke, rgba(122, 162, 247, 0.28));
  background: var(--cc-surface, rgba(20, 34, 79, 0.55));
  color: var(--cc-ink, #eaf2ff);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: transform var(--cc-fast, 160ms) var(--cc-ease, ease), background var(--cc-fast, 160ms);
}
.cc-holo-x:hover { transform: scale(1.08) rotate(90deg); background: rgba(255, 95, 210, 0.22); }
.cc-holo-x:focus-visible { outline: 3px solid var(--cc-cyan, #45e7ff); outline-offset: 2px; }

.cc-holo-progress { padding: 10px 18px 0; }
.cc-holo-progress__bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--cc-stroke, rgba(122, 162, 247, 0.28));
}
.cc-holo-progress__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--cc-cyan, #45e7ff), var(--cc-violet, #9b6cff), var(--cc-magenta, #ff5fd2));
  box-shadow: 0 0 12px rgba(69, 231, 255, 0.6);
  transition: width var(--cc-med, 320ms) var(--cc-ease, ease);
}

/* ============================ grid ============================ */
.cc-holo-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 18px;
  perspective: 1100px;
}
.cc-holo-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--cc-ink-dim, #9fb2d8);
  padding: 24px 12px;
  font-size: 0.95rem;
}

/* ============================ the card ============================ */
.cc-holo-card {
  --px: 50%; --py: 45%; --o: 0; --rx: 0deg; --ry: 0deg;
  --rar: var(--cc-rar-common, #9fb2d8);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 800px;
  -webkit-tap-highlight-color: transparent;
}
.cc-holo-card:focus-visible { outline: none; }
.cc-holo-card:focus-visible .cc-holo-card__inner {
  outline: 3px solid var(--cc-cyan, #45e7ff);
  outline-offset: 3px;
}

.cc-holo-card__inner {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 420ms var(--cc-ease, cubic-bezier(0.22, 1, 0.36, 1));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    var(--cc-surface-2, rgba(13, 22, 56, 0.92));
  border: 1.5px solid color-mix(in srgb, var(--rar) 60%, rgba(255, 255, 255, 0.25));
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 22px -6px var(--rar);
  display: flex;
  flex-direction: column;
}
.cc-holo-card.is-tilting .cc-holo-card__inner { transition: none; }
.cc-holo-card:hover .cc-holo-card__inner { box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 30px -4px var(--rar); }

/* rarity background tint behind the art */
.cc-holo-rarbg-common .cc-holo-card__inner   { background: linear-gradient(180deg, rgba(159,178,216,0.16), rgba(13,22,56,0.95)); }
.cc-holo-rarbg-rare .cc-holo-card__inner      { background: linear-gradient(180deg, rgba(69,231,255,0.18), rgba(8,20,46,0.95)); }
.cc-holo-rarbg-epic .cc-holo-card__inner      { background: linear-gradient(180deg, rgba(155,108,255,0.20), rgba(20,10,46,0.95)); }
.cc-holo-rarbg-legendary .cc-holo-card__inner { background: linear-gradient(180deg, rgba(255,212,94,0.20), rgba(40,26,8,0.95)); }
.cc-holo-rarbg-secret .cc-holo-card__inner    { background: linear-gradient(180deg, rgba(255,95,210,0.20), rgba(36,8,40,0.95)); }

/* ---- foil: the holographic diffraction stripes (the signature look) ---- */
.cc-holo-card__foil {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: color-dodge;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 0, 132, 0.5) 0%,
      rgba(255, 214, 0, 0.5) 12%,
      rgba(0, 255, 170, 0.5) 24%,
      rgba(0, 170, 255, 0.5) 36%,
      rgba(180, 0, 255, 0.5) 48%,
      rgba(255, 0, 132, 0.5) 60%
    );
  background-size: 220% 220%;
  background-position: var(--px) var(--py);
  transition: opacity var(--cc-med, 320ms) ease;
  -webkit-mask-image: radial-gradient(120% 120% at var(--px) var(--py), #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
  mask-image: radial-gradient(120% 120% at var(--px) var(--py), #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
}
/* per-rarity foil character */
.cc-holo-rarbg-common .cc-holo-card__foil   { opacity: 0.28; mix-blend-mode: overlay; }
.cc-holo-rarbg-rare .cc-holo-card__foil      { opacity: 0.5; }
.cc-holo-rarbg-epic .cc-holo-card__foil      { opacity: 0.6; }
.cc-holo-rarbg-legendary .cc-holo-card__foil { opacity: 0.68; }
.cc-holo-rarbg-secret .cc-holo-card__foil    { opacity: 0.8; animation: cc-holo-hue 6s linear infinite; }
@keyframes cc-holo-hue { to { filter: hue-rotate(360deg); } }

/* legendary + secret get a gentle always-on shimmer so they read as "special" at rest */
.cc-holo-rarbg-legendary .cc-holo-card__glow,
.cc-holo-rarbg-secret .cc-holo-card__glow { animation: cc-holo-breathe 3.4s var(--cc-ease, ease) infinite; }
@keyframes cc-holo-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }

/* ---- rarity glow corner ---- */
.cc-holo-card__glow {
  position: absolute; inset: -1px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--rar) 55%, transparent), transparent 70%);
  opacity: 0.55;
}

/* ---- glare / shine that tracks the pointer ---- */
.cc-holo-card__shine {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    circle at var(--px) var(--py),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.25) 14%,
    transparent 38%
  );
  mix-blend-mode: soft-light;
  opacity: var(--o);
  transition: opacity var(--cc-med, 320ms) ease;
}

/* ---- drifting glitter ---- */
.cc-holo-card__sparkle {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: calc(var(--o) * 0.9 + 0.12);
  mix-blend-mode: screen;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1.4px);
  background-size: 34px 34px, 21px 21px;
  background-position: var(--px) var(--py), calc(100% - var(--px)) calc(100% - var(--py));
  transition: opacity var(--cc-med, 320ms) ease;
}

/* ---- card chrome (text) above the foil ---- */
.cc-holo-card__top {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 4px;
  font-size: 0.66rem; font-weight: 700;
  color: var(--cc-ink, #eaf2ff);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cc-holo-card__num { letter-spacing: 0.5px; opacity: 0.92; }
.cc-holo-card__num small { opacity: 0.6; font-weight: 600; }
.cc-holo-card__type {
  padding: 2px 7px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.cc-holo-card__art {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 6px;
  min-height: 0;
}
.cc-holo-card__art svg { width: auto; height: 100%; max-height: 150px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }

.cc-holo-card__plate {
  position: relative; z-index: 6;
  margin: 4px;
  padding: 7px 9px 9px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(10, 14, 34, 0.66), rgba(10, 14, 34, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
}
.cc-holo-card__namerow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cc-holo-card__name {
  font-weight: 800; font-size: 0.84rem; color: var(--cc-ink, #eaf2ff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-holo-card__rar {
  flex: none;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 99px;
  color: #0b0f22;
  background: var(--rar);
  box-shadow: 0 0 10px -2px var(--rar);
}
.cc-holo-rar-common    { background: var(--cc-rar-common, #9fb2d8) !important; }
.cc-holo-rar-rare      { background: var(--cc-rar-rare, #45e7ff) !important; }
.cc-holo-rar-epic      { background: var(--cc-rar-epic, #9b6cff) !important; color: #fff !important; }
.cc-holo-rar-legendary { background: var(--cc-rar-legendary, #ffd45e) !important; }
.cc-holo-rar-secret    { background: linear-gradient(95deg, #ff5fd2, #ffd45e, #45e7ff) !important; color: #0b0f22 !important; }
.cc-holo-pct { font-weight: 700; opacity: 0.7; }

.cc-holo-stats { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 4px; }
.cc-holo-stat { display: grid; grid-template-columns: 16px 1fr 1fr auto; align-items: center; gap: 6px; font-size: 0.62rem; }
.cc-holo-stat__ico { text-align: center; }
.cc-holo-stat__lbl { color: var(--cc-ink-dim, #9fb2d8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-holo-stat__bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cc-holo-stat__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 70%, #fff), var(--rar));
  box-shadow: 0 0 6px -1px var(--rar);
}
.cc-holo-stat__val { font-weight: 800; color: var(--cc-ink, #eaf2ff); font-variant-numeric: tabular-nums; }
.cc-holo-card__flavour { margin: 7px 0 0; font-size: 0.6rem; font-style: italic; color: var(--cc-ink-dim, #9fb2d8); line-height: 1.35; }

/* ---- NEW ribbon ---- */
.cc-holo-card__newflag {
  position: absolute; z-index: 7;
  top: 9px; left: -28px;
  transform: rotate(-45deg);
  background: linear-gradient(90deg, var(--cc-magenta, #ff5fd2), var(--cc-gold, #ffd45e));
  color: #0b0f22; font-size: 0.55rem; font-weight: 900; letter-spacing: 1px;
  padding: 3px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.cc-holo-card.is-new .cc-holo-card__inner { animation: cc-holo-newpulse 1.8s var(--cc-ease, ease) infinite; }
@keyframes cc-holo-newpulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 18px -6px var(--rar); }
  50% { box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 30px 0 var(--rar); }
}

/* ============================ locked silhouette ============================ */
.cc-holo-card.is-locked { cursor: default; }
.cc-holo-card.is-locked .cc-holo-card__inner {
  background: linear-gradient(180deg, rgba(20, 26, 54, 0.85), rgba(8, 12, 30, 0.95));
  border-color: rgba(122, 162, 247, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  filter: saturate(0.4);
}
.cc-holo-card__art--locked { position: relative; }
.cc-holo-card__art--locked svg { fill: rgba(122, 162, 247, 0.22); width: 70%; height: auto; }
.cc-holo-card__q {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 900; color: rgba(159, 178, 216, 0.5);
}
.cc-holo-card__name--locked { color: var(--cc-ink-dim, #9fb2d8); font-style: italic; font-weight: 600; }

/* ============================ detail / pack-open reveal ============================ */
.cc-holo-detail-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 20px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(30, 14, 70, 0.6), rgba(5, 8, 22, 0.9));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: cc-holo-fade 240ms ease both;
}
.cc-holo-detail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.cc-holo-detail__x {
  position: absolute; top: -8px; right: -8px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cc-stroke-hi, rgba(160, 210, 255, 0.55));
  background: var(--cc-surface-2, rgba(13, 22, 56, 0.9)); color: var(--cc-ink, #eaf2ff);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.cc-holo-detail__x:focus-visible { outline: 3px solid var(--cc-cyan, #45e7ff); outline-offset: 2px; }
.cc-holo-detail__stage { perspective: 1200px; }
.cc-holo-card--big {
  width: min(340px, 80vw);
  aspect-ratio: 5 / 7;
  position: relative;
  animation: cc-holo-pop 420ms var(--cc-ease, ease) both;
}
@keyframes cc-holo-pop { from { transform: scale(0.6) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-holo-card--big .cc-holo-card__art svg { max-height: 220px; }
.cc-holo-detail__hint { margin: 0; text-align: center; font-size: 0.82rem; color: var(--cc-ink-dim, #9fb2d8); max-width: 320px; }

/* the sweep band that crosses the foil on pack-open */
.cc-holo-card__sweep {
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none; opacity: 0;
  border-radius: 16px;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0.95) 50%, transparent 70%);
  background-size: 280% 100%;
  mix-blend-mode: overlay;
}
.cc-holo-card--big.is-revealing .cc-holo-card__sweep { animation: cc-holo-sweep 1100ms var(--cc-ease, ease) both; }
@keyframes cc-holo-sweep {
  0% { opacity: 0; background-position: 140% 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}
.cc-holo-card--big.is-revealing .cc-holo-card__inner { animation: cc-holo-revspin 1100ms var(--cc-ease, ease) both; }
@keyframes cc-holo-revspin {
  0% { transform: rotateY(-22deg) scale(0.96); }
  60% { transform: rotateY(12deg) scale(1.02); }
  100% { transform: none; }
}

/* ============================ mobile gyro (group sheen) ============================ */
/* When the gyro is active, cards not being individually touched share the device tilt. */
.cc-holo-gyro { --gpx: 50%; --gpy: 45%; --go: 0; --grx: 0deg; --gry: 0deg; }
.cc-holo-gyro .cc-holo-card:not(.is-tilting) .cc-holo-card__inner { transform: rotateX(var(--grx)) rotateY(var(--gry)); }
.cc-holo-gyro .cc-holo-card:not(.is-tilting) .cc-holo-card__foil { background-position: var(--gpx) var(--gpy); -webkit-mask-image: radial-gradient(120% 120% at var(--gpx) var(--gpy), #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%); mask-image: radial-gradient(120% 120% at var(--gpx) var(--gpy), #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%); }
.cc-holo-gyro .cc-holo-card:not(.is-tilting) .cc-holo-card__shine { background: radial-gradient(circle at var(--gpx) var(--gpy), rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 14%, transparent 38%); opacity: var(--go); }

/* ============================ responsive ============================ */
@media (max-width: 560px) {
  .cc-holo-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; padding: 14px; }
  .cc-holo-card__art svg { max-height: 118px; }
  .cc-holo-card__name { font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .cc-holo-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================ reduced motion ============================ */
.cc-holo-reduced .cc-holo-card__inner,
.cc-holo-reduced .cc-holo-card--big,
.cc-holo-reduced .cc-holo-card__sweep,
.cc-holo-reduced .cc-holo-card__foil,
.cc-holo-reduced .cc-holo-card__glow,
.cc-holo-reduced .cc-holo,
.cc-holo-reduced .cc-holo-overlay { animation: none !important; }
.cc-holo-reduced .cc-holo-card__inner { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cc-holo-card__inner, .cc-holo-card--big, .cc-holo-card__sweep,
  .cc-holo-rarbg-secret .cc-holo-card__foil,
  .cc-holo-rarbg-legendary .cc-holo-card__glow,
  .cc-holo-rarbg-secret .cc-holo-card__glow { animation: none !important; }
  .cc-holo-card__inner { transition: none !important; }
}