/* rip/card-back.css — THE PACK BACK, ONE DESIGN FOR EVERY UNIVERSE (2026-10-06).
 *
 * Aaron: "The Pokémon back of the card is very different to the rest of the
 * universes. Pokémon is the original… I want you to come up with a beautiful card
 * back for every single universe that's universal. But, you must still respect the
 * tiers for graded packs (Pokémon and One Piece). I'd like you to have elements of
 * that universe included into the back of the card, such as a background, but the
 * rest is shared."
 *
 * So this IS the Pokémon back — every value below is what the live Pokémon page
 * computed (its .rip-preview + LUX stack, measured 2026-10-06), lifted out of
 * packs.htm's inline <style> and its gates into one component both packs.htm and
 * rip/lib/universe-page.tpl.php render:
 *
 *   <div class="cb" style="--cb-art:url(…)">
 *     <i class="cb-art"></i><i class="cb-veil"></i><i class="cb-frame"></i><i class="cb-enso"></i>
 *     <div class="cb-top"><b class="cb-name">Pack Dojo</b><span class="cb-sub">… Simulator</span></div>
 *     <i class="cb-sep"></i>
 *     <div class="cb-center"><span class="cb-label">STARTER</span><i class="cb-rule"></i><b class="cb-big">$25</b></div>
 *     <span class="cb-foot">…</span>
 *   </div>
 *
 * WHAT IS PER UNIVERSE, AND ONLY THIS:
 *   --cb-art   the universe's own ground (sim_fun_ground(): images/rip/slab-<key>.webp),
 *              painted in the card's own colour (luminosity blend), so a Sonic back
 *              is Green Hill Zone in Sonic blue and a Neutronium Pokémon pack is
 *              Charizard in Neutronium red.
 *   --tc-*     the colours. A GRADED pack's come from its TIER (packs.htm's
 *              applyTierTheme(), One Piece's band) — the tiers are respected by
 *              construction. A fun pack's are derived from its one accent.
 *   the words  sub-title, label, big line, foot.
 * Everything else — layout, type, ring, frame, veil, gloss — is shared.
 *
 * ⚠ THE CONTAINER OWNS THE BORDER, RADIUS AND MOTION. .slab-back (Pokémon, a 3D
 * flip face) and .fp-pack (universes, charge/suck/beat animations) keep their own
 * border, box-shadow and animations; .cb fills them and draws the face.
 */
.cb {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: flex; flex-direction: column; text-align: center;
  /* A fun pack has one accent (--fp-accent); a graded pack sets --tc-* itself. */
  --cb-c:    var(--tc-border, var(--fp-accent, var(--rip-act, #2dd4bf)));
  --cb-txt:  var(--tc-text,   color-mix(in srgb, var(--cb-c) 55%, #ffffff));
  --cb-bg:   var(--tc-bg,     color-mix(in srgb, var(--cb-c) 26%, #05060b));
  --cb-glow: var(--tc-glow,   color-mix(in srgb, var(--cb-c) 50%, transparent));
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.86) 100%),
    radial-gradient(120% 76% at 50% 34%, var(--cb-glow) 0%, transparent 62%),
    var(--cb-bg);
  transition: background .4s;
}
/* The universe, in the card's colour. Luminosity takes the art's light and dark
   and the colour underneath it, so every universe and every tier stays one
   family — and the type above never has to fight a full-colour photo (the
   reason the old per-tier photo was switched off). */
.cb-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cb-art, none) center / cover no-repeat;
  mix-blend-mode: luminosity; opacity: .52;
  -webkit-mask: radial-gradient(140% 100% at 50% 45%, #000 55%, rgba(0,0,0,.7) 80%, transparent 100%);
          mask: radial-gradient(140% 100% at 50% 45%, #000 55%, rgba(0,0,0,.7) 80%, transparent 100%);
}
/* LUX's ::after: the coloured inner glow and the dark pool behind the price. */
.cb-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 100px var(--cb-glow);
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 24%, transparent 70%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 82% 42% at 50% 64%, rgba(0,0,0,.58) 0%, transparent 72%);
}
/* LUX's ::before: the hairline inner frame and its top sheen. */
.cb-frame {
  position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border: 1px solid var(--cb-c); border-radius: 9px; opacity: .28;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 22%);
}
.cb-enso {
  position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1 / 1; z-index: 2;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .20;
  background: var(--cb-c); transition: background .4s;
  -webkit-mask: url('/rip/enso-brush.webp') center / contain no-repeat;
          mask: url('/rip/enso-brush.webp') center / contain no-repeat;
}
.cb > .cb-top, .cb > .cb-sep, .cb > .cb-center, .cb > .cb-foot { position: relative; z-index: 3; }
.cb-top {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  /* 20% of the WIDTH: the live Pokémon back's 54px on a 260px card, 60px on 300px. */
  padding: calc(20% + 15px) 14px 10px;
  font-family: var(--rip-display, 'Bricolage Grotesque', sans-serif); color: #fff;
}
/* ⚠ ONE SIZE ON EVERY UNIVERSE (2026-10-06). Width-matching it to each subtitle
   made "Pack Dojo" a different size on every pack — Aaron: "You've made the pack
   dojo text different sizes on each universe." It is the size the Pokémon back
   measured to (27.6px: "Pokémon TCG Simulator" at 11px), fixed, everywhere. */
.cb-name {
  font-size: 27.6px; font-weight: 800; line-height: .98;
  letter-spacing: -0.022em; text-shadow: 0 2px 10px rgba(0,0,0,.85); white-space: nowrap;
}
.cb-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .005em; opacity: .9;
  color: var(--cb-txt); white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.95);
}
.cb-sep { display: block; height: 1px; flex-shrink: 0; background: var(--cb-c); opacity: .18; }
.cb-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 10px 16px; min-width: 0;
}
/* ⚠ GRADIENT TEXT NEEDS ITS PADDING, or letter-spaced and italic glyphs get their
   overhang sliced off (root CLAUDE.md). The tracking is padded back on the left
   so the word stays optically centred. */
