:root {
  --grape: #8b5cf6;
  --gold: #fbbf24;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(800px 500px at 10% 10%, rgba(236, 72, 153, .14), transparent 55%),
    #0b0918;
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 99px; }

.glass {
  background: rgba(26, 22, 51, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.07);
}

.card-hover { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; }
.card-hover:active { transform: scale(.975); }
@media (hover: hover) {
  .card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -12px rgba(139,92,246,.45); }
}

/* ───── المايكات ───── */
.mic-slot { transition: transform .15s ease, box-shadow .2s ease; }
.mic-slot:active { transform: scale(.93); }

.mic-ring-speaking {
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .75);
  animation: micPulse 1.2s infinite;
}
@keyframes micPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.7); }
  70%  { box-shadow: 0 0 0 14px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.wave-bar { animation: wave .9s ease-in-out infinite; transform-origin: bottom; }
.wave-bar:nth-child(2) { animation-delay: .12s }
.wave-bar:nth-child(3) { animation-delay: .24s }
.wave-bar:nth-child(4) { animation-delay: .36s }
@keyframes wave { 0%,100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }

/* ───── الرسائل ───── */
.msg-in { animation: msgIn .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───── أنيميشن الهدايا ───── */
.fx-item { position: absolute; will-change: transform, opacity; }

@keyframes fxFloat {
  0%   { transform: translateY(20vh) scale(.5); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-90vh) scale(1.25) rotate(18deg); opacity: 0; }
}
@keyframes fxPop {
  0%   { transform: scale(.1) rotate(-25deg); opacity: 0; }
  35%  { transform: scale(1.5) rotate(8deg); opacity: 1; }
  60%  { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1.3) rotate(0); opacity: 0; }
}
@keyframes fxShine {
  0%   { transform: scale(.2) rotate(0); opacity: 0; filter: brightness(2); }
  30%  { transform: scale(1.6) rotate(180deg); opacity: 1; }
  75%  { transform: scale(1.4) rotate(340deg); opacity: 1; filter: brightness(1.4); }
  100% { transform: scale(2.4) rotate(420deg); opacity: 0; }
}
@keyframes fxDrive {
  0%   { transform: translateX(120vw) scale(1.1); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translateX(30vw) scale(1.6); }
  88%  { opacity: 1; }
  100% { transform: translateX(-120vw) scale(1.1); opacity: 0; }
}
@keyframes fxSail {
  0%   { transform: translateX(115vw) translateY(0) scale(1.2); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translateX(35vw) translateY(-18px) scale(1.7); }
  100% { transform: translateX(-115vw) translateY(0) scale(1.2); opacity: 0; }
}
@keyframes fxFly {
  0%   { transform: translate(115vw, 22vh) rotate(-8deg) scale(.7); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translate(30vw, -6vh) rotate(-14deg) scale(1.6); }
  100% { transform: translate(-120vw, -30vh) rotate(-18deg) scale(.9); opacity: 0; }
}
@keyframes fxRocket {
  0%   { transform: translateY(60vh) scale(.6) rotate(-10deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-95vh) scale(1.8) rotate(6deg); opacity: 0; }
}
@keyframes fxCastle {
  0%   { transform: translateY(70vh) scale(.5); opacity: 0; }
  25%  { transform: translateY(0) scale(1.9); opacity: 1; }
  78%  { transform: translateY(0) scale(1.9); opacity: 1; }
  100% { transform: translateY(-20vh) scale(2.4); opacity: 0; }
}
@keyframes fxDragon {
  0%   { transform: translate(-115vw, 10vh) scaleX(-1) scale(1); opacity: 0; }
  18%  { opacity: 1; }
  50%  { transform: translate(-10vw, -8vh) scaleX(-1) scale(2.1); }
  100% { transform: translate(115vw, 6vh) scaleX(-1) scale(1.2); opacity: 0; }
}
@keyframes fxSpark {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@keyframes fxBanner {
  0%   { transform: translateY(-120%); opacity: 0; }
  12%  { transform: translateY(0); opacity: 1; }
  85%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120%); opacity: 0; }
}
@keyframes fxFlash {
  0% { opacity: 0 } 25% { opacity: .55 } 100% { opacity: 0 }
}

.fx-banner { animation: fxBanner var(--dur, 4s) ease forwards; }
.fx-flash  { animation: fxFlash 1s ease forwards; }

/* ───── مساعدات ───── */
.tier-basic  { box-shadow: 0 0 0 1px rgba(148,163,184,.25) inset; }
.tier-mid    { box-shadow: 0 0 0 1px rgba(251,191,36,.45) inset, 0 0 22px -8px rgba(251,191,36,.6); }
.tier-luxury { box-shadow: 0 0 0 1px rgba(236,72,153,.55) inset, 0 0 28px -6px rgba(236,72,153,.7); }

.shimmer {
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 40%, transparent 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -220% 0 } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.toast {
  animation: toastIn .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.95) } to { opacity: 1; transform: none } }

input, textarea, select { font-family: inherit; }
button { font-family: inherit; }