/* Card faces (all 8 rarities) and the pack-opening reveal. */
/* isolation: the face's own layers (e.g. the 天選 rainbow frame, z-index 2) stack inside the card, never over badges around it */
.pc-face { position:absolute; inset:0; border-radius: 10px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; padding: 7px 7px 8px;
  --mix: 38%; --bw: 3px; --sat: 60%;
  background: linear-gradient(170deg, color-mix(in srgb, var(--rc) var(--mix), #0f212e), #0b1822 75%); box-shadow: inset 0 0 0 var(--bw) var(--rc), var(--glow, 0 0 0 transparent); }
/* detail rises gently with rarity */
.pc-t0 { --mix: 9%; --bw: 2px; --sat: 16%; }
.pc-t1 { --mix: 15%; --bw: 2px; --sat: 26%; }
.pc-t2 { --mix: 24%; --bw: 2px; --sat: 42%; --glow: inset 0 0 10px color-mix(in srgb, var(--rc) 35%, transparent); }
.pc-t3 { --mix: 32%; --bw: 3px; --sat: 52%; --glow: inset 0 0 16px color-mix(in srgb, var(--rc) 50%, transparent); }
.pc-t4 { --mix: 36%; --bw: 3px; --sat: 60%; --glow: inset 0 0 14px color-mix(in srgb, var(--rc) 45%, transparent); }
.pc-t5 { --mix: 42%; --sat: 64%; }
.pc-t6 { --mix: 44%; --sat: 66%; }
.pc-t7 { --mix: 46%; --sat: 72%; box-shadow: inset 0 0 0 calc(var(--f1) + var(--f2)) rgba(0,0,0,.6), inset 0 0 26px color-mix(in srgb, var(--rc) 65%, transparent); }
/* 神話 / 至尊 / 天選: a double frame — outer band, dark gap, bright inner line. --f1/--f2/--f3 are the three widths. */
.pc-t5, .pc-t6, .pc-t7 { --f1: 3px; --f2: 2px; --f3: 2px; padding: calc(var(--f1) + var(--f2) + var(--f3) + 3px); }
.pc-t5, .pc-t6 { box-shadow: inset 0 0 0 var(--f1) var(--rc), inset 0 0 0 calc(var(--f1) + var(--f2)) rgba(0,0,0,.6),
  inset 0 0 0 calc(var(--f1) + var(--f2) + var(--f3)) var(--inner), inset 0 0 0 calc(var(--f1) + var(--f2) + var(--f3) + 1px) rgba(0,0,0,.35), var(--fglow); }
.pc-t5 { --inner: color-mix(in srgb, var(--rc) 70%, #fff); --fglow: inset 0 0 14px 6px color-mix(in srgb, var(--rc) 70%, transparent); }
.pc-t6 { --inner: #ffe39a; --fglow: inset 0 0 22px color-mix(in srgb, var(--rc) 60%, transparent); }
.cd-card .pc-face { --f1: 4px; --f2: 3px; --f3: 3px; }
.sc-mini .pc-face { --f1: 2px; --f2: 1px; --f3: 1.5px; }
/* corner ornaments: 稀有 gets small dots, 史詩 gets diamonds */
.pc-t2::before, .pc-t3::before { content:""; position:absolute; inset: 4px; pointer-events:none; border-radius: 7px;
  background: radial-gradient(circle, var(--rc) 1.6px, transparent 2.2px) 0 0 / 10px 10px no-repeat, radial-gradient(circle, var(--rc) 1.6px, transparent 2.2px) 100% 0 / 10px 10px no-repeat,
              radial-gradient(circle, var(--rc) 1.6px, transparent 2.2px) 0 100% / 10px 10px no-repeat, radial-gradient(circle, var(--rc) 1.6px, transparent 2.2px) 100% 100% / 10px 10px no-repeat; opacity: .85; }
.pc-t3::before { background:
    conic-gradient(from 45deg, var(--rc) 0 25%, transparent 0 100%) 0 0 / 7px 7px no-repeat, conic-gradient(from 45deg, var(--rc) 0 25%, transparent 0 100%) 100% 0 / 7px 7px no-repeat,
    conic-gradient(from 45deg, var(--rc) 0 25%, transparent 0 100%) 0 100% / 7px 7px no-repeat, conic-gradient(from 45deg, var(--rc) 0 25%, transparent 0 100%) 100% 100% / 7px 7px no-repeat; }
/* 天選: the same double frame in a slowly cycling rainbow. One masked layer draws both rings:
   (border-box − padding-box) is the outer ring, (content-box − a rect --f3 further in) is the inner one. */
.pc-t7::before { content:""; position:absolute; inset:0; border-radius: 10px; pointer-events:none; z-index: 2;
  border: var(--f1) solid transparent; padding: var(--f2); box-sizing: border-box;
  background: conic-gradient(from var(--ang, 0deg), #ff4747, #ffb020, #fff35c, #4dff88, #2fe4ff, #6b7bff, #f04fd8, #ff4747) border-box;
  --hole: linear-gradient(#000 0 0) center / calc(100% - 2 * (var(--f1) + var(--f2) + var(--f3))) calc(100% - 2 * (var(--f1) + var(--f2) + var(--f3))) no-repeat border-box;
  -webkit-mask: var(--hole), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor, source-over, xor, source-over;
  mask: var(--hole), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude, add, exclude, add;
  animation: rainbowSpin 4s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rainbowSpin { to { --ang: 360deg; } }
.pc-t2 .pc-rn, .pc-t3 .pc-rn, .pc-t4 .pc-rn, .pc-t5 .pc-rn, .pc-t6 .pc-rn, .pc-t7 .pc-rn { background: color-mix(in srgb, var(--rc) 22%, transparent); padding: 0 5px; border-radius: 999px; }
.pc-top { display:flex; justify-content:space-between; font-size: 9px; font-weight: 800; color: rgba(255,255,255,.7); letter-spacing: .5px; }
.pc-rn { color: var(--rc); }
.pc-art { flex: 1; margin: 5px 0; border-radius: 6px; display:grid; place-items:center; min-height: 0; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, hsl(var(--h) 10% 22%), hsl(var(--h) 8% 13%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pc-art::before, .pc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pc-art span { position: relative; z-index: 1; font-size: var(--art, 54px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); line-height: 1; }

/* ---------- art backgrounds: each rarity gets its own scene ---------- */
/* 普通 · 銀箔: a silver frame and soft brushed-silver art */
.pc-face.pc-t0 { background: linear-gradient(170deg, #3a4654, #1c2733 75%); box-shadow: inset 0 0 0 2px #c9d2dd, inset 0 0 0 3px rgba(0,0,0,.35); }
.pc-t0 .pc-rn { color: #dce3eb; }
.pc-t0 .pc-art { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), linear-gradient(135deg, #a7b1bd, #e2e7ec 45%, #b0bac5 62%, #d2d9e0); }
.pc-t0 .pc-art span { filter: drop-shadow(0 5px 7px rgba(20,30,45,.4)); }
/* 罕見 · 翡翠: polished jade green with faint stone veins */
.pc-face.pc-t1 { background: linear-gradient(170deg, #1a4430, #0c2016 75%); box-shadow: inset 0 0 0 2px #6cc792, inset 0 0 0 3px rgba(0,0,0,.35); }
.pc-t1 .pc-rn { color: #8fdcad; }
.pc-t1 .pc-art { background: radial-gradient(ellipse at 28% 22%, rgba(255,255,255,.24), transparent 45%), radial-gradient(circle at 50% 50%, #52b47d, #1b6c41 68%, #0c3f25); }
.pc-t1 .pc-art::before { background: repeating-linear-gradient(115deg, transparent 0 9px, rgba(255,255,255,.07) 9px 10px, transparent 10px 23px), repeating-linear-gradient(35deg, transparent 0 14px, rgba(255,255,255,.045) 14px 15px, transparent 15px 31px); }
.pc-t1 .pc-art span { filter: drop-shadow(0 5px 7px rgba(0,30,10,.45)); }
/* ---------- 稀有 / 史詩 backgrounds: three each, kept plain — 稀有 is fully static, 史詩 at most a faint twinkle ---------- */
/* 稀有 · 聚光網點 — a blue spotlight with halftone dots around the edge */
.art-halftone .pc-art { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 55%, hsl(var(--h) 50% 45%)) 0%, hsl(var(--h) 35% 18%) 58%, #0a1420 100%); }
.art-halftone .pc-art::before { background: radial-gradient(color-mix(in srgb, var(--rc) 45%, transparent) 1px, transparent 1.7px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 85%); mask: radial-gradient(circle, transparent 38%, #000 85%); }
/* 稀有 · 水玉圓點 — big soft polka dots */
.art-dots .pc-art { background: radial-gradient(circle, rgba(150,200,255,.26) 0 3px, transparent 3.6px) 0 0 / 16px 16px, radial-gradient(circle, rgba(150,200,255,.26) 0 3px, transparent 3.6px) 8px 8px / 16px 16px, radial-gradient(circle at 50% 45%, #2a6fd0, #11305e 78%); }
/* 稀有 · 晴空白雲 — a bright blue sky with clouds */
.art-sky .pc-art { background: radial-gradient(ellipse 30% 13% at 22% 28%, rgba(255,255,255,.9), transparent 70%), radial-gradient(ellipse 20% 9% at 32% 22%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 26% 11% at 78% 18%, rgba(255,255,255,.8), transparent 70%), radial-gradient(ellipse 44% 16% at 62% 86%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 30% 12% at 24% 92%, rgba(255,255,255,.75), transparent 70%), linear-gradient(180deg, #2f7ef0, #8cc4ff 85%); }
.art-sky .pc-art span { filter: drop-shadow(0 6px 8px rgba(0,40,100,.45)); }

/* 史詩 · 紫色極光 — purple aurora glow with faintly twinkling specks */
.art-violet .pc-art { background: radial-gradient(ellipse at 18% 12%, color-mix(in srgb, var(--rc) 70%, transparent), transparent 58%),
  radial-gradient(ellipse at 88% 90%, hsl(var(--h) 75% 55% / .55), transparent 55%), radial-gradient(circle at 50% 50%, #2c1d52, #110a24); }
.art-violet .pc-art::before { background: radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 78% 22%, #fff 0 1.2px, transparent 1.8px),
  radial-gradient(circle at 70% 78%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 28% 82%, #e9d5ff 0 1px, transparent 1.6px);
  animation: artTwinkle 3.2s ease-in-out infinite alternate; }
/* 史詩 · 暮光山脈 — a violet dusk over two layers of mountains (static) */
.art-dusk .pc-art { background: radial-gradient(circle at 22% 14%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 70% 9%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 86% 24%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 50% 66%, #ffe1a8 0 9%, rgba(255,180,120,.5) 14%, transparent 30%),
    linear-gradient(180deg, #1e0f3d 0%, #4a2a80 38%, #a2558f 62%, #f09a74 78%, #f7c07a 88%); }
.art-dusk .pc-art::before { top: 52%; background: linear-gradient(#5a3592, #3a2266); clip-path: polygon(0 62%, 16% 22%, 30% 50%, 48% 6%, 64% 44%, 82% 16%, 100% 48%, 100% 100%, 0 100%); }
.art-dusk .pc-art::after { top: 70%; background: linear-gradient(#2a1650, #160b2c); clip-path: polygon(0 36%, 14% 8%, 30% 52%, 46% 22%, 62% 58%, 80% 18%, 100% 44%, 100% 100%, 0 100%); }
/* 史詩 · 紫色光芒 — still violet rays around a soft glow */
.art-rays .pc-art { background: radial-gradient(circle at 50% 50%, #d9c2ff 0%, #9a63f0 22%, transparent 48%), repeating-conic-gradient(from 0deg, #3e1a86 0 9deg, #4f27a0 9deg 18deg), #3e1a86; }
.art-rays .pc-art::before { background: radial-gradient(circle, transparent 40%, rgba(20,6,40,.8) 100%); }
.pc-t3 .pc-art span { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 60%, transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
/* ---------- 傳說+ backgrounds (js/data/arts.js) ----------
   Each card of 傳說 and above carries one of its rarity's backgrounds (傳說 / 神話 five, 至尊 / 天選 seven). The higher the rarity, the more is moving:
   傳說 one slow effect · 神話 two · 至尊 two or three plus a breathing emoji · 天選 three or more plus a floating emoji. */
.pc-t4 .pc-art span { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pc-t5 .pc-art span { filter: drop-shadow(0 0 11px rgba(255,120,90,.8)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pc-t6 .pc-art span { filter: drop-shadow(0 0 13px rgba(255,220,140,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); animation: artBreath 3.2s ease-in-out infinite; }
.pc-t7 .pc-art span { filter: drop-shadow(0 0 16px rgba(255,255,255,.85)) drop-shadow(0 0 30px rgba(47,228,255,.5)); animation: artFloat 3.5s ease-in-out infinite; }

/* 傳說 · 霓虹夕陽 — striped sunset over a neon grid floor */
.art-neon .pc-art { background: linear-gradient(180deg, #0f0320 0%, #2b0a45 32%, #6a1462 56%, #e04aa8 59.5%, #14041f 60%, #1b0629 100%); }
.art-neon .pc-art::before { inset: 0 0 40% 0; background: radial-gradient(ellipse 44% 88% at 50% 100%, #ffe7a0 0%, #ffa95c 35%, #ef4fb6 72%, transparent 73%);
  -webkit-mask: linear-gradient(#000 0 58%, transparent 58% 64%, #000 64% 74%, transparent 74% 80%, #000 80% 87%, transparent 87% 93%, #000 93%);
          mask: linear-gradient(#000 0 58%, transparent 58% 64%, #000 64% 74%, transparent 74% 80%, #000 80% 87%, transparent 87% 93%, #000 93%); }
.art-neon .pc-art::after { inset: 60% -70% 0; transform: perspective(40px) rotateX(45deg); transform-origin: 50% 0; animation: artGrid 2.6s linear infinite;
  background: linear-gradient(rgba(240,90,200,.75) 1.5px, transparent 1.5px) 0 0 / 100% 10px, linear-gradient(90deg, rgba(240,90,200,.75) 1.5px, transparent 1.5px) 50% 0 / 14px 100%; }
/* 傳說 · 粉晶切面 — a pink gem seen from above */
.art-crystal .pc-art { background: conic-gradient(from 22.5deg, #e070c8 0 12.5%, #8c1a77 0 25%, #cc4cb0 0 37.5%, #5a0e4c 0 50%, #d77fc6 0 62.5%, #741364 0 75%, #e894d6 0 87.5%, #63105a 0); }
.art-crystal .pc-art::before { inset: 16% 20%; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  background: linear-gradient(135deg, #ffd2f2, #dc5cbc 45%, #9a2884 55%, #eca2dc); }
.art-crystal .pc-art::after { animation: artTwinkle 2.4s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 1.2px 8px at 16% 20%, #fff, transparent), radial-gradient(ellipse 8px 1.2px at 16% 20%, #fff, transparent),
    radial-gradient(ellipse 1px 6px at 84% 78%, #fff, transparent), radial-gradient(ellipse 6px 1px at 84% 78%, #fff, transparent), radial-gradient(circle at 80% 18%, #fff 0 1px, transparent 1.6px); }
/* 傳說 · 夢幻泡泡 — soap bubbles drifting in a pink glow */
.art-bubble .pc-art { background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.3), transparent 40%), radial-gradient(circle at 50% 45%, #f7a6e3 0%, #d846be 42%, #6a1878 82%, #33093f 100%); }
.art-bubble .pc-art::before { inset: -10% 0; animation: artBubble 6s ease-in-out infinite alternate;
  background: radial-gradient(circle at 14% 78%, rgba(255,255,255,.1) 0 7%, rgba(255,255,255,.5) 7.4% 8%, transparent 8.6%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.1) 0 10%, rgba(255,255,255,.45) 10.4% 11%, transparent 11.6%),
    radial-gradient(circle at 74% 84%, rgba(255,255,255,.1) 0 5%, rgba(255,255,255,.5) 5.4% 6%, transparent 6.6%),
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.1) 0 5%, rgba(255,255,255,.45) 5.4% 6%, transparent 6.6%),
    radial-gradient(circle at 92% 56%, rgba(255,255,255,.1) 0 3.5%, rgba(255,255,255,.45) 3.9% 4.5%, transparent 5%),
    radial-gradient(circle at 6% 44%, rgba(255,255,255,.1) 0 4%, rgba(255,255,255,.45) 4.4% 5%, transparent 5.5%); }
/* 傳說 · 粉紫全息 — slowly shifting holo foil with fine etching */
.art-holo .pc-art { background: linear-gradient(120deg, #c4429f, #e27ccb 18%, #8b62d6 36%, #6f93d8 50%, #9a70d2 64%, #d052b5 82%, #e488cf); background-size: 260% 260%; animation: artHolo 9s ease-in-out infinite alternate; }
.art-holo .pc-art::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(70,0,70,.14) 0 1px, transparent 1px 5px); }
.art-holo .pc-art::after { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.38), transparent 48%); }
/* 傳說 · 舞台聚光 — two spotlights sweeping a dark stage */
.art-stage .pc-art { background: radial-gradient(ellipse 55% 16% at 50% 88%, rgba(255,150,230,.6), transparent 72%), linear-gradient(180deg, #2a0730, #14031a 70%, #0c0210); }
.art-stage .pc-art::before, .art-stage .pc-art::after { inset: -10% -30% 0; mix-blend-mode: screen; animation: artBeam 4.5s ease-in-out infinite alternate; }
.art-stage .pc-art::before { transform-origin: 28% 0; background: conic-gradient(from 138deg at 28% 0, transparent 0, rgba(255,120,220,.4) 6deg, rgba(255,210,245,.6) 12deg, rgba(255,120,220,.4) 18deg, transparent 24deg); }
.art-stage .pc-art::after { transform-origin: 72% 0; animation-direction: alternate-reverse;
  background: conic-gradient(from 198deg at 72% 0, transparent 0, rgba(255,120,220,.4) 6deg, rgba(255,210,245,.6) 12deg, rgba(255,120,220,.4) 18deg, transparent 24deg); }

/* 神話 · 魔法陣 — a rune ring and a hexagram turning in opposite directions */
.art-sigil .pc-art { background:
    radial-gradient(circle closest-side, transparent 0 69%, rgba(255,110,90,.85) 69.5% 71%, transparent 71.5% 95%, rgba(255,110,90,.9) 95.5% 97%, transparent 97.5%),
    radial-gradient(circle at 50% 50%, #8a1222 0%, #3d0710 50%, #1a0307 100%); }
.art-sigil .pc-art::before, .art-sigil .pc-art::after { inset: auto; top: 50%; left: 50%; translate: -50% -50%; aspect-ratio: 1; }
/* sized by width (the art area is taller than wide), so both fit inside the two still circles */
.art-sigil .pc-art::before { width: 96%; border-radius: 50%; animation: artSpin 60s linear infinite;
  background: repeating-conic-gradient(rgba(255,170,140,.95) 0 2.4deg, transparent 2.4deg 30deg), repeating-conic-gradient(rgba(255,140,110,.75) 0 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 76%, #000 77% 93%, transparent 94%), radial-gradient(closest-side, transparent 0 82%, #000 83% 93%, transparent 94%);
          mask: radial-gradient(closest-side, transparent 0 76%, #000 77% 93%, transparent 94%), radial-gradient(closest-side, transparent 0 82%, #000 83% 93%, transparent 94%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.art-sigil .pc-art::after { width: 64%; background: linear-gradient(rgba(255,90,80,.42), rgba(255,150,90,.18)); animation: artSpin 40s linear infinite reverse;
  clip-path: polygon(50% 0, 64.43% 25%, 93.3% 25%, 78.87% 50%, 93.3% 75%, 64.43% 75%, 50% 100%, 35.57% 75%, 6.7% 75%, 21.13% 50%, 6.7% 25%, 35.57% 25%); }
/* 神話 · 血月 — a breathing red moon behind drifting clouds */
.art-moon .pc-art { background: radial-gradient(circle at 14% 16%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 86% 12%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 90% 60%, #ffd 0 .7px, transparent 1.3px), radial-gradient(circle at 8% 70%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 50% 46%, rgba(255,60,60,.35), transparent 62%), linear-gradient(180deg, #120206, #2e0610 55%, #12020a); }
.art-moon .pc-art::before { inset: auto; top: 48%; left: 50%; translate: -50% -50%; height: 76%; aspect-ratio: 1; border-radius: 50%; animation: artMoon 4s ease-in-out infinite alternate;
  background: radial-gradient(circle at 66% 60%, rgba(90,0,10,.35) 0 9%, transparent 10%), radial-gradient(circle at 30% 68%, rgba(90,0,10,.3) 0 6%, transparent 7%),
    radial-gradient(circle at 56% 26%, rgba(90,0,10,.28) 0 5%, transparent 6%), radial-gradient(circle at 35% 32%, #ffb08a 0%, #ff5a3c 28%, #c8142a 62%, #6a0814 100%); }
.art-moon .pc-art::after { inset: 0 -30%; animation: artDrift 9s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 32% 7% at 34% 72%, rgba(14,0,4,.92), transparent 72%), radial-gradient(ellipse 26% 5.5% at 68% 80%, rgba(14,0,4,.85), transparent 72%),
    radial-gradient(ellipse 24% 5% at 62% 30%, rgba(14,0,4,.75), transparent 72%); }
/* 神話 · 熔岩 — churning lava in the dark, with embers drifting up.
   Embers (also 烈焰): each dot is its own background layer on a tall tile, and every layer scrolls up exactly one tile per
   loop — different tile heights give each ember its own speed and starting height, so they never rise in a line. */
.art-lava .pc-art { background: #160203; }
.art-lava .pc-art::before { inset: -25%; filter: blur(3px) saturate(1.3); animation: artLava 6s ease-in-out infinite alternate;
  background: radial-gradient(circle at 30% 70%, #ffb347 0 10%, #ff5a1f 22%, transparent 40%), radial-gradient(circle at 72% 35%, #ff7a2a 0 8%, #e8283a 24%, transparent 44%),
    radial-gradient(circle at 60% 86%, #ffd27a 0 6%, #ff4a1a 18%, transparent 34%), radial-gradient(circle at 22% 24%, #e8283a 0 10%, transparent 36%), radial-gradient(circle at 50% 50%, #6a0a0a, #1c0303 70%);
  -webkit-mask: radial-gradient(circle, #000 30%, rgba(0,0,0,.25) 62%); mask: radial-gradient(circle, #000 30%, rgba(0,0,0,.25) 62%); }
.art-lava .pc-art::after, .art-blaze .pc-art::after { inset: 0 -6%;
  -webkit-mask: linear-gradient(0deg, #000 25%, transparent 92%); mask: linear-gradient(0deg, #000 25%, transparent 92%); }
.art-lava .pc-art::after { animation: artLavaEmbers 5s linear infinite, artEmberSway 2.6s ease-in-out infinite alternate;
  background: radial-gradient(circle at 18% 20px, #ffd08a 0 1.3px, transparent 2px) 0 0 / 100% 150px, radial-gradient(circle at 46% 64px, #fff1c2 0 1.1px, transparent 1.7px) 0 0 / 100% 190px,
    radial-gradient(circle at 73% 34px, #ffb36b 0 1.4px, transparent 2px) 0 0 / 100% 130px, radial-gradient(circle at 87% 96px, #ffd08a 0 1px, transparent 1.6px) 0 0 / 100% 210px,
    radial-gradient(circle at 31% 112px, #ffb36b 0 1px, transparent 1.6px) 0 0 / 100% 170px, radial-gradient(circle at 59% 8px, #fff1c2 0 1.2px, transparent 1.8px) 0 0 / 100% 230px; }
/* 神話 · 烈焰 — blurred flames licking up from below; they flicker unevenly and every few seconds surge up in a burst, throwing sparks */
.art-blaze .pc-art { background: linear-gradient(0deg, #ff8a2a 0%, #e8283a 26%, #6a0a1a 60%, #1c0308 100%); }
.art-blaze .pc-art::before { inset: 8% -10% 0; transform-origin: 50% 100%; filter: blur(1.5px); animation: artBlaze 2.4s ease-in-out infinite;
  background: radial-gradient(ellipse 6% 26% at 30% 100%, #fffbe6, #ffe08a 50%, transparent 75%), radial-gradient(ellipse 7% 32% at 50% 100%, #fffbe6, #ffe08a 50%, transparent 75%),
    radial-gradient(ellipse 6% 28% at 70% 100%, #fffbe6, #ffe08a 50%, transparent 75%),
    radial-gradient(ellipse 14% 48% at 10% 100%, #ffd27a, #ff6a2a 45%, transparent 70%), radial-gradient(ellipse 12% 64% at 30% 100%, #ffe6a8, #ff7a2a 40%, transparent 72%),
    radial-gradient(ellipse 15% 54% at 50% 100%, #ffd27a, #ff5a1f 45%, transparent 70%), radial-gradient(ellipse 12% 68% at 70% 100%, #ffe6a8, #ff7a2a 40%, transparent 72%),
    radial-gradient(ellipse 14% 50% at 90% 100%, #ffd27a, #ff6a2a 45%, transparent 70%),
    radial-gradient(ellipse 11% 40% at 20% 100%, #ff9a3a, #e8301a 50%, transparent 72%), radial-gradient(ellipse 11% 44% at 80% 100%, #ff9a3a, #e8301a 50%, transparent 72%); }
.art-blaze .pc-art::after { animation: artBlazeSparks 2.4s linear infinite, artEmberSway 1.2s ease-in-out infinite alternate;
  background: radial-gradient(circle at 14% 30px, #fff1c2 0 1.3px, transparent 2px) 0 0 / 100% 140px, radial-gradient(circle at 33% 90px, #ffcf6b 0 1px, transparent 1.7px) 0 0 / 100% 180px,
    radial-gradient(circle at 52% 10px, #fff1c2 0 1.4px, transparent 2px) 0 0 / 100% 120px, radial-gradient(circle at 68% 120px, #ffb36b 0 1px, transparent 1.6px) 0 0 / 100% 200px,
    radial-gradient(circle at 84% 50px, #fff1c2 0 1.2px, transparent 1.8px) 0 0 / 100% 160px, radial-gradient(circle at 42% 140px, #ffcf6b 0 1px, transparent 1.6px) 0 0 / 100% 220px,
    radial-gradient(circle at 24% 70px, #ffe6a8 0 .9px, transparent 1.5px) 0 0 / 100% 110px, radial-gradient(circle at 92% 150px, #ffcf6b 0 1px, transparent 1.6px) 0 0 / 100% 190px; }
/* 神話 · 龍鱗 — red dragon scales with a pulsing core; each pulse sends a ring of light rippling out across the scales */
.art-scales .pc-art { --scale: radial-gradient(circle at 50% 0, transparent 0 55%, var(--rim) 58% 63%, var(--edge) 65% 71%, transparent 73%);
  --rim: rgba(255,175,130,.5); --edge: rgba(0,0,0,.35);
  background: var(--scale) 0 0 / 14px 12px, var(--scale) 7px 6px / 14px 12px, radial-gradient(circle at 50% 50%, #ff5a4a, #b0101e 55%, #3a0408 100%); }
.art-scales .pc-art::before { animation: artPulse 1.4s ease-in-out infinite alternate;
  background: radial-gradient(circle at 50% 50%, rgba(255,190,130,.6), transparent 42%), radial-gradient(circle, transparent 45%, rgba(20,0,2,.72) 100%); }
.art-scales .pc-art::after { --rim: #fff3cc; --edge: rgba(255,190,120,.6); background: var(--scale) 0 0 / 14px 12px, var(--scale) 7px 6px / 14px 12px, rgba(255,160,90,.32);
  filter: drop-shadow(0 0 2px rgba(255,200,120,.9)); animation: artRipple 2.8s cubic-bezier(.3,.1,.6,1) infinite;
  -webkit-mask: radial-gradient(circle, transparent calc(var(--rip) - 26%), #000 var(--rip), transparent calc(var(--rip) + 9%));
          mask: radial-gradient(circle, transparent calc(var(--rip) - 26%), #000 var(--rip), transparent calc(var(--rip) + 9%)); }

/* 至尊 · 裝飾藝術 — black and gold, fanned rays and a double gold frame */
.art-deco .pc-art { background: radial-gradient(ellipse 80% 60% at 50% 100%, #5a3c08, transparent 72%), linear-gradient(180deg, #0c0904, #17110a); }
.art-deco .pc-art::before { inset: -10% -20% 0; transform-origin: 50% 100%; animation: artBright 2.6s ease-in-out infinite alternate, artFan 7s ease-in-out infinite alternate;
  background: radial-gradient(circle at 50% 100%, transparent 0 22%, rgba(255,205,100,.9) 22.5% 23.6%, transparent 24.2% 33%, rgba(255,205,100,.7) 33.5% 34.3%, transparent 35%),
    repeating-conic-gradient(from -90deg at 50% 100%, rgba(255,205,100,.55) 0 .8deg, transparent .8deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 21%, #000 22%); mask: radial-gradient(circle at 50% 100%, transparent 0 21%, #000 22%); }
.art-deco .pc-art::after { inset: 5px; border: 1px solid rgba(255,205,100,.8); border-radius: 3px; box-shadow: inset 0 0 0 2px #0e0a05, inset 0 0 0 3px rgba(255,205,100,.45); }
/* 至尊 · 聖光 — heaven: swaying light rays, a halo and clouds */
.art-heaven .pc-art { background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, #fffaf0 0%, #ffe7a3 30%, #ffc243 62%, #d98a0f 100%); }
.art-heaven .pc-art::before { inset: -10% -40% 0; transform-origin: 50% 0; animation: artSway 6s ease-in-out infinite alternate;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.8) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); }
.art-heaven .pc-art::after { animation: artPulse 3s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 24% 6% at 50% 13%, transparent 0 50%, #fff 58% 78%, rgba(255,250,200,.6) 86%, transparent 100%),
    radial-gradient(ellipse 30% 22% at 12% 102%, rgba(255,255,255,.95) 0 50%, transparent 74%), radial-gradient(ellipse 28% 20% at 50% 106%, rgba(255,255,255,.95) 0 50%, transparent 74%),
    radial-gradient(ellipse 30% 22% at 88% 102%, rgba(255,255,255,.95) 0 50%, transparent 74%); }
.art-heaven .pc-art span { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 6px 10px rgba(140,80,0,.45)); }
/* 至尊 · 金色寶庫 — glittering gold dust and four-point sparkles */
.art-vault .pc-art { background: radial-gradient(circle at 50% 48%, #fff6cf 0%, #ffd055 22%, #e09a12 52%, #7a4504 85%, #3d2202 100%); }
.art-vault .pc-art::before { animation: artTwinkle .9s steps(2) infinite alternate;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 .7px, transparent 1.2px) 0 0 / 11px 13px, radial-gradient(circle, rgba(255,250,210,.85) 0 .6px, transparent 1px) 5px 7px / 9px 10px;
  -webkit-mask: radial-gradient(circle, transparent 25%, #000 70%); mask: radial-gradient(circle, transparent 25%, #000 70%); }
.art-vault .pc-art::after { animation: artTwinkle 1.7s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 1.3px 10px at 16% 22%, #fff, transparent), radial-gradient(ellipse 10px 1.3px at 16% 22%, #fff, transparent),
    radial-gradient(ellipse 1.1px 8px at 84% 26%, #fff, transparent), radial-gradient(ellipse 8px 1.1px at 84% 26%, #fff, transparent),
    radial-gradient(ellipse 1.3px 11px at 78% 80%, #fff, transparent), radial-gradient(ellipse 11px 1.3px at 78% 80%, #fff, transparent),
    radial-gradient(ellipse 1px 6px at 22% 78%, #fff, transparent), radial-gradient(ellipse 6px 1px at 22% 78%, #fff, transparent); }
.art-vault .pc-art span { filter: drop-shadow(0 0 12px rgba(255,250,220,.9)) drop-shadow(0 6px 10px rgba(90,45,0,.5)); }
/* 至尊 · 金幣勳章 — a slowly turning reeded gold coin on brushed metal */
.art-coin .pc-art { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.06) 1px 3px), linear-gradient(135deg, #7a4a06, #ffd76a 28%, #b47a12 48%, #ffeaa8 68%, #8a5408); }
.art-coin .pc-art::before { inset: auto; top: 50%; left: 50%; translate: -50% -50%; height: 86%; aspect-ratio: 1; border-radius: 50%; animation: artSpin 24s linear infinite;
  background: radial-gradient(circle closest-side, transparent 0 68%, rgba(120,70,0,.55) 69% 71%, transparent 72%),
    radial-gradient(circle closest-side, #fff2c2 0, #f2c14e 55%, #c8901e 80%, transparent 81%), repeating-conic-gradient(#ffe08a 0 4deg, #a8700f 4deg 8deg);
  box-shadow: 0 3px 8px rgba(60,30,0,.6), inset 0 0 0 1px rgba(255,255,255,.5); }
.art-coin .pc-art::after { inset: -50%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%); animation: artSweep 2.8s ease-in-out infinite alternate; }
.art-coin .pc-art span { filter: drop-shadow(0 2px 3px rgba(90,45,0,.6)) drop-shadow(0 0 8px rgba(255,255,230,.6)); }
/* 至尊 · 皇家紋章 — navy velvet, gold lattice and a pulsing gold ring */
.art-royal .pc-art { background: radial-gradient(circle at 50% 48%, rgba(255,200,90,.7) 0%, rgba(255,176,32,.25) 30%, transparent 56%),
    repeating-linear-gradient(45deg, rgba(255,200,90,.3) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(255,200,90,.3) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 50% 50%, #1c2c6b, #0a1236 75%, #050a1f); }
.art-royal .pc-art::before { inset: auto; top: 50%; left: 50%; translate: -50% -50%; height: 88%; aspect-ratio: 1; border-radius: 50%; animation: artRing 3s ease-in-out infinite alternate;
  background: radial-gradient(circle closest-side, transparent 0 88%, rgba(255,210,110,.95) 89% 92%, transparent 93% 96%, rgba(255,210,110,.6) 97% 98.5%, transparent 99%); }
.art-royal .pc-art::after { animation: artTwinkle 2s ease-in-out infinite alternate;
  background: radial-gradient(circle at 14% 20%, #fff 0 1.3px, transparent 1.9px), radial-gradient(circle at 86% 16%, #ffe9a8 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 82% 82%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 18% 80%, #ffe9a8 0 1.4px, transparent 2px); }

/* 至尊 · 王座紅絨 — crimson velvet curtains with a gold-fringed valance; gold dust drifts down onto a glowing throne room */
.art-throne .pc-art { animation: artThroneDust 7s linear infinite;
  background: radial-gradient(circle, rgba(255,220,130,.95) 0 .8px, transparent 1.3px) 0 0 / 23px 31px,
    radial-gradient(circle, rgba(255,236,180,.7) 0 .6px, transparent 1.1px) 11px 7px / 17px 27px,
    radial-gradient(circle at 50% 54%, rgba(255,196,80,.45), transparent 44%),
    repeating-linear-gradient(45deg, rgba(255,190,90,.06) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(255,190,90,.06) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 50% 42%, #6e1020, #3a0610 62%, #1c0207); }
.art-throne .pc-art::before { transform-origin: 50% 0; animation: artCurtain 5s ease-in-out infinite alternate;
  background: linear-gradient(90deg, transparent calc(100% - 2px), #f0c45a 0) 0 0 / 24% 100% no-repeat,
    linear-gradient(270deg, transparent calc(100% - 2px), #f0c45a 0) 100% 0 / 24% 100% no-repeat,
    repeating-linear-gradient(90deg, #4a0610 0, #8c1626 5px, #b8283c 7px, #6a0c18 11px, #4a0610 14px) 0 0 / 24% 100% no-repeat,
    repeating-linear-gradient(90deg, #4a0610 0, #8c1626 5px, #b8283c 7px, #6a0c18 11px, #4a0610 14px) 100% 0 / 24% 100% no-repeat;
  -webkit-mask: radial-gradient(ellipse 34% 78% at 50% 64%, transparent 97%, #000); mask: radial-gradient(ellipse 34% 78% at 50% 64%, transparent 97%, #000); }
.art-throne .pc-art::after { inset: 0 0 auto; height: 21%;
  background: radial-gradient(circle at 50% 0, #9a1a2c 0 60%, #f0c45a 63% 74%, transparent 76%) 0 100% / 15px 9px repeat-x,
    linear-gradient(180deg, #4a0610, #8c1626 70%, #f0c45a 70% 80%, transparent 80%) 0 0 / 100% calc(100% - 9px) no-repeat; }
/* 至尊 · 勝利桂冠 — a gold laurel wreath around the emoji: it glows, a sheen runs over the leaves, gold flecks drift */
.art-laurel .pc-art { animation: artFlecks 9s linear infinite;
  background: radial-gradient(circle, rgba(255,226,140,.9) 0 .7px, transparent 1.2px) 0 0 / 27px 33px,
    radial-gradient(circle, rgba(255,240,190,.6) 0 .5px, transparent 1px) 13px 9px / 21px 29px,
    radial-gradient(circle at 50% 54%, rgba(255,205,100,.42), transparent 46%),
    repeating-conic-gradient(from 0deg at 50% 54%, rgba(255,210,120,.07) 0 6deg, transparent 6deg 15deg),
    radial-gradient(ellipse at 50% 50%, #4a3208, #1e1404 60%, #0c0802); }
.art-laurel .pc-art::before { inset: 2%; background: url(arts/laurel.svg) 50% 50% / contain no-repeat; animation: artWreathGlow 2.6s ease-in-out infinite alternate; }
.art-laurel .pc-art::after { inset: 2%; background: url(arts/laurel.svg) 50% 50% / contain no-repeat; filter: brightness(1.9) saturate(.6); animation: artGlint 4s ease-in-out infinite;
  -webkit-mask: linear-gradient(115deg, transparent 44%, #000 50%, transparent 56%) 0 0 / 300% 100% no-repeat;
          mask: linear-gradient(115deg, transparent 44%, #000 50%, transparent 56%) 0 0 / 300% 100% no-repeat; }

/* 天選 · 宇宙星雲 — shifting nebula and a field of stars */
.art-nebula .pc-art { background: radial-gradient(ellipse at 25% 25%, rgba(47,228,255,.65), transparent 50%), radial-gradient(ellipse at 78% 30%, rgba(240,79,216,.6), transparent 50%),
  radial-gradient(ellipse at 50% 85%, rgba(255,176,32,.5), transparent 55%), radial-gradient(circle, #1a0b3d, #05020f); }
.art-nebula .pc-art::before { inset: -60%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.18), transparent 30%, rgba(47,228,255,.2), transparent 60%, rgba(240,79,216,.2), transparent);
  animation: artSpin 18s linear infinite, artHue 9s linear infinite; }
.art-nebula .pc-art::after, .art-meteor .pc-art::after { animation: artTwinkle 1.8s ease-in-out infinite alternate;
  background: radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 34% 8%, #fff 0 .8px, transparent 1.4px),
  radial-gradient(circle at 62% 14%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 26%, #fff 0 1px, transparent 1.6px),
  radial-gradient(circle at 8% 62%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 92% 70%, #fff 0 .8px, transparent 1.4px),
  radial-gradient(circle at 24% 90%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 70% 92%, #fff 0 1.3px, transparent 1.9px); }
/* 天選 · 極光 — two curtains of aurora rippling over a starry night */
.art-aurora .pc-art { background: radial-gradient(circle at 14% 82%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 80% 72%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 60% 90%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 34% 64%, #cff 0 .7px, transparent 1.3px), radial-gradient(circle at 90% 88%, #fff 0 .8px, transparent 1.4px),
    linear-gradient(180deg, #03101f 0%, #062a3a 45%, #0a1830 75%, #050a18 100%); }
.art-aurora .pc-art::before { inset: -10% -40% 28%; filter: blur(2.5px); transform-origin: 50% 0; animation: artAurora 7s ease-in-out infinite alternate;
  background: linear-gradient(90deg, transparent 0%, rgba(60,255,170,.75) 15%, rgba(47,228,255,.6) 35%, rgba(60,255,170,.7) 55%, rgba(190,100,255,.6) 75%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 35%, #000 60%, transparent 100%), repeating-linear-gradient(90deg, #000 0 4px, rgba(0,0,0,.72) 4px 7px); -webkit-mask-composite: source-in;
          mask: linear-gradient(180deg, transparent 0%, #000 35%, #000 60%, transparent 100%), repeating-linear-gradient(90deg, #000 0 4px, rgba(0,0,0,.72) 4px 7px); mask-composite: intersect; }
.art-aurora .pc-art::after { inset: 4% -40% 42%; animation: artAurora 9s ease-in-out infinite alternate-reverse, artHueBlur 14s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(240,79,216,.55) 25%, rgba(60,255,170,.5) 55%, rgba(47,228,255,.5) 80%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 50%, transparent); mask: linear-gradient(180deg, transparent, #000 50%, transparent); }
/* 天選 · 稜鏡 — spinning rainbow rays split from a white core */
.art-prism .pc-art { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.6), transparent 30%), radial-gradient(circle at 50% 50%, #1b1640, #07051a 75%); }
.art-prism .pc-art::before { inset: -60%; opacity: .8; animation: artSpin 22s linear infinite;
  background: repeating-conic-gradient(from 0deg, #ff4747 0 3deg, transparent 3deg 7.5deg, #ffb020 7.5deg 10.5deg, transparent 10.5deg 15deg, #fff35c 15deg 18deg, transparent 18deg 22.5deg,
    #4dff88 22.5deg 25.5deg, transparent 25.5deg 30deg, #2fe4ff 30deg 33deg, transparent 33deg 37.5deg, #6b7bff 37.5deg 40.5deg, transparent 40.5deg 45deg, #f04fd8 45deg 48deg, transparent 48deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 0 8%, #000 20%, rgba(0,0,0,.55) 34%, transparent 46%); mask: radial-gradient(circle, transparent 0 8%, #000 20%, rgba(0,0,0,.55) 34%, transparent 46%); }
.art-prism .pc-art::after { animation: artTwinkle 1.3s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 1.3px 10px at 14% 18%, #fff, transparent), radial-gradient(ellipse 10px 1.3px at 14% 18%, #fff, transparent),
    radial-gradient(ellipse 1.1px 8px at 86% 24%, #fff, transparent), radial-gradient(ellipse 8px 1.1px at 86% 24%, #fff, transparent),
    radial-gradient(ellipse 1.3px 11px at 80% 82%, #fff, transparent), radial-gradient(ellipse 11px 1.3px at 80% 82%, #fff, transparent),
    radial-gradient(ellipse 1px 7px at 18% 80%, #fff, transparent), radial-gradient(ellipse 7px 1px at 18% 80%, #fff, transparent); }
/* 天選 · 黑洞 — a spinning accretion disk around a glowing event horizon */
.art-blackhole .pc-art { background: radial-gradient(circle at 12% 18%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 86% 14%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 90% 80%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 10% 84%, #fff 0 .7px, transparent 1.3px), radial-gradient(circle at 50% 8%, #fff 0 .7px, transparent 1.3px),
    radial-gradient(circle at 50% 50%, #1a0d33, #020108 70%); }
.art-blackhole .pc-art::before { inset: auto; top: 50%; left: 50%; translate: -50% -50%; width: 150%; aspect-ratio: 1; border-radius: 50%; filter: blur(1px); animation: artDisk 5s linear infinite;
  background: conic-gradient(from 0deg, #ffb020, #ff4747, #f04fd8, #6b7bff, #2fe4ff, #fff, #ffb020);
  -webkit-mask: radial-gradient(closest-side, transparent 0 34%, #000 40%, rgba(0,0,0,.6) 55%, transparent 72%); mask: radial-gradient(closest-side, transparent 0 34%, #000 40%, rgba(0,0,0,.6) 55%, transparent 72%); }
.art-blackhole .pc-art::after { inset: auto; top: 50%; left: 50%; translate: -50% -50%; height: 64%; aspect-ratio: 1; border-radius: 50%; animation: artHorizon 2.6s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, #000 0 82%, transparent 88%); }
/* 天選 · 流星雨 — meteors streaking through a deep blue sky of twinkling stars */
.art-meteor .pc-art { background: radial-gradient(ellipse at 80% 20%, rgba(107,123,255,.4), transparent 55%), radial-gradient(ellipse at 15% 85%, rgba(47,228,255,.28), transparent 55%),
    linear-gradient(200deg, #0b1440, #050820 60%, #02030f); }
.art-meteor .pc-art::before { inset: -40%; animation: artMeteor 2.4s linear infinite; filter: drop-shadow(0 0 3px rgba(150,220,255,.9));
  background: linear-gradient(90deg, transparent, rgba(170,235,255,.95) 80%, #fff) 8% 18% / 52px 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(170,235,255,.95) 80%, #fff) 58% 30% / 40px 1.6px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,210,250,.95) 80%, #fff) 28% 50% / 60px 2.2px no-repeat,
    linear-gradient(90deg, transparent, rgba(170,235,255,.95) 80%, #fff) 78% 62% / 36px 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(170,235,255,.95) 80%, #fff) 44% 76% / 48px 1.8px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,210,250,.95) 80%, #fff) 14% 86% / 34px 1.4px no-repeat,
    linear-gradient(90deg, transparent, rgba(170,235,255,.95) 80%, #fff) 66% 10% / 30px 1.3px no-repeat; }

/* 天選 · 星座圖 — a slowly turning star chart; constellations draw themselves around the edges and their stars twinkle */
.art-constellation .pc-art { background: radial-gradient(circle at 20% 60%, #fff 0 .6px, transparent 1px), radial-gradient(circle at 70% 46%, #fff 0 .5px, transparent 1px),
    radial-gradient(circle at 44% 18%, #fff 0 .5px, transparent 1px), radial-gradient(circle at 60% 70%, #dff 0 .6px, transparent 1px), radial-gradient(circle at 34% 40%, #fff 0 .5px, transparent .9px),
    radial-gradient(ellipse at 50% 120%, rgba(47,228,255,.25), transparent 60%), linear-gradient(180deg, #050b24, #0a1640 55%, #071030); }
.art-constellation .pc-art::before { inset: -30%; opacity: .5; animation: artSpin 90s linear infinite;
  background: repeating-radial-gradient(circle, transparent 0 15px, rgba(140,210,255,.35) 15.5px 16px), repeating-conic-gradient(rgba(140,210,255,.28) 0 .4deg, transparent .4deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 16%, #000 30%, rgba(0,0,0,.5) 50%, transparent 66%); mask: radial-gradient(circle, transparent 0 16%, #000 30%, rgba(0,0,0,.5) 50%, transparent 66%); }
.art-constellation .pc-art::after { background: url(arts/constellation.svg) 0 0 / 100% 100%; filter: drop-shadow(0 0 2px rgba(160,230,255,.9)); }
/* 天選 · 行星日出 — a star rises over the rim of a blue planet: its atmosphere glows, clouds drift, the flare breathes */
.art-rise .pc-art { background: radial-gradient(circle at 18% 22%, #fff 0 .7px, transparent 1.2px), radial-gradient(circle at 84% 14%, #fff 0 .8px, transparent 1.3px),
    radial-gradient(circle at 60% 28%, #fff 0 .5px, transparent 1px), radial-gradient(circle at 36% 10%, #dff 0 .6px, transparent 1px), radial-gradient(circle at 92% 46%, #fff 0 .6px, transparent 1px),
    linear-gradient(180deg, #02030c, #071030 60%, #0c2a60); }
.art-rise .pc-art::before { inset: auto; width: 230%; aspect-ratio: 1; left: -65%; top: 68%; border-radius: 50%; animation: artClouds 24s linear infinite;
  background: radial-gradient(ellipse 22px 6px, rgba(255,255,255,.55), transparent) 0 3% / 70px 30px, radial-gradient(ellipse 30px 7px, rgba(255,255,255,.4), transparent) 35px 6% / 90px 36px,
    radial-gradient(circle at 50% 0%, #3aa0ff 0, #1a5ad0 8%, #0c2c70 20%, #050e28 40%);
  box-shadow: 0 -2px 8px 2px rgba(120,220,255,.9), 0 -10px 30px 6px rgba(60,170,255,.45); }
.art-rise .pc-art::after { inset: auto; left: 0; top: 34%; width: 100%; height: 64%; animation: artFlare 5s ease-in-out infinite alternate; mix-blend-mode: screen;
  background: radial-gradient(circle 34px at 30% 62%, #fff 0 10%, rgba(255,240,200,.9) 22%, rgba(255,190,120,.35) 55%, transparent),
    linear-gradient(90deg, transparent 4%, rgba(255,240,220,.85) 30%, transparent 64%) 0 62% / 100% 2px no-repeat,
    radial-gradient(circle 3px at 62% 62%, rgba(120,200,255,.6), transparent), radial-gradient(circle 5px at 78% 62%, rgba(255,160,240,.45), transparent); }

@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artTwinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes artHue { to { filter: hue-rotate(360deg); } }
@keyframes artHueBlur { from { filter: blur(5px) hue-rotate(0deg); } to { filter: blur(5px) hue-rotate(360deg); } }
@keyframes artFloat { 50% { transform: translateY(-4%); } }
@keyframes artBreath { 50% { transform: scale(1.06); } }
@keyframes artGrid { to { background-position: 0 10px, 50% 0; } }
@keyframes artBubble { from { transform: translateY(6%); } to { transform: translateY(-6%); } }
@keyframes artHolo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes artBeam { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes artMoon { from { box-shadow: 0 0 14px 3px rgba(255,50,50,.45), 0 0 34px 8px rgba(200,20,40,.25); } to { box-shadow: 0 0 22px 6px rgba(255,60,60,.7), 0 0 48px 14px rgba(200,20,40,.4); } }
@keyframes artDrift { from { transform: translateX(-14%); } to { transform: translateX(14%); } }
@keyframes artLava { from { transform: translate(-7%, 5%) rotate(0deg) scale(1); } to { transform: translate(7%, -5%) rotate(30deg) scale(1.15); } }
@keyframes artLavaEmbers { to { background-position: 0 -150px, 0 -190px, 0 -130px, 0 -210px, 0 -170px, 0 -230px; } }
@keyframes artBlazeSparks { to { background-position: 0 -140px, 0 -180px, 0 -120px, 0 -200px, 0 -160px, 0 -220px, 0 -110px, 0 -190px; } }
@keyframes artEmberSway { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes artBlaze { 0%, 100% { transform: scaleY(1) skewX(-2deg); filter: blur(1.5px) brightness(1); } 14% { transform: scaleY(1.1) skewX(2deg); }
  28% { transform: scaleY(.95) skewX(-1deg); } 42% { transform: scaleY(1.12) skewX(2deg); } 54% { transform: scaleY(1.02) skewX(-2deg); }
  66% { transform: scaleY(1.38) skewX(1deg); filter: blur(1.5px) brightness(1.25); } 76% { transform: scaleY(1.06) skewX(-2deg); filter: blur(1.5px) brightness(1.05); } 88% { transform: scaleY(1.16) skewX(1deg); } }
@property --rip { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes artRipple { from { --rip: 0%; opacity: 1; } 80% { opacity: 1; } to { --rip: 120%; opacity: 0; } }
@keyframes artThroneDust { to { background-position: 0 31px, 11px 34px, 0 0, 0 0, 0 0, 0 0; } }
@keyframes artCurtain { from { transform: skewX(-1.4deg); } to { transform: skewX(1.4deg); } }
@keyframes artGlint { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes artWreathGlow { from { filter: drop-shadow(0 0 1.5px rgba(255,210,110,.45)); } to { filter: drop-shadow(0 0 6px rgba(255,225,140,.95)); } }
@keyframes artFlecks { to { background-position: 0 33px, 13px 38px, 0 0, 0 0, 0 0; } }
@keyframes artClouds { to { background-position: 70px 3%, 125px 6%, 0 0; } }
@keyframes artFlare { from { transform: translateY(6%); filter: brightness(.85); } to { transform: translateY(-4%); filter: brightness(1.2); } }
@keyframes artSweep { from { transform: translateX(-38%); } to { transform: translateX(38%); } }
@keyframes artSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes artFan { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes artBright { from { filter: brightness(.85); } to { filter: brightness(1.35); } }
@keyframes artPulse { from { opacity: .7; } to { opacity: 1; } }
@keyframes artRing { from { transform: scale(.96); opacity: .75; } to { transform: scale(1.04); opacity: 1; } }
@keyframes artAurora { from { transform: translateX(-12%) skewX(-12deg); } to { transform: translateX(12%) skewX(12deg); } }
@keyframes artDisk { from { transform: rotate(-14deg) scaleY(.3) rotate(0deg); } to { transform: rotate(-14deg) scaleY(.3) rotate(360deg); } }
@keyframes artHorizon { from { box-shadow: 0 0 8px 2px rgba(255,200,120,.75), 0 0 20px 5px rgba(240,79,216,.35), inset 0 0 6px 1px rgba(255,220,160,.7); }
  to { box-shadow: 0 0 14px 4px rgba(255,210,140,.95), 0 0 30px 9px rgba(240,79,216,.55), inset 0 0 10px 2px rgba(255,230,180,.9); } }
@keyframes artMeteor { 0% { transform: rotate(32deg) translateX(-30%); opacity: 0; } 12%, 78% { opacity: 1; } 100% { transform: rotate(32deg) translateX(30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pc-art, .pc-art::before, .pc-art::after, .pc-art span { animation: none !important; } }
.pc-name { font-size: 11px; font-weight: 800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-mult { font-size: 16px; font-weight: 900; text-align:center; font-variant-numeric: tabular-nums; }
.pc-new { position:absolute; top: 24px; left: 50%; transform: translateX(-50%); background: var(--yellow); color:#05080a; font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 999px; letter-spacing: 1px; box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: newPulse 1.2s ease-in-out infinite alternate; }
/* a new background for a card you already had */
.pc-new-art { background: #fff; }
@keyframes newPulse { to { box-shadow: 0 0 12px var(--yellow); } }
.pc-t3::after, .pc-t4::after, .pc-t5::after, .pc-t6::after, .pc-t7::after { content:""; position:absolute; inset:-60%; pointer-events:none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.4) 48%, rgba(120,220,255,.25) 52%, transparent 62%); animation: foil 2.2s infinite; }
.pc-t3::after { opacity: .28; animation-duration: 4.5s; }
.pc-t4::after { opacity: .4; animation-duration: 3.8s; }
.pc-t5::after { opacity: .7; animation-duration: 3s; }
@keyframes foil { from { transform: translateX(-40%); } to { transform: translateX(40%); } }

/* ---------- pack reveal ---------- */
.pk-top { height: 290px; width: 100%; position: relative; display:flex; align-items:center; justify-content:center; margin-top: 4px; }
.pk-pack { width: 150px; height: 220px; border-radius: 12px; position: absolute; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--f1), var(--f2)); box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.15);
  overflow: hidden; transition: transform .3s, opacity .3s; }
.pk-pack::before { content:""; position:absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); animation: foil 3s infinite; }
.pk-pack .logo { position: relative; color: #fff; --mk-spark: var(--f2); filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.pk-pack .logo .mk { width: 64px; height: 64px; }
.pk-pack .nm { position:absolute; bottom: 16px; font-weight: 900; letter-spacing: 2px; font-size: 14px; }
.pk-pack .ct { position:absolute; top: 14px; font-size: 10px; font-weight: 800; letter-spacing: 1px; opacity: .8; }
.pk-pack.shake { animation: pkShake .4s; }
.pk-pack.open { transform: translateY(-40px) scale(1.15); opacity: 0; }
@keyframes pkShake { 25% { transform: rotate(-5deg) scale(1.03); } 75% { transform: rotate(5deg) scale(1.03); } }
/* The five cards share one row of slots (--slot 0–4). While face down they form a stack (--k = depth, 0 on top):
   each card below sits a few px lower-right with a slight tilt, so only its edge — and its rarity colour — shows. */
.pk-cards { --cw: 124px; --ch: 182px; --gap: 12px; position: absolute; width: calc(var(--cw) * 5 + var(--gap) * 4); height: var(--ch); }
.pk-card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); perspective: 900px;
  transform: translate(calc(var(--slot, 2) * (var(--cw) + var(--gap)) + var(--k, 0) * 4px), calc(var(--k, 0) * 5px)) rotate(var(--rot, 0deg));
  transition: transform .45s cubic-bezier(.3,1.1,.4,1), filter .3s; }
.pk-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.25,.5,1), translate .2s; }
.pk-card.flip .pk-inner { transform: rotateY(180deg); }
.pk-card.top { cursor: pointer; filter: drop-shadow(0 0 10px rgba(255,255,255,.22)); }
.pk-card.top:hover .pk-inner { translate: 0 -10px; }
.pk-card.done { cursor: pointer; }
.pk-card.done:hover .pk-inner { translate: 0 -6px; }
.pk-inner > .pc-face { transform: rotateY(180deg); backface-visibility: hidden; visibility: hidden; }
/* the face/back swap is timed to the moment the flip is edge-on, so it works even where 3D backface hiding doesn't */
.pk-card.flip .pk-inner > .pc-face { animation: pkSideOn .55s both; }
.pk-card.flip .pk-inner > .pk-back { animation: pkSideOff .55s both; }
@keyframes pkSideOn { 0%, 21% { visibility: hidden; } 22%, 100% { visibility: visible; } }
@keyframes pkSideOff { 0%, 21% { visibility: visible; } 22%, 100% { visibility: hidden; } }
.pk-inner > .pc-face:is(.pc-t2, .pc-t3, .pc-t4) { box-shadow: inset 0 0 0 3px var(--rc), 0 8px 18px rgba(0,0,0,.4); }
.pk-card.glow2 { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rc) 70%, transparent)); }
.pk-card.glow3 { filter: drop-shadow(0 0 10px var(--rc)); }
.pk-card.glow4 { filter: drop-shadow(0 0 18px var(--rc)); }
.pk-card.deal { animation: pkDeal .45s cubic-bezier(.2,1.2,.4,1) backwards; }
@keyframes pkDeal { from { translate: 0 40px; scale: .6; opacity: 0; } }

/* ---------- card back: one design for every card, coloured by rarity, one pip per rarity step ---------- */
.pk-back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--rc) 32%, #0c1a24) 0%, #0a141c 72%);
  box-shadow: inset 0 0 0 3px var(--rc), inset 0 0 0 5px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.45); }
.pk-back::before { content: ""; position: absolute; inset: 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--rc) 16%, transparent) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--rc) 16%, transparent) 0 1px, transparent 1px 9px); }
.pb-emblem { position: absolute; left: 50%; top: 44%; width: 42%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; border-radius: 22%;
  border: 2px solid var(--rc); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, #0c1a24), #0a141c 75%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--rc) 40%, transparent); display: grid; place-items: center; }
.pb-mk { rotate: -45deg; width: 74%; height: 74%; color: var(--rc); --mk-spark: #fff; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rc) 60%, transparent)); }
.pb-t0 .pb-mk { --mk-spark: #dfe5ec; }
.pb-pips { position: absolute; left: 0; right: 0; bottom: 11%; z-index: 1; display: flex; justify-content: center; gap: calc(var(--cw, 124px) * .028); }
.pb-pips i { display: block; flex: none; width: calc(var(--cw, 124px) * .048); height: calc(var(--cw, 124px) * .048); min-width: 3px; min-height: 3px; transform: rotate(45deg); border-radius: 1px; background: var(--rc); }
.pb-ring { display: none; }
/* rarer backs get a little more: glowing pips (稀有+), a brighter emblem (史詩+), a shimmer (傳說+),
   a pulse (神話+), a gold double frame (至尊) and a turning rainbow frame (天選) */
.pb-t0 { background: radial-gradient(circle at 50% 44%, #1b2730 0%, #0a141c 72%); }
.pb-t2 .pb-pips i, .pb-t3 .pb-pips i { box-shadow: 0 0 4px var(--rc); }
.pb-t3 .pb-emblem { box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--rc) 65%, transparent); }
.pb-t4 .pb-pips i, .pb-t5 .pb-pips i, .pb-t6 .pb-pips i, .pb-t7 .pb-pips i { box-shadow: 0 0 6px var(--rc); }
.pb-t4::after, .pb-t5::after, .pb-t6::after, .pb-t7::after { content: ""; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%); animation: foil 2.6s infinite; }
.pb-t4::after { opacity: .55; animation-duration: 3.4s; }
.pb-t4, .pb-t5, .pb-t6, .pb-t7 { box-shadow: inset 0 0 0 3px var(--rc), inset 0 0 0 5px rgba(0,0,0,.45), inset 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 12px color-mix(in srgb, var(--rc) 55%, transparent); }
.pb-t5, .pb-t6, .pb-t7 { animation: pbPulse 1.6s ease-in-out infinite alternate; }
.pb-t5 .pb-emblem, .pb-t6 .pb-emblem, .pb-t7 .pb-emblem { box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 22px var(--rc); }
.pb-t6 { --pb-inner: inset 0 0 0 3px var(--rc), inset 0 0 0 5px rgba(0,0,0,.55), inset 0 0 0 6px #ffe39a; }
.pb-t6::before { border-color: #ffe39a; }
.pb-t6 { box-shadow: var(--pb-inner), inset 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 12px color-mix(in srgb, var(--rc) 55%, transparent); }
.pb-t7 .pb-ring { display: block; position: absolute; inset: 0; border-radius: 10px; padding: 3px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), #ff4747, #ffb020, #fff35c, #4dff88, #2fe4ff, #6b7bff, #f04fd8, #ff4747);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rainbowSpin 3s linear infinite; }
.pb-t7 .pb-emblem { border-color: #fff; }
@keyframes pbPulse {
  from { box-shadow: var(--pb-inner, inset 0 0 0 3px var(--rc)), inset 0 0 0 5px rgba(0,0,0,.45), inset 0 0 14px color-mix(in srgb, var(--rc) 40%, transparent), 0 0 8px color-mix(in srgb, var(--rc) 50%, transparent); }
  to { box-shadow: var(--pb-inner, inset 0 0 0 3px var(--rc)), inset 0 0 0 5px rgba(0,0,0,.45), inset 0 0 26px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 22px var(--rc); } }
@media (prefers-reduced-motion: reduce) { .pk-back, .pk-back::after, .pb-ring { animation: none !important; } }

.pk-ctl { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 4px; }
.pk-hint { color: var(--muted); font-size: 13px; font-weight: 700; }
.pk-total { font-size: 24px; font-weight: 900; min-height: 34px; font-variant-numeric: tabular-nums; text-align:center; }
.pk-total small { display:block; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.pk-lore { margin: 8px auto 0; max-width: 560px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel); border-left: 3px solid var(--rc); border-radius: 6px; padding: 8px 12px; text-align: left; animation: pillIn .3s; }
.pk-lore b { color: var(--rc); margin-right: 6px; }
.pk-lore i { color: var(--dim); font-style: normal; font-size: 12px; margin-left: 4px; }
.pk-odds { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; font-weight: 700; }
.pk-odds th { color: var(--dim); font-weight: 600; text-align: left; padding: 5px 8px; }
.pk-odds td { padding: 6px 8px; border-top: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.pk-odds td:first-child { border-left: 3px solid var(--rc); color: var(--rc); }
.pk-odds .done { color: var(--green); }
.pk-odds-head { align-self: stretch; width: 100%; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; text-align: left; }
.pk-odds-head b { color: #fff; }
.pk-odds-head span { color: var(--dim); font-size: 12px; font-weight: 600; }
.pk-odds-head + .pk-odds { margin-top: 4px; }
.pk-odds td:first-child { white-space: nowrap; }
@media (max-width: 800px) { .pk-odds td, .pk-odds th { padding: 6px 5px; } }
.pk-odds td[title] { cursor: help; }
@media (max-width: 1100px) { .pk-card { --art: 37px; } .pk-cards { --cw: 92px; --ch: 136px; --gap: 8px; } .pk-card .pc-name { font-size: 9px; } .pk-card .pc-mult { font-size: 13px; } }
@media (max-width: 800px) { .pk-card { --art: 24px; } .pk-cards { --cw: min(62px, calc((100vw - 84px) / 5.3)); --ch: calc(var(--cw) * 1.5); --gap: 4px; } .pk-card .pc-top, .pk-card .pc-name { display: none; } .pk-card .pc-mult { font-size: 11px; } .pk-top { height: 220px; }
  .pk-card .pc-face { --f1: 2px; --f2: 1px; --f3: 1.5px; } }

/* ---------- showcase slots (profile, players, panel) ---------- */
.sc-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 680px; }
.sc-slot { position: relative; aspect-ratio: 124 / 182; --art: 48px; border-radius: 10px; cursor: pointer; transition: transform .15s; }
.sc-slot[data-key]:hover { transform: translateY(-4px); }
.sc-slot.empty { cursor: default; border: 2px dashed var(--line-2); display: grid; place-items: center; color: var(--dim); font-weight: 800; font-size: 18px; }
.sc-mini { gap: 6px; max-width: none; }
.sc-mini .sc-slot { --art: 26px; cursor: inherit; }
.sc-mini .sc-slot:hover { transform: none; }
.sc-mini .pc-face { padding: 3px; }
.sc-mini .pc-t5, .sc-mini .pc-t6, .sc-mini .pc-t7 { padding: calc(var(--f1) + var(--f2) + var(--f3) + 1px); }
.sc-mini .pc-top, .sc-mini .pc-name { display: none; }
.sc-mini .pc-mult { font-size: 10px; }
.sc-mini .pc-art { margin: 2px 0; }
.sc-mini .sc-slot.empty { font-size: 12px; border-width: 1px; }
@media (max-width: 800px) { .sc-row { gap: 6px; } .sc-slot { --art: 31px; } .sc-slot .pc-name { font-size: 9px; } .sc-slot .pc-mult { font-size: 12px; } }
/* quick open (25 / 100 packs): rarity counts + the 稀有+ cards that came out */
.pk-sum:empty { display: none; }
.pk-sum { width: 100%; margin-top: 10px; }
.pk-sum-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pk-sum-chip { background: var(--panel-2); border-left: 3px solid var(--rc); border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 700; color: var(--rc); }
.pk-sum-chip b { color: #fff; font-variant-numeric: tabular-nums; }
.pk-sum-grid { max-height: 440px; overflow-y: auto; }
.pk-sum-grid .alb-card { cursor: pointer; }

/* ---------- 未採用: backgrounds that were replaced, redrawn from their names (shown only on the 卡面圖鑑 page) ---------- */
.art-seigaiha .pc-art { --w: #8cc4ff; --b: #17427c;
  background: radial-gradient(circle at 50% 100%, var(--b) 0 19%, var(--w) 20% 26%, var(--b) 27% 39%, var(--w) 40% 46%, var(--b) 47% 59%, var(--w) 60% 66%, var(--b) 67% 70%, transparent 71%) 0 0 / 24px 12px,
    radial-gradient(circle at 50% 100%, var(--b) 0 19%, var(--w) 20% 26%, var(--b) 27% 39%, var(--w) 40% 46%, var(--b) 47% 59%, var(--w) 60% 66%, var(--b) 67% 70%, transparent 71%) 12px 6px / 24px 12px, var(--b); }
.art-seigaiha .pc-art::before { background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(5,20,45,.7) 100%); }
.art-blueprint .pc-art { background:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px) -1px -1px / 20px 20px, linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px) -1px -1px / 20px 20px,
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) -1px -1px / 5px 5px, linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) -1px -1px / 5px 5px, #1d5fb4; }
.art-blueprint .pc-art::before { background: radial-gradient(circle closest-side, transparent 0 86%, rgba(255,255,255,.55) 87% 88.5%, transparent 89.5%) 50% 50% / 82% 82% no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 50% 50% / 1px 100% no-repeat, linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 50% 50% / 100% 1px no-repeat; }
.art-stars .pc-art { background: radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 34% 8%, #e9d5ff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 62% 22%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 12%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 92% 46%, #e9d5ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 8% 58%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 22% 86%, #fff 0 1.1px, transparent 1.7px), radial-gradient(circle at 54% 92%, #e9d5ff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 80% 80%, #fff 0 1px, transparent 1.6px), radial-gradient(ellipse at 50% 120%, #5b2fa8, transparent 60%), linear-gradient(180deg, #0c0620, #24124a); }
.art-stars .pc-art::before { background: radial-gradient(ellipse 1px 6px at 74% 34%, #fff, transparent), radial-gradient(ellipse 6px 1px at 74% 34%, #fff, transparent),
    radial-gradient(ellipse 1px 5px at 26% 40%, #fff, transparent), radial-gradient(ellipse 5px 1px at 26% 40%, #fff, transparent); animation: artTwinkle 2.8s ease-in-out infinite alternate; }

/* ---------- added 2026-10-05: 同心圓 (稀有), 紫墨暈染 (史詩), 棉花糖雲 (傳說), 鳳凰之羽 · 天燈 (神話), 煙火大會 (至尊), 蛋白石 (天選) ---------- */
@keyframes candRise { to { background-position: 0 -160px, 0 -200px, 0 -140px, 0 -180px, 0 -220px; } }
@keyframes candSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes candBurst { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes candSheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes candFlicker { 0%, 100% { opacity: 1; } 40% { opacity: .82; } 55% { opacity: .95; } 70% { opacity: .78; } }

/* 稀有 · 同心圓 — rings of blue spreading from behind the emoji */
.art-rings .pc-art { background: repeating-radial-gradient(circle at 50% 45%, #2f74e6 0 7px, #2463cf 7px 14px), #2463cf; }
.art-rings .pc-art::before { background: radial-gradient(circle at 50% 45%, rgba(170,210,255,.6), transparent 40%), radial-gradient(circle at 50% 45%, transparent 50%, rgba(8,24,60,.55) 100%); }

/* 史詩 · 紫墨暈染 — violet ink blooming across wet paper */
.art-ink .pc-art { background: radial-gradient(circle at 28% 34%, rgba(110,50,215,.8) 0 12%, rgba(150,95,235,.4) 22%, transparent 38%),
  radial-gradient(circle at 74% 64%, rgba(90,30,180,.8) 0 10%, rgba(140,80,225,.35) 22%, transparent 40%), radial-gradient(circle at 58% 18%, rgba(170,110,240,.6) 0 7%, transparent 20%),
  radial-gradient(circle at 22% 82%, rgba(160,100,235,.5) 0 8%, transparent 22%), #f2ecfb; }
.art-ink .pc-art::before { filter: blur(2.5px); background: radial-gradient(circle at 46% 50%, rgba(120,60,220,.45) 0 16%, transparent 34%), radial-gradient(circle at 86% 30%, rgba(110,40,200,.4) 0 8%, transparent 20%); }
.art-ink .pc-art::after { background: radial-gradient(circle at 12% 18%, rgba(100,40,200,.8) 0 1.4px, transparent 2px), radial-gradient(circle at 88% 86%, rgba(100,40,200,.8) 0 1.8px, transparent 2.4px),
  radial-gradient(circle at 92% 12%, rgba(100,40,200,.7) 0 1px, transparent 1.6px), radial-gradient(circle at 40% 92%, rgba(100,40,200,.7) 0 1.2px, transparent 1.8px); }

/* 傳說 · 棉花糖雲 — pastel candy-floss clouds drifting across a pink-lilac sky */
.art-cotton .pc-art { background: linear-gradient(180deg, #ffd3ef, #d8c2ff 70%, #b9a6ff); }
.art-cotton .pc-art::before { inset: 0 -30%; animation: artDrift 10s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 22% 10% at 24% 26%, rgba(255,255,255,.95), transparent 70%), radial-gradient(ellipse 16% 8% at 34% 20%, rgba(255,235,248,.95), transparent 70%),
    radial-gradient(ellipse 24% 11% at 72% 74%, rgba(255,255,255,.9), transparent 70%), radial-gradient(ellipse 16% 8% at 62% 70%, rgba(255,225,245,.95), transparent 70%),
    radial-gradient(ellipse 14% 7% at 86% 30%, rgba(255,240,250,.9), transparent 70%); }
.art-cotton .pc-art::after { background: radial-gradient(circle at 14% 64%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 52% 12%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 52%, #fff 0 .9px, transparent 1.5px); }

/* 神話 · 鳳凰之羽 — a fan of fire feathers sways while sparks fly up */
.art-phoenix .pc-art { background: radial-gradient(circle at 50% 100%, #ffd27a, #ff6a2a 30%, #b0101e 62%, #3a0408); }
.art-phoenix .pc-art::before { inset: -10% -25% 0; transform-origin: 50% 100%; animation: candSway 4s ease-in-out infinite alternate;
  background: repeating-conic-gradient(from -60deg at 50% 100%, rgba(255,220,130,.75) 0 2deg, rgba(255,110,50,.55) 2deg 6deg, transparent 6deg 10deg);
  -webkit-mask: conic-gradient(from -62deg at 50% 100%, #000 0 124deg, transparent 0), radial-gradient(circle at 50% 100%, #000 0 85%, transparent 90%);
  -webkit-mask-composite: source-in; mask: conic-gradient(from -62deg at 50% 100%, #000 0 124deg, transparent 0) intersect, radial-gradient(circle at 50% 100%, #000 0 85%, transparent 90%); }
.art-phoenix .pc-art::after { animation: candRise 4s linear infinite;
  background: radial-gradient(circle at 16% 40px, #fff1c2 0 1.4px, transparent 2px) 0 0 / 100% 160px, radial-gradient(circle at 38% 120px, #ffcf6b 0 1.2px, transparent 1.8px) 0 0 / 100% 200px,
    radial-gradient(circle at 60% 20px, #fff1c2 0 1.5px, transparent 2.1px) 0 0 / 100% 140px, radial-gradient(circle at 78% 90px, #ffb36b 0 1.1px, transparent 1.7px) 0 0 / 100% 180px,
    radial-gradient(circle at 90% 160px, #fff1c2 0 1.2px, transparent 1.8px) 0 0 / 100% 220px; }
/* 神話 · 天燈 — paper lanterns float up into a dark red night, their flames flickering */
.art-lantern .pc-art { background: radial-gradient(ellipse at 50% 110%, rgba(255,120,60,.45), transparent 60%), linear-gradient(180deg, #12030f, #3a0a1c 60%, #6a1420); }
.art-lantern .pc-art::before { animation: candRise 9s linear infinite, candFlicker 1.6s ease-in-out infinite;
  background: radial-gradient(ellipse 7px 9px at 18% 50px, #ffe2a0 0 35%, #ff9a3a 60%, transparent 75%) 0 0 / 100% 160px, radial-gradient(ellipse 6px 7.5px at 44% 140px, #ffe2a0 0 35%, #ff8a2a 60%, transparent 75%) 0 0 / 100% 200px,
    radial-gradient(ellipse 8px 10px at 70% 30px, #fff0c0 0 35%, #ff9a3a 60%, transparent 75%) 0 0 / 100% 140px, radial-gradient(ellipse 5px 6.5px at 86% 100px, #ffe2a0 0 35%, #ff8a2a 60%, transparent 75%) 0 0 / 100% 180px,
    radial-gradient(ellipse 6.5px 8px at 30% 190px, #ffe2a0 0 35%, #ff9a3a 60%, transparent 75%) 0 0 / 100% 220px; }
.art-lantern .pc-art::after { background: radial-gradient(circle at 12% 12%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 80% 8%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 56% 20%, #fdd 0 .7px, transparent 1.3px); }

/* 至尊 · 煙火大會 — gold fireworks bursting one after another over a night river */
.art-fireworks .pc-art { background: linear-gradient(180deg, #050816, #121a3a 70%, #1c2550 82%, #0a0f24 83%), linear-gradient(90deg, transparent, rgba(255,210,120,.25), transparent) 0 88% / 100% 2px no-repeat; }
.art-fireworks .pc-art::before, .art-fireworks .pc-art::after { inset: auto; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(#ffd76a 0 2deg, transparent 2deg 15deg), radial-gradient(circle, #fff6d0 0 6%, transparent 9%);
  -webkit-mask: radial-gradient(closest-side, transparent 0 30%, #000 40% 92%, transparent 100%), radial-gradient(circle, #000 0 9%, transparent 10%);
          mask: radial-gradient(closest-side, transparent 0 30%, #000 40% 92%, transparent 100%), radial-gradient(circle, #000 0 9%, transparent 10%); }
.art-fireworks .pc-art::before { width: 70%; top: 4%; left: 2%; animation: candBurst 2.8s ease-out infinite; }
.art-fireworks .pc-art::after { width: 56%; top: 18%; right: 0; animation: candBurst 2.8s ease-out 1.4s infinite; filter: hue-rotate(-25deg) saturate(1.3); }

/* 天選 · 蛋白石 — opal: soft colours shift across the stone, flecks of fire glint and a sheen slides over */
.art-opal .pc-art { background: linear-gradient(125deg, #8feaff, #d2b6ff 18%, #9cf5c8 34%, #ffe49a 50%, #ffb0dc 66%, #a9cfff 82%, #8feaff); background-size: 300% 300%; animation: artHolo 8s ease-in-out infinite alternate; }
.art-opal .pc-art::before { animation: artTwinkle 1.6s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 9% 6% at 22% 30%, rgba(20,200,140,.95), transparent 72%), radial-gradient(ellipse 7% 5% at 70% 22%, rgba(255,60,130,.9), transparent 72%),
    radial-gradient(ellipse 10% 6% at 78% 70%, rgba(50,110,255,.9), transparent 72%), radial-gradient(ellipse 6% 4% at 30% 78%, rgba(255,150,20,.95), transparent 72%),
    radial-gradient(ellipse 6% 4% at 52% 54%, rgba(150,60,255,.85), transparent 72%); }
.art-opal .pc-art::after { width: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: candSheen 3.8s ease-in-out infinite; }