/* ════════════════════════════════════════
   CRYPTEX DIAMOND SYSTEM - v2
   Daily login, reward grid, spin wheel
   Exciting & rewarding visual overhaul
   ════════════════════════════════════════ */

/* Diamond badge in sidebar */
.diamond-badge{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;margin:8px 12px;
  background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,165,0,.08));
  border:1px solid rgba(255,215,0,.45);border-radius:12px;
  cursor:pointer;transition:all .25s;
  position:relative;overflow:hidden;
  min-height:46px;
}
.diamond-badge::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.08),transparent);
  transform:translateX(-100%);transition:transform .6s;
}
.diamond-badge:hover::before{transform:translateX(100%)}
.diamond-badge:hover{
  background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,165,0,.1));
  border-color:rgba(255,215,0,.5);
  box-shadow:0 0 20px rgba(255,215,0,.15);
}
.diamond-badge .diamond-icon{font-size:1.5rem;filter:drop-shadow(0 0 6px rgba(255,215,0,.5));flex-shrink:0}
.diamond-badge .diamond-count{
  font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:800;
  color:#FFD700;text-shadow:0 0 12px rgba(255,215,0,.5);
  flex-shrink:0;white-space:nowrap;
}
.diamond-badge .diamond-label{
  font-size:.72rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600;flex-shrink:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.diamond-badge .diamond-usdt{
  font-size:.68rem;color:#26a17b;font-weight:700;letter-spacing:.3px;
  margin-left:auto;flex-shrink:0;white-space:nowrap;
  background:rgba(38,161,123,.1);padding:3px 8px;border-radius:6px;
  border:1px solid rgba(38,161,123,.2);
}
.diamond-badge .diamond-claim-dot{
  width:10px;height:10px;border-radius:50%;background:#00ff88;
  box-shadow:0 0 10px #00ff88,0 0 20px rgba(0,255,136,.3);
  flex-shrink:0;animation:claimPulse 1.5s ease infinite;
}
@keyframes claimPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ═══ REWARD MODAL ═══ */
.reward-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.88);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  animation:rewardFadeIn .35s ease;
}
@keyframes rewardFadeIn{from{opacity:0}to{opacity:1}}

.reward-modal{
  background:linear-gradient(170deg,#1e1040 0%,#0f0a2e 40%,#0a0618 100%);
  border:1.5px solid rgba(255,215,0,.25);border-radius:24px;
  width:92%;max-width:440px;max-height:88vh;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  box-shadow:
    0 0 80px rgba(138,43,226,.15),
    0 0 40px rgba(255,215,0,.08),
    0 25px 50px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:rewardSlideUp .5s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.reward-modal::-webkit-scrollbar{display:none}
.reward-modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(180deg,rgba(255,215,0,.06),transparent);
  border-radius:24px 24px 0 0;pointer-events:none;
}
@keyframes rewardSlideUp{from{opacity:0;transform:translateY(50px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

.reward-header{
  padding:24px 24px 14px;text-align:center;
  border-bottom:1px solid rgba(255,215,0,.1);
  position:relative;
}
.reward-header h2{
  font-size:1.5rem;color:#FFD700;margin:0;
  text-shadow:0 0 30px rgba(255,215,0,.4),0 0 60px rgba(255,215,0,.15);
  letter-spacing:.5px;
}
.reward-header .reward-sub{
  font-size:.8rem;color:#9988cc;margin-top:6px;
  letter-spacing:.3px;
}
.reward-close{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#aaa;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s;backdrop-filter:blur(4px);
}
.reward-close:hover{
  background:rgba(255,255,255,.12);color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.1);
}

/* Streak progress bar */
.reward-streak{
  display:flex;align-items:center;gap:10px;
  padding:10px 24px;
}
.streak-bar{
  flex:1;height:6px;border-radius:3px;
  background:rgba(255,255,255,.06);overflow:hidden;
  position:relative;
}
.streak-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#FFD700,#FF6B35,#FF3CAC);
  transition:width .8s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 8px rgba(255,215,0,.4);
  position:relative;
}
.streak-fill::after{
  content:'';position:absolute;right:0;top:-2px;bottom:-2px;width:10px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));
  border-radius:3px;
  animation:streakShimmer 1.5s ease infinite;
}
@keyframes streakShimmer{0%,100%{opacity:.3}50%{opacity:1}}
.streak-label{
  font-size:.7rem;color:#9988cc;font-weight:600;
  white-space:nowrap;
}

