/* ============================================================
   GiverGames Spin the Wheel -- sw.css
   Builds on dnd.css (marquee, gate, result, code box, sparks).
   ============================================================ */

.sw-page .marquee-title .mt-deal,
.sw-page .marquee-title .mt-nodeal { font-size: clamp(2rem, 7.5vw, 3.2rem); }
.sw-page .dnd-stage.playing .mt-deal,
.sw-page .dnd-stage.playing .mt-nodeal { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }


/* ============================================================
   LAYOUT
   ============================================================ */
.sw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}
.sw-layout > * { min-width: 0; }


/* ============================================================
   THE WHEEL
   ============================================================ */
.sw-wheel-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.sw-wheel-wrap::before { content: ''; display: block; padding-top: 100%; }

.sw-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #2A3F45, 0 0 0 11px rgba(253,205,44,0.7), 0 22px 60px rgba(0,0,0,0.55);
  /* Heavy start, long slow coast to the stop. */
  transition: transform 5.2s cubic-bezier(0.12, 0.72, 0.1, 1);
  will-change: transform;
}
.sw-wheel.no-anim { transition: none; }
.sw-wheel text {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Pointer at the top */
.sw-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 30px solid var(--white);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.sw-pointer.tick { animation: flick 0.12s ease; }
@keyframes flick { 50% { transform: translateX(-50%) rotate(-14deg); } }

.sw-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(0.8rem, 3vw, 1.1rem);
  color: var(--charcoal);
  background: radial-gradient(circle at 35% 30%, #FFF3B0, var(--yellow) 55%, #C99400);
  box-shadow: 0 0 0 4px var(--charcoal), 0 6px 16px rgba(0,0,0,0.5);
}

/* Bulbs around the rim, chasing while it spins */
.sw-wheel .bulb { fill: #FFF6C8; opacity: 0.55; }
.sw-wheel.spinning .bulb { animation: bulbs 0.5s steps(2) infinite; }
.sw-wheel.spinning .bulb:nth-child(odd) { animation-delay: -0.25s; }
@keyframes bulbs { 50% { opacity: 1; } }

.sw-wheel .win { animation: glow 0.6s ease-in-out 3 alternate; }
@keyframes glow { to { filter: brightness(1.45); } }


/* ============================================================
   TOTAL, SPINS, BUTTONS
   ============================================================ */
.sw-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.sw-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 34px;
  border-radius: 20px;
  background: rgba(0,0,0,0.28);
  border: 1.5px solid rgba(253,205,44,0.45);
}
.sw-total-label, .sw-spins-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.sw-total-num {
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--yellow);
  text-shadow: 0 0 26px rgba(253,205,44,0.4);
}
.sw-total-num.bump { animation: thump 0.45s ease; }

.sw-spins { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sw-pips { display: flex; gap: 6px; }
.sw-pips i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(19,199,182,0.6);
}
.sw-pips i.used { background: rgba(255,255,255,0.12); box-shadow: none; }
.sw-free {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(19,199,182,0.2);
  color: var(--teal);
}

.sw-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}
.sw-actions .btn-deal, .sw-actions .btn-nodeal { font-size: 1.1rem; padding: 16px 10px; }
.sw-actions button:disabled { opacity: 0.5; cursor: wait; transform: none; }
.sw-spin-btn { font-size: 1.35rem !important; letter-spacing: 0.06em; }

.sw-history {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.sw-history li {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.sw-history li.special { background: rgba(253,205,44,0.2); color: var(--yellow); }
.sw-history li.bust { background: rgba(226,87,76,0.22); color: #FFC4BF; }

/* Toast for DOUBLE, SPIN AGAIN and the auto bank */
.sw-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 150;
  transform: translate(-50%, -50%);
  padding: 18px 30px;
  border-radius: 22px;
  background: rgba(24,34,40,0.94);
  box-shadow: 0 0 0 2px rgba(253,205,44,0.6), 0 20px 50px rgba(0,0,0,0.5);
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--yellow);
  white-space: nowrap;
  pointer-events: none;
  animation: swToast 0.5s cubic-bezier(.2,1.6,.4,1) both;
}
.sw-toast small { display: block; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 4px; white-space: normal; }
.sw-toast.red { color: #FF8A80; box-shadow: 0 0 0 2px rgba(226,87,76,0.7), 0 20px 50px rgba(0,0,0,0.5); }
.sw-toast.teal { color: var(--teal); box-shadow: 0 0 0 2px rgba(19,199,182,0.6), 0 20px 50px rgba(0,0,0,0.5); }
.sw-toast.big { font-size: 3.2rem; }
@keyframes swToast {
  from { transform: translate(-50%, -50%) scale(2) rotate(-8deg); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  /* Wheel and buttons fit on one phone screen, so the wheel is in view
     the whole time it spins. */
  .sw-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sw-wheel-wrap { max-width: 250px; width: 66%; }
  .sw-pointer { top: -10px; border-left-width: 12px; border-right-width: 12px; border-top-width: 22px; }
  .sw-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  .sw-total { padding: 6px 12px; }
  .sw-total-num { font-size: 2.2rem; }
  .sw-spins { flex-direction: column; gap: 6px; }
  .sw-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; max-width: none; }
  .sw-actions .sw-spin-btn:has(+ [hidden]) { grid-column: 1 / -1; }
  .sw-history { grid-column: 1 / -1; }
  .sw-page .game-status { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-wheel { transition-duration: 0.6s; }
  .sw-wheel.spinning .bulb, .sw-wheel .win, .sw-toast, .sw-pointer.tick { animation: none !important; }
}