/* ==========================================================
   Fresh Sky Styles
   ========================================================== */

/* =========================
   1) RESET + BASE
   ========================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ width:100%; height:100%; }

html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-x:hidden;
  overflow-y:auto;

  /* iOS scroll lebih stabil */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;

  /* fallback height yang aman */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
}

img,svg{ display:block; max-width:100%; height:auto; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ border:0; background:none; padding:0; }
button:disabled{ pointer-events:none; }

a,button{ -webkit-tap-highlight-color:transparent; }
:focus{ outline:none; }
:focus-visible{ outline:none; }

::selection{ background:rgba(30,167,255,.22); color:#0c2340; }

/* =========================
   2) DESIGN TOKENS
   ========================= */
:root{
  /* SKY THEME */
  --skyA:#f7fcff; --skyB:#e9f6ff; --skyC:#d6efff;

  --ink:#0c2340;
  --muted:#5b7a95;

  --accent:#1ea7ff;
  --accentB:#2d7dff;
  --accent2:#79d5ff;

  /* SURFACE */
  --card1: rgba(255,255,255,.92);
  --card2: rgba(244,252,255,.78);
  --card3: rgba(233,246,255,.62);

  --strokeW: rgba(255,255,255,.86);
  --strokeB: rgba(30,167,255,.16);

  --shadowA: 0 26px 64px rgba(12,35,64,.12);
  --shadowB: 0 10px 22px rgba(12,35,64,.08);

  --radius: 26px;
  --radius2: 18px;

  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);

  --gap: clamp(10px, 2.4vw, 14px);
  --pad: clamp(16px, 3.4vw, 22px);

  --easeOut: cubic-bezier(.16,1,.30,1);
  --easeSoft: cubic-bezier(.22,1,.36,1);
  --easeInOut: cubic-bezier(.4,0,.2,1);

  --hRowA: rgba(30,167,255,.14);
  --hRowB: rgba(30,167,255,.08);

  /* BALLOON */
  --balloonRoundX: 1.09;
  --balloonRoundY: 0.965;

  --ringA: rgba(30,167,255,.24);
  --ringB: rgba(255,255,255,.26);

  /* PERF SWITCH (default desktop) */
  --blurOK: 1;          /* 1=aktif */
  --blendOK: 1;         /* 1=aktif */
  --shadowOK: 1;        /* 1=tebal */
  --filterOK: 1;        /* 1=full */
}

/* =========================
   3) PAGE BACKGROUND
   ========================= */
body{
  color:var(--ink);
  padding: calc(var(--pad) + var(--safeT)) var(--pad) calc(var(--pad) + var(--safeB));

  background:
    radial-gradient(1100px 780px at 15% 10%, rgba(30,167,255,.20) 0%, rgba(30,167,255,0) 60%),
    radial-gradient(900px 640px at 85% 5%, rgba(121,213,255,.20) 0%, rgba(121,213,255,0) 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(30,167,255,.13) 0%, rgba(30,167,255,0) 60%),
    linear-gradient(135deg, var(--skyA) 0%, var(--skyB) 45%, var(--skyC) 100%);
}

/* Overlay soft-light (desktop only, dimatikan oleh perf-guard) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(720px 520px at 50% 14%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(920px 700px at 50% 120%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 62%);

  opacity: calc(.9 * var(--blendOK));
  mix-blend-mode: soft-light;
}

/* =========================
   4) LAYOUT WRAPPERS
   ========================= */
.page{ width:100%; display:block; }

.container{
  width:min(560px,100%);
  margin:0 auto;
  text-align:center;

  padding:var(--pad);
  border-radius:var(--radius);
  position:relative;
  isolation:isolate;
  transform: translateZ(0);

  background:
    radial-gradient(900px 520px at 18% 10%, rgba(30,167,255,.14) 0%, rgba(30,167,255,0) 62%),
    radial-gradient(900px 560px at 86% 0%, rgba(121,213,255,.12) 0%, rgba(121,213,255,0) 60%),
    linear-gradient(180deg, var(--card1) 0%, var(--card2) 38%, var(--card3) 100%);

  border:1px solid var(--strokeW);
  box-shadow: var(--shadowA), var(--shadowB);

  backdrop-filter: blur(calc(14px * var(--blurOK))) saturate(140%);
  -webkit-backdrop-filter: blur(calc(14px * var(--blurOK))) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .container{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.container::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.96;

  box-shadow:
    0 0 0 1px rgba(30,167,255,.12) inset,
    0 0 0 12px rgba(255,255,255,.06) inset;

  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(30,167,255,.05) 55%, rgba(0,0,0,0) 100%);
}

@media (prefers-reduced-motion:no-preference){
  .container{ animation: cardEnter .32s var(--easeOut) both; }
  @keyframes cardEnter{
    from{ opacity:0; transform:translateY(10px) scale(.985); }
    to  { opacity:1; transform:translateY(0) scale(1); }
  }
}

/* =========================
   5) HERO HEADER
   ========================= */
.hero-header{
  position:relative;
  isolation:isolate;

  /* lebih rapat + balance */
  padding: clamp(10px, 2.1vw, 14px) clamp(12px, 2.8vw, 16px);
  margin-bottom: clamp(8px, 1.8vw, 12px);
  border-radius: var(--radius2);

  background:
    radial-gradient(120% 160% at 50% 0%,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.32) 46%,
      rgba(255,255,255,.14) 100%);

  border:1px solid var(--strokeB);
  box-shadow: 0 12px 22px rgba(12,35,64,.07), inset 0 1px 0 rgba(255,255,255,.58);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  /* gap lebih kecil */
  gap: clamp(4px, 1.2vw, 8px);

  text-align:center;

  backdrop-filter: blur(calc(10px * var(--blurOK)));
  -webkit-backdrop-filter: blur(calc(10px * var(--blurOK)));
}

