/* ═══════════════════════════════════════════════════════════════════════
   שאלה 5 · **PRICE — המחשבון** · "How much is that, per board, per month?"
   ---------------------------------------------------------------------
   ⚠ **קובץ אמת.** האופציה שנבחרה 08.08.2026 מתוך שלוש (CALCULATOR ·
   PRICE BOARD · ORDER PAD) — עודד: *"מחשבון נראה מצוין."*
   המוקים נשארים כארכיון ב-`level5-mock.html`.

   השאלה הראשונה בשרשרת של סקוט שהיא **הקלדה** ולא בחירה מ-3. המנוע
   (שדה, מקשים, מקלדת פיזית, נרמול) הועתק מ-`level4.js` של אורן; מה
   שהתחלף הוא הפריסה, שהיא עכשיו ההיררכיה הקנונית של השרשרת הזאת:

     ① **מאיה אומרת**   — פאנל כהה, הפרצוף שלה בתוכו, נקודת NOW אדומה
     ② **שתי שניות**    — בקשת עודד: לתת לציטוט לנשום לפני הבקשה
     ③ **המחשב מבקש**   — שורת טרמינל ענברית עם `>` ו**הטיימר בתוכה**
     ④ **המחשבון**      — קסיו MH-12, ו**המוכר עומד לידו** (בקשת עודד):
        האריח שלו יורד לצד שמאל של המחשבון, כאילו הוא רכון מעליו.

   ⚠ האריח של מאיה יורד לכל אורך השאלה — הפרצוף שלה כבר בפאנל ① —
   וחוזר ברגע שנשלחת תשובה, לפני החזרה לעוגן (חוק 17 בערכת השלבים).
   ⚠ הטולבר תופס את 7.5% התחתונים; כל חפץ נעצר ב-9.5%.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* החדר מוחשך — הקומפוזיציה היא מקור האור (הלקח משאלה 2) */
#lv5 .scrim {
  position: absolute; inset: 0; background: #010204;
  opacity: 0; transition: opacity .38s ease;
}
#lv5.pin .scrim { opacity: .86; }

/* האריח של מאיה יורד; המוכר נשאר, ועובר לצד המחשבון */
#stage .ptile.l5hide { opacity: 0 !important; transition: opacity .3s ease; }

@keyframes lv5-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@keyframes lv5-caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ═══ ① מאיה אומרת ═══ */
#lv5 .say {
  position: absolute; left: 16%; top: 5%; width: 58%; height: 19%;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw;
  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;
}
#lv5.pin .say { opacity: 1; transform: none; }
#lv5 .say .face {
  flex: 0 0 auto; width: 6.4cqw; height: 6.4cqw; overflow: hidden;
  border: .18cqw solid #8a6a2a;
}
#lv5 .say .face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#lv5 .say .col { flex: 1 1 auto; min-width: 0; }
#lv5 .say .who {
  display: flex; align-items: center; gap: .55cqw; margin-bottom: .55cqw;
  font-family: "Press Start 2P", monospace; font-size: .48cqw;
  letter-spacing: .22em; color: #9aa3b5;
}
#lv5 .say .who i {
  width: .44cqw; height: .44cqw; border-radius: 50%; background: #ff5040;
  box-shadow: 0 0 .6cqw #ff5040; animation: lv5-pulse 1.6s ease-in-out infinite;
}
#lv5 .say .who b { font-weight: normal; color: var(--amb); }
/* ⚠ הציטוט של מאיה ארוך (170 תווים בבייבל) ולכן הוא **שלוש שורות
   ב-1.72cqw** ולא שורה אחת ענקית. את הגודל אוכל כאן האורך, לא ההיפך. */
#lv5 .say .txt {
  display: block; font-family: "Jersey 10", monospace; font-size: 1.72cqw;
  line-height: 1.12; color: #fff6e2;
}
#lv5 .say .txt::before { content: "\201C"; color: var(--amb); }
#lv5 .say .txt.typed::after { content: "\201D"; color: var(--amb); }

