/* ═══════════════════════════════════════════════════════════════════════
   „איפה זה?” — רשת המשחק בלבד.

   הפלטה, הטיפוגרפיה, ה-banner וה-footer מגיעים מ-/guides.css. אין כאן
   אף טוקן צבע חדש ואף גופן חדש: המשחק נראה כמו האתר כי הוא משתמש
   באותם משתנים, ולא כי מישהו התאים גוונים ביד.

   ── mobile first, ובלי כוכבית ────────────────────────────────────────
   מסך החידה נעול לגובה ה-viewport ואינו נגלל. זו לא העדפה עיצובית: אם
   התשובה הרביעית יושבת מתחת לקפל, המשתמש עונה בלי לראות את כל
   האפשרויות — וזו חידה אחרת.

   התקציב האנכי, מלמעלה למטה, במסך 390×750:
     41   סרגל עליון
      3   פס התקדמות
     ---  המפה — flex:1, כלומר כל מה שנשאר
     76   אזור הדיבור — שאלה לפני הבחירה, עובדה ו„הבא” אחריה
    129   ארבע תשובות ברשת 2×2

   הרשת היא 2×2 ולא רשימה של ארבע. רשימה עולה 108 פיקסלים נוספים, וכל
   אחד מהם נלקח מהמפה — ובמסך של 640 היא מקטינה את הארץ ל-103 פיקסלים
   רוחב, שבהם הכנרת היא 7 פיקסלים. הרשת שומרת על המפה כוכבת.

   ── למה אזור הדיבור בגובה קבוע ────────────────────────────────────
   בגרסה הקודמת שורת העובדה נפתחה רק אחרי הבחירה, והמפה הצטמצמה כדי
   לפנות לה מקום. נמדד: הארץ עברה מ-171×464 ל-139×377 ברגע הלחיצה —
   התכווצות של 19%. על המסך זה לא נקרא כ„הופיעה עובדה” אלא כ„כל המסך
   הסתדר מחדש”, וזה שבר את הקשר בין הלחיצה לתשובה.

   האזור הזה קיים תמיד ובאותו גובה. לפני הבחירה הוא מחזיק את השאלה,
   אחריה את העובדה ואת „הבא”. המפה לא זזה ולא משנה גודל בין השניים.
   הגובה נמדד מול העובדה הארוכה מבין ה-48, ולא הוערך: 61 פיקסלים של
   טקסט (שלוש שורות) ועוד ריווח. כפתור „הבא” הוא 46, ולכן הטקסט הוא
   הכובל ולא הכפתור.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── שלד ──────────────────────────────────────────────────────────── */
#wq {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;         /* סרגל הכתובת של הדפדפן בנייד */
}
#wq[data-screen="quiz"] {
  height: 100vh; height: 100dvh;
  overflow: hidden;           /* אין גלילה כשפותרים */
}

.wq-screen { display: none }
.wq-screen.is-on { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }

/* ── מסך הבית ─────────────────────────────────────────────────────── */
.wq-home { padding: 26px 20px 40px; max-width: 620px; margin: 0 auto; width: 100% }
.wq-home h1 {
  font-family: var(--font-display); font-size: clamp(38px, 11vw, 54px);
  line-height: 1.1; color: var(--ink); margin-bottom: 10px;
}
.wq-lede { font-size: clamp(16px, 4.4vw, 19px); color: var(--ink-soft); margin-bottom: 26px; max-width: 30ch }

.wq-worlds { display: flex; flex-direction: column; gap: 11px }
.wq-world {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: start;
  background: var(--paper-hi); border: 1.5px solid var(--rule); border-radius: var(--r);
  padding: 15px 16px; min-height: 68px;
  font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.wq-world:hover { border-color: var(--sienna); box-shadow: 0 2px 8px rgba(46,32,20,.09) }
.wq-world:active { transform: scale(.988) }
.wq-world:focus-visible { outline: 2.5px solid var(--sienna); outline-offset: 2px }
.wq-world-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sienna); color: var(--paper-hi);
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
.wq-world-t { flex: 1 1 auto; min-width: 0 }
.wq-world-name { display: block; font-size: 17.5px; font-weight: 700; line-height: 1.3 }
.wq-world-sub { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px }
.wq-world-best {
  flex: 0 0 auto; font-size: 12.5px; color: var(--teal); font-weight: 700;
  white-space: nowrap;
}
.wq-world-best[hidden] { display: none }

.wq-home-foot { margin-top: 30px; font-size: 13px; color: var(--ink-soft); line-height: 1.7 }

