/* ══ PD V2 · shared collectible flip-card component (components/pd-v2-card.html) ══
   Used by both the About page's end-of-page cards and the PDP's "Two ways
   from here" bands (C in SPEC-cart-voices-twoways-mobile.md — one shared
   snippet, not a copy). The component's own rules originally only shipped
   scoped to #pd-v2-about (public/css/pd-v2-about.css lines ~307-416, from
   back when the card only existed there); once the markup became a shared
   component this session, those scoped selectors silently stopped applying
   wherever else the component renders — caught by handover/v2/tools/
   pd-v2-parity.mjs against the PDP (card__traits tags losing their
   uppercase/800-weight/tracking treatment entirely on the live PDP). Rather
   than touch the already-verified About page, this file re-declares the
   same rules unscoped so they apply everywhere the component is used;
   About keeps its own #pd-v2-about-scoped copy too (identical values, so no
   visible change there — same specificity tie, same result either rule
   wins). Values are an exact, unmodified copy — do not edit one without
   checking the other no longer drifts from it. */
/* 2026-10-13(反馈):最早以为这只出在 PDP 的 "Two ways from here"
   卡片上(猜测是它所在的 .xb2__g 手机端 overflow-x:auto 横滑容器让 WebKit
   的 backface-visibility 失效),加了 will-change+translateZ(0) 之后用户
   反馈 About 页面那张不在任何滚动容器里的卡也是同样的正反面叠加、文字镜像
   问题——说明前一次是猜错了方向,不是滚动容器的锅,两处用的是同一份 .fc/
   .card 规则,会一起坏说明问题出在这份共享规则本身。实际原因:
   backface-visibility 这一行已经带 -webkit- 前缀,但同样用来建立 3D
   渲染上下文的 perspective(.fc)和 transform-style(.fc__in)一直没有
   -webkit- 前缀——iOS Safari 对这两个属性的无前缀版本支持不稳定,3D 语境
   建立不完整时,子元素的 backface-visibility:hidden 就可能不生效,正反面
   同时可见。两个都补上前缀才是和 backface-visibility 对齐、完整的 3D 语境;
   will-change/translateZ(0) 留着(无害,且确实是另一个真实但不同的 WebKit
   坑的标准规避写法),不去掉。 */
