/* ═══════════════════════════════════════════════════════════════════════
   שאלה 2 · **QUOTES** — "תשלוף את הציטוט שלה שסותר אותה"
   ---------------------------------------------------------------------
   ⚠ **קובץ אמת.** נבחרה 08.08.2026 מתוך שלוש פריסות מוק (גלריה · שורות ·
   **סביבה**) — עודד: *"סביבה, מאיה אחת גדולה."* המוקים והסבב שקדם להם
   נשארים כארכיון ב-`level2c-mock.html` ו-`level2a/2b-test.html`.

   **הרעיון:** פורטרט אחד גדול של הקונה, ושלוש בועות דיבור סביבו — שלושה
   דברים שהיא עצמה אמרה לאורך העסקה. אחת מהן סותרת את מה שהיא טוענת
   עכשיו. הפעולה המנטלית: *"היא אמרה X. איזה משפט שלה עצמה מפיל את X?"*

   **ההיררכיה, ובדיוק בסדר הזה** (הבריף של עודד):
     ① מאיה אומרת — פאנל כהה למעלה, טקסט ענק, NOW אדום נושם
     ② פעולה מהמחשב — שורת טרמינל ענברית עם ‎>‎ והטיימר בתוכה
     ③ התשובות — שלוש בועות דיבור מהפורטרט הגדול

   **שתי הכרעות שאסור לבטל בטעות:**
   ⚠ **החדר מוחשך ל-.9.** ב-.8 הוא "ממש מפריע" — הבועות הבהירות צריכות
     להיות הדבר היחיד שנקרא.
   ⚠ **שני האריחים מוסתרים כל השאלה** ("יותר מדי דברים על המסך") **וחוזרים
     ברגע שעונים** — נכון או לא נכון. הפורטרט הגדול הוא הנוכחות של הקונה
     במקום האריח שלה, והמוכר חוזר לטור השמאלי כשהתשובה נלחצת.
     ⚓ עד `onWrong` הכל כבר בעוגן, בדיוק כמו בכל שלב אחר.
   ═══════════════════════════════════════════════════════════════════════ */

#lv2q {
  position: absolute; inset: 0; z-index: 20; direction: ltr;
  transition: transform .55s cubic-bezier(.5,0,.75,0), opacity .45s ease .06s;
}
#lv2q.gone { display: none; }
#lv2q.exit { transform: translateY(120%); opacity: 0; }
#lv2q .la { pointer-events: auto; cursor: pointer; padding: 0; }
#lv2q .la:disabled { cursor: default; }
#lv2q .caret { color: var(--amb); animation: caret .7s steps(1) infinite; }

/* ⚠ **.9 ולא .8.** החדר של סקוט בהיר וצבעוני, והבועות נלחמות בו. */
#lv2q .scrim {
  position: absolute; inset: 0; background: #010204;
  opacity: 0; transition: opacity .38s ease;
}
#lv2q.pin .scrim { opacity: .9; }

/* האריחים יורדים לכל אורך השאלה. `!important` כדי לגבור על `.enter`
   ב-landing.css, שמדליק את הפרצופים ברגע שהשיחה מתחילה. */
#stage .ptile.l2hide { opacity: 0 !important; transition: opacity .3s ease; }

@keyframes lv2q-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@keyframes lv2q-pop { 0% { opacity: 0; transform: scale(.86) } 100% { opacity: 1; transform: none } }
@keyframes lv2q-bad { 25% { transform: translateX(-1%) } 75% { transform: translateX(1%) } }

/* ═══ ①.5 · הדף · המשטח שהקבוצה יושבת עליו ═══
   נבחר 09.08 מתוך שלושה (SLAB · SHEET · FOCUS) — עודד: *"אופציה 2 sheet"*.
   ⚠ **זה לא קישוט.** גם עם החשכה ל-.9 המדפים והגלשנים של החדר רצו מאחורי
   הבועות הבהירות ושברו את הקריאה. הדף גם נותן סיבה לכך ששלושת הציטוטים
   יושבים יחד: הם עמוד אחד מהתיק שלה.
   הגובה מהודק לקבוצה: הכותרת נגמרת מעל הבועה הראשונה (42%), והתחתית
   מתחת לשלישית (84.9%). המוקים: `level2-bg-mock.html`. */
