/* Spinning-wheel modal styles.
   The visual spec is the co-admin Preview component
   (scard-co-admin/app/(admin)/plugins/[pluginId]/_components/TheWheelPreview.tsx
   and Preview.tsx). Keep this file aligned with that spec — the wheel
   renders into a fixed 900x900 canvas (set in the Blade as width/height
   attrs) and CSS handles every visual size via max-w-full + a fixed
   container height that intentionally clips the bottom of the wheel.

   Two copies live in the repo (resources/css/winwheel.css and
   public/css/winwheel.css). The served file is public/css/winwheel.css;
   keep both byte-identical. Cache-bust via the ?v=... param in
   layouts/profile/main.blade.php whenever this file changes. */

.the-wheel {
  position: relative;
  display: inline-block;
  max-width: 100%;
  transform-origin: 50% 50%;
}

.the-wheel.prize-winning {
  transform: scale(1.05);
}

#canvas {
  position: relative;
  z-index: 20;
  display: block;
  max-width: 100%;
  height: auto;
}

.pin-wheel {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 80px;
}

.back-wheel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.15);
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

/* Match the preview's h-[265px]. Single height — the canvas is 900x900
   internally but max-w-full keeps it proportional to the parent, so the
   visible top portion of the wheel adapts naturally to viewport width.
   No per-breakpoint container heights: previous versions tried that and
   the heights drifted out of sync with the canvas, producing the
   squished-wheel look on small phones. */
.wheel-container {
  min-height: 0;
  height: 265px;
  overflow: visible;
}

.spin-modal-scroll {
  max-height: calc(100vh - env(safe-area-inset-bottom));
  max-height: calc(100dvh - env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}

.spin-wheel-stage {
  overflow: hidden;
  padding-bottom: 0;
}

@media (max-width: 480px) {
  .the-wheel {
    background-size: 90%;
  }

  .back-wheel.prize-winning {
    top: -18px;
    transform: translateX(-50%) scale(1.07);
  }
}

/* Pin + inner-circle shrink on tighter phones so they stay proportional
   to the wheel rendering. The wheel container itself keeps the same
   265px height — the canvas's max-w-full does the heavy lifting. */
@media (max-width: 450px) {
  .the-wheel {
    background-size: 85%;
  }
  .pin-wheel {
    width: 60px;
    top: -45px;
  }
  .center-circle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 400px) {
  .pin-wheel {
    width: 50px;
    top: -35px;
  }
  .center-circle {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 350px) {
  .pin-wheel {
    width: 40px;
    top: -25px;
  }
  .center-circle {
    width: 20px;
    height: 20px;
  }
}

/* iOS Safari-only stabilisation. Limit GPU compositor-layer hints to
   the canvas element ONLY. Earlier we also promoted .the-wheel,
   .back-wheel, and .pin-wheel; QA on iPhone 15 Pro Max showed that
   promoting too many ancestors degrades canvas text rendering
   (inconsistent font weight, bloated/blurry labels) because nested
   transformed-layer parents affect child font rasterisation. The
   spin animation still benefits from `will-change: transform` on
   the canvas itself, without bleeding into the rest of the modal.
   `image-rendering: -webkit-optimize-contrast` crispens the 900x900
   buffer once Safari scales it down to ~390 CSS pixels on iPhone.

   Gated by html.platform-ios (set in
   _profile_rotate_qr_top_priority.blade.php). Non-iOS is untouched. */
html.platform-ios #canvas {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}