/* ============================================================
   WS SMS TASK — "Midnight Vault" game UI
   ============================================================ */

:root{
  --bg-0:#06051A;
  --bg-1:#0C0A24;
  --bg-2:#141033;
  --bg-3:#1C1645;

  --amber:#FFB020;
  --amber-2:#FF8A00;
  --gold:#F7C948;
  --gold-l:#FFE9A8;
  --gold-d:#A96B08;

  --emerald:#3BE07F;
  --emerald-d:#0E8B46;
  --orange:#FF8A3D;
  --orange-d:#B04A00;
  --rose:#FF4D6D;
  --rose-d:#A3122F;
  --violet:#8B6CFF;
  --cyan:#3FE0FF;

  --ink:#FFF9EE;
  --muted:#A79DC7;
  --muted-2:#6C6390;

  --line:rgba(255,190,90,.16);
  --line-2:rgba(255,255,255,.07);

  --card:linear-gradient(180deg, rgba(38,29,80,.92) 0%, rgba(20,16,51,.94) 100%);
  --card-2:linear-gradient(180deg, rgba(46,35,96,.9) 0%, rgba(23,18,58,.95) 100%);

  --shadow-card:0 18px 40px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  --radius:22px;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background:#06051A;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.app{
  position:relative;
  width:100%;
  max-width:470px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(255,150,30,.20) 0%, rgba(255,120,0,.06) 38%, transparent 68%),
    radial-gradient(90% 45% at 100% 12%, rgba(139,108,255,.16) 0%, transparent 62%),
    radial-gradient(80% 40% at 0% 30%, rgba(63,224,255,.09) 0%, transparent 60%),
    linear-gradient(180deg, #0A0822 0%, #06051A 55%, #08061C 100%);
  background-attachment:fixed;
  overflow:hidden;
}

#sparkles{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.55;
}

/* ===================== RAYS ===================== */
.rays{
  position:absolute; left:50%; top:50%;
  width:190%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,178,50,.14) 0deg 4deg,
    rgba(255,178,50,0) 4deg 14deg);
  -webkit-mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 30%, transparent 66%);
  mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 30%, transparent 66%);
  animation:raySpin 52s linear infinite;
  pointer-events:none;
  z-index:0;
}
.rays.small{ width:150%; opacity:.75; }
.rays.big{ width:230%; opacity:.9; }
@keyframes raySpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ===================== TOP BAR ===================== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:linear-gradient(180deg, rgba(8,6,26,.96) 0%, rgba(8,6,26,.72) 70%, transparent 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  font-family:'Fredoka'; font-weight:700; font-size:14px; letter-spacing:.5px;
  color:#2A1500;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 45%,#FF8A00);
  box-shadow:0 4px 0 #8F4A00, 0 8px 18px rgba(255,150,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand-txt b{ font-family:'Fredoka'; font-size:16px; font-weight:600; letter-spacing:.3px; }
.brand-txt span{ font-size:8.5px; font-weight:800; letter-spacing:2px; color:var(--amber); opacity:.85; }

.wallet-chip{
  display:flex; align-items:center; gap:8px;
  padding:7px 12px 7px 9px;
  border-radius:16px;
  border:1px solid rgba(255,190,90,.28);
  background:linear-gradient(180deg, rgba(255,176,32,.16), rgba(255,138,0,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -8px rgba(255,150,0,.5);
  color:var(--ink); cursor:pointer;
  transition:transform .12s;
}
.wallet-chip:active{ transform:scale(.96); }
.wc-ico{ font-size:16px; }
.wc-col{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.wc-col b{ font-family:'Fredoka'; font-size:14px; font-weight:600; color:var(--gold-l); }
.wc-col i{ font-style:normal; font-size:8.5px; color:var(--muted); letter-spacing:.2px; }

/* ===================== SCREENS ===================== */
#screens{ position:relative; z-index:1; }
.screen{
  display:none;
  padding:0 16px calc(112px + var(--safe-b));
  animation:screenIn .38s cubic-bezier(.22,1,.36,1);
}
.screen.active{ display:block; }
@keyframes screenIn{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:none; }
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  margin:2px -16px 0;
  padding:14px 16px 18px;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; left:50%; top:36%; width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,170,40,.30) 0%, rgba(255,140,0,.10) 42%, transparent 70%);
  filter:blur(14px); pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; text-align:center; }

.hero-label{
  font-size:9.5px; font-weight:800; letter-spacing:2.6px;
  color:var(--amber); opacity:.9; margin-bottom:2px;
}
.hero-amount{
  font-family:'Fredoka'; font-weight:700;
  font-size:46px; line-height:1.05; letter-spacing:-.5px;
  background:linear-gradient(180deg,#FFF6D8 0%,#FFD166 34%,#FFA51F 72%,#E07A00 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 rgba(120,55,0,.55)) drop-shadow(0 10px 26px rgba(255,150,0,.45));
}
.hero-amount.sm{ font-size:38px; }
.hero-amount{ animation:amountGlow 3.6s ease-in-out infinite; }
@keyframes amountGlow{
  0%,100%{ filter:drop-shadow(0 4px 0 rgba(120,55,0,.55)) drop-shadow(0 10px 24px rgba(255,150,0,.34)); }
  50%{ filter:drop-shadow(0 4px 0 rgba(120,55,0,.55)) drop-shadow(0 16px 38px rgba(255,160,20,.72)); }
}

/* ===== ANIMATED COIN AURA (replaces the static box) ===== */
.coin-aura{
  position:relative;
  height:138px; margin:4px 0 0;
  display:grid; place-items:center;
}
.coin-aura::before{
  content:''; position:absolute;
  width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,90,.5) 0%, rgba(255,140,0,.16) 52%, transparent 72%);
  filter:blur(7px);
  animation:auraPulse 2.8s ease-in-out infinite;
}
.coin-aura::after{
  content:''; position:absolute;
  width:112px; height:112px; border-radius:50%;
  border:1.5px dashed rgba(255,200,90,.42);
  animation:auraOrbit 11s linear infinite;
}
@keyframes auraPulse{
  0%,100%{ transform:scale(.88); opacity:.7; }
  50%{ transform:scale(1.14); opacity:1; }
}
@keyframes auraOrbit{ to{ transform:rotate(360deg); } }

.aura-orbit{
  position:absolute; width:150px; height:150px; z-index:3;
  animation:auraOrbit 7.5s linear infinite;
}
.aura-orbit i{
  position:absolute; left:50%; top:50%;
  width:17px; height:17px; margin:-8.5px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF9E4, #FFD166 46%, #C97A00 100%);
  box-shadow:0 0 10px rgba(255,196,70,.95), inset 0 -1px 2px rgba(140,70,0,.6);
}
.aura-core{
  position:relative; z-index:2;
  font-family:'Fredoka'; font-weight:700; font-size:20px; letter-spacing:1px;
  color:#3A1E00;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#FFF3C4,#FFC93C 48%,#F08A00);
  box-shadow:0 6px 0 #A85600, 0 12px 26px -6px rgba(255,150,0,.85), inset 0 3px 0 rgba(255,255,255,.7);
  animation:coreBeat 2.4s ease-in-out infinite;
}
@keyframes coreBeat{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}

/* ===== STAGGERED ENTRANCE ===== */
.stagger{
  animation:riseIn .52s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px) scale(.985); }
  to{ opacity:1; transform:none; }
}

/* ===== BUTTON SHINE SWEEP ===== */
.btn::before{
  content:''; position:absolute; top:-20%; bottom:-20%; left:-70%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:shineSweep 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shineSweep{
  0%, 68%{ left:-70%; }
  86%, 100%{ left:140%; }
}

/* ===== PROGRESS SHIMMER ===== */
.prog i{ position:relative; overflow:hidden; }
.prog i::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:barShine 1.9s linear infinite;
}
@keyframes barShine{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

/* ===== BALANCE FLASH ===== */
.flash{ animation:flashPop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes flashPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.06); filter:brightness(1.35); }
  100%{ transform:scale(1); }
}

/* ===== TAB POP ===== */
.tab.active .t-ico{ animation:tabPop .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes tabPop{
  0%{ transform:translateY(0) scale(1); }
  55%{ transform:translateY(-6px) scale(1.22); }
  100%{ transform:translateY(-3px) scale(1.12); }
}
.hero-sub{ font-size:11px; color:var(--muted); margin-top:3px; font-weight:600; }

.hero-art{
  position:relative;
  width:190px; margin:2px auto -6px;
  animation:floaty 5.5s ease-in-out infinite;
}
.hero-art img{
  width:100%; display:block;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(255,160,20,.35));
}
.hero-art.sack{ width:150px; }
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(-.6deg); }
  50%{ transform:translateY(-9px) rotate(.6deg); }
}

.stage-pill{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  margin-top:6px;
  padding:5px 13px;
  border-radius:999px;
  border:1px solid rgba(255,190,90,.3);
  background:rgba(255,176,32,.10);
  font-size:9.5px; font-weight:800; letter-spacing:1.6px; color:var(--muted);
}
.stage-pill b{ font-family:'Fredoka'; color:var(--gold-l); font-size:11px; letter-spacing:.5px; }

.stage-dots{
  display:flex; justify-content:center; gap:4px; margin-top:8px;
}
.stage-dots i{
  width:14px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.10);
}
.stage-dots i.on{ background:linear-gradient(90deg,#FFD166,#FF8A00); box-shadow:0 0 8px rgba(255,160,20,.7); }

/* ===================== QUICK ROW ===================== */
.quick-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  margin-top:10px;
}
.q-card{
  position:relative;
  padding:8px 6px 8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(44,34,92,.78), rgba(20,16,51,.88));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  overflow:hidden;
}
.q-card::before{
  content:''; position:absolute; left:50%; top:-14px;
  width:60px; height:60px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,180,60,.20), transparent 68%);
  filter:blur(6px); pointer-events:none;
}

/* glowing emoji badge */
.q-ico{
  position:relative; z-index:1;
  width:26px; height:26px; margin:0 auto 3px;
  border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,196,80,.22), rgba(255,138,0,.06));
  border:1px solid rgba(255,190,90,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px -2px rgba(255,170,30,.55);
  animation:qIcoGlow 3s ease-in-out infinite;
}
.q-ico span{
  font-size:13px; line-height:1; display:block;
  filter:drop-shadow(0 0 5px rgba(255,190,70,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation:qIcoFloat 3.4s ease-in-out infinite;
}
.q-card:nth-child(2) .q-ico{ animation-delay:.5s; }
.q-card:nth-child(2) .q-ico span{ animation-delay:.5s; }
.q-card:nth-child(3) .q-ico{ animation-delay:1s; }
.q-card:nth-child(3) .q-ico span{ animation-delay:1s; }
@keyframes qIcoGlow{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 10px -2px rgba(255,170,30,.45); }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px 0 rgba(255,180,50,.8); }
}
@keyframes qIcoFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.06); }
}

.q-val{ position:relative; z-index:1; font-family:'Fredoka'; font-size:13px; font-weight:600; color:var(--ink); line-height:1.15; }
.q-lbl{ position:relative; z-index:1; font-size:7.5px; color:var(--muted-2); font-weight:800; letter-spacing:.2px; margin-top:1px; }

/* ===================== CARDS ===================== */
.card{
  position:relative;
  margin-top:12px;
  padding:16px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.card-title{
  display:flex; align-items:center; gap:7px;
  font-family:'Fredoka'; font-size:14px; font-weight:600; letter-spacing:.2px;
}
.dot-live{
  width:7px; height:7px; border-radius:50%;
  background:var(--emerald);
  box-shadow:0 0 0 3px rgba(59,224,127,.16), 0 0 10px var(--emerald);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{ 50%{ opacity:.45; } }
.badge-on{
  font-size:8.5px; font-weight:800; letter-spacing:1.2px;
  padding:4px 9px; border-radius:999px;
  color:#8CFFC0; background:rgba(59,224,127,.12);
  border:1px solid rgba(59,224,127,.3);
}

/* ===================== FIELDS ===================== */
.field{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:13px 14px;
  margin-bottom:9px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(10,8,32,.9), rgba(16,12,42,.9));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
  color:var(--ink);
  font-family:inherit; font-size:14px; font-weight:600;
  text-align:left;
  transition:border-color .2s, box-shadow .2s;
}
.field:focus-within{
  border-color:rgba(255,176,32,.5);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(255,176,32,.12);
}
.field input{
  flex:1; min-width:0;
  background:none; border:none; outline:none;
  color:var(--ink); font-family:inherit; font-size:14px; font-weight:600;
}
.field input::placeholder{ color:var(--muted-2); font-weight:500; }
.f-flag{ font-size:19px; }
.f-code{ font-family:'Fredoka'; font-size:14px; color:var(--gold-l); }
.f-name{ flex:1; color:var(--muted); font-size:13px; }
.f-chev{ color:var(--muted-2); font-size:11px; }
.f-ico{ font-size:15px; opacity:.9; }
.f-tag{
  font-size:8px; font-weight:800; letter-spacing:1px;
  padding:3px 7px; border-radius:6px;
  background:rgba(255,176,32,.16); color:var(--gold-l);
  border:1px solid rgba(255,176,32,.28);
}
.f-ok{ color:var(--emerald); font-size:13px; font-weight:800; }

/* ===================== BUTTONS ===================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:none; cursor:pointer;
  padding:14px 16px;
  border-radius:16px;
  font-family:'Fredoka'; font-weight:600; font-size:14.5px; letter-spacing:.5px;
  color:#2A1500;
  transition:transform .1s ease, filter .2s;
  user-select:none;
  overflow:hidden;
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 52%);
  pointer-events:none;
}
.btn:active{ transform:translateY(4px) scale(.995); }
.btn-ico{ font-size:15px; }

.btn-amber{
  background:linear-gradient(180deg,#FFE082 0%,#FFB020 48%,#FF8A00 100%);
  box-shadow:0 6px 0 #A85600, 0 14px 26px -8px rgba(255,150,0,.65), inset 0 2px 0 rgba(255,255,255,.6);
  color:#3A1E00;
}
.btn-amber:active{ box-shadow:0 2px 0 #A85600, 0 8px 16px -8px rgba(255,150,0,.6), inset 0 2px 0 rgba(255,255,255,.6); }

.btn-emerald{
  background:linear-gradient(180deg,#7BF2AA 0%,#3BE07F 45%,#16A85C 100%);
  box-shadow:0 6px 0 #0A6B36, 0 14px 26px -10px rgba(59,224,127,.55), inset 0 2px 0 rgba(255,255,255,.55);
  color:#04240F;
}
.btn-emerald:active{ box-shadow:0 2px 0 #0A6B36, 0 8px 16px -10px rgba(59,224,127,.5), inset 0 2px 0 rgba(255,255,255,.55); }

.btn-orange{
  background:linear-gradient(180deg,#FFC08A 0%,#FF8A3D 45%,#F06A00 100%);
  box-shadow:0 6px 0 #A33F00, 0 14px 26px -10px rgba(255,120,0,.55), inset 0 2px 0 rgba(255,255,255,.5);
  color:#3A1600;
}
.btn-orange:active{ box-shadow:0 2px 0 #A33F00, 0 8px 16px -10px rgba(255,120,0,.5), inset 0 2px 0 rgba(255,255,255,.5); }

.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  color:var(--ink);
}
.btn-danger{
  background:linear-gradient(180deg,#FF8FA3,#FF4D6D 45%,#D62246);
  box-shadow:0 6px 0 #8E0E26, 0 14px 26px -10px rgba(255,77,109,.5), inset 0 2px 0 rgba(255,255,255,.4);
  color:#3A0010;
}
.btn-xl{ width:100%; padding:17px; font-size:16.5px; letter-spacing:1px; border-radius:18px; }
.btn-block{ width:100%; margin-top:14px; }
.btn-row{ display:flex; gap:9px; margin-top:9px; }
.btn-row .btn{ flex:1; }
.btn-row.wide{ margin-top:14px; }

.hint{
  margin:10px 0 0; text-align:center;
  font-size:10.5px; color:var(--muted-2); font-weight:600;
}

/* ===================== ACTIVE NUMBERS CARD ===================== */
.active-numbers-card {
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(22, 28, 42, 0.85), rgba(13, 17, 28, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(12px);
}

.active-numbers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.active-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-icon {
  font-size: 17px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.active-numbers-head .card-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}

.active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: livePulse 1.8s infinite ease-in-out;
}

@keyframes livePulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
    box-shadow: 0 0 4px #22c55e;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 12px #22c55e;
  }
}

.active-numbers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.active-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.25s ease;
}

.active-num-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.num-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.num-idx {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  min-width: 18px;
}

.num-flag {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.num-code {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #f8fafc;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.num-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
}

.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.active-empty-state {
  text-align: center;
  padding: 22px 12px;
  color: var(--muted);
}

.empty-icon-wrap {
  font-size: 26px;
  margin-bottom: 6px;
  opacity: 0.85;
}

.empty-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
}

.empty-sub {
  font-size: 10.5px;
  color: var(--muted-2);
}

/* ===================== QUEST (LEGACY/FALLBACK) ===================== */
.quest-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.quest-pct{ font-family:'Fredoka'; font-size:14px; color:var(--gold-l); }
.prog{
  height:11px; border-radius:999px; overflow:hidden;
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.06);
}
.prog i{
  display:block; height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#FFE082,#FFB020 55%,#FF8A00);
  box-shadow:0 0 12px rgba(255,160,20,.75);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.quest-foot{
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:10.5px; color:var(--muted); font-weight:700;
}

/* ===================== TAGLINE ===================== */
.tagline{
  margin:20px 0 4px; text-align:center;
  font-size:9px; font-weight:800; letter-spacing:2.4px; color:var(--muted-2);
}
.tagline i{ margin:0 7px; opacity:.5; font-style:normal; }
.tagline em{
  display:block; margin-top:6px; font-style:normal;
  font-size:8px; letter-spacing:2.6px; color:rgba(255,176,32,.5);
}

/* ===================== SPIN STAGE ===================== */
.spin-stage{
  position:relative;
  margin:6px -16px 0;
  padding:16px 16px 14px;
  overflow:hidden;
  cursor:pointer;
  border-bottom:1px solid rgba(255,190,90,.10);
}
.spin-stage::after{
  content:''; position:absolute; left:50%; top:58%; width:70%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,170,40,.26) 0%, transparent 68%);
  filter:blur(12px); pointer-events:none;
}
.spin-head{ position:relative; z-index:2; text-align:center; }
.spin-title{
  font-family:'Fredoka'; font-weight:700; font-size:22px; letter-spacing:1.4px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 40%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(120,55,0,.5));
}
.spin-sub{ font-size:10px; color:var(--muted); font-weight:600; margin-top:1px; }

.wheel-wrap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; margin-top:8px;
}
.wheel-holder{ position:relative; display:grid; place-items:center; }
.wheel-mini{
  position:relative;
  width:150px; height:150px; border-radius:50%;
  background:conic-gradient(
    #FF4D6D 0deg 45deg, #FF8A3D 45deg 90deg, #FFD166 90deg 135deg,
    #3BE07F 135deg 180deg, #3FE0FF 180deg 225deg, #5B8CFF 225deg 270deg,
    #A855F7 270deg 315deg, #FF5FA2 315deg 360deg);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.06),
    0 0 0 9px rgba(255,176,32,.35),
    0 0 34px rgba(255,160,20,.45),
    inset 0 0 26px rgba(0,0,0,.45);
  animation:wheelIdle 14s linear infinite;
}
.wheel-mini::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 42%);
}
@keyframes wheelIdle{ to{ transform:rotate(360deg); } }

.wheel-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:16px solid var(--gold-l);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));
  z-index:3;
}
.wheel-pointer.big{ border-left-width:12px; border-right-width:12px; border-top-width:21px; top:-6px; }

