/* Knowdle "Surprise me" cards FX (v53), companion to /fx/surprise.js.
   Layout rules for the photo deck cards are markup-driven (.has-qphoto) and safe without the module.
   Everything that disables the old CSS hover is scoped to .ks-on (set by the module). */

/* Quiz deck: small photo cards, title on a scrim. A failed photo drops .has-qphoto and the
   icon chip shows instead (same as every other quiz photo in the app). */
.rand-deck .rand-mini { width: 37cqi; right: 8.5cqi; top: 13cqi; aspect-ratio: 4 / 3; justify-content: space-between; }
.rand-deck .rand-mini.has-qphoto { padding: 0; justify-content: flex-end; }
.rand-deck .rand-mini.has-qphoto .ik-tile { display: none; }
.rand-deck .rand-mini .rand-mini-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.rand-deck .rand-mini.has-qphoto > span {
  position: relative; z-index: 1; padding: 7cqi 2.8cqi 2.5cqi; border-radius: 0 0 4.5cqi 4.5cqi; color: #fff;
  background: linear-gradient(to bottom, rgba(20, 8, 40, 0), rgba(20, 8, 40, .82)); text-shadow: 0 1px 2px rgba(10, 4, 30, .5);
}
/* Cast shadow that blooms as a card rises (opacity only, so it stays on the compositor). */
.rand-deck .ks-sh { position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0;
  box-shadow: 0 18px 26px -10px rgba(8, 2, 24, .7), 0 4px 0 rgba(0, 0, 0, .22); }
html[data-theme="light"] .rand-deck .ks-sh { box-shadow: 0 18px 26px -10px rgba(45, 22, 89, .55), 0 4px 0 rgba(0, 0, 0, .2); }

/* The module owns the pose while it runs: no CSS hover pose, no transitions smearing the springs. */
.random-btn.ks-on { transform-origin: 50% 88%; }
.ks-on .rand-mini, .ks-on .rand-tile { transition: none !important; }
.ks-on .rand-deck { perspective: 720px; perspective-origin: 70% 55%; }
.ks-on .rand-mini { backface-visibility: hidden; }
.ks-on.ks-live .rand-mini, .ks-on.ks-live .rand-tile { will-change: transform; }
.ks-on.ks-live .rand-mini .ks-sh { will-change: opacity; }

/* Spill: the legacy stylesheet only positions seven tiles; the last three get a home too. */
.rand-spill .rand-tile:nth-child(8) { right: 150px; top: 46px; transform: rotate(10deg); font-size: 15px; }
.rand-spill .rand-tile:nth-child(9) { right: 60px; top: 6px; transform: rotate(-9deg); font-size: 14px; }
.rand-spill .rand-tile:nth-child(10) { right: 96px; top: 134px; transform: rotate(13deg); font-size: 15px; }
@media (max-width: 719px) {
  .rand-spill .rand-tile:nth-child(8) { right: 162px; top: 24px; }
  .rand-spill .rand-tile:nth-child(9) { right: 58px; top: 104px; }
  .rand-spill .rand-tile:nth-child(10) { right: 198px; top: 6px; }
  .rand-deck .rand-mini { width: 30cqi; right: 6cqi; top: 10cqi; }
}

.random-cards .random-btn:focus-visible { outline: 3px solid #ff8fb4; outline-offset: 4px; }
html[data-theme="light"] .random-cards .random-btn:focus-visible { outline-color: #6b2eff; }