/* ═══ ③ המחשב מבקש · שורת הטרמינל עם הטיימר ═══ */
#lv5 .sys {
  position: absolute; left: 16%; top: 25.5%; width: 58%; height: 8.5%;
  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);
}
#lv5.ask .sys { opacity: 1; transform: none; }
#lv5 .sys .pr { flex: 0 0 auto; font-family: "Press Start 2P", monospace; font-size: 1cqw; color: var(--amb); }
#lv5 .sys .q {
  flex: 1 1 auto; min-width: 0; font-family: "Press Start 2P", monospace;
  font-size: 1.02cqw; line-height: 1.7; letter-spacing: .02em; color: #ffd884; white-space: nowrap;
}
/* ⚠ **השבב הענבר הוא חוק 9, לא הפרה של חוק 20.** הוא מסמן את המילים
   ה**תפעוליות** בתוך המשפט — מה בדיוק להקליד — וזה מידע. מה שנפסל
   ב-09.08 הוא לצבוע **חצי משפט** בגודל/צבע אחר. לא "לתקן" את זה. */
#lv5 .sys .q b {
  font-weight: 400; color: #14161b; background: var(--amb);
  padding: .26cqw .4cqw .18cqw; box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
#lv5 .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;
}
#lv5 .clock .lb { font-family: "Press Start 2P", monospace; font-size: .4cqw; letter-spacing: .3em; color: #7d7259; }
#lv5 .clock .num {
  font-family: "Press Start 2P", monospace; font-size: 1.45cqw; line-height: 1;
  color: var(--amb); font-variant-numeric: tabular-nums;
}
#lv5.hot .clock { border-color: #7a2620; }
#lv5.hot .clock .num { color: #ff5040; animation: lv5-pulse 1s ease-in-out infinite; }

/* ═══ ④ המחשבון · קסיו MH-12 ═══
   ⚠ ממוקם **מימין לאריח של המוכר** (POS.seller = left 17 / w 12), ולכן
   הוא מתחיל ב-31.5% ולא במרכז הבמה. השניים הם קבוצה אחת. */
#lv5 .calc {
  position: absolute; left: 31.5%; top: 36%; width: 31%; bottom: 9.5%;
  pointer-events: auto; display: flex; flex-direction: column;
  background: linear-gradient(178deg, #4c4642, #3a3531 70%, #322d2a);
  border: 2px solid #211d1a; border-radius: 1.1cqw;
  box-shadow: .55cqw .7cqw 0 rgba(0,0,0,.6), 0 0 3cqw rgba(0,0,0,.7);
  padding: 0 .9cqw .9cqw;
  opacity: 0; transform: translateY(26%);
  transition: opacity .34s ease, transform .44s var(--ez), box-shadow .18s linear;
}
#lv5.live .calc { opacity: 1; transform: none; }
#lv5 .ctop {
  margin: 0 -.9cqw .8cqw; background: #14110f;
  border-bottom: 2px solid #211d1a; border-radius: 1cqw 1cqw 0 0;
  padding: .6cqw .9cqw .75cqw;
}
#lv5 .cbrand { display: flex; align-items: center; gap: .6cqw; margin-bottom: .5cqw; }
#lv5 .cbrand .logo { font-family: "Press Start 2P", monospace; font-size: .72cqw; letter-spacing: .12em; color: #e8e4dc; }
#lv5 .cbrand .solar {
  width: 4.4cqw; height: .68cqw; margin-left: .2cqw;
  background: repeating-linear-gradient(90deg, #1e2b33 0 1cqw, #31434e 1cqw 1.1cqw);
  border: 1px solid #0c1216;
}
#lv5 .cbrand .model { margin-left: auto; font-family: "Press Start 2P", monospace; font-size: .46cqw; letter-spacing: .08em; color: #8d867c; }
/* הצג · LCD בהיר, ספרות כהות */
#lv5 .lcd {
  display: flex; align-items: center; min-height: 3.9cqw; padding: .35cqw .8cqw;
  background: linear-gradient(180deg, #eef2e8, #d9e0d2);
  border: .35cqw solid #060505; border-radius: .3cqw;
  box-shadow: inset 0 .25cqw .7cqw rgba(0,0,0,.35);
}
#lv5 .val {
  font-family: "Press Start 2P", monospace; font-size: 2.4cqw; letter-spacing: .12em;
  color: #1c2320; font-variant-numeric: tabular-nums; white-space: pre;
}
/* הקארט · פס דק שמהבהב כמו בוורד — steps(1), לא פייד */
#lv5 .tcaret { width: .2cqw; height: 2.7cqw; margin-left: .14cqw; background: #1c2320; opacity: 0; }
#lv5.live .tcaret { animation: lv5-caret 1.06s steps(1) infinite; }

