/* styles/wheel-logic/wheel-pointer-premium.css
   ChoiceSpin — Pointer (BASE LOCKED, BLADE ONLY MOVES) v8 (PREMIUM TRIANGLE)
   Driven by:
   - --sc-pointer-color (set from wheel-spin-logic.js)
   - --sc-pointer-rot   (set from wheel-pointer-physics.js)

   ✅ Only a clean premium triangle
   ✅ Smaller + a bit fatter (more “premium”)
   ✅ Sits half outside / half inside the wheel
   ✅ Container NEVER rotates (only ::before rotates)
   ✅ Solid color (no gradients)
*/

.wheel-pointer{
  --sc-pointer-color: #f9fafb;
  --sc-pointer-rot: 0deg;

  position: absolute;
  left: 50%;

  /* Half-ish in/out (tweak ±3px if needed) */
  top: -20px;

  /* smaller + a bit fatter */
  width: 40px;
  height: 46px;

  border: 0;
  background: transparent;

  /* ✅ ONLY center it — DO NOT rotate container */
  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;
  will-change: transform;

  /* ✅ outside shadow only (base stays still) */
  filter:
    drop-shadow(0 12px 16px rgba(0,0,0,0.34))
    drop-shadow(0 4px 0 rgba(0,0,0,0.16));
}

/* ✅ The premium triangle blade ONLY (this rotates) */
.wheel-pointer::before{
  content: "";
  position: absolute;
  inset: 0;

  /* Slight chamfered “premium” triangle (still reads as a triangle) */
  clip-path: polygon(
    50% 100%,
    7% 30%,
    16% 22%,
    84% 22%,
    93% 30%
  );

  background: var(--sc-pointer-color);

  /* crisp edge */
  outline: 1px solid rgba(255,255,255,0.22);
  outline-offset: -1px;

  /* subtle internal definition (no gradients) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.08);

  /* ✅ ONLY the blade rotates */
  transform: rotate(var(--sc-pointer-rot));
  transform-origin: 50% 26%;
  will-change: transform;
}

/* ✅ nothing else */
.wheel-pointer::after{
  content: none;
}

/* Light theme tuning */
html[data-theme="light"] .wheel-pointer{
  filter:
    drop-shadow(0 12px 16px rgba(15,23,42,0.22))
    drop-shadow(0 4px 0 rgba(15,23,42,0.10));
}
html[data-theme="light"] .wheel-pointer::before{
  outline-color: rgba(15,23,42,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(15,23,42,0.10);
}
/* =========================================================
   Responsive pointer scaling (ONLY when wheel shrink helper is active)
   Uses --sc-wheel-size set by wheel-section-responsive
   ========================================================= */
html.sc-wheelresp-850 .wheel-pointer{
  /* keep it half-in/half-out while wheel shrinks */
  top: clamp(-20px, calc(var(--sc-wheel-size, 760px) * -0.026), -12px);

  /* scale size with the wheel (but keep readable minimums) */
  width:  clamp(28px, calc(var(--sc-wheel-size, 760px) * 0.053), 40px);
  height: clamp(32px, calc(var(--sc-wheel-size, 760px) * 0.061), 46px);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wheel-pointer{ --sc-pointer-rot: 0deg !important; }
}



/* =========================================================
   Responsive pointer scaling (STACKED mode < 880px)
   Matches your stacked wheel size formula:
   width: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px))))
   ========================================================= */
@media (max-width: 879.98px){
  .wheel-pointer{
    /* same wheel size logic as your stacked wheel-wrapper */
    --sc-wheel-size-live: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px))));

top: clamp(-20px, calc(var(--sc-wheel-size-live) * -0.026), -6px);
width:  clamp(4px,  calc(var(--sc-wheel-size-live) * 0.053), 40px);
height: clamp(6px,  calc(var(--sc-wheel-size-live) * 0.061), 46px);
  }
}