/* Pip's cards: shared by the home page section (#cards) and the full page (/cards/). */
.pc-row, .pc-grid, .pc-feat { --gold1:#fbe58a; --gold2:#e7b928; --gold3:#b9860c; }
.pc-row { display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 8px;
          padding:30px 8px 26px; margin:0 -8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
          -webkit-mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent);
                  mask-image:linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent); }
.pc-row .pc-slot { flex:none; width:min(232px, 66vw); scroll-snap-align:start; }
.pc-row .pc-slot.featured { width:min(262px, 74vw); }
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:26px 22px; padding:10px 0 24px; }
.pc-grid .pc-slot { width:100%; max-width:330px; margin:0 auto; }
.pc-slot { position:relative; perspective:1000px; align-self:center; }
.pc-slot.featured::before { content:"\2728 Newest"; position:absolute; top:-24px; left:50%; transform:translateX(-50%); z-index:3;
          font-size:.78rem; font-weight:800; letter-spacing:.02em; color:#1d1606; padding:2px 11px; border-radius:999px; white-space:nowrap;
          background:linear-gradient(180deg,#fff3b8,#f3cd4a); box-shadow:0 0 14px rgba(255,220,120,.45); }
.pc-spark { position:absolute; z-index:3; width:14px; height:14px; pointer-events:none; color:#fff6cf;
          filter:drop-shadow(0 0 4px rgba(255,236,160,.9)); animation:pc-spark 2.8s ease-in-out infinite; }
.pc-spark svg { width:100%; height:100%; display:block; }
@keyframes pc-spark { 0%,100% { opacity:.25; transform:scale(.6) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(25deg); } }

.pc { position:relative; display:block; width:100%; aspect-ratio:63/88; container-type:inline-size; cursor:pointer; outline:none;
      border-radius:4.6% / 3.3%; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
      transition:transform .5s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color:transparent; touch-action:pan-y;
      color:#1b1a20; font-family:"Nunito", ui-rounded, system-ui, sans-serif; line-height:1.15; text-align:left; text-shadow:none; }
.pc.live { transition:transform .08s linear; }
.pc:focus-visible { box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(140,170,255,.8); }
.pc-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,.7,.2,1); border-radius:inherit; }
.pc.flipped .pc-inner { transform:rotateY(180deg); }
.pc-face { position:absolute; inset:0; border-radius:inherit; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden;
      box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35); }
.pc-back { transform:rotateY(180deg); }
.pc-back svg { display:block; width:100%; height:100%; }

/* front: yellow outer border, type-tinted body */
.pc-front { padding:3.9cqw; background:linear-gradient(145deg, var(--gold1), var(--gold2) 45%, #f6d65a 70%, var(--gold3)); }
.pc-body { position:relative; height:100%; display:flex; flex-direction:column; border-radius:2.2cqw; overflow:hidden; padding:1.6cqw 2.4cqw 1.4cqw;
      background:
        radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0)),
        linear-gradient(170deg, color-mix(in srgb, var(--t) 38%, #fff) 0%, color-mix(in srgb, var(--t) 62%, #fff) 48%, color-mix(in srgb, var(--t) 72%, var(--td)) 100%); }
.pc-body::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:soft-light;
      background:repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.6) 0, rgba(255,255,255,.25) .22cqw, rgba(255,255,255,0) .55cqw 2.5cqw); }