#lv2q .sheet {
  position: absolute; left: 14.5%; top: 36%; width: 51%; height: 52%;
  background: #3a3226;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 .18cqw, transparent .18cqw .7cqw);
  border: .2cqw solid #16120c;
  box-shadow: .55cqw .75cqw 0 rgba(0,0,0,.65);
  opacity: 0; transform: translateY(2%);
  transition: opacity .36s ease, transform .44s var(--ez);
}
#lv2q.pin .sheet { opacity: 1; transform: none; }
#lv2q .sheet .shd {
  position: absolute; left: 0; right: 0; top: 0; height: 2.6cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.2cqw; background: #241d10; border-bottom: .18cqw solid #8a6a2a;
  font-family: "Press Start 2P", monospace; font-size: .58cqw;
  letter-spacing: .2em; color: #c8b485;
}
#lv2q .sheet .shd b { font-weight: normal; color: var(--amb); }
/* שני חורי תיוק — הופכים מלבן לדף מתוך תיק */
#lv2q .sheet .hole {
  position: absolute; left: 1.4cqw; width: 1.1cqw; height: 1.1cqw; border-radius: 50%;
  background: #0b0906; box-shadow: inset 0 .1cqw .2cqw rgba(0,0,0,.8);
}
#lv2q .sheet .hole.a { top: 30%; }
#lv2q .sheet .hole.b { top: 66%; }

/* ═══ ① מאיה אומרת ═══ */
/* ⚠ הגובה ירד מ-15.5% ל-13% — הטקסט לא השתנה, רק הריפוד. את ה-2.5%
   האלה בולע פס השאלה שמתחת. */
#lv2q .say {
  position: absolute; left: 16%; top: 6%; width: 58%; height: 13%;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.5cqw;
  background: rgba(8,10,15,.96); border: .2cqw solid #3a4152;
  box-shadow: .4cqw .5cqw 0 rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-8%);
  transition: opacity .34s ease .05s, transform .42s var(--ez) .05s;
}
#lv2q.pin .say { opacity: 1; transform: none; }
#lv2q .say .face {
  flex: 0 0 auto; width: 4cqw; height: 4cqw; overflow: hidden;
  border: .18cqw solid #8a6a2a;
}
#lv2q .say .face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#lv2q .say .col { flex: 1 1 auto; min-width: 0; }
#lv2q .say .who {
  display: flex; align-items: center; gap: .55cqw; margin-bottom: .5cqw;
  font-family: "Press Start 2P", monospace; font-size: .48cqw;
  letter-spacing: .22em; color: #9aa3b5;
}
#lv2q .say .who i {
  width: .44cqw; height: .44cqw; border-radius: 50%; background: #ff5040;
  box-shadow: 0 0 .6cqw #ff5040; animation: lv2q-pulse 1.6s ease-in-out infinite;
}
#lv2q .say .who b { font-weight: normal; color: var(--amb); }
/* ⚠ 09.08 — היה כאן `nowrap`, ולכן טענה ארוכה נחתכה בקצה הימני של הפס
   (אצל דונלד: "…She is not on this cal"). עכשיו היא נשברת לשתי שורות. */
#lv2q .say .txt {
  display: block; font-family: "Jersey 10", monospace; font-size: 2.7cqw;
  line-height: 1.08; color: #fff6e2; white-space: normal; text-wrap: balance;
}
#lv2q .say .txt::before { content: "\201C"; color: var(--amb); }
#lv2q .say .txt.typed::after { content: "\201D"; color: var(--amb); }
/* נתפסה בסתירה — הטענה שלה נמחקת */
#lv2q.busted .say { border-color: #7a2620; }
#lv2q.busted .say .txt { color: #a7adbb; text-decoration: line-through .14cqw #ff5040; }

/* ═══ ② הפעולה מהמחשב ═══ */
/* ⚠ **הפס הזה הוא השאלה, והוא הדבר הכי גדול על המסך** (חוק 9 בערכת
   השלבים). עד 09.08 הוא היה קטן מהמשפט של מאיה — עודד: *"השאלה צריכה
   להיות הרבה הרבה יותר גדולה"*. הוא גדל מ-8.5% ל-14%, והטקסט נשבר
   לשתי שורות: העובדה למעלה, ו**ההוראה מתחתיה בגדול** (ה-`<b>` שכבר
   היה בטקסט הפך ל-`display: block`). */
