/* =========================================================
   بلوت المملكة - Visual Styles & Arabesque Design System
   ========================================================= */

:root {
  --felt-blue: #0A192F;
  --gold-accent: #D4AF37;
  --gold-light: #F7E7B4;
  --gold-dark: #996515;
}

/* Background velvet depth and geometric pattern overlay */
.table-bg {
  background: radial-gradient(circle at 50% 45%, #0F2746 0%, #08162B 55%, #040A14 100%);
  background-size: cover;
}

.table-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: radial-gradient(#D4AF37 1px, transparent 1px), radial-gradient(#D4AF37 1px, #08162B 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* Luxury Round Baloot Carpet Table */
.table-felt {
  background: radial-gradient(circle at 50% 50%, #0D274A 0%, #0A1E3A 60%, #061325 100%);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(212, 175, 55, 0.15);
}

.spotlight {
  background: radial-gradient(circle at 50% 50%, rgba(247, 231, 180, 0.08) 0%, rgba(212, 175, 55, 0.02) 40%, transparent 75%);
}

/* Playing Card Component */
.baloot-card {
  width: 58px;
  height: 84px;
  border-radius: 8px;
  background: #FAFAFA;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
  user-select: none;
  cursor: pointer;
}

@media (min-width: 640px) {
  .baloot-card {
    width: 68px;
    height: 98px;
    border-radius: 10px;
    padding: 6px;
  }
}

.baloot-card.is-playable:hover {
  transform: translateY(-16px) scale(1.06);
  box-shadow: 0 12px 24px rgba(212, 175, 55, 0.45), 0 0 12px rgba(212, 175, 55, 0.3);
  z-index: 30;
}

.baloot-card.is-disabled {
  filter: brightness(0.65) grayscale(0.4);
  cursor: not-allowed;
  transform: translateY(0) !important;
}

/* Red / Black suits */
.suit-red {
  color: #C5221F;
}

.suit-black {
  color: #111827;
}

/* Royal card back pattern */
.card-back {
  width: 32px;
  height: 48px;
  border-radius: 5px;
  background: linear-gradient(135deg, #091D38 0%, #16365F 50%, #0A1C36 100%);
  border: 1.5px solid #D4AF37;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back::before {
  content: '❖';
  color: #D4AF37;
  font-size: 11px;
  opacity: 0.8;
}

/* Trick slot positioning */
.trick-card-slot {
  width: 58px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .trick-card-slot {
    width: 68px;
    height: 98px;
  }
}

/* Card throwing animation */
@keyframes throwCard {
  0% {
    transform: scale(0.6) translateY(40px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.animate-throw {
  animation: throwCard 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Custom Scrollbar for Nashra sheet */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #061120;
}
::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 4px;
}