/* Spin & Win floating button + default panel. Colours come from the global tokens. */

/* FLOATING BUTTON */
.share-btn-container .tgv-spin-fab {
  position: relative;
  background: var(--primary);
}
.share-btn-container .tgv-spin-fab:hover,
.share-btn-container .tgv-spin-fab:focus-visible {
  background: var(--primary-hover);
}
.tgv-spin-fab-icon {
  font-size: 22px;
  line-height: 1;
}
.tgv-spin-fab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* FLOATING BUTTON END */

/* DEFAULT PANEL */
.tgv-spin-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}
.tgv-spin-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(92vw, 380px);
  max-height: 100%;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  border-radius: 1rem;
  background: #0c0c0c;
  color: #fff;
  text-align: center;
}
.tgv-spin-title {
  margin: 0;
}
.tgv-spin-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.tgv-spin-line,
.tgv-spin-won,
.tgv-spin-error {
  margin: 0;
}
.tgv-spin-won {
  font-weight: 700;
  font-size: 1.1rem;
}
.tgv-spin-error {
  color: var(--primary-disabled);
  font-size: 0.85rem;
}
.tgv-spin-select {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.5rem;
}
/* DEFAULT PANEL END */

/* LOADING OVERLAY — shown while open() runs its two AJAX calls (purchase
   check, then balance refresh) before any panel/dialog exists yet. Same
   dim backdrop + z-index as the default panel above, so it reads as "the
   same surface is about to appear," not a separate effect. */
.tgv-spin-loading {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}
/* Doctor Strange sling-ring portal — a soft pulsing energy halo behind
   everything; two solid glowing rings (outer/inner, spinning opposite
   ways); a "sigil" ring of rune-like tick marks between them (a repeating-
   conic-gradient masked down to a thin band, not a plain dashed border —
   reads much more like inscribed symbols than a dash pattern does); six
   embers orbiting as one group; a pulsing core. Sizes are plain px, not
   viewport-scaled (CLAUDE.md's "always mobile-dynamic" rule is about
   in-page content; this is a small, fixed-size overlay widget, same
   convention as the fixed-size .tgv-spin-fab button/badge above). */
.tgv-spin-portal {
  position: relative;
  width: 100px;
  height: 100px;
}
.tgv-spin-portal-glow {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.4) 0%, rgba(255, 138, 0, 0) 70%);
}
.tgv-spin-portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.tgv-spin-portal-ring--outer {
  border-top-color: #ff8a00;
  border-right-color: #ff8a00;
  box-shadow: 0 0 14px 2px rgba(255, 138, 0, 0.55);
}
.tgv-spin-portal-ring--inner {
  inset: 32px;
  border-bottom-color: #fff2cc;
  border-right-color: #fff2cc;
  box-shadow: 0 0 10px 1px rgba(255, 242, 204, 0.5);
}
/* The tick band sits between the two rings above (inset 12-26px); the mask
   keeps only a thin ring of each tick visible, so the element reads as a
   circle of short inscribed marks rather than a filled conic-gradient disc. */
.tgv-spin-portal-sigil {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255, 179, 71, 0.95) 0deg 4deg,
    transparent 4deg 20deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px) calc(100% - 2px), transparent calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px) calc(100% - 2px), transparent calc(100% - 2px));
}
.tgv-spin-portal-sparks {
  position: absolute;
  inset: 0;
}
.tgv-spin-portal-sparks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffcf7a;
  box-shadow: 0 0 6px 2px rgba(255, 180, 60, 0.9);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(46px);
}
.tgv-spin-portal-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #ffcf7a;
  box-shadow: 0 0 12px 5px rgba(255, 180, 60, 0.85);
}
@media (prefers-reduced-motion: no-preference) {
  .tgv-spin-portal-glow { animation: tgv-spin-portal-pulse 1.8s ease-in-out infinite; }
  .tgv-spin-portal-ring--outer { animation: tgv-spin-portal-spin 1.6s linear infinite; }
  .tgv-spin-portal-sigil { animation: tgv-spin-portal-spin-reverse 2.4s linear infinite; }
  .tgv-spin-portal-ring--inner { animation: tgv-spin-portal-spin 0.9s linear infinite; }
  .tgv-spin-portal-sparks { animation: tgv-spin-portal-spin-reverse 2.8s linear infinite; }
  .tgv-spin-portal-core { animation: tgv-spin-portal-pulse 1s ease-in-out infinite; }
}
@keyframes tgv-spin-portal-spin {
  to { transform: rotate(360deg); }
}
@keyframes tgv-spin-portal-spin-reverse {
  to { transform: rotate(-360deg); }
}
@keyframes tgv-spin-portal-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.3); opacity: 1; }
}
/* LOADING OVERLAY END */