/* The share card as a 3D object: a slab with a red edge that sways on its
   own, leans toward the pointer (or with the phone), and flips over on a tap
   to show the score on its back. */
.card-wrap { position: relative; perspective: 1400px; }
.card-sway { transform-style: preserve-3d; animation: sway 7s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotateY(-14deg) rotateX(6deg); }
  50% { transform: rotateY(14deg) rotateX(-4deg); }
}
.card3d {
  position: relative; transform-style: preserve-3d; cursor: pointer;
  transform: rotateX(calc(var(--rx, 0deg) + var(--lean-x, 0deg) * 3)) rotateY(calc(var(--ry, 0deg) + var(--lean-y, 0deg) * 3));
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.card3d.flipped { transform: rotateY(180deg); }
.card3d img { backface-visibility: hidden; transform: translateZ(8px); border-radius: 14px; }
/* the slab's thickness: red layers stacked behind the face */
.card3d::before, .card3d::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; background: #7a1a10;
}
.card3d::before { transform: translateZ(0); }
.card3d::after { transform: translateZ(-8px); background: #3d0b06; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.95); }
.card-back {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 14px; border: 2px solid var(--red); background: #120807;
  transform: rotateY(180deg) translateZ(8px); backface-visibility: hidden;
}
.card-back-mark { font-family: var(--display); font-size: clamp(28px, 6vw, 48px); color: var(--red); }
.card-back b { font-family: var(--display); font-weight: 400; font-size: clamp(90px, 22vw, 200px); line-height: 1; color: var(--ink); }
.card-back small { font-family: var(--mono); font-size: 14px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .card-sway { animation: none; } .card3d { transition: none; } }

/* "Post it on X": the main call to action. Bigger, a colour that keeps
   moving, a pulsing glow and a nudge every few seconds. */
.x-cta {
  position: relative; min-height: 60px; padding: 0 30px; gap: 12px;
  border: 0; border-radius: 12px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.01em;
  background: linear-gradient(110deg, #ff2d2d, #ff4b36, #ff2e88, #ff7a1f, #ff2d2d);
  background-size: 300% 100%;
  animation: xShift 4s linear infinite, xGlow 1.8s ease-in-out infinite, xNudge 5s ease-in-out 2s infinite;
}
.x-cta .btn-icon { width: 22px; height: 22px; }
.x-cta:hover { filter: brightness(1.1); }
@keyframes xShift { to { background-position: 300% 0; } }
@keyframes xGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0.55), 0 10px 30px -10px rgba(255, 75, 54, 0.8); }
  50% { box-shadow: 0 0 0 10px rgba(255, 46, 136, 0), 0 10px 40px -6px rgba(255, 75, 54, 1); }
}
@keyframes xNudge {
  0%, 86%, 100% { transform: none; }
  88% { transform: rotate(-3deg) scale(1.04); }
  91% { transform: rotate(3deg) scale(1.04); }
  94% { transform: rotate(-2deg); }
}
.top-share.x-cta { animation: xShift 4s linear infinite, xGlow 1.8s ease-in-out infinite, xNudge 5s ease-in-out 2s infinite, fadeUp 0.5s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 560px) { .x-cta { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .x-cta, .top-share.x-cta { animation: none; background: #ff4b36; } }

/* A friend's dare: their card under the banner on the intro */
.duel-card { margin: 0 0 28px; max-width: 560px; animation: fadeUp 0.6s cubic-bezier(.2,.7,.2,1) both; }
.duel-card img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--red); box-shadow: 0 20px 50px -20px rgba(255, 75, 54, 0.5); transform: rotate(-1.5deg); }