/* ═══════════════════════════════════════════════════════════
   YUMEDOL — SHOP PAGE (梦境偶像名鉴 · 亚克力光锥典藏卡)
   Ported from approved shop-demo. All selectors scoped under
   body.yumedol-shop / .ys-shop to avoid clashing with main.css
═══════════════════════════════════════════════════════════ */

body.yumedol-shop{
  --ys-bg:#07010f;--ys-violet:#7c3aed;--ys-pink:#db2777;
  background:var(--ys-bg);color:#fff;overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
body.yumedol-shop::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 20% 15%,rgba(124,58,237,.26),transparent 70%),
    radial-gradient(55% 45% at 85% 25%,rgba(219,39,119,.2),transparent 70%),
    radial-gradient(70% 60% at 50% 100%,rgba(80,40,160,.28),transparent 70%)}

#ys-stars{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── Hero ── */
.ys-hero{position:relative;z-index:5;text-align:center;padding:130px 16px 8px}
.ys-hero h1{font-size:clamp(1.6rem,5vw,2.8rem);font-weight:800;letter-spacing:.04em;line-height:1.25;color:#fff}
.ys-hero h1 em{font-style:normal;background:linear-gradient(120deg,#c4b5fd,#f9a8d4,#c4b5fd);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ys-shimmer 6s linear infinite}
@keyframes ys-shimmer{to{background-position:200% center}}
.ys-hero p{margin-top:12px;color:rgba(220,200,255,.7);font-size:clamp(.85rem,2.5vw,1rem)}

/* ── 筛选胶囊 ── */
.ys-shop .filters{position:relative;z-index:5;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:22px 16px 6px}
.ys-shop .chip{font-size:.8rem;color:rgba(230,215,255,.85);background:rgba(255,255,255,.05);
  border:1px solid rgba(200,150,255,.22);padding:8px 16px;border-radius:30px;cursor:pointer;transition:.2s;backdrop-filter:blur(6px)}
.ys-shop .chip:hover{border-color:rgba(220,160,255,.7);background:rgba(200,150,255,.12)}
.ys-shop .chip.active{background:linear-gradient(135deg,var(--ys-violet),var(--ys-pink));border-color:transparent;color:#fff}

/* ── 网格 ── */
.ys-shop .grid{position:relative;z-index:5;display:grid;gap:clamp(20px,4vw,42px);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));max-width:1180px;margin:0 auto;padding:34px clamp(16px,4vw,40px) 90px}

/* 空状态 */
.ys-shop .ys-empty{position:relative;z-index:5;text-align:center;padding:80px 20px 120px;
  color:rgba(220,200,255,.65);font-size:1rem;letter-spacing:.05em}

/* ══════════════ 网格卡(收敛质感 + 金属边框)══════════════ */
.ys-shop .card{--rx:0deg;--ry:0deg;--px:50%;--py:50%;--bgx:50%;--bgy:50%;--pfc:.1;
  position:relative;aspect-ratio:2/3;border-radius:18px;cursor:pointer;transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .3s cubic-bezier(.23,1,.32,1);will-change:transform}
.ys-shop .card__media{position:absolute;inset:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px -12px rgba(0,0,0,.8)}
.ys-shop .card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ys-shop .card__glass{position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.1) 47%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.1) 53%,transparent 62%);
  background-size:300% 300%;background-position:var(--bgx) var(--bgy);
  mix-blend-mode:soft-light;opacity:calc(.5 + var(--pfc)*.3)}
.ys-shop .card__iri{position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,120,190,.55),rgba(255,225,150,.55),rgba(150,255,210,.55),rgba(150,205,255,.55),rgba(205,160,255,.55));
  background-size:200% 200%;background-position:var(--bgx) var(--bgy);mix-blend-mode:overlay;
  opacity:calc(var(--pfc)*.13);
  -webkit-mask:radial-gradient(125% 125% at 50% 50%,transparent 54%,#000 92%);
          mask:radial-gradient(125% 125% at 50% 50%,transparent 54%,#000 92%)}
.ys-shop .card__glare{position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.4),rgba(255,255,255,.04) 32%,transparent 52%);
  mix-blend-mode:screen;opacity:calc(.2 + var(--pfc)*.3)}
