/**
 * GP CARd — Cyberpunk Enhancement Layer
 * Dramatic neon glow, circuit patterns, and collectible card aesthetic
 * Based on prototype designs: Neon borders, prominent car images, stats grids
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   1. CIRCUIT BOARD BACKGROUND PATTERN
   Animated tech circuitry overlay for that futuristic feel
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-circuit-pattern {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  z-index: 2;
  opacity: 0.4;
}

.gp-circuit-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Circuit grid pattern */
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 49%, rgba(0, 212, 255, 0.08) 50%, transparent 51%),
    linear-gradient(180deg, transparent 0%, transparent 49%, rgba(0, 212, 255, 0.06) 50%, transparent 51%),
    radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}

.gp-circuit-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 212, 255, 0.6),
    rgba(124, 58, 237, 0.6),
    transparent
  );
  animation: circuitScan 4s linear infinite;
}

@keyframes circuitScan {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(50%) translateY(calc(100vh)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   2. ENHANCED NEON BORDER SYSTEM
   More dramatic glowing edges based on tier
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-neon-border {
  pointer-events: none;
  position: absolute;
  inset: -3px;
  border-radius: 25px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show neon border on all cards */
.gp-card-shell .gp-neon-border {
  opacity: 1;
}

/* Tier-specific neon borders */
.gp-card-shell[data-tier="STREET"] .gp-neon-border {
  background: linear-gradient(135deg,
    rgba(148, 163, 184, 0.4),
    rgba(100, 116, 139, 0.3)
  );
  filter: blur(0);
  box-shadow:
    inset 0 0 0 2px rgba(148, 163, 184, 0.3),
    0 0 15px rgba(148, 163, 184, 0.15);
}

.gp-card-shell[data-tier="NEON"] .gp-neon-border {
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.5),
    rgba(124, 58, 237, 0.5),
    rgba(0, 212, 255, 0.5)
  );
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.4),
    0 0 40px rgba(124, 58, 237, 0.2),
    0 0 60px rgba(0, 212, 255, 0.1);
  animation: neonBorderPulse 2s ease-in-out infinite;
}

.gp-card-shell[data-tier="SKYE"] .gp-neon-border {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.5),
    rgba(96, 165, 250, 0.5)
  );
  box-shadow:
    0 0 25px rgba(59, 130, 246, 0.4),
    0 0 50px rgba(59, 130, 246, 0.2);
  animation: neonBorderPulse 2.5s ease-in-out infinite;
}

.gp-card-shell[data-tier="NOVA"] .gp-neon-border,
.gp-card-shell[data-tier="APEX"] .gp-neon-border {
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.6),
    rgba(255, 140, 0, 0.5),
    rgba(255, 215, 0, 0.6)
  );
  box-shadow:
    0 0 30px rgba(255, 215, 0, 0.5),
    0 0 60px rgba(255, 140, 0, 0.3),
    0 0 90px rgba(255, 215, 0, 0.15);
  animation: neonBorderPulse 2s ease-in-out infinite;
}

.gp-card-shell[data-tier="COSMIC"] .gp-neon-border {
  background: conic-gradient(from var(--cosmic-angle, 0deg),
    rgba(188, 19, 254, 0.7),
    rgba(72, 219, 251, 0.6),
    rgba(255, 107, 107, 0.5),
    rgba(254, 202, 87, 0.5),
    rgba(188, 19, 254, 0.7)
  );
  box-shadow:
    0 0 40px rgba(188, 19, 254, 0.5),
    0 0 80px rgba(72, 219, 251, 0.3),
    0 0 120px rgba(255, 107, 107, 0.2);
  animation: cosmicBorderRotate 4s linear infinite;
}

@keyframes neonBorderPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes cosmicBorderRotate {
  from { --cosmic-angle: 0deg; }
  to { --cosmic-angle: 360deg; }
}

@property --cosmic-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   3. "CARd" HEADER BRANDING
   Top header with glowing logo text
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-card-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 20;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
}

