/* ===== JYC BOX 占位美术样式 (正式素材到位后逐项替换) ===== */

/* ---- 品牌字体体系 (免费商用, 双语就绪) ----
   展示层: 站酷快乐体(中文卡通) + Baloo 2(英文/数字圆胖卡通)
   正文层: Noto Sans SC 兜底 */
body { font-family: 'Baloo 2', 'Noto Sans SC', system-ui, sans-serif; }
h1, h2, h3, .brand-font, .nav-btn, .open-btn, .el-name {
  font-family: 'Baloo 2', 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
}
h1 { letter-spacing: .08em; }

.holo-text {
  background: linear-gradient(120deg, #f6d078, #fff6d8, #b48cff, #7de3ff, #f6d078);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-slide 6s linear infinite;
}
@keyframes holo-slide { to { background-position: 300% 0; } }

.nav-btn { color: #9ca3af; transition: color .2s; position: relative; padding-bottom: 2px; }
.nav-btn:hover, .nav-btn.active { color: #fcd34d; }
.nav-btn.active::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, transparent, #fcd34d, transparent);
}

.stat-chip {
  display: inline-flex; align-items: center;
  padding: .35rem .85rem; border-radius: 9999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #cbd5e1; backdrop-filter: blur(4px);
}

/* 稀有度图例卡 (接入 gem_{rarity}.png 宝石素材) */
.legend-card {
  border: 1px solid rgba(255,255,255,.09); border-radius: .8rem;
  padding: .8rem .4rem .7rem; background: rgba(255,255,255,.03);
  backdrop-filter: blur(4px); transition: transform .15s, border-color .2s;
}
.legend-card:hover { transform: translateY(-3px); border-color: rgba(252,211,77,.4); }
.legend-card img { width: 2.1rem; height: 2.1rem; object-fit: contain; margin: 0 auto .35rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

.open-btn {
  padding: 0.9rem 2.4rem;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1a1206;
  background: linear-gradient(135deg, #f6d078, #e8b04b, #f9e8b0);
  box-shadow: 0 0 30px rgba(246, 208, 120, .35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .2s;
}
.open-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 50px rgba(246,208,120,.55); }
.open-btn:disabled { opacity: .5; pointer-events: none; }
.ghost-btn {
  padding: .5rem 1.4rem; border-radius: 9999px; font-size: .85rem;
  border: 1px solid rgba(255,255,255,.2); color: #d1d5db; transition: all .2s;
}
.ghost-btn:hover { border-color: #fcd34d; color: #fcd34d; }

/* ---- 盒体 (正式素材 assets/box_closed.png + box_glow_{rarity}.png) ---- */
.box-cube {
  width: 16rem; height: 16rem; margin: 0 auto;
  background: url('/static/assets/box_closed.png') center / contain no-repeat;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(246,208,120,.16));
  animation: box-idle 6s ease-in-out infinite;
  position: relative;
}
.box-cube .face { display: none; } /* 旧 CSS 立方体占位面, 素材接线后隐藏 */
@keyframes box-idle {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-14px) rotate(1.5deg); }
}
.box-cube.summoning { animation: box-summon .85s ease-in-out infinite; }
@keyframes box-summon {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-6px) rotate(-3deg) scale(1.03); }
  50% { transform: translateY(-18px) rotate(2.5deg) scale(1.06); }
  80% { transform: translateY(-4px) rotate(-2deg) scale(1.02); }
}
/* 稀有度充能 (幕一由 JS 加 class): 换发光盒体图 + 对应色 glow */
.summoning.charge-common    { background-image: url('/static/assets/box_glow_common.png');    filter: drop-shadow(0 0 36px rgba(205,220,240,.55)); }
.summoning.charge-rare      { background-image: url('/static/assets/box_glow_rare.png');      filter: drop-shadow(0 0 42px rgba(125,227,255,.6)); }
.summoning.charge-epic      { background-image: url('/static/assets/box_glow_epic.png');      filter: drop-shadow(0 0 48px rgba(180,140,255,.65)); }
.summoning.charge-legendary { background-image: url('/static/assets/box_glow_legendary.png'); filter: drop-shadow(0 0 54px rgba(246,208,120,.7)); }
.summoning.charge-mythic    { background-image: url('/static/assets/box_glow_mythic.png');    filter: drop-shadow(0 0 64px rgba(255,100,80,.75)); animation: box-summon .85s ease-in-out infinite, mythic-flicker .35s linear infinite; }
@keyframes mythic-flicker { 50% { opacity: .85; } }

/* 开盒关键帧 (P1 素材 box_open_mid / box_open_burst; 传说/神话换专属 FX 全图) */
.box-cube.opening-mid {
  background-image: url('/static/assets/box_open_mid.png');
  animation: none; transform: scale(1.04);
  filter: drop-shadow(0 0 46px rgba(200,220,255,.5));
}
.box-cube.opening-burst {
  background-image: url('/static/assets/box_open_burst.png');
  animation: burst-pop .55s cubic-bezier(.25,1.4,.4,1) both;
  filter: drop-shadow(0 0 70px rgba(220,235,255,.65));
}
.box-cube.opening-burst.fxb-legendary { background-image: url('/static/assets/fx_legendary.png'); filter: drop-shadow(0 0 80px rgba(246,208,120,.75)); }
.box-cube.opening-burst.fxb-mythic    { background-image: url('/static/assets/fx_mythic.png');    filter: drop-shadow(0 0 90px rgba(255,90,70,.8)); }
@keyframes burst-pop {
  from { transform: scale(.98); opacity: .85; }
  55%  { transform: scale(1.2); }
  to   { transform: scale(1.12); opacity: 1; }
}

