@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root{
  --bs-primary: #5C1834;
  --soulful: #5C1834;
  --logo-font: 'Playfair Display', serif;
  --ui-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
body{ font-family: var(--ui-font); }
.logo-text{ font-family: var(--logo-font); font-weight: 600; font-size: clamp(1.25rem, 1.6rem + 1vw, 1.75rem); color: var(--soulful); letter-spacing: .2px; }
.logo-font{ font-family: var(--logo-font); }
.navbar .nav-link{ color:#6c6a6a; }
.navbar .nav-link:hover{ color: var(--soulful); }

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.gradient-hero{
  background: radial-gradient(1000px 400px at 20% -10%, rgba(92,24,52,.2), transparent),
              radial-gradient(700px 400px at 120% 30%, rgba(92,24,52,.08), transparent),
              linear-gradient(180deg, rgba(92,24,52,.05), transparent 40%);
}

.feature-icon{
  width: 56px; height: 56px; display: grid; place-items: center;
  background: rgba(92,24,52,.08); color: var(--soulful);
}

.step{ position:relative; background: #fff; }
.step-num{
  width: 36px; height: 36px; display:grid; place-items:center;
  border-radius: 50%; background: var(--bs-primary); color: #fff; font-weight: 600;
}

.card-stack img{ object-fit: cover; }

/* Game card */
.game-area{ min-height: 420px; }
.soul-card{ width: min(620px, 100%); height: 360px; perspective: 1000px; }
.soul-card-inner{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .7s ease;
}
.soul-card.flipped .soul-card-inner{ transform: rotateY(180deg); }

.soul-card-front, .soul-card-back{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.soul-card-front{
  background: var(--soulful) url('../img/back-card.png') center/cover no-repeat;
}
.soul-card-back{
  background: #fff url('../img/front-card.png') right bottom/260px auto no-repeat;
  transform: rotateY(180deg);
  border: 1px solid rgba(92,24,52,.15);
}

.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4e152c;
  --bs-btn-hover-border-color: #4e152c;
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
}
.badge.bg-primary-subtle{ background: rgba(92,24,52,.08)!important; color: var(--soulful)!important; }