/*
  Shared "app shell" design system — used by index.html, login.html,
  register.html, profile.html, referral.html, wallet.html.
  Keeps the existing emerald + gold identity but pushes it toward a real
  gaming-app feel: bigger type, glow/shimmer motion, chunkier touch targets.
  Individual pages can still override anything locally — these are just
  shared tokens + reusable component classes so every page feels consistent.
*/

:root{
  --rk-emerald-deep:#03130a;
  --rk-emerald:#062a16;
  --rk-panel:#0a3319;
  --rk-panel-2:#0e3f1f;
  --rk-gold:#f0c05a;
  --rk-gold-hot:#ffe08a;
  --rk-gold-dim:rgba(240,192,90,.28);
  --rk-jade:#22e08f;
  --rk-jade-dim:rgba(34,224,143,.18);
  --rk-cream:#f7f0da;
  --rk-muted:#a9cdb6;
  --rk-danger:#ff8a8a;
  --rk-radius-lg:20px;
  --rk-radius-md:14px;
  --rk-shadow-card:0 14px 32px rgba(0,0,0,.5);
}

/* ── Money / balance numbers: the signature shimmer ── */
@keyframes rk-shimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:220% 50%; }
}
.rk-money{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  background:linear-gradient(100deg, var(--rk-gold) 20%, var(--rk-gold-hot) 40%, #fff8e3 50%, var(--rk-gold-hot) 60%, var(--rk-gold) 80%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rk-shimmer 3.6s linear infinite;
  letter-spacing:.01em;
}
@media (prefers-reduced-motion: reduce){ .rk-money{ animation:none; background-position:0 0; } }

/* ── Coin-flip micro icon (used next to balance / bonus amounts) ── */
@keyframes rk-coin-flip{
  0%,100%{ transform:rotateY(0deg); }
  50%{ transform:rotateY(180deg); }
}
.rk-coin{ display:inline-block; animation:rk-coin-flip 2.6s ease-in-out infinite; transform-style:preserve-3d; }
@media (prefers-reduced-motion: reduce){ .rk-coin{ animation:none; } }

/* ── Glowing pulse ring — CTA buttons / hot badges ── */
@keyframes rk-pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(240,192,90,.45); }
  70%{ box-shadow:0 0 0 12px rgba(240,192,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,192,90,0); }
}
.rk-pulse{ animation:rk-pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite; }
@media (prefers-reduced-motion: reduce){ .rk-pulse{ animation:none; } }

/* ── Card entrance ── */
@keyframes rk-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.rk-rise{ animation:rk-rise .5s cubic-bezier(.16,1,.3,1) both; }
.rk-rise-1{ animation-delay:.04s; } .rk-rise-2{ animation-delay:.1s; }
.rk-rise-3{ animation-delay:.16s; } .rk-rise-4{ animation-delay:.22s; }

/* ── Ambient background glow blob (login/register/empty states) ── */
@keyframes rk-drift{
  0%,100%{ transform:translate(-8%,-6%) scale(1); }
  50%{ transform:translate(6%,4%) scale(1.15); }
}
.rk-ambient{
  position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none;
}
.rk-ambient::before, .rk-ambient::after{
  content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter:blur(70px); opacity:.25;
}
.rk-ambient::before{ top:-20%; left:-20%; background:radial-gradient(circle, var(--rk-gold), transparent 65%); animation:rk-drift 14s ease-in-out infinite; }
.rk-ambient::after{ bottom:-25%; right:-15%; background:radial-gradient(circle, var(--rk-jade), transparent 65%); animation:rk-drift 18s ease-in-out infinite reverse; }

/* ── Shine sweep across cards/banners ── */
@keyframes rk-sweep{ 0%{ transform:translateX(-120%) skewX(-12deg); } 100%{ transform:translateX(220%) skewX(-12deg); } }
.rk-sweep-wrap{ position:relative; overflow:hidden; }
.rk-sweep-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:35%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation:rk-sweep 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .rk-sweep-wrap::after{ animation:none; display:none; } }

/* ── Section headers, larger + bolder across the app ── */
.rk-h1{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:24px; color:var(--rk-cream); letter-spacing:.01em; }
.rk-h2{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px; color:var(--rk-gold-hot); }
.rk-label{ font-size:13px; color:var(--rk-muted); font-weight:600; letter-spacing:.02em; }