/* ── סרגל עליון של החידה ──────────────────────────────────────────── */
.wq-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.wq-back {
  flex: 0 0 auto; width: 30px; height: 30px; margin-inline-start: -6px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px;
  color: var(--ink-soft); cursor: pointer;
}
.wq-back svg { width: 20px; height: 20px }
.wq-back:focus-visible { outline: 2px solid var(--sienna); outline-offset: 1px }
.wq-bar-title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 15.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wq-count {
  flex: 0 0 auto;
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* פס ההתקדמות — קו דק, לא מערכת נקודות */
.wq-track { flex: 0 0 auto; height: 3px; background: rgba(196,168,118,.45) }
.wq-fill {
  height: 100%; width: 0; background: var(--sienna);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}

/* ── המפה ─────────────────────────────────────────────────────────── */
/* המפה מקבלת כל פיקסל שנשאר. הריפוד מינימלי בכוונה: ישראל צרה, ולכן
   הגובה הוא הכובל היחיד — כל פיקסל שנחסך כאן הופך לארץ גדולה יותר. */
.wq-map {
  flex: 1 1 auto; min-height: 120px;
  display: grid; place-items: center;
  padding: 5px 10px 3px;
}
.wq-svg { height: 100%; width: 100%; display: block }
.wq-land { fill: #E4D3AA; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round }
/* הכנרת וים המלח כעוגני התמצאות. משניים בבירור — לא בצבע ה-highlight,
   בלי מתאר כהה ובלי שם — אבל מספיק נוכחים כדי שהעין תדע איפה היא.

   הכיול: בגרסה הראשונה ים המלח משך את העין כמעט כמו ה-highlight, כי
   הוא ארוך ויושב במרכז המפה. הגוון הובהר והמתאר הוחלש — הם עדיין
   נקראים מיד, אבל כבר לא מתחרים בשאלה. */
.wq-water path {
  fill: #B9CDCB; fill-opacity: .5;
  stroke: #7FA3A0; stroke-opacity: .3;
}

.wq-shape {
  fill: var(--sienna); fill-opacity: 1;
  stroke: var(--sienna-deep); stroke-width: 1.6; stroke-linejoin: round;
}
.wq-ring { fill: none; stroke: var(--sienna); stroke-width: 1.8; opacity: .55 }

/* הסמן. הקואורדינטה מדויקת לחלוטין — מה שגדל הוא רק הייצוג הגרפי,
   כדי שהעין תמצא אותו מיד על מסך של טלפון. שלוש שכבות: הילה רכה,
   טבעת דקה, ונקודה מלאה עם מסגרת בצבע הנייר שמפרידה אותה מהרקע. */
.wq-halo { fill: var(--sienna); fill-opacity: .16 }
.wq-pin-ring { fill: none; stroke: var(--sienna); opacity: .45 }
.wq-dot  { fill: var(--sienna); stroke: var(--paper-hi) }

/* הופעה קצרה. לא אנימציה שמעכבת את המשחק. */
@keyframes wq-in { from { opacity: 0 } to { opacity: 1 } }
.wq-hl { animation: wq-in .22s ease both }
@media (prefers-reduced-motion: reduce) {
  .wq-hl { animation: none }
  .wq-fill { transition: none }
}

/* ── אזור הדיבור ──────────────────────────────────────────────────── */
.wq-say {
  flex: 0 0 auto;
  height: 76px;                       /* קבוע. ראה ההסבר בראש הקובץ. */
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 16px;
  border-top: 1px solid rgba(196,168,118,.55);
  background: var(--paper-hi);
}
.wq-ask {
  font-size: 16.5px; font-weight: 700; color: var(--ink); text-align: center;
}
.wq-ask[hidden], .wq-fact[hidden], .wq-next[hidden] { display: none }
.wq-fact {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
/* „הבא” הוא פעולה משנית. כשהוא היה מלא בסיינה הוא ביקש את העין באותה
   עוצמה כמו התשובה הנכונה בטיל, ושני הדברים נלחמו על אותו רגע. הרגע
   הזה שייך ל„צדקתי”, לא ל„יש כאן כפתור”.

   מה שנשאר: גובה מלא של 46, ריפוד רחב, מסגרת, צבע המותג בטקסט וחץ
   כיווני — אותו חץ בדיוק של .ui-action בשאר האתר. אין ספק מה עושים,
   ואין תחרות על תשומת הלב. */
.wq-next {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 46px; padding: 0 15px;
  background: var(--paper); color: var(--sienna-deep);
  border: 1.5px solid var(--rule); border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wq-next::after { content: '‹'; font-size: 17px; line-height: 1; opacity: .75 }
.wq-next:hover { border-color: var(--sienna); background: var(--paper-hi) }
.wq-next:active { transform: scale(.97) }
.wq-next:focus-visible { outline: 2.5px solid var(--sienna); outline-offset: 2px }

.wq-opts {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  /* שורות בגובה קבוע ולא min-height. עם min-height, ה-✓ שנוסף לתשובה
     הנכונה דחף תווית ארוכה („הסחנה (גן השלושה)”) לשורה שנייה, השורה
     גדלה בכמה פיקסלים, והמפה שמעליה התכווצה בדיוק באותם פיקסלים.
     ששה פיקסלים, בשתי שאלות מתוך 48 — וזו בדיוק התזוזה שהסבב הזה בא
     לחסל. גובה קבוע הופך את זה לבלתי אפשרי. */
  grid-auto-rows: 54px;
  padding: 6px 14px calc(8px + env(safe-area-inset-bottom));
  background: var(--paper-hi);
}
.wq-opt {
  height: 100%; padding: 6px 9px;
  /* flex ולא grid: הסימן ✓ נוסף כ-::before, וב-grid הוא היה הופך לתא
     משלו ויושב *מעל* השם במקום לידו — והכפתור הנכון היה גם מתגבה
     ביחס לשלושת האחרים. */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  background: var(--paper-hi); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .13s ease, border-color .13s ease, transform .1s ease;
}
.wq-opt:active:not(:disabled) { transform: scale(.975) }
.wq-opt:focus-visible { outline: 2.5px solid var(--sienna); outline-offset: 2px }
.wq-opt:disabled { cursor: default }

/* ✅ נכון — teal, צבע האישור של האתר */
.wq-opt.is-right {
  background: var(--teal); border-color: var(--band); color: #fff;
}
/* הסימן נוסף ב-CSS ולא בטקסט, כדי ש-textContent של הכפתור יישאר שם
   המקום בלבד — עליו נשענת השוואת התשובה. */
.wq-opt.is-right::before { content: '✓'; flex: 0 0 auto; font-weight: 800 }
/* ❌ שגוי — סימון ברור בלי אדום צועק ובלי רטט */
.wq-opt.is-wrong {
  background: #F0DAD2; border-color: #B4553A; color: #7A3421;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.wq-opt.is-dim { opacity: .42 }


/* ── מסך סיום עולם ────────────────────────────────────────────────── */
.wq-done {
  padding: 30px 20px 40px; max-width: 520px; margin: 0 auto; width: 100%;
  text-align: center;
}
.wq-done-eyebrow { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px }
.wq-score {
  font-family: var(--font-display); font-size: clamp(50px, 15vw, 70px);
  line-height: 1; color: var(--sienna); margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  /* „5/12” הוא שבר, לא משפט. בלי זה האלגוריתם הדו-כיווני מסדר מחדש את
     שני החלקים והתוצאה נקראת הפוך. */
  direction: ltr;
}
.wq-score small { font-size: .45em; color: var(--ink-soft) }
.wq-verdict { font-size: 17px; color: var(--ink); margin-bottom: 6px; font-weight: 700 }
.wq-best { font-size: 13.5px; color: var(--teal); font-weight: 700; min-height: 20px }

.wq-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px }
.wq-btn {
  min-height: 52px; padding: 0 18px;
  display: grid; place-items: center;
  border-radius: var(--r); border: 1.5px solid var(--rule);
  background: var(--paper-hi); color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform .1s ease, border-color .15s ease;
}
.wq-btn:active { transform: scale(.985) }
.wq-btn:focus-visible { outline: 2.5px solid var(--sienna); outline-offset: 2px }
.wq-btn--go { background: var(--sienna); border-color: var(--sienna-deep); color: var(--paper-hi) }
.wq-btn[hidden] { display: none }

/* ה-CTA למסע האוצר — עדין, ולא מתחרה ב-Share או ב„עוד עולם”. */
.wq-allworlds {
  display: inline-block; margin-top: 18px;
  background: none; border: 0; padding: 8px 4px;
  font: inherit; font-size: 14.5px; color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.wq-allworlds:focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px }

.wq-cta {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.65;
}
.wq-cta a { color: var(--sienna); font-weight: 700 }

.wq-toast {
  position: fixed; inset-inline: 0; bottom: 22px; margin-inline: auto;
  width: max-content; max-width: 90vw;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60;
}
.wq-toast.is-on { opacity: .95 }

/* ── מסכים רחבים — משניים, ובכוונה ────────────────────────────────── */
@media (min-width: 700px) {
  .wq-map { padding: 16px 20px 8px }
  .wq-opts { max-width: 620px; margin: 0 auto; width: 100%; gap: 11px }
  .wq-opts { grid-auto-rows: 58px }
  .wq-opt { font-size: 16px }
  .wq-ask { font-size: 18px }
  .wq-say { max-width: 620px; margin: 0 auto; width: 100% }
  .wq-home { padding-top: 44px }
}
/* מסך צר — התוויות הארוכות ביותר („שמורת חי־בר יטבתה”) צריכות מעט
   פחות טיפוגרפיה כדי להישאר בשתי שורות בתוך שורת רשת קבועה. */
@media (max-width: 374px) {
  .wq-opt { font-size: 14px }
}

/* מסך נמוך — מכווצים ריווח, לא את המפה */
@media (max-height: 680px) {
  .wq-opt { font-size: 14.5px }
  .wq-opts { grid-auto-rows: 50px; gap: 7px; padding-top: 8px }
  .wq-say { height: 72px }
  .wq-ask { font-size: 15.5px }
  .wq-fact { font-size: 13px; line-height: 1.45 }
}