/* 幕一环境粒子 (P1 素材 particles_dust, 缓慢漂浮) */
.act-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url('/static/assets/particles_dust.png') center / 620px repeat;
  opacity: .22; animation: dust-drift 26s linear infinite;
}
@keyframes dust-drift { to { background-position: 310px -620px; } }

/* ---- 幕二: 元素条目 ---- */
.element-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1rem; border-radius: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(14px) scale(.98);
  animation: el-in .45s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes el-in { to { opacity: 1; transform: none; } }
.element-row .slot-tag { font-size: .68rem; color: #9ca3af; width: 4.5rem; flex: none; display: inline-flex; align-items: center; gap: .35rem; }
.slot-icon { width: 1.05rem; height: 1.05rem; object-fit: contain; opacity: .85; flex: none; filter: drop-shadow(0 0 4px rgba(160,190,255,.35)); }
.element-row .el-name { font-weight: 700; }
.element-row .el-price { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .85rem; }

.r-common    { color: #cbd5e1; }
.r-rare      { color: #7de3ff; }
.r-epic      { color: #c9a4ff; }
.r-legendary { color: #f6d078; }
.r-mythic    { color: #ff7a6e; text-shadow: 0 0 12px rgba(255,120,90,.6); }
.row-legendary { border-color: rgba(246,208,120,.45); background: rgba(246,208,120,.06); }
.row-mythic { border-color: rgba(255,110,90,.55); background: rgba(255,90,70,.08); box-shadow: 0 0 24px rgba(255,100,80,.15); }

/* 首铸徽章 (正式素材 assets/badge_first_mint.png; 文字由 font-size:0 隐藏) */
.first-mint-badge {
  display: inline-block; flex: none;
  width: 2.4rem; height: 2.8rem;
  background: url('/static/assets/badge_first_mint.png') center / contain no-repeat;
  font-size: 0; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,215,120,.55));
  animation: fm-pop .5s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes fm-pop { from { transform: scale(0); } }

/* ---- 幕三: 结算卡 (5:7 匹配卡框素材 750×1050) ---- */
.final-card { width: 260px; height: 364px; perspective: 1200px; }
.final-card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.3,.8,.3,1);
}
.final-card.flipped .final-card-inner { transform: rotateY(180deg); }
.final-card-face {
  position: absolute; inset: 0; border-radius: 1rem; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.final-card-back {
  background: #12101c url('/static/assets/card_back.png') center / cover no-repeat;
}
.final-card-front { transform: rotateY(180deg); padding: 1.4rem 1.3rem; text-align: center; }
/* 卡框 (正式素材 assets/frame_{rarity}.png, 窗口 alpha=0, 叠在内容之上) */
.fc-common::before, .fc-rare::before, .fc-epic::before, .fc-legendary::before, .fc-mythic::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: center / 100% 100% no-repeat;
}
.fc-common    { background: linear-gradient(160deg,#1d232e,#2b3442); }
.fc-rare      { background: linear-gradient(160deg,#0e2733,#155066); box-shadow: 0 0 40px rgba(125,227,255,.25); }
.fc-epic      { background: linear-gradient(160deg,#221436,#432575); box-shadow: 0 0 50px rgba(180,140,255,.3); }
.fc-legendary { background: linear-gradient(160deg,#2e2210,#6e4e14); box-shadow: 0 0 60px rgba(246,208,120,.4); }
.fc-mythic    { background: linear-gradient(160deg,#330f14,#7a1f1a); box-shadow: 0 0 80px rgba(255,110,80,.5); }
/* 全息流光叠层 (P1 素材 holo_sheen, soft-light 缓慢游走) */
.final-card-front::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: url('/static/assets/holo_sheen.png') 0% 0% / 220% 220%;
  mix-blend-mode: soft-light; opacity: .38;
  animation: sheen-move 7s ease-in-out infinite alternate;
}
@keyframes sheen-move { to { background-position: 100% 100%; } }
.fc-common::before    { background-image: url('/static/assets/frame_common.png'); }
.fc-rare::before      { background-image: url('/static/assets/frame_rare.png'); }
.fc-epic::before      { background-image: url('/static/assets/frame_epic.png'); }
.fc-legendary::before { background-image: url('/static/assets/frame_legendary.png'); }
.fc-mythic::before    { background-image: url('/static/assets/frame_mythic.png'); }

/* 品相印章 (正式素材 assets/stamp_{condition}.png; 文字由 font-size:0 隐藏) */
.cond-stamp {
  display: inline-block; width: 4.8rem; height: 4.8rem;
  background: center / contain no-repeat;
  font-size: 0; color: transparent;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation: stamp-in .4s cubic-bezier(.3,1.8,.4,1) both;
}
@keyframes stamp-in { from { transform: rotate(-8deg) scale(2.4); opacity: 0; } }
.cond-flawless { background-image: url('/static/assets/stamp_flawless.png'); filter: drop-shadow(0 0 14px rgba(255,220,140,.7)); }
.cond-pristine { background-image: url('/static/assets/stamp_pristine.png'); }
.cond-fine     { background-image: url('/static/assets/stamp_fine.png'); }
.cond-standard { background-image: url('/static/assets/stamp_standard.png'); }

/* ---- 画廊卡片 (套用 fc-{rarity} 卡框素材) ---- */
.gallery-card {
  border-radius: .9rem; padding: 1.2rem 1.1rem 1.6rem; aspect-ratio: 5/7;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; transition: transform .15s;
  position: relative; overflow: hidden;
}
.gallery-card > * { position: relative; z-index: 1; }
.gallery-card:hover { transform: translateY(-4px); }

/* 幕三高稀有度彩带/星火飘落 (P1 素材 particles_spark / particles_foil) */
#act3 { position: relative; overflow: hidden; }
#act3-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; }
#act3-fx.on { display: block; }
#act3-fx.on::before, #act3-fx.on::after {
  content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background-repeat: repeat; background-size: 430px;
}
#act3-fx.on::before { background-image: url('/static/assets/particles_spark.png'); opacity: .4; animation: fx-fall 11s linear infinite; }
#act3-fx.on::after  { background-image: url('/static/assets/particles_foil.png');  opacity: .5; animation: fx-fall 15s linear infinite; }
@keyframes fx-fall { to { transform: translateY(50%); } }
#act3 > *:not(#act3-fx) { position: relative; z-index: 1; }

/* ---- 图鉴 ---- */
.codex-item {
  padding: .8rem 1rem; border-radius: .7rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  display: flex; gap: .8rem; align-items: flex-start;
}
.codex-item .codex-body { flex: 1; min-width: 0; }
/* 未解锁条目缩略卡 (P1 素材 codex_unknown) */
.codex-thumb {
  width: 2.9rem; aspect-ratio: 5/7; flex: none; border-radius: .35rem;
  object-fit: cover; opacity: .85;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.codex-item.owned { border-color: rgba(246,208,120,.4); background: rgba(246,208,120,.05); }
.codex-item.locked { opacity: .45; filter: grayscale(.6); }
.filter-chip {
  padding: .25rem .8rem; border-radius: 9999px; font-size: .75rem;
  border: 1px solid rgba(255,255,255,.15); color: #9ca3af; cursor: pointer;
}
.filter-chip.active { border-color: #fcd34d; color: #fcd34d; }

.view.hidden, .act.hidden { display: none; }

/* 全站背景 (正式素材 assets/bg_main.jpg + 压暗遮罩保文字对比度) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(7,6,11,.68), rgba(7,6,11,.85)),
    url('/static/assets/bg_main.jpg') center / cover no-repeat;
}

/* 卡图 (mock/真实通道生成) */
.card-art-img { width: 100%; max-width: 190px; border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
#final-card-art .card-art-img { max-width: 210px; margin: 0 auto; }

/* ===== 全息闪卡引擎 (holo.js 驱动, 技术参考 simeydotme/pokemon-cards-css) =====
   指针位置写入 CSS 变量: --mx/--my 光斑中心, --posx/--posy 箔纹偏移,
   --rx/--ry 3D 倾角, --hyp 距中心距离, --o 激活透明度 */
.holo-card-fx {
  --mx: 50%; --my: 50%; --posx: 50%; --posy: 50%;
  --rx: 0deg; --ry: 0deg; --hyp: 0; --o: 0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
  will-change: transform;
}
.holo-card-fx.holo-active { transition: transform .12s ease-out; }

/* 闪箔层: 彩虹线性折射 × 径向光斑, color-dodge 提亮 */
.holo-shine {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  opacity: calc(var(--o) * .75);
  transition: opacity .4s;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 42%),
    repeating-linear-gradient(
      calc(60deg + var(--ry) * 2),
      rgba(255, 90, 120, .55) calc(var(--posx) * .1 + 0%),
      rgba(255, 200, 80, .55) calc(var(--posx) * .1 + 4%),
      rgba(120, 255, 160, .55) calc(var(--posx) * .1 + 8%),
      rgba(90, 200, 255, .55) calc(var(--posx) * .1 + 12%),
      rgba(190, 120, 255, .55) calc(var(--posx) * .1 + 16%),
      rgba(255, 90, 120, .55) calc(var(--posx) * .1 + 20%)
    );
  background-blend-mode: overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(.65 + var(--hyp) * .3)) contrast(1.6) saturate(1.15);
}
/* 眩光层: 跟随指针的高光扫过 */
.holo-glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  opacity: calc(var(--o) * .5);
  transition: opacity .4s;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
    rgba(255,255,255,.75) 5%, rgba(255,255,255,.15) 32%, rgba(0,0,0,.45) 90%);
  mix-blend-mode: overlay;
}
/* 稀有度调味: 高稀有闪箔更浓 */
.fc-legendary .holo-shine { opacity: calc(var(--o) * .9); filter: brightness(calc(.7 + var(--hyp) * .35)) contrast(1.8) saturate(1.4) hue-rotate(-12deg); }
.fc-mythic .holo-shine    { opacity: calc(var(--o) * .95); filter: brightness(calc(.75 + var(--hyp) * .4)) contrast(2) saturate(1.6) hue-rotate(160deg); }
.fc-common .holo-shine    { opacity: calc(var(--o) * .45); }
/* 画廊卡 hover 抬升与倾斜共存 */
.gallery-card.holo-card-fx:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }

/* ============================================================
   ===== 二期换装 · 卡通乐园资产接线 (img2/, 覆盖上方占位) =====
   ============================================================ */

/* ---- 全站背景: 乐园夜景 (轻压暗保对比度) ---- */
body::before {
  background:
    linear-gradient(rgba(12,8,28,.52), rgba(9,6,22,.78)),
    url('/static/img2/bg_park_night.webp') center / cover no-repeat;
}

/* ---- 主按钮: btn_main 九宫格 border-image (中段拉伸, 圆角端帽不变形) ----
   素材 640×332, 端帽约 150px, 上下边约 120px */
.open-btn {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  border-image-source: url('/static/img2/btn_main.webp');
  border-image-slice: 130 170 140 170 fill;
  border-image-width: 34px 46px 38px 46px;
  border-image-repeat: stretch;
  padding: 1.05rem 2.8rem 1.2rem;
  color: #5b3708;
  text-shadow: 0 1px 0 rgba(255,240,200,.7);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(246,208,120,.28));
  transition: transform .12s, filter .2s;
}
.open-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)) drop-shadow(0 0 34px rgba(246,208,120,.5));
}
.open-btn:active {
  border-image-source: url('/static/img2/btn_main_pressed.webp');
  transform: translateY(1px) scale(.99);
}
.open-btn:disabled { opacity: .55; pointer-events: none; }

/* ---- 次按钮: btn_secondary (紫全息) 九宫格 ---- */
.ghost-btn {
  border: 0; border-radius: 0;
  border-image-source: url('/static/img2/btn_secondary.webp');
  border-image-slice: 116 150 120 150 fill;
  border-image-width: 26px 36px 28px 36px;
  border-image-repeat: stretch;
  padding: .68rem 1.7rem .74rem;
  color: #e8e4ff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  transition: transform .12s, filter .2s;
}
.ghost-btn:hover {
  color: #fff; transform: translateY(-1px);
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(150,140,255,.45));
}

/* ---- 统计 chips: chip_stat 九宫格 (深紫金边) ---- */
.stat-chip {
  border: 0; border-radius: 0; background: none; backdrop-filter: none;
  border-image-source: url('/static/img2/chip_stat.webp');
  border-image-slice: 72 96 76 96 fill;
  border-image-width: 14px 22px 15px 22px;
  border-image-repeat: stretch;
  padding: .5rem 1.15rem .55rem;
  color: #ddd6f3;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* ---- 声音按钮: btn_round_sound 圆形宝石底 ---- */
#sound-btn {
  width: 2.6rem; height: 2.6rem; border: 0;
  background: url('/static/img2/btn_round_sound.webp') center / contain no-repeat;
  color: #f3ead0; font-size: .8rem;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
  transition: transform .15s, filter .2s;
}
#sound-btn:hover { transform: scale(1.08); filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(160,150,255,.55)); }

/* ---- 图鉴筛选 chips: 激活态用 filter_chip_active 胶囊 ---- */
.filter-chip { transition: all .18s; }
.filter-chip.active {
  border: 0; border-radius: 0; color: #5b3708; font-weight: 700;
  border-image-source: url('/static/img2/filter_chip_active.webp');
  border-image-slice: 90 130 100 130 fill;
  border-image-width: 16px 24px 18px 24px;
  border-image-repeat: stretch;
  padding: .38rem 1rem .42rem;
  text-shadow: 0 1px 0 rgba(255,240,200,.6);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ---- 稀有度图例: 精灵替换宝石 ---- */
.legend-card {
  border: 0; border-radius: 1rem; background: rgba(20,14,44,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.3);
  padding: .9rem .4rem .75rem;
}
.legend-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(252,211,77,.35), 0 8px 20px rgba(0,0,0,.4); }
.legend-card img {
  width: 3.4rem; height: 3.4rem; object-fit: contain; margin: 0 auto .3rem;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.4));
  transition: transform .25s cubic-bezier(.3,1.5,.5,1);
}
.legend-card:hover img { transform: scale(1.18) translateY(-3px); }

/* ---- 主页盒台: 云朵平台垫底 ---- */
#box-stage::after {
  content: ''; position: absolute; left: 50%; bottom: -3.4rem; z-index: -1;
  width: 21rem; height: 9rem; transform: translateX(-50%);
  background: url('/static/img2/cloud_platform.webp') center / contain no-repeat;
  opacity: .95; pointer-events: none;
  animation: cloud-bob 6s ease-in-out infinite;
}
@keyframes cloud-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-7px); }
}

