/* Pick 'n' Win body content (brief 19). Chest art: WOW Lottie assets/pick/giftbox.json
   ("Giftbox - WOW Vegas", 234 x 468 comp). Everything not in the art is a placeholder
   (data-todo="design"). Perf rule: only transform / opacity animate; no CSS glow on animated
   elements (the chest shadow is a static gradient moved by its parent's transform). */

.pk-title {
  width: 288px;
  margin: 0;
  font: 800 16px/32px 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

/* Fixed stage (same 288 x 300 as the wheel stage): chests or the result card, so the modal height
   never changes. */
.pk-stage {
  position: relative;
  flex-shrink: 0;
  width: 288px;
  height: 300px;
  overflow: visible;
  margin-bottom: 12px;
}

/* Same isolation as the wheel (styles/wheel.css): the body clips the oversized sunburst and the
   flown-up chest at the card edge; sunbursts (z-index -1) paint under title / CTA. */
/* clip, not only hidden: a hidden box can still be scrolled by focus / scrollIntoView (keyboard
   focus on a right-hand chest shifted the whole body sideways); clip never scrolls. */
.sm-body:has(.pk-stage) { overflow: hidden; overflow: clip; isolation: isolate; }

/* Calm rays behind the chests, same recipe as .wh-sunburst. */
.pk-sunburst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  pointer-events: none;
  z-index: -1;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.045) 0deg 10deg, transparent 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%);
  animation: pk-spin-slow 60s linear infinite;
}

/* 3 x 2 grid of 92 x 128 tiles (6 px column gap, 12 px row gap), centred in the stage. */
.pk-grid {
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 92px);
  grid-auto-rows: 128px;
  column-gap: 6px;
  row-gap: 12px;
  width: 288px;
  transition: opacity 200ms ease-out;
}
.pk-grid.is-dimmed { opacity: 0.3; }

.pk-chest {
  position: relative;
  width: 92px;
  height: 128px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  color: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.pk-stage.is-pickable .pk-chest { cursor: pointer; }
.pk-chest:disabled { cursor: default; }
.pk-chest:focus { outline: none; }
.pk-chest:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }
.pk-chest.is-picked { z-index: 2; }
.pk-chest.is-gone { pointer-events: none; }

.pk-chest__fly,
.pk-chest__shake {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.pk-chest__shake { transform-origin: 50% 70%; }

/* Soft floor shadow under the chest (static; moves with the tile's transform). */
.pk-chest__shadow {
  position: absolute;
  left: 50%;
  top: calc(50% + 28px);
  width: 76px;
  height: 14px;
  margin-left: -38px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}

/* Lottie comp box at full size (234 x 468), scaled by --pk-k around the chest centre (comp
   117, 270; the idle chest spans x 13..222, y 183..358), so the chest sits at the tile centre. */
.pk-chest__anim {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 234px;
  height: 468px;
  margin: -270px 0 0 -117px;
  transform-origin: 117px 270px;
  transform: scale(var(--pk-k, 0.42));
  pointer-events: none;
}
.pk-chest__anim svg { display: block; }

/* No-attempts notice over the dimmed chests (Smartico no_attempts_message popup). */
.pk-notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pk-notice[hidden] { display: none; }
.pk-notice__text {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(242, 193, 78, 0.5);
  border-radius: 14px;
  background: rgba(8, 12, 25, 0.88);
  font: 600 14px/20px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
}

/* Footer: hint while picking, CTA on result / no attempts; always the CTA's 44 px. */
.pk-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 288px;
  height: 44px;
}
.pk-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font: 600 13px/20px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  color: #c4c4c4;
  text-align: center;
  transition: opacity 150ms ease-out;
}
.pk-hint[hidden] { display: none; }
/* Hidden (150 ms fade) from the pick until the next idle round; the loop pauses meanwhile. */
.pk-hint.is-muted { opacity: 0; }
.pk-hint.is-muted .pk-gesture * { animation-play-state: paused; }

/* Gesture icon left of the hint (pick.js renderHint): Lucide line icon, stroke = text colour.
   It animates in place only, a 1.8 s loop: press (scale 0.86, 140 ms), release (140 ms), then
   a ring from the fingertip, then a pause.
   Transform / opacity only. */
.pk-gesture {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.pk-gesture__svg { display: block; width: 20px; height: 20px; overflow: visible; }
.pk-gesture__press {
  transform-box: fill-box;
  animation: pk-gesture-press 1800ms ease-in-out infinite;
}
/* Pivot at the fingertip (pointer: tip at viewBox 8,2 = 32% / 0% of the glyph's box). One icon
   for touch and mouse (design lead: finger tap, no arrow); only the copy says Tap / Click. */
.pk-gesture .pk-gesture__press { transform-origin: 32% 0; }
/* Ring centred on the fingertip: viewBox (8, 2) at 20 px = (6.7, 1.7) px. */
.pk-gesture__ring {
  position: absolute;
  left: calc(6.7px - 7px);
  top: calc(1.7px - 7px);
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: pk-gesture-ring 1800ms linear infinite;
}

@keyframes pk-gesture-press {
  0% { transform: scale(1); }
  7.8% { transform: scale(0.86); }   /* 140 ms */
  15.6%, 100% { transform: scale(1); } /* release 140 ms, then pause */
}
@keyframes pk-gesture-ring {
  0%, 7.7% { transform: scale(0.3); opacity: 0; }
  7.8% { transform: scale(0.3); opacity: 0.7; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  41.1%, 100% { transform: scale(1.3); opacity: 0; } /* 600 ms from the press */
}

@media (prefers-reduced-motion: reduce) {
  .pk-gesture * { animation: none; }
  .pk-gesture__ring { display: none; }
}

/* Result card (wheel result pattern), centred in the stage. */
.pk-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px 16px 0;
}
.pk-result__icon { width: 168px; height: 128px; object-fit: contain; }
.pk-result__main {
  margin: 4px 0 0;
  max-width: 272px;
  font: 900 24px/28px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  color: #ffd55a;
  text-align: center;
  text-transform: uppercase;
}
.pk-result__sub {
  margin: 0;
  max-width: 272px;
  font: 700 15px/20px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pk-result__message {
  margin: 0;
  max-width: 272px;
  font: 400 14px/20px 'Inter', sans-serif;
  color: #c4c4c4;
  text-align: center;
}
.pk-result__icon.is-entering {
  transform-origin: 50% 60%;
  animation:
    pk-art-scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
    pk-art-fade 150ms linear both;
}
@keyframes pk-art-scale { from { transform: scale(0.2); } to { transform: scale(1); } }
@keyframes pk-art-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Sunburst behind the prize art: the shared .sm-sunburst (styles/modal.css), 280 px (pick.js). */

/* Confetti burst (pick.js confettiBurst): pieces start at the prize art centre. */
.pk-confetti {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.pk-confetti__piece {
  position: absolute;
  left: -3px;
  top: -5px;
  width: 6px;
  height: 10px;
  border-radius: 1px;
  opacity: 0;
}
.pk-confetti__piece.is-round { width: 7px; height: 7px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .pk-sunburst,
  .pk-result__icon.is-entering { animation: none; }
}