/* Gift wheel shares its glass and controls with the box and clearing editor. */
#wheel-modal {
  --wheel-size: min(420px, calc(100dvh - 228px), calc(100vw - 128px));
  position: fixed;
  padding: 20px;
  background: #07132a66;
}
#wheel-modal .wheel-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  width: calc(var(--wheel-size) + 104px);
  max-width: 100%;
  padding: 22px 30px 24px;
  border: 1px solid #dceeffa6;
  border-radius: 27px;
  background: var(--elka-glass-surface);
  color: #f4f7ff;
  text-align: center;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--elka-glass-rim), 0 22px 70px #06133166;
}
#wheel-modal .wheel-heading {
  display: grid;
  place-items: center;
  min-height: 42px;
  width: 100%;
  padding: 0 36px;
}
#wheel-modal h2 {
  margin: 0;
  font: 700 25px/1.25 system-ui, sans-serif;
  text-shadow: 0 2px 8px #20366c55;
}
#wheel-modal .modal-close {
  position: absolute;
  z-index: 10;
  right: 18px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e1edffb3;
  border-radius: 50%;
  background: var(--elka-control-surface);
  color: #f8faff;
  box-shadow: var(--elka-control-glow);
  cursor: pointer;
}
#wheel-modal .modal-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
#wheel-modal .wheel-stage {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin: 0;
  isolation: isolate;
}
#wheel-modal .wheel {
  position: absolute;
  inset: 0;
  isolation: isolate;
}
/* Seven independent rounded pieces of frosted glass; the gaps stay clear. */
.wheel-face { position: absolute; inset: 0; pointer-events: none; }
.wheel-face::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  box-shadow: 0 0 14px #e0f6ff80, 0 0 34px #b0d7ff73, 0 0 65px #c9c0ff45, inset 0 0 28px #dff4ff40;
}
.wheel-glass { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 5px #152c5640); }
.wheel-glass-shimmer { opacity: .45; }
#wheel-modal:not([hidden]):not(:has(.wheel-prize:not([hidden]))) .wheel-glass-shimmer {
  animation: wheelGlassLight 4.8s ease-in-out var(--glass-delay) infinite alternate;
}
@keyframes wheelGlassLight { from { opacity: .12; } to { opacity: .82; } }
.wheel-glass-win { opacity: 0; }
.wheel-glass-panel.is-winning .wheel-glass-win { animation: wheelGlassWin .9s ease-out both; }
@keyframes wheelGlassWin { 0%,100% { opacity: 0; } 20%,50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wheel-glass-panel.is-winning .wheel-glass-win { animation: none; opacity: .5; }
  #wheel-modal .wheel-glass-shimmer { animation: none !important; opacity: .45; }
}
.wheel-sector {
  position: absolute;
  left: var(--sector-x);
  top: var(--sector-y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
}
.wheel-sector-toy {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 2px #24365c60);
}
.wheel-sector.s6 { width: 18%; height: 18%; }
.wheel-sector.s7 { width: 22%; height: 22%; }
.wheel-sector-special { filter: drop-shadow(0 3px 2px #24365c60); }
.wheel-pointer {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.wheel-pointer svg, .wheel-hub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wheel-pointer svg { filter: drop-shadow(0 2px 1px #263c6480) drop-shadow(0 0 2px #ddf8ff70); }
.wheel-hub { z-index: 5; filter: drop-shadow(0 2px 2px #203a6566) drop-shadow(0 0 2px #e1f8ff60); }
.wheel-rim-sparks {
  position: absolute;
  inset: -10%;
  z-index: 3;
  width: 120%;
  height: 120%;
  pointer-events: none;
}
#wheel-modal .wheel-footer {
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 10px;
  padding-top: 4px;
}
#wheel-modal .wheel-spin {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 216px;
  min-height: 48px;
  margin: 0;
  padding: 11px 28px;
  border: 1px solid #e1edffb3;
  border-radius: 999px;
  background: var(--elka-positive-surface);
  color: white;
  font: 750 17px/1.2 system-ui, sans-serif;
  text-shadow: 0 1px 3px #154c4a66;
  box-shadow: var(--elka-control-glow);
  cursor: pointer;
}
#wheel-modal .wheel-spin::before,
#wheel-modal .wheel-spin::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.96);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12.8 6.6 13.8 9.4 16 10.25C18.2 11.05 20.7 11.55 23 12C20.7 12.45 18.2 12.95 16 13.75C13.8 14.6 12.8 17.4 12 23C11.2 17.4 10.2 14.6 8 13.75C5.8 12.95 3.3 12.45 1 12C3.3 11.55 5.8 11.05 8 10.25C10.2 9.4 11.2 6.6 12 1Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12.8 6.6 13.8 9.4 16 10.25C18.2 11.05 20.7 11.55 23 12C20.7 12.45 18.2 12.95 16 13.75C13.8 14.6 12.8 17.4 12 23C11.2 17.4 10.2 14.6 8 13.75C5.8 12.95 3.3 12.45 1 12C3.3 11.55 5.8 11.05 8 10.25C10.2 9.4 11.2 6.6 12 1Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.72))
    drop-shadow(0 0 6px rgba(218,240,255,.46));
  opacity: .94;
}
#wheel-modal .wheel-spin:disabled { opacity: .55; cursor: default; box-shadow: inset 0 0 8px #e8f1ff40; }
#wheel-modal button { transition: filter .16s, box-shadow .16s, transform .16s; }
#wheel-modal :is(.wheel-spin, .modal-close):hover:not(:disabled) { filter: brightness(1.12); box-shadow: var(--elka-control-hover); }
#wheel-modal :is(.wheel-spin, .modal-close):active:not(:disabled) { transform: translateY(1px); }
#wheel-modal button:focus-visible { outline: 2px solid #efffff; outline-offset: 4px; }
#wheel-modal .wheel-result { max-width: 360px; margin: 0; color: #f4f7ff; font: 500 13px/1.4 system-ui; }
#wheel-modal .wheel-result:empty { display: none; }
#wheel-modal .wheel-prize {
  inset: auto;
  left: 50%;
  top: 50%;
  width: calc(100% - 32px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 20px;
  border-radius: 25px;
  background: var(--elka-glass-surface);
  box-shadow: var(--elka-glass-rim);
}
#wheel-modal .wheel-prize[hidden] { display: none; }
#wheel-modal .wheel-prize-title { font: 700 24px/1.25 system-ui, sans-serif; }
#wheel-modal .wheel-prize-actions { flex-wrap: wrap; margin-top: 16px; }
#wheel-modal .wheel-prize-actions button { min-width: 154px; min-height: 44px; font-size: 15px; }
#wheel-modal .wheel-prize-actions button:first-child { background: var(--elka-positive-surface); }

/* Prize corona: same particle language as the wheel, at a smaller scale. */
#wheel-modal .wheel-prize {
  overflow: hidden;
}
#wheel-modal .wheel-prize-rim-sparks {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#wheel-modal .wheel-prize-title,
#wheel-modal .wheel-prize-toy,
#wheel-modal .wheel-prize-actions {
  position: relative;
  z-index: 4;
}
/* Legacy six-dot sparkle markup stays harmless; the canvas owns this effect now. */
#wheel-modal .wheel-prize-sparks {
  display: none;
}

@media (max-height: 580px) {
  #wheel-modal .wheel-card { gap: 12px; padding-top: 18px; padding-bottom: 20px; }
  #wheel-modal .wheel-heading { min-height: 34px; }
  #wheel-modal h2 { font-size: 22px; }
  #wheel-modal .modal-close { top: 16px; }
  #wheel-modal .wheel-prize-toy-wrap { width: 132px; height: 132px; flex-basis: 132px; }
  #wheel-modal .wheel-prize-toy-image { width: 100%; height: 100%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #wheel-modal .wheel-card, #wheel-modal .wheel-prize { background: linear-gradient(130deg,#7b94c9f5,#3e568cf5); }
}