.cb-label, .cb-big {
  background: linear-gradient(180deg, #fff 0%, var(--cb-txt) 60%, var(--cb-c) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cb-label {
  font-family: var(--rip-display, 'Bricolage Grotesque', sans-serif);
  font-size: var(--cb-lab, 21px); font-weight: 700; letter-spacing: .30em; padding: 0 .06em 0 .30em;
  line-height: 1.5; white-space: nowrap; text-transform: uppercase;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.9));
}
.cb-rule {
  display: block; width: 54px; height: 1px; flex-shrink: 0;
  background: var(--cb-c); opacity: .65; box-shadow: 0 0 10px var(--cb-glow);
}
/* --cb-big is set by card-back.js when a long word (POWER RANGERS) would not fit
   at the price's size; a price never needs it. */
.cb-big {
  font-family: var(--rip-display, 'Bricolage Grotesque', sans-serif);
  font-size: var(--cb-big, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  padding: 0 .14em; white-space: nowrap; font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.92)) drop-shadow(0 0 22px var(--cb-glow));
}
.cb-foot {
  font-family: var(--rip-display, 'Bricolage Grotesque', sans-serif);
  font-size: 8px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cb-c); opacity: .66; padding: 0 12px 11px; transition: color .4s;
}

/* THE MINI CUT — rip/fun.php's 112px hub tile. Same layers and colours; only the
   wordmark and the universe's name, because nothing else is legible at that size. */
.cb--mini .cb-top { padding: 12px 8px 4px; }
.cb--mini .cb-label, .cb--mini .cb-rule, .cb--mini .cb-sub, .cb--mini .cb-foot { display: none; }
.cb--mini .cb-name { font-size: 13px; }
.cb--mini .cb-center { gap: 6px; padding: 6px 8px; }
.cb--mini .cb-big { font-size: var(--cb-big, 17px); white-space: normal; text-wrap: balance; line-height: 1.05; }
.cb--mini .cb-frame { inset: 5px; border-radius: 7px; }

/* ⚠ A UNIVERSE'S NAME IS ONE SIZE ON EVERY UNIVERSE (2026-10-06). Shrinking each
   name to fit put "Marvel" at 60px and "Power Rangers" at 33px — the same
   "different sizes on each universe" Aaron caught on the wordmark. So every name
   is 52px, and a long one takes two balanced lines (Power / Rangers) instead of
   shrinking. 52, not the price's 60, because "Rangers" and "Lorcana" are the
   longest single words and have to fit one line of the card at that size. */
.cb-big--name {
  font-size: 52px; white-space: normal; text-wrap: balance;
  line-height: .98; max-width: 100%;
  /* the gradient once PER LINE, so "Power" and "Rangers" shade alike */
  background-size: 100% .98em; background-repeat: repeat-y;
}

