/* Keep the existing front's blend layers together inside one 3D face. */
.card-rotor {
  width: min(300px, 80%);
  aspect-ratio: .716;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--card-pitch, 0deg)) rotateY(var(--card-yaw, 0deg));
  border-radius: 4.55% / 3.5%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  --card-half-depth: .75px;
}
.card-rotor.is-dragging { cursor: grabbing; }
.card-rotor.is-moving { will-change: transform; }
.card-rotor > #tilt-card,
.card-rotor > .card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-rotor > #tilt-card {
  /* Translation also applies with reduced motion: it is geometry, not motion. */
  transform: translateZ(var(--card-half-depth)) !important;
  transition: none;
}
.card-back {
  transform: rotateY(180deg) translateZ(var(--card-half-depth));
  background: #074373;
  box-shadow: 0 24px 45px #0009, 0 0 40px #a2edba0b;
}
.card-back img { width: 100%; height: 100%; display: block; }
.card-rotor img { pointer-events: none; }
.card-edge {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Pale paper faces around a narrow darker core, not a glossy plastic slab. */
  background: linear-gradient(to bottom, #e2dac8 0%, #c7c2b2 35%, #777a75 46%, #858780 56%, #d1ccb9 70%, #ebe4d3 100%);
  filter: brightness(var(--edge-light, .8));
}
.card-motion-controls { display: grid; gap: 12px; margin: 0 auto 12px; max-width: 430px; }
.card-motion-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.card-motion-actions button { padding: 9px 12px; font-size: 12px; }
.card-motion-controls .card-motion-angle { display: grid; grid-template-columns: auto 1fr 48px; align-items: center; gap: 12px; margin: 0; font-size: 12px; color: var(--muted); }
.card-motion-angle input { width: 100%; min-width: 0; accent-color: var(--accent); }
.card-motion-angle output { text-align: right; font-variant-numeric: tabular-nums; }
.card-motion-status { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }
.stage[hidden] + .card-motion-controls { display: none; }