* { 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; text-align: center; }
.cname { display: block; font-size: 12px; color: #cbd3e1; font-weight: 600; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  padding: 2px 9px; border-radius: 999px; color: #0a0d14; font-weight: 800;
}
/* Per-tier .badge.<key> colors are generated from each tier's accent by
   load() in gallery.js (single source: src/rarity.js). */

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; border-radius: 18px; overflow: hidden;
  transition: opacity .08s linear;
}
.card3d .face img, .card3d .face canvas {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Ignore pointer/drag on the image so a move 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); }

/* --- Real-time holographic layers (shown only for foil tiers) ---
   Driven by the card's tilt via the --hx/--hy/--gx/--gy/--holo-opacity CSS
   variables set in gallery.js. Off by default; the .holo-on class fades them in. */
.card3d .holo, .card3d .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.card3d.holo-on .holo { opacity: var(--holo-opacity, .4); }
.card3d.holo-on .glare { opacity: 1; }
.card3d .holo {
  background:
    repeating-linear-gradient(110deg,
      rgba(255,0,120,.55) 0%, rgba(255,220,0,.55) 10%, rgba(0,255,140,.55) 20%,
      rgba(0,190,255,.55) 30%, rgba(150,60,255,.55) 40%, rgba(255,0,120,.55) 50%);
  background-size: 260% 260%;
  background-position: var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: color-dodge;
  filter: brightness(.85) contrast(1.35);
}
.card3d .glare {
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.5), rgba(255,255,255,.12) 26%, transparent 52%);
  mix-blend-mode: overlay;
}

.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-fields { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.v-fields > div { display: flex; gap: 10px; font-size: 14px; }
.v-label { color: #8b94a7; min-width: 66px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; align-self: center; }
.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; }