.ys-shop .card__frame{position:absolute;inset:0;border-radius:18px;pointer-events:none;padding:1.6px;
  -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}
.ys-shop .card[data-rarity="6"] .card__frame{background:linear-gradient(135deg,#f7e3a1,#caa24a,#fff3cf,#b8893a)}
.ys-shop .card[data-rarity="5"] .card__frame{background:linear-gradient(135deg,#e9c4ff,#a259d6,#f3e1ff,#8a44c0)}
.ys-shop .card[data-rarity="4"] .card__frame{background:linear-gradient(135deg,#cfe2ff,#7fa8e0,#eaf2ff,#6f93cf)}
.ys-shop .card[data-rarity="6"]{box-shadow:0 0 22px -4px rgba(220,180,90,.4)}
.ys-shop .card[data-rarity="5"]{box-shadow:0 0 22px -4px rgba(180,110,230,.4)}
.ys-shop .card[data-rarity="4"]{box-shadow:0 0 22px -4px rgba(120,160,220,.4)}

.ys-shop .card__top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;
  align-items:flex-start;padding:13px 14px;font-size:.72rem;letter-spacing:.05em}
.ys-shop .card__no{color:rgba(255,255,255,.85);text-shadow:0 1px 4px #000;font-weight:600}
.ys-shop .card__rarity{text-align:right;text-shadow:0 1px 5px #000}
.ys-shop .card__rarity .stars{font-size:.7rem;letter-spacing:1px}
.ys-shop .card[data-rarity="6"] .stars{color:#ffd27a}
.ys-shop .card[data-rarity="5"] .stars{color:#e0aaff}
.ys-shop .card[data-rarity="4"] .stars{color:#a8c8ff}
.ys-shop .card__rarity .rname{display:block;font-size:.6rem;opacity:.8;margin-top:1px}
.ys-shop .card__bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:36px 15px 16px;
  background:linear-gradient(to top,rgba(5,0,12,.92) 8%,rgba(5,0,12,.55) 55%,transparent);border-radius:0 0 18px 18px}
.ys-shop .card__name{font-size:1.32rem;font-weight:800;letter-spacing:.04em;line-height:1.1;text-shadow:0 2px 8px #000;color:#fff}
.ys-shop .card__name small{font-size:.8rem;font-weight:500;opacity:.78;margin-left:6px}
.ys-shop .card__tags{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.ys-shop .card__tags i{font-style:normal;font-size:.62rem;color:rgba(235,220,255,.9);background:rgba(255,255,255,.1);
  border:1px solid rgba(220,180,255,.25);padding:2px 8px;border-radius:20px}
.ys-shop .card__price{margin-top:10px;font-size:1rem;font-weight:700;
  background:linear-gradient(135deg,#fbcfe8,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 草稿角标(仅管理员预览可见) */
.ys-shop .card.is-draft::after{content:"DRAFT";position:absolute;top:-9px;left:12px;z-index:6;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;color:#fff;background:#b45309;
  padding:3px 9px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* SEO 文本块(视觉隐藏,搜索引擎/读屏可见) */
.ys-shop .card__seo{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ══════════════ 聚焦弹层 ══════════════ */
.ys-shop .focus{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);background:rgba(3,0,9,.74);backdrop-filter:blur(18px);opacity:0;transition:opacity .35s}
.ys-shop .focus.open{display:flex;opacity:1}
.ys-shop .focus__close{position:absolute;top:18px;right:20px;z-index:2001;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s}
.ys-shop .focus__close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.ys-shop .focus__panel{display:flex;gap:clamp(20px,4vw,56px);align-items:center;max-width:1080px;width:100%;max-height:92vh}

/* 舞台 */
.ys-shop .stage{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;perspective:1500px}

/* ── 亚克力 3D 大卡 ── */
.ys-shop .bigcard{--rx:0deg;--ry:0deg;--px:50%;--py:50%;--bgx:50%;--bgy:50%;--pfc:.12;--u:clamp(190px,56vw,300px);
  position:relative;transform-style:preserve-3d;cursor:grab;touch-action:none;
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1);
  animation:ys-bob 6s ease-in-out infinite}
.ys-shop .bigcard.portrait{width:var(--u);height:calc(var(--u)*1.5)}
.ys-shop .bigcard.landscape{width:calc(var(--u)*1.5);height:var(--u)}
.ys-shop .bigcard.dragging{cursor:grabbing;animation:none}
@keyframes ys-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}

.ys-shop .bc-3d{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s ease-out}
.ys-shop .bigcard.dragging .bc-3d{transition:none}
.ys-shop .bigcard.settle .bc-3d{transition:transform .75s cubic-bezier(.18,1.3,.4,1)}

.ys-shop .bc-back{position:absolute;inset:0;border-radius:18px;transform:translateZ(-9px);
  background:linear-gradient(135deg,#1a1030,#0d0820);box-shadow:0 34px 70px -16px rgba(0,0,0,.9)}
.ys-shop .bc-rim{position:absolute;inset:0;border-radius:18px;transform:translateZ(0);
  box-shadow:0 0 0 6px rgba(180,160,220,.06),inset 0 0 14px rgba(120,90,180,.25);
  background:linear-gradient(135deg,rgba(200,180,240,.1),rgba(120,90,170,.04))}
.ys-shop .bc-core{position:absolute;inset:3px;border-radius:15px;overflow:hidden;transform:translateZ(-5px);
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.ys-shop .bc-core img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.ys-shop .bc-core img.flipping{opacity:0}
.ys-shop .bc-glass{position:absolute;inset:0;border-radius:18px;pointer-events:none;transform:translateZ(7px);
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.1) 46%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.1) 54%,transparent 64%);
  background-size:300% 300%;background-position:var(--bgx) var(--bgy);mix-blend-mode:soft-light;opacity:calc(.55 + var(--pfc)*.3)}
.ys-shop .bc-iri{position:absolute;inset:0;border-radius:18px;pointer-events:none;transform:translateZ(7px);
  background:linear-gradient(105deg,rgba(255,120,190,.55),rgba(255,225,150,.55),rgba(150,255,210,.55),rgba(150,205,255,.55),rgba(205,160,255,.55));
  background-size:200% 200%;background-position:var(--bgx) var(--bgy);mix-blend-mode:overlay;
  opacity:calc(var(--pfc)*.15);
  -webkit-mask:radial-gradient(120% 120% at 50% 50%,transparent 50%,#000 90%);
          mask:radial-gradient(120% 120% at 50% 50%,transparent 50%,#000 90%)}
.ys-shop .bc-glare{position:absolute;inset:0;border-radius:18px;pointer-events:none;transform:translateZ(8px);
  background:radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.42),rgba(255,255,255,.05) 33%,transparent 54%);
  mix-blend-mode:screen;opacity:calc(.22 + var(--pfc)*.3)}
.ys-shop .bc-frame{position:absolute;inset:0;border-radius:18px;pointer-events:none;transform:translateZ(8px);padding:2px;
  -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}
.ys-shop .bigcard[data-rarity="6"] .bc-frame{background:linear-gradient(135deg,#f7e3a1,#caa24a,#fff3cf,#b8893a 70%,#e8c97a)}
.ys-shop .bigcard[data-rarity="5"] .bc-frame{background:linear-gradient(135deg,#e9c4ff,#a259d6,#f3e1ff,#8a44c0 70%,#c98ae8)}
.ys-shop .bigcard[data-rarity="4"] .bc-frame{background:linear-gradient(135deg,#cfe2ff,#7fa8e0,#eaf2ff,#6f93cf 70%,#9cc0ee)}
.ys-shop .bc-inline{position:absolute;inset:7px;border-radius:13px;pointer-events:none;transform:translateZ(8px);
  border:1px solid rgba(255,255,255,.16)}
.ys-shop .bigcard[data-rarity="6"]{filter:drop-shadow(0 0 16px rgba(220,180,90,.3))}
.ys-shop .bigcard[data-rarity="5"]{filter:drop-shadow(0 0 16px rgba(180,110,230,.3))}
.ys-shop .bigcard[data-rarity="4"]{filter:drop-shadow(0 0 16px rgba(120,160,220,.3))}
.ys-shop .bc-sweep{position:absolute;inset:0;border-radius:18px;pointer-events:none;overflow:hidden;opacity:0;transform:translateZ(9px)}
.ys-shop .bc-sweep.active{opacity:1}
.ys-shop .bc-sweep::before{content:"";position:absolute;top:-50%;left:-60%;width:45%;height:200%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),rgba(200,170,255,.4),transparent);filter:blur(4px);transform:rotate(8deg)}
.ys-shop .bc-sweep.active::before{animation:ys-sweep .65s ease-out}
@keyframes ys-sweep{from{left:-60%}to{left:170%}}

/* 解锁控件 */
.ys-shop .unlock{display:flex;flex-direction:column;align-items:center;gap:7px}
.ys-shop .unlock__btn{position:relative;width:64px;height:64px;border-radius:50%;cursor:pointer;display:grid;place-items:center;border:none;background:transparent;touch-action:none}
.ys-shop .unlock__ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#f9a8d4 calc(var(--charge,0)*360deg),rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.ys-shop .unlock__core{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,150,210,.4);font-size:1.3rem;transition:.3s}
.ys-shop .unlock__btn:hover .unlock__core{background:rgba(249,168,212,.18)}
.ys-shop .unlock.unlocked .unlock__core{background:linear-gradient(135deg,#f472b6,#a855f7);border-color:transparent;box-shadow:0 0 22px rgba(244,114,182,.6)}
.ys-shop .unlock__label{font-size:.7rem;color:rgba(245,200,230,.85);letter-spacing:.06em}
.ys-shop .unlock.unlocked .unlock__label{color:#f9a8d4}
.ys-shop .burst{position:absolute;inset:-40px;border-radius:50%;pointer-events:none;opacity:0}
.ys-shop .burst.go{animation:ys-burst .8s ease-out}
@keyframes ys-burst{0%{opacity:1;box-shadow:0 0 0 0 rgba(249,168,212,.8),0 0 0 0 rgba(168,85,247,.6)}
  100%{opacity:0;box-shadow:0 0 0 60px rgba(249,168,212,0),0 0 0 90px rgba(168,85,247,0)}}

/* 信息 */
.ys-shop .info{flex:1 1 0;min-width:0;max-width:420px;max-height:92vh;overflow-y:auto;padding-right:4px}
.ys-shop .info__rar{font-size:.78rem;letter-spacing:.12em;margin-bottom:6px}
.ys-shop .info[data-rarity="6"] .info__rar{color:#ffd27a}
.ys-shop .info[data-rarity="5"] .info__rar{color:#e0aaff}
.ys-shop .info[data-rarity="4"] .info__rar{color:#a8c8ff}
.ys-shop .info h2{font-size:2.1rem;font-weight:800;letter-spacing:.03em;line-height:1.1;color:#fff}
.ys-shop .info h2 small{font-size:1rem;font-weight:500;opacity:.7;margin-left:8px}
.ys-shop .info__no{margin-top:4px;font-size:.78rem;color:rgba(200,180,255,.7);letter-spacing:.08em}
.ys-shop .info__tags{margin:14px 0;display:flex;gap:7px;flex-wrap:wrap}
.ys-shop .info__tags i{font-style:normal;font-size:.7rem;color:rgba(235,220,255,.9);background:rgba(255,255,255,.07);
  border:1px solid rgba(220,180,255,.25);padding:4px 11px;border-radius:20px}
.ys-shop .specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:16px 0;padding:14px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(200,150,255,.18);border-radius:14px}
.ys-shop .specs div{font-size:.82rem;display:flex;justify-content:space-between}
.ys-shop .specs span{color:rgba(190,170,230,.7)}
.ys-shop .specs b{font-weight:600;color:#fff}
.ys-shop .story{margin:16px 0;padding:16px 18px;border-left:2px solid rgba(220,160,255,.5);
  background:linear-gradient(90deg,rgba(124,58,237,.1),transparent);border-radius:0 12px 12px 0}
.ys-shop .story h4{font-size:.78rem;color:rgba(220,180,255,.8);letter-spacing:.1em;margin-bottom:8px}
.ys-shop .story p{font-size:.92rem;line-height:1.85;color:rgba(240,232,255,.92);font-family:Georgia,"Songti SC","Yu Mincho",serif}
.ys-shop .story p.quote{color:#f9a8d4;font-style:italic;margin-top:6px}
.ys-shop .info__price{font-size:1.7rem;font-weight:800;margin:18px 0 14px;
  background:linear-gradient(135deg,#fbcfe8,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ys-shop .btns{display:flex;flex-direction:column;gap:10px}
.ys-shop .btn-main{display:block;text-align:center;text-decoration:none;padding:15px;border:none;border-radius:14px;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--ys-violet),var(--ys-pink));box-shadow:0 6px 24px rgba(180,80,255,.4);transition:.25s}
.ys-shop .btn-main:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(180,80,255,.6);color:#fff}
/* 微调定制按钮:两行(标题 + 高级功能引流小字,「高级功能」粉色高亮) */
.ys-shop .btn-ghost{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;text-decoration:none;
  padding:12px 16px;border:1px solid rgba(220,160,255,.4);border-radius:14px;background:transparent;color:rgba(240,220,255,.9);cursor:pointer;transition:.2s}
.ys-shop .btn-ghost:hover{background:rgba(220,160,255,.12);border-color:rgba(220,160,255,.6)}
.ys-shop .btn-ghost__title{font-size:.92rem;font-weight:600;letter-spacing:.02em}
.ys-shop .btn-ghost__hint{font-size:.7rem;line-height:1.5;letter-spacing:.02em;color:rgba(205,185,238,.6);transition:color .2s}
.ys-shop .btn-ghost:hover .btn-ghost__hint{color:rgba(232,218,255,.85)}
.ys-shop .btn-ghost__hint .hi{color:#f9a8d4;font-weight:700}

.ys-shop .film{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.ys-shop .film__group{display:flex;gap:8px;align-items:center}
.ys-shop .film__group+.film__group{margin-left:6px;padding-left:14px;border-left:1px solid rgba(255,255,255,.12)}
.ys-shop .thumb{position:relative;width:46px;height:62px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:.2s;flex:0 0 auto}
.ys-shop .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ys-shop .thumb.active{border-color:#f9a8d4;box-shadow:0 0 12px rgba(249,168,212,.6)}
.ys-shop .thumb.locked img{filter:blur(7px) brightness(.4)}
.ys-shop .thumb.locked::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem}
.ys-shop .thumb.shake{animation:ys-shake .4s}
@keyframes ys-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ys-shop .hint{font-size:.68rem;color:rgba(200,180,255,.55);text-align:center;margin-top:8px}

#ys-motion-btn{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:40;display:none;
  padding:10px 20px;border-radius:30px;border:1px solid rgba(220,160,255,.5);background:rgba(20,10,40,.8);color:#fff;font-size:.82rem;cursor:pointer;backdrop-filter:blur(8px)}

/* ── 响应式 ── */
@media(max-width:820px){
  .ys-shop .focus__panel{flex-direction:column;gap:18px;overflow-y:auto;justify-content:flex-start;padding-top:50px}
  .ys-shop .info{max-width:none;width:100%;overflow:visible;max-height:none}
  .ys-shop .info h2{font-size:1.7rem}
  .ys-hero{padding-top:110px}
}
@media(max-width:430px){
  .ys-shop .grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:22px 12px 80px}
  .ys-shop .card__name{font-size:1rem}
  .ys-shop .card__price{font-size:.85rem}
  .ys-shop .card__tags{display:none}
}