.gp-card-logo {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(0, 212, 255, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.gp-card-logo span {
  font-weight: 400;
  opacity: 0.7;
}

.gp-card-series {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   4. TIER BADGE (LEGENDARY BUILD style) — Glass Morphism Enhanced
   Prominent rarity badge on the card
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-tier-badge {
  position: absolute;
  left: 16px;
  top: 50px;
  z-index: 22;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 300ms ease;
}

.gp-tier-badge::before {
  content: "★";
  font-size: 10px;
}

/* OWNER'S EDITION - Premium teal/cyan styling */
.gp-card-shell[data-tier="OWNER"] .gp-tier-badge {
  background: linear-gradient(135deg, rgba(0, 210, 211, 0.5), rgba(24, 225, 255, 0.4));
  border-color: rgba(0, 210, 211, 0.6);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 30px rgba(0, 210, 211, 0.4),
    0 0 60px rgba(24, 225, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: ownerBadgePulse 3s ease-in-out infinite;
}

@keyframes ownerBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(0, 210, 211, 0.4),
      0 0 60px rgba(24, 225, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 0 40px rgba(0, 210, 211, 0.5),
      0 0 80px rgba(24, 225, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

.gp-card-shell[data-tier="STREET"] .gp-tier-badge {
  background: rgba(100, 116, 139, 0.55);
  border-color: rgba(148, 163, 184, 0.45);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.gp-card-shell[data-tier="NEON"] .gp-tier-badge {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.45), rgba(124, 58, 237, 0.4));
  border-color: rgba(0, 212, 255, 0.55);
  color: #00d4ff;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gp-card-shell[data-tier="SKYE"] .gp-tier-badge {
  background: rgba(59, 130, 246, 0.55);
  border-color: rgba(59, 130, 246, 0.6);
  color: #60a5fa;
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gp-card-shell[data-tier="NOVA"] .gp-tier-badge,
.gp-card-shell[data-tier="APEX"] .gp-tier-badge {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.55), rgba(255, 140, 0, 0.5));
  border-color: rgba(255, 215, 0, 0.65);
  color: #ffd700;
  box-shadow:
    0 0 25px rgba(255, 215, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.gp-card-shell[data-tier="COSMIC"] .gp-tier-badge {
  background: linear-gradient(135deg, rgba(188, 19, 254, 0.55), rgba(72, 219, 251, 0.45));
  border-color: rgba(188, 19, 254, 0.65);
  color: #bc13fe;
  box-shadow:
    0 0 30px rgba(188, 19, 254, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: cosmicBadgePulse 2s ease-in-out infinite;
}

@keyframes cosmicBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(188, 19, 254, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(188, 19, 254, 0.6),
      0 0 60px rgba(72, 219, 251, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   5. MINT NUMBER DISPLAY
   ###/500 format with proper styling
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-mint-number {
  position: absolute;
  right: 16px;
  top: 50px;
  z-index: 22;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.gp-mint-number__value {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
  color: rgba(255, 255, 255, 0.95);
}

.gp-mint-number__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   6. ENHANCED CAR PHOTO AREA
   Larger, more prominent with neon frame
═══════════════════════════════════════════════════════════════════════════════════════ */

/* Override the default photo area for larger display */
.gp-card-shell.gp-cyberpunk .gp-card-photo {
  inset: 82px 14px 108px 14px;
  border: 2px solid rgba(0, 212, 255, 0.3);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 212, 255, 0.15);
}

.gp-card-shell.gp-cyberpunk[data-tier="NEON"] .gp-card-photo {
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(0, 212, 255, 0.25),
    0 0 50px rgba(124, 58, 237, 0.1);
}

.gp-card-shell.gp-cyberpunk[data-tier="NOVA"] .gp-card-photo,
.gp-card-shell.gp-cyberpunk[data-tier="APEX"] .gp-card-photo {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(255, 215, 0, 0.25);
}

.gp-card-shell.gp-cyberpunk[data-tier="COSMIC"] .gp-card-photo {
  border-color: rgba(188, 19, 254, 0.5);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(188, 19, 254, 0.3),
    0 0 60px rgba(72, 219, 251, 0.15);
}

/* Car image enhancement */
.gp-card-photo img,
.gp-card-photo canvas {
  filter: saturate(1.1) contrast(1.05);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gp-card-shell:hover .gp-card-photo img,
.gp-card-shell:hover .gp-card-photo canvas {
  transform: scale(1.03);
  filter: saturate(1.15) contrast(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   7. PERFORMANCE STATS GRID
   HP, Torque, 0-60, Top Speed display
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-stats-display {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 58px;
  z-index: 21;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gp-card-shell.gp-has-stats .gp-stats-display {
  opacity: 1;
  transform: translateY(0);
}

.gp-stat-item {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.gp-stat-item__value {
  font-size: 14px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.1;
}

.gp-stat-item__unit {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}

.gp-stat-item__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.8);
  margin-top: 4px;
}

/* Tier-specific stat label colors */
.gp-card-shell[data-tier="NEON"] .gp-stat-item__label {
  color: rgba(0, 212, 255, 0.9);
}
.gp-card-shell[data-tier="SKYE"] .gp-stat-item__label {
  color: rgba(96, 165, 250, 0.9);
}
.gp-card-shell[data-tier="NOVA"] .gp-stat-item__label,
.gp-card-shell[data-tier="APEX"] .gp-stat-item__label {
  color: rgba(255, 215, 0, 0.9);
}
.gp-card-shell[data-tier="COSMIC"] .gp-stat-item__label {
  color: rgba(188, 19, 254, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   8. ENHANCED QR CODE CHIP
   Futuristic scan chip design
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-scan-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

.gp-scan-chip__qr {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.gp-scan-chip__qr canvas,
.gp-scan-chip__qr img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Scanline animation */
.gp-scan-chip__qr::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 212, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
  animation: qrScanline 2s ease-in-out infinite;
  opacity: 0;
}

.gp-scan-chip:hover .gp-scan-chip__qr::after {
  opacity: 1;
}

@keyframes qrScanline {
  0%, 100% { top: 0; }
  50% { top: calc(100% - 2px); }
}

.gp-scan-chip__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-scan-chip__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.7);
}

.gp-scan-chip__bay {
  font-size: 14px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gp-scan-chip__bay-icon {
  font-size: 12px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   9. ENHANCED BOTTOM INFO BAR
   Sleeker title and subtitle display
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-card-shell.gp-cyberpunk .gp-card-bottom {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  height: 88px;
  padding: 10px 14px;
}

.gp-card-shell.gp-cyberpunk .gp-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gp-card-shell.gp-cyberpunk .gp-subtitle {
  font-size: 11px;
  color: rgba(0, 212, 255, 0.7);
  letter-spacing: 0.3px;
}

.gp-card-shell.gp-cyberpunk[data-tier="NOVA"] .gp-subtitle,
.gp-card-shell.gp-cyberpunk[data-tier="APEX"] .gp-subtitle {
  color: rgba(255, 215, 0, 0.7);
}

.gp-card-shell.gp-cyberpunk[data-tier="COSMIC"] .gp-subtitle {
  color: rgba(188, 19, 254, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   10. CORNER ACCENTS
   Decorative corner elements for that premium feel
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-corner-accents {
  pointer-events: none;
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  z-index: 3;
}

.gp-corner-accents::before,
.gp-corner-accents::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-color: rgba(0, 212, 255, 0.4);
}

.gp-corner-accents::before {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 10px 0 0;
}

.gp-corner-accents::after {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 10px;
}

.gp-card-shell[data-tier="NOVA"] .gp-corner-accents::before,
.gp-card-shell[data-tier="NOVA"] .gp-corner-accents::after,
.gp-card-shell[data-tier="APEX"] .gp-corner-accents::before,
.gp-card-shell[data-tier="APEX"] .gp-corner-accents::after {
  border-color: rgba(255, 215, 0, 0.5);
}

.gp-card-shell[data-tier="COSMIC"] .gp-corner-accents::before,
.gp-card-shell[data-tier="COSMIC"] .gp-corner-accents::after {
  border-color: rgba(188, 19, 254, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   11. GLOW PULSING EFFECTS
   Ambient lighting that breathes life into the card
═══════════════════════════════════════════════════════════════════════════════════════ */

.gp-ambient-glow {
  pointer-events: none;
  position: absolute;
  inset: -30px;
  border-radius: 40px;
  z-index: -1;
  opacity: 0.6;
  filter: blur(30px);
}

.gp-card-shell[data-tier="STREET"] .gp-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(148, 163, 184, 0.15) 0%,
    transparent 70%
  );
}

.gp-card-shell[data-tier="NEON"] .gp-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(0, 212, 255, 0.25) 0%,
    rgba(124, 58, 237, 0.15) 50%,
    transparent 70%
  );
  animation: glowPulse 3s ease-in-out infinite;
}

.gp-card-shell[data-tier="SKYE"] .gp-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(59, 130, 246, 0.25) 0%,
    transparent 70%
  );
  animation: glowPulse 3.5s ease-in-out infinite;
}

.gp-card-shell[data-tier="NOVA"] .gp-ambient-glow,
.gp-card-shell[data-tier="APEX"] .gp-ambient-glow {
  background: radial-gradient(ellipse at center,
    rgba(255, 215, 0, 0.3) 0%,
    rgba(255, 140, 0, 0.15) 50%,
    transparent 70%
  );
  animation: glowPulse 2.5s ease-in-out infinite;
}

.gp-card-shell[data-tier="COSMIC"] .gp-ambient-glow {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(188, 19, 254, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(72, 219, 251, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(255, 107, 107, 0.15) 0%, transparent 60%);
  animation: cosmicGlowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes cosmicGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.08) rotate(2deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   12. MOBILE OPTIMIZATIONS
═══════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .gp-card-header {
    height: 38px;
    padding: 0 12px;
  }

  .gp-card-logo {
    font-size: 14px;
  }

  .gp-tier-badge {
    font-size: 9px;
    padding: 5px 10px;
    top: 44px;
    left: 12px;
  }

  .gp-mint-number {
    top: 44px;
    right: 12px;
  }

  .gp-mint-number__value {
    font-size: 11px;
  }

  .gp-stats-display {
    gap: 4px;
    left: 12px;
    right: 12px;
  }

  .gp-stat-item {
    padding: 6px 4px;
  }

  .gp-stat-item__value {
    font-size: 12px;
  }

  .gp-scan-chip {
    padding: 6px 10px 6px 6px;
  }

  .gp-scan-chip__qr {
    width: 38px;
    height: 38px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   13. REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .gp-circuit-pattern::after,
  .gp-neon-border,
  .gp-ambient-glow,
  .gp-scan-chip__qr::after {
    animation: none;
  }

  .gp-card-photo img,
  .gp-card-photo canvas,
  .gp-stats-display {
    transition: none;
  }
}