/* Large, uninterrupted prize reel. Idle and spinning states share the same geometry. */
.case-opening {
  --opening-card-width: clamp(126px, 42vw, 235px);
  --opening-card-height: calc(var(--opening-card-width) + 44px);
  display: flex;
  height: var(--opening-height, calc(100dvh - 215px));
  min-height: 390px;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
}
.case-opening .stage-reel,
.case-opening .stage-reel.is-rolling {
  flex: 1;
  width: calc(100% + 28px);
  min-height: calc(var(--opening-card-height) + 90px);
  margin: 0 -14px;
  padding: 0;
  gap: 0;
}
.case-opening .case-roulette {
  width: 100%;
  height: 100%;
  min-height: calc(var(--opening-card-height) + 90px);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.case-opening .case-roulette::before { display: none; }
.case-opening .roulette-window {
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.case-opening .roulette-track { gap: 24px; }
.case-opening .is-idle .roulette-track { width: 100%; justify-content: center; }
.case-opening .roulette-item {
  position: relative;
  flex: 0 0 var(--opening-card-width);
  width: var(--opening-card-width);
  height: var(--opening-card-height);
  gap: 0;
}
.case-opening .roulette-prize-body { display: flex; align-items: center; flex-direction: column; width: 100%; height: 100%; }
.case-opening .roulette-art {
  width: var(--opening-card-width);
  height: var(--opening-card-width);
  filter: drop-shadow(0 9px 17px #0006);
}
.case-opening .roulette-art > span { font-size: calc(var(--opening-card-width) * .75); }
.case-opening .roulette-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 80%;
  max-width: 100%;
  height: 42px;
  margin-top: 2px;
  padding: 5px 13px;
  border: 1px solid #ffba6d26;
  border-radius: 30px;
  color: #fff1dd;
  background: linear-gradient(145deg, #613422e6, #392019e6);
  box-shadow: inset 0 1px #ffd8ad12;
  font-size: clamp(17px, 4.8vw, 26px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.case-opening .roulette-value > span { font-size: 1.1em; }
.case-opening .opening-pointer {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 27px;
  height: 17px;
  transform: translateX(-50%);
  color: #ffcc98;
  filter: drop-shadow(0 0 8px #ff74224d);
}
.case-opening .opening-pointer.top { top: calc(50% - var(--opening-card-height) / 2 - 32px); }
.case-opening .opening-pointer.bottom { bottom: calc(50% - var(--opening-card-height) / 2 - 32px); }
.opening-pointer svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.case-opening .stage-open {
  min-height: 62px;
  border: 1px solid #ffbf7866;
  border-radius: 25px;
  background: linear-gradient(145deg, #ff9a38, #f35a24 52%, #c73419);
  box-shadow: inset 0 1px #ffe6bf59, 0 8px 25px #e24b182e;
  font-size: clamp(17px, 4.7vw, 22px);
}
.case-opening .stage-open:disabled { border-color: #84533d; color: #cbb6a6; background: #493025; box-shadow: inset 0 1px #ffdfbd12; }
.case-opening .stage-secondary { gap: 10px; margin-top: 12px; }
.case-opening .stage-secondary button {
  min-height: 48px;
  border: 1px solid #aa593839;
  border-radius: 26px;
  color: #ffe5cf;
  background: linear-gradient(145deg, #4e2c20, #311c15);
  box-shadow: inset 0 1px #ffc7900a;
  font-size: 15px;
}
.case-opening .stage-caption { margin: 10px 0 0; color: #b89883; font-size: 11px; }
.case-opening .stage-preview-roll { min-height: 35px; margin-top: 8px; border-color: #87523666; color: #eec3a0; background: #372217; }
.case-opening .roulette-item.is-selected .roulette-art { animation: opening-winner-glow .35s ease-out both; }
.case-opening .roulette-item.is-selected .roulette-value { background: linear-gradient(145deg, #92502b, #5c2d1b); box-shadow: 0 0 20px #ff771f38, inset 0 1px #ffe3ae38; }
.case-opening .stage-secondary button:disabled { opacity: .55; }
.case-opening .stage-open[data-skip-roll]:disabled { color: #fff1db; border-color: #ffa95c66; background: linear-gradient(145deg, #d76a27, #8d3018); }
.case-opening .is-burning .roulette-prize-body {
  animation: prize-burn-away 1.35s cubic-bezier(.28,.08,.48,1) forwards;
}
.prize-burn-fx { position: absolute; inset: 0; pointer-events: none; }
.burn-front {
  position: absolute;
  left: -5%;
  bottom: 0;
  width: 110%;
  height: 70px;
  animation: prize-fire-rise 1.35s cubic-bezier(.28,.08,.48,1) forwards;
}
.burn-front::before { content: ''; position: absolute; inset: 25px 4% -7px; border-radius: 50%; background: radial-gradient(ellipse, #ffdf7d99, #ff651644 46%, transparent 73%); filter: blur(7px); }
.burn-flame { position: absolute; bottom: 0; left: var(--flame-x); width: 31px; height: var(--flame-height); transform-origin: 50% 100%; animation: prize-flame-flicker .28s ease-in-out var(--flame-delay) infinite alternate; }
.burn-flame svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px #ff6519a6); }
.burn-flame-outer { fill: #ff6a18; }
.burn-flame-inner { fill: #ffe183; }
.burn-ember { position: absolute; left: var(--ember-x); bottom: 25px; width: 3px; height: 5px; border-radius: 50%; background: #ffe19b; box-shadow: 0 0 7px #ff8d26; opacity: 0; animation: prize-ember-flight .68s ease-out var(--ember-delay) 2 both; }
.burn-smoke { position: absolute; left: 10%; bottom: 30%; width: 65px; height: 75px; border-radius: 50%; background: radial-gradient(ellipse, #72564a70, #34231e38 40%, transparent 70%); opacity: 0; filter: blur(6px); animation: prize-smoke-rise 1.4s ease-out forwards; }
.burn-smoke.second { left: 50%; animation-delay: .15s; }
.case-opening .roulette-item.is-revealed .roulette-art { animation: prize-winner-survives 1.55s ease-in-out both; }
@keyframes prize-burn-away {
  0% { clip-path: polygon(0 0,100% 0,100% 100%,85% 100%,68% 100%,50% 100%,32% 100%,15% 100%,0 100%); filter: brightness(1); }
  20% { clip-path: polygon(0 0,100% 0,100% 82%,85% 88%,68% 78%,50% 83%,32% 77%,15% 86%,0 80%); filter: sepia(.65) saturate(2.3) brightness(1.3); }
  65% { clip-path: polygon(0 0,100% 0,100% 39%,85% 32%,68% 41%,50% 34%,32% 39%,15% 30%,0 37%); filter: sepia(1) saturate(2.8) brightness(.85); opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,100% 0,85% 0,68% 0,50% 0,32% 0,15% 0,0 0); filter: sepia(1) saturate(1) brightness(.3); opacity: 0; }
}
@keyframes prize-fire-rise {
  0% { transform: translateY(10px); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(calc(-1 * var(--opening-card-height))); opacity: 0; }
}
@keyframes prize-flame-flicker { from { transform: scaleY(.78) skewX(-8deg); } to { transform: scaleY(1.08) skewX(7deg); } }
@keyframes prize-ember-flight { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--ember-dx),calc(-1 * var(--ember-rise))) scale(.2); } }
@keyframes prize-smoke-rise { 0% { opacity: 0; transform: translateY(25px) scale(.5); } 35% { opacity: .65; } 100% { opacity: 0; transform: translateY(-100px) scale(1.8); } }
@keyframes prize-winner-survives { 0% { transform: scale(1); filter: drop-shadow(0 0 12px #ff8c3550); } 65%,100% { transform: scale(1.025); filter: drop-shadow(0 0 24px #ffae4260); } }
.sheet-setting input:disabled { cursor: default; opacity: .65; }
@keyframes opening-winner-glow { from { filter: drop-shadow(0 9px 17px #0006); } to { filter: drop-shadow(0 0 19px #ff8c3550); } }
@media (max-width: 350px) {
  .case-opening .roulette-track { gap: 16px; }
  .case-opening .roulette-value { height: 37px; padding: 4px 10px; gap: 5px; font-size: 17px; }
  .case-opening .stage-open { min-height: 55px; font-size: 16px; }
  .case-opening .stage-secondary button { min-height: 44px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-opening .roulette-item.is-selected .roulette-art, .case-opening .roulette-item.is-revealed .roulette-art { animation: none; }
  .case-opening .is-burning .roulette-prize-body { animation: none; opacity: 0; }
  .prize-burn-fx { display: none; }
}