#lv2q .sys {
  position: absolute; left: 16%; top: 21%; width: 58%; height: 14%;
  display: flex; align-items: center; gap: 1.1cqw; padding: 0 1.3cqw;
  background: linear-gradient(#191307, #0e0b05);
  border: .18cqw solid #8a6a2a;
  box-shadow: inset 0 0 1.8cqw rgba(232,163,61,.16);
  opacity: 0; transform: translateY(-16%);
  transition: opacity .3s ease, transform .36s var(--ez);
}
#lv2q.sysin .sys { opacity: 1; transform: none; }
#lv2q .sys .pr {
  flex: 0 0 auto; align-self: flex-start; margin-top: 1cqw;
  font-family: "Press Start 2P", monospace; font-size: 1.4cqw; color: var(--amb);
}
/* ⚠ **משפט אחד = גודל אחד וצבע אחד.** עודד (09.08, מניסיון במשרד פרסום):
   *"למעצבים גרפיים יש נטייה לעשות את החלק הראשון של המשפט שונה מהשני.
   ב-90% מהמצבים אין בזה צורך, כולל עכשיו."* השבירה לשתי שורות נשארת —
   היא רק שוברת אחרי הנקודה — אבל **שום הבדל חזותי בין החלקים**.
   מה שכן חייב להיות שונה: **הצבע מול הציטוט שלה** למעלה (#fff6e2 לבן-חם),
   ולכן כאן זהב. */
#lv2q .sys .ask {
  flex: 1 1 auto; min-width: 0; font-family: "Jersey 10", monospace;
  font-size: 3.1cqw; line-height: 1.05; color: #ffd06b; white-space: nowrap;
}
#lv2q .sys .ask b { display: block; font-weight: normal; }
#lv2q .clock {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .22cqw;
  padding: .45cqw .8cqw .4cqw; background: #0c0a06; border: .16cqw solid #8a6a2a;
  transition: border-color .2s linear;
}
#lv2q .clock .lb {
  font-family: "Press Start 2P", monospace; font-size: .4cqw;
  letter-spacing: .3em; color: #7d7259;
}
#lv2q .clock .num {
  font-family: "Press Start 2P", monospace; font-size: 2.1cqw; line-height: 1;
  color: var(--amb); font-variant-numeric: tabular-nums;
}
#lv2q.hot .clock { border-color: #7a2620; }
#lv2q.hot .clock .num { color: #ff5040; animation: lv2q-pulse 1s ease-in-out infinite; }

/* ═══ ③ הפורטרט הגדול · הנוכחות שלה על המסך ═══ */
#lv2q .port {
  position: absolute; left: 17%; top: 52%; width: 13.5cqw; height: 13.5cqw;
  overflow: hidden; background: #14161b;
  border: .2cqw solid #8a6a2a; box-shadow: .4cqw .5cqw 0 rgba(0,0,0,.5);
  opacity: 0; transform: scale(.96);
  transition: opacity .38s ease .08s, transform .5s var(--ez) .08s,
              border-color .18s linear, box-shadow .18s linear;
}
#lv2q.pin .port { opacity: 1; transform: none; }
#lv2q .port img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* בזמן ריחוף על בועה — הפורטרט נדלק גם הוא: זה **היא** שאמרה את זה.
   ⚠ המסגרת במנוחה כבר ענברית-כהה, ולכן ההילה לבדה לא נקראה — צריך גם
   להבהיר את המסגרת עצמה וגם להאיר את התמונה. */
#lv2q.lit .port {
  border-color: #ffd884;
  box-shadow: .4cqw .5cqw 0 rgba(0,0,0,.5), 0 0 3.4cqw rgba(232,163,61,.9);
}
#lv2q .port img { transition: filter .18s linear; }
#lv2q.lit .port img { filter: brightness(1.12); }

/* ═══ הבועות ═══ */
#lv2q .la {
  position: absolute; display: flex; align-items: center;
  padding: 1cqw 1.4cqw; text-align: left;
  background: #f6efdc; border: .2cqw solid #241d10;
  box-shadow: .4cqw .55cqw 0 rgba(0,0,0,.55);
  opacity: 0;
  transition: transform .16s var(--ez), background .16s linear,
              border-color .16s linear, box-shadow .16s linear, opacity .3s ease;
}
#lv2q .la.in { animation: lv2q-pop .26s cubic-bezier(.2,1.5,.4,1) forwards; }
/* ⚠ 09.08 — **הבועה חייבת להיעצר לפני 75% מהרוחב**, כי 24% הימניים
   שמורים לרצועת ווין (CLAUDE.md). עד היום היה כאן `nowrap` בלי תקרה,
   ולכן ציטוט ארוך גלש מתחת לפאנל של ווין והתשובה נעלמה. הבועה הכי
   שמאלית מתחילה ב-33%, ולכן 40cqw נעצרים ב-73%. */
