/* EasyEnglish — מסך הבית (שלב 1, ויזואלי בלבד)
   שפה חזותית לפי core/design-guide.html: פלטה חמה, Baloo 2, פינות רכות,
   בלי קווי-מתאר קשים, צללים רכים, יעדי-מגע גדולים לפעוט. */

: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);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; }

body {
  font-family:'Baloo 2', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 12%, #FBF5EA 0%, #F7F1E6 55%, #F1E8D6 100%);
  -webkit-user-select:none; user-select:none;
}

/* ---- מעטפת מסך ---- */
.home {
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,40px);
  overflow:hidden;
}

.home-inner {
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(20px,5vh,44px);
}

/* ---- תפריט 3-נקודות (פינה עליונה) ---- */
.menu-btn {
  position:absolute;
  top:clamp(14px,3vw,26px);
  inset-inline-end:clamp(14px,3vw,26px);
  width:56px; height:56px;
  border:none; border-radius:50%;
  background:var(--card);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
  z-index:5;
}
.menu-btn span {
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-soft);
}
.menu-btn:active { transform:scale(.94); }

/* ---- הכפתור המרכזי: המסקוט (התוכן היומי) ---- */
.hero-btn {
  border:none; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,2vh,18px);
  transition:transform .18s ease;
}
.hero-disc {
  --size:clamp(220px,62vw,320px);
  width:var(--size); height:var(--size);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%, #FFFFFF 0%, #FFF3E2 62%, #FFE4CC 100%);
  box-shadow:var(--shadow-lift), inset 0 4px 10px rgba(255,255,255,.7);
  display:grid; place-items:end center;
  position:relative;
  overflow:hidden;
}
/* ברק לבן רך בצד — לפי "ברק לבן אחד" במדריך */
.hero-disc::after {
  content:""; position:absolute;
  top:12%; inset-inline-start:14%;
  width:34%; height:30%;
  background:rgba(255,255,255,.55);
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}
.mascot {
  width:78%; height:88%;
  object-fit:contain; object-position:bottom center;
  display:block;
  filter:drop-shadow(0 8px 12px rgba(80,60,40,.18));
  position:relative; z-index:1;
}
.hero-label {
  font-weight:700;
  font-size:clamp(1.5rem,6vw,2.1rem);
  color:var(--wood-deep);
  line-height:1;
}
.hero-btn:active { transform:scale(.97); }

/* מנוטרל: אין יום הבא — הכפתור המרכזי לא לחיץ (שלב 3) */
.hero-btn.is-disabled { cursor:default; }
.hero-btn.is-disabled:active { transform:none; }
.hero-btn.is-disabled .hero-disc { filter:grayscale(.55) opacity(.6); box-shadow:var(--shadow-soft); }
.hero-btn.is-disabled .mascot { filter:grayscale(.4) opacity(.7); }
.hero-btn.is-disabled .hero-label { color:var(--ink-soft); }

/* ---- 3 כפתורים משניים, שווים בגודלם ---- */
.secondary {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(16px,5vw,34px);
  width:100%;
}
.sec-btn {
  border:none; background:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  flex:0 1 auto;
  width:clamp(92px,26vw,118px);
  transition:transform .15s ease;
}
.sec-disc {
  width:clamp(84px,22vw,108px);
  aspect-ratio:1;
  border-radius:50%;
  box-shadow:var(--shadow);
  display:grid; place-items:center;
  position:relative;
}
.sec-disc::after {
  content:""; position:absolute;
  top:14%; inset-inline-start:16%;
  width:30%; height:26%;
  background:rgba(255,255,255,.5);
  border-radius:50%;
  filter:blur(6px);
  pointer-events:none;
}
.sec-disc svg { width:52%; height:52%; position:relative; z-index:1; }
.sec-peach  { background:radial-gradient(circle at 50% 36%, #FFF1E4, var(--sec-peach)); }
.sec-purple { background:radial-gradient(circle at 50% 36%, #F3EFFB, var(--sec-purple)); }
.sec-teal   { background:radial-gradient(circle at 50% 36%, #E7F7F5, var(--sec-teal)); }

.sec-label {
  font-weight:600;
  font-size:clamp(.82rem,3.4vw,1rem);
  color:var(--ink);
  text-align:center;
  line-height:1.15;
}
.sec-btn:active { transform:scale(.95); }

/* ---- מסכים צרים מאוד ---- */
@media (max-width:340px) {
  .secondary { gap:12px; }
  .sec-label { font-size:.78rem; }
}