:root {
  --wr-size: 65px;

  /* === CUSTOM WARNA AI BUTTON === */
  --ai-prag-1:#b700ffbb;
  --ai-prag-2:#3a0052;

  --ai-pg-1:#008351ad;
  --ai-pg-2:#00ff9d;
}

/* ================= FLOAT BUTTON ================= */
.wr-float-btn{
  position:fixed;
  width:var(--wr-size);
  height:var(--wr-size);
  left:15px;
  top:200px;
  z-index:9999;
  touch-action:none;
  user-select:none;
  display:flex;
  align-items:center;
  border-radius:20px;
  overflow:hidden;
  transition:.3s ease;
}

.wr-float-btn.expanded{
  width:calc(var(--wr-size)*3);
  background:#0f0f0fd0;
  box-shadow:0 8px 20px rgba(10,15,30,.18);
}

.wr-btn-img{
  flex:0 0 var(--wr-size);
  height:var(--wr-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  overflow:hidden;
}

.wr-btn-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wr-btn-extra{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}

.wr-float-btn.expanded .wr-btn-extra{
  opacity:1;
  pointer-events:auto;
}

.wr-dragging{transition:none!important}

/* ================= MODAL ================= */
.wr-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  visibility:hidden;
  opacity:0;
  transition:.3s ease;
}

.wr-modal-overlay.active{
  visibility:visible;
  opacity:1;
}

.wr-modal{
  background:#fff;
  border-radius:16px;
  padding:24px;
  width:280px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  color:#000;
}

.wr-checkmark{
  background:url('https://ap1.respin123.cloud/misc/cekmark.webp') center/contain no-repeat;
  width:60px;
  height:60px;
  margin:0 auto;
  opacity:0;
  transition:1s ease;
}

.wr-percentage{
  font-size:24px;
  font-weight:bold;
  margin:12px 0;
  opacity:0;
  transition:1s ease;
}

.wr-visible{opacity:1!important}

/* ================= WINRATE CARD ================= */
.winratebruv{
  margin:8px;
  padding:10px;
  border:#ffffff5c 1px solid;
  background:#181818;
  border-radius:14px;
  color:#fff;
}

/* ================= AI BUTTONS ================= */
.wr-ai-buttons{
  margin-top:12px;
  display:flex;
  gap:8px;
}

.wr-ai-buttons a{
  flex:1;
  padding:8px;
  border-radius:8px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  background-size:200% 200%;
  animation:wrGradientMove 3s linear infinite;
  transition:.2s;
}

/* PRAGMATIC */
.wr-ai-buttons a:first-child{
  background-image:linear-gradient(
    270deg,
    var(--ai-prag-1),
    var(--ai-prag-2),
    var(--ai-prag-1)
  );
}

/* PG SOFT */
.wr-ai-buttons a:last-child{
  background-image:linear-gradient(
    270deg,
    var(--ai-pg-1),
    var(--ai-pg-2),
    var(--ai-pg-1)
  );
}

@keyframes wrGradientMove{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

.wr-ai-buttons a:hover{
  filter:brightness(1.15);
  transform:scale(1.03);
}