/* Reward-page color and layout; sector order stays aligned with app.js. */
.wheel-stage {
  gap: 28px;
  align-content: center;
  padding: 48px 24px 32px;
  background: #f5f3ed;
}
.wheel-visual { position: relative; width: var(--wheel-size); aspect-ratio: 1; }
.wheel-visual .wheel-pointer { top: -14px; border-top-color: #183440; }
.wheel-visual .prize-wheel {
  width: 100%;
  background: conic-gradient(from -18deg,
    #f2d38d 0deg 36deg,
    #d8e6fa 36deg 72deg,
    #216b65 72deg 108deg,
    #f4ddcb 108deg 144deg,
    #6e6289 144deg 180deg,
    #e2c795 180deg 216deg,
    #384f82 216deg 252deg,
    #cee9df 252deg 288deg,
    #466877 288deg 324deg,
    #ebe3f4 324deg 360deg);
  box-shadow: 0 0 0 1px #d7c79e, 0 14px 32px #18344016;
}
.wheel-visual .prize-wheel::after { border-color: #fffaf0; background: #183440; }
.wheel-visual .wheel-slot { gap: calc(var(--wheel-size) * .012); }
.wheel-visual .wheel-slot img {
  width: calc(var(--wheel-size) * .07);
  height: calc(var(--wheel-size) * .07);
}
.wheel-visual .wheel-slot span { color: #182d3b; font-size: clamp(9px, calc(var(--wheel-size) * .021), 11px); letter-spacing: 0; }
.wheel-visual .wheel-slot:nth-child(3) span,
.wheel-visual .wheel-slot:nth-child(5) span,
.wheel-visual .wheel-slot:nth-child(7) span,
.wheel-visual .wheel-slot:nth-child(9) span { color: #fff; }
.wheel-slot--cruise img { box-shadow: 0 0 0 2px #c59a48; }
.wheel-slot--cruise small {
  display: block;
  margin-top: 4px;
  font-size: .85em;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
}
.wheel-featured { max-width: 390px; margin: 0; text-align: center; color: #182d3b; }
.wheel-featured > span { display: block; margin-bottom: 8px; color: #76561e; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wheel-featured strong { display: block; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; font-weight: 600; }
.prize-item--cruise .prize-media { border-color: #dac18b; background: #fbf2dd; }
@media (max-width: 720px) {
  .wheel-stage { --wheel-size: min(78vw, 360px); min-height: 0; padding: 36px 12px 28px; gap: 24px; }
  .wheel-visual .prize-wheel { border-width: 6px; }
  .wheel-visual .wheel-slot span { font-size: clamp(8px, 2.25vw, 10px); }
  .wheel-slot--cruise small { margin-top: 3px; }
  .wheel-featured { max-width: 290px; }
}

/* Web Animations owns rotation so idle and reveal remain continuous. */
.wheel-visual .prize-wheel { transition: none; }

.wheel-stage .reward-result { width: 100%; max-width: 440px; margin: 0; box-sizing: border-box; }

.reward-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 16px; background: #fffdf7; color: #183440; box-shadow: 0 24px 90px #0005; overflow: visible; }
.reward-dialog::backdrop { background: #102733b8; backdrop-filter: blur(5px); }
.reward-modal-card { position: relative; z-index: 2; padding: 44px 28px 28px; max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; text-align: center; border-radius: 16px; background: radial-gradient(ellipse at top, #f8ebc8, #fffdf7 65%); }
.reward-modal-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; background: transparent; border: 0; color: #183440; font-size: 28px; cursor: pointer; }
.reward-modal-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; color: #88631d; background: #f4dfa4; font-size: 42px; }
.reward-dialog h2 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; margin: 12px 0; }
.reward-modal-prize { font-size: 23px; font-weight: 700; line-height: 1.4; margin: 18px 0; overflow-wrap: anywhere; }
.reward-dialog [data-reward-description] { font-size: 14px; line-height: 1.6; color: #53616a; }
.reward-modal-actions { display: grid; gap: 18px; margin-top: 28px; }
.reward-modal-actions a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.reward-dialog[data-outcome="no-prize"] .reward-modal-card { background: #fffdf7; }
.reward-dialog[data-outcome="no-prize"] .reward-modal-icon { background: #e7eff0; color: #315876; }
.reward-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.reward-confetti span { position: absolute; left: 50%; top: 38%; width: 9px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .reward-dialog:not([data-motion="on"]) .reward-confetti { display: none; } }

@keyframes reward-confetti-fallback { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 35% { transform: translate(calc(var(--burst-x) * .65),var(--burst-lift)) rotate(240deg); opacity: 1; } 100% { transform: translate(var(--burst-x),var(--burst-y)) rotate(800deg); opacity: 0; } }
/* An explicit per-page opt-in may play confetti even when the OS minimizes CSS motion. */
.reward-dialog[data-motion="on"] .reward-confetti span { animation-duration: 2s !important; }