.hero-header::before{
  content:"";
  position:absolute;
  inset:0;              
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(60% 110% at 50% 0%,
    rgba(30,167,255,.14) 0%,
    rgba(30,167,255,0) 70%);
  opacity:.95;
}

/* buang margin default h1 */
.hero-title{
  position:relative;
  z-index:1;

  margin:0;              
  font-weight:900;
  text-transform:uppercase;

  font-size: clamp(1.34rem, 4.0vw, 2.10rem);
  line-height:1.03;       
  letter-spacing: clamp(.25px, .18vw, .85px);

  background-image: linear-gradient(180deg,
    rgba(30,167,255,1) 0%,
    rgba(45,125,255,1) 55%,
    rgba(10,90,255,1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;

  text-shadow: 0 16px 34px rgba(30,167,255,.10), 0 8px 18px rgba(12,35,64,.05);
}

/* buang margin default p */
.hero-sub{
  position:relative;
  z-index:1;

  margin:0;                /* penting */
  max-width:min(520px, 96%);

  font-weight:700;
  font-size: clamp(.92rem, 2.5vw, 1.08rem);
  line-height:1.20;        /* lebih rapat */
  color: rgba(12,35,64,.82);

  text-shadow: 0 10px 20px rgba(12,35,64,.04);
}

.hero-sub b{
  font-weight:900;
  background-image: linear-gradient(180deg, rgba(30,167,255,1), rgba(45,125,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 12px 22px rgba(30,167,255,.08);

  white-space:nowrap;
}

@supports (text-wrap:balance){ .hero-sub{ text-wrap:balance; } }

/* extra small */
@media (max-width:360px){
  .hero-header{
    padding: 10px 12px;
    gap: 6px;
    margin-bottom: 10px;
  }
  .hero-title{
    font-size: clamp(1.22rem, 5.8vw, 1.72rem);
    letter-spacing: .55px;
  }
  .hero-sub{
    font-size: clamp(.90rem, 3.5vw, 1.02rem);
    line-height: 1.18;
    max-width: 98%;
  }
  .hero-sub b{ white-space:normal; }
}

/* =========================
   6) BALLOON STAGE
   ========================= */
.balloon-container{
  position:relative;

  /* lebih tinggi + tetap responsif (svh/dvh safe) */
  height: clamp(380px, 58vh, 520px);
  height: clamp(380px, 58svh, 520px);
  height: clamp(380px, 58dvh, 520px);

  /* ruang aman atas/bawah supaya tali balloon tidak kepotong */
  --padT: clamp(10px, 2.2vh, 18px);
  --padB: clamp(34px, 6vh, 56px);
  padding: var(--padT) 0 var(--padB);

  margin: 12px 0 14px;

  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action: pan-y;

  overflow:hidden;
  isolation:isolate;
  contain: layout paint;

  background: transparent;
  border:0;
  box-shadow:none;

  /* posisi lebih “naik” biar bawah nggak mentok */
  --bxL: 18%;
  --bxR: 82%;
  --bxM: 50%;

  --byTop:   clamp(76px, 22%, 112px);
  --byGreen: clamp(108px, 31%, 148px);
  --byBot:   clamp(214px, 60%, 300px);
}

.balloon-set{
  position:absolute;
  inset:0;
  z-index:1;
  transform: translateZ(0);
}

.balloon-item{
  position:absolute;
  width: clamp(142px, 26vw, 184px);
  height:auto;

  padding:0;
  border:0;
  background:transparent;

  cursor:pointer;
  outline:none;
  touch-action: manipulation;

  --hs: 1;

  transform: translate3d(-50%,-50%,0) scale(calc(var(--s,1) * var(--hs,1)));
  transition: transform .20s var(--easeOut), opacity .18s ease;

  backface-visibility:hidden;
  transform-style:preserve-3d;
  isolation:isolate;
}

@media (prefers-reduced-motion:no-preference){
  .balloon-item{
    animation: balloonBobPremium var(--dur,7.4s) var(--easeSoft) infinite;
    animation-delay: var(--delay,0s);
  }
}

.balloon-item svg{
  width:100%;
  height:auto;

  transform-origin:50% 50%;
  transform: scaleX(var(--balloonRoundX)) scaleY(var(--balloonRoundY));

  filter:
    saturate(calc(1.06 * var(--filterOK)))
    brightness(calc(1.035 * var(--filterOK)))
    contrast(1.02)
    drop-shadow(0 20px 28px rgba(12,35,64, calc(.16 * var(--shadowOK))))
    drop-shadow(0 10px 16px rgba(12,35,64, calc(.10 * var(--shadowOK))));

  transition: filter .18s var(--easeInOut), transform .18s var(--easeInOut);
}

/* Tanda tanya */
.balloon-q{
  position:absolute;
  top:46%;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: clamp(44px, 6vw, 58px);
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 18px rgba(12,35,64,.18), 0 0 16px rgba(255,255,255,.28);
  pointer-events:none;
}

/* Hover hanya jika benar-benar hover */
@media (hover:hover){
  .balloon-item:hover{ --hs: 1.06; }
  .balloon-item:hover svg{
    filter:
      saturate(1.075)
      brightness(1.045)
      contrast(1.02)
      drop-shadow(0 26px 40px rgba(12,35,64,.18))
      drop-shadow(0 12px 18px rgba(12,35,64,.11));
  }
}
.balloon-item:active{ --hs: .985; }

.balloon-item:focus-visible svg{
  filter:
    saturate(1.06)
    brightness(1.045)
    contrast(1.02)
    drop-shadow(0 0 18px var(--ringA))
    drop-shadow(0 0 6px var(--ringB))
    drop-shadow(0 26px 40px rgba(12,35,64,.16))
    drop-shadow(0 12px 18px rgba(12,35,64,.10));
}

/* Positions */
.balloon-item.b1{ left:var(--bxL); top:var(--byTop);   --s:1.05; --dur:6.9s; --delay:-1.1s; --bobX1:6px; --bobX2:-4px; --bobY1:-11px; --bobY2:-5px; --bobR0:-1.1deg; --bobR1:1.4deg; --bobR2:-.3deg; }
.balloon-item.b2{ left:var(--bxR); top:var(--byTop);   --s:1.00; --dur:7.6s; --delay:-2.4s; --bobX1:7px; --bobX2:-5px; --bobY1:-12px; --bobY2:-6px; --bobR0:-1.1deg; --bobR1:1.6deg; --bobR2:-.35deg; }
.balloon-item.b3{ left:var(--bxL); top:var(--byBot);   --s:.96;  --dur:7.9s; --delay:-3.0s; --bobX1:5px; --bobX2:-4px; --bobY1:-11px; --bobY2:-5px; --bobR0:-1.0deg; --bobR1:1.5deg; --bobR2:-.3deg; }
.balloon-item.b4{ left:var(--bxR); top:var(--byBot);   --s:.94;  --dur:7.2s; --delay:-1.8s; --bobX1:6px; --bobX2:-4px; --bobY1:-10px; --bobY2:-5px; --bobR0:-1.0deg; --bobR1:1.35deg; --bobR2:-.3deg; }
.balloon-item.b5{ left:var(--bxM); top:var(--byBot);   --s:.98;  --dur:7.4s; --delay:-2.1s; --bobX1:6px; --bobX2:-4px; --bobY1:-11px; --bobY2:-5px; --bobR0:-1.0deg; --bobR1:1.4deg; --bobR2:-.3deg; }
.balloon-item.b6{ left:var(--bxM); top:var(--byGreen); --s:.98;  --dur:7.5s; --delay:-2.6s; --bobX1:6px; --bobX2:-4px; --bobY1:-11px; --bobY2:-5px; --bobR0:-1.0deg; --bobR1:1.5deg; --bobR2:-.35deg; }

/* LOWER STAGE: balon turun sedikit (biar nggak nempel ke header) */
.balloon-container.is-lower{
  /* turun 12–22px rata-rata (tergantung device) */
  --byTop:   clamp(92px, 26%, 128px);
  --byGreen: clamp(132px, 36%, 166px);
  --byBot:   clamp(252px, 70%, 346px);
}

/* Small phone */
@media (max-width:390px){
  .balloon-container.is-lower{
    --byTop:   clamp(98px, 28%, 136px);
    --byGreen: clamp(142px, 38%, 178px);
    --byBot:   clamp(262px, 72%, 360px);
  }
}

/* Landscape / short height */
@media (max-height: 640px){
  .balloon-container.is-lower{
    --byTop:   clamp(78px, 24%, 112px);
    --byGreen: clamp(112px, 34%, 148px);
    --byBot:   clamp(216px, 66%, 300px);
  }
}

/* Transform-only keyframes (paling aman untuk perf) */
@keyframes balloonBobPremium{
  0%,100%{
    transform: translate3d(-50%,-50%,0) translateX(0) translateY(0)
      rotate(var(--bobR0)) scale(calc(var(--s,1) * var(--hs,1)));
  }
  32%{
    transform: translate3d(-50%,-50%,0) translateX(var(--bobX1)) translateY(var(--bobY1))
      rotate(var(--bobR1)) scale(calc(var(--s,1) * var(--hs,1)));
  }
  68%{
    transform: translate3d(-50%,-50%,0) translateX(var(--bobX2)) translateY(var(--bobY2))
      rotate(var(--bobR2)) scale(calc(var(--s,1) * var(--hs,1)));
  }
}

/* Pick mode glow */
.balloon-set.pick-mode .balloon-item svg{
  filter:
    saturate(1.06)
    brightness(1.05)
    contrast(1.02)
    drop-shadow(0 0 18px rgba(30,167,255,.18))
    drop-shadow(0 20px 28px rgba(12,35,64,.10));
}

/* Pop animation */
.balloon-item.is-pop{
  pointer-events:none;
  animation: popBalloon .72s var(--easeOut) forwards !important;
}
@keyframes popBalloon{
  0%  { transform: translate3d(-50%,-50%,0) scale(var(--s,1)); opacity:1; }
  60% { transform: translate3d(-50%,-50%,0) scale(calc(var(--s,1)*1.28)) rotate(6deg); opacity:.88; }
  100%{ transform: translate3d(-50%,-50%,0) scale(0) rotate(14deg); opacity:0; }
}

/* Prize overlay */
.prize-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight:900;
  opacity:0;
  pointer-events:none;
  color:var(--ink);
  text-shadow: 0 14px 34px rgba(12,35,64,.22);
}
.prize-overlay.show{ animation: prizeShow 1s var(--easeOut) forwards; }
@keyframes prizeShow{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.5)}
  50%{opacity:1; transform: translate(-50%,-50%) scale(1.14)}
  100%{opacity:1; transform: translate(-50%,-50%) scale(1)}
}

/* Small phone tuning */
@media (max-width:390px){
  .balloon-container{
    height: clamp(400px, 60svh, 560px);
    height: clamp(400px, 60dvh, 560px);

    --padT: clamp(10px, 2.2vh, 16px);
    --padB: clamp(36px, 6.6vh, 60px);

    --bxL: 20%; --bxR: 80%;
    --byTop:   clamp(82px, 24%, 118px);
    --byGreen: clamp(116px, 34%, 156px);
    --byBot:   clamp(226px, 62%, 312px);
  }
}

/* Landscape / short height */
@media (max-height: 640px){
  .balloon-container{
    height: clamp(330px, 62svh, 440px);
    height: clamp(330px, 62dvh, 440px);

    --padT: clamp(8px, 2vh, 14px);
    --padB: clamp(28px, 5.2vh, 44px);

    --byTop:   clamp(70px, 22%, 100px);
    --byGreen: clamp(98px, 31%, 132px);
    --byBot:   clamp(198px, 60%, 278px);
  }
}

/* =========================
   7) PLAY CARD (chips + UID)
   ========================= */
.play-card{ display:grid; gap:12px; margin-top:10px; }

.chip-card,
.uid-card{
  border-radius:18px;
  padding:12px;

  background:
    radial-gradient(120% 160% at 50% 0%,
      rgba(255,255,255,.66) 0%,
      rgba(255,255,255,.26) 40%,
      rgba(255,255,255,.12) 100%);

  border:1px solid rgba(30,167,255,.18);
  box-shadow: 0 14px 26px rgba(12,35,64,.08), inset 0 1px 0 rgba(255,255,255,.58);

  backdrop-filter: blur(calc(10px * var(--blurOK)));
  -webkit-backdrop-filter: blur(calc(10px * var(--blurOK)));
}

.chip-card__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:2px 6px 8px;
}
.chip-card__title{ font-weight:900; font-size:.95rem; letter-spacing:.55px; color:rgba(12,35,64,.85); }
.chip-card__sub{ font-weight:800; font-size:.78rem; opacity:.72; color:rgba(12,35,64,.74); }

