/* 卡牌详情面板（卡组编辑器用；3D 牌桌在 hall.css 里有同款） */
.cdetail{--d-gold:#e8c27a;--d-gold2:#ffe2a3;--d-ink:#f5ecdf;--d-muted:#c9b9a5;--d-blue:#8fd3ff;--d-heal:#86e0b5;position:fixed;z-index:120;width:330px;padding:12px;border-radius:16px;background:rgba(24,16,13,.96);border:1px solid var(--d-gold);box-shadow:0 22px 60px rgba(0,0,0,.65);display:grid;gap:8px;color:var(--d-ink);font-family:"Noto Sans SC",Inter,system-ui,sans-serif;pointer-events:auto}
.cdetail[hidden]{display:none!important}
.cdetail img{width:250px;max-height:52vh;object-fit:contain;justify-self:center;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.55)}
.cdetail .x{position:absolute;right:8px;top:8px;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(232,194,122,.4);background:rgba(40,27,22,.8);color:var(--d-ink);display:none;cursor:pointer}
.cdetail.pinned .x{display:grid;place-items:center}
.cdetail .kind{color:var(--d-gold);letter-spacing:.12em;font-size:10px}
.cdetail h3{margin:2px 0 6px;font:600 18px Georgia,"Noto Serif SC",serif;color:var(--d-ink);text-transform:none;letter-spacing:0}
.cdetail .gems{display:flex;gap:8px;margin:6px 0 4px;flex-wrap:wrap}
.cdetail .g{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.cdetail .g i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:900 12px Inter,sans-serif;font-style:normal;color:#fff;border:2px solid #f3d79b}
.cdetail .g b{font:800 18px Georgia,serif}
.cdetail .g.o i{background:radial-gradient(circle at 35% 30%,#59657a,#141922)}
.cdetail .g.p i{background:radial-gradient(circle at 35% 30%,#3c86c4,#123150)}
.cdetail .g.e i{background:radial-gradient(circle at 35% 30%,#d1557a,#4d0f22)}
.cdetail .note{margin:4px 0 0;font-size:11.5px;color:var(--d-gold2)}
.cdetail .effect{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:12.5px;line-height:1.55}
.cdetail .flavor{margin:8px 2px 0;font:italic 13px/1.6 Georgia,"Noto Serif SC",serif;color:#d8c7a8;border-left:2px solid var(--d-gold);padding-left:10px}
@media (max-width:760px){
  .cdetail{left:8px!important;right:8px;top:8px!important;width:auto;grid-template-columns:110px 1fr;align-items:start;max-height:50vh;overflow:auto;padding:10px}
  .cdetail img{width:110px;max-height:none}
  .cdetail h3{font-size:15px;padding-right:26px}
  .cdetail .flavor{font-size:12px}
}

/* v3 外观：羊皮纸面板，O/P/E 用和牌面同形的小图标（与 3D 牌桌一致） */
.cdetail{--d-ink:#2b211c;--d-muted:#7a6a5e;--d-gold:#b98a3e;color:var(--d-ink);border-color:#b98a3e;
 background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,#fbf4e6,#efe2c6);
 box-shadow:inset 0 0 0 4px #fbf4e6,inset 0 0 0 5px rgba(185,138,62,.55),inset 0 0 40px rgba(150,110,50,.18),0 24px 60px rgba(0,0,0,.6)}
.cdetail img{width:200px;box-shadow:0 12px 26px rgba(60,40,20,.45)}
.cdetail .kind{font-weight:700}
.cdetail h3{color:var(--d-ink)}
.cdetail .g{background:rgba(120,90,50,.08);border-color:rgba(120,90,50,.18);padding:2px 10px 2px 3px}
.cdetail .g i{position:relative;width:30px;height:30px;border:0;border-radius:0;background:none!important}
.cdetail .g i svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cdetail .g i svg *{stroke:#c9963f;stroke-width:2.2;stroke-linejoin:round}
.cdetail .g i em{position:relative;font:900 11px Inter,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cdetail .g.o i svg *{fill:#3b4456}.cdetail .g.p i svg *{fill:#2d6ea6}.cdetail .g.e i svg *{fill:#a8304a}
.cdetail .effect{background:rgba(120,90,50,.08);border:1px solid rgba(120,90,50,.14)}
.cdetail .effect .sb{color:#1c1a1f;font-weight:700}.cdetail .effect .sr{color:#b4233f;font-weight:700}
.cdetail .note{color:#8a5e10}
.cdetail .flavor{color:#6b5a4c}
.cdetail .chip{display:inline-block;margin:2px 4px 0 0;padding:2px 8px;border-radius:999px;border:1px solid rgba(120,90,50,.3);font-size:11px;color:var(--d-muted)}
.cdetail .x{background:#fbf4e6;color:var(--d-ink);border-color:rgba(185,138,62,.6)}
@media (max-width:760px){.cdetail img{width:110px}}