/* Flapi 3D holographic card viewer */
.flapi-holo-stage {
  --flapi-holo-rx: 8deg;
  --flapi-holo-ry: -10deg;
  --flapi-holo-shine-x: 50%;
  --flapi-holo-shine-y: 35%;
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.flapi-holo-stage[data-flapi-holo-mode="interactive"] {
  touch-action: none;
}

.flapi-holo-stage.flapi-holo-size-full {
  max-width: 17.5rem;
  margin-left: auto;
  margin-right: auto;
}

.flapi-holo-stage.flapi-holo-size-tile {
  max-width: 100%;
}

.flapi-holo-perspective {
  perspective: 1100px;
  perspective-origin: 50% 42%;
}

.flapi-holo-tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--flapi-holo-rx)) rotateY(var(--flapi-holo-ry));
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.flapi-holo-stage[data-flapi-holo-mode="interactive"] .flapi-holo-tilt {
  transition: transform 0.08s ease-out;
}

.flapi-holo-stage.is-dragging .flapi-holo-tilt {
  transition: none;
}

.flapi-holo-card {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 1.15rem;
  transform-style: preserve-3d;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 0 rgba(15, 23, 42, 0.12) inset,
    0 18px 40px -16px rgba(15, 23, 42, 0.45),
    0 8px 20px -10px rgba(6, 182, 212, 0.25);
  overflow: hidden;
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-card {
  border-radius: 0.85rem;
}

.flapi-holo-face {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 0.85rem;
  color: #0f172a;
  background-color: #ecfeff;
  background-size: cover;
  background-position: center;
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-face {
  padding: 0.65rem 0.65rem 0.55rem;
}

.flapi-holo-holo-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(120, 255, 240, 0.35) 42%,
      rgba(255, 120, 220, 0.35) 48%,
      rgba(255, 255, 180, 0.3) 54%,
      transparent 68%
    ),
    conic-gradient(
      from 210deg at var(--flapi-holo-shine-x) var(--flapi-holo-shine-y),
      rgba(255, 255, 255, 0) 0deg,
      rgba(186, 230, 253, 0.45) 40deg,
      rgba(244, 114, 182, 0.35) 90deg,
      rgba(250, 204, 21, 0.35) 140deg,
      rgba(45, 212, 191, 0.4) 200deg,
      rgba(255, 255, 255, 0) 280deg
    );
  animation: flapi-holo-shift 5.5s ease-in-out infinite;
}

.flapi-holo-glare {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.35;
  background: radial-gradient(
    circle at var(--flapi-holo-shine-x) var(--flapi-holo-shine-y),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.15) 18%,
    transparent 42%
  );
}

.flapi-holo-sparkle {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 62%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 78%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 44%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px);
  animation: flapi-holo-sparkle 3.2s ease-in-out infinite alternate;
}

.flapi-holo-edge {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.flapi-holo-face-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.flapi-holo-brand {
  font: 700 0.55rem/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
}

.flapi-holo-ghost-badge {
  font: 700 0.55rem/1 system-ui, -apple-system, sans-serif;
  padding: 0.2rem 0.45rem;
  border-radius: 9999px;
  background: rgba(243, 232, 255, 0.92);
  color: #6b21a8;
  border: 1px solid rgba(167, 139, 250, 0.45);
}

.flapi-holo-avatar-wrap {
  display: flex;
  justify-content: center;
  margin: 0.15rem 0 0.75rem;
}

.flapi-holo-avatar {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-width: 2px;
}

.flapi-holo-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 1.35rem/1 system-ui, -apple-system, sans-serif;
  color: #fff;
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-avatar-fallback {
  font-size: 1rem;
}

.flapi-holo-name {
  font: 800 1.05rem/1.25 system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  word-break: break-word;
  text-align: center;
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-name {
  font-size: 0.78rem;
}

.flapi-holo-title {
  margin-top: 0.3rem;
  font: 600 0.78rem/1.35 system-ui, -apple-system, sans-serif;
  color: rgba(15, 23, 42, 0.68);
  text-align: center;
  word-break: break-word;
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-title {
  font-size: 0.62rem;
}

.flapi-holo-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
}

.flapi-holo-tag {
  font: 600 0.58rem/1.2 system-ui, -apple-system, sans-serif;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0c4a6e;
  border: 1px solid rgba(125, 211, 252, 0.55);
  backdrop-filter: blur(4px);
}

.flapi-holo-stage.flapi-holo-size-tile .flapi-holo-tag {
  font-size: 0.5rem;
  padding: 0.1rem 0.35rem;
}

.flapi-holo-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font: 600 0.58rem/1.2 system-ui, -apple-system, sans-serif;
  color: rgba(15, 23, 42, 0.42);
}

.flapi-holo-hint {
  margin: 0.65rem 0 0;
  text-align: center;
  font: 600 0.65rem/1.3 system-ui, -apple-system, sans-serif;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

.flapi-holo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (min-width: 420px) {
  .flapi-holo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.flapi-card-tile {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.flapi-card-tile:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 3px;
  border-radius: 0.85rem;
}

.flapi-card-tile-meta {
  margin-top: 0.45rem;
  font: 600 0.62rem/1.3 system-ui, -apple-system, sans-serif;
  color: #94a3b8;
}

@keyframes flapi-holo-shift {
  0%, 100% { filter: hue-rotate(0deg); opacity: 0.5; }
  50% { filter: hue-rotate(18deg); opacity: 0.62; }
}

@keyframes flapi-holo-sparkle {
  0% { opacity: 0.35; transform: scale(1); }
  100% { opacity: 0.65; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .flapi-holo-holo-overlay,
  .flapi-holo-sparkle {
    animation: none;
  }
  .flapi-holo-tilt {
    transition: none;
  }
}