.bet-chips{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  padding:8px 6px 4px;
}
.bet-chip{
  position:relative;
  width:100%;
  min-height:54px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(30,167,255,.22);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  background:
    radial-gradient(115% 130% at 30% 12%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.62) 38%,
      rgba(255,255,255,.18) 100%),
    linear-gradient(180deg, rgba(30,167,255,.10), rgba(10,90,255,.06));

  box-shadow: 0 12px 22px rgba(12,35,64,.12), inset 0 1px 0 rgba(255,255,255,.72);
  cursor:pointer;
  user-select:none;

  transition: transform .16s var(--easeOut), box-shadow .16s var(--easeOut), border-color .16s var(--easeOut), filter .16s var(--easeOut);
}

.bet-chip .chip-label{
  font-weight:900;
  letter-spacing:.2px;
  font-size:.96rem;
  line-height:1.05;

  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;

  background-image: linear-gradient(180deg, rgba(30,167,255,1) 0%, rgba(45,125,255,1) 55%, rgba(10,90,255,1) 100%);
}

.bet-chip .chip-sub{
  font-weight:800;
  font-size:.72rem;
  opacity:.74;
  color:rgba(12,35,64,.86);
}

@media (hover:hover){
  .bet-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(30,167,255,.38);
    box-shadow: 0 16px 26px rgba(12,35,64,.14), 0 0 0 3px rgba(30,167,255,.10), inset 0 1px 0 rgba(255,255,255,.78);
  }
}