/* ---- 主标题绸带 + 星星分隔线 ---- */
.ribbon-wrap {
  display: inline-block; position: relative;
  padding: 1.1rem 3.2rem 1.5rem;
  background: url('/static/img2/ribbon_title.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.sparkle-divider {
  height: 44px; margin: 0 auto; max-width: 560px;
  background: url('/static/img2/divider_sparkle.webp') center / contain no-repeat;
  opacity: .9;
}

/* ---- JYC 迎宾/角色位 ---- */
.jyc-figure {
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.jyc-hero-welcome {
  position: absolute; right: -1rem; bottom: -2.2rem; width: 11.5rem; z-index: 2;
  animation: jyc-bob 5s ease-in-out infinite;
}
@keyframes jyc-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
@media (max-width: 768px) { .jyc-hero-welcome { width: 8rem; right: -.8rem; bottom: -1.6rem; } }

/* 三幕守护角色 */
.act-jyc { position: absolute; width: 9rem; z-index: 1; pointer-events: none; filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
#act1 .act-jyc { left: 6%; bottom: 8%; animation: jyc-bob 4.5s ease-in-out infinite; }
#act2-jyc { position: sticky; top: 4.5rem; float: right; width: 7.5rem; margin: -1rem -1rem 0 0; z-index: 5; pointer-events: none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); animation: jyc-bob 5s ease-in-out infinite; }
#act3 .act-jyc { right: 5%; top: 12%; animation: jyc-bob 4s ease-in-out infinite; }
@media (max-width: 900px) { .act-jyc, #act2-jyc { display: none; } }

/* ---- 空画廊: 睡觉 JYC ---- */
#gallery-empty img { filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }

/* ---- 加载精灵星星圈 spinner ---- */
.jyc-spinner {
  width: 3.4rem; height: 3.4rem; display: inline-block;
  background: url('/static/img2/loading_spinner.webp') center / contain no-repeat;
  animation: spin-steps 1.1s steps(8) infinite;
}
@keyframes spin-steps { to { transform: rotate(360deg); } }

/* ---- 页面标题票根/锦旗装饰 ---- */
.page-ticket {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15rem; padding: 1.05rem 2.6rem 1.15rem;
  background: url('/static/img2/ticket_banner.webp') center / 100% 100% no-repeat;
  color: #6b4a12; text-shadow: 0 1px 0 rgba(255,248,224,.8);
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.4));
}
.tab-flag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2.6rem 1.25rem 2.2rem;
  background: url('/static/img2/tab_active.webp') center / 100% 100% no-repeat;
  color: #5b3708; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.4));
}

/* ---- 相框: 结算卡图鉴/画廊头像用 ---- */
.photo-frame {
  position: relative;
  background: url('/static/img2/frame_photo.webp') center / 100% 100% no-repeat;
  padding: 9%;
}

/* ---- 路牌步骤区 ---- */
.signpost-img { width: 15rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* ---- 开盒动画切换黑洞宇宙背景 ---- */
#reveal-overlay {
  background:
    linear-gradient(rgba(5,3,14,.6), rgba(5,3,14,.78)),
    url('/static/img2/bg_park_night2.webp') center / cover no-repeat fixed;
}

/* ---- 导航 logo 金币旋转入场 ---- */
#nav-logo img { transition: transform .4s cubic-bezier(.3,1.4,.4,1); }
#nav-logo:hover img { transform: rotate(-12deg) scale(1.1); }

/* --- 玩法三步 & 品牌字 --- */
.brand-word { font-family: 'ZCOOL KuaiLe', 'Baloo 2', sans-serif; text-shadow: 0 0 12px rgba(240,180,41,.35); }
.howto-step { display: flex; align-items: flex-start; gap: .9rem; }
.howto-num {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.1rem; color: #1a1230;
  background: radial-gradient(circle at 32% 28%, #ffe9a8, #f0b429 62%, #c98a12);
  box-shadow: 0 3px 10px rgba(240,180,41,.4), inset 0 -2px 4px rgba(120,70,0,.45);
}

/* ================= v3 「玩起来」大改造 ================= */

/* --- 全局提亮一档: 乐园感 --- */
body::before {
  background: linear-gradient(rgba(16,10,36,.30), rgba(10,7,26,.55)),
    url('/static/img2/bg_park_night.webp') center/cover no-repeat !important;
}

/* --- 卡通描边大标题 (弃彩带图) --- */
.ribbon-wrap { background: none !important; padding: 0 !important; }
.toon-title {
  font-family: 'ZCOOL KuaiLe', 'Baloo 2', sans-serif;
  color: #fff7e6;
  -webkit-text-stroke: 2px #3b1d6e;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #3b1d6e, 0 7px 18px rgba(0,0,0,.45),
    0 0 32px rgba(255,214,120,.35);
  letter-spacing: .06em;
}
.toon-title .tt-star { -webkit-text-stroke: 0; font-size: .55em; vertical-align: .5em; display: inline-block; animation: star-twinkle 1.6s ease-in-out infinite; }
.toon-title .tt-star:last-child { animation-delay: .8s; }
@keyframes star-twinkle { 0%,100%{ transform: scale(1) rotate(0); opacity:.85;} 50%{ transform: scale(1.35) rotate(18deg); opacity:1;} }

/* --- 跑马灯 (出货播报, 赌场氛围) --- */
#ticker-bar {
  position: fixed; top: 3.5rem; left: 0; right: 0; z-index: 35;
  height: 1.9rem; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, rgba(59,29,110,.85), rgba(30,14,66,.85));
  border-bottom: 1px solid rgba(255,214,120,.25);
  backdrop-filter: blur(4px);
}
#ticker-track {
  display: inline-flex; gap: 3.5rem; white-space: nowrap; align-items: center; height: 100%;
  padding-left: 100vw; animation: ticker-roll 38s linear infinite;
  font-size: .72rem; color: #e8dcff;
}
#ticker-track .tk-hot { color: #ffd678; font-weight: 700; }
#ticker-track .tk-mythic { color: #ff8a7a; font-weight: 800; text-shadow: 0 0 8px rgba(255,80,60,.6); }
@keyframes ticker-roll { to { transform: translateX(-100%); } }
.view { padding-top: 5.4rem !important; }

