/* ============================================================
   3D 全息闪卡（融合「二合一」专属展示）
   零依赖：纯 CSS 3D 透视 + 混合模式光效，随视角流光溢彩
   由 js/holo-card.js 驱动 CSS 变量：
     --rx / --ry  卡片旋转角度（指针视角）
     --px / --py  -1..1 的归一化视角
     --sx / --sy  光栅与星光的位移
     --hue        镭射色相偏移
     --mat        材质强度 0..1（滑杆）
     --dep        景深强度 0..1（滑杆）
     --tier       稀有度强度 .36..1
     --flip       0deg / 180deg 翻面
     --ratio      卡面宽高比
   ============================================================ */

  .holo-overlay{
    position:fixed; inset:0; z-index:170;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(10px,2.2vw,26px);
    background:
      radial-gradient(58% 52% at 50% 40%, oklch(0.36 0.07 285 / .92), oklch(0.15 0.03 265 / .97) 72%),
      oklch(0.13 0.03 265);
    overflow-y:auto; overflow-x:hidden;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
    animation:holoFade .32s ease;
  }
  @keyframes holoFade{from{opacity:0}to{opacity:1}}

  .holo-stage{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(6px,1.3vh,14px);
    width:100%; max-width:min(96vw,780px); max-height:100%;
  }
  .holo-kicker{
    font:700 10px/1 "Courier New",monospace; letter-spacing:.34em; text-transform:uppercase;
    color:oklch(0.84 0.07 300 / .78);
  }
  .holo-title{
    font-size:clamp(1rem,2.5vw,1.45rem); font-weight:900; letter-spacing:1.5px; text-align:center;
    color:oklch(0.98 0.02 95);
    text-shadow:0 2px 20px oklch(0.62 0.22 305 / .75), 0 0 4px oklch(0.9 0.1 320 / .5);
  }

  /* ---------- 3D 舞台 ---------- */
  .holo-scene{
    --rx:0deg; --ry:0deg; --px:0; --py:0; --sx:0%; --sy:0%; --hue:0deg;
    --mat:.7; --dep:.6; --tier:.6; --flip:0deg; --ratio:3/4;
    --rim-z:calc(5px + 20px * var(--dep));
    --plate-z:calc(9px + 32px * var(--dep));
    position:relative;
    width:100%;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(4px,1.4vw,16px) 0 clamp(10px,2vh,22px);
    perspective:1180px;
    perspective-origin:50% 50%;
    cursor:grab;
    touch-action:none;
  }
  .holo-scene.is-dragging{cursor:grabbing;}

  .holo-card{
    position:relative;
    width:min(72vw,40vh,320px);
    aspect-ratio:var(--ratio);
    transform-style:preserve-3d;
    transform:rotateX(var(--rx)) rotateY(var(--ry));
    transition:transform .16s linear;
    will-change:transform;
  }
  .holo-flipper{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    transform:rotateY(var(--flip));
    transition:transform .72s cubic-bezier(.4,1.3,.4,1);
  }
  .holo-face{
    position:absolute; inset:0;
    border-radius:clamp(12px,2.4vw,20px);
    transform-style:preserve-3d;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    box-shadow:0 22px 48px -14px oklch(0.08 0.03 265 / .9);
  }
  .holo-face.holo-back{ transform:rotateY(180deg); }

  /* 卡面各层：不允许 overflow:hidden（会破坏 3D），统一用圆角裁切 */
  .holo-face > *{
    position:absolute; inset:0;
    border-radius:inherit;
    pointer-events:none;
  }
  .holo-art{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
    border-radius:inherit;
    filter:saturate(1.12) contrast(1.04) brightness(.97);
  }
  .holo-vignette{
    background:radial-gradient(78% 62% at 50% 44%, transparent 42%, oklch(0.1 0.03 265 / .55) 100%);
  }

  /* 镭射光栅：随视角滑移并变色，是「流光溢彩」的主层 */
  .holo-foil{ mix-blend-mode:overlay; }
  .holo-foil.a{
    background-image:repeating-linear-gradient(104deg,
      oklch(0.72 0.22 330 / 0) 0%,
      oklch(0.74 0.24 320 / .85) 2.4%,
      oklch(0.92 0.2 95 / .85) 5.2%,
      oklch(0.78 0.2 195 / .85) 7.6%,
      oklch(0.86 0.16 250 / .7) 10%,
      oklch(0.72 0.22 330 / 0) 12.8%);
    background-size:280% 280%;
    background-position:calc(50% + var(--sx)) calc(50% + var(--sy));
    filter:hue-rotate(var(--hue)) saturate(1.5);
    opacity:calc(var(--mat) * var(--tier) * .62);
  }
  .holo-foil.b{
    background-image:repeating-linear-gradient(190deg,
      oklch(0.95 0.14 88 / 0) 0%,
      oklch(0.9 0.18 190 / .55) 3%,
      oklch(0.78 0.24 320 / .45) 6%,
      oklch(0.95 0.14 88 / 0) 9%);
    background-size:220% 220%;
    background-position:calc(50% - var(--sx)) calc(50% - var(--sy));
    filter:hue-rotate(calc(var(--hue) * -1.6)) saturate(1.3);
    opacity:calc(var(--mat) * var(--tier) * .3);
  }
  /* 油膜彩虹：跟随指针的一团彩色光晕 */
  .holo-slick{
    background:
      radial-gradient(38% 34% at calc(32% + var(--px) * 26%) calc(34% + var(--py) * 26%),
        oklch(0.86 0.24 330 / .5), oklch(0.9 0.2 95 / .34) 42%, transparent 70%),
      radial-gradient(46% 40% at calc(72% - var(--px) * 24%) calc(70% - var(--py) * 22%),
        oklch(0.8 0.2 195 / .44), oklch(0.7 0.24 300 / .3) 46%, transparent 72%);
    mix-blend-mode:screen;
    filter:hue-rotate(var(--hue));
    opacity:calc(var(--mat) * var(--tier) * .74);
  }

  /* 星光闪钻 */
  .holo-glitter{ mix-blend-mode:screen; }
  .holo-glitter.a{
    background-image:radial-gradient(circle, oklch(1 0 0 / .95) 0 1px, transparent 1.5px);
    background-size:11px 11px;
    background-position:var(--sx) var(--sy);
    opacity:calc(var(--mat) * var(--tier) * .34);
    animation:holoTwinkle 2.6s ease-in-out infinite;
  }
  .holo-glitter.b{
    background-image:
      radial-gradient(circle, oklch(0.98 0.12 95 / .95) 0 1.4px, transparent 2.1px),
      radial-gradient(circle, oklch(0.9 0.14 320 / .8) 0 1.2px, transparent 1.9px);
    background-size:37px 37px, 53px 53px;
    background-position:calc(var(--sx) * -1.4) calc(var(--sy) * -1.4), var(--sy) var(--sx);
    opacity:calc(var(--mat) * var(--tier) * .46);
    animation:holoTwinkle 3.4s ease-in-out infinite reverse;
  }
  @keyframes holoTwinkle{
    0%,100%{ filter:brightness(.72) saturate(1); }
    50%    { filter:brightness(1.35) saturate(1.25); }
  }

  /* 斜向高光扫过 */
  .holo-glare{
    background:linear-gradient(102deg,
      transparent 34%,
      oklch(1 0 0 / .32) 46%,
      oklch(1 0 0 / .78) 50%,
      oklch(1 0 0 / .32) 54%,
      transparent 66%);
    background-size:240% 240%;
    background-position:calc(50% + var(--px) * 105%) calc(50% + var(--py) * 105%);
    mix-blend-mode:screen;
    opacity:calc(var(--mat) * var(--tier) * .5 + .1);
  }

  /* 全息边框：前凸一层，形成视差厚度 */
  .holo-rim{
    transform:translateZ(var(--rim-z));
    box-shadow:
      inset 0 0 0 3px oklch(1 0 0 / .82),
      inset 0 0 0 5px oklch(0.78 0.16 300 / .5),
      inset 0 0 26px oklch(0.82 0.2 320 / .55),
      0 0 30px oklch(0.72 0.18 300 / calc(.35 + .45 * var(--tier)));
  }
  .holo-rim::after{
    content:'';
    position:absolute; inset:0;
    border-radius:inherit;
    padding:3px;
    background:conic-gradient(from calc(var(--hue) * 2),
      oklch(0.86 0.2 320 / .9), oklch(0.92 0.18 95 / .85), oklch(0.82 0.18 190 / .9),
      oklch(0.8 0.2 265 / .85), oklch(0.86 0.2 320 / .9));
    mix-blend-mode:screen;
    opacity:calc(var(--mat) * .55);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
  }

  /* 铭牌：前凸最多，视差最明显 */
  .holo-plate{
    transform:translateZ(var(--plate-z));
    inset:auto 0 0 0;
    height:auto;
    padding:clamp(16px,4vw,30px) 12px clamp(9px,2.2vw,14px);
    display:flex; flex-direction:column; align-items:center; gap:3px;
    text-align:center;
    background:linear-gradient(to top, oklch(0.1 0.03 265 / .9), oklch(0.12 0.04 280 / .45) 58%, transparent);
    border-radius:0 0 clamp(12px,2.4vw,20px) clamp(12px,2.4vw,20px);
    text-shadow:0 1px 10px oklch(0.1 0.03 265 / .9);
  }
  .holo-name{
    font-size:clamp(.92rem,2.3vw,1.18rem); font-weight:900; letter-spacing:1px;
    color:oklch(0.99 0.01 95);
  }
  .holo-meta{
    font-size:clamp(.62rem,1.5vw,.74rem); font-style:normal; font-weight:700; letter-spacing:.06em;
    color:oklch(0.93 0.07 320 / .95);
  }

  /* 卡座光晕 */
  .holo-ground{
    position:absolute; left:50%; bottom:-2%;
    width:min(62vw,260px); height:22px;
    transform:translateX(-50%);
    background:radial-gradient(50% 50% at 50% 50%, oklch(0.68 0.16 305 / .42), transparent 72%);
    filter:blur(7px);
    pointer-events:none;
  }

  /* ---------- 控制区 ---------- */
  .holo-hint{
    font-size:clamp(.66rem,1.6vw,.78rem); font-weight:700;
    color:oklch(0.88 0.03 300 / .72); text-align:center;
  }
  .holo-controls{
    display:flex; flex-wrap:wrap; gap:7px 9px;
    align-items:center; justify-content:center;
    max-width:100%;
  }
  .holo-slider{
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 12px;
    background:oklch(0.28 0.05 275 / .86);
    border:1.5px solid oklch(0.58 0.1 295 / .6);
    border-radius:999px;
    color:oklch(0.94 0.02 95);
    font-size:.72rem; font-weight:800; letter-spacing:.04em;
    cursor:pointer;
  }
  .holo-slider input[type=range]{
    width:min(26vw,104px); height:16px;
    appearance:none; -webkit-appearance:none;
    background:transparent; cursor:pointer;
  }
  .holo-slider input[type=range]::-webkit-slider-runnable-track{
    height:4px; border-radius:999px;
    background:linear-gradient(90deg, oklch(0.72 0.2 320), oklch(0.85 0.18 95), oklch(0.78 0.18 195));
  }
  .holo-slider input[type=range]::-webkit-slider-thumb{
    appearance:none; -webkit-appearance:none;
    width:14px; height:14px; margin-top:-5px; border-radius:50%;
    background:oklch(0.99 0.01 95);
    box-shadow:0 0 0 2px oklch(0.35 0.08 295), 0 0 10px oklch(0.85 0.18 320);
  }
  .holo-slider input[type=range]::-moz-range-track{
    height:4px; border-radius:999px;
    background:linear-gradient(90deg, oklch(0.72 0.2 320), oklch(0.85 0.18 95), oklch(0.78 0.18 195));
  }
  .holo-slider input[type=range]::-moz-range-thumb{
    width:14px; height:14px; border:none; border-radius:50%;
    background:oklch(0.99 0.01 95);
    box-shadow:0 0 0 2px oklch(0.35 0.08 295), 0 0 10px oklch(0.85 0.18 320);
  }
  .holo-slider b{ min-width:1.9em; text-align:right; font-variant-numeric:tabular-nums; color:oklch(0.95 0.08 320); }

  .holo-btn{
    padding:7px 14px;
    background:oklch(0.3 0.05 275 / .9);
    color:oklch(0.96 0.02 95);
    border:1.5px solid oklch(0.62 0.1 295 / .7);
    border-radius:999px;
    font-size:.76rem; font-weight:800; letter-spacing:.03em;
    transition:transform .16s cubic-bezier(.22,1,.36,1), background .16s ease, box-shadow .16s ease;
  }
  .holo-btn:hover{ transform:translateY(-1px); background:oklch(0.36 0.07 285 / .95); box-shadow:0 0 16px oklch(0.7 0.18 305 / .45); }
  .holo-btn:active{ transform:translateY(0); }
  .holo-btn.primary{
    background:linear-gradient(100deg, oklch(0.72 0.19 330), oklch(0.8 0.16 300) 45%, oklch(0.78 0.17 250));
    color:oklch(0.14 0.03 275);
    border-color:oklch(0.95 0.05 320 / .8);
  }
  .holo-btn[aria-pressed="true"]{
    background:linear-gradient(100deg, oklch(0.74 0.18 195), oklch(0.78 0.17 250));
    color:oklch(0.14 0.03 275);
  }
  .holo-note{
    font-size:.72rem; font-weight:700; color:oklch(0.9 0.05 320 / .85); text-align:center;
  }
  .holo-overlay.is-switching .holo-stage{ animation:holoOut .22s ease forwards; }
  @keyframes holoOut{ to{ opacity:0; transform:scale(.96); } }

  /* ---------- 稀有度分级：层数越高，镭射越强 ---------- */
  .holo-L1{ --tier:.36; }
  .holo-L2{ --tier:.46; }
  .holo-L3{ --tier:.58; }
  .holo-L4{ --tier:.7; }
  .holo-L5{ --tier:.82; }
  .holo-L6{ --tier:.92; }
  .holo-L7{ --tier:1; }
  .holo-L5 .holo-glitter.b,
  .holo-L6 .holo-glitter.b,
  .holo-L7 .holo-glitter.b{ animation-duration:2.2s; }
  .holo-L6 .holo-rim::after,
  .holo-L7 .holo-rim::after{ opacity:calc(var(--mat) * .78); }

  /* ---------- 窄屏适配 ---------- */
  @media (max-width:560px){
    .holo-scene{ padding-bottom:6px; }
    .holo-card{ width:min(76vw,34vh,300px); }
    .holo-hint{ display:none; }
    .holo-controls{ gap:6px; }
    .holo-btn{ padding:6px 11px; font-size:.72rem; }
  }
  @media (max-height:560px){
    .holo-card{ width:min(52vw,30vh,260px); }
    .holo-title{ font-size:1rem; }
  }

  /* ---------- 尊重系统「减弱动态」 ---------- */
  @media (prefers-reduced-motion: reduce){
    .holo-overlay, .holo-card, .holo-flipper{ animation:none!important; transition:none!important; }
    .holo-glitter.a, .holo-glitter.b{ animation:none!important; }
    .holo-glare{ display:none; }
  }