/* ── Big stat card (profile / dashboard style) ── */
.rk-stat{
  background:linear-gradient(160deg, var(--rk-panel), var(--rk-panel-2));
  border:1.5px solid var(--rk-gold-dim);
  border-radius:var(--rk-radius-md);
  padding:16px;
  box-shadow:var(--rk-shadow-card);
}
.rk-stat .rk-stat-val{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:26px; color:var(--rk-gold-hot); line-height:1.1; }
.rk-stat .rk-stat-label{ font-size:12.5px; color:var(--rk-muted); margin-top:4px; font-weight:600; }

/* ── Copy-confirm micro animation (referral code button) ── */
@keyframes rk-pop{ 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.08); opacity:1;} 100%{ transform:scale(1); } }
.rk-pop-in{ animation:rk-pop .35s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Gentle shake (draws the eye to gift / bonus icons) ── */
@keyframes rk-shake{
  0%,100%{ transform:rotate(0deg); }
  10%,30%{ transform:rotate(-8deg); }
  20%,40%{ transform:rotate(8deg); }
  50%{ transform:rotate(0deg); }
}
.rk-shake{ display:inline-block; animation:rk-shake 3.2s ease-in-out infinite; animation-delay:1s; transform-origin:50% 80%; }
@media (prefers-reduced-motion: reduce){ .rk-shake{ animation:none; } }

/* ── Fallback avatar ring with rotating sparkle ── */
@keyframes rk-spin{ to{ transform:rotate(360deg); } }
.rk-avatar-ring{ position:relative; display:inline-flex; }
.rk-avatar-ring::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--rk-gold), transparent 30%, var(--rk-jade) 55%, transparent 80%, var(--rk-gold));
  animation:rk-spin 6s linear infinite; z-index:0;
}
@media (prefers-reduced-motion: reduce){ .rk-avatar-ring::before{ animation:none; } }
.rk-avatar-ring img, .rk-avatar-ring .rk-avatar-inner{ position:relative; z-index:1; border-radius:50%; display:block; }

/* ── Spin Wheel: bottom-nav FAB ── */
.nav-spacer{ flex:1; }
.rk-spin-fab{
  position:fixed; left:50%; bottom:38px; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, var(--rk-gold) 70%);
  border:3px solid #04140b;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.5), 0 0 0 3px rgba(240,192,90,.16);
  cursor:pointer; z-index:45; -webkit-tap-highlight-color:transparent;
}
.rk-spin-fab .rk-spin-fab-icon{ font-size:25px; display:block; animation:rk-spin 7s linear infinite; }
.rk-spin-fab .rk-spin-fab-label{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  font-size:8.5px; font-weight:800; color:var(--rk-gold-hot); white-space:nowrap;
  font-family:'Baloo 2',sans-serif;
}
.rk-spin-fab.rk-spin-disabled{ filter:grayscale(.75); opacity:.72; }
.rk-spin-fab .rk-spin-badge{
  position:absolute; top:0; right:0; width:13px; height:13px; border-radius:50%;
  background:var(--rk-jade); border:2px solid #04140b;
  animation:rk-pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite;
}
@media (prefers-reduced-motion: reduce){ .rk-spin-fab .rk-spin-fab-icon{ animation:none; } }