.wheel-cta{
  position:relative;
  width:70px; height:70px; border-radius:50%;
  border:none; cursor:pointer;
  font-family:'Fredoka'; font-weight:700; font-size:14px; letter-spacing:1px;
  color:#2A1500;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 50%,#FF8A00);
  box-shadow:0 6px 0 #A85600, 0 12px 24px -8px rgba(255,150,0,.7), inset 0 2px 0 rgba(255,255,255,.6);
  animation:ctaPulse 2.2s ease-in-out infinite;
}
.wheel-cta:active{ transform:translateY(4px); box-shadow:0 2px 0 #A85600, inset 0 2px 0 rgba(255,255,255,.6); }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 6px 0 #A85600, 0 12px 24px -8px rgba(255,150,0,.6), inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 0 rgba(255,176,32,.5); }
  50%{ box-shadow:0 6px 0 #A85600, 0 12px 24px -8px rgba(255,150,0,.6), inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 12px rgba(255,176,32,0); }
}

.prize-ticker{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
  font-size:10px; font-weight:800; letter-spacing:1.4px; color:var(--muted);
}
.prize-ticker b{ font-family:'Fredoka'; font-size:14px; color:var(--gold-l); }

/* ===================== STREAK ===================== */
.streak-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.streak-txt{ font-family:'Fredoka'; font-size:12px; color:var(--gold-l); }
.streak-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.day{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 0 6px;
  border-radius:11px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
}
.day .c{ font-size:13px; line-height:1; filter:grayscale(1); opacity:.35; }
.day .n{ font-size:8px; font-weight:800; color:var(--muted-2); letter-spacing:.4px; }
.day.done{
  background:linear-gradient(180deg, rgba(255,176,32,.22), rgba(255,138,0,.08));
  border-color:rgba(255,176,32,.4);
  box-shadow:0 0 12px -2px rgba(255,160,20,.5);
}
.day.done .c{ filter:none; opacity:1; }
.day.done .n{ color:var(--gold-l); }
.day.today{ border-color:rgba(255,224,130,.8); box-shadow:0 0 0 2px rgba(255,176,32,.2), 0 0 16px rgba(255,160,20,.6); }

/* ===================== SECTION HEAD ===================== */
.sec-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:20px 2px 10px;
}
.sec-head h3{
  margin:0; font-family:'Fredoka'; font-size:15px; font-weight:600; letter-spacing:.3px;
}
.sec-head span{ font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:var(--muted-2); }

/* ===================== CHEST GRID ===================== */
.chest-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.chest-card{
  position:relative;
  padding:12px 10px 11px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(48,36,100,.9) 0%, rgba(22,17,54,.95) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 26px -16px rgba(0,0,0,.9);
  text-align:center;
  overflow:visible;
  transition:transform .2s, border-color .25s, box-shadow .25s;
}
.chest-card:last-child:nth-child(odd){ grid-column:1 / -1; }

.chest-card.ready{
  border-color:rgba(255,190,90,.55);
  background:linear-gradient(180deg, rgba(96,62,18,.55) 0%, rgba(34,22,58,.95) 100%);
  box-shadow:0 0 0 1px rgba(255,190,90,.25), 0 0 26px -4px rgba(255,160,20,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
.chest-card.claimed{ opacity:.5; filter:saturate(.4); }

.chest-art{
  position:relative;
  width:74px; height:74px; margin:0 auto 4px;
  display:grid; place-items:center;
}
.chest-art img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));
  transition:opacity .2s;
}
.chest-art .open-img{ position:absolute; inset:0; opacity:0; transition:opacity .25s; }
.chest-card.open .closed-img{ opacity:0; }
.chest-card.open .open-img{ opacity:1; }

.chest-card.ready .chest-art img{
  animation:chestShake 1.9s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes chestShake{
  0%, 62%, 100%{ transform:rotate(0) translateY(0) scale(1); }
  66%{ transform:rotate(-7deg) translateY(-2px) scale(1.05); }
  70%{ transform:rotate(7deg) translateY(0) scale(1.05); }
  74%{ transform:rotate(-6deg) translateY(-1px) scale(1.04); }
  78%{ transform:rotate(6deg) translateY(0) scale(1.03); }
  82%{ transform:rotate(-3deg) scale(1.01); }
  86%{ transform:rotate(2deg) scale(1); }
}

.chest-glow{
  position:absolute; left:50%; top:38%; width:110px; height:110px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,180,40,.55), transparent 68%);
  filter:blur(8px); opacity:0; transition:opacity .3s; pointer-events:none;
}
.chest-card.ready .chest-glow{ opacity:1; animation:glowPulse 1.8s ease-in-out infinite; }
@keyframes glowPulse{ 50%{ opacity:.5; transform:translate(-50%,-50%) scale(1.12); } }

.chest-msgs{ font-family:'Fredoka'; font-size:13px; font-weight:600; color:var(--ink); }
.chest-amt{
  font-family:'Fredoka'; font-size:17px; font-weight:700; line-height:1.1;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 45%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(110,50,0,.45));
}
.chest-prog{
  height:5px; border-radius:3px; margin:7px 2px 8px;
  background:rgba(0,0,0,.5); overflow:hidden;
}
.chest-prog i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#FFD166,#FF8A00);
  box-shadow:0 0 8px rgba(255,160,20,.7);
  transition:width .5s;
}
.chest-status{
  display:block;
  padding:8px 6px;
  border-radius:11px;
  font-family:'Fredoka'; font-size:11px; font-weight:600; letter-spacing:.8px;
}
.chest-status.lock{ background:rgba(255,255,255,.05); color:var(--muted-2); }
.chest-status.done{ background:rgba(59,224,127,.10); color:#8CFFC0; }
.chest-status.claim{
  cursor:pointer;
  color:#2A1500;
  background:linear-gradient(180deg,#FFE082,#FFB020 50%,#FF8A00);
  box-shadow:0 4px 0 #A85600, 0 8px 16px -6px rgba(255,150,0,.7), inset 0 1px 0 rgba(255,255,255,.6);
  animation:claimBounce 1.5s ease-in-out infinite;
}
.chest-status.claim:active{ transform:translateY(3px); box-shadow:0 1px 0 #A85600, inset 0 1px 0 rgba(255,255,255,.6); }
@keyframes claimBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

/* falling coins */
.fall-coin{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF6D8, #FFD166 45%, #D98A00 100%);
  box-shadow:0 0 6px rgba(255,190,60,.9);
  pointer-events:none; z-index:5;
  animation:coinFall var(--dur,1.2s) cubic-bezier(.4,0,.7,1) var(--delay,0s) forwards;
}
@keyframes coinFall{
  0%{ opacity:0; transform:translate(0,0) scale(.6) rotate(0); }
  12%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx,0), var(--dy,70px)) scale(1) rotate(320deg); }
}

.burst-coin{
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF6D8, #FFD166 45%, #D98A00 100%);
  box-shadow:0 0 8px rgba(255,190,60,.95);
  pointer-events:none; z-index:120;
  animation:burstOut var(--dur,.9s) cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes burstOut{
  0%{ opacity:1; transform:translate(0,0) scale(.5); }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(1.1); }
}

/* ===================== WALLET ===================== */
.wallet-hero{
  position:relative;
  margin:6px -16px 0;
  padding:16px 16px 8px;
  overflow:hidden;
}
.wallet-hero::after{
  content:''; position:absolute; left:50%; top:52%; width:74%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,170,40,.26) 0%, transparent 68%);
  filter:blur(14px); pointer-events:none;
}
.wh-inner{ position:relative; z-index:2; text-align:center; }

.mini-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
  margin-top:12px;
}
.ms{
  padding:12px 6px;
  border-radius:15px; text-align:center;
  background:linear-gradient(180deg, rgba(44,34,92,.8), rgba(20,16,51,.9));
  border:1px solid var(--line-2);
}
.ms b{ display:block; font-family:'Fredoka'; font-size:15px; color:var(--gold-l); }
.ms span{ font-size:8.5px; font-weight:700; color:var(--muted-2); letter-spacing:.4px; }

.tx-list{ display:flex; flex-direction:column; gap:8px; }
.tx{
  display:flex; align-items:center; gap:11px;
  padding:12px 13px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(40,31,86,.75), rgba(19,15,48,.9));
  border:1px solid var(--line-2);
}
.tx-ico{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  font-size:15px; flex:0 0 auto;
  background:rgba(255,255,255,.06);
}
.tx-ico.in{ background:rgba(59,224,127,.14); }
.tx-ico.out{ background:rgba(255,77,109,.14); }
.tx-mid{ flex:1; min-width:0; }
.tx-mid b{ display:block; font-size:12.5px; font-weight:700; }
.tx-mid span{ font-size:9.5px; color:var(--muted-2); font-weight:600; }
.tx-amt{ font-family:'Fredoka'; font-size:13.5px; }
.tx-amt.in{ color:#7BF2AA; }
.tx-amt.out{ color:#FF8FA3; }

.rate-card{ display:flex; align-items:center; gap:12px; }
.rate-ico{
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:18px;
  background:linear-gradient(160deg, rgba(255,176,32,.24), rgba(255,138,0,.08));
  border:1px solid rgba(255,176,32,.3);
}
.rate-card b{ display:block; font-family:'Fredoka'; font-size:13px; }
.rate-card span{ font-size:10px; color:var(--muted-2); font-weight:600; }
.rate-badge{
  margin-left:auto; font-size:8.5px; font-weight:800; letter-spacing:1.2px;
  padding:4px 9px; border-radius:999px;
  color:#8CFFC0; background:rgba(59,224,127,.12); border:1px solid rgba(59,224,127,.3);
}

/* ===================== PROFILE ===================== */
.prof-head{
  position:relative;
  margin:6px -16px 0;
  padding:18px 16px 16px;
  text-align:center;
  overflow:hidden;
}
.prof-head::after{
  content:''; position:absolute; left:50%; top:34%; width:60%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,170,40,.22) 0%, transparent 68%);
  filter:blur(16px); pointer-events:none;
}
.avatar-ring{
  position:relative; z-index:2;
  width:86px; height:86px; margin:0 auto 10px;
  border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(from 210deg,#FFE9A8,#FFB020,#FF8A00,#FF5FA2,#8B6CFF,#FFB020);
  box-shadow:0 0 0 4px rgba(8,6,26,.9), 0 0 30px rgba(255,160,20,.5);
  animation:ringSpin 9s linear infinite;
}
@keyframes ringSpin{ to{ filter:hue-rotate(360deg); } }
.avatar{
  position:relative;
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Fredoka'; font-size:30px; font-weight:600;
  color:#2A1500;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 55%,#FF8A00);
  box-shadow:inset 0 -4px 10px rgba(120,55,0,.4);
  overflow:hidden;
}
.avatar img#pPhoto{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; object-fit:cover; z-index:2;
}
.prof-name{ position:relative; z-index:2; font-family:'Fredoka'; font-size:20px; font-weight:600; }
.prof-handle{ position:relative; z-index:2; font-size:11.5px; color:var(--muted); font-weight:600; margin-top:1px; }
.prof-uid{
  position:relative; z-index:2;
  display:inline-block; margin-top:7px;
  font-size:9px; font-weight:800; letter-spacing:1.4px; color:var(--muted-2);
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
}
.prof-uid b{ color:var(--gold-l); letter-spacing:1px; }

.lvl-row{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:9px;
  margin-top:14px;
}
.lvl-badge{
  font-size:9px; font-weight:800; letter-spacing:1px; white-space:nowrap;
  padding:5px 10px; border-radius:999px;
  color:#2A1500;
  background:linear-gradient(180deg,#FFE9A8,#FFB020);
  box-shadow:0 3px 0 #A85600;
}
.lvl-bar{
  flex:1; height:8px; border-radius:999px; overflow:hidden;
  background:rgba(0,0,0,.5); box-shadow:inset 0 2px 4px rgba(0,0,0,.7);
}
.lvl-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#FFE082,#FFB020 55%,#FF8A00);
  box-shadow:0 0 10px rgba(255,160,20,.7);
}
.lvl-xp{ font-size:9px; font-weight:800; color:var(--muted-2); white-space:nowrap; }

.menu-group{
  margin-top:12px;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(40,31,86,.7), rgba(19,15,48,.9));
  border:1px solid var(--line-2);
}
.menu-item{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  cursor:pointer;
  transition:background .18s;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item:active{ background:rgba(255,255,255,.05); }
.mi-ico{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:16px;
  background:rgba(255,255,255,.06); flex:0 0 auto;
}
.mi-txt{ flex:1; min-width:0; font-size:13px; font-weight:700; }
.mi-txt em{ display:block; font-style:normal; font-size:9.5px; color:var(--muted-2); font-weight:600; margin-top:1px; }
.mi-arr{ color:var(--muted-2); font-size:18px; line-height:1; }

/* ===================== TAB BAR ===================== */
.tabbar{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:470px; z-index:50;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(8px + var(--safe-b));
  background:linear-gradient(180deg, rgba(10,8,30,.55) 0%, rgba(8,6,26,.97) 42%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,190,90,.12);
}
.tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 0 5px;
  background:none; border:none; cursor:pointer;
  color:var(--muted-2);
  transition:color .2s, transform .15s;
}
.tab:active{ transform:scale(.94); }
.t-ico{
  font-size:19px; line-height:1;
  filter:grayscale(1) opacity(.55);
  transition:filter .25s, transform .25s;
}
.t-lbl{ font-size:9px; font-weight:800; letter-spacing:.5px; }
.tab.active{ color:var(--gold-l); }
.tab.active .t-ico{
  filter:none;
  transform:translateY(-3px) scale(1.12);
  filter:drop-shadow(0 4px 10px rgba(255,160,20,.7));
}
.tab.active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#FFD166,#FF8A00);
  box-shadow:0 0 10px rgba(255,160,20,.9);
}
.t-dot{
  position:absolute; top:5px; right:calc(50% - 17px);
  width:6px; height:6px; border-radius:50%;
  background:var(--rose);
  box-shadow:0 0 0 2px rgba(8,6,26,.9), 0 0 8px var(--rose);
  animation:pulseDot 1.6s infinite;
}

/* ===================== OVERLAYS ===================== */
.wheel-overlay, .reveal{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(255,140,0,.16) 0%, transparent 62%),
    rgba(5,4,16,.965);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
  overflow:hidden;
}
.wheel-overlay.open, .reveal.open{ opacity:1; visibility:visible; }

.ov-close{
  position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:var(--ink); font-size:15px; cursor:pointer;
  display:grid; place-items:center;
  z-index:5;
}
.ov-close:active{ transform:scale(.92); }

.ov-head{ position:relative; z-index:3; text-align:center; margin-bottom:8px; }
.ov-title{
  font-family:'Fredoka'; font-weight:700; font-size:30px; letter-spacing:2px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 40%,#FFA51F 78%,#E07A00);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 rgba(110,50,0,.6)) drop-shadow(0 10px 26px rgba(255,150,0,.5));
}
.ov-sub{ font-size:11px; color:var(--muted); font-weight:600; margin-top:2px; }
.ov-foot{
  position:relative; z-index:3;
  margin-top:18px; font-size:9.5px; font-weight:800; letter-spacing:1.6px; color:var(--muted-2);
}