.bet-chip:active{ transform: translateY(0) scale(.985); filter:saturate(1.05); }

.bet-chip.is-active,
.bet-chip[aria-pressed="true"]{
  border-color: rgba(30,167,255,.60);
  background:
    radial-gradient(120% 140% at 30% 10%,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.66) 34%,
      rgba(255,255,255,.22) 100%),
    linear-gradient(180deg, rgba(30,167,255,.18), rgba(10,90,255,.10));

  box-shadow: 0 18px 30px rgba(12,35,64,.18), 0 0 0 4px rgba(30,167,255,.16), inset 0 1px 0 rgba(255,255,255,.88);
}

@media (max-width:420px){
  .bet-chips{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bet-chip{ min-height:52px; }
}

/* UID */
.uid-head{ display:flex; justify-content:center; text-align:center; margin-bottom:10px; }
.uid-title{ font-size:1.02rem; font-weight:900; color:rgba(12,35,64,.92); }
.uid-controls{ display:grid; grid-template-columns:1fr; gap:10px; }

#userId{
  width:100%;
  padding:14px 14px;
  border:1px solid rgba(30,167,255,.18);
  border-radius:16px;
  font-size:1.05rem;
  text-align:center;

  background: rgba(255,255,255,.94);
  color:var(--ink);

  outline:none;
  box-shadow: 0 10px 18px rgba(12,35,64,.08);
  transition: box-shadow .16s var(--easeOut), border-color .16s var(--easeOut), transform .16s var(--easeOut);

  /* iOS input styling guard */
  -webkit-appearance:none;
  appearance:none;
}

#userId:focus-visible{
  border-color: rgba(30,167,255,.40);
  box-shadow:
    0 10px 18px rgba(12,35,64,.08),
    0 0 0 4px rgba(30,167,255,.16),
    0 0 0 1px rgba(255,255,255,.88) inset;
}

