/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/
:root {
    --pink: #ff00ff;
    --pink-light: #ff79ff;
    --pink-dark: #850085;

    --background: #030003;
    --background-soft: #0d030f;
    --card: #190019;
    --card-light: #260026;

    --border: rgba(255, 0, 255, 0.28);

    --text: #ffffff;
    --text-muted: #b9aebd;
}

html,
body {
    background: var(--background) !important;
    color: var(--text);
    overflow-x: hidden;
}

body {
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 30% 15%,
            rgba(255, 0, 255, 0.09),
            transparent 32%
        ),
        #030003;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--pink) !important;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #050005;
}

::-webkit-scrollbar-thumb {
    background: #390039;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #650065;
}
/* =========================================================
   SXC SPIN - floating daily reward widget
   ========================================================= */
[x-cloak] { display: none !important; }
body.sxc-spin-open { overflow: hidden; }

.sxc-spin-root {
  --spin-accent: var(--pink, #ff00ff);
  --spin-accent-rgb: 255, 0, 255;
  --spin-bg: #050206;
  --spin-panel: rgba(17, 7, 19, .96);
  --spin-border: rgba(var(--spin-accent-rgb), .30);
  position: relative;
  z-index: 1090;
}

.sxc-spin-trigger {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1088;
  height: 58px;
  min-width: 154px;
  padding: 8px 16px 8px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 0, 255, .42);
  background: rgba(10, 3, 11, .88);
  color: #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sxc-spin-trigger:hover {
  transform: translateY(-3px);
  border-color: rgba(255,0,255,.80);
  box-shadow: 0 12px 45px rgba(0,0,0,.52), 0 0 24px rgba(255,0,255,.13);
}
.sxc-spin-trigger.has-spin { box-shadow: 0 12px 45px rgba(0,0,0,.52), 0 0 28px rgba(255,0,255,.18); }
.sxc-spin-trigger-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,0,255,.18), rgba(255,0,255,.05));
  border: 1px solid rgba(255,0,255,.28);
  box-shadow: inset 0 0 18px rgba(255,0,255,.08);
}
.sxc-mini-wheel {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(
    #ff2aa1 0deg 45deg,
    #ff5f7a 45deg 90deg,
    #ffb347 90deg 135deg,
    #f6e65b 135deg 180deg,
    #63d471 180deg 225deg,
    #36c5f0 225deg 270deg,
    #6c63ff 270deg 315deg,
    #c85cff 315deg 360deg
  );
  border: 2px solid #ff3cf4;
  box-shadow: 0 0 12px rgba(255,0,255,.42), inset 0 0 0 2px rgba(0,0,0,.26);
}
.sxc-mini-wheel::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(10,3,11,.78);
}
.sxc-mini-wheel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 0;
  border-bottom: 7px solid #fff;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.55));
}
.sxc-mini-wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #120713;
  border: 1px solid #fff;
  box-shadow: 0 0 5px rgba(255,255,255,.45);
}
.sxc-spin-trigger-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.sxc-spin-trigger-copy strong { font-size: 15px; letter-spacing: .11em; }
.sxc-spin-trigger-copy small { margin-top: 6px; font-size: 8px; letter-spacing: .11em; color: #c7b8c9; white-space: nowrap; }
.sxc-spin-trigger-dot {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--spin-accent);
  box-shadow: 0 0 14px rgba(255,0,255,.95);
  animation: sxcSpinPulse 1.8s ease-in-out infinite;
}