.wheel-stage{
  position:relative; z-index:3;
  width:min(84vw, 330px); aspect-ratio:1;
  display:grid; place-items:center;
  margin-top:10px;
}
.wheel-big{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(
    #FF4D6D 0deg 45deg, #FF8A3D 45deg 90deg, #FFD166 90deg 135deg,
    #3BE07F 135deg 180deg, #3FE0FF 180deg 225deg, #5B8CFF 225deg 270deg,
    #A855F7 270deg 315deg, #FF5FA2 315deg 360deg);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.07),
    0 0 0 13px rgba(255,176,32,.4),
    0 0 60px rgba(255,160,20,.5),
    inset 0 0 60px rgba(0,0,0,.5);
  transition:transform 4.2s cubic-bezier(.16,.84,.24,1);
  position:relative;
}
.wheel-big::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.42), transparent 44%);
  pointer-events:none;
}
.seg-label{
  position:absolute; left:50%; top:50%;
  font-family:'Fredoka'; font-size:13px; font-weight:700;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  transform-origin:0 0;
  pointer-events:none;
  z-index:2;
}
.wheel-center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  font-family:'Fredoka'; font-weight:700; font-size:17px; letter-spacing:1px;
  color:#2A1500;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 50%,#FF8A00);
  box-shadow:0 7px 0 #A85600, 0 14px 30px -8px rgba(255,150,0,.8), inset 0 3px 0 rgba(255,255,255,.65);
  z-index:4;
  transition:transform .1s;
}
.wheel-center small{ font-size:8px; letter-spacing:2px; opacity:.7; font-weight:600; }
.wheel-center:active{ transform:translate(-50%,-50%) translateY(4px); }
.wheel-center.spinning{ animation:centerPulse 1s ease-in-out infinite; pointer-events:none; }
@keyframes centerPulse{
  0%,100%{ box-shadow:0 7px 0 #A85600, 0 14px 30px -8px rgba(255,150,0,.8), inset 0 3px 0 rgba(255,255,255,.65); }
  50%{ box-shadow:0 7px 0 #A85600, 0 14px 30px -8px rgba(255,150,0,.8), inset 0 3px 0 rgba(255,255,255,.65), 0 0 0 16px rgba(255,176,32,0); }
}

/* ===================== REVEAL ===================== */
.reveal{
  background:
    radial-gradient(65% 42% at 50% 40%, rgba(255,150,0,.22) 0%, transparent 62%),
    rgba(4,3,12,.975);
}
.rv-title{
  position:relative; z-index:3;
  font-family:'Fredoka'; font-weight:700; font-size:38px; letter-spacing:2px;
  background:linear-gradient(180deg,#FFFBE8,#FFD166 38%,#FFA51F 74%,#D96B00);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 5px 0 rgba(110,50,0,.65)) drop-shadow(0 12px 30px rgba(255,150,0,.6));
  animation:rvPop .55s cubic-bezier(.2,1.4,.4,1);
  text-align:center;
}
@keyframes rvPop{
  0%{ transform:scale(.6); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.rv-art{
  position:relative; z-index:3;
  width:190px; margin:6px auto 0;
  animation:rvArtIn .7s cubic-bezier(.2,1.3,.4,1) .05s both, floaty 5s ease-in-out 1s infinite;
}
.rv-art img{
  width:100%; display:block;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(0 0 44px rgba(255,160,20,.5));
}
@keyframes rvArtIn{
  0%{ transform:scale(.4) translateY(30px); opacity:0; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
.rv-amount{
  position:relative; z-index:3;
  font-family:'Fredoka'; font-weight:700; font-size:44px; letter-spacing:-.5px;
  background:linear-gradient(180deg,#FFFBE8,#FFD166 40%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 rgba(110,50,0,.6));
  margin-top:-4px;
  animation:rvPop .5s cubic-bezier(.2,1.4,.4,1) .18s both;
}
.rv-sub{
  position:relative; z-index:3;
  font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--muted);
  margin-top:2px;
}
.rv-btns{
  position:relative; z-index:3;
  display:flex; gap:10px; width:100%; max-width:330px;
  margin-top:22px;
}
.rv-btns .btn{ flex:1; padding:16px 12px; font-size:14px; }

/* ===================== BOTTOM SHEET ===================== */
.sheet-wrap{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(3,2,10,.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .28s, visibility .28s;
}
.sheet-wrap.open{ opacity:1; visibility:visible; }
.sheet{
  width:100%; max-width:470px;
  max-height:82vh; overflow-y:auto;
  padding:18px 18px calc(22px + var(--safe-b));
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,#1B1546 0%,#0D0A24 100%);
  border-top:1px solid rgba(255,190,90,.22);
  box-shadow:0 -20px 50px rgba(0,0,0,.7);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.sheet-wrap.open .sheet{ transform:translateY(0); }
.sheet::before{
  content:''; display:block; width:38px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.18); margin:0 auto 14px;
}
.sheet h3{
  margin:0 0 4px; font-family:'Fredoka'; font-size:17px; font-weight:600; letter-spacing:.3px;
}
.sheet p.sh-sub{ margin:0 0 14px; font-size:11px; color:var(--muted-2); font-weight:600; }

/* sheet header (used by sheetHTML) */
.sheet-title{
  margin:0 0 5px; font-family:'Fredoka'; font-size:19px; font-weight:600;
  letter-spacing:.3px; color:var(--ink);
}
.sheet-sub{
  margin:0 0 16px; font-size:11.5px; color:var(--muted-2); font-weight:600; line-height:1.5;
}
.sheet-sub b{ color:var(--gold); }

.opt{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px; margin-bottom:8px;
  border-radius:15px; cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  transition:background .18s, border-color .18s, transform .12s;
}
.opt:active{ transform:scale(.985); background:rgba(255,255,255,.08); }
.opt.on{ border-color:rgba(255,176,32,.55); background:rgba(255,176,32,.12); }
.opt .o-ico{ font-size:18px; width:24px; text-align:center; }
.opt .o-mid{ flex:1; min-width:0; }
.opt .o-mid b{ display:block; font-size:13px; font-weight:700; }
.opt .o-mid span{ font-size:10px; color:var(--muted-2); font-weight:600; }
.opt .o-right{ font-size:11px; font-weight:800; color:var(--gold-l); }

.amt{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;
}
.amt button{
  padding:13px 6px; border-radius:13px; cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  color:var(--ink); font-family:'Fredoka'; font-size:13px; font-weight:600;
}
.amt button.on{ border-color:rgba(255,176,32,.6); background:rgba(255,176,32,.15); color:var(--gold-l); }

.summary{
  padding:13px 14px; border-radius:15px; margin-bottom:12px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.06);
}
.summary .s-row{
  display:flex; justify-content:space-between;
  font-size:11.5px; font-weight:600; color:var(--muted);
  padding:4px 0;
}
.summary .s-row b{ color:var(--ink); font-family:'Fredoka'; font-weight:600; }
.summary .s-row.total{ border-top:1px solid rgba(255,255,255,.08); margin-top:5px; padding-top:8px; }
.summary .s-row.total b{ color:var(--gold-l); font-size:15px; }

.success-box{ text-align:center; padding:14px 0 6px; }
.success-box .sb-ico{ font-size:52px; line-height:1; animation:rvPop .5s cubic-bezier(.2,1.4,.4,1); }
.success-box h3{ margin-top:10px; font-size:19px; }
.success-box p{ font-size:11.5px; color:var(--muted); font-weight:600; }

/* ===================== TOAST ===================== */
#toast{
  position:fixed; left:50%; bottom:calc(96px + var(--safe-b));
  transform:translate(-50%, 20px);
  z-index:200;
  padding:11px 18px; border-radius:14px;
  background:linear-gradient(180deg, rgba(58,44,120,.98), rgba(26,20,64,.98));
  border:1px solid rgba(255,190,90,.3);
  box-shadow:0 14px 34px rgba(0,0,0,.7);
  font-size:12px; font-weight:700;
  color:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ===================== FLOAT COIN ===================== */
.float-coin{
  position:fixed; z-index:150; pointer-events:none;
  font-family:'Fredoka'; font-size:17px; font-weight:700;
  color:#FFE9A8;
  text-shadow:0 2px 10px rgba(255,160,20,.9), 0 1px 0 rgba(120,55,0,.8);
  animation:floatUp 1.25s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes floatUp{
  0%{ opacity:0; transform:translate(-50%,0) scale(.6); }
  18%{ opacity:1; transform:translate(-50%,-14px) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-78px) scale(1); }
}

.confetti{
  position:fixed; width:7px; height:11px; z-index:150; pointer-events:none;
  border-radius:2px;
  animation:confFall var(--dur,1.4s) cubic-bezier(.3,.1,.7,1) forwards;
}
@keyframes confFall{
  0%{ opacity:1; transform:translate(0,0) rotate(0); }
  100%{ opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{ width:0; height:0; }

/* ===================== SMALL PHONES ===================== */
@media (max-height:700px){
  .hero-amount{ font-size:40px; }
  .hero-art{ width:160px; }
  .wheel-mini{ width:116px; height:116px; }
  .wheel-cta{ width:68px; height:68px; }
}

/* ===================== RIPPLE ===================== */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  pointer-events:none;
  animation:rippleOut .62s cubic-bezier(.2,.7,.3,1) forwards;
  z-index:1;
}
@keyframes rippleOut{
  to{ transform:translate(-50%,-50%) scale(1); opacity:0; }
}

/* ===================== BUTTON SPINNER ===================== */
.btn-spin{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(0,0,0,.22);
  border-top-color:rgba(0,0,0,.75);
  animation:btnSpin .7s linear infinite;
  display:inline-block;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* ===================== EXTRA MOTION POLISH ===================== */
/* streak flame flicker */
.day.done .c{ animation:flameFlick 1.7s ease-in-out infinite; }
.day.done:nth-child(2n) .c{ animation-delay:.25s; }
.day.done:nth-child(3n) .c{ animation-delay:.5s; }
@keyframes flameFlick{
  0%,100%{ transform:scale(1) rotate(-2deg); filter:drop-shadow(0 0 4px rgba(255,160,20,.6)); }
  50%{ transform:scale(1.14) rotate(2deg); filter:drop-shadow(0 0 10px rgba(255,170,30,.95)); }
}

/* chest card press + hover lift */
.chest-card{ will-change:transform; }
.chest-card:active{ transform:scale(.97); }
.chest-card.ready{ animation:cardGlow 2.4s ease-in-out infinite; }
@keyframes cardGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,190,90,.22), 0 0 20px -6px rgba(255,160,20,.45), inset 0 1px 0 rgba(255,255,255,.1); }
  50%{ box-shadow:0 0 0 1px rgba(255,190,90,.4), 0 0 34px -4px rgba(255,170,30,.8), inset 0 1px 0 rgba(255,255,255,.12); }
}

/* mini wheel breathing glow */
.wheel-mini{ animation:wheelIdle 14s linear infinite, wheelGlow 3.2s ease-in-out infinite; }
@keyframes wheelGlow{
  0%,100%{ box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 0 0 9px rgba(255,176,32,.3), 0 0 26px rgba(255,160,20,.35), inset 0 0 26px rgba(0,0,0,.45); }
  50%{ box-shadow:0 0 0 6px rgba(255,255,255,.09), 0 0 0 10px rgba(255,190,60,.5), 0 0 46px rgba(255,170,30,.7), inset 0 0 26px rgba(0,0,0,.45); }
}

/* input focus lift */
.field{ transition:border-color .2s, box-shadow .2s, transform .18s; }
.field:focus-within{ transform:translateY(-1px); }

/* menu item press */
.menu-item:active .mi-ico{ transform:scale(.9) rotate(-6deg); }
.mi-ico{ transition:transform .18s; }

/* wallet chip tick */
.wallet-chip b{ transition:color .3s; }

/* overlay entrance */
.wheel-overlay.open .wheel-stage{ animation:stageIn .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes stageIn{
  from{ opacity:0; transform:scale(.82) translateY(18px); }
  to{ opacity:1; transform:none; }
}
.wheel-overlay.open .ov-head{ animation:riseIn .45s cubic-bezier(.22,1,.36,1) both; }

/* sheet option stagger */
.sheet-wrap.open .opt,
.sheet-wrap.open .amt button,
.sheet-wrap.open .summary{ animation:riseIn .4s cubic-bezier(.22,1,.36,1) both; }
.sheet-wrap.open .opt:nth-child(1){ animation-delay:.02s; }
.sheet-wrap.open .opt:nth-child(2){ animation-delay:.06s; }
.sheet-wrap.open .opt:nth-child(3){ animation-delay:.1s; }
.sheet-wrap.open .opt:nth-child(4){ animation-delay:.14s; }
.sheet-wrap.open .opt:nth-child(5){ animation-delay:.18s; }

/* ================================================================
   v3 — AUTO COUNTRY · PAIRING CODE · SEND RESULT · 3D WITHDRAW
   ================================================================ */

/* ---------- field icon as glowing badge ---------- */
.f-ico{
  width:26px; height:26px; flex:0 0 auto; border-radius:9px;
  display:grid; place-items:center; opacity:1;
  background:linear-gradient(160deg, rgba(255,196,80,.20), rgba(255,138,0,.05));
  border:1px solid rgba(255,190,90,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 10px -3px rgba(255,170,30,.5);
}
.f-ico > span{
  font-size:12.5px; line-height:1;
  filter:drop-shadow(0 0 5px rgba(255,190,70,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* ---------- auto country ---------- */
.field.auto{ cursor:default; }
.field.auto:active{ transform:none; }
.f-auto{
  margin-left:auto; font-size:7.5px; font-weight:900; letter-spacing:.7px;
  color:var(--gold-l); padding:3px 7px; border-radius:6px;
  background:rgba(255,176,32,.13); border:1px solid rgba(255,176,32,.3);
  box-shadow:0 0 10px -3px rgba(255,176,32,.6);
}
#countryField.detected{ animation:ctyPop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes ctyPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.045); border-color:rgba(255,190,90,.65); box-shadow:0 0 22px -4px rgba(255,176,32,.8); }
  100%{ transform:scale(1); }
}

/* ---------- pairing code ---------- */
.pair-wrap{
  margin-top:8px; padding:9px 11px 11px; border-radius:15px;
  background:linear-gradient(180deg, rgba(44,34,92,.6), rgba(18,14,46,.85));
  border:1px dashed rgba(255,190,90,.2);
  transition:border-color .3s, background .3s;
}
.pair-wrap.live{ border-style:solid; border-color:rgba(255,176,32,.45); background:linear-gradient(180deg, rgba(58,44,116,.75), rgba(22,17,56,.9)); }
.pair-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pair-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.3px; color:var(--muted); }
.pair-wait{
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.4px;
  color:var(--muted-2); animation:waitBlink 1.6s ease-in-out infinite;
}
.pair-wrap.live .pair-wait{ color:var(--emerald); animation:none; }
@keyframes waitBlink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.pair-code{
  position:relative; width:100%; display:flex; align-items:center; justify-content:center;
  gap:9px; padding:11px 12px; border-radius:12px; cursor:pointer;
  font-family:'Fredoka'; border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(30,23,68,.9), rgba(14,11,38,.95));
  color:var(--muted-2); transition:transform .16s, box-shadow .3s, border-color .3s;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.pair-code .pc-txt{ font-size:19px; font-weight:600; letter-spacing:3px; }
.pair-code .pc-copy{
  font-family:'Plus Jakarta Sans'; font-size:8px; font-weight:900; letter-spacing:.8px;
  padding:3px 6px; border-radius:5px; background:rgba(255,255,255,.07); color:var(--muted-2);
}
.pair-code.live{
  border-color:rgba(255,176,32,.5);
  background:linear-gradient(180deg, rgba(72,50,26,.55), rgba(26,18,48,.95));
  box-shadow:0 0 0 1px rgba(255,176,32,.12), 0 0 26px -6px rgba(255,176,32,.75);
  animation:pcBreathe 2.4s ease-in-out infinite;
}
.pair-code.live .pc-txt{
  color:#FFF3CE;
  text-shadow:0 0 10px rgba(255,190,70,.95), 0 0 26px rgba(255,150,20,.7), 0 2px 3px rgba(0,0,0,.6);
  animation:pcGlowText 2.4s ease-in-out infinite;
}
.pair-code.live .pc-copy{ background:rgba(255,176,32,.16); color:var(--gold-l); }
.pc-glow{
  position:absolute; inset:-40%; pointer-events:none; opacity:0;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,200,90,.55) 30deg, transparent 70deg);
  animation:pcSweep 3.4s linear infinite;
}
.pair-code.live .pc-glow{ opacity:.5; }
@keyframes pcBreathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,176,32,.12), 0 0 22px -8px rgba(255,176,32,.6); }
  50%{ box-shadow:0 0 0 1px rgba(255,176,32,.24), 0 0 34px -4px rgba(255,176,32,.95); }
}
@keyframes pcGlowText{
  0%,100%{ text-shadow:0 0 8px rgba(255,190,70,.8), 0 0 22px rgba(255,150,20,.55), 0 2px 3px rgba(0,0,0,.6); }
  50%{ text-shadow:0 0 14px rgba(255,215,120,1), 0 0 38px rgba(255,160,30,.9), 0 2px 3px rgba(0,0,0,.6); }
}
@keyframes pcSweep{ to{ transform:rotate(360deg); } }
.pair-code.tapped{ animation:pcTap .34s cubic-bezier(.2,1.5,.4,1); }
@keyframes pcTap{
  0%{ transform:scale(1); }
  45%{ transform:scale(.94); box-shadow:0 0 40px -2px rgba(255,200,90,1); }
  100%{ transform:scale(1); }
}
.pair-code.copied{ border-color:rgba(59,224,127,.7); box-shadow:0 0 26px -5px rgba(59,224,127,.85); }
.pair-code.copied .pc-copy{ background:rgba(59,224,127,.18); color:#7BF2AA; }

/* ---------- send result overlay ---------- */
.send-res{
  position:fixed; inset:0; z-index:86; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 34%, rgba(38,26,74,.97), rgba(4,3,14,.985) 72%);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; padding:18px;
}
.send-res.open{ opacity:1; visibility:visible; }
.sr-inner{
  position:relative; z-index:2; width:100%; max-width:390px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.send-res.open .sr-inner > *{ animation:riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.send-res.open .sr-inner > *:nth-child(1){ animation-delay:.02s; }
.send-res.open .sr-inner > *:nth-child(2){ animation-delay:.08s; }
.send-res.open .sr-inner > *:nth-child(3){ animation-delay:.13s; }
.send-res.open .sr-inner > *:nth-child(4){ animation-delay:.18s; }
.send-res.open .sr-inner > *:nth-child(5){ animation-delay:.23s; }
.send-res.open .sr-inner > *:nth-child(6){ animation-delay:.3s; }
.send-res.open .sr-inner > *:nth-child(7){ animation-delay:.36s; }
.send-res.open .sr-inner > *:nth-child(8){ animation-delay:.42s; }

.sr-badge{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-size:30px; font-weight:900; color:#0B2A18; margin-bottom:12px;
  background:radial-gradient(circle at 34% 28%, #B6FFD4, #3BE07F 52%, #0E8B46 100%);
  box-shadow:0 0 0 6px rgba(59,224,127,.12), 0 0 34px -2px rgba(59,224,127,.85), inset 0 -3px 6px rgba(0,0,0,.3);
  animation:badgePop .6s cubic-bezier(.2,1.6,.4,1) both;
}
.sr-badge.partial{
  background:radial-gradient(circle at 34% 28%, #FFE9A8, #FFB020 52%, #A85600 100%);
  box-shadow:0 0 0 6px rgba(255,176,32,.12), 0 0 34px -2px rgba(255,176,32,.85), inset 0 -3px 6px rgba(0,0,0,.3);
  color:#3A2200;
}
@keyframes badgePop{ 0%{ transform:scale(.3) rotate(-18deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }

.sr-title{
  font-family:'Fredoka'; font-size:21px; font-weight:600; letter-spacing:.8px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 50%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,160,20,.5));
}
.sr-sub{ font-size:11px; color:var(--muted); font-weight:700; margin-top:3px; }

.sr-big{ display:flex; align-items:baseline; justify-content:center; gap:4px; margin-top:14px; line-height:1; }
.sr-num{
  font-family:'Fredoka'; font-size:62px; font-weight:600;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 40%,#FFA51F 78%,#E07A00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(255,150,20,.6));
}
.sr-slash{ font-family:'Fredoka'; font-size:34px; color:var(--muted-2); font-weight:400; }
.sr-tot{ font-family:'Fredoka'; font-size:38px; color:var(--muted); font-weight:600; }
.sr-big-lbl{ font-size:8.5px; font-weight:900; letter-spacing:1.6px; color:var(--muted-2); margin-top:5px; }

.sr-list{ width:100%; display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.sr-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px;
  background:linear-gradient(180deg, rgba(40,31,86,.8), rgba(18,14,46,.9));
  border:1px solid var(--line-2); text-align:left;
  animation:riseIn .45s cubic-bezier(.22,1,.36,1) both;
}
.sr-item.ok{ border-color:rgba(59,224,127,.32); }
.sr-item.fail{ border-color:rgba(255,77,109,.3); opacity:.75; }
.sr-item .si-flag{ font-size:15px; }
.sr-item .si-num{ flex:1; font-size:12px; font-weight:700; color:var(--ink); font-family:'Fredoka'; letter-spacing:.4px; }
.sr-item .si-cnt{ font-family:'Fredoka'; font-size:12.5px; font-weight:600; }
.sr-item.ok .si-cnt{ color:#7BF2AA; }
.sr-item.fail .si-cnt{ color:#FF8FA3; }
.sr-item .si-tick{ font-size:11px; }

.sr-earn{
  width:100%; margin-top:14px; padding:11px 14px; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(72,52,20,.6), rgba(26,18,48,.9));
  border:1px solid rgba(255,190,90,.28);
  box-shadow:0 0 24px -8px rgba(255,176,32,.7), inset 0 1px 0 rgba(255,255,255,.07);
}
.sr-earn-lbl{ font-size:8.5px; font-weight:900; letter-spacing:1.1px; color:var(--muted); }
.sr-earn-val{
  font-family:'Fredoka'; font-size:19px; font-weight:600;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 45%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,160,20,.55));
}
#srDone{ margin-top:16px; }

/* coin that flies to the wallet chip */
.fly-coin{
  position:fixed; z-index:95; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; pointer-events:none;
  background:radial-gradient(circle at 34% 28%, #FFF6D8, #FFC93C 46%, #C97C00 100%);
  box-shadow:0 0 18px 2px rgba(255,190,50,.9), inset 0 -2px 4px rgba(0,0,0,.35);
  transition:transform .82s cubic-bezier(.5,-0.35,.5,1), opacity .3s .55s;
}

/* ---------- 3D withdraw page ---------- */
.wd-page{
  position:fixed; inset:0; z-index:88; overflow-y:auto;
  background:radial-gradient(circle at 50% 0%, rgba(46,32,88,.98), rgba(6,5,22,1) 62%);
  transform:translateX(100%); opacity:0; visibility:hidden;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s, visibility .3s;
  padding-bottom:calc(30px + var(--safe-b));
}
.wd-page.open{ transform:translateX(0); opacity:1; visibility:visible; }
.wd-page .rays{ opacity:.5; }

.wd-top{
  position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:12px;
  padding:14px 16px 12px; background:linear-gradient(180deg, rgba(10,8,30,.96), rgba(10,8,30,.6) 70%, transparent);
  backdrop-filter:blur(8px);
}
.wd-back{
  width:36px; height:36px; border-radius:12px; flex:0 0 auto; cursor:pointer;
  display:grid; place-items:center; font-size:20px; line-height:1; color:var(--ink);
  background:linear-gradient(180deg, rgba(58,45,110,.9), rgba(24,19,58,.95));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 rgba(0,0,0,.35);
  transition:transform .14s;
}
.wd-back:active{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.35); }
.wd-top-t{
  flex:1; font-family:'Fredoka'; font-size:15px; font-weight:600; letter-spacing:2px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 55%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wd-top-r{
  font-family:'Fredoka'; font-size:13px; font-weight:600; color:var(--gold-l);
  padding:5px 10px; border-radius:9px; background:rgba(255,176,32,.12);
  border:1px solid rgba(255,176,32,.26);
}

/* step rail */
.wd-steps{ position:relative; z-index:2; display:flex; gap:3px; padding:6px 12px 18px; }
.wd-step{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  position:relative; opacity:.4; transition:opacity .3s;
}
.wd-step::after{
  content:''; position:absolute; top:12px; left:calc(50% + 13px); right:calc(-50% + 13px);
  height:2px; border-radius:2px; background:rgba(255,255,255,.1);
}
.wd-step:last-child::after{ display:none; }
.wd-step i{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-family:'Fredoka'; font-size:11.5px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--muted);
  transition:all .3s;
}
.wd-step span{ font-size:7.5px; font-weight:900; letter-spacing:.3px; color:var(--muted-2); text-transform:uppercase; white-space:nowrap; }
.wd-step.on{ opacity:1; }
.wd-step.on i{
  background:linear-gradient(180deg,#FFD166,#FFA51F); color:#3A2200; border-color:rgba(255,220,140,.9);
  box-shadow:0 0 0 4px rgba(255,176,32,.14), 0 0 18px -2px rgba(255,176,32,.9);
}
.wd-step.on span{ color:var(--gold-l); }
.wd-step.done i{ background:linear-gradient(180deg,#7BF2AA,#0E8B46); color:#062514; border-color:rgba(120,255,180,.6); }
.wd-step.done{ opacity:.85; }

.wd-body{ position:relative; z-index:2; padding:0 16px; }
.wd-body > *{ animation:riseIn .42s cubic-bezier(.22,1,.36,1) both; }

.wd-h{
  font-family:'Fredoka'; font-size:19px; font-weight:600; color:var(--ink);
  letter-spacing:.3px; margin:2px 0 3px;
}
.wd-p{ font-size:11px; color:var(--muted-2); font-weight:600; margin:0 0 15px; line-height:1.5; }

/* 3D choice cards */
.c3d{
  position:relative; width:100%; display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin-bottom:9px; border-radius:17px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg, #2C2158 0%, #191340 55%, #120E33 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.45), 0 5px 0 #0A0722, 0 10px 18px -8px rgba(0,0,0,.9);
  transition:transform .13s, box-shadow .13s, border-color .25s;
  overflow:hidden;
}
.c3d::before{
  content:''; position:absolute; top:0; left:0; right:0; height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent);
  pointer-events:none;
}
.c3d:active{
  transform:translateY(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 #0A0722, 0 4px 10px -6px rgba(0,0,0,.9);
}
.c3d.sel{
  border-color:rgba(255,190,90,.6);
  background:linear-gradient(180deg, #4A3520 0%, #2A1D48 55%, #1A1238 100%);
  box-shadow:inset 0 1px 0 rgba(255,230,170,.24), inset 0 -2px 0 rgba(0,0,0,.4), 0 5px 0 #6B3D00, 0 0 26px -4px rgba(255,176,32,.85);
}
.c3d .c-ico{
  width:42px; height:42px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
  font-size:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 3px 8px rgba(0,0,0,.4);
}
.c3d.sel .c-ico{
  background:linear-gradient(160deg, rgba(255,214,120,.34), rgba(255,138,0,.1));
  border-color:rgba(255,200,100,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 16px -2px rgba(255,176,32,.8);
}
.c3d .c-mid{ flex:1; min-width:0; }
.c3d .c-mid b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
.c3d .c-mid span{ font-size:10px; color:var(--muted-2); font-weight:600; }
.c3d .c-arr{ font-size:16px; color:var(--muted-2); }

/* amount pad */
.amt3d{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; }
.amt3d button{
  position:relative; padding:15px 4px; border-radius:15px; cursor:pointer;
  font-family:'Fredoka'; font-size:17px; font-weight:600; color:var(--ink);
  background:linear-gradient(180deg, #2C2158, #161139);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 4px 0 #0A0722, 0 8px 14px -8px rgba(0,0,0,.9);
  transition:transform .13s, box-shadow .13s, color .2s;
}
.amt3d button:active{ transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #0A0722; }
.amt3d button.on{
  color:#3A2200; border-color:rgba(255,220,140,.85);
  background:linear-gradient(180deg,#FFE9A8,#FFB020 60%,#E07A00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 #8A4A00, 0 0 24px -3px rgba(255,176,32,.9);
}

/* summary slab */
.sum3d{
  padding:14px 15px; border-radius:17px; margin:14px 0;
  background:linear-gradient(180deg, rgba(44,34,92,.85), rgba(16,12,44,.95));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px -10px rgba(0,0,0,.9);
}
.sum3d .r{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.sum3d .r + .r{ border-top:1px solid rgba(255,255,255,.05); }
.sum3d .r .k{ font-size:11px; color:var(--muted-2); font-weight:700; }
.sum3d .r .v{ font-size:12.5px; color:var(--ink); font-weight:700; }
.sum3d .r.tot .k{ color:var(--gold-l); font-size:11.5px; }
.sum3d .r.tot .v{
  font-family:'Fredoka'; font-size:20px; font-weight:600;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 45%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,160,20,.5));
}

/* withdraw success */
.wd-done{ text-align:center; padding:24px 0 6px; }
.wd-done .d-ico{
  width:88px; height:88px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; font-size:42px;
  background:radial-gradient(circle at 34% 28%, #B6FFD4, #3BE07F 52%, #0E8B46 100%);
  box-shadow:0 0 0 8px rgba(59,224,127,.1), 0 0 46px -4px rgba(59,224,127,.9), inset 0 -4px 8px rgba(0,0,0,.3);
  animation:badgePop .6s cubic-bezier(.2,1.6,.4,1) both, floaty 3s ease-in-out infinite 1s;
}
.wd-done .d-t{
  font-family:'Fredoka'; font-size:22px; font-weight:600; letter-spacing:.4px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 50%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wd-done .d-s{ font-size:11.5px; color:var(--muted); font-weight:600; margin-top:6px; line-height:1.6; }

/* ---------- profile: glowing icon badges ---------- */
.mi-ico{
  width:36px; height:36px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  font-size:16px; position:relative;
  background:linear-gradient(160deg, rgba(255,196,80,.20), rgba(255,138,0,.05));
  border:1px solid rgba(255,190,90,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 14px -4px rgba(255,170,30,.6);
  animation:miGlow 3.4s ease-in-out infinite;
}
.mi-ico > span{
  line-height:1; display:block;
  filter:drop-shadow(0 0 6px rgba(255,190,70,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.55));
  animation:miFloat 3.8s ease-in-out infinite;
}
.menu-item:nth-child(2) .mi-ico, .menu-item:nth-child(2) .mi-ico > span{ animation-delay:.4s; }
.menu-item:nth-child(3) .mi-ico, .menu-item:nth-child(3) .mi-ico > span{ animation-delay:.8s; }
.menu-item:nth-child(4) .mi-ico, .menu-item:nth-child(4) .mi-ico > span{ animation-delay:1.2s; }
@keyframes miGlow{
  0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px -5px rgba(255,170,30,.5); }
  50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 20px -2px rgba(255,180,50,.85); }
}
@keyframes miFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.07); } }

/* avatar glow pulse */
.avatar-ring{ animation:avGlow 4s ease-in-out infinite; }
@keyframes avGlow{
  0%,100%{ box-shadow:0 0 0 3px rgba(255,176,32,.16), 0 0 26px -6px rgba(255,176,32,.6); }
  50%{ box-shadow:0 0 0 4px rgba(255,176,32,.3), 0 0 40px -2px rgba(255,176,32,.95); }
}

/* ============================================================
   V3 — SVG icons, country detector, full-page sub screens
   ============================================================ */

/* ---------- SVG icon sizing ---------- */
.wc-ico{ display:grid; place-items:center; }
.wc-ico svg{ width:18px; height:18px; color:var(--gold-l); }
.btn-ico{ display:inline-flex; align-items:center; justify-content:center; }
.btn-ico svg{ width:17px; height:17px; }
.btn-xl .btn-ico svg{ width:19px; height:19px; }
.f-ico{ display:grid; place-items:center; color:var(--muted); }
.f-ico svg{ width:17px; height:17px; }
.mi-arr{ display:grid; place-items:center; }
.mi-arr svg{ width:15px; height:15px; color:var(--muted-2); transition:transform .2s, color .2s; }
.menu-item:active .mi-arr svg{ transform:translateX(3px); color:var(--gold-l); }

/* tab bar icons */
.t-ico{ filter:none !important; opacity:.5; display:grid; place-items:center; }
.t-ico svg{ width:23px; height:23px; }
.tab.active .t-ico{ opacity:1; filter:drop-shadow(0 4px 10px rgba(255,160,20,.7)) !important; }

/* profile icon badges — gold stroke, no emoji */
.mi-ico{ color:var(--gold-l); }
.mi-ico svg{ width:19px; height:19px; filter:drop-shadow(0 0 5px rgba(255,190,70,.75)); }
.mi-ico > span{ display:none; }
.menu-item:active .mi-ico{ transform:scale(.92); }

/* ---------- country detector card ---------- */
.field.country{
  padding:10px 12px; gap:11px; cursor:pointer;
  background:linear-gradient(135deg, rgba(255,176,32,.11) 0%, rgba(20,16,51,.92) 58%);
  border:1px solid rgba(255,190,90,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px -14px rgba(255,160,20,.55);
}
.field.country:active{ transform:scale(.985); }
.cf-badge{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,196,80,.24), rgba(255,138,0,.06));
  border:1px solid rgba(255,190,90,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 14px -4px rgba(255,170,30,.75);
}
.cf-flag{ font-size:21px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.cf-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cf-name{ font-family:'Fredoka'; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-sub{ display:flex; align-items:center; gap:5px; font-size:9px; color:var(--muted-2); font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.cf-sub b{ font-family:'Fredoka'; color:var(--gold-l); font-size:11px; letter-spacing:.4px; }
.cf-sub i{ font-style:normal; opacity:.45; }
.cf-chip{
  font-size:7.5px; font-weight:900; letter-spacing:.8px; padding:3px 7px; border-radius:6px;
  color:var(--gold-l); background:rgba(255,176,32,.13); border:1px solid rgba(255,176,32,.3);
  box-shadow:0 0 10px -3px rgba(255,176,32,.6);
}
.cf-chip.live{ color:#0B2E19; background:linear-gradient(180deg,#7BF2AA,#3BE07F); border-color:transparent;
  box-shadow:0 0 12px -2px rgba(59,224,127,.9); }
.cf-chev{ display:grid; place-items:center; color:var(--muted-2); }
.cf-chev svg{ width:15px; height:15px; }
#countryField.detected .cf-badge{ animation:cfPop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes cfPop{ 0%{transform:scale(1);} 45%{transform:scale(1.18) rotate(-4deg);} 100%{transform:scale(1);} }

/* ---------- live detect line ---------- */
.detect-line{
  display:flex; align-items:center; gap:7px; margin:-1px 3px 10px;
  font-size:9.5px; font-weight:700; letter-spacing:.3px; color:var(--muted-2);
  opacity:.7; transition:color .25s, opacity .25s;
}
.detect-line.on{ color:var(--gold-l); opacity:1; }
.dl-dot{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); flex:0 0 auto; transition:.25s; }
.detect-line.on .dl-dot{ background:var(--emerald); box-shadow:0 0 9px rgba(59,224,127,.95); animation:dlPulse 1.8s ease-in-out infinite; }
@keyframes dlPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.45); opacity:.6; } }

/* ---------- full page sub screens ---------- */
.subpage{
  position:fixed; inset:0; margin:0 auto; max-width:470px; z-index:120;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 45% at 50% -10%, rgba(255,150,30,.18) 0%, rgba(255,120,0,.05) 40%, transparent 70%),
    radial-gradient(90% 40% at 100% 10%, rgba(139,108,255,.16) 0%, transparent 62%),
    linear-gradient(180deg, #0A0822 0%, #06051A 60%, #08061C 100%);
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  overflow:hidden;
}
.subpage.open{ transform:none; opacity:1; pointer-events:auto; }
.sp-rays{
  position:absolute; left:50%; top:-6%; width:170%; aspect-ratio:1; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,178,50,.10) 0deg 4deg, rgba(255,178,50,0) 4deg 15deg);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 62%);
  pointer-events:none; opacity:.8;
}
.sp-head{
  position:relative; z-index:2; display:flex; align-items:center; gap:11px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
}
.sp-back{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--line-2); color:var(--ink); cursor:pointer;
  transition:transform .15s, background .2s;
}
.sp-back svg{ width:19px; height:19px; }
.sp-back:active{ transform:scale(.92); background:rgba(255,255,255,.1); }
.sp-head-t{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.sp-kicker{ font-size:7.5px; font-weight:900; letter-spacing:2.2px; color:var(--muted-2); }
.sp-head-t b{ font-family:'Fredoka'; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.2px; }
.sp-head-r{ display:flex; align-items:center; gap:6px; }
.sp-body{
  position:relative; z-index:2; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 16px calc(34px + env(safe-area-inset-bottom, 0px));
}
.sp-body::-webkit-scrollbar{ width:0; }
.sp-body > *{ animation:spIn .5s cubic-bezier(.22,1,.36,1) both; }
.sp-body > *:nth-child(1){ animation-delay:.03s; }
.sp-body > *:nth-child(2){ animation-delay:.08s; }
.sp-body > *:nth-child(3){ animation-delay:.13s; }
.sp-body > *:nth-child(4){ animation-delay:.18s; }
.sp-body > *:nth-child(5){ animation-delay:.23s; }
.sp-body > *:nth-child(6){ animation-delay:.28s; }
.sp-body > *:nth-child(7){ animation-delay:.33s; }
@keyframes spIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }

/* sub page building blocks */
.sp-card{
  border-radius:20px; padding:16px; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(40,31,86,.72), rgba(19,15,48,.92));
  border:1px solid var(--line-2);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
}
.sp-hero{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg, rgba(255,176,32,.16), rgba(24,18,58,.94) 62%);
  border:1px solid rgba(255,190,90,.24);
}
.sp-hero::after{
  content:''; position:absolute; inset:-40% -10% auto; height:150%;
  background:repeating-conic-gradient(from 0deg, rgba(255,178,50,.10) 0deg 4deg, transparent 4deg 16deg);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 66%);
  mask-image:radial-gradient(circle at 50% 40%, #000, transparent 66%);
  pointer-events:none;
}
.sp-hero > *{ position:relative; z-index:1; }
.sp-big-ico{
  width:60px; height:60px; margin:2px auto 10px; border-radius:20px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,196,80,.26), rgba(255,138,0,.07));
  border:1px solid rgba(255,190,90,.34); color:var(--gold-l);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 26px -6px rgba(255,170,30,.85);
  animation:miGlow 3.4s ease-in-out infinite;
}
.sp-big-ico svg{ width:28px; height:28px; filter:drop-shadow(0 0 8px rgba(255,190,70,.8)); }
.sp-h1{ font-family:'Fredoka'; font-size:19px; font-weight:600; letter-spacing:.2px; }
.sp-p{ font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.65; margin-top:5px; }
.sp-amount{
  font-family:'Fredoka'; font-size:30px; font-weight:600; letter-spacing:.4px; margin-top:8px;
  background:linear-gradient(180deg,#FFF6D8,#FFD166 50%,#FFA51F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-sec{ font-size:9px; font-weight:900; letter-spacing:1.8px; color:var(--muted-2); margin:16px 4px 9px; }
.sp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sp-stat{
  padding:12px 8px; border-radius:15px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line-2);
}
.sp-stat b{ display:block; font-family:'Fredoka'; font-size:15px; font-weight:600; color:var(--gold-l); }
.sp-stat span{ display:block; font-size:8px; font-weight:800; letter-spacing:.6px; color:var(--muted-2); margin-top:3px; text-transform:uppercase; }

.sp-row{
  display:flex; align-items:center; gap:11px; padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sp-row:last-child{ border-bottom:none; padding-bottom:2px; }
.sp-row:first-child{ padding-top:2px; }
.sp-row .r-ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.055); border:1px solid var(--line-2); color:var(--gold-l);
}
.sp-row .r-ico svg{ width:16px; height:16px; }
.sp-row .r-mid{ flex:1; min-width:0; }
.sp-row .r-mid b{ display:block; font-size:11.5px; font-weight:700; color:var(--ink); }
.sp-row .r-mid span{ display:block; font-size:9px; font-weight:600; color:var(--muted-2); margin-top:2px; }
.sp-row .r-val{ font-family:'Fredoka'; font-size:12px; font-weight:600; color:var(--emerald); white-space:nowrap; }
.sp-row .r-val.out{ color:#FF8FA3; }
.sp-row .r-val.mut{ color:var(--muted); }

.sp-step{ display:flex; gap:12px; padding:12px; border-radius:16px; background:rgba(255,255,255,.032); border:1px solid var(--line-soft); margin-bottom:9px; }
.sp-step .s-n{
  width:30px; height:30px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center;
  font-family:'Fredoka'; font-size:13px; font-weight:600; color:#3A1E00;
  background:linear-gradient(180deg,#FFE082,#FFB020 55%,#FF8A00);
  box-shadow:0 3px 0 #A85600, inset 0 1px 0 rgba(255,255,255,.5);
}
.sp-step .s-t{ font-family:'Fredoka'; font-size:12px; font-weight:600; }
.sp-step .s-d{ font-size:9.5px; color:var(--muted); margin-top:3px; line-height:1.6; font-weight:600; }

.sp-opt{
  display:flex; align-items:center; gap:11px; width:100%; padding:13px; margin-bottom:8px;
  border-radius:15px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid var(--line-2); color:var(--ink); font-family:inherit;
  transition:transform .15s, border-color .2s, background .2s;
}
.sp-opt:active{ transform:scale(.985); }
.sp-opt.sel{ border-color:rgba(255,176,32,.55); background:linear-gradient(180deg, rgba(255,176,32,.16), rgba(255,138,0,.05)); box-shadow:0 0 20px -8px rgba(255,170,30,.9); }
.sp-opt .o-t{ flex:1; font-size:12px; font-weight:700; }
.sp-opt .o-t em{ display:block; font-style:normal; font-size:9px; color:var(--muted-2); font-weight:600; margin-top:2px; }
.sp-opt .o-check{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; color:#0B2E19; }
.sp-opt.sel .o-check{ background:linear-gradient(180deg,#7BF2AA,#3BE07F); border-color:transparent; }
.sp-opt .o-check svg{ width:12px; height:12px; opacity:0; }
.sp-opt.sel .o-check svg{ opacity:1; }

.sp-copy{
  display:flex; align-items:center; gap:8px; padding:10px 10px 10px 13px; border-radius:13px;
  background:rgba(0,0,0,.35); border:1px dashed rgba(255,190,90,.3);
}
.sp-copy .c-txt{ flex:1; min-width:0; font-size:10px; font-weight:700; color:var(--gold-l); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-copy button{
  flex:0 0 auto; padding:7px 11px; border-radius:9px; border:none; cursor:pointer;
  font-family:inherit; font-size:8.5px; font-weight:900; letter-spacing:.8px; color:#3A1E00;
  background:linear-gradient(180deg,#FFE082,#FFB020 55%,#FF8A00);
  box-shadow:0 2px 0 #A85600;
}
.sp-copy button:active{ transform:translateY(1px); box-shadow:none; }

.sp-badge-ok{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  font-size:8.5px; font-weight:900; letter-spacing:.8px; color:#7BF2AA;
  background:rgba(59,224,127,.12); border:1px solid rgba(59,224,127,.3);
}
.sp-badge-ok i{ width:6px; height:6px; border-radius:50%; background:#3BE07F; box-shadow:0 0 8px #3BE07F; animation:dlPulse 1.8s infinite; }

.sp-ref{
  display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.sp-ref:last-child{ border-bottom:none; }
.sp-ref .rf-av{
  width:32px; height:32px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-family:'Fredoka'; font-size:12px; font-weight:600; color:#3A1E00;
  background:linear-gradient(160deg,#FFE082,#FFB020 60%,#FF8A00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sp-ref .rf-mid{ flex:1; min-width:0; }
.sp-ref .rf-mid b{ display:block; font-size:11px; font-weight:700; }
.sp-ref .rf-mid span{ display:block; font-size:8.5px; color:var(--muted-2); font-weight:600; margin-top:1px; }
.sp-ref .rf-val{ font-family:'Fredoka'; font-size:11.5px; color:var(--emerald); font-weight:600; }

@media (max-height:700px){
  .sp-body{ padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* gold CTA (was missing) */
.btn-gold{
  background:linear-gradient(180deg,#FFE9A8 0%,#F7C948 46%,#E0A21C 100%);
  color:#3A1E00;
  box-shadow:0 6px 0 #8A5A05, 0 16px 30px -12px rgba(255,180,40,.7), inset 0 2px 0 rgba(255,255,255,.65);
}
.btn-gold:active{ transform:translateY(2px); box-shadow:0 3px 0 #8A5A05, inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold .btn-ico svg{ color:#3A1E00; }

/* keep closed subpage out of the a11y tree */
.subpage:not(.open){ visibility:hidden; }

/* ============================================================
   V4 — Telegram avatar, golden wheel, lock/claim states
   ============================================================ */

/* ---------- top bar: telegram profile ---------- */
.brand{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; padding:0; min-width:0;
}
.brand:active{ transform:scale(.96); }
.tg-avatar{
  position:relative; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(160deg,#2A2350,#141033);
}
.tg-avatar img{
  position:absolute; inset:0; width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block; z-index:2;
}
.tg-avatar.has-photo img{ display:block; }
.tg-initial{
  font-family:'Fredoka'; font-weight:700; font-size:16px; color:#3A1E00;
  width:100%; height:100%; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 48%,#FF8A00);
  z-index:1;
}
.tg-avatar.has-photo .tg-initial{ display:none; }
/* circular rings on the photo border */
.tg-ring{
  position:absolute; inset:-3px; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg,#FFE9A8,#FFB020,#FF8A00,#FFE9A8,#FFB020,#FF8A00,#FFE9A8);
  box-shadow:0 0 12px rgba(255,170,30,.65);
  animation:ringSpin 6s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
.tg-ring2{
  position:absolute; inset:-1.5px; border-radius:50%; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,32,.95), rgba(10,8,32,.95));
}
.tg-avatar img, .tg-initial{ z-index:2; }
.tg-name{
  font-family:'Fredoka'; font-size:10px; font-weight:600; letter-spacing:.2px;
  color:var(--ink); max-width:96px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center; line-height:1.1;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}

/* ---------- golden wheel: rim + studs ---------- */
.wheel-rim{
  position:absolute; inset:-12px; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg,
    #FFE9A8 0deg, #C8871A 26deg, #FFE9A8 52deg, #A96B08 78deg,
    #FFE9A8 104deg, #C8871A 130deg, #FFE9A8 156deg, #A96B08 182deg,
    #FFE9A8 208deg, #C8871A 234deg, #FFE9A8 260deg, #A96B08 286deg,
    #FFE9A8 312deg, #C8871A 338deg, #FFE9A8 360deg);
  box-shadow:
    0 0 0 1.5px rgba(255,240,190,.55),
    0 10px 26px rgba(0,0,0,.65),
    inset 0 0 14px rgba(0,0,0,.45);
}
.wheel-rim::after{
  content:''; position:absolute; inset:7px; border-radius:50%;
  background:linear-gradient(180deg,#1A1206,#0C0802);
  box-shadow:inset 0 0 10px rgba(0,0,0,.9);
}
.rim-stud{
  position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFF6D8, #FFC93C 55%, #A96B08);
  box-shadow:0 0 6px rgba(255,200,80,.95);
  z-index:1; pointer-events:none;
}

/* golden segment wheel */
.wheel-mini{
  background:conic-gradient(
    #FFD86B 0deg 45deg, #C8871A 45deg 90deg,
    #FFE9A8 90deg 135deg, #B5760F 135deg 180deg,
    #FFD86B 180deg 225deg, #C8871A 225deg 270deg,
    #FFE9A8 270deg 315deg, #B5760F 315deg 360deg) !important;
  box-shadow:
    0 0 0 3px rgba(60,36,0,.9),
    0 0 0 5px rgba(255,214,120,.35),
    0 0 30px rgba(255,170,40,.5),
    inset 0 0 24px rgba(90,50,0,.55) !important;
  z-index:2;
}
.wheel-mini::before{
  content:''; position:absolute; inset:0; border-radius:50%; z-index:1;
  background:
    repeating-conic-gradient(from 0deg, rgba(120,70,0,.28) 0deg 1.2deg, transparent 1.2deg 45deg),
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.42), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(90,50,0,.35) 100%);
  pointer-events:none;
}
.wheel-mini::after{
  content:''; position:absolute; inset:26%; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 38% 30%, #FFF6D8, #FFC93C 55%, #A96B08 100%);
  box-shadow:0 0 0 2px rgba(90,50,0,.6), 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8);
}
.wheel-mini .mini-gem{
  position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 35% 30%, #fff, #FF4D6D 60%, #8B0018);
  box-shadow:0 0 7px rgba(255,90,120,.9);
  transform-origin:0 0; pointer-events:none;
}

/* overlay wheel golden */
.wheel-big{
  background:conic-gradient(
    #FFD86B 0deg 45deg, #C8871A 45deg 90deg,
    #FFE9A8 90deg 135deg, #B5760F 135deg 180deg,
    #FFD86B 180deg 225deg, #C8871A 225deg 270deg,
    #FFE9A8 270deg 315deg, #B5760F 315deg 360deg) !important;
  box-shadow:
    0 0 0 4px rgba(60,36,0,.95),
    0 0 0 7px rgba(255,214,120,.4),
    0 0 70px rgba(255,170,40,.55),
    inset 0 0 70px rgba(90,50,0,.55) !important;
}
.wheel-big::before{
  content:''; position:absolute; inset:0; border-radius:50%; z-index:1; pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg, rgba(120,70,0,.3) 0deg 1.1deg, transparent 1.1deg 45deg),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.38), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(90,50,0,.4) 100%);
}
.wheel-stage::before{
  content:''; position:absolute; inset:-16px; border-radius:50%; z-index:1; pointer-events:none;
  background:conic-gradient(from 0deg,
    #FFE9A8 0deg, #C8871A 26deg, #FFE9A8 52deg, #A96B08 78deg,
    #FFE9A8 104deg, #C8871A 130deg, #FFE9A8 156deg, #A96B08 182deg,
    #FFE9A8 208deg, #C8871A 234deg, #FFE9A8 260deg, #A96B08 286deg,
    #FFE9A8 312deg, #C8871A 338deg, #FFE9A8 360deg);
  box-shadow:0 0 0 1.5px rgba(255,240,190,.5), 0 12px 34px rgba(0,0,0,.7), inset 0 0 16px rgba(0,0,0,.5);
}
.wheel-stage::after{
  content:''; position:absolute; inset:-8px; border-radius:50%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,#1A1206,#0C0802);
}
.wheel-big{ z-index:2; }
.seg-label{ color:#3A1E00 !important; text-shadow:0 1px 0 rgba(255,255,255,.5) !important; font-size:14px !important; }
.seg-label small{ display:block; font-size:7px; letter-spacing:1px; opacity:.65; font-weight:700; }

/* ---------- lock state ---------- */
.wheel-lock{
  position:absolute; inset:0; z-index:6; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.spin-stage.is-locked .wheel-lock{ opacity:1; }
.wl-chain{
  position:absolute; inset:-8%; width:116%; height:116%;
  color:#EFE6CE; opacity:1;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(255,190,70,.55));
}
.wl-chain .ch-lk{ filter:drop-shadow(0 0 4px rgba(255,238,196,.85)) drop-shadow(0 2px 2px rgba(0,0,0,.9)); }
.wl-chain .ch-lk.edge{ fill:rgba(255,238,196,.22); }
.wl-badge{
  position:relative; z-index:2;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 28%, #5A4526, #241A08 72%);
  border:2px solid rgba(255,205,95,.55);
  color:#FFD166;
  box-shadow:0 10px 26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(255,170,40,.35);
}
.wl-badge svg{ width:27px; height:27px; filter:drop-shadow(0 0 6px rgba(255,200,90,.8)); }

/* shake while locked */
.spin-stage.is-locked .wheel-mini{
  animation:wheelShake 2.8s cubic-bezier(.36,.07,.19,.97) infinite !important;
}
@keyframes wheelShake{
  0%, 68%, 100%{ transform:rotate(0deg) scale(1); }
  71%{ transform:rotate(-8deg) scale(1.01); }
  75%{ transform:rotate(7deg) scale(1.01); }
  79%{ transform:rotate(-6deg) scale(1.01); }
  83%{ transform:rotate(4.5deg) scale(1.01); }
  87%{ transform:rotate(-3deg) scale(1.005); }
  91%{ transform:rotate(1.5deg) scale(1); }
}
.spin-stage.is-locked .wheel-rim{ animation:rimShake 2.8s cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes rimShake{
  0%,68%,100%{ transform:rotate(0deg); } 71%{ transform:rotate(-8deg); }
  75%{ transform:rotate(7deg); } 79%{ transform:rotate(-6deg); }
  83%{ transform:rotate(4.5deg); } 87%{ transform:rotate(-3deg); } 91%{ transform:rotate(1.5deg); }
}

/* falling gold coins inside the wheel */
.wheel-coins{
  position:absolute; inset:6px; border-radius:50%; overflow:hidden; z-index:4;
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.spin-stage.is-locked .wheel-coins{ opacity:1; }
.coin-fall{
  position:absolute; top:-14px; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #FFF6D8, #FFC93C 52%, #A96B08 100%);
  box-shadow:0 0 8px rgba(255,200,80,.9), inset 0 -1px 2px rgba(120,70,0,.6);
  animation:coinDrop var(--dur, 1.6s) linear var(--delay, 0s) infinite;
}
.coin-fall::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  border:1px solid rgba(140,85,0,.55);
}
@keyframes coinDrop{
  0%{ transform:translateY(-16px) rotate(0deg) scale(.9); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateY(160px) rotate(420deg) scale(1); opacity:0; }
}

/* ---------- claim / claimed states ---------- */
.spin-stage.is-claim .wheel-mini{
  animation:wheelIdle 16s linear infinite, claimGlow 2.4s ease-in-out infinite !important;
}
@keyframes claimGlow{
  0%,100%{ box-shadow:0 0 0 3px rgba(60,36,0,.9), 0 0 0 5px rgba(255,214,120,.35), 0 0 26px rgba(59,224,127,.35), inset 0 0 24px rgba(90,50,0,.55); }
  50%{ box-shadow:0 0 0 3px rgba(60,36,0,.9), 0 0 0 6px rgba(123,242,170,.55), 0 0 44px rgba(59,224,127,.85), inset 0 0 24px rgba(90,50,0,.55); }
}
.spin-stage.is-claim .wheel-rim{
  box-shadow:0 0 0 1.5px rgba(160,255,200,.6), 0 10px 26px rgba(0,0,0,.65), 0 0 34px rgba(59,224,127,.55), inset 0 0 14px rgba(0,0,0,.45);
}

/* CTA button */
.wheel-cta{
  width:auto; min-width:132px; height:46px; border-radius:999px; pointer-events:auto;
  padding:0 26px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; letter-spacing:1.6px;
}
.wheel-cta .cta-lbl{ position:relative; z-index:2; }
.spin-stage.is-claim .wheel-cta{
  color:#04220F;
  background:linear-gradient(180deg,#9BF7C0,#3BE07F 46%,#12A85A);
  box-shadow:0 5px 0 #0A6B39, 0 14px 30px -8px rgba(59,224,127,.85), inset 0 2px 0 rgba(255,255,255,.55);
  animation:claimBtnGlow 2s ease-in-out infinite;
}
@keyframes claimBtnGlow{
  0%,100%{ box-shadow:0 5px 0 #0A6B39, 0 14px 30px -8px rgba(59,224,127,.7), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 0 rgba(59,224,127,.55); }
  50%{ box-shadow:0 5px 0 #0A6B39, 0 14px 30px -8px rgba(59,224,127,.7), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 14px rgba(59,224,127,0); }
}
.spin-stage.is-locked .wheel-cta,
.spin-stage.is-claimed .wheel-cta{
  color:rgba(255,249,238,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px -6px rgba(0,0,0,.9);
  animation:none; cursor:not-allowed;
}
.spin-stage.is-claimed .wheel-cta{ color:#7BF2AA; }

/* helper message under the CTA */
.spin-msg{
  max-width:250px; text-align:center; font-size:9.5px; font-weight:700; line-height:1.55;
  letter-spacing:.2px; color:var(--muted-2); margin-top:2px;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .3s, max-height .3s;
}
.spin-stage.is-locked .spin-msg,
.spin-stage.is-claimed .spin-msg{ opacity:1; max-height:44px; }
.spin-stage.is-locked .spin-msg{ color:#FFC98A; }

/* progress bar under locked message */
.spin-prog{
  width:170px; height:4px; border-radius:999px; margin:7px auto 0;
  background:rgba(255,255,255,.08); overflow:hidden;
  opacity:0; max-height:0; transition:opacity .3s;
}
.spin-stage.is-locked .spin-prog{ opacity:1; max-height:8px; }
.spin-prog i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#FFD166,#FF8A00);
  box-shadow:0 0 10px rgba(255,170,40,.8);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

.spin-prog i{
  display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#FFB020,#FFE9A8);
  box-shadow:0 0 10px rgba(255,190,70,.8);
  transition:width .5s ease;
}

/* ---------- withdraw: USDT / payment method ---------- */
.c3d .c-ico svg{ width:22px; height:22px; }
.c3d-usdt{
  border-color:rgba(38,161,123,.45);
  background:linear-gradient(180deg, #123A2C 0%, #14243F 55%, #0E1A30 100%);
}
.c3d-usdt:active{ transform:translateY(4px); }
.c3d .c-ico-usdt{
  background:linear-gradient(160deg, rgba(38,161,123,.30), rgba(38,161,123,.06));
  border-color:rgba(38,161,123,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 16px -2px rgba(38,161,123,.9);
}
.pay-hero{ text-align:center; padding:6px 4px 14px; }
.pay-logo{
  width:76px; height:76px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, rgba(38,161,123,.35), rgba(11,59,44,.15) 70%);
  border:1.5px solid rgba(38,161,123,.45);
  box-shadow:0 0 28px -4px rgba(38,161,123,.75), inset 0 1px 0 rgba(255,255,255,.16);
  animation:payPulse 2.6s ease-in-out infinite;
}
@keyframes payPulse{
  0%,100%{ box-shadow:0 0 22px -6px rgba(38,161,123,.6), inset 0 1px 0 rgba(255,255,255,.16); }
  50%{ box-shadow:0 0 40px -2px rgba(38,161,123,.95), inset 0 1px 0 rgba(255,255,255,.16); }
}
.pay-h{
  font-family:'Fredoka'; font-size:19px; font-weight:600; color:var(--ink); letter-spacing:.3px;
}
.pay-p{
  font-size:11px; line-height:1.65; color:var(--muted-2); font-weight:600;
  margin:6px auto 0; max-width:290px;
}
.pay-p b{ color:#7BF2AA; }
.pay-field{ margin-bottom:8px !important; }
.pay-mini{ display:grid; place-items:center; }
.pay-note{
  font-size:9.5px; line-height:1.55; color:#FFC98A; font-weight:700;
  margin:0 2px 14px; text-align:center;
}
.pay-saved{
  display:flex; align-items:center; gap:8px; margin:4px 0 10px;
  padding:11px 13px; border-radius:14px;
  background:rgba(38,161,123,.10); border:1px solid rgba(38,161,123,.35);
}
.pay-saved .ps-l{ font-size:9px; letter-spacing:1px; font-weight:800; color:var(--muted-2); text-transform:uppercase; }
.pay-saved b{ flex:1; font-size:12px; color:#7BF2AA; font-family:'Fredoka'; letter-spacing:.4px; }
.pay-saved button{
  border:none; background:rgba(255,255,255,.08); color:var(--ink);
  font-size:9px; font-weight:800; letter-spacing:.8px; padding:6px 10px; border-radius:9px; cursor:pointer;
}

/* avatar stacking fix: photo above the letter fallback */
.tg-avatar img{ z-index:3 !important; }
.tg-avatar .tg-initial{ z-index:1 !important; }
.tg-avatar .tg-initial{ display:none !important; }

/* ============================================================
   V5 — profile redesign, neon lucky wheel, chain break, pay flow
   ============================================================ */

/* ---------- profile hero ---------- */
.pf-hero{ position:relative; padding:6px 0 2px; overflow:hidden; }
.pf-card{
  position:relative; z-index:2; margin:0 2px;
  padding:18px 16px 14px; border-radius:24px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,176,32,.16), transparent 62%),
    linear-gradient(180deg, #241C4E 0%, #171237 58%, #100C2A 100%);
  border:1px solid rgba(255,205,120,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 16px 34px -18px rgba(0,0,0,.95), 0 0 40px -18px rgba(255,170,40,.7);
}
.pf-av-wrap{ position:relative; width:78px; height:78px; margin:0 auto 10px; display:grid; place-items:center; }
.pf-av-ring{
  position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg,#FFE9A8,#FFB020,#FF8A00,#FFE9A8,#FFB020,#FF8A00,#FFE9A8);
  box-shadow:0 0 16px rgba(255,170,30,.7);
  animation:ringSpin 7s linear infinite;
}
.pf-av-ring2{ position:absolute; inset:-2px; border-radius:50%; background:#120E2C; }
.pf-av{
  position:relative; z-index:2; width:78px; height:78px; border-radius:50%;
  display:grid; place-items:center; font-family:'Fredoka'; font-weight:700; font-size:30px; color:#3A1E00;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 48%,#FF8A00);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 8px 18px -8px rgba(0,0,0,.9);
}
.pf-name{ font-family:'Fredoka'; font-size:19px; font-weight:600; color:var(--ink); letter-spacing:.3px; }
.pf-handle{ font-size:11px; font-weight:700; color:var(--muted-2); margin-top:1px; }
.pf-uid{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px;
  font-size:8.5px; letter-spacing:1.2px; font-weight:800; color:var(--muted-2);
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.pf-uid b{ color:var(--gold-l); letter-spacing:.6px; }
.pf-xp{ margin:14px 0 0; }
.pf-xp-top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:8.5px; font-weight:800; letter-spacing:1px; color:var(--muted-2); margin-bottom:5px;
}
.pf-xp-top span:first-child{ color:var(--gold-l); }
.pf-xp-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.pf-xp-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#FF8A00,#FFD166 60%,#FFF6D8);
  box-shadow:0 0 10px rgba(255,190,70,.85);
}
.pf-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;
  padding-top:13px; border-top:1px solid rgba(255,255,255,.07);
}
.pf-stat b{ display:block; font-family:'Fredoka'; font-size:15px; font-weight:600; color:var(--gold-l); letter-spacing:.2px; }
.pf-stat span{ font-size:8.5px; font-weight:800; letter-spacing:1px; color:var(--muted-2); text-transform:uppercase; }

/* ---------- profile sections ---------- */
.pf-sec{
  display:flex; align-items:center; gap:8px;
  margin:18px 4px 8px; font-size:9px; font-weight:800; letter-spacing:1.8px;
  color:var(--muted-2); text-transform:uppercase;
}
.pf-sec::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.pf-list{
  border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(44,33,88,.72), rgba(20,15,48,.72));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px -18px rgba(0,0,0,.9);
}
.pf-list .menu-item{
  border-radius:0; margin:0; background:none; border:none; box-shadow:none;
  border-bottom:1px solid rgba(255,255,255,.055);
  padding:13px 14px;
}
.pf-list .menu-item:last-child{ border-bottom:none; }
.pf-list .menu-item:active{ background:rgba(255,255,255,.05); transform:none; }
.pf-list .mi-ico{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(160deg, rgba(255,214,120,.22), rgba(255,138,0,.05));
  border:1px solid rgba(255,200,100,.24);
  color:var(--gold-l);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.pf-list .mi-ico svg{ width:19px; height:19px; }

/* ---------- neon lucky wheel (reference style) ---------- */
.wheel-rim{
  background:
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(120,80,255,.35) 72%, transparent 82%),
    conic-gradient(from 0deg,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF) !important;
  box-shadow:
    0 0 0 1.5px rgba(150,120,255,.75),
    0 0 18px rgba(110,75,255,.85),
    0 10px 26px rgba(0,0,0,.7),
    inset 0 0 14px rgba(0,0,0,.6) !important;
}
.wheel-rim::after{
  background:linear-gradient(180deg,#1A1233,#0B0818) !important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.9) !important;
}
.rim-bulb{
  position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFE9A8 45%,#FFB020);
  box-shadow:0 0 8px 2px rgba(255,214,120,.95), 0 0 16px rgba(255,176,32,.6);
  z-index:1; pointer-events:none;
  animation:bulbPulse 1.8s ease-in-out infinite;
}
.rim-bulb.alt{
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#B8F5FF 45%,#22D3EE);
  box-shadow:0 0 8px 2px rgba(120,235,255,.95), 0 0 16px rgba(34,211,238,.6);
  animation-delay:.9s;
}
@keyframes bulbPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.wheel-mini{
  background:conic-gradient(
    #FF3B5C 0deg 45deg, #FF9F1C 45deg 90deg,
    #FFD166 90deg 135deg, #2ED573 135deg 180deg,
    #00C2D1 180deg 225deg, #4B7BFF 225deg 270deg,
    #A55EEA 270deg 315deg, #FF5FA2 315deg 360deg) !important;
  box-shadow:
    0 0 0 3px rgba(18,12,40,.95),
    0 0 0 5px rgba(150,120,255,.45),
    0 0 34px rgba(110,75,255,.55),
    inset 0 0 26px rgba(0,0,0,.45) !important;
}
.wheel-mini::before{
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0deg .7deg, transparent .7deg 45deg),
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.45), transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.35) 100%) !important;
}
.wheel-mini::after{
  background:radial-gradient(circle at 38% 28%, #FFFFFF, #FFE9A8 42%, #FFB020 100%) !important;
  box-shadow:0 0 0 2px rgba(20,12,40,.9), 0 0 18px rgba(255,190,70,.8), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.hub-lbl{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; font-family:'Fredoka'; font-weight:700; font-size:11px; letter-spacing:1.4px;
  color:#4A2400; text-shadow:0 1px 0 rgba(255,255,255,.65); pointer-events:none;
}
.wheel-big{
  background:conic-gradient(
    #FF3B5C 0deg 45deg, #FF9F1C 45deg 90deg,
    #FFD166 90deg 135deg, #2ED573 135deg 180deg,
    #00C2D1 180deg 225deg, #4B7BFF 225deg 270deg,
    #A55EEA 270deg 315deg, #FF5FA2 315deg 360deg) !important;
  box-shadow:
    0 0 0 4px rgba(18,12,40,.95),
    0 0 0 8px rgba(150,120,255,.45),
    0 0 80px rgba(110,75,255,.6),
    inset 0 0 70px rgba(0,0,0,.45) !important;
}
.wheel-big::before{
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0deg .6deg, transparent .6deg 45deg),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.4), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(0,0,0,.4) 100%) !important;
}
.wheel-stage::before{
  background:conic-gradient(from 0deg,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF,#2B1B6B,#6E4BFF) !important;
  box-shadow:0 0 0 1.5px rgba(150,120,255,.7), 0 0 26px rgba(110,75,255,.8), 0 12px 34px rgba(0,0,0,.7) !important;
}
.wheel-stage::after{ background:linear-gradient(180deg,#1A1233,#0B0818) !important; }
.seg-label{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5) !important;
  font-size:13px !important; font-weight:800 !important;
}
.seg-label small{ color:rgba(255,255,255,.8); }
.wheel-pointer{ border-top-color:#FFD166 !important; filter:drop-shadow(0 0 8px rgba(255,200,80,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.8)) !important; }

/* claim glow in neon palette */
.spin-stage.is-claim .wheel-mini{
  animation:wheelIdle 16s linear infinite, claimGlow 2.4s ease-in-out infinite !important;
}
@keyframes claimGlow{
  0%,100%{ box-shadow:0 0 0 3px rgba(18,12,40,.95), 0 0 0 5px rgba(150,120,255,.45), 0 0 30px rgba(59,224,127,.45), inset 0 0 26px rgba(0,0,0,.45); }
  50%{ box-shadow:0 0 0 3px rgba(18,12,40,.95), 0 0 0 7px rgba(123,242,170,.7), 0 0 50px rgba(59,224,127,.95), inset 0 0 26px rgba(0,0,0,.45); }
}
.spin-stage.is-claim .wheel-rim{
  box-shadow:0 0 0 1.5px rgba(160,255,200,.7), 0 0 26px rgba(59,224,127,.75), 0 10px 26px rgba(0,0,0,.7) !important;
}

/* ---------- chain break animation ---------- */
.wheel-lock{ z-index:7; }
.spin-stage.is-breaking .wheel-lock{ opacity:1; }
.spin-stage.is-breaking .wl-chain{ color:#FFE9A8; }
.spin-stage.is-breaking .ch-row1{ animation:chainSnapA .8s cubic-bezier(.35,.9,.25,1) forwards; }
.spin-stage.is-breaking .ch-row2{ animation:chainSnapB .8s cubic-bezier(.35,.9,.25,1) forwards; }
@keyframes chainSnapA{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  14%{ transform:translate(0,0) rotate(0deg) scale(1.03); opacity:1; }
  26%{ transform:translate(3px,0) rotate(2deg) scale(1.07); opacity:1; filter:drop-shadow(0 0 16px #FFF3C4); }
  100%{ transform:translate(74px,26px) rotate(46deg); opacity:0; }
}
@keyframes chainSnapB{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  14%{ transform:translate(0,0) rotate(0deg) scale(1.03); opacity:1; }
  26%{ transform:translate(-3px,0) rotate(-2deg) scale(1.07); opacity:1; filter:drop-shadow(0 0 16px #FFF3C4); }
  100%{ transform:translate(-74px,26px) rotate(-46deg); opacity:0; }
}
.spin-stage.is-breaking .wl-badge{
  animation:lockPop .9s cubic-bezier(.3,.9,.2,1) forwards;
}
@keyframes lockPop{
  0%{ transform:translateY(0) scale(1) rotate(0); opacity:1; }
  20%{ transform:translateY(-4px) scale(1.1) rotate(-8deg); }
  40%{ transform:translateY(-2px) scale(1.16) rotate(9deg); }
  60%{ transform:translateY(6px) scale(.9) rotate(-14deg); opacity:.85; }
  100%{ transform:translateY(64px) scale(.5) rotate(26deg); opacity:0; }
}
.break-flash{
  position:absolute; inset:-10%; border-radius:50%; z-index:8; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,214,120,.7) 34%, transparent 66%);
  opacity:0;
}
.spin-stage.is-breaking .break-flash{ animation:flashBurst .7s ease-out forwards; }
@keyframes flashBurst{
  0%{ opacity:0; transform:scale(.4); }
  18%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.5); }
}
.spin-stage.is-breaking .wheel-coins{ opacity:1; }

/* ---------- withdraw: method list + payout details ---------- */
.pay-list{ display:flex; flex-direction:column; }
.pay-state{
  font-size:8px; font-weight:900; letter-spacing:.9px; padding:4px 8px; border-radius:999px;
  flex:0 0 auto;
}
.pay-state.ok{ color:#7BF2AA; background:rgba(59,224,127,.13); border:1px solid rgba(59,224,127,.32); }
.pay-state.no{ color:#FFC98A; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.3); }
.pay-hint{ font-size:9px; color:var(--muted-2); font-weight:600; text-align:center; margin-top:12px; }

.pay-hero.green .pay-logo.green{
  background:radial-gradient(circle at 34% 28%, rgba(38,161,123,.4), rgba(11,59,44,.15) 70%);
  border-color:rgba(38,161,123,.5);
}
.pay-logo span{ font-size:34px; line-height:1; }

.pay-fld{ display:block; margin-bottom:10px; }
.pf-l{
  display:block; font-size:9px; font-weight:800; letter-spacing:1.1px;
  color:var(--muted-2); text-transform:uppercase; margin:0 0 6px 4px;
}
.pf-i{
  width:100%; height:50px; padding:0 15px; border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  color:var(--ink); font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.pf-i::placeholder{ color:rgba(255,255,255,.28); font-weight:500; }
.pf-i:focus{
  border-color:rgba(255,190,90,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 3px rgba(255,176,32,.14);
}

.pay-mini-card{
  display:flex; align-items:center; gap:10px; margin:0 0 13px;
  padding:11px 12px; border-radius:15px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
}
.pmc-ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  font-size:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.pmc-ico.green{ background:rgba(38,161,123,.14); border-color:rgba(38,161,123,.4); }
.pmc-mid{ flex:1; min-width:0; }
.pmc-mid b{ display:block; font-size:12.5px; font-weight:800; color:var(--ink); }
.pmc-mid span{ font-size:10px; color:var(--muted-2); font-weight:600; }
.pmc-edit{
  border:none; cursor:pointer; flex:0 0 auto;
  font-size:8.5px; font-weight:900; letter-spacing:.9px; color:var(--gold-l);
  padding:6px 10px; border-radius:9px;
  background:rgba(255,176,32,.13); border:1px solid rgba(255,176,32,.32);
}

/* ============================================================
   V6 — top bar profile card (glow + blend) & bigger 3D wheel
   ============================================================ */

/* ---------- top bar profile pill ---------- */
.topbar .brand{
  flex-direction:row; align-items:center; gap:9px;
  padding:5px 11px 5px 5px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,214,120,.10), rgba(255,138,0,.02)),
    linear-gradient(180deg, rgba(28,22,58,.92), rgba(14,10,36,.92));
  border:1px solid rgba(255,200,110,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 6px 18px rgba(0,0,0,.45),
    0 0 22px rgba(255,170,40,.16);
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  max-width:calc(100% - 116px);
  overflow:hidden;
}
.topbar .brand::before{
  content:''; position:absolute; inset:-40% -10%; pointer-events:none;
  background:radial-gradient(circle at 18% 50%, rgba(255,190,70,.22), transparent 60%);
  opacity:.9;
}
.topbar .brand:active{ transform:scale(.965); }
.topbar .brand:active,
.topbar .brand:hover{
  border-color:rgba(255,214,120,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 22px rgba(0,0,0,.5), 0 0 30px rgba(255,170,40,.3);
}

.tg-avatar{
  width:36px; height:36px;
  background:linear-gradient(160deg,#2A2350,#141033);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.55);
}
.tg-halo{
  position:absolute; inset:-9px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(255,190,70,.5), rgba(255,120,0,.14) 55%, transparent 72%);
  filter:blur(4px);
  animation:haloPulse 3.4s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{ opacity:.55; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }
.tg-ring{ inset:-2.5px; }
.tg-ring2{ inset:-1.2px; }
.tg-live{
  position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#B9FFD2,#22C55E 60%,#128A3E);
  border:2px solid #0B0820; z-index:4;
  box-shadow:0 0 8px rgba(34,197,94,.9);
}
.tg-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; z-index:2; }
.tg-name{
  font-family:'Fredoka'; font-size:12.5px; font-weight:600; letter-spacing:.15px;
  color:#FFF3D6; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:118px;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.tg-sub{
  display:flex; align-items:center; gap:4px;
  font-size:8.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,196,110,.85);
}
.tg-dot{
  width:4px; height:4px; border-radius:50%; background:#FFC46E;
  box-shadow:0 0 6px rgba(255,180,60,.95); display:inline-block;
}
.tg-chev{ display:flex; color:rgba(255,214,120,.55); z-index:2; }
.tg-chev svg{ width:12px; height:12px; }

/* ---------- bigger, deeper 3D wheel ---------- */
:root{ --wheel: 236px; }
.spin-stage{ padding:18px 14px 16px; }
.wheel-wrap{ gap:16px; margin-top:10px; }
.wheel-holder{
  width:var(--wheel); height:var(--wheel);
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.75));
}
.wheel-mini{
  width:var(--wheel) !important; height:var(--wheel) !important;
  box-shadow:
    0 0 0 2px rgba(10,7,26,.95),
    0 0 0 5px rgba(150,120,255,.35),
    0 0 0 8px rgba(10,7,26,.9),
    0 0 0 9.5px rgba(190,160,255,.5),
    0 0 46px rgba(110,75,255,.6),
    0 18px 34px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 10px 26px rgba(255,255,255,.10),
    inset 0 -18px 34px rgba(0,0,0,.55) !important;
}
/* segment shading for 3D depth */
.wheel-mini::before{
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.62) 0deg .8deg, rgba(0,0,0,.35) .8deg 1.6deg, transparent 1.6deg 45deg),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0%, transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.22) 78%, rgba(0,0,0,.52) 100%),
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.5), transparent 44%) !important;
}
.wheel-mini::after{
  width:26% !important; height:26% !important;
  background:
    radial-gradient(circle at 36% 26%, #FFFFFF, #FFF0BE 38%, #FFC13C 68%, #C8830B 100%) !important;
  box-shadow:
    0 0 0 3px rgba(14,9,34,.95),
    0 0 0 5px rgba(255,235,180,.55),
    0 0 22px rgba(255,190,70,.85),
    0 6px 14px rgba(0,0,0,.6),
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(140,80,0,.55) !important;
}
.hub-lbl{ font-size:13px !important; letter-spacing:1.6px; }

/* outer 3D base plate */
.wheel-plate{
  position:absolute; inset:-34px; border-radius:50%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, rgba(120,90,255,.30), transparent 62%),
    radial-gradient(circle at 50% 50%, #221A45 0%, #140F2E 58%, #0A0720 100%);
  box-shadow:
    0 0 0 1px rgba(140,110,255,.25),
    0 0 60px rgba(110,75,255,.45),
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -14px 30px rgba(0,0,0,.7);
}
/* metallic bevel ring */
.wheel-bevel{
  position:absolute; inset:-11px; border-radius:50%; z-index:1; pointer-events:none;
  background:conic-gradient(from 210deg,
    #7A63D8 0deg, #C9B6FF 40deg, #4B3A8F 90deg, #8E76EA 140deg,
    #E6DCFF 190deg, #5B48A8 240deg, #A48CFF 290deg, #3B2C74 340deg, #7A63D8 360deg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 6px 16px rgba(0,0,0,.6),
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.65);
  opacity:.95;
}
.wheel-bevel::after{
  content:''; position:absolute; inset:6px; border-radius:50%;
  background:linear-gradient(180deg,#171029,#0B0818);
  box-shadow:inset 0 0 12px rgba(0,0,0,.95), inset 0 2px 0 rgba(255,255,255,.10);
}
/* glass gloss overlay */
.wheel-glass{
  position:absolute; inset:0; border-radius:50%; z-index:4; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 40% at 50% 6%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(ellipse 40% 22% at 24% 24%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 102%, rgba(0,0,0,.35), transparent 70%);
  mix-blend-mode:screen;
  opacity:.85;
}
.wheel-seps{
  position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none;
  background:repeating-conic-gradient(from -0.6deg,
    rgba(0,0,0,.55) 0deg 1.2deg, transparent 1.2deg 45deg);
  -webkit-mask:radial-gradient(circle, transparent 24%, #000 26%, #000 96%, transparent 98%);
  mask:radial-gradient(circle, transparent 24%, #000 26%, #000 96%, transparent 98%);
  animation:wheelIdle 14s linear infinite;
  opacity:.75;
}
.wheel-rim{ inset:-16px; }
.rim-bulb{ width:7px; height:7px; }
.wheel-pointer{ top:-10px; border-left-width:12px; border-right-width:12px; border-top-width:22px; z-index:6; }
.wheel-lock{ z-index:7; }
.break-flash{ z-index:8; }
.wheel-coins{ z-index:6; }

@media (max-width:360px){
  :root{ --wheel: 208px; }
}

/* ---------- mini wheel prize labels + stacking fix ---------- */
.wheel-plate{ z-index:0; }
.wheel-rim{ z-index:1; }
.wheel-bevel{ z-index:2; }
.wheel-mini{ z-index:3; }
.wheel-seps{ z-index:4; }
.wheel-glass{ z-index:5; }
.mini-label{
  position:absolute; left:50%; top:50%; z-index:4;
  transform-origin:50% 50%;
  font-family:'Fredoka'; font-weight:700; font-size:10.5px; letter-spacing:.2px;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
  pointer-events:none; white-space:nowrap;
  margin:-6px 0 0 -16px; width:32px; text-align:center;
}

/* ============================================================
   V7 — broadcast banner, smaller wheel, 3D gaming profile
   ============================================================ */

/* ---------- admin broadcast banner (auto swap) ---------- */
.bc-wrap{
  position:relative;
  margin:10px 0 4px;
  height:132px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(160deg,#1B1440,#0D0926);
  border:1px solid rgba(255,200,110,.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 10px 26px rgba(0,0,0,.5),
    0 0 26px rgba(255,170,40,.10);
  isolation:isolate;
}
.bc-track{
  position:absolute; inset:0; display:flex;
  transition:transform .62s cubic-bezier(.4,.05,.2,1);
  will-change:transform;
}
.bc-slide{
  position:relative; flex:0 0 100%; height:100%;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.bc-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,5,24,.92) 0%, rgba(8,5,24,.55) 46%, rgba(8,5,24,.10) 100%),
             linear-gradient(0deg, rgba(8,5,24,.85) 0%, transparent 58%);
}
.bc-txt{
  position:relative; z-index:2; padding:14px 16px; max-width:74%;
}
.bc-kicker{
  display:inline-flex; align-items:center; gap:5px;
  font-size:8px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#0B0820; background:linear-gradient(180deg,#FFE9A8,#FFB020);
  padding:3px 8px; border-radius:999px; margin-bottom:6px;
  box-shadow:0 2px 8px rgba(255,170,40,.5);
}
.bc-h{
  font-family:'Fredoka'; font-weight:700; font-size:17px; line-height:1.15;
  color:#FFF6E0; text-shadow:0 2px 10px rgba(0,0,0,.9);
  letter-spacing:.2px;
}
.bc-s{
  margin-top:3px; font-size:10.5px; font-weight:600; line-height:1.35;
  color:rgba(255,236,200,.82); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.bc-tag{
  position:absolute; top:10px; right:10px; z-index:4;
  display:inline-flex; align-items:center; gap:5px;
  font-size:8px; font-weight:800; letter-spacing:1.6px;
  color:#FFD9D9; background:rgba(220,38,38,.20);
  border:1px solid rgba(255,90,90,.45);
  padding:3px 8px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.bc-tag i{
  width:5px; height:5px; border-radius:50%; background:#FF4D4D;
  box-shadow:0 0 7px rgba(255,60,60,.95);
  animation:bcBlink 1.3s ease-in-out infinite;
}
@keyframes bcBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.bc-dots{
  position:absolute; left:16px; bottom:9px; z-index:4;
  display:flex; gap:5px;
}
.bc-dots i{
  width:5px; height:5px; border-radius:999px;
  background:rgba(255,255,255,.32); transition:all .3s ease;
}
.bc-dots i.on{
  width:16px; background:linear-gradient(90deg,#FFE9A8,#FFB020);
  box-shadow:0 0 8px rgba(255,190,70,.9);
}
.bc-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:rgba(255,255,255,.08);
}
.bc-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#FFB020,#FFE9A8);
  box-shadow:0 0 8px rgba(255,190,70,.9);
}
.bc-bar i.run{ animation:bcBar linear forwards; }
@keyframes bcBar{ from{ width:0%; } to{ width:100%; } }

/* ---------- smaller wheel ---------- */
:root{ --wheel: 178px; }
.wheel-holder{
  width:var(--wheel) !important; height:var(--wheel) !important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.7)) !important;
}
.wheel-mini{
  width:var(--wheel) !important; height:var(--wheel) !important;
}
.wheel-plate{ inset:-22px !important; }
.wheel-bevel{ inset:-8px !important; }
.wheel-rim{ inset:-12px !important; }
.rim-bulb{ width:5px !important; height:5px !important; }
.wheel-pointer{
  top:-7px !important;
  border-left-width:9px !important; border-right-width:9px !important; border-top-width:16px !important;
}
.mini-label{
  font-size:8.5px !important; margin:-5px 0 0 -14px !important; width:28px !important;
}
.hub-lbl{ font-size:10px !important; letter-spacing:1.2px !important; }
.spin-stage{ padding:12px 14px 12px !important; }
.spin-title{ font-size:19px !important; }
.wheel-wrap{ gap:12px !important; margin-top:6px !important; }

/* locked (no chain/lock): dim + desaturate the wheel */
.spin-stage.is-locked .wheel-mini{
  filter:saturate(.42) brightness(.62) !important;
  animation:wheelIdle 26s linear infinite !important;
}
.spin-stage.is-locked .wheel-rim{ opacity:.45; }
.spin-stage.is-locked .wheel-plate{ opacity:.6; }
.spin-stage.is-locked .wheel-bevel{ opacity:.45; }
.spin-stage.is-locked .mini-label{ opacity:.45; }
.spin-stage.is-breaking .break-flash{ animation:flashBurst .6s ease-out forwards; }
.spin-stage.is-breaking .wheel-mini{
  animation:wheelIdle 26s linear infinite, breakZoom .7s cubic-bezier(.3,.9,.2,1) forwards !important;
}
@keyframes breakZoom{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.07); filter:brightness(1.35) saturate(1.3); }
  100%{ transform:scale(1); filter:brightness(1) saturate(1); }
}

/* ---------- 3D gaming profile hero ---------- */
.pf-hero{ padding:6px 0 4px; }
.pf-card{
  position:relative;
  padding:20px 18px 16px !important;
  border-radius:26px !important;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(140,100,255,.30), transparent 62%),
    linear-gradient(170deg, rgba(38,28,78,.96), rgba(14,10,36,.98)) !important;
  border:1px solid rgba(160,130,255,.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 16px 40px rgba(0,0,0,.6),
    0 0 44px rgba(110,75,255,.22) !important;
  overflow:hidden;
}
.pf-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
  opacity:.5;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%);
  mask:linear-gradient(180deg,#000,transparent 70%);
}
.pf-card::after{
  content:''; position:absolute; left:50%; top:-46%; width:150%; aspect-ratio:1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,190,70,.18), transparent 58%);
  filter:blur(18px);
}

/* avatar: bigger, 3D bevel, glow */
.pf-av-wrap{
  position:relative; width:88px; height:88px; margin:0 auto 10px;
  z-index:2;
}
.pf-av-ring{
  position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(from 0deg,#FFE9A8,#FFB020,#FF7A00,#A55EEA,#4B7BFF,#FFE9A8);
  animation:ringSpin 8s linear infinite;
  box-shadow:0 0 22px rgba(255,170,40,.55), 0 0 44px rgba(110,75,255,.35);
}
.pf-av-ring2{
  position:absolute; inset:-2px; border-radius:50%;
  background:linear-gradient(180deg,#0E0A26,#0E0A26);
  box-shadow:inset 0 0 12px rgba(0,0,0,.9);
}
.pf-av{
  position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  font-family:'Fredoka'; font-weight:700; font-size:34px; color:#3A1E00;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 46%,#E07A00);
  box-shadow:
    0 0 0 2px rgba(10,7,26,.95),
    0 6px 16px rgba(0,0,0,.6),
    inset 0 3px 6px rgba(255,255,255,.85),
    inset 0 -8px 14px rgba(150,80,0,.45);
  z-index:2;
}
.pf-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-av.has-img{ background:#141033; }
.pf-edit{
  position:absolute; right:-3px; bottom:-3px; z-index:5;
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:#0B0820;
  background:linear-gradient(180deg,#FFE9A8,#FFB020);
  box-shadow:0 0 0 2px #0E0A26, 0 4px 10px rgba(0,0,0,.6), 0 0 14px rgba(255,180,50,.7);
  transition:transform .16s ease;
}
.pf-edit:active{ transform:scale(.9); }
.pf-edit svg{ width:13px; height:13px; }

.pf-name{
  font-size:20px !important; letter-spacing:.2px;
  color:#FFF6E0 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.8), 0 0 20px rgba(255,190,70,.25);
}
.pf-handle{ margin-top:2px !important; }
.pf-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px;
  font-size:9px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#0B0820; padding:4px 10px; border-radius:999px;
  background:linear-gradient(180deg,#FFE9A8,#FFB020);
  box-shadow:0 3px 10px rgba(255,170,40,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.pf-badge svg{ width:10px; height:10px; }

/* ---------- profile edit sheet ---------- */
.pe-sheet{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(4,3,14,.72); backdrop-filter:blur(6px);
}
.pe-sheet.open{ display:flex; }
.pe-box{
  width:100%; max-width:460px;
  background:linear-gradient(180deg,#1B1440,#0C0924);
  border-radius:24px 24px 0 0;
  border-top:1px solid rgba(160,130,255,.3);
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px rgba(0,0,0,.7);
  animation:peUp .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes peUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.pe-h{
  font-family:'Fredoka'; font-weight:700; font-size:16px; color:#FFF6E0;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.pe-x{
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:#C9BFFF; display:grid; place-items:center;
}
.pe-x svg{ width:14px; height:14px; }
.pe-photo-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pe-photo{
  position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 46%,#E07A00);
  display:grid; place-items:center; font-family:'Fredoka'; font-weight:700; font-size:24px; color:#3A1E00;
  box-shadow:0 0 0 2px rgba(160,130,255,.4), 0 6px 14px rgba(0,0,0,.55);
  flex:0 0 auto;
}
.pe-photo img{ width:100%; height:100%; object-fit:cover; }
.pe-photo-btns{ display:flex; flex-direction:column; gap:7px; }
.pe-btn{
  font-family:'Plus Jakarta Sans'; font-size:11px; font-weight:700; letter-spacing:.3px;
  padding:8px 14px; border-radius:11px; cursor:pointer; border:1px solid rgba(160,130,255,.3);
  background:rgba(255,255,255,.06); color:#D9D2FF;
}
.pe-btn.primary{
  background:linear-gradient(180deg,#FFE9A8,#FFB020); color:#0B0820; border-color:transparent;
  box-shadow:0 4px 12px rgba(255,170,40,.4);
}
.pe-btn:active{ transform:scale(.97); }
.pe-fld{ margin-bottom:12px; }
.pe-fld label{
  display:block; font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(200,190,255,.7); margin-bottom:6px;
}
.pe-fld input{
  width:100%; padding:12px 14px; border-radius:13px;
  background:rgba(255,255,255,.05); border:1px solid rgba(160,130,255,.24);
  color:#FFF6E0; font-family:'Plus Jakarta Sans'; font-size:13px; font-weight:600;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.pe-fld input:focus{
  border-color:rgba(255,190,70,.6);
  box-shadow:0 0 0 3px rgba(255,170,40,.14);
}
.pe-save{
  width:100%; margin-top:6px; padding:14px; border:none; border-radius:15px; cursor:pointer;
  font-family:'Fredoka'; font-weight:700; font-size:14px; letter-spacing:1px; color:#0B0820;
  background:linear-gradient(180deg,#FFF0C4,#FFC13C 55%,#F09A00);
  box-shadow:0 6px 18px rgba(255,170,40,.45), inset 0 1px 0 rgba(255,255,255,.85);
}
.pe-save:active{ transform:scale(.98); }

/* ============================================================
   V8 — REAL CARNIVAL LUCKY WHEEL (red + gold, glowing bulbs)
   ============================================================ */

/* ---- title: red banner with gold border + ribbon tails ---- */
.spin-head{ margin-bottom:2px; }
.spin-title{
  position:relative; display:inline-block;
  padding:7px 26px 8px; border-radius:10px;
  font-size:19px !important; letter-spacing:2.2px !important;
  color:#FFE9A8 !important;
  -webkit-text-fill-color:#FFE9A8 !important;
  background:linear-gradient(180deg,#F2544B 0%,#D21F26 48%,#9C0F16 100%) !important;
  border:2px solid #FFD166;
  box-shadow:
    0 0 0 3px rgba(90,6,12,.55),
    0 5px 0 #6E0A10,
    0 10px 20px rgba(0,0,0,.65),
    0 0 26px rgba(255,90,60,.55),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(90,0,0,.6) !important;
  text-shadow:0 2px 0 #7A0A10, 0 0 12px rgba(255,205,100,.85) !important;
  filter:none !important;
}
.spin-title .st{
  font-size:11px; vertical-align:2px; margin:0 7px;
  color:#FFE9A8; text-shadow:0 0 8px rgba(255,210,110,.95);
}
.spin-title::before,
.spin-title::after{
  content:''; position:absolute; top:calc(100% - 1px); width:17px; height:15px;
  background:linear-gradient(180deg,#A30F16,#64080D);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.spin-title::before{ left:-9px; clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%); }
.spin-title::after{ right:-9px; clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%); }
.spin-sub{ margin-top:7px !important; color:#FFD9A0 !important; }

/* ---- wheel body: alternating crimson / gold segments ---- */
.wheel-mini{
  background:conic-gradient(from 0deg,
    #C1121F 0deg 45deg,  #FFE3A3 45deg 90deg,
    #D62828 90deg 135deg, #FFD166 135deg 180deg,
    #A4161A 180deg 225deg, #FFE3A3 225deg 270deg,
    #C1121F 270deg 315deg, #FFD166 315deg 360deg) !important;
  box-shadow:
    0 0 0 2px rgba(58,4,8,.95),
    0 0 0 5px rgba(255,214,120,.55),
    0 0 0 8px rgba(58,4,8,.95),
    0 0 0 10px rgba(255,190,70,.75),
    0 0 34px rgba(255,80,50,.65),
    0 0 60px rgba(255,150,30,.35),
    0 14px 26px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 10px 24px rgba(255,255,255,.14),
    inset 0 -16px 30px rgba(60,0,0,.55) !important;
}
/* segment depth + gold divider lines */
.wheel-mini::before{
  background:
    repeating-conic-gradient(from -0.7deg,
      rgba(255,236,170,.95) 0deg 1.4deg,
      rgba(90,6,10,.55) 1.4deg 2.6deg,
      transparent 2.6deg 45deg),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(80,0,0,.22) 72%, rgba(60,0,0,.55) 100%),
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.42), transparent 46%) !important;
}
/* gold hub with star */
.wheel-mini::after{
  background:
    radial-gradient(circle at 36% 26%, #FFFFFF 0%, #FFF4C9 30%, #FFC93C 62%, #B5760F 100%) !important;
  box-shadow:
    0 0 0 2px rgba(90,40,0,.9),
    0 0 0 4px rgba(255,236,170,.75),
    0 0 22px rgba(255,190,70,.95),
    0 5px 12px rgba(0,0,0,.6),
    inset 0 2px 2px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(140,80,0,.55) !important;
}
.hub-lbl{ color:#5A2A00 !important; }
.hub-lbl::before{
  content:'★'; display:block; font-size:10px; line-height:1;
  color:#8A4A00; text-shadow:0 1px 0 rgba(255,255,255,.8); margin-bottom:1px;
}

/* ---- thick gold rim ---- */
.wheel-rim{
  background:conic-gradient(from 0deg,
    #FFF0C0 0deg, #C8871A 22deg, #FFE9A8 44deg, #9C6206 66deg,
    #FFE9A8 88deg, #C8871A 110deg, #FFF0C0 132deg, #9C6206 154deg,
    #FFE9A8 176deg, #C8871A 198deg, #FFF0C0 220deg, #9C6206 242deg,
    #FFE9A8 264deg, #C8871A 286deg, #FFF0C0 308deg, #9C6206 330deg,
    #FFE9A8 352deg, #FFF0C0 360deg) !important;
  box-shadow:
    0 0 0 1.5px rgba(255,244,200,.85),
    0 0 0 3px rgba(120,60,0,.55),
    0 0 24px rgba(255,150,40,.6),
    0 10px 24px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -4px 8px rgba(90,40,0,.6) !important;
}
.wheel-rim::after{
  background:linear-gradient(180deg,#3A0509,#1A0204) !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.95) !important;
}

/* ---- glowing carnival bulbs around the rim ---- */
.rim-bulb{
  width:7px !important; height:7px !important;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFF3C4 42%,#FFC93C 100%) !important;
  box-shadow:
    0 0 6px 2px rgba(255,240,180,.95),
    0 0 14px 4px rgba(255,180,50,.75),
    0 0 22px rgba(255,120,30,.45) !important;
  animation:bulbPulse 1.15s ease-in-out infinite !important;
}
.rim-bulb.alt{
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFD9D0 42%,#FF4D3D 100%) !important;
  box-shadow:
    0 0 6px 2px rgba(255,210,190,.95),
    0 0 14px 4px rgba(255,90,60,.8),
    0 0 22px rgba(255,40,20,.5) !important;
  animation-delay:.55s !important;
}

/* ---- gold separators + glass gloss ---- */
.wheel-seps{
  background:repeating-conic-gradient(from -0.7deg,
    rgba(255,240,190,.9) 0deg 1.4deg,
    rgba(80,4,8,.55) 1.4deg 2.6deg,
    transparent 2.6deg 45deg) !important;
  opacity:.9 !important;
}
.wheel-glass{
  background:
    radial-gradient(ellipse 62% 40% at 50% 5%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(ellipse 40% 22% at 24% 24%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 102%, rgba(60,0,0,.4), transparent 70%) !important;
}

/* ---- prize labels ---- */
.mini-label{
  color:#FFF8E7 !important;
  font-size:9px !important; font-weight:700 !important;
  text-shadow:
    0 1px 2px #4A0004, 0 0 4px #4A0004,
    0 0 8px rgba(0,0,0,.85) !important;
}
.mini-label::before{
  content:'★'; display:block; font-size:7px; line-height:1;
  color:#FFE9A8; text-shadow:0 1px 2px #5A0000, 0 0 6px rgba(255,190,70,.9);
  margin-bottom:1px;
}

/* ---- pointer: gold arrow with hot glow ---- */
.wheel-pointer{
  border-top-color:#FFE08A !important;
  filter:drop-shadow(0 0 7px rgba(255,200,80,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.85)) !important;
}
.wheel-pointer::after{
  content:''; position:absolute; left:50%; top:-4px; width:9px; height:9px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF,#FFC93C 60%,#B5760F);
  box-shadow:0 0 8px rgba(255,200,80,.95);
}

/* ---- warm carnival glow behind the wheel ---- */
.spin-stage::after{
  background:radial-gradient(circle,
    rgba(255,90,40,.30) 0%,
    rgba(255,170,40,.18) 42%,
    transparent 70%) !important;
  filter:blur(16px) !important;
}

/* ---- overlay wheel: same red/gold carnival look ---- */
.wheel-big{
  background:conic-gradient(from 0deg,
    #C1121F 0deg 45deg,  #FFE3A3 45deg 90deg,
    #D62828 90deg 135deg, #FFD166 135deg 180deg,
    #A4161A 180deg 225deg, #FFE3A3 225deg 270deg,
    #C1121F 270deg 315deg, #FFD166 315deg 360deg) !important;
  box-shadow:
    0 0 0 4px rgba(58,4,8,.95),
    0 0 0 8px rgba(255,214,120,.55),
    0 0 80px rgba(255,90,40,.6),
    inset 0 0 70px rgba(60,0,0,.55) !important;
}
.wheel-big::before{
  background:
    repeating-conic-gradient(from -0.7deg,
      rgba(255,240,190,.9) 0deg 1.2deg,
      rgba(80,4,8,.5) 1.2deg 2.4deg,
      transparent 2.4deg 45deg),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.4), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(60,0,0,.45) 100%) !important;
}
.seg-label{ color:#FFF8E7 !important; text-shadow:0 1px 3px #4A0004, 0 0 7px rgba(0,0,0,.9) !important; }

/* ---- pull the SMS reward boxes up ---- */
.spin-stage{ padding:10px 14px 4px !important; }
.wheel-wrap{ gap:8px !important; margin-top:2px !important; }
.prize-ticker{ margin-top:4px !important; }
.spin-prog{ margin-top:5px !important; }
.streak-card{ margin-top:8px !important; }
.sec-head{ margin:14px 2px 8px !important; }

/* ---- V8b: keep the carnival glow alive in locked state ---- */
.wheel-plate{
  background:
    radial-gradient(circle at 50% 42%, rgba(255,110,50,.32), transparent 62%),
    radial-gradient(circle at 50% 50%, #3A0A0C 0%, #1E0406 58%, #120204 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,170,80,.28),
    0 0 60px rgba(255,90,40,.45),
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -14px 30px rgba(0,0,0,.7) !important;
}
.wheel-bevel{
  background:conic-gradient(from 210deg,
    #B5760F 0deg, #FFE9A8 40deg, #8A4A00 90deg, #E0A62A 140deg,
    #FFF0C0 190deg, #9C6206 240deg, #FFD166 290deg, #6E3A00 340deg, #B5760F 360deg) !important;
  box-shadow:
    0 0 0 1px rgba(255,240,190,.35),
    0 6px 16px rgba(0,0,0,.6),
    inset 0 2px 2px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.7) !important;
}
.wheel-bevel::after{ background:linear-gradient(180deg,#2A0508,#140203) !important; }
.spin-stage.is-locked .wheel-mini{
  filter:saturate(.92) brightness(.84) !important;
  animation:wheelIdle 26s linear infinite !important;
}
.spin-stage.is-locked .wheel-rim{ opacity:.9 !important; }
.spin-stage.is-locked .wheel-plate{ opacity:.8 !important; }
.spin-stage.is-locked .wheel-bevel{ opacity:.8 !important; }
.spin-stage.is-locked .mini-label{ opacity:.9 !important; }

/* ---- V8c: overlay wheel rim + bulbs match the carnival look ---- */
.wheel-stage::before{
  background:conic-gradient(from 0deg,
    #FFF0C0 0deg, #C8871A 22deg, #FFE9A8 44deg, #9C6206 66deg,
    #FFE9A8 88deg, #C8871A 110deg, #FFF0C0 132deg, #9C6206 154deg,
    #FFE9A8 176deg, #C8871A 198deg, #FFF0C0 220deg, #9C6206 242deg,
    #FFE9A8 264deg, #C8871A 286deg, #FFF0C0 308deg, #9C6206 330deg,
    #FFE9A8 352deg, #FFF0C0 360deg) !important;
  box-shadow:
    0 0 0 1.5px rgba(255,244,200,.9),
    0 0 0 3px rgba(120,60,0,.55),
    0 0 30px rgba(255,150,40,.7),
    0 12px 34px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -4px 8px rgba(90,40,0,.6) !important;
}
.wheel-stage::after{ background:linear-gradient(180deg,#3A0509,#1A0204) !important; }
.ov-bulb{
  position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFF3C4 42%,#FFC93C 100%);
  box-shadow:
    0 0 6px 2px rgba(255,240,180,.95),
    0 0 15px 4px rgba(255,180,50,.8),
    0 0 24px rgba(255,120,30,.5);
  z-index:3; pointer-events:none;
  animation:bulbPulse 1.15s ease-in-out infinite;
}
.ov-bulb.alt{
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFD9D0 42%,#FF4D3D 100%);
  box-shadow:
    0 0 6px 2px rgba(255,210,190,.95),
    0 0 15px 4px rgba(255,90,60,.85),
    0 0 24px rgba(255,40,20,.55);
  animation-delay:.55s;
}

/* ============================================================
   V9 — hub fix: stays dead-center + red 3D cap
   ============================================================ */

/* hub disc: deep red 3D with gold ring */
.wheel-mini::after{
  background:
    radial-gradient(circle at 34% 24%, #FF8A7A 0%, #F03A2E 26%, #C1121F 58%, #7A0509 100%) !important;
  box-shadow:
    0 0 0 2px rgba(70,3,6,.95),
    0 0 0 4px rgba(255,226,150,.85),
    0 0 0 6px rgba(70,3,6,.9),
    0 0 22px rgba(255,90,50,.85),
    0 6px 14px rgba(0,0,0,.7),
    inset 0 3px 4px rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(60,0,0,.85) !important;
}

/* label must not orbit with the wheel — counter-rotate it */
.hub-lbl{
  color:#FFF3D0 !important;
  text-shadow:0 1px 0 #5A0004, 0 0 8px rgba(255,180,90,.9) !important;
  animation:hubCounter 14s linear infinite;
  will-change:transform;
}
.hub-lbl::before{
  color:#FFE9A8 !important;
  text-shadow:0 1px 2px #5A0004, 0 0 8px rgba(255,190,70,.95) !important;
}
@keyframes hubCounter{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(-360deg); }
}
.spin-stage.is-locked .hub-lbl{ animation-duration:26s; }
.spin-stage.is-claim .hub-lbl{ animation-duration:16s; }
.spin-stage.is-breaking .hub-lbl{ animation-duration:26s; }

/* overlay SPIN hub: red 3D to match */
.wheel-center{
  color:#FFF3D0 !important;
  background:
    radial-gradient(circle at 34% 24%, #FF8A7A 0%, #F03A2E 26%, #C1121F 60%, #7A0509 100%) !important;
  box-shadow:
    0 0 0 3px rgba(70,3,6,.95),
    0 0 0 6px rgba(255,226,150,.85),
    0 7px 0 #6E0509,
    0 16px 30px -8px rgba(0,0,0,.8),
    0 0 34px rgba(255,90,50,.75),
    inset 0 3px 4px rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(60,0,0,.85) !important;
  text-shadow:0 1px 0 #5A0004, 0 0 10px rgba(255,190,90,.9);
}
.wheel-center small{ color:rgba(255,240,210,.85) !important; }
@keyframes centerPulseRed{
  0%,100%{ box-shadow:0 0 0 3px rgba(70,3,6,.95),0 0 0 6px rgba(255,226,150,.85),0 7px 0 #6E0509,0 16px 30px -8px rgba(0,0,0,.8),0 0 34px rgba(255,90,50,.75),inset 0 3px 4px rgba(255,255,255,.55),inset 0 -6px 10px rgba(60,0,0,.85); }
  50%{ box-shadow:0 0 0 3px rgba(70,3,6,.95),0 0 0 6px rgba(255,226,150,.95),0 7px 0 #6E0509,0 16px 30px -8px rgba(0,0,0,.8),0 0 34px rgba(255,90,50,.9),0 0 0 16px rgba(255,90,50,0),inset 0 3px 4px rgba(255,255,255,.55),inset 0 -6px 10px rgba(60,0,0,.85); }
}
.wheel-center.spinning{ animation:centerPulseRed 1s ease-in-out infinite !important; }

/* ---- V9b: hub disc TRUE center (over-constrained inset was pushing it left) ---- */
.wheel-mini::after{
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:27% !important;
  height:27% !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
}

/* ============================================================
   V10 — hub as a REAL centered element (webview-safe)
   ============================================================ */
.wheel-mini::after{ display:none !important; }

.wheel-hub{
  position:absolute;
  left:50%; top:50%;
  width:28%; height:28%;
  margin:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:5;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 24%, #FF9A8A 0%, #F03A2E 26%, #C1121F 58%, #7A0509 100%);
  box-shadow:
    0 0 0 2px rgba(70,3,6,.95),
    0 0 0 4px rgba(255,226,150,.9),
    0 0 0 6px rgba(70,3,6,.9),
    0 0 20px rgba(255,90,50,.85),
    0 6px 14px rgba(0,0,0,.7),
    inset 0 3px 4px rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(60,0,0,.85);
  animation:hubCounter 14s linear infinite;
  will-change:transform;
}
.wheel-hub::after{
  content:''; position:absolute; left:18%; top:12%; width:38%; height:26%;
  border-radius:50%; background:rgba(255,255,255,.35); filter:blur(2px);
  pointer-events:none;
}
.spin-stage.is-locked .wheel-hub{ animation-duration:26s; }
.spin-stage.is-claim .wheel-hub{ animation-duration:16s; }
.spin-stage.is-breaking .wheel-hub{ animation-duration:26s; }

.hub-lbl{
  position:static !important;
  left:auto !important; top:auto !important;
  transform:none !important;
  animation:none !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1;
  font-family:'Fredoka'; font-weight:700;
  font-size:10px; letter-spacing:1.1px;
  color:#FFF3D0 !important;
  text-shadow:0 1px 0 #5A0004, 0 0 8px rgba(255,180,90,.9) !important;
}
.hub-lbl b{
  font-size:8px; line-height:1; margin-bottom:1px; font-weight:400;
  color:#FFE9A8; text-shadow:0 1px 2px #5A0004, 0 0 8px rgba(255,190,70,.95);
}
.hub-lbl::before{ content:none !important; }

/* ============================================================
   V11 — topbar dollar only, streak removed, glowing REWARD BOX
   ============================================================ */

/* wallet chip: single line, dollar only */
.wallet-chip .wc-col{ display:flex; align-items:center; }
.wallet-chip .wc-col b{ font-size:13px; line-height:1.1; }
.wallet-chip .wc-col i{ display:none !important; }

/* ---- REWARD BOX banner (same language as LUCKY WHEEL) ---- */
.box-head{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  margin:14px 0 10px;
}
.box-title{
  position:relative; display:inline-block;
  padding:6px 24px 7px; border-radius:9px;
  font-family:'Fredoka'; font-weight:700;
  font-size:14px; letter-spacing:2px;
  color:#FFE9A8;
  background:linear-gradient(180deg,#F2544B 0%,#D21F26 48%,#9C0F16 100%);
  border:2px solid #FFD166;
  box-shadow:
    0 0 0 3px rgba(90,6,12,.5),
    0 4px 0 #6E0A10,
    0 8px 16px rgba(0,0,0,.6),
    0 0 22px rgba(255,90,60,.5),
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -3px 6px rgba(90,0,0,.6);
  text-shadow:0 2px 0 #7A0A10, 0 0 10px rgba(255,205,100,.85);
  animation:boxGlow 2.6s ease-in-out infinite;
}
.box-title .st{
  font-size:9px; vertical-align:2px; margin:0 6px;
  color:#FFE9A8; text-shadow:0 0 8px rgba(255,210,110,.95);
}
.box-title::before,
.box-title::after{
  content:''; position:absolute; top:calc(100% - 1px); width:14px; height:13px;
  background:linear-gradient(180deg,#A30F16,#64080D);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.box-title::before{ left:-8px; clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%); }
.box-title::after{ right:-8px; clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%); }
@keyframes boxGlow{
  0%,100%{ box-shadow:0 0 0 3px rgba(90,6,12,.5),0 4px 0 #6E0A10,0 8px 16px rgba(0,0,0,.6),0 0 18px rgba(255,90,60,.45),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 6px rgba(90,0,0,.6); }
  50%{ box-shadow:0 0 0 3px rgba(90,6,12,.5),0 4px 0 #6E0A10,0 8px 16px rgba(0,0,0,.6),0 0 34px rgba(255,110,60,.85),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(90,0,0,.6); }
}

/* boxes pulled up tight under the wheel */
.chest-grid{ margin-top:0 !important; }
.prize-ticker{ margin-bottom:0 !important; }
.spin-stage{ padding-bottom:0 !important; }

/* ---- V11b: pull REWARD BOX + boxes further up ---- */
.spin-stage{ padding:6px 14px 0 !important; }
.spin-head{ margin-bottom:0 !important; }
.wheel-wrap{ gap:6px !important; margin-top:0 !important; }
.prize-ticker{ margin-top:2px !important; }
.spin-prog{ margin-top:4px !important; }
.box-head{ margin:8px 0 8px !important; }
.chest-grid{ margin-top:0 !important; }

/* ============================================================
   V12 — TAP FEEDBACK (ripple + press) + SOUND TOGGLE
   ============================================================ */
.fx-ripple-layer{
  position:absolute; inset:0; overflow:hidden;
  border-radius:inherit; pointer-events:none; z-index:4;
  contain:paint;
}
.fx-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 38%, rgba(255,255,255,0) 68%);
  transform:scale(.12); opacity:.95;
  animation:fxRipple .62s cubic-bezier(.22,.61,.36,1) forwards;
  will-change:transform,opacity;
}
@keyframes fxRipple{
  0%{ transform:scale(.12); opacity:.9; }
  55%{ opacity:.55; }
  100%{ transform:scale(1); opacity:0; }
}

/* gold ripple variant for primary CTAs */
.btn-amber .fx-ripple, .btn-emerald .fx-ripple, .wheel-cta .fx-ripple, #spinBtn .fx-ripple{
  background:radial-gradient(circle, rgba(255,246,208,.85) 0%, rgba(255,214,102,.45) 40%, rgba(255,214,102,0) 70%);
}

/* press-in feedback — uses `scale` so it never fights existing transforms */
.fx-press{
  scale:.965;
  filter:brightness(1.1) saturate(1.06);
  transition:scale .09s ease-out, filter .09s ease-out;
}
button, .menu-item, .tab, .nav-btn, .tx, .chest, .box-card, .rate-row, .pf-edit, .pair-code{
  transition:scale .14s cubic-bezier(.2,.8,.3,1), filter .14s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------------- SOUND TOGGLE ---------------- */
.sfx-btn{
  flex:0 0 auto;
  width:34px; height:34px; margin-right:6px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,214,102,.34);
  background:radial-gradient(circle at 34% 26%, rgba(255,226,150,.22), rgba(18,16,26,.92) 70%);
  color:#FFE9A8;
  box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  cursor:pointer; padding:0;
  transition:transform .16s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.sfx-btn svg{ width:16px; height:16px; display:block; }
.sfx-btn .wave{ transition:opacity .2s ease; }
.sfx-btn.off{ color:#8A8698; border-color:rgba(255,255,255,.14); }
.sfx-btn.off .wave{ opacity:0; }
.sfx-btn.off .slash{ opacity:1; }
.sfx-btn .slash{ opacity:0; transition:opacity .2s ease; }
.sfx-btn:active{ transform:scale(.9); }
.sfx-btn.bump{ animation:sfxBump .34s ease; }
@keyframes sfxBump{
  0%{ transform:scale(.86); }
  45%{ transform:scale(1.12); box-shadow:0 0 0 6px rgba(255,214,102,.18), 0 0 18px rgba(255,214,102,.5); }
  100%{ transform:scale(1); }
}
@media (max-width:360px){
  .sfx-btn{ width:30px; height:30px; margin-right:4px; }
  .sfx-btn svg{ width:14px; height:14px; }
}

/* ============================================================
   V12b — sound toggle sits beside the profile (left group)
   ============================================================ */
.topbar .tb-left{
  display:flex; align-items:center; gap:8px;
  min-width:0; flex:1 1 auto;
}
.topbar .tb-left .brand{
  min-width:0; flex:0 1 auto;
}
.topbar .tb-left .tg-meta{ min-width:0; }
.topbar .tb-left .tg-name,
.topbar .tb-left .tg-sub{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .sfx-btn{
  margin-right:0;
  flex:0 0 auto;
}
.topbar .wallet-chip{ flex:0 0 auto; }
@media (max-width:380px){
  .topbar{ gap:6px; padding-left:12px; padding-right:12px; }
  .topbar .tb-left{ gap:6px; }
  .topbar .sfx-btn{ width:30px; height:30px; }
  .topbar .sfx-btn svg{ width:14px; height:14px; }
}

/* ============================================================
   V13 — pairing code: no "TAP TO COPY" chip, code dead-centre
   ============================================================ */
.pair-code{
  justify-content:center !important;
  gap:0 !important;
  padding:13px 14px !important;
}
.pair-code .pc-txt{
  display:block;
  text-align:center;
  letter-spacing:4px;
  padding-left:4px;            /* compensate trailing letter-space so it looks centred */
  font-size:21px;
}
.pair-code .pc-copy{ display:none !important; }
/* keep the copy affordance as a subtle icon in the corner instead of a label */
.pair-code::after{
  content:'';
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; opacity:.5;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V5a2 2 0 0 1 2-2h8'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V5a2 2 0 0 1 2-2h8'/></svg>") center/contain no-repeat;
  pointer-events:none;
  transition:opacity .2s ease;
}
.pair-code.live::after{ opacity:.85; }
.pair-code.copied::after{ opacity:0; }

/* ---------------- flag rendering ---------------- */
.cf-flag{ display:grid; place-items:center; }
.cf-flag .cf-img{
  width:26px; height:auto; border-radius:3px; display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
}
.cf-flag .cf-emoji{ font-size:21px; line-height:1; }

/* ---------------- country picker search ---------------- */
.cty-search{
  display:flex; align-items:center; gap:9px;
  margin:2px 0 12px; padding:10px 13px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.cty-search svg{ width:16px; height:16px; color:var(--muted-2); flex:0 0 auto; }
.cty-search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ink); font-family:'Plus Jakarta Sans'; font-size:13px; font-weight:600;
}
.cty-search input::placeholder{ color:var(--muted-2); font-weight:500; }
.cty-empty{
  padding:26px 10px; text-align:center;
  font-size:12px; color:var(--muted-2); font-weight:600;
}

/* picker flag images */
.cty-flag{ display:grid; place-items:center; width:30px; flex:0 0 30px; }
.cty-flag .cf-img{ width:28px; height:auto; border-radius:3px; display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12); }
.cty-flag .cf-emoji{ font-size:20px; }

/* ============================================================
   V14 — NEXT LINK button (appears after a pairing code arrives)
   ============================================================ */
.btn-nextlink{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:9px;
  padding:13px 16px; border-radius:14px;
  font-family:'Fredoka'; font-weight:600; font-size:14px; letter-spacing:1.2px;
  color:#FFE9A8; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,196,60,.20), rgba(255,138,0,.07));
  border:1.5px solid rgba(255,196,60,.55);
  box-shadow:0 0 0 1px rgba(255,196,60,.10), 0 6px 20px -8px rgba(255,170,40,.8),
    inset 0 1px 0 rgba(255,255,255,.16);
  animation:nlPulse 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn-nextlink[hidden]{ display:none !important; }
.btn-nextlink .btn-ico{ display:flex; }
.btn-nextlink .btn-ico svg{ width:18px; height:18px; }
.btn-nextlink .nl-count{
  font-family:'Plus Jakarta Sans'; font-size:10px; font-weight:900; letter-spacing:.6px;
  padding:3px 8px; border-radius:999px;
  color:#2A1500; background:linear-gradient(180deg,#FFE9A8,#FFB020);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.btn-nextlink:active{ transform:scale(.97); }
.btn-nextlink:disabled{ opacity:.7; cursor:default; animation:none; }
.btn-nextlink.done{
  color:#7BF2AA; border-color:rgba(59,224,127,.55);
  background:linear-gradient(180deg, rgba(59,224,127,.18), rgba(59,224,127,.05));
  animation:none;
}
@keyframes nlPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,196,60,.10), 0 6px 18px -10px rgba(255,170,40,.7),
    inset 0 1px 0 rgba(255,255,255,.16); }
  50%{ box-shadow:0 0 0 1px rgba(255,196,60,.24), 0 8px 26px -6px rgba(255,170,40,1),
    inset 0 1px 0 rgba(255,255,255,.22); }
}

/* ============================================================
   WITHDRAW HISTORY STYLES
   ============================================================ */
.wd-refresh-btn{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:var(--gold-l);
  font-family:'Fredoka';
  font-size:10px;
  font-weight:600;
  letter-spacing:.8px;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
}
.wd-refresh-btn:active{ transform:scale(.95); background:rgba(255,255,255,.12); }

.wd-history-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:16px;
}

.wd-card{
  border-radius:20px;
  padding:15px 16px;
  background:linear-gradient(180deg, rgba(38,28,78,.78), rgba(18,14,42,.88));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px -14px rgba(0,0,0,.85);
  transition:transform .15s ease, border-color .2s;
}
.wd-card:hover{
  border-color:rgba(255,200,90,.22);
}

.wd-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.wd-method-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.wd-method-logo{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:contain;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  padding:4px;
  flex:0 0 36px;
}
.wd-method-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  flex:0 0 36px;
}
.wd-method-info{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.wd-method-name{
  font-family:'Fredoka';
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.2px;
}
.wd-account{
  font-size:11px;
  color:var(--muted);
  font-family:'Plus Jakarta Sans', monospace;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wd-amount-wrap{
  text-align:right;
  flex:0 0 auto;
}
.wd-amount{
  font-family:'Fredoka';
  font-size:16px;
  font-weight:700;
  color:#FF8FA3;
  letter-spacing:.2px;
}

.wd-status-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.6px;
  margin-top:4px;
  text-transform:uppercase;
}
.wd-pill-ok{
  background:rgba(59,224,127,.14);
  color:#8CFFC0;
  border:1px solid rgba(59,224,127,.35);
  box-shadow:0 0 10px rgba(59,224,127,.2);
}
.wd-pill-fail{
  background:rgba(255,77,109,.14);
  color:#FF8FA3;
  border:1px solid rgba(255,77,109,.35);
  box-shadow:0 0 10px rgba(255,77,109,.2);
}
.wd-pill-pending{
  background:rgba(255,176,32,.14);
  color:#FFD166;
  border:1px solid rgba(255,176,32,.35);
  box-shadow:0 0 10px rgba(255,176,32,.2);
}

.wd-divider{
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.08) 50%, rgba(255,255,255,.02));
  margin:12px 0 10px;
}

.wd-details-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px 12px;
}
.wd-detail-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.wd-label{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.8px;
  color:var(--muted-2);
  text-transform:uppercase;
}
.wd-val{
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wd-val-copy{
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  width:fit-content;
}
.wd-val-copy code{
  font-family:monospace;
  font-size:10.5px;
  font-weight:700;
  color:var(--gold-l);
  background:rgba(255,255,255,.06);
  padding:2px 6px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wd-val-copy:active code{
  background:rgba(255,200,80,.2);
}
.wd-copy-btn{
  font-size:10px;
  opacity:.7;
  transition:opacity .15s;
}
.wd-val-copy:hover .wd-copy-btn{
  opacity:1;
}

.wd-loading-card{
  padding:36px 16px;
  text-align:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
}
.wd-spinner{
  width:28px;
  height:28px;
  margin:0 auto 12px;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.wd-loading-txt{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.wd-empty-card{
  text-align:center;
  padding:36px 20px;
}

/* ============================================================
   LEADERBOARD & LIVE CENTER STYLES
   ============================================================ */

/* Top Live Center Header Bar */
.lb-live-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(38,28,78,.78), rgba(16,12,38,.88));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 8px 20px -10px rgba(0,0,0,.7);
}
.lb-live-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.lb-pulse-ico{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(59,224,127,.12);
  border:1px solid rgba(59,224,127,.28);
  color:#3BE07F;
  box-shadow:0 0 12px rgba(59,224,127,.25);
}
.lb-pulse-ico svg{
  width:18px;
  height:18px;
  animation:ecgPulse 2.2s ease-in-out infinite;
}
@keyframes ecgPulse{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.12); opacity:1; filter:drop-shadow(0 0 6px #3BE07F); }
}
.lb-live-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lb-live-tag{
  font-size:8.5px;
  font-weight:900;
  letter-spacing:1.2px;
  color:var(--muted-2);
  text-transform:uppercase;
}
.lb-live-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.8px;
  color:#FF8FA3;
}
.lb-pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#FF4D6D;
  box-shadow:0 0 8px #FF4D6D;
  animation:redPulse 1.4s infinite;
}
@keyframes redPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}
.lb-live-time{
  font-family:'Fredoka';
  font-size:13px;
  font-weight:600;
  color:var(--gold-l);
  letter-spacing:.6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,176,32,.10);
  border:1px solid rgba(255,176,32,.22);
}

/* Leaderboard Card Container */
.lb-card{
  border-radius:22px;
  padding:16px;
  background:linear-gradient(180deg, rgba(38,28,78,.82), rgba(16,12,38,.92));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px -12px rgba(0,0,0,.9);
  margin-bottom:12px;
}
.lb-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.lb-title-wrap{
  display:flex;
  align-items:center;
  gap:9px;
}
.lb-trophy{
  font-size:24px;
  filter:drop-shadow(0 2px 8px rgba(255,180,40,.6));
}
.lb-title{
  font-family:'Fredoka';
  font-size:16px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--ink);
  margin:0;
  line-height:1.2;
}
.lb-sub{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--muted-2);
  text-transform:uppercase;
}
.lb-active-pill{
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.8px;
  color:#7BF2AA;
  background:rgba(59,224,127,.12);
  border:1px solid rgba(59,224,127,.28);
  padding:4px 9px;
  border-radius:999px;
}

/* Filters: TODAY, YESTERDAY, 7 DAYS, ALL TIME */
.lb-filters{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:5px;
  padding:4px;
  background:rgba(0,0,0,.35);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  margin:14px 0 16px;
}
.lb-tab{
  padding:8px 3px;
  font-family:'Fredoka';
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.5px;
  border:none;
  background:none;
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
  text-align:center;
}
.lb-tab:active{
  transform:scale(.95);
}
.lb-tab.active{
  background:linear-gradient(180deg, #3BE07F, #12A85A);
  color:#042512;
  font-weight:700;
  box-shadow:0 3px 12px rgba(59,224,127,.45), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Top 3 Podium */
.lb-podium-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  margin:24px 0 14px;
  padding:0 4px;
}
.lb-podium-col{
  flex:1;
  max-width:115px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lb-podium-user{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:8px;
  width:100%;
}
.lb-podium-crown{
  font-size:20px;
  line-height:1;
  margin-bottom:-4px;
  z-index:3;
  animation:floaty 4s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(255,180,40,.8));
}
.lb-podium-medal{
  font-size:18px;
  line-height:1;
  margin-bottom:-3px;
  z-index:3;
}
.lb-podium-avatar-ring{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  margin-bottom:6px;
}
.lb-podium-col.rank-1 .lb-podium-avatar-ring{
  width:58px;
  height:58px;
}
.lb-podium-avatar-ring.gold{
  background:conic-gradient(from 0deg,#FFE9A8,#FFB020,#FF8A00,#FFE9A8);
  box-shadow:0 0 14px rgba(255,176,32,.7);
}
.lb-podium-avatar-ring.silver{
  background:conic-gradient(from 0deg,#FFFFFF,#C8D2E4,#8E9BB2,#FFFFFF);
  box-shadow:0 0 12px rgba(180,195,220,.5);
}
.lb-podium-avatar-ring.bronze{
  background:conic-gradient(from 0deg,#FFE3D0,#E08A56,#A65225,#FFE3D0);
  box-shadow:0 0 12px rgba(224,138,86,.5);
}
.lb-podium-avatar{
  width:calc(100% - 4px);
  height:calc(100% - 4px);
  border-radius:50%;
  background:#140F30;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family:'Fredoka';
  font-weight:700;
  font-size:18px;
  color:var(--ink);
}
.lb-av-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lb-podium-name{
  font-family:'Fredoka';
  font-size:11px;
  font-weight:600;
  color:var(--ink);
  max-width:95px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.lb-podium-count{
  font-size:9.5px;
  font-weight:800;
  color:var(--gold-l);
  margin-top:2px;
}

/* Pedestals */
.lb-podium-pedestal{
  width:100%;
  border-radius:14px 14px 6px 6px;
  display:grid;
  place-items:center;
  position:relative;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.6);
}
.lb-podium-col.rank-1 .lb-podium-pedestal{
  height:92px;
  background:linear-gradient(180deg,#FFB020 0%,#D47A00 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 22px rgba(255,176,32,.5);
}
.lb-podium-col.rank-2 .lb-podium-pedestal{
  height:72px;
  background:linear-gradient(180deg,#A8B2C8 0%,#5E6982 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 16px rgba(168,178,200,.35);
}
.lb-podium-col.rank-3 .lb-podium-pedestal{
  height:56px;
  background:linear-gradient(180deg,#D4814A 0%,#8C471E 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 16px rgba(212,129,74,.35);
}
.pedestal-num{
  font-family:'Fredoka';
  font-size:26px;
  font-weight:800;
  color:rgba(255,255,255,.95);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* Ranks 4 to 10 List */
.lb-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:14px;
}
.lb-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.032);
  border:1px solid rgba(255,255,255,.055);
  transition:background .2s;
}
.lb-row.is-me{
  background:linear-gradient(90deg, rgba(255,176,32,.14), rgba(59,224,127,.08));
  border-color:rgba(255,190,90,.3);
}
.lb-rank{
  font-family:'Fredoka';
  font-size:12px;
  font-weight:700;
  color:var(--muted-2);
  width:22px;
  flex:0 0 22px;
}
.lb-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 32px;
  font-family:'Fredoka';
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.1);
}
.lb-av-init{
  font-family:'Fredoka';
  font-size:13px;
  font-weight:700;
  color:var(--gold-l);
}
.lb-user-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lb-user-name{
  font-size:11.5px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb-bar-wrap{
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.lb-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3BE07F,#7BF2AA);
  box-shadow:0 0 8px rgba(59,224,127,.6);
  transition:width .4s ease;
}
.lb-count{
  font-family:'Fredoka';
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  flex:0 0 auto;
  text-align:right;
  min-width:28px;
}

/* Current User Position Card */
.lb-my-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 16px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,176,32,.18), rgba(28,20,62,.92));
  border:1.5px solid rgba(255,190,90,.32);
  box-shadow:0 0 24px -6px rgba(255,170,30,.35), inset 0 1px 0 rgba(255,255,255,.12);
  margin-bottom:12px;
}
.lb-my-left{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.lb-my-av{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(160deg,#FFE9A8,#FFB020 55%,#FF8A00);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 38px;
  font-family:'Fredoka';
  font-size:15px;
  font-weight:700;
  color:#3A1E00;
  box-shadow:0 0 10px rgba(255,176,32,.5);
}
.lb-my-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.lb-my-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.lb-my-name{
  font-family:'Fredoka';
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb-my-hint{
  font-size:9.5px;
  color:var(--muted-2);
  font-weight:600;
  margin-top:2px;
}
.lb-my-right{
  text-align:right;
  flex:0 0 auto;
}
.lb-my-rank{
  display:block;
  font-family:'Fredoka';
  font-size:17px;
  font-weight:700;
  color:var(--gold-l);
  line-height:1.1;
}
.lb-my-count{
  font-size:9.5px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
}

/* System Performance Speedometer Card */
.lb-perf-card{
  padding:15px 16px;
}
.lb-perf-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.lb-perf-t{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'Fredoka';
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
}
.lb-perf-ico{
  font-size:15px;
}
.lb-perf-tag{
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
  color:var(--muted-2);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
}
.lb-gauge-wrap{
  position:relative;
  width:180px;
  margin:0 auto 12px;
  text-align:center;
}
.lb-gauge-svg{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.lb-gauge-val{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  text-align:center;
}
.lb-gauge-val b{
  font-family:'Fredoka';
  font-size:18px;
  font-weight:700;
  color:#8CFFC0;
  display:block;
  line-height:1;
}
.lb-gauge-val span{
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.6px;
  color:var(--muted-2);
}
.lb-perf-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.lb-perf-stat{
  text-align:center;
  padding:6px 4px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
}
.lb-perf-stat span{
  display:block;
  font-size:8px;
  font-weight:800;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.lb-perf-stat b{
  display:block;
  font-family:'Fredoka';
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin-top:2px;
}