/* ===== الخريطة الرئيسية ===== */
.map-screen {
  min-height: 100%;
  padding-bottom: 40px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(180deg, #8be9ff 0%, #a0e8af 45%, #ffe9a8 100%);
}

/* لافتة المرشد */
.guide-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.guide-banner .guide-emoji {
  font-size: clamp(44px, 12vw, 64px);
  animation: bob 2.6s ease-in-out infinite;
}
.guide-banner .bubble {
  position: relative;
  flex: 1;
  background: var(--c-cream);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 700;
  color: var(--c-ink);
}

/* شبكة المناطق */
.regions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 8px 16px 24px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 620px) {
  .regions-grid { grid-template-columns: repeat(3, 1fr); }
}

.region-card {
  position: relative;
  border: none;
  border-radius: var(--radius);
  padding: 18px 10px 16px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .15s ease;
  animation: pop-in .4s ease both;
}
.region-card:active { transform: scale(.95); }
.region-card .region-emoji {
  display: block;
  font-size: clamp(46px, 13vw, 72px);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}
/* صورة الكائن (بدل الإيموجي) */
.region-card img.region-emoji,
img.item-img {
  display: block;
  width: 100%;
  max-width: clamp(150px, 44vw, 260px);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 16px;
}
.region-card .region-name {
  display: block;
  margin-top: 8px;
  font-size: clamp(15px, 4.2vw, 21px);
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.region-card .region-name-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(11px, 3vw, 14px);
  opacity: .9;
}

/* شارة النجوم على البطاقة */
.region-card .region-stars {
  position: absolute;
  top: 8px;
  inset-inline-start: 10px;
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

/* المنطقة المقفلة */
.region-card.locked { filter: grayscale(.7) brightness(.85); }
.region-card.locked::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(40px, 11vw, 60px);
  background: rgba(40, 25, 80, .45);
}

/* مكتمل */
.region-card.done .region-emoji::after {
  content: "✅";
  position: absolute;
  top: 6px;
  inset-inline-end: 10px;
  font-size: 22px;
}

/* تدرّجات ألوان المناطق */
.bg-arabic   { background: linear-gradient(160deg, #ff9a6c, #ff5d5d); }
.bg-english  { background: linear-gradient(160deg, #6fb1ff, #3a6bff); }
.bg-numbers  { background: linear-gradient(160deg, #ffd23f, #ff924c); }
.bg-animals  { background: linear-gradient(160deg, #9be15d, #00c46a); }
.bg-fish     { background: linear-gradient(160deg, #5fd0ff, #008cff); }
.bg-birds    { background: linear-gradient(160deg, #b794ff, #7c5fe6); }
.bg-insects  { background: linear-gradient(160deg, #9be15d, #f6d365); }
.bg-fruits   { background: linear-gradient(160deg, #ff8fae, #ff4d8d); }
.bg-colors   { background: linear-gradient(160deg, #f6d365, #fda085); }
.bg-shapes   { background: linear-gradient(160deg, #43e0d0, #1aa7a0); }
.bg-jobs     { background: linear-gradient(160deg, #ffb347, #ff7e5f); }
.bg-body     { background: linear-gradient(160deg, #ff9eb5, #ff5f8d); }
.bg-transport { background: linear-gradient(160deg, #6dd5fa, #2980b9); }
.bg-food     { background: linear-gradient(160deg, #ffd86f, #fc6262); }
.bg-weekdays { background: linear-gradient(160deg, #a18cd1, #fbc2eb); }
.bg-opposites { background: linear-gradient(160deg, #30cfd0, #330867); }
.bg-words    { background: linear-gradient(160deg, #84fab0, #8fd3f4); }