:root{
  --bg:#010C16;
  --border:#0F3159;
  --btn:#6FA4E4;
  --text:#fff;
}

/* overlay + popup */
.slotfun-spin-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.slotfun-spin-popup{
  width:100%;
  max-width:560px;
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:18px;
  padding:18px;
  color:var(--text);
  position:relative;
  font-family:system-ui, sans-serif;
  text-align:center;
}

.slotfun-spin-popup button{
  all: unset;
  box-sizing:border-box;
  cursor:pointer;
  font-family:inherit;
}

.slotfun-spin-close{
  position:absolute!important;  
  top:10px!important; 
  right:12px!important;
  width:34px!important; 
  height:34px!important;
  display:grid; place-items:center!important;
  border:0px solid var(--border)!important;
  border-radius:8px!important;
  font-size:20px!important;
  background:transparent!Important;
  
}

.slotfun-spin-title{
  margin:4px 0 4px;
  font-size:20px;
  font-weight:900;
}
.slotfun-spin-sub{
      font-size: 18px;
    opacity: .9;
    font-weight: 500;
    margin: 20px 10px;
}

/* ===== YOUR WHEEL DESIGN (plain CSS) ===== */
.slotfun-container{
  position: relative;
  width: clamp(260px, 80vw, 400px);
  height: clamp(260px, 80vw, 400px);
  margin: 20px auto 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slotfun-container .spinBtn{
  position: absolute;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 600;
  color: #333;
  letter-spacing: .1em;
  border: 4px solid rgba(0, 0, 0, 0.75);
  cursor: pointer;
  user-select: none;
}

.slotfun-container .spinBtn::before{
  content: '';
  position: absolute;
  right: -15px;
  width: 20px;
  height: 30px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.slotfun-container .wheel{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #333;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 5px #333,
              0 0 0 15px #fff,
              0 0 0 18px #111;
  transition: transform 5s ease-in-out;
}

.slotfun-container .wheel .number{
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--clr);
  transform-origin: bottom right;
  transform: rotate(calc(45deg * var(--i)));
  clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.slotfun-container .wheel .number span{
  position: relative;
  transform: rotate(45deg);
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  text-shadow: 3px 5px 2px rgba(0, 0, 0, 0.15);
}

.slotfun-container .wheel .number span::after{
  content: ' Free Spins';
  position: absolute;
  font-size: 0.5em;
  font-weight: 600;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* CTA button under wheel */
.slotfun-spin-trigger{
  width:100%!important;
  max-width:360px!important;
  padding:14px 16px!important;
  background:var(--btn)!important;
  border:2px solid var(--border)!important;
  border-radius:10px!important;
  font-size:20px!important;
  font-weight:600!important; 
  margin: 4px auto 40px!important;
  display:block!important;
}
.count-down {
  margin-top: 14px;
  font-size: 15px;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.3px;
  user-select: none;
}

.count-down .cd-part {
  display: inline-block;
  margin: 0 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  transform: translateZ(0);
}

.count-down .cd-num {
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  min-width: 18px;
}

.count-down .cd-label {
  font-weight: 700; /* bold labels */
  margin-right: 4px;
}

/* tick animation every second */
.count-down.tick .cd-part {
  animation: cdPop 0.35s ease;
}

@keyframes cdPop {
  0%   { transform: scale(1); opacity: 0.85; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}