.pc-body > * { position:relative; }
.pc[data-rarity="rare"] .pc-body, .pc[data-rarity="ultra"] .pc-body { background:
        radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255,255,255,.7), rgba(255,255,255,0)),
        linear-gradient(170deg, #f4f5fb 0%, color-mix(in srgb, var(--t) 40%, #e9ecf5) 50%, color-mix(in srgb, var(--t) 60%, #b9bfd0) 100%); }

.pc-top { display:flex; align-items:center; gap:1.4cqw; min-height:9cqw; }
.pc-stg { flex:none; font-size:3.1cqw; font-weight:800; font-style:italic; letter-spacing:.03em; padding:.5cqw 1.8cqw .5cqw 1.4cqw;
      color:#2b2b33; background:linear-gradient(180deg,#ffffff,#c9ccd6); border-radius:.8cqw 2.6cqw 2.6cqw .8cqw; box-shadow:0 0 0 .25cqw rgba(0,0,0,.25); }
.pc-stg:has(.pc-gm) { display:flex; flex-direction:column; align-items:center; line-height:1; padding-top:.6cqw; padding-bottom:.7cqw; }
.pc-gm { display:flex; gap:.55cqw; margin-top:.55cqw; font-style:normal; }
.pc-gm b { width:2.3cqw; height:2.3cqw; border-radius:50%; box-sizing:border-box; border:.45cqw solid #6b6f80; background:#fff; }
.pc-gm b.on { border-color:#b07a00; background:radial-gradient(circle at 35% 35%,#fff6c0,#ffc93a 60%,#e09a00); }
.pc-gm b[data-here] { box-shadow:0 0 0 .3cqw rgba(255,200,60,.55),0 0 1.4cqw .3cqw rgba(255,190,40,.8); }
.pc-gm.many { gap:.35cqw; } .pc-gm.many b { width:1.5cqw; height:1.5cqw; border-width:.35cqw; }
.pc-name { flex:1; min-width:0; font-size:calc(6.1cqw * var(--nf, 1)); font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-glow { flex:none; display:flex; align-items:baseline; gap:.6cqw; font-weight:800; color:#c4161c; }
.pc-glow small { font-size:3.2cqw; letter-spacing:.02em; }
.pc-glow b { font-size:6.4cqw; letter-spacing:-.03em; color:#1b1a20; }
.pc-ti { flex:none; width:7cqw; height:7cqw; }
.pc-from { font-size:2.9cqw; font-style:italic; font-weight:700; margin:-1cqw 0 .6cqw 1cqw; opacity:.8; }

.ic { display:inline-block; border-radius:50%; vertical-align:middle;
      background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, var(--d));
      box-shadow:0 0 0 .3cqw rgba(0,0,0,.35), inset 0 -.4cqw .6cqw rgba(0,0,0,.25); }
.ic svg { display:block; width:100%; height:100%; }

.pc-art { position:relative; aspect-ratio:16/10.6; min-height:0; flex:none; padding:.9cqw; margin:0 .6cqw; border-radius:.6cqw;
      background:linear-gradient(135deg,#fff3b0,#c8961a 30%,#fbe08a 55%,#a87a10 80%,#f3d570);
      box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.35); }
.pc-art-in { position:relative; width:100%; height:100%; overflow:hidden; background:#0b0b1e; }
/* art window sits above the card-face foil so the creature isn't washed out; it has its own masked foil */
.pc-face > .pc-body .pc-art { z-index:1; }
/* art window depth: inner shadow + soft edge vignette so the outlined creature sits forward */
.pc-art-in::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
      box-shadow:inset 0 0 0 .25cqw rgba(10,6,28,.45), inset 0 .6cqw 1.6cqw rgba(0,0,0,.22), inset 0 0 4cqw rgba(8,4,24,.14); }
.pc-art-in img { filter:saturate(1.06) contrast(1.04); }
.pc-art img { display:block; width:100%; height:100%; object-fit:cover; }
.pc-pulse { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
      background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,240,180,.75), rgba(255,226,140,.28) 15%, rgba(255,220,140,0) 32%);
      animation:pc-pulse 2.8s ease-in-out infinite; }
.pc-stars { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
      background:
        radial-gradient(circle at 12% 18%, #fff 0 .5cqw, transparent .8cqw), radial-gradient(circle at 84% 14%, #fff 0 .4cqw, transparent .7cqw),
        radial-gradient(circle at 90% 70%, #fff 0 .45cqw, transparent .75cqw), radial-gradient(circle at 22% 80%, #fff 0 .35cqw, transparent .65cqw),
        radial-gradient(circle at 64% 30%, #fff 0 .3cqw, transparent .6cqw);
      animation:pc-twinkle 2.8s ease-in-out infinite; animation-delay:-1.4s; }
@keyframes pc-pulse { 0%,100% { opacity:.18; } 50% { opacity:.55; } }
@keyframes pc-twinkle { 0%,100% { opacity:.15; } 50% { opacity:.85; } }
.pc[data-rarity="rare"] .pc-pulse, .pc[data-rarity="ultra"] .pc-pulse { animation-name:pc-pulse-r; }
.pc[data-rarity="rare"] .pc-stars, .pc[data-rarity="ultra"] .pc-stars { animation-name:pc-twinkle-r; }
@keyframes pc-pulse-r { 0%,100% { opacity:.25; } 50% { opacity:.75; } }
@keyframes pc-twinkle-r { 0%,100% { opacity:.25; } 50% { opacity:1; } }
.pc[data-rarity="rare"] .pc-face.pc-front, .pc[data-rarity="ultra"] .pc-face.pc-front { animation:pc-aura 2.8s ease-in-out infinite; }
@keyframes pc-aura { 0%,100% { box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35), 0 0 10px rgba(255,236,170,.15); }
                     50% { box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35), 0 0 26px rgba(255,236,170,.55); } }

.pc-info { margin:.9cqw 3cqw 0; padding:.55cqw 2cqw; text-align:center; font-size:calc(2.8cqw * var(--nf, 1)); font-style:italic; font-weight:800; color:#3a2c05;
      background:linear-gradient(180deg,#fff0a6,#e3b734); clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pc-atks { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; padding:.6cqw .6cqw 0; min-height:0; }
.pc-atk { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:1.8cqw; }
.pc-cost { display:flex; gap:.6cqw; min-width:9cqw; }
.pc-cost .ic { width:4.6cqw; height:4.6cqw; }
.pc-an { font-size:calc(4.5cqw * var(--nf, 1)); font-weight:800; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-ad { font-size:5.4cqw; font-weight:800; letter-spacing:-.02em; min-width:6cqw; text-align:right; }
.pc-at { grid-column:1 / -1; font-size:3.45cqw; font-weight:700; line-height:1.18; margin-top:.4cqw; }

.pc-wrr { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5cqw 1cqw; padding:.8cqw .6cqw .4cqw; margin-top:.5cqw;
      border-top:.35cqw solid rgba(0,0,0,.28); font-size:2.75cqw; font-weight:800; text-align:center; line-height:1.05; }
.pc-wrr span { display:block; opacity:.75; letter-spacing:.02em; }
.pc-wrr div { display:flex; justify-content:center; align-items:center; gap:.6cqw; min-height:4.8cqw; font-size:3.5cqw; }
.pc-wrr .ic { width:4.6cqw; height:4.6cqw; }
.pc-flavor { margin:.4cqw .4cqw 0; padding:.7cqw 1.6cqw; border:.35cqw solid rgba(170,125,20,.75); border-radius:.6cqw;
      background:rgba(255,255,255,.4); font-size:2.85cqw; font-style:italic; font-weight:700; line-height:1.2; }
.pc-foot { display:flex; justify-content:space-between; gap:2cqw; margin-top:.7cqw; font-size:2.6cqw; font-weight:800; opacity:.9; white-space:nowrap; }
.pc-foot span { overflow:hidden; text-overflow:ellipsis; }
.pc-foot b { font-size:3cqw; }

/* v4 shine: rainbow foil on the frame (.pc-front > .pc-holo), behind the text (.pc-body::after) and on the art
   background (.pc-art .pc-holo, masked off the creature with its own cutout --fm); white glare + specular hotspot
   follow the pointer / finger / phone tilt (--mx/--my); a glint sweeps across on tap. --sh by rarity, --st by stage. */
.pc { --sh:.55; --st:1; }
.pc[data-rarity="uncommon"] { --sh:.75; } .pc[data-rarity="rare"] { --sh:1; } .pc[data-rarity="ultra"] { --sh:1.3; }
.pc[data-stage="STAGE 1"] { --st:1.15; } .pc[data-stage="STAGE 2"] { --st:1.32; }
.pc-holo, .pc-glare, .pc-spec, .pc-sweep { position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.pc-front > .pc-body { z-index:1; }
.pc-body > * { z-index:1; }
.pc-holo, .pc-body::after {
      background:
        repeating-linear-gradient(115deg, #ff4796 0%, #ffcc2e 3.5%, #3dff8f 7%, #2ec8ff 10.5%, #9a5fff 14%, #ff4796 17.5%),
        repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0, rgba(255,255,255,.14) .16cqw, rgba(255,255,255,0) .4cqw 1.4cqw);
      background-size:300% 300%, 100% 100%;
      background-position:calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), 0 0; }
.pc-front > .pc-holo { z-index:0; mix-blend-mode:hard-light; opacity:calc(.22 + .26 * var(--sh) * var(--st)); }
.pc-body::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:soft-light; opacity:calc(.25 + .4 * var(--sh) * var(--st)); }
.pc-art .pc-holo { mix-blend-mode:color-dodge; opacity:calc(.1 + .29 * var(--sh) * var(--st));
      -webkit-mask:var(--fm) center / cover no-repeat; mask:var(--fm) center / cover no-repeat; }
.pc-glare { z-index:3; mix-blend-mode:overlay; opacity:0; transition:opacity .35s;
      background:
        radial-gradient(farthest-corner circle at calc(var(--mx,50) * 1%) calc(var(--my,50) * 1%), rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 18%, rgba(255,255,255,0) 52%),
        linear-gradient(calc(var(--mx,50) * 1.2deg + 60deg), rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 62%); }
.pc-spec { z-index:3; mix-blend-mode:screen; opacity:0; transition:opacity .35s;
      background:radial-gradient(circle at calc(var(--mx,50) * 1%) calc(var(--my,50) * 1%), rgba(255,255,255,.62) 0%, rgba(255,250,230,.22) 10%, rgba(255,255,255,0) 26%); }
.pc.live .pc-glare, .pc.gyro .pc-glare { opacity:1; }
.pc.live .pc-spec, .pc.gyro .pc-spec { opacity:calc(.45 + .25 * var(--sh)); }
.pc.gyro .pc-glare { opacity:.75; }
.pc.live .pc-front > .pc-holo, .pc.gyro .pc-front > .pc-holo { opacity:calc(.3 + .32 * var(--sh) * var(--st)); }
.pc.live .pc-art .pc-holo, .pc.gyro .pc-art .pc-holo { opacity:calc(.16 + .34 * var(--sh) * var(--st)); }
/* parallax: transparent creature cutout (art/<name>.fg.webp, lazy) floats a little above the art on tilt;
   offsets are % of the art box so they scale with the card and the viewer zoom (max ~1.5% = ~5px on a big card) */
.pc-art .pc-fg { position:absolute; inset:0; opacity:0; pointer-events:none; transform:translate3d(0,0,0);
      transition:opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); }
.pc-art .pc-fg.on { opacity:1; }
.pc.live .pc-art .pc-fg, .pc.gyro .pc-art .pc-fg { transform:translate3d(calc((var(--mx,50) - 50) * .03%), calc((var(--my,50) - 50) * .03%), 0); }
.pc.live .pc-art .pc-fg { transition:opacity .3s, transform .14s cubic-bezier(.2,.7,.3,1); }
/* glint sweep on tap */
.pc-sweep { z-index:4; opacity:0; background-repeat:no-repeat;
      background-image:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 49%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.85) 51%, rgba(255,255,255,0) 60%);
      background-size:300% 100%; background-position:100% 0; mix-blend-mode:soft-light; }
.pc-sweep::before, .pc-sweep::after { content:""; position:absolute; width:16%; aspect-ratio:1; opacity:0;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
      filter:drop-shadow(0 0 2cqw #fff6c8); }
.pc-sweep::before { left:14%; top:20%; } .pc-sweep::after { right:12%; top:58%; width:11%; }
.pc.glint .pc-sweep { animation:pc-sweep .85s cubic-bezier(.3,.6,.3,1); }
.pc.glint .pc-sweep::before { animation:pc-twk .85s ease-out .1s; } .pc.glint .pc-sweep::after { animation:pc-twk .85s ease-out .3s; }
@keyframes pc-sweep { 0% { opacity:1; background-position:100% 0; } 100% { opacity:1; background-position:0% 0; } }
@keyframes pc-twk { 0% { opacity:0; transform:scale(.2) rotate(0); } 40% { opacity:1; transform:scale(1) rotate(45deg); } 100% { opacity:0; transform:scale(.4) rotate(90deg); } }
@media (hover:none) {
  .pc[data-rarity="rare"]:not(.gyro):not(.live) .pc-holo, .pc[data-rarity="ultra"]:not(.gyro):not(.live) .pc-holo { animation:pc-sheen 6s ease-in-out infinite alternate; }
  @keyframes pc-sheen { from { background-position:0% 10%, 0 0; } to { background-position:100% 90%, 0 0; } }
}

/* galaxy legend on the full page */
.pc-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; margin:6px 0 0; padding:0; }
.pc-legend li { display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700; color:#e4e4ea; padding:4px 11px 4px 5px;
      border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.pc-legend .ic { width:20px; height:20px; box-shadow:0 0 0 1px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce) {
  .pc, .pc-inner { transition:none; }
  .pc-pulse, .pc-stars, .pc-spark, .pc-holo, .pc-face.pc-front, .pd-box, .pd-box .pc-holo, .pc-sweep, .pc-sweep::before, .pc-sweep::after { animation:none !important; }
  .pc-pulse { opacity:.45; } .pc-stars { opacity:.5; }
  .pc-art .pc-fg { display:none; }
}

/* galaxy tint on reused lesson art, locked stages, the NOVA mark */
.pc-tint { position:absolute; inset:0; pointer-events:none; mix-blend-mode:color; opacity:.38; background:linear-gradient(160deg, var(--t), var(--td)); }
.pc-mark { font-style:italic; font-weight:900; font-size:.82em; letter-spacing:.02em; background:linear-gradient(90deg,#ff7ac8,#ffd36b,#7dffb0,#6bd6ff,#c08bff);
      -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.12cqw rgba(0,0,0,.45); }
.pc.ultra .pc-front { background:linear-gradient(135deg,#fff3b0,#ff9ad5 25%,#9fe6ff 50%,#c8a2ff 75%,#ffe680); }

.pc.locked .pc-body { background:linear-gradient(170deg,#3a3550,#24203a 55%,#15131f); color:#e9e6f6; }
.pc.locked .pc-glow b, .pc.locked .pc-glow { color:#ffe38a; }
.pc.locked .pc-flavor { background:rgba(255,255,255,.06); border-color:rgba(255,227,138,.45); }
.pc.locked .pc-wrr { border-top-color:rgba(255,255,255,.2); }
.pc-locked-art { display:grid; place-items:center; background:radial-gradient(circle at 50% 45%, #2b2450, #0b0a18 70%); }
.pc-sil { width:52%; filter:drop-shadow(0 0 2.4cqw rgba(255,230,150,.35)); }
.pc-lock { position:absolute; bottom:2cqw; left:50%; transform:translateX(-50%); font-size:3.3cqw; font-weight:800; color:#ffe9a8; white-space:nowrap;
      padding:.4cqw 2cqw; border-radius:99px; background:rgba(0,0,0,.45); }
.pc-copy { position:absolute; z-index:3; top:-9px; right:6px; font-size:.72rem; font-weight:800; color:#e8e8f0; padding:1px 8px; border-radius:99px;
      background:rgba(20,20,30,.85); border:1px solid rgba(255,255,255,.18); }

/* trainer + special energy layout */
.pc-tr { background:linear-gradient(170deg,#f6f7fb,#dfe3ee 55%,#c3c9d8); }
.pc-tr[data-sub="SUPPORTER"] { background:linear-gradient(170deg,#fff1f0,#ffd4cf 55%,#f3aaa3); }
.pc-tr[data-sub="STADIUM"] { background:linear-gradient(170deg,#eefbf1,#c9efd4 55%,#9fd9b0); }
.pc-tr[data-sub="TOOL"] { background:linear-gradient(170deg,#f6f0ff,#e0d2ff 55%,#c2aaf2); }
.pc-sp { background:linear-gradient(170deg,#fffbe9,#f3e6b0 55%,#d9c27a); }
.pc-tr .pc-top { justify-content:space-between; min-height:7cqw; }
.pc-sub { font-size:3.1cqw; font-weight:900; letter-spacing:.06em; padding:.4cqw 2cqw; border-radius:99px; color:#fff; background:#2d2d3a; }
.pc-tname { font-size:calc(6.4cqw * var(--nf, 1)); font-weight:900; letter-spacing:-.02em; margin:.4cqw .6cqw 1.2cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-text { flex:1; margin:1.6cqw .6cqw 0; padding:2cqw 2.4cqw; border-radius:1cqw; background:rgba(255,255,255,.6); font-size:3.75cqw; font-weight:700; line-height:1.24; min-height:0; overflow:hidden; }
.pc-text p { margin:0 0 1.4cqw; }
.pc-text .pc-fl { font-size:3.1cqw; font-style:italic; font-weight:600; opacity:.85; margin:0; }
.pc-rule { margin:1cqw .6cqw 0; font-size:2.8cqw; font-weight:800; line-height:1.2; opacity:.8; }
.pc-en-art { display:flex; align-items:center; justify-content:center; gap:3cqw; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--t) 50%, #1a1440), #0b0a1c 75%); }
.pc-en-art .pc-en-ic { width:22cqw; height:22cqw; }

/* basic energy: full art, CSS only */
.pc-energy.basic .pc-front { padding:2.4cqw; }
.pc-en { position:relative; height:100%; border-radius:2.6cqw; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
      background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t) 85%, #fff) 0%, var(--t) 18%, var(--td) 52%, #0a0818 100%); padding:3cqw; }
.pc-en-dots i { position:absolute; width:calc(var(--s) * .5cqw); height:calc(var(--s) * .5cqw); border-radius:50%; background:#fff; opacity:.7; animation:pc-twinkle 2.8s ease-in-out infinite; }
.pc-en-dots i:nth-child(3n) { animation-delay:-1.2s; } .pc-en-dots i:nth-child(3n+1) { animation-delay:-2s; }
.pc-en-tag { position:absolute; top:4cqw; left:5cqw; font-size:3.5cqw; font-weight:900; letter-spacing:.1em; opacity:.9; }
.pc-en .pc-en-ic { width:44cqw; height:44cqw; box-shadow:0 0 0 1cqw rgba(255,255,255,.35), 0 0 10cqw color-mix(in srgb, var(--t) 70%, transparent); animation:pc-en 2.8s ease-in-out infinite; }
@keyframes pc-en { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.pc-en-name { margin-top:7cqw; font-size:6.4cqw; font-weight:900; text-align:center; text-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.6); }
.pc-en .pc-foot { position:absolute; left:5cqw; right:5cqw; bottom:3.4cqw; color:#fff; }

/* deck boxes */
.pd-row, .pd-grid { display:grid; gap:14px; list-style:none; margin:0; padding:0; }
.pd-row { grid-template-columns:repeat(2, minmax(0,1fr)); }
.pd-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:18px; }
.pd-box { position:relative; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; text-decoration:none; color:#f4f4f6;
      background:linear-gradient(165deg, color-mix(in srgb, var(--t) 34%, #14121f), color-mix(in srgb, var(--td) 60%, #0b0a14));
      border:1px solid color-mix(in srgb, var(--t) 45%, transparent); box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
      transition:transform .25s, box-shadow .25s; }
.pd-box:hover, .pd-box:focus-visible { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--t) 40%, transparent); outline:none; }
.pd-box:focus-visible { box-shadow:0 0 0 3px #fff; }
.pd-lid { height:7px; background:linear-gradient(90deg, var(--td), var(--t), var(--td)); }
.pd-cover { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.pd-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.pd-cover .pc-holo { opacity:.22; mix-blend-mode:color-dodge; }
.pd-box:hover .pc-holo { opacity:.32; }
.pd-meta { display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; padding:9px 11px 11px; }
.pd-ic { grid-row:1 / span 3; width:28px; height:28px; }
.pd-meta b { font-size:.98rem; font-weight:800; line-height:1.15; }
.pd-meta small { font-size:.78rem; color:#cfcfda; font-weight:700; }
.pd-meta .pd-sig { color:#ffe38a; }

/* deck view */
.pd-back { display:inline-block; margin:4px 0 14px; color:#cfd8ff; font-weight:800; text-decoration:none; }
.pd-back:hover { text-decoration:underline; }
.pd-head { display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:16px; margin-bottom:16px;
      background:linear-gradient(120deg, color-mix(in srgb, var(--t) 30%, #14121f), rgba(16,16,22,.82)); border:1px solid color-mix(in srgb, var(--t) 40%, transparent); }
.pd-hic { flex:none; width:46px; height:46px; }
.pd-head h2 { margin:0; font-size:1.5rem; }
.pd-head p { margin:3px 0 0; color:#d6d6de; font-weight:700; font-size:.92rem; }
.pd-head .pd-note { font-weight:600; color:#bdbdc6; }
.pd-head .pd-line { font-weight:700; color:#f4f4f6; margin-top:6px; }
.pd-head .pd-line small { font-weight:700; color:#bdbdc6; font-size:.72em; letter-spacing:.04em; }
.pd-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; margin-bottom:8px; }
.pd-group { padding:12px 14px; border-radius:14px; background:rgba(16,16,22,.82); border:1px solid rgba(255,255,255,.08); }
.pd-group h3 { margin:0 0 6px; font-size:1rem; display:flex; justify-content:space-between; }
.pd-group h3 span { color:#ffe38a; }
.pd-group ul { list-style:none; margin:0; padding:0; font-size:.88rem; line-height:1.5; }
.pd-group b { flex:none; display:inline-block; min-width:2.1em; color:#fff; }
.pd-group li { display:flex; align-items:baseline; gap:4px; }
.pd-group small { color:#8f8f9c; font-size:.74rem; margin-left:auto; padding-left:6px; white-space:nowrap; }
.pd-group em { flex:none; font-style:normal; font-size:.7rem; font-weight:800; color:#1d1606; background:#ffe38a; padding:0 6px; border-radius:99px; }
.pd-coll { color:#bdbdc6; font-size:.9rem; }
.pd-gtitle { margin:22px 0 4px; font-size:1.1rem; }
.pd-more { height:40px; }

/* home: featured card beside a few deck boxes */
.pc-home { display:grid; grid-template-columns:minmax(0, 300px) minmax(0,1fr); gap:30px 26px; align-items:center; margin-top:10px; }
.pc-feat { padding-top:26px; }
.pc-feat .pc-slot { width:100%; }
.pc-fan { position:relative; }
.pc-fan.two { margin-right:22%; }
.pc-fan > .pc-fan-top { position:relative; z-index:2; transform:rotate(-3deg); }
.pc-fan .pc-fan-under { position:absolute; inset:0; z-index:1; transform:translate(30%, 3%) rotate(8deg) scale(.92); transform-origin:50% 100%; }
.pc-fan .pc-fan-under .pc-slot { filter:brightness(.9); transition:filter .2s; }
.pc-fan .pc-fan-under:hover .pc-slot { filter:none; }
@media (max-width:620px) { .pc-home { grid-template-columns:1fr; } .pc-feat { max-width:290px; margin:0 auto; width:100%; } }
@media (prefers-reduced-motion: reduce) { .pc-en-dots i, .pc-en .pc-en-ic { animation:none; } .pd-box { transition:none; } }
/* galaxy friend evolution lines (Basic, Stage 1, Stage 2) */
.pl-lines { display:grid; gap:22px; margin-top:6px; }
.pl-line { padding:14px 16px 4px; border-radius:18px; background:rgba(16,16,22,.82); border:1px solid color-mix(in srgb, var(--t) 35%, rgba(255,255,255,.08)); }
.pl-line h3 { margin:0 0 4px; font-size:1.02rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pl-line h3 a { margin-left:auto; font-size:.85rem; font-weight:700; color:#bdbdc6; text-decoration:none; }
.pl-line h3 a:hover, .pl-line h3 a:focus-visible { color:#f4f4f6; text-decoration:underline; }
.pl-ic { width:22px; height:22px; flex:none; }
.pl-row { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; padding-bottom:14px; }
@media (max-width:700px) {
  .pl-row { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:6px 2px 16px; -webkit-overflow-scrolling:touch; }
  .pl-row .pc-slot { flex:0 0 72%; max-width:260px; scroll-snap-align:center; }
}

/* five families per galaxy: collapsible galaxies, one row per family */
.pl-lines { gap:14px; }
details.pl-line { padding:0; }
details.pl-line > summary { list-style:none; cursor:pointer; padding:14px 44px 14px 16px; position:relative; border-radius:18px; }
details.pl-line > summary::-webkit-details-marker { display:none; }
details.pl-line > summary::after { content:''; position:absolute; right:18px; top:50%; width:10px; height:10px; margin-top:-7px; border-right:2px solid #bdbdc6; border-bottom:2px solid #bdbdc6; transform:rotate(45deg); transition:transform .2s; }
details.pl-line[open] > summary::after { transform:rotate(-135deg); margin-top:-2px; }
details.pl-line > summary:focus-visible { outline:2px solid #f4f4f6; outline-offset:2px; }
details.pl-line > summary h3 { margin:0; }
.pl-n { font-size:.8rem; font-weight:700; color:#bdbdc6; flex-basis:100%; padding-left:30px; }
.pl-body { padding:0 16px 6px; }
.pl-deck { margin:0 0 8px; text-align:right; }
.pl-deck a { font-size:.85rem; font-weight:700; color:#bdbdc6; text-decoration:none; }
.pl-deck a:hover, .pl-deck a:focus-visible { color:#f4f4f6; text-decoration:underline; }
.pl-fam { border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
.pl-fam h4 { margin:0 0 10px; font-size:.95rem; color:#f4f4f6; }
.pl-fam h4 small { color:#bdbdc6; font-weight:700; margin-left:6px; }
.pd-fams { margin:4px 0 0; padding-left:1.3em; color:#f4f4f6; font-size:.92rem; line-height:1.5; }
.pd-fams small { color:#bdbdc6; font-weight:700; margin-left:4px; }
/* long-text cards: shorter picture so the bigger words always fit (set by cards.js fit()) */
.pc.fit1 .pc-art { aspect-ratio:16/9.6; }
.pc.fit1 .pc-top { min-height:8cqw; }
.pc.fit2 .pc-art { aspect-ratio:16/8.8; }
.pc.fit2 .pc-at, .pc.fit2 .pc-flavor { line-height:1.1; }
.pc.fit2 .pc-flavor { padding-top:.45cqw; padding-bottom:.45cqw; }
.pc.fit3 .pc-art { aspect-ratio:16/7; }
.pc.fit3 .pc-flavor { font-size:2.65cqw; line-height:1.08; }
.pc.fit3 .pc-at { font-size:3.25cqw; }
.pc.fit1 .pc-text { line-height:1.16; } .pc.fit2 .pc-text { font-size:3.5cqw; } .pc.fit3 .pc-text { font-size:3.25cqw; }
.pc.fit4 .pc-art { aspect-ratio:16/6.2; }
.pc.fit4 .pc-at { font-size:3.1cqw; }
.pc.fit4 .pc-text { font-size:3.05cqw; }

/* /cards/: cards not found yet stay face-down */
.pc-mys { cursor:default; position:relative; }
.pc-mys-t { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); z-index:3; padding:6px 12px; border-radius:999px; background:rgba(8,6,24,.85); color:#fff; font:800 15px/1.1 Nunito, system-ui, sans-serif; white-space:nowrap; pointer-events:none; }
.cp-found { margin:8px 0 0; font-size:19px; font-weight:700; color:#fff; }
.cp-found a { color:#ffe38a; font-weight:900; }