/* =====================================================================
   Russia Top One — Motion & Polish Layer  (rt-theme.css)
   পুরনো ডিজাইন নষ্ট না করে শুধু animation + ফিনিশিং যোগ করে।
   ===================================================================== */

:root {
  --rt-gold: #ffd700;
  --rt-blue: #1e5af0;
  --rt-purple: #7b3ff2;
  --rt-green: #10b981;
  --rt-red: #dc2626;
  --rt-ease: cubic-bezier(.22, 1, .36, 1);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

::selection { background: var(--rt-blue); color: #fff; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rt-blue), var(--rt-purple));
  border-radius: 20px;
}

/* ---------- keyframes ---------- */
@keyframes rtFadeUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rtFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rtPop      { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rtFloat    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes rtShine    { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes rtSpin     { to { transform: rotate(360deg); } }
@keyframes rtShake    { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes rtAurora   { 0% { transform: translate(-6%, -4%) scale(1); } 50% { transform: translate(6%, 5%) scale(1.15); } 100% { transform: translate(-6%, -4%) scale(1); } }
@keyframes rtSlideIn  { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: none; } }

/* ---------- scroll reveal ---------- */
.rt-reveal { opacity: 0; transform: translateY(24px); }
.rt-reveal.rt-in { animation: rtFadeUp .62s var(--rt-ease) forwards; }

.rt-shake { animation: rtShake .5s both; }
.rt-pop { animation: rtPop .45s var(--rt-ease); display: inline-block; }

/* ---------- login screens: animated aurora ---------- */
.login-screen { position: relative; overflow: hidden; }
.login-screen::before,
.login-screen::after {
  content: '';
  position: absolute;
  width: 62vmax; height: 62vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.login-screen::before {
  background: radial-gradient(circle at 30% 30%, var(--rt-blue), transparent 62%);
  top: -22vmax; left: -18vmax;
  animation: rtAurora 17s ease-in-out infinite;
}
.login-screen::after {
  background: radial-gradient(circle at 70% 70%, var(--rt-purple), transparent 62%);
  bottom: -24vmax; right: -18vmax;
  animation: rtAurora 21s ease-in-out infinite reverse;
}
.login-screen > * { position: relative; z-index: 1; }
.login-box { animation: rtFadeUp .7s var(--rt-ease) both; }
.login-box .admin-icon { animation: rtFloat 3.6s ease-in-out infinite; display: inline-block; }

/* ---------- inputs ---------- */
input, select, textarea { transition: border-color .2s, box-shadow .2s, background .2s; }
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(30, 90, 240, .16);
}

/* ---------- buttons ---------- */
button { transition: transform .18s var(--rt-ease), box-shadow .22s, filter .2s, opacity .2s; }
button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(0) scale(.985); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible { outline: 3px solid var(--rt-gold); outline-offset: 2px; }

.login-btn, .join-btn, .submit-btn { position: relative; overflow: hidden; }
.login-btn::after, .join-btn::after, .submit-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%);
  background-size: 200% 100%;
  animation: rtShine 3.4s linear infinite;
  pointer-events: none;
}

/* ---------- cards ---------- */
.match-card, .stat-card, .package-card, .survey-card, .join-req-card,
.payment-card, .withdraw-card, .tx-item, .panel-card, .order-card {
  transition: transform .26s var(--rt-ease), box-shadow .26s;
}
.match-card:hover, .package-card:hover, .panel-card:hover, .stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
}

/* ---------- balance card shimmer ---------- */
.balance-card { animation: rtFadeUp .6s var(--rt-ease) both; position: relative; overflow: hidden; }
.balance-card::after {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .14), transparent 30%);
  animation: rtSpin 9s linear infinite;
  pointer-events: none;
}
.balance-card > * { position: relative; z-index: 1; }

/* ---------- tabs ---------- */
.admin-tab { transition: background .2s, color .2s, transform .2s; }
.admin-tab:hover { transform: translateY(-2px); }

/* ---------- toast ---------- */
#rtToastWrap {
  position: fixed; top: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 99999; pointer-events: none;
  max-width: min(360px, 88vw);
}
.rt-toast {
  animation: rtSlideIn .45s var(--rt-ease) both;
  background: #0f172a;
  color: #fff;
  border-left: 5px solid var(--rt-blue);
  border-radius: 12px;
  padding: 13px 17px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .32);
}
.rt-toast.ok { border-left-color: var(--rt-green); }
.rt-toast.err { border-left-color: var(--rt-red); }
.rt-toast.warn { border-left-color: #f59e0b; }
.rt-toast.out { animation: rtFadeIn .3s reverse both; }

/* ---------- loading skeleton ---------- */
.rt-skel {
  background: linear-gradient(90deg, rgba(148, 163, 184, .16) 25%, rgba(148, 163, 184, .34) 37%, rgba(148, 163, 184, .16) 63%);
  background-size: 400% 100%;
  animation: rtShine 1.3s linear infinite;
  border-radius: 10px;
  height: 16px;
}

/* ---------- admin identity badge ---------- */
.rt-whoami {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 215, 0, .14);
  border: 1px solid rgba(255, 215, 0, .4);
  color: var(--rt-gold);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 12px; font-weight: 800;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- page enter ---------- */
body { animation: rtFadeIn .4s ease both; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rt-reveal { opacity: 1; transform: none; }
}