/* Balance bar */
.reward-balance{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;
  background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(138,43,226,.05));
  border-bottom:1px solid rgba(255,215,0,.08);
}
.reward-balance .bal-icon{font-size:1.4rem;filter:drop-shadow(0 0 6px rgba(255,215,0,.4))}
.reward-balance .bal-count{
  font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:800;color:#FFD700;
  text-shadow:0 0 12px rgba(255,215,0,.3);
}
.reward-balance .bal-label{font-size:.7rem;color:#8877bb;text-transform:uppercase;letter-spacing:.5px}

/* 30-Day Grid */
.reward-grid-wrap{padding:18px 16px}
.reward-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:7px;
}
.reward-day{
  position:relative;aspect-ratio:1;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:all .3s cubic-bezier(.16,1,.3,1);cursor:default;overflow:hidden;
}
.reward-day::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.04),transparent 70%);
  pointer-events:none;
}
.reward-day .day-num{
  font-size:.58rem;color:#665599;font-weight:700;margin-bottom:2px;
  text-transform:uppercase;letter-spacing:.3px;
}
.reward-day .day-icon{font-size:1.15rem;line-height:1;transition:transform .3s}
.reward-day .day-label{
  font-size:.48rem;color:#7766aa;margin-top:1px;text-align:center;line-height:1.1;
  font-weight:500;
}

/* Mystery "?" card for regular fixed days */
.reward-day.mystery-card .day-icon{
  font-size:1.4rem;font-weight:800;font-style:normal;
  color:#9977dd;
  text-shadow:0 0 8px rgba(138,43,226,.4);
  font-family:'Inter','Segoe UI',Arial,sans-serif;
}
.reward-day.mystery-card.available .day-icon{
  color:#FFD700;
  text-shadow:0 0 12px rgba(255,215,0,.5),0 0 24px rgba(255,215,0,.2);
}
.reward-day.mystery-card.claimed .day-icon{
  color:#00ff88;
  text-shadow:0 0 8px rgba(0,255,136,.4);
}

/* Shimmering gold gift box for mystery chest days */
.reward-day.special-chest .day-icon{
  font-size:1.3rem;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.5)) drop-shadow(0 0 12px rgba(255,180,0,.3));
  animation:goldShimmer 2s ease infinite;
}
.reward-day.special-chest{
  border-color:rgba(255,215,0,.25);
  background:linear-gradient(160deg,rgba(255,215,0,.08),rgba(255,180,0,.02));
}
.reward-day.special-chest.locked{
  opacity:.55;
}
.reward-day.special-chest .day-label{color:#FFD700;font-weight:700}
@keyframes goldShimmer{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,215,0,.5)) drop-shadow(0 0 12px rgba(255,180,0,.3)) brightness(1)}
  50%{filter:drop-shadow(0 0 10px rgba(255,215,0,.7)) drop-shadow(0 0 20px rgba(255,180,0,.4)) brightness(1.15)}
}

/* Golden spin wheel days */
.reward-day.special-spin .day-icon{
  font-size:1.3rem;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.5)) drop-shadow(0 0 12px rgba(255,180,0,.3));
  animation:goldShimmer 2s ease infinite;
}
.reward-day.special-spin{
  border-color:rgba(255,215,0,.25);
  background:linear-gradient(160deg,rgba(255,215,0,.08),rgba(255,180,0,.02));
}
.reward-day.special-spin.locked{
  opacity:.55;
}
.reward-day.special-spin .day-label{color:#FFD700;font-weight:700}

/* Claimed state */
.reward-day.claimed{
  background:linear-gradient(160deg,rgba(0,255,136,.1),rgba(0,200,100,.04));
  border-color:rgba(0,255,136,.35);
  box-shadow:0 0 8px rgba(0,255,136,.08);
}
.reward-day.claimed::after{
  content:'\2713';position:absolute;top:3px;right:5px;
  font-size:.55rem;color:#00ff88;font-weight:800;
  text-shadow:0 0 6px rgba(0,255,136,.5);
}
.reward-day.claimed .day-icon{filter:saturate(1.3) brightness(1.1)}

/* Available today - EXCITING pulse */
.reward-day.available{
  border-color:rgba(255,215,0,.7);
  background:linear-gradient(160deg,rgba(255,215,0,.18),rgba(255,165,0,.08));
  box-shadow:0 0 16px rgba(255,215,0,.2),0 0 40px rgba(255,215,0,.06);
  cursor:pointer;
  animation:dayGlow 2s ease infinite;
  transform:scale(1.02);
}
.reward-day.available::before{
  background:radial-gradient(circle at 50% 30%,rgba(255,215,0,.15),transparent 70%);
}
@keyframes dayGlow{
  0%,100%{box-shadow:0 0 16px rgba(255,215,0,.2),0 0 40px rgba(255,215,0,.06)}
  50%{box-shadow:0 0 24px rgba(255,215,0,.35),0 0 60px rgba(255,215,0,.1)}
}
.reward-day.available .day-num{color:#FFD700;text-shadow:0 0 6px rgba(255,215,0,.3)}
.reward-day.available .day-icon{
  animation:iconBounce 1.5s ease infinite;
}
@keyframes iconBounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.1)}
}
.reward-day.available:hover{
  transform:scale(1.08);
  box-shadow:0 0 28px rgba(255,215,0,.4),0 0 60px rgba(255,215,0,.12);
}

