/* Plonk cards v2: rarity frames with patterns and motion, full-art / founders / prismatic finishes,
   card backs, packs and the opening ceremony. Sizes use container units so cards scale cleanly. */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes angle { to { --ang: 360deg; } }

.pcard { --w: 240px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  --frame: #d9dcea; --face: linear-gradient(170deg, #fffaf0, #f3ead8); --ink: #2a1a4f; --ink-2: #6d5f8f; --glow: transparent; --pat: none; --patop: 0.5; --rc: #b8c0d9;
  width: var(--w); aspect-ratio: 5 / 7; position: relative; container-type: inline-size; perspective: 900px; user-select: none; flex: none; }
.pc-inner { position: absolute; inset: 0; border-radius: 6cqw; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s var(--spring), box-shadow 0.4s; box-shadow: 0 2.4cqw 0 rgba(0, 0, 0, 0.28), 0 6cqw 12cqw -4cqw rgba(0, 0, 0, 0.55), 0 0 12cqw -2cqw var(--glow); }
.pcard.tilting .pc-inner { transition: transform 0.08s linear, box-shadow 0.4s; }
.pc-front { position: absolute; inset: 0; border-radius: inherit; }
.pc-border { position: absolute; inset: 0; border-radius: inherit; background: var(--frame); overflow: hidden; }
.pc-border::before { content: ''; position: absolute; inset: 0; background: var(--bpat, none); opacity: 0.55; mix-blend-mode: overlay; }
.pc-face { position: absolute; inset: 3.2cqw; border-radius: 4.2cqw; background: var(--face); color: var(--ink); overflow: hidden; display: flex; flex-direction: column; padding: 3.4cqw; gap: 2cqw; isolation: isolate; }
.pc-pattern { position: absolute; inset: 0; z-index: -1; background: var(--pat); opacity: var(--patop); pointer-events: none; }
.pc-top { display: flex; align-items: center; justify-content: space-between; font-size: 4.3cqw; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }
.pc-top .ico { width: 5cqw; height: 5cqw; vertical-align: -0.8cqw; }
.pc-power { display: grid; place-items: center; width: 13.5cqw; height: 13.5cqw; margin: -1cqw -1cqw -1cqw 0; border-radius: 50%; font-family: var(--display); font-size: 6.2cqw; font-weight: 800;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 55%, white), var(--rc) 60%, color-mix(in srgb, var(--rc) 60%, black));
  color: #fff; text-shadow: 0 0.4cqw 0 rgba(0, 0, 0, 0.35); box-shadow: 0 0.8cqw 0 rgba(0, 0, 0, 0.25), inset 0 0 0 0.7cqw rgba(255, 255, 255, 0.35); letter-spacing: 0; }
.pc-art { position: relative; flex: none; height: 52cqw; border-radius: 3.2cqw; overflow: hidden; background: #c9c2b0; box-shadow: inset 0 0 0 0.6cqw rgba(0, 0, 0, 0.12), 0 0.8cqw 0 rgba(0, 0, 0, 0.12); }
.pc-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 0.7s var(--ease); }
.pcard:hover .pc-art img { transform: scale(1.1); }
.pc-art .flag { position: absolute; left: 2.2cqw; bottom: 1.8cqw; font-size: 8.5cqw; line-height: 1; filter: drop-shadow(0 0.6cqw 0 rgba(0, 0, 0, 0.35)); }
.pc-name { font-family: var(--display); font-weight: 800; font-size: 9.4cqw; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 0.4cqw; }
.pc-sub { font-size: 4.3cqw; font-weight: 800; color: var(--ink-2); margin-top: -1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; margin-top: auto; }
.pc-stat { display: grid; justify-items: center; gap: 0.6cqw; padding: 1.4cqw 0 1.2cqw; border-radius: 2.2cqw; background: rgba(0, 0, 0, 0.06); }
.pc-stat b { font-family: var(--display); font-size: 6.2cqw; line-height: 1; color: var(--ink); }
.pc-stat span { font-size: 3.2cqw; font-weight: 900; letter-spacing: 0.06em; color: var(--ink-2); }
.pc-stat i { display: block; width: 72%; height: 0.9cqw; border-radius: 1cqw; background: linear-gradient(90deg, var(--rc) var(--v), rgba(0, 0, 0, 0.12) var(--v)); }
.pc-foot { display: flex; justify-content: space-between; align-items: center; font-size: 4cqw; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.pc-foot .rar { display: flex; align-items: center; gap: 1.2cqw; color: var(--rar, var(--ink)); }
.pc-foot .pips { display: inline-flex; gap: 0.8cqw; }
.pc-foot .pips i { width: 2.2cqw; height: 2.2cqw; transform: rotate(45deg); background: currentColor; border-radius: 0.4cqw; }
.pc-foot .var { padding: 0.4cqw 1.6cqw; border-radius: 2cqw; background: var(--rc); color: #fff; font-size: 3.2cqw; letter-spacing: 0.06em; }
.pc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 3;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%); mix-blend-mode: soft-light; }
.pcard:hover .pc-glare, .pcard.tilting .pc-glare { opacity: 1; }
.pc-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; border-radius: inherit; z-index: 2;
  background: repeating-linear-gradient(115deg, #ff5c8a 0%, #ffd23f 7%, #3ee6a8 14%, #4cc9f0 21%, #b388ff 28%, #ff5c8a 35%);
  background-size: 300% 300%; background-position: var(--mx) var(--my); transition: opacity 0.3s; }