#popButton{
  width:100%;
  padding:16px 18px;
  font-size: clamp(1.05rem, 3.1vw, 1.30rem);
  font-weight:900;
  border-radius:16px;

  background: linear-gradient(180deg, rgba(30,167,255,1), rgba(45,125,255,1));
  color:#fff;

  cursor:pointer;
  position:relative;
  overflow:hidden;

  box-shadow: 0 16px 30px rgba(30,167,255,.22), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .14s var(--easeOut), filter .14s var(--easeOut), box-shadow .14s var(--easeOut);

  outline:none;
  -webkit-appearance:none;
  appearance:none;
}

#popButton::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 62%);
  opacity:.88;
}

/* shimmer hemat */
#popButton::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:55%;
  height:180%;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 32%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,.18) 68%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-14deg);
  opacity:.78;
  animation: shimmerMove 3.1s ease-in-out infinite;
}

@keyframes shimmerMove{
  0%{ transform:translateX(-150%) skewX(-14deg); opacity:.30; }
  45%{ opacity:.78; }
  100%{ transform:translateX(340%) skewX(-14deg); opacity:.40; }
}

#popButton:hover{ filter:brightness(1.03); box-shadow: 0 18px 34px rgba(30,167,255,.24), inset 0 1px 0 rgba(255,255,255,.24); }
#popButton:active{ transform: translateY(1px) scale(.992); }
#popButton:disabled{ opacity:.62; cursor:not-allowed; filter:grayscale(.08); box-shadow: 0 10px 18px rgba(12,35,64,.10); }
#popButton:disabled::before{ display:none; }

/* Below info */
.below-info{ margin-top:12px; display:grid; gap:10px; }

.jackpot-wrap{
  padding:12px;
  border-radius:18px;
  background: rgba(255,255,255,.66);
  border:1px solid rgba(30,167,255,.14);
  box-shadow: 0 14px 26px rgba(12,35,64,.06);
  text-align:center;
}

.jackpot-title{ font-weight:900; font-size:.92rem; color:rgba(12,35,64,.62); margin-bottom:4px; }

#jackpot{
  font-size: clamp(1.65rem, 3.8vw, 2.05rem);
  font-weight:900;

  background: linear-gradient(180deg, #5ddcff 0%, var(--accent) 48%, var(--accentB) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow: 0 12px 24px rgba(30,167,255,.14);
}

.update-time{ font-size:.90rem; color:var(--muted); margin-top:4px; }

.status-text{
  min-height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  line-height:1.25;
  text-align:center;
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;

  background: rgba(255,255,255,.74);
  border:1px solid rgba(30,167,255,.14);
  box-shadow: 0 10px 18px rgba(12,35,64,.06);

  font-size:.90rem;
  color: rgba(12,35,64,.84);
  font-weight:900;

  backdrop-filter: blur(calc(10px * var(--blurOK)));
  -webkit-backdrop-filter: blur(calc(10px * var(--blurOK)));
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(30,167,255,.92);
  box-shadow:0 0 0 4px rgba(30,167,255,.12);
}

.status-used .status-dot{
  background:rgba(255,159,26,.95);
  box-shadow:0 0 0 4px rgba(255,159,26,.12);
}

.online-num{ font-weight:900; color:rgba(12,35,64,.95); }

/* =========================
   8) HISTORY TABLE
   ========================= */
.history{
  --rowH: 44px;
  --noW: 56px;
  --padX: 12px;

  width:100%;
  border-collapse: collapse;
  margin-top:14px;

  background: rgba(255,255,255,.62);
  border-radius:18px;
  overflow:hidden;

  border:1px solid rgba(30,167,255,.14);
  box-shadow: 0 14px 26px rgba(12,35,64,.06);

  transform: translateZ(0);
}

.history thead{
  display:table;
  width:100%;
  table-layout:fixed;
  background: rgba(30,167,255,.10);
  border-bottom:1px solid rgba(30,167,255,.12);
}

.history thead th{
  padding:12px var(--padX);
  font-weight:900;
  font-size:.90rem;
  letter-spacing:.30px;
  color: rgba(12,35,64,.78);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.history thead th:first-child{
  width:var(--noW);
  text-align:left;
  padding-left:14px;
  padding-right:6px;
}

.history thead th:nth-child(2){
  text-align:left;
  padding-left:8px;
}

.history tbody{
  display:block;
  width:100%;
  max-height: calc(var(--rowH) * 5);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: rgba(30,167,255,.35) transparent;

  background: rgba(255,255,255,.30);
}

.history tbody::-webkit-scrollbar{ width:8px; }
.history tbody::-webkit-scrollbar-thumb{ background: rgba(30,167,255,.25); border-radius:999px; }
.history tbody::-webkit-scrollbar-track{ background: transparent; }

.history tr{ display:table; width:100%; table-layout:fixed; }

.history td{
  padding:12px var(--padX);
  text-align:center;
  font-weight:800;
  font-size:.92rem;
  color: rgba(12,35,64,.88);
  vertical-align:middle;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.history tbody td:first-child{
  width:var(--noW);
  text-align:left;
  padding-left:14px;
  padding-right:6px;
  font-weight:900;
  color: rgba(12,35,64,.72);
}

.history tbody tr:nth-child(odd){ background: linear-gradient(90deg, var(--hRowA), rgba(255,255,255,0)); }
.history tbody tr:nth-child(even){ background: linear-gradient(90deg, var(--hRowB), rgba(255,255,255,0)); }

@media (hover:hover){
  .history tbody tr{ transition: background .14s var(--easeOut); }
  .history tbody tr:hover{ background: rgba(30,167,255,.10); }
}

@media (max-width:420px){
  .history{ --noW: 46px; --padX: 10px; }
  .history thead th{ font-size:.86rem; padding:11px var(--padX); }
  .history td{ font-size:.90rem; padding:11px var(--padX); }
  .history thead th:first-child,
  .history tbody td:first-child{ padding-left:12px; }
  .history thead th:nth-child(2){ padding-left:6px; }
}

/* user + time under user */
.history td:nth-child(2){ text-align:left; }

.h-userbtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;

  border:0;
  background:transparent;
  padding:0;
  margin:0;

  text-align:left;
  color:inherit;
  font:inherit;
  cursor:default;
}

.h-userrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1.1;
  font-weight:900;
}

