/* Prize sheet (Neo's black sheet) with tap-to-crack capsules. */

.rv-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 10, 0.94);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: auto;
  animation: rv-in 160ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.rv-scrim.is-leaving { opacity: 0; transition: opacity 200ms; }
.rv-sheet {
  width: min(880px, 100%);
  background: #0a0a0a;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 20px;
  padding: clamp(22px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  animation: rv-up 280ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.rv-kicker { font: 700 12px/1.3 Inter, sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: #ccff00; margin: 0; }
.rv-title { font: clamp(30px, 5vw, 54px)/1 'Archivo Black', Impact, sans-serif; letter-spacing: -0.03em; margin: 0; }
.rv-hint { font: 700 12px/1 Inter, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #c8c8c8; margin: 0; }
.rv-caps { display: flex; justify-content: center; gap: 14px 18px; flex-wrap: wrap; max-width: 760px; padding-top: 26px; }

.rv-cap {
  position: relative;
  width: 132px;
  height: 184px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  animation: rv-drop 420ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: var(--d);
  -webkit-tap-highlight-color: transparent;
}
.rv-cap:disabled { cursor: default; }
.rv-cap:focus-visible { outline: 4px solid #ccff00; outline-offset: 4px; border-radius: 16px; }
.rv-cap.is-hit:not(.is-open) .rv-top,
.rv-cap.is-hit:not(.is-open) .rv-bottom { animation: rv-wobble 260ms ease-out; }

.rv-top,
.rv-bottom {
  position: absolute;
  left: 12px;
  width: 108px;
  height: 54px;
  border: 5px solid #0a0a0a;
  box-shadow: 0 0 0 3px #fff;
  z-index: 2;
  transition: transform 600ms cubic-bezier(0.2, 0.9, 0.25, 1), opacity 600ms;
}
.rv-cap { --rv-top: #ccff00; --rv-shell: #111; --rv-crack: #0a0a0a; }
.rv-cap[data-type='capClear'] { --rv-top: #111; --rv-shell: #ccff00; --rv-crack: #fff; }
.rv-cap[data-type='capMag'] { --rv-top: #111; --rv-shell: #ff00cc; --rv-crack: #fff; }
.rv-cap[data-type='capCyan'] { --rv-top: #00ffff; --rv-shell: #111; }
.rv-cap[data-type='capBlue'] { --rv-top: #111; --rv-shell: #0066ff; --rv-crack: #fff; }
.rv-cap[data-multi='2'] .rv-top, .rv-cap[data-multi='2'] .rv-bottom { box-shadow: 0 0 0 3px #00ffff, 0 0 16px #00ffff; }
.rv-cap[data-multi='3'] .rv-top, .rv-cap[data-multi='3'] .rv-bottom { box-shadow: 0 0 0 3px #ff00cc, 0 0 18px #ff00cc; }
.rv-top { top: 18px; background: var(--rv-top); border-radius: 54px 54px 0 0; border-bottom-width: 3px; transform-origin: 20% 100%; }
.rv-bottom { top: 72px; background: var(--rv-shell); border-radius: 0 0 54px 54px; border-top-width: 3px; }

.rv-cracks { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-cracks path { fill: none; stroke: var(--rv-crack); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.rv-cap[data-hits='1'] .rv-c1,
.rv-cap[data-hits='2'] .rv-c1,
.rv-cap[data-hits='2'] .rv-c2 { opacity: 1; }

.rv-cap.is-open .rv-top { transform: translate(-20px, -30px) rotate(-26deg); }
.rv-cap.is-open .rv-bottom { transform: translate(14px, 30px) rotate(10deg); opacity: 0.85; }

.rv-inside {
  position: absolute;
  left: 24px;
  top: 32px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: radial-gradient(circle, #fff27a, #ccff00);
  display: grid;
  place-items: center;
  color: #0a0a0a;
  font: 36px/1 'Archivo Black', Impact, sans-serif;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 400ms 180ms, transform 500ms 180ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.rv-cap.is-open .rv-inside { opacity: 1; transform: scale(1); z-index: 3; }
.rv-id {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font: 700 12px/1 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms 400ms;
}
.rv-cap.is-open .rv-id { opacity: 1; }

.rv-note { color: #c8c8c8; font-size: 14px; margin: 0; }
.rv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.rv-all,
.rv-again {
  min-height: 48px;
  font: 13px/1 'Archivo Black', Impact, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 3px solid #fff;
  border-radius: 6px;
  padding: 14px 22px;
  cursor: pointer;
  color: #0a0a0a;
}
.rv-all { background: #00ffff; box-shadow: 6px 6px 0 #fff; }
.rv-again { background: #ccff00; box-shadow: 6px 6px 0 #fff; }
.rv-all:active,
.rv-again:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #fff; }
.rv-all:focus-visible,
.rv-again:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

@keyframes rv-in { from { opacity: 0; } }
@keyframes rv-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes rv-drop { from { opacity: 0; transform: translateY(-30px) rotate(-8deg); } }
@keyframes rv-wobble {
  25% { transform: rotate(-9deg) translateX(-3px); }
  50% { transform: rotate(7deg) translateX(3px); }
  75% { transform: rotate(-4deg); }
}

@media (max-width: 480px) {
  .rv-cap { width: 110px; height: 160px; }
  .rv-top, .rv-bottom { left: 10px; width: 90px; height: 45px; }
  .rv-top { top: 16px; border-radius: 45px 45px 0 0; }
  .rv-bottom { top: 61px; border-radius: 0 0 45px 45px; }
  .rv-inside { left: 20px; top: 28px; width: 70px; height: 70px; font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-scrim, .rv-sheet, .rv-cap { animation: none !important; }
  .rv-top, .rv-bottom, .rv-inside, .rv-id { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}