/* --- 小圆钮 (玩法/概率, 虾算算式) --- */
.pill-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .95rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: #ffe9b8; background: rgba(59,29,110,.75);
  border: 1.5px solid rgba(255,214,120,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.pill-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 5px 14px rgba(240,180,41,.3); }
.pill-btn:active { transform: scale(.96); }

/* --- 弹窗 --- */
.jyc-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.jyc-modal.hidden { display: none; }
.jyc-modal-mask { position: absolute; inset: 0; background: rgba(8,5,20,.72); backdrop-filter: blur(3px); }
.jyc-modal-box {
  position: relative; max-width: 34rem; width: 100%; max-height: 82vh; overflow-y: auto;
  background: linear-gradient(165deg, #2a1856, #1a0f38);
  border: 2px solid rgba(255,214,120,.45); border-radius: 1.4rem;
  padding: 1.6rem 1.5rem; box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px rgba(150,90,255,.18);
  animation: modal-pop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modal-pop { from { transform: scale(.85); opacity: 0; } }
.jyc-modal-close {
  position: absolute; top: .7rem; right: .9rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #cbb8ff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.jyc-modal-close:hover { background: rgba(255,100,80,.3); color: #fff; transform: rotate(90deg); }

/* --- 幕一动效 v3: 呼吸膨胀 + 盒缝漏光 + 白闪 + 冲击波 --- */
#summon-wrap { position: relative; }
#leak-glow {
  position: absolute; inset: -18%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--leak-c1, rgba(230,235,255,.9)) 0%, var(--leak-c2, rgba(180,200,255,.35)) 42%, transparent 70%);
  filter: blur(14px);
  animation: leak-pulse 1s ease-in-out infinite;
}
@keyframes leak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
#leak-glow.leak-common    { --leak-c1: rgba(235,240,255,.95); --leak-c2: rgba(190,205,240,.4); }
#leak-glow.leak-rare      { --leak-c1: rgba(140,230,255,.95); --leak-c2: rgba(60,180,255,.45); }
#leak-glow.leak-epic      { --leak-c1: rgba(200,150,255,.95); --leak-c2: rgba(140,80,255,.5); }
#leak-glow.leak-legendary { --leak-c1: rgba(255,225,140,1);   --leak-c2: rgba(255,180,60,.55); animation: leak-pulse .7s ease-in-out infinite; }
#leak-glow.leak-mythic {
  background: conic-gradient(from 0deg, rgba(255,90,90,.9), rgba(255,200,80,.85), rgba(120,255,180,.8), rgba(100,180,255,.85), rgba(220,110,255,.9), rgba(255,90,90,.9));
  filter: blur(18px) saturate(1.4);
  animation: leak-pulse .5s ease-in-out infinite, leak-spin 2.4s linear infinite;
}
@keyframes leak-spin { to { filter: blur(18px) saturate(1.4) hue-rotate(360deg); } }
/* 盒缝溢光细线 */
#summon-box.seam-lit::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 46%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--leak-c1, #fff) 30%, #fff 50%, var(--leak-c1, #fff) 70%, transparent);
  filter: blur(1.5px); opacity: .9;
  box-shadow: 0 0 18px 4px var(--leak-c2, rgba(200,210,255,.6));
  animation: seam-flicker .28s linear infinite;
}
@keyframes seam-flicker { 0%,100% { opacity: .95; } 50% { opacity: .55; } }
#flash-white {
  position: fixed; inset: 0; z-index: 70; background: #fff; opacity: 0; pointer-events: none;
}
#shockwave {
  position: fixed; z-index: 69; left: 50%; top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 0 30px 6px rgba(255,220,140,.55), inset 0 0 20px rgba(255,255,255,.4);
}

