/* Theme cards: every style gets cards whose shape, edge and inside belong to that style, and the words always stay clear.
   Rules for every style: a calm dark reading zone in the middle of the card, effects only around the edges, strong contrast.
   The card shell (svg) is added by /assets/theme-cards.js. Shared by every v2 page through site.css. */
.csd-card > svg.tc-shell{position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;max-width:none;z-index:-1;overflow:visible;pointer-events:none;display:none}

/* ---------- COSMIC: spaceship console panel ---------- */
html[data-universe="cosmic"] .csd-card{
  --cut:18px;
  position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;border-radius:0;color:#e6e2ff;
  transition:transform .25s,filter .25s;
}
html[data-universe="cosmic"] .csd-card > .tc-shell{display:block}
html[data-universe="cosmic"] .tc-shell path{fill:url(#tcCosmicFill);stroke:url(#tcCosmicEdge);stroke-width:1.6;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(130,100,255,.75)) drop-shadow(0 0 16px rgba(51,230,200,.3))}
/* the live space scene inside each card (svg built by theme-cards.js): twinkling stars, drifting nebula, comets with glowing tails */
.tc-sky{display:none}
html[data-universe="cosmic"] .tc-sky{display:inline}
.tc-star{animation:tcTw var(--t,3s) ease-in-out infinite alternate;animation-delay:var(--o,0s)}
@keyframes tcTw{from{opacity:.2}to{opacity:1}}
.tc-neb{filter:blur(30px);transform-box:fill-box;transform-origin:center;animation:tcNeb 14s ease-in-out infinite alternate}
.tc-neb2{animation-duration:19s;animation-direction:alternate-reverse}
@keyframes tcNeb{from{transform:translate(0,0) scale(1)}to{transform:translate(-22px,12px) scale(1.15)}}
.tc-comet-fly{opacity:0;filter:drop-shadow(0 0 4px #7ff3e0) drop-shadow(0 0 10px rgba(123,97,255,.8));animation:tcFly var(--cd,8s) linear infinite;animation-delay:var(--co,0s)}
@keyframes tcFly{0%{transform:translate(0,0);opacity:0}2%{opacity:1}21%{opacity:1}24%{transform:translate(var(--dx),var(--dy));opacity:0}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
/* the words stay crisp over the moving sky */
html[data-universe="cosmic"] .csd-card h2,html[data-universe="cosmic"] .csd-card h3,html[data-universe="cosmic"] .csd-card p,html[data-universe="cosmic"] .csd-card li,html[data-universe="cosmic"] .csd-card b{text-shadow:0 1px 3px rgba(0,0,0,.75)}
html[data-universe="cosmic"] a.csd-card:hover,html[data-universe="cosmic"] .mt:hover{transform:translateY(-3px);filter:brightness(1.12)}
/* clear, strong words on the dark console */
html[data-universe="cosmic"] .csd-card h2,html[data-universe="cosmic"] .csd-card h3,html[data-universe="cosmic"] .csd-card b{color:#fff}
html[data-universe="cosmic"] .csd-card .muted,html[data-universe="cosmic"] .csd-card small,html[data-universe="cosmic"] .csd-card .note,html[data-universe="cosmic"] .csd-card span:not(.p):not(.price):not(.uc-clip):not(.uc-tape){color:#c4bdf0}
html[data-universe="cosmic"] .csd-card li,html[data-universe="cosmic"] .csd-card p{color:#d3cdfa}
html[data-universe="cosmic"] .csd-card .p,html[data-universe="cosmic"] .csd-card .price{color:#33e6c8}
html[data-universe="cosmic"] .csd-card .link,html[data-universe="cosmic"] .csd-card a:not(.btn):not(.buy):not(.gx):not(.csd-card){color:#5ff0d6}
html[data-universe="cosmic"] .csd-card .btn-ghost{color:#e6e2ff;border-color:rgba(51,230,200,.6);background:transparent}


/* ---------- INFERNO: charred forged plate ---------- */
html[data-universe="inferno"] .csd-card{
  position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;border-radius:0;color:#ffe9da;
  transition:transform .25s,filter .25s;
}
html[data-universe="inferno"] .csd-card > .tc-shell{display:block}
html[data-universe="inferno"] .tc-shell path{fill:url(#tcInfernoFill);stroke:url(#tcInfernoEdge);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(255,90,31,.8)) drop-shadow(0 0 16px rgba(255,60,20,.35))}
/* embers drifting up from the bottom (they fade out before the middle, so the words stay on calm dark metal) */
html[data-universe="inferno"] .csd-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 14% 30%,#ffd27a,transparent),radial-gradient(1.2px 1.2px at 42% 70%,#ff8a3d,transparent),
    radial-gradient(2px 2px at 71% 18%,#ffb347,transparent),radial-gradient(1.3px 1.3px at 88% 56%,#ff6a2a,transparent),
    radial-gradient(1.5px 1.5px at 28% 88%,#ffd27a,transparent),radial-gradient(1.1px 1.1px at 60% 44%,#ff9a4a,transparent);
  background-size:180px 160px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 22%,transparent 48%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 22%,transparent 48%);
  animation:tcEmbers 7s linear infinite;animation-delay:var(--tc-d,0s);
}
@keyframes tcEmbers{from{background-position:0 0}to{background-position:24px -160px}}
/* a low fire glow flickering along the bottom edge only */
html[data-universe="inferno"] .csd-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 100%,rgba(255,90,20,.32),rgba(255,40,10,.1) 55%,transparent 75%);
  animation:tcFlicker 2.6s ease-in-out infinite;animation-delay:var(--tc-d,0s);
}
@keyframes tcFlicker{0%,100%{opacity:.75}20%{opacity:1}35%{opacity:.6}55%{opacity:.95}70%{opacity:.7}85%{opacity:1}}
html[data-universe="inferno"] a.csd-card:hover,html[data-universe="inferno"] .mt:hover{transform:translateY(-3px);filter:brightness(1.15)}
html[data-universe="inferno"] .csd-card h2,html[data-universe="inferno"] .csd-card h3,html[data-universe="inferno"] .csd-card b{color:#fff4ea;text-shadow:none}
html[data-universe="inferno"] .csd-card .muted,html[data-universe="inferno"] .csd-card small,html[data-universe="inferno"] .csd-card .note,html[data-universe="inferno"] .csd-card span:not(.p):not(.price):not(.uc-clip):not(.uc-tape){color:#f3cdb0}
html[data-universe="inferno"] .csd-card li,html[data-universe="inferno"] .csd-card p{color:#f6d6c0}
html[data-universe="inferno"] .csd-card .p,html[data-universe="inferno"] .csd-card .price{color:#ffb347}
html[data-universe="inferno"] .csd-card .link,html[data-universe="inferno"] .csd-card a:not(.btn):not(.buy):not(.gx):not(.csd-card){color:#ffb347}
html[data-universe="inferno"] .csd-card .btn-ghost{color:#ffe9da;border-color:rgba(255,140,60,.7);background:transparent}


/* ---------- LUXE: engraved black-and-gold invitation ---------- */
.tc-inner{display:none}
html[data-universe="luxe"] .csd-card{position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;border-radius:0;color:#f3ead2;transition:transform .3s,filter .3s}
html[data-universe="luxe"] .csd-card > .tc-shell{display:block}
html[data-universe="luxe"] .tc-sky{display:inline}
html[data-universe="luxe"] .tc-shell > path:first-child{fill:url(#tcLuxeFill);stroke:url(#tcLuxeEdge);stroke-width:1.3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(232,193,74,.35)) drop-shadow(0 10px 22px rgba(0,0,0,.45))}
html[data-universe="luxe"] .tc-inner{display:inline;fill:none;stroke:rgba(232,193,74,.5);stroke-width:.8;vector-effect:non-scaling-stroke}
.tc-sheen{animation:tcSheen 9s ease-in-out infinite;animation-delay:var(--tc-d,0s)}
@keyframes tcSheen{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(var(--sw))}}
.tc-dust{opacity:0;animation:tcDust var(--t,9s) linear infinite;animation-delay:var(--o,0s)}
@keyframes tcDust{0%{transform:translateY(0);opacity:0}15%{opacity:.9}80%{opacity:.6}100%{transform:translateY(var(--up));opacity:0}}
html[data-universe="luxe"] a.csd-card:hover,html[data-universe="luxe"] .mt:hover{transform:translateY(-3px);filter:brightness(1.12)}
html[data-universe="luxe"] .csd-card h2,html[data-universe="luxe"] .csd-card h3,html[data-universe="luxe"] .csd-card b{color:#fbf3dd;text-shadow:0 1px 3px rgba(0,0,0,.6)}
html[data-universe="luxe"] .csd-card p,html[data-universe="luxe"] .csd-card li{color:#e6dbbd}
html[data-universe="luxe"] .csd-card .muted,html[data-universe="luxe"] .csd-card small,html[data-universe="luxe"] .csd-card .note,html[data-universe="luxe"] .csd-card span:not(.p):not(.price):not(.uc-clip):not(.uc-tape){color:#cfc19c}
html[data-universe="luxe"] .csd-card .p,html[data-universe="luxe"] .csd-card .price{color:#f0cc66}
html[data-universe="luxe"] .csd-card .link,html[data-universe="luxe"] .csd-card a:not(.btn):not(.buy):not(.gx):not(.panel){color:#f0cc66}
html[data-universe="luxe"] .csd-card .btn-ghost{color:#f3ead2;border-color:rgba(232,193,74,.6);background:transparent}

@media (prefers-reduced-motion:reduce){
  .tc-star,.tc-neb,.tc-comet-fly,.tc-sheen,.tc-dust,html[data-universe="inferno"] .csd-card::before,html[data-universe="inferno"] .csd-card::after{animation:none}
}
/* the small pill labels and tags match each style too */
html[data-universe="luxe"] .rules span,html[data-universe="luxe"] .jump a{background:rgba(15,12,7,.82);color:#f3ead2;border:1px solid rgba(232,193,74,.55);box-shadow:0 0 10px rgba(232,193,74,.15)}
html[data-universe="luxe"] .eyebrow{background:rgba(15,12,7,.82);color:#f0cc66;border:1px solid rgba(232,193,74,.55)}
html[data-universe="inferno"] .rules span,html[data-universe="inferno"] .jump a{background:rgba(30,8,3,.82);color:#ffe9da;border:1px solid rgba(255,120,50,.6);box-shadow:0 0 12px rgba(255,90,31,.25)}
html[data-universe="inferno"] .eyebrow{background:rgba(30,8,3,.82);color:#ffb347;border:1px solid rgba(255,120,50,.6)}