/* ═══ המקשים ═══ */
#lv5 .keys { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: .5cqw .55cqw; }
#lv5 .k {
  cursor: pointer; border: none; font-family: "Press Start 2P", monospace; font-size: .85cqw;
  border-radius: .55cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.5);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s linear;
}
/* חוק ה-hover על כל מקש: מסגרת + רקע + תנועה */
#lv5.live .k:hover { filter: brightness(1.12); transform: translateY(-8%); outline: 2px solid var(--amb); }
#lv5 .k:active, #lv5 .k.pressed { transform: translateY(12%); box-shadow: 0 .1cqw 0 rgba(0,0,0,.5); }
#lv5 .k.dark { background: #3b3733; color: #ddd8d0; font-size: .66cqw; }
#lv5 .k.num  { background: linear-gradient(180deg, #c3bab1, #a89f96); color: #232323; }
#lv5 .k.org  { background: linear-gradient(180deg, #e2662a, #c24f1c); color: #fff; }
#lv5 .k.enter {
  grid-column: 5 / 7; grid-row: 4 / 6;
  background: linear-gradient(180deg, #f2bf4e, #d98f22);
  color: #241703; font-size: 1cqw; line-height: 1.5;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
#lv5.live .k.enter:hover { outline: 2.5px solid var(--amb); }

/* --- מצבים --- */
#lv5 .calc.bad {
  box-shadow: .55cqw .7cqw 0 rgba(0,0,0,.6), 0 0 3cqw rgba(255,59,48,.85);
  animation: lv5-bad .38s ease-in-out 2;
}
@keyframes lv5-bad { 0%,100% { transform: none } 25% { transform: translateX(-.8%) } 75% { transform: translateX(.8%) } }
#lv5 .calc.bad .lcd { background: linear-gradient(180deg, #f3d9d4, #e5bfb8); }
#lv5 .calc.win { box-shadow: .55cqw .7cqw 0 rgba(0,0,0,.6), 0 0 3cqw rgba(70,224,124,.9); }
#lv5 .calc.win .lcd { background: linear-gradient(180deg, #ddf2dd, #c2e4c4); }
/* נשלח · המחשבון עף קלות למעלה אל השיחה */
#lv5 .calc.sent {
  transition: transform .6s cubic-bezier(.4,0,.8,.4), opacity .55s ease .05s;
  transform: translateY(-40%) scale(.94); opacity: 0;
}
/* נגמר הזמן · המחשבון שוקע */
#lv5.drop .calc {
  transition: transform .7s cubic-bezier(.5,0,.85,.4), opacity .6s ease;
  transform: translateY(40%); opacity: 0;
}

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

/* ═══ המחשבון החי · `level5.multiply: true` (07.09, המשחק הגנרי) ═══
   מקש × מפסיק להיות מקש נוי. הוא נשאר מקש מחשבון לכל דבר — אותה כיפה
   אפורה — אבל מקבל פנים חמות קלות כדי שהעין תמצא אותו בעשר שניות,
   ודגל × קטן נדלק בפינת ה-LCD כל זמן שיש תרגיל פתוח, כך שהשחקן רואה
   שהמכונה מחזיקה לו את המספר הראשון. ⚠ מי שלא מדליק את הדגל לא רואה
   כאן שום שינוי — `.op` לא קיים אצלו בכלל. */
#lv5 .k.op {
  background: linear-gradient(180deg, #d6c7a8, #b9a785);
  color: #1e1a12;
}
#lv5 .calc.op .lcd { position: relative; }
#lv5 .calc.op .lcd::before {
  content: "×"; position: absolute; left: .55cqw; top: 50%; transform: translateY(-50%);
  font-family: "Press Start 2P", monospace; font-size: .8cqw; color: #4a4a44; opacity: .85;
  animation: lv5-op 1.06s steps(1) infinite;
}
@keyframes lv5-op { 0%, 55% { opacity: .85 } 56%, 100% { opacity: .25 } }