/* --- 背包 (原画廊) --- */
.pack-stat {
  background: linear-gradient(160deg, rgba(59,29,110,.7), rgba(28,14,60,.85));
  border: 1.5px solid rgba(255,214,120,.35); border-radius: 1rem;
  padding: .9rem 1rem; text-align: center;
}
.pack-stat .ps-num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.55rem; color: #ffd678; line-height: 1.1; }
.pack-stat .ps-label { font-size: .68rem; color: #b9a8e0; margin-top: .15rem; }
.gallery-card { position: relative; }
.corner-badge {
  position: absolute; top: -.5rem; right: -.5rem; z-index: 3;
  padding: .2rem .55rem; border-radius: 999px; font-size: .62rem; font-weight: 800;
  transform: rotate(8deg); pointer-events: none;
}
.corner-badge.cb-legendary { background: linear-gradient(135deg,#ffe9b0,#f0b429); color: #4a2c00; box-shadow: 0 0 14px rgba(246,208,120,.8); animation: badge-glow 1.6s ease-in-out infinite; }
.corner-badge.cb-mythic { background: linear-gradient(135deg,#ff9a8a,#e5342a); color: #fff; box-shadow: 0 0 16px rgba(255,80,60,.85); animation: badge-glow 1.1s ease-in-out infinite; }
@keyframes badge-glow { 0%,100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }

/* 首页收纳: 底部图例已迁入弹窗 */
#modal-odds .legend-card img { width: 4.2rem; height: 4.2rem; object-fit: contain; }

/* ================= v4 正规化: 厚边质感 + 底部Tab + 空间层次 ================= */

/* --- 设计令牌: 虾算算式厚边 (粗深色描边 + 底部厚阴影"墩"感 + 内高光) --- */
:root {
  --ink: #2a1650;            /* 深紫描边 */
  --ink-heavy: #1c0e38;      /* 更深的底阴影 */
  --panel-bg: linear-gradient(170deg, #342060, #241448);
  --gold: #f0b429;
}
.chunky {
  border: 3px solid var(--ink);
  border-radius: 1.1rem;
  box-shadow: 0 5px 0 var(--ink-heavy), 0 9px 18px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,255,255,.14);
}

/* pill-btn 升级厚边 */
.pill-btn {
  border: 2.5px solid var(--ink) !important;
  box-shadow: 0 4px 0 var(--ink-heavy), 0 7px 12px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, #4a2c8a, #38206a) !important;
  transition: transform .12s, box-shadow .12s !important;
}
.pill-btn:hover { transform: translateY(-1px) !important; }
.pill-btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ink-heavy), 0 3px 6px rgba(0,0,0,.3), inset 0 1.5px 0 rgba(255,255,255,.18) !important; }

/* 弹窗厚边化 */
.jyc-modal-box {
  border: 3px solid var(--ink) !important;
  box-shadow: 0 6px 0 var(--ink-heavy), 0 22px 60px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.12) !important;
}

/* 统计块厚边化 */
.pack-stat {
  border: 2.5px solid var(--ink) !important;
  box-shadow: 0 4px 0 var(--ink-heavy), 0 8px 14px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.1) !important;
}

/* --- 底部 Tab 导航 (微信小游戏风) --- */
#bottom-tab {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; justify-content: center; gap: .6rem;
  padding: .5rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(30,16,58,.92), rgba(20,10,42,.98));
  border-top: 2.5px solid var(--ink);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}
