@charset "UTF-8";
/* assets/css/card-page.css */
.card-page .cp-wrap { padding-top: var(--sp-2); padding-bottom: var(--sp-6); }
.card-page .card-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: var(--sp-3); font-size: var(--fs-small); color: #a9a4c4; }
.card-page .card-crumbs a { color: #cfc9e6; text-decoration: none; }
.card-page .card-crumbs a:hover, .card-page .card-crumbs a:focus-visible { color: #f3dc8f; text-decoration: underline; text-underline-offset: 3px; }
.card-page .card-crumbs i { font-size: .7em; color: #6f6a8f; }
.card-page .card-crumbs [aria-current] { color: #fefee2; font-weight: 700; }
.card-page .cp-grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: var(--sp-6); align-items: start; }
.card-page .cp-visual { position: sticky; top: 96px; }
.card-page .cp-visual .detail-card { max-width: 400px; margin: 0 auto; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--fc) 28%, transparent)); }
.card-page .cp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.card-page .cp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700; color: #ddd8f0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.card-page .cp-chip-fac { color: color-mix(in srgb, var(--fc) 70%, #fff); border-color: color-mix(in srgb, var(--fc) 55%, transparent); background: color-mix(in srgb, var(--fc) 10%, transparent); }
.card-page .cp-chip-own { color: #ffd6ec; border-color: rgba(255,79,168,.5); background: rgba(255,79,168,.12); }
html body.card-page .cp-name { margin: 0; font-size: clamp(var(--fs-h2), 4vw, var(--fs-h1)); font-weight: 900; line-height: 1.05; color: #fefee2; overflow-wrap: anywhere; }
.card-page .cp-name::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--rc, #e9bf55); box-shadow: 0 0 14px var(--rc, #e9bf55); }
.card-page .cp-r-common    { --rc: #c9cbe0; }
.card-page .cp-r-rare      { --rc: #3f9bff; }
.card-page .cp-r-epic      { --rc: #b46dff; }
.card-page .cp-r-legendary { --rc: #e9bf55; }
.card-page .cp-r-mythic    { --rc: linear-gradient(90deg, #ff9ad5, #ffe08a, #9dffc9, #8fd8ff); }
.card-page .cp-ticker { margin-top: 10px; font-size: var(--fs-lead); font-weight: 800; letter-spacing: .04em; color: #f3dc8f; }
.card-page .cp-motto { margin: var(--sp-2) 0 0; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--fc) 60%, transparent); font-size: var(--fs-lead); font-style: italic; color: #d8c8ff; }
.card-page .cp-finder { display: inline-flex; align-items: center; gap: 10px; margin: var(--sp-2) 0 0; padding: 10px 16px; border-radius: 14px; font-size: var(--fs-small); color: #f2e6c4;
  background: linear-gradient(180deg, rgba(249,231,161,.14), rgba(233,191,85,.06)); border: 1px solid rgba(233,191,85,.45); }
.card-page .cp-finder > i { font-size: 1.1rem; color: #e9bf55; }
.card-page .cp-finder strong { color: #fff4c2; }
.card-page .cp-finder small { color: rgba(242,230,196,.7); font-size: var(--fs-caption); }
.card-page .cp-desc { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: #cfc9e6; }
.card-page .cp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); margin-top: var(--sp-3); }
.card-page .cp-stat { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.card-page .cp-stat > span { font-size: var(--fs-caption); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a9a4c4; }
.card-page .cp-stat b { font-size: var(--fs-h3); font-weight: 900; line-height: 1; color: #fefee2; }
.card-page .cp-atk b { color: #ff7b8a; }
.card-page .cp-def b { color: #7db8ff; }
.card-page .cp-sum b { font-size: var(--fs-small); line-height: 1.3; padding-top: 6px; }
.card-page .cp-stars { display: flex; gap: 1px; font-style: normal; font-size: .62rem; color: #e9bf55; }
.card-page .cp-stars .bi-star { color: rgba(233,191,85,.35); }
.card-page .cp-panel { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 20px;
  background: linear-gradient(180deg, rgba(30,24,66,.7), rgba(10,10,30,.85)); border: 1px solid rgba(217,179,90,.2); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
html body.card-page .cp-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--fs-caption); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #e9c46a; }
.card-page .cp-panel .effect-item { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: #e6e1f5; }
.card-page .cp-panel .effect-item + .effect-item { margin-top: 10px; }
.card-page .cp-none { margin: 0; color: #a9a4c4; font-size: var(--fs-small); }
.card-page .cp-cronos .token-contract { margin: 0; }
.card-page .cp-cronos .tc-moc { margin: 12px 0 0; font-size: var(--fs-small); }
.card-page .cp-cronos .tc-moc a { color: #9dffc9; font-weight: 700; text-decoration: none; }
.card-page .cp-cronos .tc-moc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-page .cp-nft { margin: 12px 0 0; font-size: var(--fs-small); color: #b9b3d6; }
.card-page .cp-nft a { color: #f3dc8f; }
.card-page .cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--sp-3); }
.card-page .cp-share { display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-md); padding: 0 20px; border-radius: 999px; font-size: var(--fs-body); font-weight: 700;
  color: #d8d3ea; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }
.card-page .cp-share:hover, .card-page .cp-share:focus-visible { color: #fefee2; border-color: rgba(233,191,85,.6); }
.card-page .cp-share:focus-visible { outline: 2px solid #e9bf55; outline-offset: 2px; }
.card-page .card-prevnext { margin-top: var(--sp-6) !important; }
.card-page .cp-more-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: var(--sp-6) 0 var(--sp-3); }
html body.card-page .cp-more-head h2 { margin: 0; font-size: var(--fs-h3); font-weight: 900; }
.card-page .cp-more-head a { font-size: var(--fs-small); font-weight: 700; color: #e9bf55; text-decoration: none; }
.card-page .cp-more-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 991.98px) {
  .card-page .cp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .card-page .cp-visual { position: static; }
  .card-page .cp-visual .detail-card { max-width: 300px; }
}
@media (max-width: 575.98px) {
  .card-page .cp-wrap { padding-top: 0; }
  .card-page .cp-visual .detail-card { max-width: 240px; }
  .card-page .cp-grid { gap: var(--sp-3); }
  .card-page .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-page .cp-panel { padding: 18px; }
  .card-page .cp-actions .btn, .card-page .cp-share { flex: 1 1 100%; justify-content: center; }
}
.card-page .cp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: calc(100vh - 260px); justify-content: center; text-align: center; }
.card-page .cp-empty-back { width: 150px; height: auto; border-radius: 6% / 4%; box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: rotate(-6deg); margin-bottom: var(--sp-2); }
.card-page .cp-kick { margin: 0; font-size: var(--fs-caption); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: #e9bf55; }
.card-page .cp-empty .cp-name::after { margin-left: auto; margin-right: auto; }
.card-page .cp-empty .cp-actions { justify-content: center; }
.card-page .cp-mystery { max-width: 300px; margin: 0 auto; }
@media (max-width: 991.98px) { .card-page .cp-mystery { max-width: 240px; } }
.card-page .cp-sealed { margin-top: var(--sp-4); }