/* ── Spin Wheel: modal ── */
.rk-spin-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(2px);
  z-index:99998; display:none; align-items:center; justify-content:center; padding:20px;
}
.rk-spin-overlay.show{ display:flex; }
.rk-spin-modal{
  width:100%; max-width:340px;
  background:linear-gradient(160deg, var(--rk-panel), var(--rk-panel-2));
  border:2px solid var(--rk-gold); border-radius:22px; padding:22px 18px 20px;
  text-align:center; position:relative; box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.rk-spin-modal .rk-spin-close{
  position:absolute; top:10px; right:12px; background:none; border:none;
  color:var(--rk-muted); font-size:20px; cursor:pointer; line-height:1;
}
.rk-spin-modal h2{ font-family:'Baloo 2',sans-serif; font-size:20px; color:var(--rk-gold-hot); margin:0 0 16px; }
.rk-wheel-wrap{ position:relative; width:224px; height:224px; margin:0 auto 18px; }
.rk-wheel-pointer{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:26px;
  color:var(--rk-gold-hot); z-index:3; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.rk-wheel{
  width:100%; height:100%; border-radius:50%; border:5px solid var(--rk-gold);
  position:relative; box-shadow:0 0 0 4px rgba(0,0,0,.3), inset 0 0 20px rgba(0,0,0,.35);
  transition:transform 4.2s cubic-bezier(.17,.67,.16,.99);
}
.rk-wheel .rk-seg-label{
  position:absolute; top:50%; left:50%; width:48%; height:2px; transform-origin:0% 50%;
}
.rk-wheel .rk-seg-label span{
  position:absolute; left:16px; top:-8px; display:inline-block; white-space:nowrap;
  font-family:'Baloo 2',sans-serif; font-size:12px; font-weight:800; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
.rk-wheel-center{
  position:absolute; top:50%; left:50%; width:22px; height:22px; background:var(--rk-gold);
  border-radius:50%; transform:translate(-50%,-50%); z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.rk-spin-action{
  width:100%; border:none; border-radius:999px; padding:14px 0;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.03em; text-transform:uppercase; cursor:pointer;
  background:linear-gradient(180deg, var(--rk-gold-hot), var(--rk-gold)); color:#241703;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}
.rk-spin-action:disabled{ opacity:.5; cursor:not-allowed; }
.rk-spin-status{ margin-top:12px; font-size:12.5px; color:var(--rk-muted); min-height:16px; }
.rk-spin-result{ margin-top:8px; font-family:'Baloo 2',sans-serif; font-size:18px; color:var(--rk-jade); display:none; }

@keyframes rk-skel{ 0%{ background-position:-150% 0; } 100%{ background-position:150% 0; } }
.rk-skel{
  background:linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.03) 70%);
  background-size:200% 100%;
  animation:rk-skel 1.4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   Casino atmosphere layer — royal/elegant black-gold base with
   restrained neon accents. Add <div class="rk-casino-bg"></div>
   once, right after <body>, on any page.
   ══════════════════════════════════════════════════════════════ */
.rk-casino-bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.rk-casino-bg::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(240,192,90,.16), transparent 60%),
    radial-gradient(90% 70% at 50% 110%, rgba(0,0,0,.6), transparent 60%);
}
.rk-casino-bg::after{
  content:""; position:absolute; top:-30%; left:50%; width:220%; height:220%;
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg, rgba(240,192,90,.05) 4deg, transparent 10deg,
      transparent 170deg, rgba(34,224,143,.045) 176deg, transparent 184deg,
      transparent 360deg);
  transform:translateX(-50%);
  animation:rk-rays-spin 40s linear infinite;
}
@keyframes rk-rays-spin{ to{ transform:translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rk-casino-bg::after{ animation:none; } }

.rk-suit-watermark{ position:absolute; opacity:.05; font-size:120px; color:var(--rk-gold); user-select:none; }

/* ── Foil / metallic double-ring border — swap onto any card ── */
.rk-foil{
  border:1.5px solid var(--rk-gold) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 3px rgba(240,192,90,.14),
    0 10px 26px rgba(0,0,0,.5),
    0 0 20px rgba(240,192,90,.18) !important;
}

/* ── Poker-chip decorative motif ── */
.rk-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border-radius:50%; flex-shrink:0;
  background:repeating-conic-gradient(var(--rk-gold) 0deg 20deg, #7a1f1f 20deg 40deg);
  border:2px solid #fff3d6; box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative;
}
.rk-chip::after{ content:""; position:absolute; inset:22%; border-radius:50%; background:var(--rk-panel,#0a3319); border:1.5px dashed rgba(255,255,255,.5); }

/* ── Neon accent glow — sparing use on primary CTAs ── */
.rk-neon{
  box-shadow:
    0 0 6px rgba(34,224,143,.7),
    0 0 16px rgba(34,224,143,.45),
    0 6px 14px rgba(0,0,0,.4) !important;
}

/* ── Confetti particle (spawned by assets/confetti.js) ── */
.rk-confetti-piece{
  position:fixed; top:-5vh; z-index:100000; pointer-events:none;
  will-change:transform, opacity;
  animation:rk-confetti-fall linear forwards;
}
@keyframes rk-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(108vh) rotate(720deg); opacity:.15; }
}