.tab-item {
  flex: 1; max-width: 9rem;
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .45rem 0 .4rem; border-radius: .95rem;
  border: 2.5px solid transparent;
  color: #8f7fc0; font-weight: 700; font-size: .72rem;
  transition: all .15s; cursor: pointer; position: relative;
}
.tab-item .tab-icon {
  width: 2.3rem; height: 2.3rem; border-radius: .8rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.08);
  transition: all .15s;
}
.tab-item.active {
  color: #ffe9b8;
  background: linear-gradient(180deg, #4a2c8a, #362063);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink-heavy), inset 0 2px 0 rgba(255,255,255,.15);
  transform: translateY(-4px);
}
.tab-item.active .tab-icon {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 68%, #c98a12);
  border-color: var(--ink); color: #3a2400;
  box-shadow: 0 3px 8px rgba(240,180,41,.5);
}
.tab-item:active { transform: translateY(0); }
/* 顶部导航只留 logo+声音; 视图底部给 tab 留空间 */
.view { padding-bottom: 6.5rem !important; }

/* --- 云朵底座 v2: 与盒子同组浮动, 形成上下层空间 --- */
#box-stage::after { display: none !important; } /* 弃用旧的独立云朵 */
#float-group { position: relative; width: 20rem; height: 21rem; margin: 0 auto; animation: group-bob 5.5s ease-in-out infinite; }
@keyframes group-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
#float-group .box-cube {
  position: absolute; left: 50%; top: .4rem; margin: 0 0 0 -8rem; transform: none;
  /* 关键: 禁用自身 box-idle 动画(其 transform 会覆盖居中偏移导致盒子跑到云朵斜上方), 浮动交给 group-bob */
  animation: none; z-index: 2;
}
#cloud-base {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 19rem; height: 7.6rem; z-index: 1;
  background: url('/static/img2/cloud_platform.webp') center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