.h-userbadge{
  font-size:.68rem;
  font-weight:900;
  padding:3px 8px;
  border-radius:999px;

  background: rgba(30,167,255,.12);
  border:1px solid rgba(30,167,255,.22);
  color: rgba(12,35,64,.85);
  box-shadow: 0 10px 22px rgba(30,167,255,.10);
}

.h-time{
  font-size:.76rem;
  opacity:.68;
  line-height:1.15;
  white-space:nowrap;
}

.h-userbtn.is-me{ cursor:pointer; }
.h-userbtn.is-me .h-userrow{
  color: rgba(12,35,64,.98);
  text-shadow: 0 10px 24px rgba(30,167,255,.14);
}

/* =========================
   9) PERFORMANCE GUARD
   ========================= */
@media (pointer:coarse), (max-width:520px), (update:slow){
  :root{
    --blurOK: 0;
    --blendOK: 0;
    --shadowOK: .72;
    --filterOK: .85;
  }

  body::before{ display:none; }
  html{ scroll-behavior:auto; }

  .container{ box-shadow: 0 18px 44px rgba(12,35,64,.10), 0 8px 18px rgba(12,35,64,.06); }

  .balloon-item svg{
    filter:
      saturate(1.02)
      brightness(1.02)
      contrast(1.02)
      drop-shadow(0 16px 22px rgba(12,35,64,.12));
    transition: transform .18s var(--easeInOut);
  }

  /* overlay modal juga diringankan di HP */
  .result-pop{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .container{ animation:none !important; }
  .balloon-item{ animation:none !important; }
  #popButton::before{ animation:none !important; }
}

/* ==========================================================
   10) RESULT POPUP (Premium)
   ========================================================== */
html.modal-open,
body.modal-open{ overflow:hidden !important; }

.result-pop{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: calc(16px + var(--safeT)) 14px calc(16px + var(--safeB));

  overflow:hidden;
  overscroll-behavior:none;

  background:
    radial-gradient(1200px 620px at 50% 0%,
      rgba(30,167,255,0.18) 0%,
      rgba(30,167,255,0.00) 60%),
    radial-gradient(900px 500px at 20% 110%,
      rgba(255,180,35,0.10) 0%,
      rgba(255,180,35,0.00) 55%),
    rgba(12,35,64,0.34);

  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);

  opacity:0;
  pointer-events:none;
  transition: opacity .22s var(--easeSoft);
}

.result-pop.show{
  opacity:1;
  pointer-events:auto;
}

.result-pop::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(80% 70% at 50% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.10) 70%,
      rgba(0,0,0,0.20) 100%);
  opacity:.95;
}

.result-card{
  width:min(392px, 92vw);
  max-height: calc(100dvh - (32px + var(--safeT) + var(--safeB)));

  border-radius:22px;
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  scrollbar-width:none;
  -ms-overflow-style:none;

  background:
    radial-gradient(940px 480px at 50% -14%, rgba(30,167,255,.18) 0%, rgba(30,167,255,0) 60%),
    radial-gradient(680px 420px at 50% 120%, rgba(255,191,47,0.08) 0%, rgba(255,191,47,0.00) 60%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(236,248,255,.95) 100%);

  border:1px solid rgba(255,255,255,.86);
  box-shadow:
    0 42px 98px rgba(12,35,64,0.26),
    0 0 0 1px rgba(30,167,255,.14) inset,
    0 18px 38px rgba(30,167,255,.10);

  transform: translateY(14px) scale(.985);
  opacity:0;
}

.result-pop.show .result-card{
  animation: resultIn .34s var(--easeOut) forwards;
}

@keyframes resultIn{ to{ transform: translateY(0) scale(1); opacity:1; } }

.result-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(100% 80% at 0% 100%, rgba(255,191,47,0.12) 0%, rgba(255,191,47,0) 60%);
  opacity:.92;
}

.result-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:22px;
  box-shadow:
    0 0 0 1px rgba(30,167,255,0.14) inset,
    0 0 0 12px rgba(255,255,255,0.06) inset;
  opacity:.95;
}

.result-top{
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:9px;
  padding:14px 16px 0;
}

.result-balloon-svg{
  width:74px;
  height:92px;
  filter:
    drop-shadow(0 18px 30px rgba(12,35,64,0.18))
    drop-shadow(0 12px 18px rgba(30,167,255,0.10));
  transform: translateZ(0);
}
.result-balloon-svg svg{ width:100%; height:100%; display:block; }