/* ── BONUS PACKS: their own finish (2026-10-08, Aaron: "I wanted it to be its own pack.
   Make it special. Slightly different for founder and anniversary"). packs.htm
   simBonusFace() adds .cb--bonus + the kind, and writes the pack's words into the label
   and the big line. The colours are the card back's own variables, so every layer —
   frame, enso, label gradient, glow — follows; a moving foil sheen sits on top. ── */
.cb--bonus { overflow: hidden; }
.cb--bonus::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.38) 44%, rgba(255,255,255,.08) 52%, transparent 66%);
  background-size: 260% 100%; animation: cb-foil 3.2s linear infinite;
}
@keyframes cb-foil { from { background-position: 140% 0 } to { background-position: -120% 0 } }
.cb--bonus .cb-frame { opacity: .75; border-width: 2px; }
.cb--bonus .cb-enso  { opacity: .32; }

/* Welcome — teal and silver */
.cb--welcome { --cb-c: #5eead4; --cb-txt: #e6fffb; --cb-glow: rgba(45,212,191,.55); }
.cb--welcome .cb-veil { box-shadow: inset 0 0 110px rgba(45,212,191,.55); }

/* Founders — gold leaf with a crest glow */
.cb--founders { --cb-c: #f5c542; --cb-txt: #fff4cf; --cb-glow: rgba(245,197,66,.65); }
.cb--founders .cb-veil { box-shadow: inset 0 0 120px rgba(245,197,66,.6); }
.cb--founders .cb-frame { border-color: #f5c542; box-shadow: 0 0 18px rgba(245,197,66,.55), inset 0 0 12px rgba(245,197,66,.35); }
.cb--founders .cb-label, .cb--founders .cb-big { background-image: linear-gradient(180deg, #fffbe6 0%, #f5c542 55%, #b7791f 100%); }

/* Anniversary — holographic: the whole card shifts through the spectrum */
.cb--anniv { --cb-c: #c084fc; --cb-txt: #ffffff; --cb-glow: rgba(192,132,252,.6); }
.cb--anniv .cb-veil { box-shadow: inset 0 0 120px rgba(192,132,252,.55); }
.cb--anniv .cb-frame { border-image: linear-gradient(135deg, #f472b6, #facc15, #4ade80, #38bdf8, #a78bfa) 1; }
.cb--anniv .cb-label, .cb--anniv .cb-big { background-image: linear-gradient(90deg, #f472b6, #facc15, #4ade80, #38bdf8, #a78bfa, #f472b6); background-size: 200% 100%; animation: cb-holo 4s linear infinite; }
.cb--anniv::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: color-dodge;
  background: conic-gradient(from 0deg, #f472b6, #facc15, #4ade80, #38bdf8, #a78bfa, #f472b6); animation: cb-spin 9s linear infinite;
}
@keyframes cb-holo { to { background-position: 200% 0 } }
@keyframes cb-spin { to { filter: hue-rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .cb--bonus::after, .cb--anniv::before, .cb--anniv .cb-label, .cb--anniv .cb-big { animation: none; } }
/* A bonus pack's words are longer than a tier and a price ("GUARANTEED HIT", "FOUNDERS"),
   so they get their own sizes — measured to fit the card at 390px with room either side. */
.cb--bonus .cb-label { font-size: 14px; letter-spacing: .2em; padding: 0 .06em 0 .2em; }
.cb--bonus .cb-big, .cb--bonus .cb-big--name { font-size: 40px; letter-spacing: .01em; white-space: nowrap; }
/* The holo text's gradient must REPEAT sideways while it slides, or part of a word goes blank
   mid-cycle ("YEAR 1" rendered as "YEAI"). */
.cb--anniv .cb-label, .cb--anniv .cb-big { background-repeat: repeat !important; }
/* The slab's own edge wears the pack's colour, not the tier's. */
.slab-back:has(.cb--welcome)  { border-color: #5eead4 !important; }
.slab-back:has(.cb--founders) { border-color: #f5c542 !important; box-shadow: 0 0 26px rgba(245,197,66,.45), 0 10px 30px rgba(0,0,0,.9) !important; }
.slab-back:has(.cb--anniv)    { border-color: #c084fc !important; box-shadow: 0 0 26px rgba(192,132,252,.5), 0 10px 30px rgba(0,0,0,.9) !important; }