.elementor-4225 .elementor-element.elementor-element-4331ca7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-4225:not(.elementor-motion-effects-element-type-background), body.elementor-page-4225 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E3E3E3;}@media(min-width:768px){.elementor-4225 .elementor-element.elementor-element-4331ca7{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-771728e *//* ===== Bimeh Bazar — Memory Match (کارت برگردون) — نسخه‌ی پس‌زمینه سفید ===== */
/* همون ساختار قبلی، فقط پالت رنگ برای پس‌زمینه‌ی روشن بازطراحی شده */

.bb-mm-root{
  --bg-0:#ffffff;
  --ink:#1c1c1f;
  --ink-dim:#75757c;
  --charcoal:#1c1c1f;
  --charcoal-hi:#2b2b2f;
  --gold:#F2BF17;
  --gold-deep:#b8860a;
  --gold-soft:#f7d65a;
  --gold-text:#a87b06; /* نسخه‌ی تیره‌تر طلایی برای متن، تا روی سفید خوانا بمونه */
  --green-ok:#2f9e44;
  --red-no:#e0453b;

  font-family:'Vazirmatn', sans-serif;
  color:var(--ink);
  direction:rtl;
  min-height:100vh;
  background:var(--bg-0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px 40px;
  box-sizing:border-box;
}
.bb-mm-root *{box-sizing:border-box;}
.bb-mm-hidden{display:none !important;}

.bb-mm-page{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

/* ---- brand bar ---- */
.bb-mm-brandbar{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  color:var(--gold-text);
}
.bb-mm-brandbar .bb-mm-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}

/* ---- headline ---- */
.bb-mm-headline{text-align:center;}
.bb-mm-headline h1{
  margin:0 0 6px;
  font-size:24px;
  font-weight:900;
  line-height:1.35;
  color:var(--ink);
}
.bb-mm-headline p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-dim);
  font-weight:500;
  line-height:1.7;
}

/* ---- move status ---- */
.bb-mm-status{
  font-size:14px;
  font-weight:700;
  color:var(--ink-dim);
}
.bb-mm-status b{
  color:var(--gold-text);
  font-weight:800;
}
.bb-mm-status.bb-mm-warn b{color:var(--red-no);}

/* ---- board ---- */
.bb-mm-board{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  width:100%;
  perspective:900px;
}

.bb-mm-card{
  position:relative;
  aspect-ratio:3/4;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.bb-mm-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.bb-mm-card.bb-mm-flipped .bb-mm-card-inner,
.bb-mm-card.bb-mm-matched .bb-mm-card-inner{
  transform:rotateY(180deg);
}

.bb-mm-face{
  position:absolute;
  inset:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* پشت کارت: مشکی تیره روی سفید — کنتراست قوی و شیک، مثل یه کارت اعتباری براق */
.bb-mm-face-back{
  background:linear-gradient(160deg, var(--charcoal-hi), var(--charcoal));
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(242,191,23,.5);
}
.bb-mm-face-back svg{ width:38%; opacity:.9; }

.bb-mm-face-front{
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  transform:rotateY(180deg);
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35);
}
.bb-mm-face-front svg{ width:46%; }

.bb-mm-card.bb-mm-matched .bb-mm-face-front{
  background:radial-gradient(circle at 35% 30%, #eaffea, var(--green-ok) 60%, #1f7a34);
  box-shadow:0 0 0 2px rgba(47,158,68,.35), 0 8px 18px rgba(0,0,0,.18);
}

.bb-mm-card.bb-mm-shake .bb-mm-card-inner{
  animation:bb-mm-shake .4s ease;
}
@keyframes bb-mm-shake{
  0%,100%{transform:rotateY(180deg) translateX(0);}
  25%{transform:rotateY(180deg) translateX(-4px);}
  75%{transform:rotateY(180deg) translateX(4px);}
}

/* ---- result ---- */
.bb-mm-result{
  min-height:20px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.bb-mm-result.bb-mm-show{opacity:1; transform:translateY(0);}
.bb-mm-result.bb-mm-win{color:var(--green-ok);}
.bb-mm-result.bb-mm-lose{color:var(--red-no);}

/* ---- restart ---- */
.bb-mm-restart{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:15px;
  color:#181104;
  padding:12px 34px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  box-shadow:0 10px 22px -8px rgba(184,134,10,.4), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease;
}
.bb-mm-restart:hover{transform:translateY(-1px);}
.bb-mm-restart:active{transform:translateY(1px) scale(.99);}

@media (prefers-reduced-motion: reduce){
  .bb-mm-card-inner{transition:none;}
  .bb-mm-card.bb-mm-shake .bb-mm-card-inner{animation:none;}
}

/* یه‌بار توی هدر سایت اضافه کن (اگه قبلاً برای گردونه اضافه نکردی):
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700;800;900&display=swap" rel="stylesheet">
*//* End custom CSS */