#lv2q .la { max-width: 40cqw; }
#lv2q .la .q {
  font-family: "Jersey 10", monospace; font-size: 2.2cqw; line-height: 1.12;
  color: #241d10; white-space: normal; text-wrap: balance;
}
#lv2q .la .q::before { content: "\201C"; color: #9a6a1e; margin-right: .08em; }
#lv2q .la .q::after  { content: "\201D"; color: #9a6a1e; margin-left: .08em; }
/* הזנב · ריבוע מסובב שיורש את המסגרת. ⚠ צורה בצבע אחד נעלמת מול חדר כהה. */
#lv2q .la .tail {
  position: absolute; width: 1.5cqw; height: 1.5cqw; background: #f6efdc;
  transition: background .16s linear, border-color .16s linear;
}
#lv2q .la .tail.down {
  bottom: -.85cqw; left: 6%; transform: rotate(45deg);
  border-right: .2cqw solid #241d10; border-bottom: .2cqw solid #241d10;
}
#lv2q .la .tail.left {
  left: -.85cqw; top: 62%; transform: translateY(-50%) rotate(45deg);
  border-left: .2cqw solid #241d10; border-bottom: .2cqw solid #241d10;
}
/* המיקומים · שלוש הבועות במניפה סביב הפורטרט. נמדדו על הבמה. */
#lv2q .la[data-i="0"] { left: 26.5%; top: 42%; }
#lv2q .la[data-i="1"] { left: 33%;   top: 60%; }
#lv2q .la[data-i="2"] { left: 28.5%; top: 78%; }

/* HOVER · חוק הבית: מסגרת + רקע + **תנועה**. הבועה נדחפת החוצה מהפורטרט,
   הנייר מתבהר, המסגרת והזנב נצבעים ענבר, והכל מקבל הילה. */
#lv2q .la:hover:not(:disabled), #lv2q .la.peek {
  transform: translate(1.6%, -4%) scale(1.035);
  background: #fffaea; border-color: var(--amb);
  box-shadow: .55cqw .8cqw 0 rgba(0,0,0,.6), 0 0 2.8cqw rgba(232,163,61,.75);
  z-index: 3;
}
#lv2q .la:hover:not(:disabled) .tail, #lv2q .la.peek .tail { background: #fffaea; border-color: var(--amb); }
#lv2q .la:active:not(:disabled) { transform: translate(.5%, -1.5%) scale(1.01); }

/* בחירה */
#lv2q .la.win {
  transform: translate(1.6%, -4%) scale(1.04); z-index: 3;
  background: #f2fbef; border-color: #46e07c;
  box-shadow: .55cqw .8cqw 0 rgba(0,0,0,.6), 0 0 3cqw rgba(70,224,124,.85);
}
#lv2q .la.win .tail { background: #f2fbef; border-color: #46e07c; }
#lv2q .la.bad {
  background: #fbeeec; border-color: #ff5040;
  box-shadow: .4cqw .55cqw 0 rgba(0,0,0,.55), 0 0 3cqw rgba(255,60,40,.85);
  animation: lv2q-bad .38s ease-in-out 2;
}
#lv2q .la.bad .tail { background: #fbeeec; border-color: #ff5040; }
#lv2q .la.dim { opacity: .22; filter: grayscale(.7); }

/* נגמר הזמן · הבועות מתכווצות ונעלמות — היא אמרה, ואף אחד לא הרים */
#lv2q.pop .la {
  opacity: 0; transform: scale(.7);
  transition: transform .45s cubic-bezier(.5,0,.85,.4), opacity .4s ease;
}
#lv2q.pop .la[data-i="1"] { transition-delay: .06s; }
#lv2q.pop .la[data-i="2"] { transition-delay: .12s; }

/* ---------- ⏱ השעון הרדום (12.08) ----------
   בשלוש שניות הקריאה שלפני שהזמן מתחיל, השעון כבר על המסך אבל **כבוי**:
   אפור, מעומעם, בלי מוזיקה. ההידלקות שלו היא יריית הפתיחה — ככה השחקן
   מבין מה עומד לקרות במקום לגלות את זה כשהמספר כבר יורד.
   הכיתה נקבעת ב-level2-quotes.js. */
#lv2q.arming .clock { opacity: .45; filter: grayscale(1); }
#lv2q.arming .clock .num { color: #8b9099; }