/* =========================
   SMART WHEEL COMPONENT
   wheel.css v1.1 — 2026-06-23
   Removed: body, button, .panel overrides (conflict with site CSS).
   Kept: .stage, .wheel-wrap, .svg-overlay, .sector, .wheel-marker, .paw
   ========================= */

/*
  Stage — the main container.
  All layers (bg, wheel, overlay, marker, paws) use the same 1:1 square
  coordinate space so they stack perfectly without any offset math.
*/
.stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
}

.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Wheel layer — rotates */
.wheel-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#wheel {
  width: 100%;
  height: 100%;
}

/* Invisible click overlay in the same 2000×2000 coordinate space */
.svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.sector {
  fill: #ffffff;
  opacity: 0;
  cursor: pointer;
  pointer-events: all;
  transition: opacity 0.1s;
}

/* Uncomment to debug sector boundaries:
.sector { opacity: 0.15 !important; stroke: red; stroke-width: 4px; } */

/* Marker — static, always points at 3 o'clock */
.wheel-marker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

/* ===== Paw layers ===== */
.paw {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.paw img {
  display: block;
  width: 100%;
  height: 100%;
}

.paw-left {
  left: 10.15%;
  top: 27%;
  width: 21.6%;
  height: 19.65%;
  transform-origin: 78% 18%;
  animation: paw-left-wiggle 2.8s ease-in-out infinite;
  animation-play-state: paused;
}

.paw-right {
  right: 10.15%;
  top: 27%;
  width: 21.6%;
  height: 19.65%;
  transform-origin: 22% 18%;
  animation: paw-right-wiggle 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
  animation-play-state: paused;
}

/* Paws animate only while .spinning is active on .stage */
.stage.spinning .paw-left,
.stage.spinning .paw-right {
  animation-play-state: running;
}

@keyframes paw-left-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%       { transform: rotate(-7deg) translateY(3%); }
}

@keyframes paw-right-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%       { transform: rotate(7deg) translateY(3%); }
}

/* =========================
   WHEEL OVERLAY ITEM
   Seasonal decoration — hat, heart, pumpkin etc.
   Sits above marker (z-index 3), below paws (z-index 4).
   Position and size are tuned per asset — adjust in sc*.md
   via inline style if needed, or override here per month.
   ========================= */

.wheel-overlay-item {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  user-select: none;

  /* Default placement — centre-right of the wheel face,
     roughly where the marker points (3 o'clock zone).
     Fine-tune width/top/right in the image itself or add
     a modifier class per month if positions differ a lot. */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}