.card[data-themed] {
  background: linear-gradient(110deg, color-mix(in srgb, var(--secondary, #6E56C9) 38%, #0B0A0D), rgba(12, 10, 16, .94) 62%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #A88BF5) 55%, transparent), 0 18px 44px rgba(0, 0, 0, .45);
}
a.card[data-themed]:hover {
  box-shadow: inset 0 0 0 1px var(--accent, #FF7A1A), 0 26px 56px rgba(0, 0, 0, .55), 0 0 44px color-mix(in srgb, var(--accent, #FF7A1A) 32%, transparent);
}
.card[data-themed] .card-icon { background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #FF7A1A) 60%, #fff), var(--accent, #FF7A1A)); }
.card[data-themed] .chip.witch, .card[data-themed] .chip.pumpkin {
  color: color-mix(in srgb, var(--accent, #FFB27A) 70%, #fff);
  border-color: color-mix(in srgb, var(--accent, #FF7A1A) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #FF7A1A) 14%, #0B0A0D);
}
.card[data-themed]::after { background: radial-gradient(circle, color-mix(in srgb, var(--secondary, #6E56C9) 55%, transparent), transparent 70%); }

.card-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(1.15); pointer-events: none; }
.card-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 8, 14, .92) 8%, rgba(10, 8, 14, .55) 55%, rgba(10, 8, 14, .25)); pointer-events: none; }
.card-tagline { margin-top: 2px; font-weight: 600; color: color-mix(in srgb, var(--accent, #FFB27A) 75%, #fff); }

.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.fx::before, .fx::after { content: ""; position: absolute; inset: -50% 0; }

.fx-embers::before {
  background-image:
    radial-gradient(circle, var(--accent, #FF7A1A) 0 1.6px, transparent 2px),
    radial-gradient(circle, var(--secondary, #FFD27A) 0 1.2px, transparent 1.6px);
  background-size: 120px 140px, 170px 190px; background-position: 10px 0, 60px 40px;
  animation: rise-up 9s linear infinite; opacity: .8;
}
.fx-embers::after {
  background-image: radial-gradient(circle, var(--accent, #FFB27A) 0 1px, transparent 1.4px);
  background-size: 90px 110px; animation: rise-up 6s linear infinite; opacity: .6;
}
.fx-snow::before {
  background-image: radial-gradient(circle, #fff 0 1.8px, transparent 2.2px), radial-gradient(circle, #dfe9ff 0 1.2px, transparent 1.6px);
  background-size: 100px 120px, 140px 160px; animation: fall 12s linear infinite; opacity: .85;
}
.fx-snow::after { background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px); background-size: 70px 90px; animation: fall 8s linear infinite; opacity: .6; }
.fx-stars::before {
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px), radial-gradient(circle, var(--accent, #FFD27A) 0 1.4px, transparent 1.8px);
  background-size: 64px 54px, 110px 96px; background-position: 0 0, 30px 20px; inset: 0; animation: twinkle 3.2s ease-in-out infinite;
}
.fx-stars::after {
  background-image: radial-gradient(circle, #fff 0 .8px, transparent 1.2px); background-size: 41px 37px; inset: 0;
  animation: twinkle 2.1s ease-in-out infinite reverse;
}
.fx-rain::before {
  background-image: linear-gradient(105deg, transparent 46%, color-mix(in srgb, var(--accent, #8FB8FF) 70%, #fff) 50%, transparent 54%);
  background-size: 26px 62px; animation: rain 1.1s linear infinite; opacity: .45;
}
.fx-rain::after {
  background-image: linear-gradient(105deg, transparent 47%, rgba(190, 215, 255, .8) 50%, transparent 53%);
  background-size: 40px 90px; animation: rain 1.7s linear infinite; opacity: .3;
}
.fx-aurora::before {
  inset: -40%; background: conic-gradient(from 0deg, var(--accent, #5BD38A), var(--secondary, #6E56C9), var(--accent, #5BD38A));
  filter: blur(46px); opacity: .34; animation: spin-slow 18s linear infinite;
}
.fx-aurora::after { inset: 0; background: linear-gradient(180deg, transparent, rgba(8, 6, 12, .55)); }
.fx-pulse::before {
  inset: 0; border-radius: inherit; box-shadow: inset 0 0 60px var(--accent, #FF7A1A); opacity: .35; animation: breathe 3.4s ease-in-out infinite;
}
.fx-pulse::after { inset: 0; background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--accent, #FF7A1A) 32%, transparent), transparent 60%); animation: breathe 3.4s ease-in-out infinite reverse; opacity: .6; }

.card > .card-icon, .card > .card-body, .card > .card-side { position: relative; z-index: 1; }

@keyframes rise-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes fall { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes rain { from { background-position: 0 0; } to { background-position: -14px 90px; } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }

.fx-demo { position: relative; width: 100%; height: 74px; border-radius: 16px; background: #0f0c15; border: 1px solid var(--hairline); overflow: hidden; }
.anim-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.anim-picks button {
  display: grid; gap: 6px; padding: 8px; border-radius: 18px; border: 1px solid var(--hairline); background: rgba(11, 10, 13, .6);
  cursor: pointer; text-align: center; font-weight: 700; font-size: 13px; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.anim-picks button:hover { transform: translateY(-2px); border-color: var(--witch); }
.anim-picks button[aria-pressed="true"] { border-color: var(--pumpkin); box-shadow: 0 0 0 2px rgba(255, 122, 26, .35); }
.colors { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.color-pick { display: flex; align-items: center; gap: 10px; }
.color-pick input[type="color"] { width: 54px; height: 42px; padding: 3px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.shot { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); border: 1px solid var(--hairline); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot button { position: absolute; top: 8px; right: 8px; }
.banner-preview { width: 100%; aspect-ratio: 16 / 5; border-radius: 18px; object-fit: cover; display: block; margin-bottom: 12px; border: 1px solid var(--hairline); }
.link-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; margin-bottom: 10px; }
@media (max-width: 640px) { .link-row { grid-template-columns: 1fr; } }