/* EasyEnglish — רכיב בקרת הורים (שלב 5)
   עקבי עם מסך הבית (home.css): אותה פלטה חמה, Baloo 2, דיסקים עגולים רכים,
   צללים רכים. יעדי-מגע נוחים למבוגר. overlay מודאלי חוסם מעל המסך הנוכחי. */

:root {
  --bg-page:#F7F1E6; --stage:#FBF5EA; --card:#FFFFFF;
  --sec-peach:#FFE4CC; --sec-purple:#E9E3F7; --sec-teal:#D6F0EE;
  --ink:#44403C; --ink-soft:#7C746C;
  --orange:#F59A2E; --mustard:#F2C14E; --wood-deep:#A85F1E;
  --shadow:0 10px 24px rgba(80,60,40,.12);
  --shadow-soft:0 6px 14px rgba(80,60,40,.10);
  --shadow-lift:0 16px 34px rgba(80,60,40,.16);
}

/* ---- ה-overlay החוסם ---- */
.gate-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,6vw,48px);
  background:rgba(48,36,24,.46);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:gate-fade .18s ease;
}
@keyframes gate-fade { from { opacity:0; } to { opacity:1; } }

/* ---- הכרטיס ---- */
.gate-card {
  width:100%;
  max-width:400px;
  background:var(--card);
  border-radius:28px;
  box-shadow:var(--shadow-lift);
  padding:clamp(24px,6vw,36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,3vh,24px);
  text-align:center;
  animation:gate-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes gate-pop { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }

.gate-hint {
  margin:0;
  font-weight:600;
  font-size:clamp(.92rem,3.6vw,1.05rem);
  color:var(--ink-soft);
  line-height:1.35;
}

.gate-question {
  margin:0;
  font-weight:800;
  font-size:clamp(2rem,9vw,2.8rem);
  color:var(--wood-deep);
  line-height:1;
  direction:ltr;
}

/* ---- שדה-תצוגה של הספרות שהוקלדו ---- */
.gate-display {
  width:clamp(140px,60%,220px);
  min-height:clamp(52px,12vw,64px);
  border-radius:16px;
  background:var(--stage);
  box-shadow:inset 0 2px 6px rgba(80,60,40,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  direction:ltr;
  font-weight:800;
  font-size:clamp(1.6rem,7vw,2.2rem);
  color:var(--wood-deep);
  letter-spacing:.12em;
  line-height:1;
}

/* ---- מקלדת מספרים על-המסך (3×4) ---- */
/* LTR כדי שהספרות יסתדרו בסדר טלפון מוכר (1-2-3 משמאל לימין),
   גם בתוך דף RTL. */
.gate-keypad {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(9px,2.6vw,14px);
  width:100%;
  max-width:300px;
  direction:ltr;
}
.gate-key {
  border:none; cursor:pointer;
  aspect-ratio:1;
  border-radius:22px;
  background:radial-gradient(circle at 50% 34%, #FFFFFF 0%, #FFF3E2 100%);
  box-shadow:var(--shadow-soft);
  font-family:inherit;
  font-weight:800;
  font-size:clamp(1.3rem,6vw,1.7rem);
  color:var(--wood-deep);
  display:grid; place-items:center;
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.gate-key:active { transform:scale(.94); box-shadow:var(--shadow); }

/* מקש פעולה (מחיקה) — גוון ניטרלי רך */
.gate-key-action {
  background:radial-gradient(circle at 50% 34%, #F6F0FB 0%, var(--sec-purple) 100%);
  color:var(--ink-soft);
  font-size:clamp(1.4rem,6.5vw,1.9rem);
}
/* מקש אישור — מודגש בגוון הטיל הרך של האפליקציה */
.gate-key-ok {
  background:radial-gradient(circle at 50% 34%, #E7F7F5 0%, var(--sec-teal) 100%);
  color:var(--wood-deep);
  font-size:clamp(.92rem,3.8vw,1.12rem);
}

@media (max-width:340px) {
  .gate-keypad { gap:8px; }
  .gate-key { border-radius:18px; }
}