.sxc-spin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(2,0,3,.80);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.sxc-spin-modal {
  position: relative;
  width: min(1120px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  overflow: hidden;
  border: 1px solid rgba(255,0,255,.40);
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 50%, rgba(255,0,255,.12), transparent 35%),
    linear-gradient(135deg, rgba(18,7,20,.98), rgba(4,2,5,.985));
  box-shadow: 0 35px 110px rgba(0,0,0,.72), 0 0 70px rgba(255,0,255,.08), inset 0 1px 0 rgba(255,255,255,.035);
}
.sxc-spin-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
}
.sxc-spin-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #b6aeb7;
  transition: .2s ease;
}
.sxc-spin-close:hover { color:#fff; border-color:rgba(255,0,255,.45); background:rgba(255,0,255,.08); }

.sxc-spin-wheel-side,
.sxc-spin-info-side { position: relative; z-index: 1; }
.sxc-spin-wheel-side {
  min-width: 0;
  padding: 42px 28px 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sxc-spin-kicker {
  align-self: flex-start;
  margin-bottom: 11px;
  color: #c6b9c8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}
.sxc-spin-kicker span { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--spin-accent); box-shadow:0 0 10px var(--spin-accent); }

.sxc-wheel-wrap { position: relative; width: min(500px, 86vw); aspect-ratio: 1; display:grid; place-items:center; }
.sxc-wheel-glow { position:absolute; inset:10%; border-radius:50%; box-shadow:0 0 80px rgba(255,0,255,.15); }
.sxc-wheel-pointer {
  position:absolute;
  top:-3px;
  left:50%;
  z-index:8;
  transform:translateX(-50%);
  width:44px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:10px 10px 18px 18px;
  color:#fff;
  font-size:27px;
  background:linear-gradient(180deg,#ff48ff,#b000b0);
  filter:drop-shadow(0 0 12px rgba(255,0,255,.5));
}
.sxc-wheel {
  position: relative;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform 4.3s cubic-bezier(.12,.72,.06,1);
  background:
    repeating-conic-gradient(from -12.857deg, rgba(255,255,255,.10) 0deg 1deg, transparent 1deg 25.714deg),
    repeating-conic-gradient(from -12.857deg, #160617 0deg 25.714deg, #0c030d 25.714deg 51.428deg);
  border: 3px solid rgba(255,0,255,.58);
  box-shadow:
    0 0 0 8px rgba(255,0,255,.055),
    0 0 0 10px rgba(255,0,255,.20),
    0 0 45px rgba(255,0,255,.16),
    inset 0 0 48px rgba(0,0,0,.75);
}
.sxc-wheel::after {
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  pointer-events:none;
}
.sxc-wheel-label {
  position:absolute;
  left:50%;
  top:50%;
  width:96px;
  margin-left:-48px;
  margin-top:-24px;
  text-align:center;
  color:#fff;
  transform-origin:48px 24px;
  transition: transform 4.3s cubic-bezier(.12,.72,.06,1);
  line-height:1.05;
}
.sxc-wheel-label b { display:block; font-size:14px; color:#fff; text-shadow:0 0 12px rgba(255,0,255,.2); white-space:nowrap; }
.sxc-wheel-label span { display:block; margin-top:2px; font-size:7px; letter-spacing:.08em; color:#9b8e9d; white-space:nowrap; }
.sxc-wheel-label.slot-lose b { color:#d9cfdc; font-size:12px; }
.sxc-wheel-label.slot-retry b { color:#c7bac9; font-size:11px; }
.sxc-wheel-label.slot-twenty b,
.sxc-wheel-label.slot-fifty b { color:var(--spin-accent); text-shadow:0 0 15px rgba(255,0,255,.45); }
.sxc-wheel-center {
  position:absolute;
  left:50%; top:50%;
  width:126px; height:126px;
  transform:translate(-50%,-50%);
  transition: transform 4.3s cubic-bezier(.12,.72,.06,1);
  display:grid;
  place-content:center;
  border-radius:50%;
  border:2px solid rgba(255,0,255,.55);
  background:radial-gradient(circle at 40% 30%, #260827, #090309 68%);
  color:#fff;
  box-shadow:0 0 0 7px rgba(255,0,255,.06), 0 0 30px rgba(255,0,255,.17), inset 0 0 20px rgba(255,0,255,.08);
  cursor:pointer;
}
.sxc-wheel-center:disabled { cursor:not-allowed; opacity:.74; }
.sxc-wheel-center span { font-size:25px; font-weight:800; font-style:italic; letter-spacing:.04em; }
.sxc-wheel-center small { margin-top:1px; color:var(--spin-accent); font-size:10px; font-weight:800; letter-spacing:.2em; }
.sxc-wheel-center i { font-size:24px; color:var(--spin-accent); }
.sxc-spin-wheel-hint { margin:8px 0 0; color:#817582; font-size:11px; }

.sxc-spin-info-side { padding:66px 46px 40px; display:flex; flex-direction:column; }
.sxc-spin-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.sxc-spin-eyebrow { margin-bottom:5px; color:#948897; font-size:9px; font-weight:700; letter-spacing:.19em; }
.sxc-spin-title-row h2 { margin:0; color:#fff; font-size:46px; font-weight:800; font-style:italic; letter-spacing:-.04em; line-height:1; }
.sxc-spin-title-row h2 span { color:var(--spin-accent); text-shadow:0 0 26px rgba(255,0,255,.26); }
.sxc-spin-live { display:flex; align-items:center; gap:6px; margin-top:4px; padding:6px 9px; border:1px solid rgba(255,0,255,.18); border-radius:999px; color:#9b8e9d; font-size:8px; font-weight:700; letter-spacing:.13em; }
.sxc-spin-live span { width:6px; height:6px; border-radius:50%; background:var(--spin-accent); box-shadow:0 0 9px var(--spin-accent); }
.sxc-spin-subtitle { max-width:380px; margin:18px 0 22px; color:#a69aa8; font-size:13px; line-height:1.65; }
.sxc-spin-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.sxc-spin-cards article { min-height:74px; display:flex; align-items:center; gap:11px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.025); }
.sxc-spin-card-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:10px; background:rgba(255,0,255,.08); color:var(--spin-accent); }
.sxc-spin-cards small { display:block; margin-bottom:4px; color:#776d78; font-size:8px; font-weight:700; letter-spacing:.13em; }
.sxc-spin-cards strong { display:block; color:#fff; font-size:15px; line-height:1; }

.sxc-spin-result { min-height:80px; margin-bottom:12px; display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.025); }
.sxc-spin-result.is-win { border-color:rgba(255,0,255,.38); background:rgba(255,0,255,.055); }
.sxc-spin-result-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; color:var(--spin-accent); background:rgba(255,0,255,.09); }
.sxc-spin-result small { display:block; margin-bottom:3px; color:#807483; font-size:8px; font-weight:700; letter-spacing:.13em; }
.sxc-spin-result strong { display:block; color:#fff; font-size:18px; }
.sxc-spin-result p { margin:3px 0 0; color:#928694; font-size:10px; }
.sxc-spin-main-button { width:100%; min-height:48px; margin-top:auto; border:1px solid rgba(255,0,255,.65); border-radius:11px; background:linear-gradient(180deg, rgba(255,0,255,.22), rgba(255,0,255,.10)); color:#fff; font-size:11px; font-weight:800; letter-spacing:.12em; box-shadow:0 0 24px rgba(255,0,255,.08); transition:.2s ease; }
.sxc-spin-main-button:hover:not(:disabled) { transform:translateY(-1px); border-color:#ff48ff; box-shadow:0 0 30px rgba(255,0,255,.16); }
.sxc-spin-main-button:disabled { opacity:.55; cursor:not-allowed; }
.sxc-spin-rules { margin-top:17px; display:grid; gap:8px; }
.sxc-spin-rules div { display:flex; align-items:center; gap:8px; color:#8f8391; font-size:10px; }
.sxc-spin-rules i { width:13px; color:var(--spin-accent); font-size:9px; }
.sxc-spin-footnote { margin:18px 0 0; color:#5f5661; font-size:8px; line-height:1.5; }

.sxc-spin-enter { transition: transform .22s ease, opacity .22s ease; }
.sxc-spin-enter-start { opacity:0; transform:translateY(12px) scale(.985); }
.sxc-spin-enter-end { opacity:1; transform:translateY(0) scale(1); }

@keyframes sxcSpinPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.72);opacity:.55} }

@media (max-width: 820px) {
  .sxc-spin-overlay { padding:14px; overflow:auto; }
  .sxc-spin-modal { grid-template-columns:1fr; max-width:560px; margin:auto; }
  .sxc-spin-wheel-side { padding:30px 20px 16px; border-right:0; border-bottom:1px solid rgba(255,255,255,.06); }
  .sxc-spin-info-side { padding:28px 24px 28px; }
  .sxc-wheel-wrap { width:min(430px,84vw); }
  .sxc-spin-title-row h2 { font-size:36px; }
}
@media (max-width: 520px) {
  .sxc-spin-trigger { right:14px; bottom:14px; min-width:auto; height:46px; padding:6px 10px 6px 6px; border-radius:13px; }
  .sxc-spin-trigger-icon { width:32px; height:32px; flex-basis:32px; }
  .sxc-spin-trigger-copy small { display:none; }
  .sxc-spin-modal { border-radius:17px; }
  .sxc-spin-wheel-side { padding:26px 12px 12px; }
  .sxc-spin-kicker { margin-left:12px; }
  .sxc-spin-info-side { padding:24px 18px 22px; }
  .sxc-spin-cards { grid-template-columns:1fr; }
  .sxc-spin-title-row h2 { font-size:32px; }
              .sxc-wheel-label { scale:.86; }
.sxc-wheel-label b { font-size:10px; }
  .sxc-wheel-center { width:92px; height:92px; }
}

/* SXC Spin: server-issued coupon result */
.sxc-spin-error {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(255,75,75,.25);
  border-radius:11px;
  background:rgba(255,75,75,.06);
  color:#d7b7ba;
  font-size:10px;
  line-height:1.45;
}
.sxc-spin-error i { color:#ff6b75; }
.sxc-spin-result-copy { min-width:0; flex:1; }
.sxc-spin-coupon {
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 10px 12px;
  border:1px dashed rgba(255,0,255,.35);
  border-radius:10px;
  background:rgba(0,0,0,.24);
}
.sxc-spin-coupon > div { min-width:0; }
.sxc-spin-coupon small {
  display:block;
  margin-bottom:4px;
  color:#8d7e90;
  font-size:7px;
  font-weight:700;
  letter-spacing:.14em;
}
.sxc-spin-coupon code {
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  font-family:monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}
.sxc-spin-coupon button {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(255,0,255,.35);
  border-radius:8px;
  background:rgba(255,0,255,.08);
  color:#fff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}
.sxc-spin-coupon button:hover,
.sxc-spin-coupon button.is-copied {
  border-color:rgba(255,0,255,.7);
  background:rgba(255,0,255,.15);
}
@media (max-width: 520px) {
  .sxc-spin-coupon { align-items:stretch; flex-direction:column; }
  .sxc-spin-coupon button { justify-content:center; }
}

/* SXC account/login button: allow <button> and <a> to share the same navbar style */
button.sxc-account-button {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* =========================================================
   SXC SPIN v3 - compact premium info panel + IP/account status
   ========================================================= */
.sxc-spin-modal {
  min-height: 610px;
  grid-template-columns: 1.08fr .92fr;
}
.sxc-spin-info-side {
  padding: 54px 48px 38px;
  justify-content: center;
}
.sxc-spin-subtitle {
  margin: 16px 0 18px;
}
.sxc-spin-cards {
  gap: 12px;
  margin-bottom: 12px;
}
.sxc-spin-cards article {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.sxc-spin-cards article::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,0,255,.045);
  filter: blur(2px);
}
.sxc-spin-cards article.is-ready {
  border-color: rgba(255,0,255,.34);
  background: linear-gradient(135deg, rgba(255,0,255,.075), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 24px rgba(255,0,255,.04);
}
.sxc-spin-cards article.is-ready .sxc-spin-card-icon {
  box-shadow: 0 0 18px rgba(255,0,255,.14);
}
.sxc-spin-cards em {
  display: block;
  margin-top: 6px;
  color: #716775;
  font-size: 8px;
  font-style: normal;
}
.sxc-spin-status-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 50%, rgba(255,0,255,.075), transparent 42%),
    rgba(255,255,255,.022);
}
.sxc-spin-status-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,0,255,.18);
  background: rgba(255,0,255,.08);
  color: var(--spin-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sxc-spin-status-panel small {
  display: block;
  margin-bottom: 4px;
  color: var(--spin-accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}
.sxc-spin-status-panel strong {
  display: block;
  color: #fff;
  font-size: 14px;
}
.sxc-spin-status-panel p {
  margin: 5px 0 0;
  color: #807583;
  font-size: 9px;
}
.sxc-spin-result {
  min-height: 88px;
  margin-bottom: 12px;
}
.sxc-spin-main-button {
  min-height: 52px;
  margin-top: 0;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.09), transparent 46%),
    linear-gradient(180deg, rgba(255,0,255,.25), rgba(255,0,255,.095));
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 28px rgba(255,0,255,.07);
}
.sxc-spin-rules {
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.055);
}
.sxc-spin-rules div {
  align-items: flex-start;
  line-height: 1.35;
}
.sxc-spin-footnote {
  margin-top: 12px;
}

@media (max-width: 820px) {
  .sxc-spin-modal { min-height: 0; }
  .sxc-spin-info-side { padding: 30px 24px 28px; }
}
@media (max-width: 520px) {
  .sxc-spin-rules { grid-template-columns: 1fr; }
  .sxc-spin-status-panel { min-height: 78px; }
}

/* =========================================================
   SXC SPIN V4 - Bigger floating CTA + pink shell + rainbow wheel
   ========================================================= */

/* Bigger, more noticeable floating trigger - stays SXC pink */
.sxc-spin-trigger {
  right: 28px;
  bottom: 26px;
  height: 68px;
  min-width: 176px;
  padding: 9px 18px 9px 9px;
  gap: 12px;
  border-radius: 19px;
  border: 1px solid rgba(255, 0, 255, .72);
  background:
    radial-gradient(circle at 16% 50%, rgba(255,0,255,.19), transparent 42%),
    linear-gradient(145deg, rgba(22,4,24,.97), rgba(7,2,8,.96));
  box-shadow:
    0 16px 46px rgba(0,0,0,.58),
    0 0 24px rgba(255,0,255,.20),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: sxcSpinTriggerGlow 2.4s ease-in-out infinite;
}

.sxc-spin-trigger:hover {
  transform: translateY(-4px) scale(1.025);
  border-color: #ff52ff;
  box-shadow:
    0 18px 52px rgba(0,0,0,.65),
    0 0 36px rgba(255,0,255,.34),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.sxc-spin-trigger.has-spin {
  border-color: rgba(255, 35, 255, .95);
  box-shadow:
    0 18px 52px rgba(0,0,0,.62),
    0 0 38px rgba(255,0,255,.31),
    0 0 72px rgba(255,0,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.sxc-spin-trigger-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 14px;
  font-size: 20px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,130,255,.28), transparent 38%),
    linear-gradient(145deg, rgba(255,0,255,.28), rgba(255,0,255,.08));
  border: 1px solid rgba(255,0,255,.46);
  color: #ff39ff;
  box-shadow: inset 0 0 22px rgba(255,0,255,.10), 0 0 18px rgba(255,0,255,.13);
}

.sxc-spin-trigger-copy strong {
  font-size: 17px;
  letter-spacing: .12em;
  text-shadow: 0 0 16px rgba(255,255,255,.10);
}

.sxc-spin-trigger-copy small {
  margin-top: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #d7bed8;
}

.sxc-spin-trigger-dot {
  right: -4px;
  top: -4px;
  width: 13px;
  height: 13px;
  border: 2px solid #120513;
  background: #ff25ff;
  box-shadow: 0 0 18px rgba(255,0,255,1);
}

@keyframes sxcSpinTriggerGlow {
  0%, 100% {
    box-shadow:
      0 16px 46px rgba(0,0,0,.58),
      0 0 20px rgba(255,0,255,.16),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  50% {
    box-shadow:
      0 16px 48px rgba(0,0,0,.60),
      0 0 34px rgba(255,0,255,.29),
      0 0 58px rgba(255,0,255,.09),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* Keep the modal itself strictly pink / dark */
.sxc-spin-modal {
  border-color: rgba(255,0,255,.52);
  background:
    radial-gradient(circle at 24% 50%, rgba(255,0,255,.14), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(255,0,255,.06), transparent 25%),
    linear-gradient(135deg, rgba(19,6,21,.99), rgba(4,2,5,.99));
  box-shadow:
    0 35px 110px rgba(0,0,0,.76),
    0 0 74px rgba(255,0,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Rainbow only INSIDE the wheel */
.sxc-wheel {
  background:
    repeating-conic-gradient(
      from -12.857deg,
      rgba(255,255,255,.16) 0deg 1deg,
      transparent 1deg 25.714deg
    ),
    conic-gradient(
      from -12.857deg,
      #4b123f 0deg 25.714deg,
      #391858 25.714deg 51.428deg,
      #202060 51.428deg 77.142deg,
      #14385f 77.142deg 102.856deg,
      #12505b 102.856deg 128.570deg,
      #164b3d 128.570deg 154.284deg,
      #4a4b18 154.284deg 179.998deg,
      #5c3a13 179.998deg 205.712deg,
      #5b211a 205.712deg 231.426deg,
      #57192b 231.426deg 257.140deg,
      #501344 257.140deg 282.854deg,
      #391858 282.854deg 308.568deg,
      #242060 308.568deg 334.282deg,
      #4b123f 334.282deg 360deg
    );
  border: 3px solid rgba(255,0,255,.78);
  box-shadow:
    0 0 0 8px rgba(255,0,255,.065),
    0 0 0 10px rgba(255,0,255,.26),
    0 0 56px rgba(255,0,255,.22),
    inset 0 0 62px rgba(0,0,0,.50);
}

/* Dark glass over colors so the wheel stays premium, not childish */
.sxc-wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 32%, rgba(3,0,4,.10) 60%, rgba(3,0,4,.28) 100%);
  box-shadow: inset 0 0 55px rgba(0,0,0,.36);
}

.sxc-wheel-label {
  z-index: 2;
}

.sxc-wheel-label b {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 0 10px rgba(255,255,255,.08);
}

.sxc-wheel-label span {
  color: rgba(255,255,255,.68);
  text-shadow: 0 1px 7px rgba(0,0,0,.9);
}

.sxc-wheel-label.slot-twenty b,
.sxc-wheel-label.slot-fifty b {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.80), 0 0 14px rgba(255,255,255,.15);
}

.sxc-wheel-center {
  z-index: 4;
  border-color: rgba(255,0,255,.78);
  background:
    radial-gradient(circle at 40% 28%, #39103c, #0a030b 70%);
  box-shadow:
    0 0 0 8px rgba(255,0,255,.07),
    0 0 38px rgba(255,0,255,.24),
    inset 0 0 24px rgba(255,0,255,.11);
}

/* More attention on desktop modal without changing the pink identity */
@media (min-width: 821px) {
  .sxc-spin-modal {
    width: min(1180px, calc(100vw - 46px));
    min-height: 680px;
  }

  .sxc-wheel-wrap {
    width: min(535px, 44vw);
  }
}

/* Mobile: still larger than before, but safe for the viewport */
@media (max-width: 520px) {
  .sxc-spin-trigger {
    right: 14px;
    bottom: 14px;
    height: 58px;
    min-width: 142px;
    padding: 7px 13px 7px 7px;
    border-radius: 16px;
  }

  .sxc-spin-trigger-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 12px;
    font-size: 17px;
  }

  .sxc-spin-trigger-copy strong {
    font-size: 15px;
  }

  .sxc-spin-trigger-copy small {
    display: block;
    margin-top: 5px;
    font-size: 7px;
  }
}

/* =========================================================
   SXC SPIN V5 - attention CTA + pink-only shell / rainbow wheel
   ========================================================= */

/* Floating CTA: intentionally SXC pink only. Bigger and much easier to notice. */
.sxc-spin-trigger {
  right: 30px;
  bottom: 28px;
  width: 226px;
  min-width: 226px;
  height: 82px;
  padding: 10px 20px 10px 10px;
  gap: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 0, 255, .92);
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 100, 255, .25), transparent 38%),
    linear-gradient(135deg, rgba(39, 3, 39, .98), rgba(10, 2, 11, .99) 66%);
  box-shadow:
    0 18px 54px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,0,255,.13),
    0 0 32px rgba(255,0,255,.30),
    0 0 74px rgba(255,0,255,.11),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.sxc-spin-trigger::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.18) 42%, transparent 62%);
  opacity: .32;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.sxc-spin-trigger-icon {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 17px;
  font-size: 24px;
  color: #fff;
  border: 1px solid rgba(255, 90, 255, .58);
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, #a600a6, #4b034f);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.05),
    0 0 24px rgba(255,0,255,.27);
}

.sxc-spin-trigger-copy strong {
  font-size: 20px;
  line-height: .95;
  letter-spacing: .105em;
  color: #fff;
}

.sxc-spin-trigger-copy small {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .145em;
  color: #efc9ef;
}

.sxc-spin-trigger.has-spin {
  animation: sxcSpinV5Pulse 1.75s ease-in-out infinite;
}

@keyframes sxcSpinV5Pulse {
  0%,100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 54px rgba(0,0,0,.66), 0 0 30px rgba(255,0,255,.27), 0 0 68px rgba(255,0,255,.09);
  }
  50% {
    transform: translateY(-2px) scale(1.018);
    box-shadow: 0 22px 60px rgba(0,0,0,.69), 0 0 44px rgba(255,0,255,.43), 0 0 92px rgba(255,0,255,.14);
  }
}

/* Absolutely no rainbow outside the wheel. */
.sxc-spin-modal,
.sxc-spin-status-panel,
.sxc-spin-cards article,
.sxc-spin-main-button,
.sxc-spin-result,
.sxc-spin-coupon,
.sxc-spin-live,
.sxc-wheel-center,
.sxc-wheel-pointer {
  --spin-shell-accent: #ff00ff;
}

.sxc-spin-modal {
  border-color: rgba(255,0,255,.58) !important;
  background:
    radial-gradient(circle at 24% 48%, rgba(255,0,255,.12), transparent 38%),
    radial-gradient(circle at 83% 16%, rgba(255,0,255,.055), transparent 25%),
    linear-gradient(135deg, #130515 0%, #080208 58%, #030103 100%) !important;
}

/* Rainbow exists ONLY on the wheel face. */
.sxc-wheel {
  background:
    repeating-conic-gradient(from -12.857deg, rgba(255,255,255,.13) 0 1deg, transparent 1deg 25.714deg),
    conic-gradient(from -12.857deg,
      #39112f 0deg 25.714deg,
      #331346 25.714deg 51.428deg,
      #222052 51.428deg 77.142deg,
      #153553 77.142deg 102.856deg,
      #12464c 102.856deg 128.570deg,
      #174238 128.570deg 154.284deg,
      #3f431b 154.284deg 179.998deg,
      #503616 179.998deg 205.712deg,
      #51251a 205.712deg 231.426deg,
      #501b2b 231.426deg 257.140deg,
      #47143e 257.140deg 282.854deg,
      #321947 282.854deg 308.568deg,
      #222052 308.568deg 334.282deg,
      #39112f 334.282deg 360deg) !important;
}

/* Login state should clearly feel clickable, not disabled. */
.sxc-wheel-center.is-login {
  cursor: pointer;
  opacity: 1;
  border-color: rgba(255,0,255,.95);
  box-shadow: 0 0 0 8px rgba(255,0,255,.08), 0 0 44px rgba(255,0,255,.32), inset 0 0 28px rgba(255,0,255,.13);
}
.sxc-wheel-center.is-login span { font-size: 18px; }
.sxc-wheel-center.is-login small { font-size: 8px; }

@media (max-width: 520px) {
  .sxc-spin-trigger {
    right: 12px;
    bottom: 12px;
    width: 178px;
    min-width: 178px;
    height: 66px;
    padding: 8px 14px 8px 8px;
    gap: 10px;
    border-radius: 18px;
  }
  .sxc-spin-trigger-icon {
    width: 49px;
    height: 49px;
    flex-basis: 49px;
    border-radius: 14px;
    font-size: 19px;
  }
  .sxc-spin-trigger-copy strong { font-size: 17px; }
  .sxc-spin-trigger-copy small { display:block; font-size:7px; margin-top:6px; }
}