/* The decorative HUD is a transparent reference-derived asset.
   Do not use cqw for .card itself: its query container is an ancestor. */
.card {
  aspect-ratio: 1064 / 1478;
  border-radius: 3.5% / 2.5%;
  background: #0c100e;
}
.card-open { border-radius: 3.5% / 2.5%; }
.art { object-fit: cover; }
.frame { object-fit: fill; z-index: 1; }
.rarity-badge,.action-badge { position:absolute; z-index:3; width:20%; height:auto; aspect-ratio:1; object-fit:contain; top:2%; pointer-events:none; }
.rarity-badge { left:4%; top:3%; width:22%; aspect-ratio:auto; }
.card[data-rarity="N"] .rarity-badge,.card[data-rarity="R"] .rarity-badge { width:15%; }
.card[data-rarity="SSR"] .rarity-badge { width:28%; }
.card[data-rarity="UR"] .rarity-badge { left:4%; top:3%; width:22%; aspect-ratio:auto; }
.action-badge { right:6%; top:auto; bottom:1.5%; width:11.5%; }
/* Match visible silhouette widths, accounting for the transparent margins. */
.action-badge[src*="paper-print"] { width:11.38%; }
.action-badge[src*="rock-print"] { width:11.13%; transform:rotate(-90deg); }
.theme-preview { border-top:1px solid #c3a86625; padding:32px 0; }
.theme-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; margin:26px 0 40px; }
.theme-gallery figure { margin:0; }
.theme-gallery figcaption { text-align:center; margin-top:14px; color:#d6c59e; }
.badge-gallery { display:flex; flex-wrap:wrap; gap:20px; margin:24px 0; }
.badge-gallery figure { margin:0; width:90px; text-align:center; }
.badge-gallery img { width:80px; height:80px; object-fit:contain; }
.badge-gallery img[src*="rock-print"] { transform:rotate(-90deg) scale(.9676); }
.badge-gallery img[src*="paper-print"] { transform:scale(.9899); }
.badge-gallery figcaption { font-size:13px; margin-top:8px; color:#bdc6ba; }
@media(max-width:1000px) { .theme-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .theme-gallery { grid-template-columns:1fr; max-width:400px; margin-inline:auto; } }
.level {
  left: 4%; top: 69.4%; width: 13.7%; height: 9.3%;
  border: 0; background: none; box-shadow: none;
  font-family: Arial, sans-serif; font-size: 4.5cqw; font-weight: 800;
  color: #f9f8ed; text-shadow: 0 .25cqw .35cqw #000;
}
.name {
  left: 19%; top: 73.5%; width: 41%; height: 4.4%;
  font-family: Arial, sans-serif; font-size: 4.35cqw;
  font-weight: 800; letter-spacing: -.12cqw; color: #fffef3;
  text-shadow: 0 .2cqw .3cqw #000;
}
.description {
  left: 9.5%; top: 80.3%; width: 81%; height: 8.1%;
  margin: 0; padding: 0; border: 0; background: none;
  font-family: Arial, sans-serif; font-size: 3.65cqw;
  font-style: italic; font-weight: 400; line-height: 1.3;
  color: #201709; text-align: left;
}
.power {
  left: 6%; top: 90.7%;
  font-family: Arial, sans-serif; font-weight: 900; font-size: 9.4cqw;
  color: #fff5d3; line-height: 1; letter-spacing: -.2cqw;
  -webkit-text-stroke: .6cqw #080c0a; paint-order: stroke fill;
  text-shadow: 0 .55cqw .6cqw #000;
}