/* 盒子在云朵上的接触阴影 → 视觉锚定"坐在云上" */
#float-group .box-cube::before {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -1.2rem; height: 1.6rem;
  border-radius: 50%; background: rgba(20,10,40,.5); filter: blur(7px); z-index: -1;
}

/* --- 品相条 (百分比可视化, 关联价格) --- */
.cond-bar-wrap { display: flex; align-items: center; gap: .5rem; }
.cond-bar { flex: 1; height: .55rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1.5px solid var(--ink); overflow: hidden; }
.cond-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, #4ade80 55%, #ffd678);
  transition: width .8s cubic-bezier(.34,1.3,.64,1);
}
.cond-pct { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.cond-pct.hi { color: #ffd678; } .cond-pct.mid { color: #4ade80; } .cond-pct.lo { color: #9ca3af; }

/* --- 背包卡片可点 --- */
.gallery-card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.gallery-card:hover { transform: translateY(-4px); }
.gallery-card:active { transform: scale(.97); }

/* --- 卡详情弹窗内部 --- */
.card-detail-el {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .6rem; border-radius: .6rem;
  background: rgba(255,255,255,.045); border: 1.5px solid rgba(255,255,255,.07);
  font-size: .72rem;
}
.card-detail-el .cd-slot { color: #8f7fc0; width: 3.2rem; flex: none; }
.card-detail-el .cd-price { margin-left: auto; font-family: 'Baloo 2', sans-serif; font-weight: 700; }

/* --- 图鉴: 每行3小方格 --- */
#codex-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: .65rem !important; }
.codex-item {
  display: flex !important; flex-direction: column !important; align-items: center;
  padding: .7rem .5rem .6rem !important; text-align: center;
  border: 2.5px solid var(--ink) !important; border-radius: .9rem !important;
  background: var(--panel-bg) !important;
  box-shadow: 0 4px 0 var(--ink-heavy), 0 7px 12px rgba(0,0,0,.3), inset 0 1.5px 0 rgba(255,255,255,.08) !important;
  transition: transform .15s;
}
.codex-item:hover { transform: translateY(-3px); }
.codex-item .codex-thumb {
  width: 3.4rem !important; height: 3.4rem !important; border-radius: .7rem !important;
  object-fit: contain !important; background: rgba(0,0,0,.25) !important;
  border: 2px solid rgba(255,255,255,.08); padding: .3rem !important;
}
.codex-item .codex-body { width: 100%; margin-top: .45rem; }
.codex-item.locked { opacity: .55; filter: saturate(.4); }
.codex-item.owned { border-color: rgba(240,180,41,.65) !important; }
.codex-item.owned::after {
  content: '✓'; position: absolute; top: .3rem; right: .45rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: .7rem; font-weight: 900;
  background: var(--gold); color: #3a2400; display: flex; align-items: center; justify-content: center;
}
.codex-item { position: relative !important; }
@media (max-width: 640px) { #codex-grid { grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; } .codex-item .codex-thumb { width: 2.8rem !important; height: 2.8rem !important; } }

/* ================= v5: 声音提示 + 登录 ================= */
#sound-hint {
  position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%);
  z-index: 45; padding: .5rem 1.1rem; font-size: .78rem; font-weight: 700;
  color: #ffe9b0; background: rgba(30,16,60,.92);
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink-heavy), 0 6px 14px rgba(0,0,0,.4);
  transition: opacity .4s; animation: hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }

/* 登录弹窗 */
#modal-auth .auth-input {
  width: 100%; padding: .7rem 1rem; border-radius: .8rem;
  background: rgba(0,0,0,.35); color: #fff; font-size: .9rem;
  border: 2.5px solid var(--ink); outline: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.3);
}
#modal-auth .auth-input:focus { border-color: var(--gold); }
#auth-user-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 9rem; }
#auth-user-chip .au-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }

/* ================= v6 赛博精致化 (参考虾算算设计体系, 换皮为赛博) =================
   虾算算做法: 纯色底 + 高饱和主色按钮(色块+深一档底沿+墨线描边) + 贴纸投影
   我们的映射: 深空纯色底 + 霓虹金/青按钮 + 网格微光特效 + 硬朗字体 */

/* --- 字体: 站酷庆科黄油体(粗壮平直, 不歪) + Rajdhani(赛博数字) --- */
body { font-family: 'Noto Sans SC', system-ui, sans-serif !important; }
.toon-title, .brand-word, .tab-label, .cond-stamp, .page-ticket {
  font-family: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif !important;
  letter-spacing: .04em !important;
}
.cond-pct, .pack-stat .ps-num, .card-detail-el .cd-price, .howto-num, #final-jv,
.el-price, .ticker-item b {
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif !important;
  font-weight: 700 !important; letter-spacing: .02em;
}
.open-btn, .pill-btn, .ghost-btn, .filter-chip {
  font-family: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif !important;
  letter-spacing: .05em;
}

/* --- 标题: 去卡通描边, 改霓虹渐变 + 干净辉光 --- */
.toon-title {
  -webkit-text-stroke: 0 !important;
  color: transparent !important;
  background: linear-gradient(180deg, #fff 8%, #ffe9b0 45%, #f0b429 90%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 rgba(59,29,110,.9)) drop-shadow(0 0 22px rgba(240,180,41,.30));
}
.toon-title .tt-star { animation: none !important; opacity: .9; }

/* --- 纯色深空背景: 弃照片底图, 网格 + 顶部极光 + 扫描线 --- */
body { background: #0a0918 !important; }
body::before {
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%, rgba(124,92,214,.28), transparent 60%),
    radial-gradient(ellipse 55% 30% at 82% 4%, rgba(78,205,196,.12), transparent 65%),
    linear-gradient(rgba(148,120,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,120,255,.05) 1px, transparent 1px),
    #0a0918 !important;
  background-size: auto, auto, 44px 44px, 44px 44px, auto !important;
}
/* 开盒覆盖层: 同体系更深一档 */
#reveal-overlay {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(124,92,214,.22), transparent 62%),
    linear-gradient(rgba(148,120,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,120,255,.04) 1px, transparent 1px),
    #070613 !important;
  background-size: auto, 44px 44px, 44px 44px, auto !important;
}

/* --- 描边体系: 墨线换成霓虹紫黑, 底沿保留(虾算算的立体按压感) --- */
:root {
  --ink: #17123a;
  --ink-heavy: #0c0a24;
  --gold: #f0b429;
  --cyan: #4ecdc4;
  --panel-bg: linear-gradient(180deg, rgba(30,24,64,.92), rgba(19,15,44,.96));
}
.pill-btn, .ghost-btn {
  border: 2.5px solid rgba(148,120,255,.35) !important;
  background: linear-gradient(180deg, rgba(44,34,88,.9), rgba(28,22,60,.95)) !important;
  box-shadow: 0 4px 0 #0c0a24, 0 8px 16px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.10) !important;
  color: #d8ccff !important;
}
.pill-btn:hover, .ghost-btn:hover { border-color: rgba(240,180,41,.6) !important; color: #ffe9b0 !important; }
.pill-btn:active, .ghost-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0c0a24, 0 3px 8px rgba(0,0,0,.35) !important; }

/* --- 底部 Tab: 精致化 (毛玻璃 + 霓虹上沿) --- */
#bottom-tab {
  background: rgba(13,10,32,.88) !important;
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(148,120,255,.25) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5), 0 -1px 0 rgba(148,120,255,.12) !important;
}
.tab-item.active .tab-icon { box-shadow: 0 0 18px rgba(240,180,41,.55), 0 4px 0 #0c0a24 !important; }

/* --- 卡片/弹窗: 收紧圆角与投影, 精致化 --- */
.jyc-modal-box, .pack-stat, .codex-item, .gallery-card {
  border: 2px solid rgba(148,120,255,.28) !important;
  box-shadow: 0 4px 0 #0c0a24, 0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.codex-item.owned { border-color: rgba(240,180,41,.55) !important; }

/* --- 干掉歪斜: 全站禁止倾斜类动画残留 --- */
#act2-jyc, .act-jyc { animation: none !important; }
@keyframes jyc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }