/* ===== זרקור — עיצוב בסיס =====
   כהה, חם, והמסך מתבהר ככל שדרגת האור עולה.
   --glow נשלט מ-JS לפי הדרגה של הילד. */

:root{
  --glow: 0.08;
  --bg: #0B1020;
  --surface: #151B31;
  --surface-2: #1D2540;
  --line: #2A3355;
  --text: #F2F5FF;
  --text-dim: #9AA6C9;
  --beam: #FFC46B;
  --beam-soft: #FFE3B0;
  --good: #6FE3B0;
  --radius: 16px;
  --tap: 56px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,body{ margin:0; padding:0; height:100%; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Rubik","Assistant","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* הזוהר שגדל עם הדרגה */
#glow{
  position: fixed;
  top: -30vh; left: 50%;
  transform: translateX(-50%);
  width: 140vw; height: 80vh;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center,
              rgba(255,196,107,var(--glow)) 0%,
              rgba(255,196,107,0) 70%);
  transition: opacity .8s ease;
}

.screen{
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: 20px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}
.screen[hidden]{ display:none; }

/* ---------- מיתוג ---------- */
.brand{ text-align:center; padding-top: 22px; }
.brand-mark{
  width: 68px; height: 68px; margin: 0 auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--beam-soft), var(--beam) 45%, rgba(255,196,107,0) 72%);
  box-shadow: 0 0 44px rgba(255,196,107,.45);
}
.brand h1{ margin:0; font-size: 40px; font-weight: 700; letter-spacing: .5px; }
.brand-sub{ margin: 6px 0 0; color: var(--text-dim); font-size: 15px; }

.screen-title{ margin: 4px 0 0; font-size: 22px; font-weight: 600; text-align:center; }

/* ---------- סרגל עליון ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}
.topbar-title{ font-size: 17px; font-weight: 600; }
.spacer{ width: var(--tap); }
.who{ display:flex; flex-direction:column; align-items:center; gap: 4px; }
.who-name{ font-size: 17px; font-weight: 600; }

.icon-btn{
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}
.icon-btn:active{ transform: scale(.94); }

.rank-pill{
  border: 1px solid rgba(255,196,107,.4);
  background: rgba(255,196,107,.12);
  color: var(--beam-soft);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- כפתורים ---------- */
.primary-btn{
  min-height: var(--tap);
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--beam), #E9A445);
  color: #2A1B02;
  font-size: 20px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.primary-btn:disabled{ opacity: .35; }
.primary-btn:active:not(:disabled){ transform: scale(.98); }

.ghost-btn{
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
}
.ghost-btn.danger{ color: #FF9C9C; border-color: #5A2B2B; margin-top: auto; }

.link-btn{
  background:none; border:none; color: var(--text-dim);
  font-family: inherit; font-size: 15px;
  text-decoration: underline; cursor: pointer;
  margin-top: auto; padding: 14px;
}

/* ---------- פרופילים ---------- */
.profile-list{ display:flex; flex-direction:column; gap: 12px; }
.profile-card{
  display:flex; align-items:center; gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.profile-card:active{ transform: scale(.99); }
.profile-avatar{
  width: 52px; height: 52px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 26px;
  background: var(--surface-2);
  flex: 0 0 auto;
}
.profile-meta{ flex:1; text-align: right; }
.profile-meta strong{ display:block; font-size: 19px; }
.profile-meta span{ font-size: 14px; color: var(--text-dim); }
.profile-edit{
  background:none; border:none; color: var(--text-dim);
  font-size: 20px; padding: 10px; cursor: pointer;
}
.name-input{
  flex: 1;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--beam);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit; font-size: 18px;
  padding: 0 12px;
  text-align: right;
}

/* ---------- כרטיס משימה ---------- */
.mission-card{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: 20px 18px;
  text-align: center;
}
.eyebrow{ margin:0; font-size: 14px; color: var(--text-dim); }
.mission-emoji{ font-size: 54px; line-height: 1.2; margin: 6px 0; }
.mission-text{ margin: 0 0 14px; font-size: 25px; font-weight: 600; line-height: 1.35; }

/* ---------- מיקרופון ---------- */
.mic-wrap{ text-align:center; }
.mic-btn{
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2px solid rgba(255,196,107,.5);
  background: rgba(255,196,107,.14);
  cursor: pointer;
}
.mic-btn .mic-icon{ font-size: 44px; }
.mic-btn:active{ transform: scale(.95); }
.mic-btn.listening{
  animation: pulse 1.1s ease-in-out infinite;
  background: rgba(255,196,107,.3);
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,196,107,.5); }
  50%{ box-shadow: 0 0 0 22px rgba(255,196,107,0); }
}
.mic-hint{ margin: 10px 0 0; font-size: 15px; color: var(--text-dim); }

/* ---------- רצועת דקות ---------- */
.daily-strip{
  display:flex; align-items:baseline; justify-content:center; gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  margin-top: auto;
}
.daily-strip strong{ font-size: 24px; color: var(--beam); }
.daily-label{ font-size: 15px; color: var(--text-dim); }

/* ---------- מגש הקוביות ---------- */
.tray{
  min-height: 92px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  display:flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
}
.tray.filled{ border-style: solid; border-color: rgba(255,196,107,.5); }
.tray-empty{ margin:0; color: var(--text-dim); font-size: 15px; }