/* Locked state */
.reward-day.locked{opacity:.3}
.reward-day.locked .day-icon{filter:grayscale(1) brightness(.7)}

/* Claim button area */
.reward-claim-area{padding:0 18px 18px;text-align:center}
.reward-claim-info{
  font-size:.88rem;color:#bbaadd;margin-bottom:12px;
  font-weight:500;
}
.reward-claim-info .claim-type{color:#FFD700;font-weight:700;text-shadow:0 0 8px rgba(255,215,0,.2)}
.reward-claim-info .claim-amount{color:#00ff88;font-weight:700;font-family:'JetBrains Mono',monospace}

.btn-claim{
  width:100%;padding:16px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#FFD700,#FF8C00,#FF6B35);color:#000;
  font-size:1.1rem;font-weight:800;cursor:pointer;
  text-transform:uppercase;letter-spacing:1.5px;
  box-shadow:0 4px 24px rgba(255,215,0,.35),0 0 40px rgba(255,215,0,.1);
  transition:all .25s;
  position:relative;overflow:hidden;
}
.btn-claim::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  animation:btnShine 3s ease infinite;
}
@keyframes btnShine{
  0%{transform:translateX(-100%) rotate(45deg)}
  100%{transform:translateX(100%) rotate(45deg)}
}
.btn-claim:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(255,215,0,.45),0 0 60px rgba(255,215,0,.15);
}
.btn-claim:active{transform:translateY(0)}
.btn-claim:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-claim:disabled::before{display:none}