.fc{position:relative;-webkit-perspective:1200px;perspective:1200px;--rx:0deg;--ry:0deg;--flip:0deg;--mx:50%;--my:50%;
  will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
.fc--p{--f1:#FF9DCA;--f2:#FE0373;--f3:#FFE6F2;--f4:#B0004F;--tint:254,3,115;--lite:#FF9DCA;--b1:#CB025C;--b2:#8E0042}
.fc--d{--f1:#E7C2FF;--f2:#C527F3;--f3:#F6EAFF;--f4:#6E1A9A;--tint:197,39,243;--lite:#DDB4FF;--b1:#A922D1;--b2:#5E1585}
.fc__in{position:relative;aspect-ratio:63/88;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;
  transform:rotateY(calc(var(--flip) + var(--ry))) rotateX(var(--rx));transition:transform .7s var(--e)}
.fc.is-live .fc__in{transition:transform .14s linear}
.fc.is-flipped,.fc:focus-within{--flip:180deg}
.fc__f,.fc__b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:18px;padding:3px;
  background:linear-gradient(135deg,var(--f1),var(--f2) 28%,var(--f3) 48%,var(--f2) 66%,var(--f4));
  box-shadow:0 22px 44px -20px rgba(var(--tint),.6),0 2px 8px rgba(0,0,0,.35)}
.fc__b{transform:rotateY(180deg)}
.card{position:relative;height:100%;border-radius:15px;overflow:hidden;display:flex;flex-direction:column;
  padding:16px 14px 14px;color:#FFF7F1;text-align:left;
  background:radial-gradient(120% 60% at 50% 0%,rgba(var(--tint),.24),transparent 62%),
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/6px 6px,#150D14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.card--front .card__art{margin-top:18px}
.card__art{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 42%,rgba(var(--tint),.6),transparent 72%),
    radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.5px) 0 0/7px 7px,
    linear-gradient(180deg,#2A1428,#110910);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.card__lines{position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 46%,transparent 0deg 2.3deg,rgba(255,247,241,.24) 2.3deg 2.75deg,transparent 2.75deg 5deg),
    repeating-conic-gradient(from 1.2deg at 50% 46%,transparent 0deg 6.1deg,rgba(var(--tint),.55) 6.1deg 6.9deg,transparent 6.9deg 11deg);
  -webkit-mask:radial-gradient(ellipse 62% 56% at 50% 46%,transparent 34%,rgba(0,0,0,.55) 62%,#000 100%);
  mask:radial-gradient(ellipse 62% 56% at 50% 46%,transparent 34%,rgba(0,0,0,.55) 62%,#000 100%)}
.card__fig{position:absolute;z-index:2;left:50%;top:var(--fig-top,4%);height:var(--fig-h,90%);width:auto;max-width:none;
  translate:calc(-50% + var(--fig-x,0%)) 0;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
.card__plate{position:relative;margin-top:12px;padding:14px 16px;border-radius:9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.card__name,.card__type{position:relative;z-index:3;
  text-shadow:0 0 2px #0E0810,0 0 6px rgba(14,8,16,.95),0 0 12px rgba(14,8,16,.8),0 1px 2px rgba(0,0,0,.9)}
.card__name{font-family:var(--disp);font-variation-settings:var(--fr-display);
  font-weight:650;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.02em;line-height:1}
.card__type{font:800 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--lite);white-space:nowrap}
.card .rv{position:absolute;z-index:4;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 14%,#d8d1d6 30%,#8b838a 62%,#3b343a 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.45)}
.card .rv.tl{left:10px;top:10px}.card .rv.tr{right:10px;top:10px}
.card .rv.bl{left:10px;bottom:10px}.card .rv.br{right:10px;bottom:10px}
.card__holo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:color-dodge;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.5),transparent 40%),
    linear-gradient(115deg,transparent 18%,rgba(255,157,202,.32) 34%,rgba(201,162,255,.32) 46%,rgba(158,240,226,.28) 58%,transparent 74%);
  background-size:100% 100%,240% 240%;background-position:center,var(--mx) var(--my)}
.card__holo--all{border-radius:15px;mix-blend-mode:overlay}
.fc.is-live .card__holo{opacity:.85}
.card--back{align-items:center;text-align:center;padding:24px 18px 28px}
.card--back .card__mid{padding:2px 0 8px}
.card__mid{margin-block:auto;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.card__por{display:block;width:47%;height:auto;aspect-ratio:1;padding:4px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--f1),var(--f2),var(--f3),var(--f4));
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 30px -10px rgba(var(--tint),.9)}
.card__por span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(var(--tint),.75),#1B0F1A 78%)}
.card__por img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.card__word{margin:-11% 0 0;position:relative;z-index:2;line-height:0;width:44%;aspect-ratio:490/351;
  display:flex;align-items:flex-end;justify-content:center}
.card__word img{width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.card p{max-width:none;margin-inline:0;color:inherit}
.card .card__sig{margin:12px 0 0;color:var(--lite);font-family:var(--disp);font-optical-sizing:auto;
  font-variation-settings:var(--fr-text);font-weight:600;font-size:clamp(15px,1.45vw,17.5px);line-height:1.35;letter-spacing:.02em}
.card__traits{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.card--back .card__traits{margin-top:12px}
.card__traits li{padding:6px 10px;border-radius:var(--pill);border:1px solid rgba(255,247,241,.32);
  font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,247,241,.9)}
.card__go{margin-top:auto;align-self:stretch;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;text-decoration:none;
  font:800 13px/1 var(--ui);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px rgba(var(--tint),.8);
  transition:transform .2s var(--e),box-shadow .2s}
@media (hover:hover) and (pointer:fine){
  .card__go:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -8px rgba(var(--tint),.9)}
}
.card__go:focus-visible{outline:2px solid #FFF7F1;outline-offset:3px}
.fc__hit{position:absolute;inset:0;z-index:2;border-radius:18px;font-size:0;color:transparent}
.fc__flip{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#FFF7F1;border:1px solid rgba(255,247,241,.4);
  background:rgba(14,8,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s}
.fc__flip svg{width:18px;height:18px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc__flip:active{transform:scale(.92)}
.fc__flip:focus-visible{outline:2px solid #FFF7F1;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.fc__flip:not(:focus-visible){opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.fc__in{transition:none}.card__holo{display:none}}
@media (max-width:360px){
  .card--back{padding:20px 14px 26px}
  .card__por{width:42%}
  .card__word{width:40%}
  .card .card__sig{margin-top:6px;font-size:14px}
  .card--back .card__traits{margin-top:8px;gap:4px}
  .card__traits li{padding:5px 7px;font-size:12px;letter-spacing:.1em}
  .card--back .card__go{min-height:40px;font-size:12px}
}