/* the idle shine moves with a transform (GPU, no repaints), so it stays smooth on every card at once */
.pc-shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; display: none; contain: paint; }
.pc-shine::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; will-change: transform;
  background: linear-gradient(105deg, transparent 0%, var(--shine-col, rgba(255, 255, 255, 0.5)) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-10deg); animation: shineMove var(--shine, 6s) cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes shineMove { 0%, 45% { transform: translateX(-140%) skewX(-10deg); } 100% { transform: translateX(260%) skewX(-10deg); } }
[data-motion='reduced'] .pc-shine::before { animation: none; opacity: 0; }
.pc-new { position: absolute; z-index: 6; top: -2.5cqw; right: -2.5cqw; padding: 1.6cqw 3.6cqw; border-radius: 4cqw; background: var(--pink); color: #fff; font-size: 4.8cqw; font-weight: 900;
  box-shadow: 0 1.2cqw 0 var(--pink-d); transform: rotate(8deg); }
.pc-count { position: absolute; z-index: 6; bottom: -2cqw; right: -2cqw; min-width: 11cqw; height: 11cqw; padding: 0 2.6cqw; border-radius: 6cqw; background: var(--accent); color: #1d1240;
  display: grid; place-items: center; font-weight: 900; font-size: 5.4cqw; box-shadow: 0 1cqw 0 var(--accent-d); }
.pc-lock { position: absolute; z-index: 6; top: 3cqw; left: 3cqw; padding: 1cqw 2.4cqw; border-radius: 3cqw; background: rgba(13, 6, 32, 0.85); color: #fff; font-size: 4cqw; font-weight: 900; }
.pc-equipped { position: absolute; z-index: 6; top: -2.5cqw; left: -2.5cqw; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--mint); color: #0f2a22; display: grid; place-items: center;
  box-shadow: 0 1cqw 0 var(--mint-d); font-size: 6cqw; font-weight: 900; }
.pc-ribbon { position: absolute; z-index: 5; top: 7cqw; right: -9cqw; width: 46cqw; padding: 1.2cqw 0; text-align: center; transform: rotate(38deg); font-size: 3.4cqw; font-weight: 900;
  letter-spacing: 0.12em; color: #2a0f2f; background: linear-gradient(90deg, #ffd23f, #ff8fd0, #ffd23f); box-shadow: 0 0.8cqw 0 rgba(0, 0, 0, 0.25); pointer-events: none; }
.pc-corner { position: absolute; z-index: 4; width: 16cqw; height: 16cqw; pointer-events: none; color: #ffe39a; filter: drop-shadow(0 0.5cqw 0 rgba(0, 0, 0, 0.35)); }
.pc-corner svg { width: 100%; height: 100%; }
.pc-corner.tl { top: 1.2cqw; left: 1.2cqw; } .pc-corner.tr { top: 1.2cqw; right: 1.2cqw; transform: scaleX(-1); }
.pc-corner.bl { bottom: 1.2cqw; left: 1.2cqw; transform: scaleY(-1); } .pc-corner.br { bottom: 1.2cqw; right: 1.2cqw; transform: scale(-1); }

@container (max-width: 150px) {
  .pc-stats, .pc-sub, .pc-top span:first-child, .pc-foot .var, .pc-ribbon { display: none; }
  .pc-art { height: 76cqw; }
  .pc-name { font-size: 11cqw; }
  .pc-foot { font-size: 6cqw; }
  .pc-power { width: 18cqw; height: 18cqw; font-size: 8cqw; }
  .pc-corner { width: 20cqw; height: 20cqw; }
}

/* --------------------------------------------------- rarities */
.pcard.r-common { --frame: linear-gradient(160deg, #eef0f7, #b9bfd6); --rar: #6d5f8f; --rc: #9aa2c0;
  --pat: repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.07) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.05) 0 1px, transparent 1px 5px); --patop: 1; }
.pcard.r-uncommon { --frame: linear-gradient(160deg, #a8f7d6, #1fb07c); --face: linear-gradient(170deg, #f4fff9, #daf6e9); --rar: #13915f; --rc: #1fb07c;
  --pat: repeating-linear-gradient(135deg, rgba(31, 176, 124, 0.1) 0 2px, transparent 2px 12px); --patop: 1;
  --bpat: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 8px); }
.pcard.r-uncommon .pc-shine { display: block; --shine: 9s; }
.pcard.r-rare { --frame: linear-gradient(160deg, #b5ecff, #2a8fd6 55%, #7fd6ff); --face: linear-gradient(170deg, #f0fbff, #cfeeff); --rar: #1a78b8; --rc: #2a9fe0; --glow: rgba(76, 201, 240, 0.4);
  --pat: linear-gradient(135deg, rgba(42, 159, 224, 0.12) 25%, transparent 25%) -6cqw 0 / 12cqw 12cqw, linear-gradient(225deg, rgba(42, 159, 224, 0.12) 25%, transparent 25%) -6cqw 0 / 12cqw 12cqw,
    linear-gradient(315deg, rgba(42, 159, 224, 0.12) 25%, transparent 25%) 0 0 / 12cqw 12cqw, linear-gradient(45deg, rgba(42, 159, 224, 0.12) 25%, transparent 25%) 0 0 / 12cqw 12cqw; --patop: 1;
  --bpat: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 10px); }
.pcard.r-rare .pc-holo { opacity: 0.16; }
.pcard.r-rare:hover .pc-holo { opacity: 0.4; }
.pcard.r-rare .pc-shine { display: block; --shine: 6s; }