.sentence-bar{
  display:flex; align-items:center; gap: 8px;
  width: 100%;
  border: 1px solid rgba(255,196,107,.35);
  background: rgba(255,196,107,.1);
  color: var(--beam-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit; font-size: 18px;
  text-align: right;
  cursor: pointer;
}

/* ---------- הקלדה חופשית (בן 7 מילה, בן 9 מלא) ---------- */
.freetext-wrap{ display:flex; gap: 8px; }
.freetext-wrap[hidden]{ display:none; }
.freetext{
  flex: 1;
  min-height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: inherit; font-size: 18px;
  padding: 0 14px;
  text-align: right;
}
.freetext::placeholder{ color: var(--text-dim); }
.freetext:focus{ outline:none; border-color: var(--beam); }
.freetext-go{
  width: var(--tap); min-height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--beam);
  font-size: 22px; cursor: pointer;
}

/* ---------- שלוש הדרגות ----------
   בן 5: הכל גדול, מעט טקסט. בן 9: צפוף וטקסטואלי. */
body[data-tier="spark"] .tile{ min-height: 88px; }
body[data-tier="spark"] .tile .tile-emoji{ font-size: 34px; }
body[data-tier="spark"] .tile .tile-word{ font-size: 12px; opacity: .75; }
body[data-tier="spark"] .bank-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
body[data-tier="spark"] .mission-text{ font-size: 27px; }
body[data-tier="spark"] .mic-btn{ width: 124px; height: 124px; }

body[data-tier="lamp"] .tile{ min-height: 76px; }
body[data-tier="lamp"] .tile .tile-emoji{ font-size: 27px; }
body[data-tier="lamp"] .tile .tile-word{ font-size: 13px; }

body[data-tier="beam"] .tile{ min-height: 64px; }
body[data-tier="beam"] .tile .tile-emoji{ font-size: 21px; }
body[data-tier="beam"] .tile .tile-word{ font-size: 13px; }
body[data-tier="beam"] .bank-grid{ grid-template-columns: repeat(5, 1fr); gap: 6px; }
body[data-tier="beam"] .mission-text{ font-size: 23px; }
body[data-tier="beam"] .mic-btn{ width: 84px; height: 84px; }
body[data-tier="beam"] .mic-btn .mic-icon{ font-size: 34px; }

/* ---------- בנק הקוביות ---------- */
.bank{ display:flex; flex-direction:column; gap: 14px; overflow-y: auto; }
.bank-group-label{ font-size: 14px; color: var(--text-dim); margin: 0 0 6px; }
.bank-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.tile{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 4px 8px;
  min-height: 72px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px;
  font-family: inherit;
  cursor: pointer;
}
.tile .tile-emoji{ font-size: 26px; line-height: 1; }
.tile .tile-word{ font-size: 13px; }
.tile:active{ transform: scale(.95); }
.tile.selected{
  border-color: var(--beam);
  background: rgba(255,196,107,.16);
}
.tile.in-tray{ min-height: 62px; padding: 8px 12px; }

.build-actions{ display:flex; gap: 10px; margin-top: auto; }
.build-actions .ghost-btn{ flex: 1; }
.build-actions .primary-btn{ flex: 2; }

/* ---------- תוצאות ---------- */
.query-echo{
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 16px;
}
.verdict{
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.verdict h3{ margin: 10px 0 4px; font-size: 20px; }
.verdict p{ margin: 0; font-size: 16px; color: var(--text-dim); line-height: 1.6; }
.verdict.beam-3{ border-color: rgba(111,227,176,.5); background: rgba(111,227,176,.1); }
.verdict.beam-3 h3{ color: var(--good); }
.verdict.beam-2{ border-color: rgba(255,196,107,.5); background: rgba(255,196,107,.1); }
.verdict.beam-2 h3{ color: var(--beam); }

.beam-meter{ display:flex; gap: 6px; }
.beam-meter i{
  flex:1; height: 7px; border-radius: 4px; background: var(--line);
}
.beam-meter i.on{ background: var(--beam); }
.xp-line{ margin-top: 10px !important; color: var(--beam-soft) !important; font-size: 15px !important; }

.results-eyebrow{ margin-bottom: -8px; }
.results-list{ display:flex; flex-direction:column; gap: 10px; }
.result-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}
.result-card h4{ margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.result-card p{ margin: 0 0 6px; font-size: 15px; color: var(--text-dim); line-height: 1.6; }
.result-src{ font-size: 13px; color: var(--text-dim); opacity: .8; }
.result-read{
  margin-top: 10px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--beam-soft); font-family: inherit; font-size: 14px;
  padding: 8px 14px; cursor: pointer;
}
/* המשפט שנקרא כרגע — הדגשה רכה */
.reading-sentence{
  background: rgba(255,196,107,.16);
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(255,196,107,.16);
}
/* המילה שנאמרת ברגע זה — רק במכשירים שמדווחים על גבולות מילים */
.reading-word{
  background: rgba(255,196,107,.45);
  border-radius: 4px;
  color: #FFF6E6;
}

/* ---------- סולם האור ---------- */
.ladder-intro{ margin:0; color: var(--text-dim); font-size: 16px; }
.ladder-list{ display:flex; flex-direction:column-reverse; gap: 10px; }
.ladder-step{
  display:flex; align-items:center; gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
  opacity: .45;
}
.ladder-step.reached{ opacity: 1; }
.ladder-step.current{
  border-color: var(--beam);
  background: rgba(255,196,107,.12);
  opacity: 1;
}
.ladder-emoji{ font-size: 32px; }
.ladder-meta strong{ display:block; font-size: 19px; }
.ladder-meta span{ font-size: 14px; color: var(--text-dim); }

/* ---------- הורה ---------- */
.parent-body{ display:flex; flex-direction:column; gap: 14px; }
.parent-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}
.parent-card h3{ margin: 0 0 10px; font-size: 18px; }
.parent-row{
  display:flex; justify-content:space-between;
  font-size: 15px; padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.parent-row:last-child{ border-bottom: none; }
.parent-row span:last-child{ color: var(--text-dim); }
.log-line{ font-size: 14px; color: var(--text-dim); padding: 4px 0; }