/* ============================================================
   JYC VERSE card.xnebul.com 十二闪卡展示站
   布局: 顶栏(卡名) / 中央全屏大卡自适应 / 底栏(圆点+按钮)
   卡区绝不叠文字 — 文字只进顶/底留白带
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #07050f;
  color: #c9bfe8;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}

/* 档色氛围底光 (随卡切换) */
#bg-aura { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(var(--aura, 148,120,255), .22) 0%, transparent 60%),
    radial-gradient(80% 50% at 50% -10%, rgba(var(--aura, 148,120,255), .1) 0%, transparent 55%);
  transition: background .8s ease; }

/* ---------- 顶栏 ---------- */
#topbar { position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 18px 8px; gap: 10px; }
#brand { font-weight: 900; letter-spacing: .32em; font-size: .8rem; color: #fcd34d;
  text-shadow: 0 0 12px rgba(252,211,77,.35); white-space: nowrap; }
#card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
#card-name { font-weight: 900; font-size: 1rem; letter-spacing: .12em; color: #fff3d6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#counter { font-size: .72rem; color: #8b7fb8; font-variant-numeric: tabular-nums;
  letter-spacing: .1em; white-space: nowrap; }

/* 稀有度徽章 (五色铁律: 白/青/紫/金/红) */
#tier-badge { flex-shrink: 0; font-size: .6rem; font-weight: 800; letter-spacing: .18em;
  border-radius: 999px; padding: 2px 9px; border: 1px solid; }
.tb-common { color: #e5e7eb; border-color: rgba(229,231,235,.5);  background: rgba(229,231,235,.08); }
.tb-rare   { color: #7dd3fc; border-color: rgba(125,211,252,.55); background: rgba(125,211,252,.08); }
.tb-epic   { color: #c084fc; border-color: rgba(192,132,252,.55); background: rgba(192,132,252,.08); }
.tb-legend { color: #fcd34d; border-color: rgba(252,211,77,.6);   background: rgba(252,211,77,.08); }
.tb-mythic { color: #f87171; border-color: rgba(248,113,113,.6);  background: rgba(248,113,113,.1); }

/* ---------- 中央卡区 (全屏自适应) ---------- */
#stage { position: relative; z-index: 1; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; padding: 6px 0; }
#card-slot { height: 100%; display: flex; align-items: center; justify-content: center; }
/* 卡宽 = min(可用高·5/7, 视宽-留白) — JS 每帧不算, resize 时算好写入 --cw */
#hc-host { width: var(--cw, 320px); aspect-ratio: 5/7; position: relative;
  transition: opacity .22s ease, transform .22s ease; }
#hc-host.switching { opacity: 0; transform: scale(.96); }

/* 桌面侧边切换键 */
.navbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 92px; border: 1px solid rgba(148,120,255,.3); border-radius: 14px;
  background: rgba(18,12,40,.55); color: #c9bfe8; font-size: 2rem; line-height: 1;
  cursor: pointer; backdrop-filter: blur(6px); transition: all .2s; }
.navbtn:hover { background: rgba(60,40,120,.6); color: #fff; border-color: rgba(252,211,77,.5); }
#nav-prev { left: max(14px, env(safe-area-inset-left)); }
#nav-next { right: max(14px, env(safe-area-inset-right)); }
@media (max-width: 760px), (pointer: coarse) { .navbtn { display: none; } } /* 手机用滑动+底部按钮 */

/* ---------- 底栏 ---------- */
#bottombar { position: relative; z-index: 2; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 6px 16px calc(12px + env(safe-area-inset-bottom)); }
#dots { display: flex; gap: 6px; }
#dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(148,120,255,.28);
  transition: all .3s; }
#dots i.on { background: #fcd34d; box-shadow: 0 0 8px rgba(252,211,77,.8); transform: scale(1.35); }
#actions { display: flex; gap: 10px; }
.act { border: 1px solid rgba(148,120,255,.35); border-radius: 999px;
  background: rgba(18,12,40,.6); color: #c9bfe8; font-size: .8rem; font-weight: 700;
  padding: 9px 18px; cursor: pointer; letter-spacing: .06em; transition: all .2s;
  backdrop-filter: blur(6px); }
.act:active { transform: scale(.95); }
.act.primary { color: #1a1030; font-weight: 900;
  background: linear-gradient(160deg, #fff3c4, #fcd34d 55%, #d99a35);
  border-color: rgba(252,211,77,.8); box-shadow: 0 0 16px rgba(252,211,77,.35); }
.gyro { border: 1px dashed rgba(125,211,252,.5); border-radius: 999px;
  background: rgba(14,30,52,.6); color: #7dd3fc; font-size: .68rem; font-weight: 700;
  padding: 6px 16px; cursor: pointer; letter-spacing: .08em; }
.hidden { display: none !important; }

/* ---------- FoilFX: RuiC 全息箔 WebGL 叠加层 (加法混合盖在画窗上) ---------- */
.hc .l-art .foilfx, .hc .l-subject .foilfx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) {
  .hc .l-art .foilfx, .hc .l-subject .foilfx { mix-blend-mode: screen; } }
/* 未鉴定封印时熄灭 (跟随引擎 shine/glare 逻辑) */
.hc .unidentified .foilfx { opacity: 0; }