@media (prefers-reduced-motion:no-preference){
  .result-pop.show .result-balloon-svg{
    animation: modalBalloonFloat 1.05s var(--easeOut) both,
               modalBalloonIdle 3.2s ease-in-out infinite 1.05s;
  }
  @keyframes modalBalloonFloat{
    from{ transform: translateY(12px) scale(.94); opacity:0; }
    to  { transform: translateY(0) scale(1); opacity:1; }
  }
  @keyframes modalBalloonIdle{
    0%,100%{ transform: translateY(0) rotate(-1.2deg); }
    50%    { transform: translateY(-6px) rotate(1.2deg); }
  }
}

.result-pill{
  position:relative;
  padding:8px 13px;
  border-radius:999px;

  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(30,167,255,1), rgba(45,125,255,1));

  color:#fff;
  font-weight:900;
  font-size:.90rem;

  border:1px solid rgba(255,255,255,0.34);
  box-shadow:
    0 16px 30px rgba(30,167,255,.22),
    0 0 0 1px rgba(255,255,255,0.14) inset;

  opacity:0;
  transform: translateY(6px);
  overflow:hidden;
}

.result-pill::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:55%;
  height:180%;
  pointer-events:none;

  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.10),
    rgba(255,255,255,.32),
    rgba(255,255,255,.10),
    rgba(255,255,255,0));

  transform: skewX(-14deg);
  opacity:.85;
}

.result-pop.show .result-pill{
  animation: pillIn .34s var(--easeOut) forwards;
  animation-delay: .08s;
}
.result-pop.show .result-pill::before{ animation: pillShine 2.6s ease-in-out infinite; }

@keyframes pillIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes pillShine{
  0%   { transform: translateX(-150%) skewX(-14deg); opacity:.22; }
  55%  { opacity:.75; }
  100% { transform: translateX(360%) skewX(-14deg); opacity:.34; }
}

.result-body{
  position:relative;
  z-index:1;
  padding:10px 16px 10px;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.result-label{
  text-align:center;
  font-weight:900;
  font-size:.80rem;
  letter-spacing:.28px;
  color: rgba(12,35,64,.62);
  margin-top:6px;
}

/* PRIZE GOLD */
.result-prize{
  --g1:#ffe3a0;
  --g2:#ffcf6a;
  --g3:#ffb62a;
  --g4:#ff8f12;

  text-align:center;
  margin:8px 0 10px;
  line-height:1.02;
  font-weight:900;

  font-size: clamp(1.92rem, 6.2vw, 2.26rem);
  letter-spacing:.35px;

  background-image:
    linear-gradient(180deg, var(--g1) 0%, var(--g2) 24%, var(--g3) 56%, var(--g4) 100%),
    repeating-linear-gradient(110deg,
      rgba(255,233,175,0) 0 14px,
      rgba(255,233,175,.16) 16px,
      rgba(255,233,175,0) 26px);

  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, -65% 0;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow: 0 18px 34px rgba(255,191,47,.16);

  filter:
    drop-shadow(0 14px 26px rgba(255,166,0,.14))
    drop-shadow(0 10px 18px rgba(12,35,64,.06));

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (prefers-reduced-motion:no-preference){
  .result-pop.show .result-prize{ animation: prizeGoldFlow 2.45s ease-in-out infinite; }
}
@keyframes prizeGoldFlow{
  0%   { background-position: 0 0, -80% 0; }
  50%  { background-position: 0 0,  40% 0; }
  100% { background-position: 0 0, 130% 0; }
}

.result-prize.is-zero{
  background-image: linear-gradient(180deg, rgba(12,35,64,.35) 0%, rgba(12,35,64,.82) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:none;
}

.result-meta{ display:grid; gap:9px; margin-top:4px; }

.meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 12px;
  border-radius:14px;

  background:
    radial-gradient(140% 120% at 30% 0%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.62) 55%,
      rgba(255,255,255,.58) 100%);

  border:1px solid rgba(30,167,255,.16);
  box-shadow:
    0 12px 26px rgba(12,35,64,.06),
    0 0 0 1px rgba(255,255,255,.45) inset;

  overflow:hidden;
}

.meta-k{ font-weight:900; font-size:.80rem; color: rgba(12,35,64,.56); }
.meta-v{
  font-weight:900;
  font-size:.94rem;
  color: rgba(12,35,64,.94);
  max-width:62%;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.result-actions{
  position:relative;
  z-index:1;

  padding:12px 16px 14px;

  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.result-btn{
  width:100%;
  min-height:50px;

  border:none;
  border-radius:16px;
  padding:14px 16px;

  font-weight:900;
  font-size:1.02rem;

  cursor:pointer;
  color:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  position:relative;
  overflow:hidden;

  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(30,167,255,1), rgba(45,125,255,1));

  box-shadow:
    0 18px 34px rgba(30,167,255,.22),
    0 0 0 1px rgba(255,255,255,0.18) inset;

  transition: transform .16s var(--easeSoft), filter .16s var(--easeSoft), box-shadow .16s var(--easeSoft);
  outline:none;

  -webkit-appearance:none;
  appearance:none;
}

.result-btn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:55%;
  height:180%;
  pointer-events:none;

  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.14),
    rgba(255,255,255,.44),
    rgba(255,255,255,.14),
    rgba(255,255,255,0));

  transform: skewX(-14deg);
  animation: btnShimmer 2.35s ease-in-out infinite;
  opacity:.85;
}

@keyframes btnShimmer{
  0%   { transform: translateX(-150%) skewX(-14deg); opacity:.34; }
  60%  { opacity:.90; }
  100% { transform: translateX(360%) skewX(-14deg); opacity:.48; }
}

.result-btn:hover{
  filter: brightness(1.03);
  box-shadow:
    0 22px 42px rgba(30,167,255,.24),
    0 0 0 1px rgba(255,255,255,0.18) inset;
}
.result-btn:active{ transform: translateY(1px) scale(.995); }
.result-btn:focus-visible{
  box-shadow:
    0 22px 42px rgba(30,167,255,.24),
    0 0 0 4px rgba(30,167,255,0.18),
    0 0 0 1px rgba(255,255,255,0.90) inset;
}
.result-btn:disabled{ opacity:.62; cursor:not-allowed; }
.result-btn:disabled::before{ display:none; }

.result-btn.btn-share{
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(241,248,255,0.95));

  color: rgba(12,35,64,.92);
  border: 1px solid rgba(30,167,255,.18);

  box-shadow:
    0 16px 28px rgba(12,35,64,.10),
    0 0 0 1px rgba(255,255,255,.74) inset;
}
.result-btn.btn-share::before{ display:none !important; }
.result-btn.btn-share:hover{
  filter:none;
  box-shadow:
    0 18px 30px rgba(12,35,64,.12),
    0 0 0 1px rgba(255,255,255,.78) inset;
}

@media (prefers-reduced-motion:reduce){
  .result-pop{ transition:none !important; }
  .result-pop.show .result-card{ animation:none !important; opacity:1; transform:none; }
  .result-btn::before{ animation:none !important; }
  .result-pop.show .result-balloon-svg{ animation:none !important; }
  .result-pop.show .result-prize{ animation:none !important; }
}

@media (max-width:420px){
  .result-pop{ padding: calc(14px + var(--safeT)) 12px calc(14px + var(--safeB)); }
  .result-card{ width: min(344px, 92vw); border-radius:20px; }
  .result-top{ padding:12px 14px 0; gap:8px; }
  .result-balloon-svg{ width:66px; height:82px; }
  .result-pill{ font-size:.86rem; padding:7px 12px; }
  .result-body{ padding:9px 14px 10px; }
  .result-prize{ font-size: clamp(1.72rem, 7vw, 2.02rem); margin:7px 0 9px; }
  .meta-row{ padding:9px 11px; border-radius:13px; }
  .result-actions{ padding:10px 14px 13px; gap:9px; }
  .result-btn{ min-height:46px; border-radius:14px; padding:12px 14px; font-size:1rem; }
}

@media (max-height:720px){
  .result-top{ padding-top:12px; }
  .result-pill{ padding:7px 12px; }
  .result-actions{ padding-bottom:12px; }
  .meta-row{ padding:9px 11px; }
}
@media (max-height:640px){
  .result-balloon-svg{ width:60px; height:74px; }
  .result-prize{ margin:6px 0 8px; }
  .result-meta{ gap:8px; }
  .result-actions{ gap:9px; }
}
@media (max-height:560px){
  .result-balloon-svg{ display:none; }
  .result-top{ gap:7px; }
}

/* ==========================================================
   11) CLAIM LOADING OVERLAY
   ========================================================== */
.claim-loading{
  position:fixed;
  inset:0;
  z-index:100000;

  display:grid;
  place-items:center;
  padding:18px;

  background: rgba(12,35,64,0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity:0;
  pointer-events:none;
  transition: opacity .22s var(--easeSoft);
}

.claim-loading.show{
  opacity:1;
  pointer-events:auto;
}

.claim-loading-card{
  width:min(360px, 92vw);
  border-radius:22px;
  padding:18px 16px;

  background:
    radial-gradient(900px 420px at 50% -10%, rgba(30,167,255,.16) 0%, rgba(30,167,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(233,246,255,.92) 100%);

  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 34px 88px rgba(12,35,64,.22),
    0 0 0 1px rgba(30,167,255,.12) inset;

  position:relative;
  overflow:hidden;
  text-align:center;

  transform: translateY(10px) scale(.98);
  animation: claimCardIn .28s var(--easeOut) forwards;
}

@keyframes claimCardIn{ to{ transform: translateY(0) scale(1); } }

.claim-loading-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 72% at 50% 0%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 60%);
  opacity:.92;
}

.claim-spinner{
  width:46px;
  height:46px;
  border-radius:999px;
  margin:6px auto 10px;

  border:4px solid rgba(30,167,255,.18);
  border-top-color: rgba(30,167,255,1);

  box-shadow: 0 16px 30px rgba(30,167,255,.16);
  animation: claimSpin .9s linear infinite;
}

@keyframes claimSpin{ to{ transform: rotate(360deg); } }

.claim-title{
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:.2px;
  color:var(--ink);
}

.claim-sub{
  margin-top:6px;
  font-size:.92rem;
  color:var(--muted);
  line-height:1.35;
}

.claim-dots{
  display:inline-flex;
  gap:4px;
  margin-left:4px;
  vertical-align:middle;
}
.claim-dots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(30,167,255,.70);
  opacity:.25;
  animation: dotBlink 1.1s ease-in-out infinite;
}
.claim-dots i:nth-child(2){ animation-delay:.12s; }
.claim-dots i:nth-child(3){ animation-delay:.24s; }

@keyframes dotBlink{
  0%,100%{ opacity:.22; transform: translateY(0); }
  50%{ opacity:.95; transform: translateY(-2px); }
}

@media (prefers-reduced-motion:reduce){
  .claim-spinner{ animation:none !important; }
  .claim-dots i{ animation:none !important; opacity:.7; }
}