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

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

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

/* Hide message and CTA until the spin completes */
.gto-shop-popup .gto-shop-sub,
.gto-shop-popup .gto-shop-trigger{
  display:none;
}

/* Result overlay + popup */
.gto-result-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.95);
  z-index:1000000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.gto-result-popup{
  width:100%;
  max-width:480px;
  background:#0c0901;
  border:2px solid #e4ae23;
  border-radius:16px;
  padding:24px;
  color:#fff;
  position:relative;
  font-family:system-ui, sans-serif;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.gto-result-close{
  position:absolute!important;  top:10px!important; right:12px!important;
  width:34px!important; height:34px!important; display:grid; place-items:center!important;
  border:0!important; border-radius:8px!important; font-size:20px!important; background:transparent!important;
}
.gto-result-title{ margin:0; font-size:42px; font-weight:900; color:#fff; line-height:1.1; }
.gto-result-gift{ display:block; width:75px; height:75px; margin:0 auto; animation:giftPop 900ms ease-out both; transform-origin:center; }
.gto-result-msg{ margin:0; font-size:18px; opacity:.95; font-weight:600; }
.gto-result-trigger{
  width:100%!important; max-width:320px!important; padding:12px 14px!important;
  background:#e4ae23!important; color:#333!important; border:2px solid #e4ae23!important;
  border-radius:10px!important; font-size:18px!important; font-weight:700!important; margin:6px auto 2px!important; display:block!important;
}
.gto-result-trigger:hover{ background:#c9961d!important; border-color:#c9961d!important; }

@keyframes giftPop{
  0%{ transform: scale(0.6) rotate(-6deg); opacity:0; }
  40%{ transform: scale(1.08) rotate(2deg); opacity:1; }
  70%{ transform: scale(0.95) rotate(-1deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* Responsive refinements */
@media (max-width: 480px){
  .gto-result-popup{ padding:20px; gap:12px; }
  .gto-result-title{ font-size:32px; }
  .gto-result-gift{ width:60px; height:60px; }
  .gto-result-trigger{ max-width:100%!important; font-size:16px!important; padding:12px 14px!important; }
}

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

.gto-shop-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;
}
.gto-shop-sub{
      font-size: 18px;
    opacity: .9;
    font-weight: 500;
    margin: 20px 10px;
}

/* ===== YOUR WHEEL DESIGN (plain CSS) ===== */
.gto-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;
}

.gto-container .gto-shopBtn{
  position: absolute;
  width: 60px;
  height: 60px;
  background: #e4ae23;
  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;
  font-size:12px;
}

.gto-container .gto-shopBtn::before{
  content: '';
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 20px;
  background: #e4ae23;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.gto-container .gto-shop-now{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #f5f6f8;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px #c9d1e3,
              0 0 0 12px #ffffff,
              0 2px 12px rgba(0,0,0,0.12);
  transition: transform 1.8s ease-in-out;
}

.gto-container .gto-shop-now .gto-number{
  position: absolute;
  width: 50%;
  height: 50%;
  background: #e9edf5;
  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: default;
}

.gto-container .gto-shop-now .gto-number span{
  display: block;
  color: #000;
  font-weight: 700;
}

.gto-container .gto-shop-now .gto-number span::after{ display:block; content: 'credits'; font-weight:400; margin-left:2px; font-size:14px; }

/* CTA button under gto-shop-now */
.gto-shop-trigger{
  width:100%!important;
  max-width:360px!important;
  padding:14px 16px!important;
  background:#c1950f!important;
  color:#ffffff!important;
  border:2px solid #c1950f!important;
  border-radius:10px!important;
  font-size:20px!important;
  font-weight:600!important; 
  margin: 4px auto 40px!important;
  display:block!important;
}
.gto-shop-trigger:hover{ 
  background:#c1950fc5!important; 
  border-color:#c1950fc5!important;
}
.gto-count-down {
  margin-top: 14px;
  font-size: 15px;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.3px;
  user-select: none;
}

.gto-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);
}

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

.gto-count-down .cd-label {
  font-weight: 700; /* bold labels */
  margin-right: 4px;
}
.gto-count-down.animate .cd-part {
  animation: cdPop 0.6s ease forwards;
}

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

/* Shop Visit Popup (on /golden-tiger-toys/) */
.gto-shop-visit-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.95);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.gto-shop-visit-popup {
  width:100%;
  max-width:420px;
  background:#0c0901;
  border:2px solid #e4ae23;
  border-radius:16px;
  padding:32px 24px;
  color:#fff;
  position:relative;
  font-family:system-ui, sans-serif;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.gto-shop-visit-close {
  position:absolute!important;  top:10px!important; right:12px!important;
  width:34px!important; height:34px!important; display:grid; place-items:center!important;
  border:0!important; border-radius:8px!important; font-size:20px!important; background:transparent!important;
  cursor:pointer!important;
}
.gto-shop-visit-logo-wrap {
  display:block; width:100%; height:auto;
}
.gto-shop-visit-logo {
  max-width:280px; height:auto; display:block; margin:0 auto 40px;
}
.gto-shop-visit-trigger {
  width:100%!important; max-width:320px!important; padding:12px 14px!important;
  background:#e4ae23!important; color:#333!important; border:2px solid #e4ae23!important;
  border-radius:10px!important; font-size:18px!important; font-weight:700!important; display:block!important;
  cursor:pointer!important; margin:0 auto!important;
}
.gto-shop-visit-trigger:hover { background:#c9961d!important; border-color:#c9961d!important; }

@media (max-width: 480px) {
  .gto-shop-visit-popup { padding:24px 20px; gap:16px; }
  .gto-shop-visit-logo { max-width:140px; }
  .gto-shop-visit-trigger { font-size:16px!important; }
}