.pcard.r-epic { --frame: conic-gradient(from var(--ang), #b388ff, #ff8fd0, #6c8cff, #b388ff); --face: linear-gradient(165deg, #2c1466, #4b238f 60%, #2a1060);
  --ink: #fff; --ink-2: #d8c4ff; --rar: #e0ccff; --rc: #b388ff; --glow: rgba(179, 136, 255, 0.6); --patop: 0.6;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8zM14 32l14 8v16l-14 8L0 56V40z' fill='none' stroke='%23c9a8ff' stroke-opacity='.25' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 14cqw auto; }
.pcard.r-epic .pc-border { animation: angle 6s linear infinite; }
.pcard.r-epic .pc-stat { background: rgba(255, 255, 255, 0.08); }
.pcard.r-epic .pc-stat i { background: linear-gradient(90deg, #ff8fd0 0, #b388ff var(--v), rgba(255, 255, 255, 0.14) var(--v)); }
.pcard.r-epic .pc-holo { opacity: 0.14; }
.pcard.r-epic:hover .pc-holo { opacity: 0.4; }
.pcard.r-epic .pc-shine { display: block; --shine: 5s; }
.pcard.r-epic .pc-face::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 45% at 50% 30%, rgba(179, 136, 255, 0.35), transparent 70%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.4; } }

.pcard.r-legendary { --frame: linear-gradient(135deg, #7a4b00, #ffe39a 18%, #c98a14 32%, #fff2c4 50%, #b8770c 66%, #ffe08a 82%, #7a4b00);
  --face: radial-gradient(120% 70% at 50% 25%, #6a420d, #2b1a06 70%); --ink: #ffe9a8; --ink-2: #e2b863; --rar: #ffd166; --rc: #e8a91f; --glow: rgba(255, 181, 71, 0.65);
  --pat: repeating-conic-gradient(from 0deg at 50% 32%, rgba(255, 210, 120, 0.13) 0 6deg, transparent 6deg 18deg); --patop: 1; }
.pcard.r-legendary .pc-border { background-size: 220% 220%; animation: gold 5s ease-in-out infinite; }
@keyframes gold { 50% { background-position: 100% 100%; } }
.pcard.r-legendary .pc-pattern { animation: raySpin 40s linear infinite; inset: -30%; }
@keyframes raySpin { to { transform: rotate(360deg); } }
.pcard.r-legendary .pc-stat { background: rgba(255, 220, 140, 0.1); }
.pcard.r-legendary .pc-stat i { background: linear-gradient(90deg, #c98a14 0, #ffe39a var(--v), rgba(255, 220, 140, 0.15) var(--v)); }
.pcard.r-legendary .pc-name { background: linear-gradient(180deg, #fff6d6, #ffcf5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard.r-legendary .pc-holo { opacity: 0.22; mix-blend-mode: overlay; background: repeating-linear-gradient(115deg, #fff6d6 0%, #ffcf5c 6%, #c98a14 12%, #fff6d6 18%); background-size: 300% 300%; }
.pcard.r-legendary:hover .pc-holo { opacity: 0.5; }
.pcard.r-legendary .pc-shine { display: block; --shine: 3.8s; --shine-col: rgba(255, 240, 190, 0.6); }

.pcard.r-mythic { --frame: conic-gradient(from var(--ang), #ff5c8a, #ffd23f, #3ee6a8, #4cc9f0, #b388ff, #ff5c8a);
  --face: radial-gradient(120% 80% at 20% 0%, #4a1a7a, transparent 60%), radial-gradient(100% 80% at 100% 100%, #7a1450, transparent 55%), #12051f;
  --ink: #fff; --ink-2: #f3c4ff; --rar: #ff9ccf; --rc: #ff5c8a; --glow: rgba(255, 92, 138, 0.8); --patop: 1;
  --pat: radial-gradient(40% 30% at 20% 30%, rgba(255, 92, 138, 0.35), transparent 70%), radial-gradient(40% 30% at 80% 60%, rgba(76, 201, 240, 0.3), transparent 70%),
    radial-gradient(35% 25% at 50% 90%, rgba(62, 230, 168, 0.25), transparent 70%); }
.pcard.r-mythic .pc-pattern { animation: nebula 12s ease-in-out infinite alternate; inset: -20%; }
@keyframes nebula { 50% { transform: translate(8%, -6%) rotate(10deg) scale(1.1); } 100% { transform: translate(-6%, 5%) rotate(-8deg); } }
.pcard.r-mythic .pc-border { animation: angle 3s linear infinite; }
.pcard.r-mythic .pc-border::after { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(3cqw); opacity: 0.8; }
.pcard.r-mythic .pc-inner { animation: mythicGlow 2.4s ease-in-out infinite; }
@keyframes mythicGlow { 50% { box-shadow: 0 2.4cqw 0 rgba(0, 0, 0, 0.28), 0 6cqw 12cqw -4cqw rgba(0, 0, 0, 0.55), 0 0 18cqw 1cqw rgba(179, 136, 255, 0.9); } }
.pcard.r-mythic .pc-power { background: conic-gradient(from var(--ang), #ff5c8a, #ffd23f, #3ee6a8, #4cc9f0, #b388ff, #ff5c8a); animation: angle 3s linear infinite; }
.pcard.r-mythic .pc-stat { background: rgba(255, 255, 255, 0.08); }
.pcard.r-mythic .pc-stat i { background: linear-gradient(90deg, #ff5c8a 0, #ffd23f calc(var(--v) * 0.4), #3ee6a8 calc(var(--v) * 0.7), #4cc9f0 var(--v), rgba(255, 255, 255, 0.12) var(--v)); }
.pcard.r-mythic .pc-name { background: linear-gradient(90deg, #ff9ccf, #ffe08a, #8fffd4, #9bdcff, #d4b8ff, #ff9ccf); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: nameShift 4s linear infinite; }
@keyframes nameShift { to { background-position: 200% 0; } }
.pcard.r-mythic .pc-holo { opacity: 0.22; }
.pcard.r-mythic:hover .pc-holo { opacity: 0.55; }
.pcard.r-mythic .pc-face::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 12%, #fff, transparent), radial-gradient(1px 1px at 60% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, #ffd23f, transparent), radial-gradient(1px 1px at 90% 60%, #8fffd4, transparent), radial-gradient(1.2px 1.2px at 45% 40%, #fff, transparent),
    radial-gradient(1px 1px at 70% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 20% 92%, #ffb4d8, transparent);
  animation: twinkle 2.6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.25; } }
.pcard.r-mythic .pc-shine { display: block; --shine: 3s; }
.pc-sparkle { position: absolute; inset: -6cqw; pointer-events: none; z-index: 7; }
.pc-sparkle i { position: absolute; width: 4cqw; height: 4cqw; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: spark 2.2s ease-in-out infinite; opacity: 0; }
@keyframes spark { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 30% { opacity: 1; transform: scale(1) rotate(45deg); } 60%, 100% { opacity: 0; transform: scale(0.3) rotate(90deg); } }

/* --------------------------------------------------- finishes */
.pcard.f-full .pc-face { padding: 0; }
.pcard.f-full .pc-art { position: absolute; inset: 0; height: auto; border-radius: 0; box-shadow: none; z-index: -1; }
.pcard.f-full .pc-art img { transform: scale(1.08); }
.pcard.f-full .pc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 45%, rgba(10, 4, 30, 0.88) 78%); }
.pcard.f-full .pc-art .flag { top: 16cqw; bottom: auto; left: 3.4cqw; }
.pcard.f-full .pc-top { padding: 3.4cqw 3.4cqw 0; color: #fff; text-shadow: 0 0.5cqw 1cqw rgba(0, 0, 0, 0.6); }
.pcard.f-full .pc-name, .pcard.f-full .pc-sub, .pcard.f-full .pc-stats, .pcard.f-full .pc-foot { margin-left: 3.4cqw; margin-right: 3.4cqw; }
.pcard.f-full .pc-name { margin-top: auto; color: #fff; text-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.7); }
.pcard.f-full .pc-sub { color: rgba(255, 255, 255, 0.82); }
.pcard.f-full .pc-stats { margin-top: 1cqw; }
.pcard.f-full .pc-stat { background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); }
.pcard.f-full .pc-stat b { color: #fff; } .pcard.f-full .pc-stat span { color: rgba(255, 255, 255, 0.75); }
.pcard.f-full .pc-foot { margin-bottom: 3cqw; color: rgba(255, 255, 255, 0.8); }
.pcard.f-full .pc-pattern { z-index: 0; mix-blend-mode: overlay; opacity: 0.5; }
.pcard.f-full .pc-holo { opacity: 0.12; }
.pcard.f-full:hover .pc-holo { opacity: 0.4; }
.pcard.f-full.r-legendary .pc-name, .pcard.f-full.r-mythic .pc-name { filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.7)); }
@container (max-width: 150px) { .pcard.f-full .pc-name { margin-bottom: 1cqw; } .pcard.f-full .pc-art .flag { top: 22cqw; } }
.pcard.f-founders { --bpat: radial-gradient(circle at 20% 30%, #ffd23f 0 1.2cqw, transparent 1.3cqw) 0 0 / 14cqw 14cqw, radial-gradient(circle at 70% 60%, #ff5c8a 0 1cqw, transparent 1.1cqw) 0 0 / 11cqw 11cqw,
  radial-gradient(circle at 40% 80%, #3ee6a8 0 0.9cqw, transparent 1cqw) 0 0 / 9cqw 9cqw; }
.pcard.f-founders .pc-border::before { opacity: 1; mix-blend-mode: normal; animation: confettiDrift 10s linear infinite; }
@keyframes confettiDrift { to { background-position: 0 140cqw, 0 110cqw, 0 90cqw; } }
.pcard.f-prismatic { --frame: linear-gradient(135deg, #e8ecff, #9aa7c7 25%, #ffffff 50%, #9aa7c7 75%, #e8ecff); }
.pcard.f-prismatic .pc-border { background-size: 200% 200%; animation: gold 4s ease-in-out infinite; }
.pcard.f-prismatic .pc-holo { opacity: 0.38; animation: prism 6s linear infinite; background-size: 400% 400%; }
.pcard.f-prismatic:hover .pc-holo { opacity: 0.6; }
@keyframes prism { to { background-position: 400% 0; } }

/* --------------------------------------------------- card backs */
.pc-back { position: absolute; inset: 0; border-radius: 6cqw; display: none; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255, 210, 63, 0.4), transparent 42%), repeating-conic-gradient(from 0deg at 50% 42%, #2c1a66 0 10deg, #241452 10deg 20deg);
  box-shadow: inset 0 0 0 3.2cqw #3d2a85, inset 0 0 0 4.2cqw #ffd23f, 0 2.4cqw 0 rgba(0, 0, 0, 0.28); }
.pc-back svg { width: 34cqw; height: 40cqw; filter: drop-shadow(0 1.4cqw 0 rgba(0, 0, 0, 0.35)); position: relative; }
.pc-back::after { content: 'plonk!'; position: absolute; bottom: 10cqw; font-family: var(--display); font-weight: 800; font-size: 9cqw; color: #ffd23f; text-shadow: 0 0.8cqw 0 rgba(0, 0, 0, 0.35); }
.pc-back.back-retro { background: repeating-linear-gradient(0deg, rgba(120, 90, 40, 0.12) 0 1px, transparent 1px 8cqw), repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.12) 0 1px, transparent 1px 8cqw), #f1dfb4;
  box-shadow: inset 0 0 0 3.2cqw #8a5a2b, inset 0 0 0 4.2cqw #f1dfb4, 0 2.4cqw 0 rgba(0, 0, 0, 0.28); }
.pc-back.back-retro::after { color: #8a5a2b; text-shadow: none; }
.pc-back.back-sunset { background: repeating-linear-gradient(180deg, #ff5c8a 0 8cqw, #ff9f43 8cqw 16cqw, #ffd23f 16cqw 24cqw); }
.pc-back.back-starry { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent),
  radial-gradient(1px 1px at 85% 70%, #fff, transparent), radial-gradient(80% 60% at 50% 40%, #2a3a8a, #0b0f2e); }
.pc-back.back-gold { background: linear-gradient(135deg, #7a4b00, #ffe39a 25%, #c98a14 45%, #fff2c4 60%, #b8770c 80%, #ffe08a); background-size: 200% 200%; animation: gold 5s ease-in-out infinite;
  box-shadow: inset 0 0 0 3.2cqw #5a3600, inset 0 0 0 4.2cqw #ffe39a, 0 2.4cqw 0 rgba(0, 0, 0, 0.28); }
.pc-back.back-pass { background: conic-gradient(from var(--ang), #3ee6a8, #4cc9f0, #b388ff, #ff8fd0, #3ee6a8); animation: angle 6s linear infinite; }
.pcard.flippable.down .pc-front { visibility: hidden; }
.pcard.flippable.down .pc-back { display: grid; }
.pcard.down .pc-new, .pcard.down .pc-sparkle, .pcard.down .pc-count { display: none; }

.pcard.missing .pc-face { filter: grayscale(1) brightness(0.35) contrast(0.9); }
.pcard.missing .pc-border { background: #3d2a85 !important; animation: none; }
.pcard.missing .pc-holo, .pcard.missing .pc-shine, .pcard.missing .pc-sparkle, .pcard.missing .pc-ribbon, .pcard.missing .pc-corner { display: none; }
.pcard.missing .pc-inner { animation: none; box-shadow: 0 2.4cqw 0 rgba(0, 0, 0, 0.28); }
.pcard.missing::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 34cqw; color: rgba(255, 255, 255, 0.25); }
:root[data-motion='reduced'] .pcard * { animation: none !important; }

/* --------------------------------------------------- collection & market grids */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 18px; }
.card-grid .pcard { --w: 100%; cursor: pointer; }
.card-grid .cell { display: grid; gap: 10px; animation: rise 0.6s var(--spring) both; animation-delay: calc(min(var(--i, 0), 24) * 30ms); }
.card-grid .cell .meta { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 800; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.dots i.on { background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filters .input { width: auto; min-width: 170px; padding: 10px 14px; }
.rarity-dots { display: flex; gap: 6px; }
.rarity-dots button { width: 34px; height: 34px; border-radius: 12px; border: 0; cursor: pointer; background: rgba(0, 0, 0, 0.25); display: grid; place-items: center; transition: transform 0.3s var(--spring), box-shadow 0.2s; }
.rarity-dots button i { width: 14px; height: 14px; border-radius: 4px; transform: rotate(45deg); background: var(--rc); }
.rarity-dots button.on { box-shadow: inset 0 0 0 2.5px var(--rc); transform: translateY(-2px); }
.progress-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 22px; }
.progress-strip .ps { padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.progress-strip .ps .nm { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rc); }
.progress-strip .ps .v { font-family: var(--display); font-weight: 800; font-size: 22px; }
.progress-strip .ps .bar { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); overflow: hidden; margin-top: 6px; }
.progress-strip .ps .bar i { display: block; height: 100%; background: var(--rc); border-radius: inherit; }
.card-detail { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.card-detail .pcard { --w: 320px; }
.card-detail .facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0; }
.card-detail .fact { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.card-detail .fact .k { font-size: 11.5px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.card-detail .fact .v { font-family: var(--display); font-weight: 800; font-size: 19px; margin-top: 2px; }
.minimap { height: 160px; border-radius: 16px; overflow: hidden; isolation: isolate; }
.listing-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--accent); }
.price .c { width: 20px; height: 20px; }
.gem { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.set-card { padding: 18px; display: grid; gap: 12px; }
.set-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }

/* --------------------------------------------------- shop & packs */
.shop { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.pack-tile { padding: 22px 20px 20px; display: grid; justify-items: center; gap: 12px; text-align: center; overflow: hidden; }
.pack-tile.limited { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 3px #ff8fd0, 0 0 40px -10px #ff5c8a; }
.pack-tile .odds { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pack-tile .odds span { font-size: 11px; font-weight: 900; padding: 3px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); color: var(--rc); }
.pack { --h: 48; --pw: 150px; width: var(--pw); aspect-ratio: 0.72; position: relative; animation: packIdle 4s ease-in-out infinite; cursor: pointer; }
.pack-tile:hover .pack { animation: packWiggle 0.6s var(--ease); }
@keyframes packIdle { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes packWiggle { 25% { transform: rotate(-5deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.04); } }
.pack .foil { position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, hsl(var(--h) 100% 62%), hsl(calc(var(--h) + 40) 95% 55%) 45%, hsl(calc(var(--h) - 30) 90% 45%));
  clip-path: polygon(0 3%, 4% 0, 8% 3%, 12% 0, 16% 3%, 20% 0, 24% 3%, 28% 0, 32% 3%, 36% 0, 40% 3%, 44% 0, 48% 3%, 52% 0, 56% 3%, 60% 0, 64% 3%, 68% 0, 72% 3%, 76% 0, 80% 3%, 84% 0, 88% 3%, 92% 0, 96% 3%, 100% 0,
    100% 100%, 96% 97%, 92% 100%, 88% 97%, 84% 100%, 80% 97%, 76% 100%, 72% 97%, 68% 100%, 64% 97%, 60% 100%, 56% 97%, 52% 100%, 48% 97%, 44% 100%, 40% 97%, 36% 100%, 32% 97%, 28% 100%, 24% 97%, 20% 100%, 16% 97%, 12% 100%, 8% 97%, 4% 100%, 0 97%); }
.pack .foil::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 8%, rgba(255, 255, 255, 0.35) 10%, rgba(255, 255, 255, 0) 12%);
  background-size: 300% 300%; animation: foil 5s linear infinite; mix-blend-mode: overlay; }
@keyframes foil { to { background-position: 300% 0; } }
.pack .foil::after { content: ''; position: absolute; left: 0; right: 0; top: 9%; height: 2px; background: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
.pack .label { position: absolute; left: 10%; right: 10%; top: 24%; bottom: 18%; border-radius: 12px; background: rgba(29, 18, 64, 0.88); display: grid; place-items: center; align-content: center; gap: 6px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); padding: 8px; color: #fff; text-align: center; }
.pack .label svg { width: 38%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.pack .label b { font-family: var(--display); font-weight: 800; font-size: calc(var(--pw) * 0.1); line-height: 1; }
.pack .label small { font-size: calc(var(--pw) * 0.065); font-weight: 900; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.1em; }
.pack.royal .foil { background: linear-gradient(135deg, #2c0a4a, #7a1fb0 40%, #ff5c8a 70%, #ffd23f); }
.pack.region .foil { background: linear-gradient(135deg, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 25) 85% 50%)); }
.pack.special .foil { background: conic-gradient(from var(--ang) at 50% 40%, #ff5c8a, #ffd23f, #3ee6a8, #4cc9f0, #b388ff, #ff5c8a); animation: angle 6s linear infinite; }
.pack.special .label { box-shadow: inset 0 0 0 2px #ffd23f; }
.pack .stamp { position: absolute; top: 12%; right: -8%; padding: 4px 10px; border-radius: 8px; background: #ff5c8a; color: #fff; font-size: calc(var(--pw) * 0.07); font-weight: 900;
  transform: rotate(12deg); box-shadow: 0 3px 0 #d43566; letter-spacing: 0.05em; z-index: 2; }

.open-stage { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(61, 42, 133, 0.94), rgba(13, 6, 32, 0.98) 70%);
  animation: fadeIn 0.4s var(--ease) both; overflow: hidden; }
.open-stage.out { animation: fadeOut 0.35s var(--ease) both; }
.open-stage .rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--rc, #fff) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 45%); mask: radial-gradient(circle, #000 0, transparent 45%);
  animation: rays 14s linear infinite; transition: opacity 0.6s; }
.open-stage .rays.on { opacity: 0.22; }
@keyframes rays { to { transform: rotate(360deg); } }
.open-stage .pack { --pw: min(260px, 50vw); animation: packFloat 3s ease-in-out infinite; }
@keyframes packFloat { 50% { transform: translateY(-14px) rotate(-2deg) scale(1.02); } }
.open-stage .pack.shake { animation: packShake 0.5s linear infinite; }
@keyframes packShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-6px, 2px) rotate(-3deg); } 40% { transform: translate(5px, -3px) rotate(2deg); } 60% { transform: translate(-4px, 3px) rotate(-2deg); } 80% { transform: translate(6px, -2px) rotate(3deg); } }
.open-stage .pack.burst { animation: packBurst 0.7s var(--ease) forwards; }
@keyframes packBurst { 0% { transform: scale(1); } 40% { transform: scale(1.15); filter: brightness(1.6); } 100% { transform: scale(0.2) translateY(200px); opacity: 0; } }
.open-stage .hint { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); animation: pulse 1.6s ease-in-out infinite; }
.reveal-row { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; gap: clamp(10px, 2vw, 28px); padding: 0 20px; flex-wrap: wrap; }
.reveal-row .slot2 { position: relative; animation: dealIn 0.7s var(--spring) both; animation-delay: calc(var(--i) * 110ms); }
.reveal-row .pcard { --w: clamp(150px, 15vw, 230px); cursor: pointer; }
@keyframes dealIn { from { opacity: 0; transform: translateY(60vh) rotate(calc(var(--i) * 9deg - 20deg)) scale(0.6); } }
.reveal-row .slot2:hover .pcard.down .pc-inner { transform: translateY(-10px) scale(1.04); }
.reveal-row .aura { position: absolute; inset: -18%; border-radius: 30%; background: radial-gradient(circle, var(--rc), transparent 65%); opacity: 0; filter: blur(14px); z-index: -1; transition: opacity 0.6s; pointer-events: none; }
.reveal-row .slot2.revealed .aura { opacity: 0.85; animation: auraPulse 2s ease-in-out infinite; }
@keyframes auraPulse { 50% { transform: scale(1.1); opacity: 0.55; } }
.reveal-row .slot2.tease-epic .pc-inner { animation: tease 0.9s ease-in-out infinite; box-shadow: 0 0 40px 6px #b388ff; }
.reveal-row .slot2.tease-legendary .pc-inner { animation: tease 0.7s ease-in-out infinite; box-shadow: 0 0 50px 10px #ffb547; }
.reveal-row .slot2.tease-mythic .pc-inner { animation: tease 0.45s ease-in-out infinite; box-shadow: 0 0 70px 16px #ff5c8a; }
@keyframes tease { 50% { transform: translateY(-6px) rotate(1.5deg); } }
.burst-ring { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; border: 6px solid var(--rc); pointer-events: none; z-index: 8;
  animation: ring 0.8s var(--ease) forwards; }
@keyframes ring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(3.2); opacity: 0; border-width: 1px; } }
.reveal-label { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--rc); white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); animation: pop 0.5s var(--spring) both; text-align: center; }
.reveal-label small { display: block; font-size: 12px; color: #fff; opacity: 0.85; }
.open-actions { position: absolute; bottom: 7vh; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.flash { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--fc, #fff); animation: flash 0.9s var(--ease) forwards; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.stage-shake { animation: stageShake 0.5s linear; }
@keyframes stageShake { 20% { transform: translate(-10px, 6px); } 40% { transform: translate(9px, -7px); } 60% { transform: translate(-7px, 5px); } 80% { transform: translate(6px, -4px); } }
.mythic-banner { position: absolute; top: 9vh; left: 0; right: 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7vw, 86px); letter-spacing: -0.03em;
  background: linear-gradient(90deg, #ff5c8a, #ffd23f, #3ee6a8, #4cc9f0, #b388ff, #ff5c8a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nameShift 2s linear infinite, pop 0.8s var(--spring) both; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4)); pointer-events: none; }

.trade-card { padding: 18px; display: grid; gap: 14px; }
.trade-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.trade-side { padding: 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.2); min-height: 120px; }
.trade-side .mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.trade-side .mini .pcard { --w: 64px; }
.swap-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #1d1240; display: grid; place-items: center; box-shadow: 0 4px 0 var(--accent-d); }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; max-height: 360px; overflow: auto; padding: 8px; }
.picker .pcard { --w: 100%; cursor: pointer; transition: transform 0.25s var(--spring); }
.picker .pcard.sel { transform: translateY(-4px) scale(1.04); }
.picker .pcard.sel::before { content: '✓'; position: absolute; z-index: 8; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: #0f2a22;
  display: grid; place-items: center; font-weight: 900; box-shadow: 0 3px 0 var(--mint-d); }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }

/* ---------------------------------------------------------------- Mythic+ : furious red, huge aura, a living scene */
.pcard.r-mythicplus { --frame: conic-gradient(from var(--ang), #3a0008, #c8102e, #ff3b2a, #ffb547, #c8102e, #3a0008); --rc: #c8102e; }
.pcard.r-mythicplus .pc-border { animation: angle 2s linear infinite; }
.pcard.r-mythicplus .pc-border::after { content: ''; position: absolute; inset: -6%; background: inherit; filter: blur(5cqw); opacity: .95; animation: apex-aura 1.6s ease-in-out infinite; }
@keyframes apex-aura { 50% { opacity: .55; transform: scale(1.04); } }
.pcard.r-mythicplus .pc-inner { box-shadow: 0 0 6cqw rgba(200, 16, 46, .9), 0 0 14cqw rgba(255, 59, 42, .45); }
/* the pulse is a glow layer fading in and out (opacity only: smooth, no repaints) */
.pcard.r-mythicplus::before, .pcard.r-unique::before { content: ''; position: absolute; inset: 0; border-radius: 5cqw; pointer-events: none; z-index: -1; will-change: opacity;
  box-shadow: 0 0 9cqw rgba(255, 30, 40, 1), 0 0 22cqw rgba(255, 90, 40, .55); opacity: 0; animation: glow-pulse 2.2s ease-in-out infinite; }
.pcard.r-unique::before { box-shadow: 0 0 10cqw rgba(255, 230, 150, 1), 0 0 26cqw rgba(255, 250, 220, .5); animation-duration: 3s; }
@keyframes glow-pulse { 50% { opacity: 1; } }
.pcard.r-mythicplus .pc-name, .pcard.r-mythicplus .pc-rar { color: #ff4a4a !important; text-shadow: 0 0 2cqw #c8102e; }
.apex { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.apex i { position: absolute; display: block; }
.apex-waterfall i { left: var(--x); top: -40%; width: 3%; height: 60%; background: linear-gradient(transparent, rgba(220,245,255,.85), transparent); animation: apex-fall .9s var(--d) linear infinite; }
@keyframes apex-fall { to { transform: translateY(240%); } }
.apex-lava i { left: var(--x); bottom: -10%; width: 3cqw; height: 3cqw; border-radius: 50%; background: radial-gradient(#ffe066, #ff3b1a 60%, transparent 70%); animation: apex-rise 2.4s var(--d) ease-in infinite; }
.apex-lava::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,60,10,.55), transparent 60%); animation: apex-aura 1.4s ease-in-out infinite; }
@keyframes apex-rise { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-90cqw) scale(1.4); opacity: 0; } }
.apex-blizzard i { left: var(--x); top: -5%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #fff; animation: apex-snow 2.2s var(--d) linear infinite; }
@keyframes apex-snow { to { transform: translate(-30cqw, 160cqw); } }
.apex-waves i { left: -10%; right: -10%; top: calc(30% + var(--i) * 12%); height: 3cqw; border-radius: 50%; border-top: .8cqw solid rgba(255,255,255,.55); animation: apex-wave 2.4s var(--d) ease-in-out infinite; }
@keyframes apex-wave { 50% { transform: translateX(8%) scaleY(1.6); } }
.apex-heat i { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6cqw, rgba(255,200,120,.12) 6cqw 8cqw); animation: apex-heat 1.8s var(--d) ease-in-out infinite; }
@keyframes apex-heat { 50% { transform: translateY(-3cqw) skewX(3deg); } }
.apex-mist i { left: calc(var(--x) - 30%); top: calc(30% + var(--i) * 10%); width: 90%; height: 20%; border-radius: 50%; background: radial-gradient(rgba(255,255,255,.4), transparent 70%); animation: apex-mist 6s var(--d) ease-in-out infinite alternate; }
@keyframes apex-mist { to { transform: translateX(40%); } }
.apex-rays i { left: calc(var(--i) * 22%); top: -20%; width: 10%; height: 160%; background: linear-gradient(rgba(255,230,160,.45), transparent); transform: rotate(18deg); animation: apex-ray 3s var(--d) ease-in-out infinite; }
@keyframes apex-ray { 50% { opacity: .3; } }
.mythic-banner.plus { color: #ff3b2a !important; text-shadow: 0 0 30px #c8102e, 0 6px 0 #3a0008 !important; }

/* ---------------------------------------------------------------- Unique: one of one. Obsidian and living gold */
.pcard.r-unique { --frame: conic-gradient(from var(--ang), #0b0905, #f5d77a, #fff6d0, #b8862b, #0b0905, #f5d77a, #fff6d0, #0b0905); --rc: #f5d77a; }
.pcard.r-unique .pc-border { animation: angle 3.2s linear infinite; }
.pcard.r-unique .pc-border::after { content: ''; position: absolute; inset: -7%; background: inherit; filter: blur(6cqw); opacity: .9; animation: apex-aura 2.4s ease-in-out infinite; }
.pcard.r-unique .pc-inner { box-shadow: 0 0 7cqw rgba(245, 215, 122, .85), 0 0 18cqw rgba(255, 246, 208, .35); }
.pcard.r-unique .pc-face { background: radial-gradient(120% 80% at 50% 0%, #2b2210, #0b0905 70%); }
.pcard.r-unique .pc-name { background: linear-gradient(100deg, #b8862b, #fff6d0 30%, #f5d77a 50%, #fff6d0 70%, #b8862b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: unique-foil 3.5s linear infinite; text-shadow: none; filter: drop-shadow(0 0.5cqw 0 rgba(0, 0, 0, .7)); }
@keyframes unique-foil { to { background-position: -200% 0; } }
.pcard.r-unique .pc-rar, .pcard.r-unique .pc-foot { color: #f5d77a !important; }
.pcard.r-unique .pips.crown { font-size: 5cqw; line-height: 1; filter: drop-shadow(0 0 1.5cqw #f5d77a); }
.pcard.r-unique .pc-holo { background: repeating-linear-gradient(115deg, transparent 0 6%, rgba(255, 240, 190, .16) 8%, transparent 11%); mix-blend-mode: screen; opacity: 1; animation: unique-foil 6s linear infinite; background-size: 200% 200%; }
.pc-ribbon.unique { background: linear-gradient(90deg, #b8862b, #f5d77a, #fff6d0, #f5d77a, #b8862b) !important; color: #1a1306 !important; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mythic-banner.unique { color: #f5d77a !important; text-shadow: 0 0 34px #fff2b0, 0 6px 0 #3a2a08 !important; letter-spacing: .02em; }
.pcard.r-unique .pc-foot .rar, .pcard.r-unique .pc-foot > span:last-child { color: #f5d77a !important; text-shadow: 0 0 1.5cqw rgba(245, 215, 122, .6); }
.pcard.r-unique .pips.crown { color: #f5d77a; }
.pcard.r-unique .u-title { color: #fff6d0; font-weight: 900; letter-spacing: .02em; text-shadow: 0 0 2cqw rgba(245, 215, 122, .8); }
.pcard .var.u { background: linear-gradient(90deg, #b8862b, #fff6d0, #b8862b) !important; color: #1a1306 !important; }
.pcard.r-unique .pc-power { background: radial-gradient(#fff6d0, #b8862b) !important; color: #1a1306 !important; }
.pcard.r-mythicplus .pc-foot .rar { color: #ff4a4a !important; text-shadow: 0 0 1.5cqw #c8102e; }

/* packs: a photo window of what is inside, with the Plonk pin as a seal */
.pack .label .pk-photo { position: relative; width: 82%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 4px 10px rgba(0, 0, 0, .4); }
.pack .label .pk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 4s ease-out; }
.pack:hover .label .pk-photo img { transform: scale(1.1); }
.pack .label .pk-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 62%); background-size: 250% 100%; animation: pk-gleam 4.5s ease-in-out infinite; }
@keyframes pk-gleam { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.pack .label .pk-pin { position: absolute; right: 4%; bottom: 4%; width: 24%; } .pack .label .pk-pin svg { width: 100%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }

/* packs: more breathing room between photo and name; long names (North America…) get a smaller size and wrap neatly */
.pack .label { gap: calc(var(--pw) * 0.045); padding: calc(var(--pw) * 0.06) calc(var(--pw) * 0.04); }
.pack .label .pk-photo { width: 76%; margin-bottom: calc(var(--pw) * 0.02); }
.pack .label b { text-align: center; line-height: 1.05; padding: 0 4%; }
.pack .label b.long { font-size: calc(var(--pw) * 0.08); }