* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0d14; color: #e6ebf3; }

header {
  position: sticky; top: 0; z-index: 5; text-align: center;
  padding: 22px 16px 16px; background: linear-gradient(180deg, #14101a, #0d111b);
  border-bottom: 1px solid #241b2e;
}
header h1 { font-size: 26px; letter-spacing: .5px; }
.tagline { color: #f5b942; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; margin-top: 2px; }
#search {
  margin-top: 14px; width: min(360px, 90%); background: #121826; border: 1px solid #2a2033;
  color: #e6ebf3; padding: 9px 14px; border-radius: 999px; text-align: center;
}
.count { color: #8b94a7; font-size: 12px; margin-top: 8px; }

main { padding: 22px; max-width: 1200px; margin: 0 auto; }
main.loading { text-align: center; color: #8b94a7; padding: 60px; }

.subject { margin-bottom: 34px; }
.subject h2 {
  font-size: 18px; margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid #1c2333; color: #eef2f8;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.card { text-align: center; }
.frame {
  width: 100%; aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden;
  background: #05060a; box-shadow: 0 8px 26px rgba(0,0,0,.5); transition: transform .12s;
}
.frame img, .frame canvas.thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover .frame { transform: translateY(-3px); }
figcaption { margin-top: 8px; }
.badge {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  padding: 2px 9px; border-radius: 999px; color: #0a0d14; font-weight: 800;
}
.badge.normal { background: #9ca3af; }
.badge.illustrated_rare { background: #3b82f6; }
.badge.secret_rare { background: #8b5cf6; }
.badge.full_art { background: #ec4899; }
.badge.gold { background: #f59e0b; }

footer { text-align: center; color: #55607a; font-size: 12px; padding: 30px; }
.card { cursor: pointer; }

/* 3D card viewer */
.hidden { display: none !important; }
#viewer {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 40px;
  background: radial-gradient(circle at 50% 40%, #15101d 0%, #05060a 80%);
  padding: 30px;
}
#viewer-close {
  position: absolute; top: 18px; right: 20px; background: #263149; color: #fff;
  border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer;
}
.viewer-stage { perspective: 1400px; width: 340px; height: 476px; touch-action: none; }
.card3d {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg); cursor: grab; transition: transform .12s ease-out;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
.card3d.dragging { cursor: grabbing; transition: none; }
/* Which face is visible is controlled purely by the opacity toggle in applyRot()
   (by angle). We intentionally do NOT use backface-visibility — combined with the
   toggle it hid BOTH faces at the flip, showing nothing. */
.card3d .face {
  position: absolute; inset: 0;
  transition: opacity .08s linear;
}
.card3d .face img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px;
  /* Ignore pointer/drag on the image so a drag pivots the card cleanly instead
     of starting a native image drag. */
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.viewer-stage, .card3d { user-select: none; -webkit-user-select: none; }
.card3d .back { transform: rotateY(180deg); }

.viewer-info { max-width: 340px; color: #e6ebf3; }
.v-subject { color: #f5b942; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }
.viewer-info h3 { font-size: 26px; margin: 4px 0 10px; }
.v-lore { color: #cbd3e1; font-style: italic; margin: 14px 0; line-height: 1.5; font-family: Georgia, serif; }
.v-artist { color: #8b94a7; font-size: 12px; }
.v-hint { color: #55607a; font-size: 12px; margin-top: 18px; }