.btn-claim.spin-btn{
  background:linear-gradient(135deg,#FF3CAC,#ee5a24,#FF6B6B);
  box-shadow:0 4px 24px rgba(255,60,172,.3),0 0 40px rgba(255,107,107,.08);
  color:#fff;
}
.btn-claim.spin-btn:hover{
  box-shadow:0 8px 32px rgba(255,60,172,.45),0 0 60px rgba(255,107,107,.15);
}

/* Already claimed message */
.reward-claimed-msg{
  padding:14px 16px;text-align:center;font-size:.85rem;color:#00ff88;
  background:linear-gradient(135deg,rgba(0,255,136,.08),rgba(0,200,100,.03));
  border:1px solid rgba(0,255,136,.15);
  border-radius:12px;margin:0 18px 18px;
  font-weight:500;
}

/* ═══ MYSTERY CHEST ANIMATION ═══ */
.chest-reveal{
  display:flex;flex-direction:column;align-items:center;
  padding:28px 16px;
}
.chest-emoji{
  font-size:4rem;animation:chestShake .5s ease 3;
  filter:drop-shadow(0 0 20px rgba(255,215,0,.3));
}
@keyframes chestShake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-10deg) scale(1.05)}
  75%{transform:rotate(10deg) scale(1.05)}
}
.chest-open{animation:chestOpen .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes chestOpen{
  0%{transform:scale(1)}
  40%{transform:scale(1.4) rotate(5deg)}
  70%{transform:scale(1.2) rotate(-3deg)}
  100%{transform:scale(1)}
}
.chest-result{
  font-size:2.4rem;font-weight:800;color:#FFD700;
  font-family:'JetBrains Mono',monospace;
  animation:resultPop .6s cubic-bezier(.16,1,.3,1);
  text-shadow:0 0 30px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.2);
  margin-top:14px;
}
@keyframes resultPop{
  from{opacity:0;transform:scale(.3) rotate(-10deg)}
  60%{transform:scale(1.15) rotate(3deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.chest-subtitle{
  font-size:.85rem;color:#bbaadd;margin-top:6px;
  animation:resultPop .7s cubic-bezier(.16,1,.3,1);
}

.chest-sparkles{
  position:relative;width:100%;height:80px;
}
.chest-sparkle{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:#FFD700;animation:sparkle 1.2s ease forwards;
}
@keyframes sparkle{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* ═══ SPIN WHEEL ═══ */
.spin-container{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px;
}
.spin-title{
  font-size:1.1rem;color:#FFD700;font-weight:700;
  text-shadow:0 0 20px rgba(255,215,0,.3);
  margin-bottom:14px;text-align:center;
  letter-spacing:.5px;
}
.spin-wheel-wrap{
  position:relative;width:290px;height:290px;margin:0 auto 18px;
}
/* Outer LED ring */
.spin-wheel-wrap::before{
  content:'';position:absolute;
  top:-12px;left:-12px;right:-12px;bottom:-12px;
  border-radius:50%;
  background:conic-gradient(
    #FFD700 0deg,#FF3CAC 45deg,#FFD700 90deg,#4ECDC4 135deg,
    #FFD700 180deg,#FF6B6B 225deg,#FFD700 270deg,#845EC2 315deg,#FFD700 360deg
  );
  opacity:.5;
  animation:ledRing 3s linear infinite;
  filter:blur(3px);
}
.spin-wheel-wrap::after{
  content:'';position:absolute;
  top:-6px;left:-6px;right:-6px;bottom:-6px;
  border-radius:50%;
  border:3px solid rgba(255,215,0,.6);
  box-shadow:0 0 15px rgba(255,215,0,.2),inset 0 0 15px rgba(255,215,0,.1);
}
@keyframes ledRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.spin-canvas{
  width:290px;height:290px;border-radius:50%;
  transition:transform 4s cubic-bezier(.17,.67,.12,.99);
  position:relative;z-index:1;
}
.spin-pointer{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;border-right:16px solid transparent;
  border-top:36px solid #FFD700;
  filter:drop-shadow(0 0 10px rgba(255,215,0,.7)) drop-shadow(0 0 20px rgba(255,215,0,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
  z-index:3;
}
.spin-pointer::after{
  content:'';position:absolute;top:-36px;left:-9px;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:20px solid #fff;
  opacity:.4;
}
.spin-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(145deg,#FFD700,#FF8C00);
  border:4px solid rgba(255,255,255,.9);
  box-shadow:0 0 20px rgba(255,215,0,.5),0 0 40px rgba(255,215,0,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;z-index:2;
}
.spin-result-text{
  font-size:2.2rem;font-weight:800;color:#FFD700;
  font-family:'JetBrains Mono',monospace;
  text-shadow:0 0 30px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.2);
  animation:resultPop .5s cubic-bezier(.16,1,.3,1);
  margin-top:10px;
}
.spin-result-sub{
  font-size:.85rem;color:#bbaadd;margin-top:4px;
  animation:resultPop .6s cubic-bezier(.16,1,.3,1);
}
.btn-spin{
  padding:16px 48px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#FF3CAC,#ee5a24,#FF6B6B);color:#fff;
  font-size:1.15rem;font-weight:800;cursor:pointer;
  text-transform:uppercase;letter-spacing:2px;
  box-shadow:0 4px 24px rgba(255,60,172,.35),0 0 40px rgba(255,107,107,.08);
  transition:all .25s;margin-top:10px;
  position:relative;overflow:hidden;
}
.btn-spin::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  animation:btnShine 3s ease infinite;
}
.btn-spin:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 32px rgba(255,60,172,.5),0 0 60px rgba(255,107,107,.15);
}
.btn-spin:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-spin:disabled::before{display:none}

/* ═══ FIXED REWARD ANIMATION ═══ */
.fixed-reveal{
  display:flex;flex-direction:column;align-items:center;padding:28px 16px;
}
.fixed-icon{
  font-size:3.5rem;
  animation:fixedBounce .8s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 0 20px rgba(255,215,0,.4));
}
@keyframes fixedBounce{
  0%{opacity:0;transform:scale(0) rotate(-20deg)}
  50%{transform:scale(1.3) rotate(5deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.fixed-amount{
  font-size:2.6rem;font-weight:800;color:#FFD700;
  font-family:'JetBrains Mono',monospace;
  text-shadow:0 0 30px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.2);
  margin-top:10px;
  animation:fixedAmountPop .7s cubic-bezier(.16,1,.3,1);
}
@keyframes fixedAmountPop{
  0%{opacity:0;transform:scale(.3) translateY(20px)}
  60%{transform:scale(1.1) translateY(-3px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.fixed-label{
  font-size:.9rem;color:#bbaadd;margin-top:8px;
  animation:resultPop .8s cubic-bezier(.16,1,.3,1);
}

/* Continue button after claim */
.btn-continue{
  width:calc(100% - 36px);margin:0 18px 18px;padding:13px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#bbaadd;
  font-size:.9rem;font-weight:600;cursor:pointer;
  transition:all .25s;
}
.btn-continue:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  color:#fff;border-color:rgba(255,255,255,.2);
  box-shadow:0 0 12px rgba(255,255,255,.05);
}

/* ═══ SESSION TICKET ═══ */
.session-ticket{
  margin:0 8px;padding:0;border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,#1a0d30,#0f0a2e);
  border:1.5px solid rgba(255,215,0,.3);
  box-shadow:0 0 30px rgba(255,215,0,.08),0 8px 24px rgba(0,0,0,.3);
  animation:rewardSlideUp .5s cubic-bezier(.16,1,.3,1);
}
.ticket-header{
  text-align:center;padding:20px 16px 14px;
  background:linear-gradient(180deg,rgba(255,215,0,.1),transparent);
}
.ticket-badge{font-size:2.5rem;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(255,215,0,.4))}
.ticket-title{
  font-size:.7rem;text-transform:uppercase;letter-spacing:3px;
  color:#FFD700;font-weight:800;
  text-shadow:0 0 20px rgba(255,215,0,.4);
}
.ticket-subtitle{
  font-size:.95rem;color:#e8e0f8;font-weight:700;margin-top:8px;
  line-height:1.3;
}
.ticket-divider{
  text-align:center;padding:8px 0;position:relative;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.08),transparent);
}
.ticket-divider span{
  font-size:.65rem;color:#FFD700;letter-spacing:2px;font-weight:700;
}
.ticket-body{padding:12px 20px}
.ticket-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.ticket-row:last-child{border-bottom:none}
.ticket-label{
  font-size:.7rem;color:#9988cc;text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}
.ticket-value{
  font-size:.8rem;color:#e8e0f8;font-weight:600;text-align:right;
}
.ticket-code-wrap{
  text-align:center;padding:14px 16px;margin:4px 16px 12px;
  background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(138,43,226,.06));
  border:1px dashed rgba(255,215,0,.25);border-radius:12px;
}
.ticket-code-label{
  font-size:.6rem;color:#9988cc;text-transform:uppercase;letter-spacing:2px;
  font-weight:700;margin-bottom:6px;
}
.ticket-code{
  font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:800;
  color:#FFD700;letter-spacing:2px;
  text-shadow:0 0 20px rgba(255,215,0,.5);
}
.ticket-footer{
  text-align:center;padding:12px 16px;
  font-size:.72rem;color:#bbaadd;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(255,215,0,.04));
  border-top:1px solid rgba(255,255,255,.04);
}

/* ═══ WHALE SPIN NOTIFICATION ═══ */
.whale-spin-notify{
  position:fixed;bottom:-120px;left:50%;transform:translateX(-50%);
  z-index:99999;width:92%;max-width:420px;
  transition:bottom .6s ease-out;
}
.whale-spin-notify.active{bottom:24px}
.whale-notify-glow{
  position:absolute;inset:-4px;border-radius:22px;
  background:linear-gradient(135deg,#FFD700,#00CEC9,#FFD700);
  opacity:.6;filter:blur(6px);animation:whaleGlow 2s ease-in-out infinite alternate;
}
@keyframes whaleGlow{
  0%{opacity:.3}
  100%{opacity:.6}
}
.whale-notify-content{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:16px 20px;border-radius:18px;
  background:linear-gradient(160deg,#0e0825 0%,#1a0d3a 100%);
  border:1.5px solid rgba(255,215,0,.35);
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 40px rgba(255,215,0,.1);
}
.whale-notify-icon{font-size:2.2rem;flex-shrink:0;animation:whaleBounce 2s ease-in-out infinite}
@keyframes whaleBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.whale-notify-text{flex:1;min-width:0}
.whale-notify-title{
  font-size:.95rem;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#FFD700,#FFA502);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.whale-notify-sub{font-size:.72rem;color:#bbaadd;margin-top:3px;line-height:1.3}
.whale-notify-btn{
  flex-shrink:0;padding:10px 18px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#FFD700,#FFA502);color:#0a0618;
  font-weight:800;font-size:.78rem;cursor:pointer;letter-spacing:.5px;
  box-shadow:0 4px 16px rgba(255,215,0,.25);
  transition:transform .2s,box-shadow .2s;
}
.whale-notify-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(255,215,0,.35)}
.whale-notify-btn:active{transform:scale(.97)}

/* ═══ TETRIS BATTLE NOTIFICATION ═══ */
@keyframes slideUp{
  from{transform:translateX(-50%) translateY(30px);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}
}

/* Small notification bar */
.tetris-notif-bar{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:99999;
  width:92%;max-width:360px;
  background:linear-gradient(135deg,#0e0825,#1a0d3a);
  border:1.5px solid rgba(0,229,255,.35);border-radius:14px;
  padding:12px 14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 28px rgba(0,0,0,.5),0 0 20px rgba(0,229,255,.06);
  animation:slideUp .4s ease-out;
  transition:transform .15s,box-shadow .15s;
}
.tetris-notif-bar:hover{
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 30px rgba(0,229,255,.1);
}
.tetris-notif-bar:active{transform:translateX(-50%) scale(.98)}
.tnb-icon{font-size:1.3rem;flex-shrink:0}
.tnb-text{flex:1;min-width:0}
.tnb-title{font-weight:800;font-size:.78rem;color:#00e5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnb-sub{font-size:.6rem;color:#667;margin-top:1px}
.tnb-count{
  background:linear-gradient(135deg,#00e5ff,#4488ff);
  color:#07070c;font-weight:900;font-size:.7rem;
  min-width:24px;height:24px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tnb-dismiss{
  background:none;border:none;color:#445;font-size:.8rem;
  cursor:pointer;padding:4px;flex-shrink:0;
  transition:color .2s;
}
.tnb-dismiss:hover{color:#ff4466}

/* ═══ TETRIS INVITE LIST POPUP ═══ */
.tetris-invite-overlay{
  position:fixed;inset:0;z-index:999999;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.tetris-invite-overlay.show{opacity:1;pointer-events:auto}
.tetris-invite-panel{
  background:linear-gradient(160deg,#0e0825 0%,#1a0d3a 60%,#0f0a2e 100%);
  border:1.5px solid rgba(0,229,255,.3);border-radius:22px;
  width:92%;max-width:420px;max-height:75vh;overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.6),0 0 40px rgba(0,229,255,.06);
  animation:rewardSlideUp .4s cubic-bezier(.16,1,.3,1);
  pointer-events:auto;position:relative;
}
.tip-header{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px;
  border-bottom:1px solid rgba(0,229,255,.12);
  background:linear-gradient(180deg,rgba(0,229,255,.06),transparent);
}
.tip-icon{font-size:1.4rem}
.tip-title{
  flex:1;font-weight:900;font-size:.85rem;
  color:#00e5ff;letter-spacing:1.5px;text-transform:uppercase;
}
.tip-count{
  display:inline-block;background:#ff4466;color:#fff;
  font-size:.6rem;padding:2px 7px;border-radius:10px;
  margin-left:6px;vertical-align:middle;letter-spacing:0;
}
.tip-close{
  background:none;border:1px solid rgba(255,255,255,.1);
  color:#667;font-size:1.1rem;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.tip-close:hover{background:rgba(255,255,255,.08);color:#fff}
.tip-list{
  overflow-y:auto;max-height:calc(75vh - 120px);
  padding:12px 14px;scrollbar-width:none;
}
.tip-list::-webkit-scrollbar{display:none}
.tip-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin-bottom:8px;
  background:rgba(255,255,255,.03);border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  transition:all .2s;
}
.tip-row:hover{
  background:rgba(0,229,255,.04);
  border-color:rgba(0,229,255,.15);
}
.tip-row-avatar{
  width:38px;height:38px;min-width:38px;border-radius:50%;
  background:linear-gradient(135deg,#00e5ff,#4488ff);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.9rem;color:#07070c;
}
.tip-row-info{flex:1;min-width:0}
.tip-row-name{
  font-weight:800;font-size:.82rem;color:#eee;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tip-row-bet{font-size:.68rem;color:#bbaadd;margin-top:2px}
.btn-tip-accept{
  background:linear-gradient(135deg,#00e5ff,#4488ff);
  color:#07070c;border:none;padding:8px 16px;
  border-radius:10px;font-weight:800;font-size:.68rem;
  letter-spacing:.8px;cursor:pointer;flex-shrink:0;
  transition:all .2s;position:relative;z-index:2;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.btn-tip-accept:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(0,229,255,.3)}
.btn-tip-decline{
  background:none;border:1px solid rgba(255,70,100,.3);
  color:#ff4466;width:30px;height:30px;min-width:30px;
  border-radius:8px;font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;position:relative;z-index:2;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.btn-tip-decline:hover{background:rgba(255,70,100,.1);border-color:rgba(255,70,100,.5)}
.tip-close{position:relative;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tip-list{position:relative;z-index:1}
.tetris-invite-panel *{touch-action:manipulation}
.tip-row-timer{
  display:inline-block;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;font-weight:700;color:#ffaa00;
  background:rgba(255,170,0,.1);padding:1px 6px;border-radius:4px;
  margin-left:4px;
}
.tip-row-timer.urgent{color:#ff4466;background:rgba(255,68,102,.1);animation:claimPulse 1s ease infinite}
.tip-empty{
  text-align:center;color:#778;padding:36px 16px;
  font-size:.85rem;line-height:1.6;
}
.tip-footer{
  text-align:center;padding:12px 16px;
  font-size:.65rem;color:#556;
  border-top:1px solid rgba(255,255,255,.04);
  letter-spacing:.3px;
}
.tip-footer-btn{padding:12px 16px;border-top:1px solid rgba(255,255,255,.04)}
.btn-tip-open{
  width:100%;padding:12px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#00e5ff,#4488ff);color:#07070c;
  font-weight:800;font-size:.82rem;letter-spacing:1px;cursor:pointer;
  transition:all .2s;
}
.btn-tip-open:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,229,255,.3)}

/* ═══ CONFETTI CANVAS ═══ */
.reward-confetti{
  position:absolute;inset:0;pointer-events:none;z-index:10;
  border-radius:24px;overflow:hidden;
}

/* Mobile tweaks */
@media(max-width:500px){
  .reward-header{padding:18px 18px 10px}
  .reward-header h2{font-size:1.3rem}
  .reward-streak{padding:8px 18px}
  .reward-balance{padding:10px}
  .reward-balance .bal-count{font-size:1.1rem}
  .reward-grid-wrap{padding:12px 10px}
  .reward-grid{gap:5px}
  .reward-day{border-radius:10px;aspect-ratio:1/.85}
  .reward-day .day-num{font-size:.5rem}
  .reward-day .day-icon{font-size:1rem}
  .reward-day .day-label{font-size:.4rem}
  .reward-day.mystery-card .day-icon{font-size:1.15rem}
  .reward-day.special-chest .day-icon,.reward-day.special-spin .day-icon{font-size:1.05rem}
  .reward-claim-area{padding:0 12px 14px}
  .btn-claim{padding:13px;font-size:1rem}
  .reward-claim-info{font-size:.8rem;margin-bottom:8px}
}
@media(max-width:380px){
  .reward-grid{grid-template-columns:repeat(5,1fr);gap:4px}
  .reward-day .day-icon{font-size:.9rem}
  .reward-day{aspect-ratio:1/.8}
  .spin-wheel-wrap{width:250px;height:250px}
  .spin-canvas{width:250px;height:250px}
  .spin-wheel-wrap::before{top:-10px;left:-10px;right:-10px;bottom:-10px}
  .spin-wheel-wrap::after{top:-5px;left:-5px;right:-5px;bottom:-5px}
  .reward-modal{border-radius:20px}
  .reward-confetti{border-radius:20px}
}