/* ═══════════════════════════════════════════════════════════════════════
   שאלה 6 · **THE CLOSE** — "אז מה הצעד הבא?" · שקופית 12 · Q8
   ---------------------------------------------------------------------
   ⚠ **קובץ אמת. זו השאלה האחרונה במשחק** — אחריה סיבוב הניצחון.
   נבחרה 10.08.2026: **DEAL DESK + SPEECH + JACKPOT** — עודד: *"jackpot!
   חד משמעית!"* התיעוד: `chosen-components/level-6-close.md`.

   **הרעיון:** הצעת המחיר על השולחן, ועליה שלוש בועות דיבור — שלושה
   משפטים שדונלד יכול להגיד עכשיו. **הפרצוף שלו הוא החתימה על כל בועה**
   ולא אות A/B/C, וכל משפט בגרשיים: זה מה שיוצא לו מהפה.

   **ההיררכיה, ובדיוק בסדר הזה:**
     ① פריה אומרת — פאנל כהה למעלה, שבב אדום **3 MINUTES LEFT**
     ② פקודת המחשב — פס JACKPOT: נורות רצות ו-CLOSES THE DEAL מהבהב
     ③ התשובות — שלוש בועות, **אחת אחרי השנייה**, כל אחת עם הפרצוף שלו

   **ארבע הכרעות שאסור לבטל בטעות:**
   ⚠ **הכותרות ירדו.** "Play it safe / Close it now / Force it" ענו על
     השאלה. נשארו שלושה משפטים ערומים.
   ⚠ **שני האריחים יורדים** לכל אורך השאלה (חוק 17) — פריה חיה בפאנל ①
     ודונלד משוכפל שלוש פעמים בבועות — **וחוזרים ברגע שנלחצת תשובה**.
     בזכות זה הבמה כולה 4%–75% והטקסט גדול.
   ⚠ **הענבר שמור למערכת.** ציאן/ורוד/כתום לתשובות, ולא ירוק־אדום: אלה
     שפת הנכון־טעות של המשחק ואסור שתשובה תלבש אותם לפני שנלחצה.
   ⚠ **hover = שינוי צבע**, לא רק תזוזה: הכהה נפתח לצבע מלא והטקסט מתהפך.
   ═══════════════════════════════════════════════════════════════════════ */

#lv6c {
  position: absolute; inset: 0; z-index: 20; direction: ltr;
  --c0: #45c8e0; --c0d: #0f4d5a;   /* A · ציאן */
  --c1: #f05fa5; --c1d: #6b1c42;   /* B · ורוד */
  --c2: #f5893a; --c2d: #6d3110;   /* C · כתום */
  --ink: #0a0d14; --pap: #f3ead4;
  transition: transform .55s cubic-bezier(.5,0,.75,0), opacity .45s ease .06s;
}
#lv6c.gone { display: none; }
#lv6c.exit { transform: translateY(120%); opacity: 0; }
#lv6c .bub { pointer-events: auto; cursor: pointer; padding: 0; text-align: left; }
#lv6c .bub:disabled { cursor: default; }
#lv6c .caret { color: var(--amb); animation: caret .7s steps(1) infinite; }
#lv6c img { image-rendering: pixelated; }

#lv6c .scrim {
  position: absolute; inset: 0; background: #010204;
  opacity: 0; transition: opacity .38s ease;
}
#lv6c.pin .scrim { opacity: .86; }

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

@keyframes lv6-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes lv6-pop   { 0% { opacity: 0; transform: translateX(-3%) scale(.88) } 100% { opacity: 1; transform: none } }
@keyframes lv6-bad   { 25% { transform: translateX(-1%) } 75% { transform: translateX(1%) } }

/* ═══ ① פריה אומרת ═══ */
#lv6c .say {
  position: absolute; left: 4%; top: 3.5%; width: 71%; height: 15%;
  display: flex; align-items: center; gap: 1.3cqw; 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;
}
#lv6c.pin .say { opacity: 1; transform: none; }
#lv6c .say .face { flex: 0 0 auto; width: 6.4cqw; height: 6.4cqw; overflow: hidden; border: .2cqw solid #8a6a2a; }
#lv6c .say .face img { width: 100%; height: 100%; object-fit: cover; }
#lv6c .say .col { flex: 1 1 auto; min-width: 0; }
#lv6c .say .who {
  display: flex; align-items: center; gap: .55cqw; margin-bottom: .55cqw;
  font-family: "Press Start 2P", monospace; font-size: .52cqw;
  letter-spacing: .22em; color: #9aa3b5;
}
#lv6c .say .who i {
  width: .46cqw; height: .46cqw; border-radius: 50%; background: #ff5040;
  box-shadow: 0 0 .6cqw #ff5040; animation: lv6-pulse 1.6s ease-in-out infinite;
}
#lv6c .say .who b { font-weight: normal; color: var(--amb); }
/* ⏳ האירוע המכריח — היחיד שאדום על המסך, וזה בכוונה */
#lv6c .say .who .ev {
  margin-left: auto; color: #14161b; background: #ff5040; letter-spacing: .16em;
  padding: .32cqw .55cqw .24cqw; box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  animation: lv6-pulse 2.2s ease-in-out infinite;
}
#lv6c .say .txt {
  display: block; font-family: "Jersey 10", monospace; font-size: 3.5cqw;
  line-height: 1.06; color: #fff6e2; white-space: normal;
}
#lv6c .say .txt::before      { content: "\201C"; color: var(--amb); }
#lv6c .say .txt.typed::after { content: "\201D"; color: var(--amb); }

/* ═══ ② פקודת המחשב · **JACKPOT** ═══
   ⚠ נבחר מתוך ארבעה (MARQUEE · GOLD · JACKPOT · OVERDRIVE). זו השאלה
   האחרונה, ועודד ביקש שהפס יהיה *"זוהר, מטורף, מטורלל"* — במיוחד שלוש
   המילים האחרונות. הנורות **בשוליים בלבד**: שורת אורות ברוחב מלא בלעה
   את הטקסט. */
@keyframes lv6-chase { to { background-position-x: 1.8cqw, -1.8cqw, 0; } }
@keyframes lv6-flash { 0%,49%   { background: #ff3b3b; color: #fff4d0 }
                       50%,100% { background: #fff4d0; color: #b8101a } }
@keyframes lv6-slam  { 0% { opacity: 0; transform: scale(2.1) rotate(-6deg) }
                      70% { opacity: 1; transform: scale(.94) rotate(1deg) }
                     100% { opacity: 1; transform: none } }
#lv6c .sys {
  position: absolute; left: 4%; top: 20.3%; width: 71%; height: 10%;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 2.4cqw;
  border: .5cqw solid #12161f;
  background:
    radial-gradient(circle, #ffe27a 0 .24cqw, transparent .25cqw) 0 .1cqw / 1.8cqw .75cqw repeat-x,
    radial-gradient(circle, #ff4d4d 0 .24cqw, transparent .25cqw) .9cqw calc(100% - .1cqw) / 1.8cqw .75cqw repeat-x,
    repeating-linear-gradient(115deg, #3a0d10 0 1.4cqw, #24070a 1.4cqw 2.8cqw);
  box-shadow: 0 0 3cqw rgba(255,70,70,.5), inset 0 0 2cqw rgba(0,0,0,.8);
  animation: lv6-chase .7s steps(2) infinite;
  opacity: 0; transform: translateY(-16%);
  transition: opacity .3s ease, transform .36s var(--ez);
}
#lv6c.sysin .sys { opacity: 1; transform: none; }
#lv6c .sys .pr { flex: 0 0 auto; font-family: "Press Start 2P", monospace; font-size: 1.3cqw; color: #ffe27a; }
#lv6c .sys .deco {
  flex: 0 0 auto; font-family: "Press Start 2P", monospace; font-size: 1.6cqw;
  color: #ffe27a; text-shadow: 0 0 1.4cqw #ff6a3a;
}
#lv6c .sys .ask {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .8cqw;
  font-family: "Press Start 2P", monospace; font-size: 1.4cqw; line-height: 1.6;
  letter-spacing: .02em; color: #ffe27a; white-space: nowrap;
  text-shadow: .14cqw .14cqw 0 #4a0709, 0 0 1.2cqw rgba(0,0,0,.9);
}
/* ⚠ שלוש המילים נוחתות **אחרי** שהשורה נגמרה, ואז מתחילות להבהב.
   הן לא מוקלדות: `slam` הוא הרגע הדרמטי של השאלה האחרונה. */
#lv6c .sys .hit {
  font-weight: 400; border: .22cqw solid #12161f;
  box-shadow: 0 0 1.8cqw rgba(255,90,90,.8);
  padding: .36cqw .6cqw .28cqw; text-shadow: none;
  background: #ff3b3b; color: #fff4d0;
  opacity: 0; visibility: hidden;
}
/* ⚠ `opacity: 1` מפורשות ולא רק דרך ה-`forwards`: בעמוד הבדיקה
   `.nofx` מכבה אנימציות, והשבב נעלם לגמרי בצילומי ה-pose. */
#lv6c.hit .sys .hit {
  visibility: visible; opacity: 1;
  animation: lv6-slam .34s cubic-bezier(.2,1.4,.4,1) forwards,
             lv6-flash .55s steps(1) .34s infinite;
}
#lv6c .clock {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .22cqw;
  padding: .5cqw .9cqw .45cqw; background: #0c0a06; border: .16cqw solid #8a6a2a;
  transition: border-color .2s linear;
}
#lv6c .clock .lb  { font-family: "Press Start 2P", monospace; font-size: .42cqw; letter-spacing: .3em; color: #7d7259; }
#lv6c .clock .num {
  font-family: "Press Start 2P", monospace; font-size: 1.6cqw; line-height: 1;
  color: var(--amb); font-variant-numeric: tabular-nums;
}
#lv6c.hot .clock { border-color: #7a2620; }
#lv6c.hot .clock .num { color: #ff5040; animation: lv6-pulse 1s ease-in-out infinite; }

/* ═══ ③ הנייר · הצעת המחיר שעוד לא נסגרה ═══ */
#lv6c .desk {
  position: absolute; left: 4%; top: 32%; width: 71%; bottom: 8.5%;
  background: var(--pap);
  background-image:
    repeating-linear-gradient(90deg, rgba(12,40,60,.055) 0 .18cqw, transparent .18cqw .62cqw),
    repeating-linear-gradient(0deg,  rgba(12,40,60,.045) 0 .18cqw, transparent .18cqw .62cqw);
  border: .26cqw solid #14202e;
  box-shadow: .6cqw .85cqw 0 rgba(0,0,0,.62);
  padding: 1.1cqw 1.6cqw; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(2%);
  transition: opacity .36s ease, transform .44s var(--ez);
}
#lv6c.pin .desk { opacity: 1; transform: none; }
/* חותמת רקע ענקית — הנייר עוד לא נסגר, וזה מה שהשאלה באה לשנות */
#lv6c .wm {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-11deg);
  font-family: "Press Start 2P", monospace; font-size: 7cqw; letter-spacing: .1em;
  color: rgba(69,200,224,.2); white-space: nowrap; pointer-events: none;
  border: .8cqw solid rgba(69,200,224,.2); padding: 1.2cqw 2cqw 1cqw;
}
#lv6c .crop { position: absolute; width: 1.5cqw; height: 1.5cqw; border: .18cqw solid #c2456d; }
#lv6c .crop.tl { left: .5cqw;  top: .5cqw;    border-right: none; border-bottom: none; }
#lv6c .crop.tr { right: .5cqw; top: .5cqw;    border-left: none;  border-bottom: none; }
#lv6c .crop.bl { left: .5cqw;  bottom: .5cqw; border-right: none; border-top: none; }
#lv6c .crop.br { right: .5cqw; bottom: .5cqw; border-left: none;  border-top: none; }
#lv6c .rows { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
#lv6c .pfoot {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
  margin-top: .7cqw; padding-top: .6cqw; border-top: .18cqw dashed #9aa8b8;
}
#lv6c .pfoot .fine { font-family: "Press Start 2P", monospace; font-size: .48cqw; letter-spacing: .16em; color: #5a6b7d; }
#lv6c .pfoot .bar {
  flex: 0 0 13cqw; height: 1.4cqw;
  background: repeating-linear-gradient(90deg,
    #14202e 0 .16cqw, transparent .16cqw .34cqw, #14202e .34cqw .6cqw, transparent .6cqw .82cqw);
}

/* ═══ הבועות · כל אחת בצבע שלה ═══ */
#lv6c .bub[data-i="0"] { --c: var(--c0); --cd: var(--c0d); }
#lv6c .bub[data-i="1"] { --c: var(--c1); --cd: var(--c1d); }
#lv6c .bub[data-i="2"] { --c: var(--c2); --cd: var(--c2d); }
#lv6c .bub {
  position: relative; display: flex; align-items: center; gap: 2.2cqw;
  background: none; border: none; opacity: 0;
  transition: opacity .3s ease;
}
#lv6c .bub.in { animation: lv6-pop .3s cubic-bezier(.2,1.5,.4,1) forwards; }
#lv6c .bub .who {
  flex: 0 0 auto; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; overflow: hidden;
  border: .42cqw solid var(--c); background: var(--pap);
  box-shadow: .3cqw .4cqw 0 rgba(0,0,0,.45);
  transition: box-shadow .16s linear, transform .16s var(--ez), border-color .16s linear;
}
#lv6c .bub .who img { width: 100%; height: 100%; object-fit: cover; }
#lv6c .bub .say2 {
  position: relative; flex: 1 1 auto; min-width: 0;
  padding: .95cqw 1.4cqw 1cqw;
  background: var(--cd); border: .3cqw solid var(--c);
  box-shadow: .45cqw .6cqw 0 rgba(0,0,0,.5);
  transition: background .16s linear, transform .16s var(--ez), box-shadow .16s linear, border-color .16s linear;
}
/* הזנב · ריבוע מסובב שיורש גם את המסגרת. ⚠ צורה בצבע אחד נעלמת. */
#lv6c .bub .say2::before {
  content: ""; position: absolute; left: -1.05cqw; top: 50%;
  width: 1.7cqw; height: 1.7cqw; transform: translateY(-50%) rotate(45deg);
  background: var(--cd);
  border-left: .3cqw solid var(--c); border-bottom: .3cqw solid var(--c);
  transition: background .16s linear, border-color .16s linear;
}
#lv6c .bub .ln {
  display: block; font-family: "Jersey 10", monospace; font-size: 2.9cqw;
  line-height: 1.04; color: #fff6e2; transition: color .16s linear;
}
#lv6c .bub .ln::before { content: "\201C"; }
#lv6c .bub .ln::after  { content: "\201D"; }

/* HOVER · חוק הבית: מסגרת + רקע + תנועה. ⚠ **הצבע משתנה** — הכהה נפתח
   לצבע מלא והטקסט מתהפך לשחור. בקשה חוזרת של עודד. */
#lv6c .bub:hover:not(:disabled) .say2, #lv6c .bub.peek .say2 {
  background: var(--c); transform: translateX(.7cqw);
  box-shadow: .45cqw .6cqw 0 rgba(0,0,0,.5), 0 0 3cqw color-mix(in srgb, var(--c) 65%, transparent);
}
#lv6c .bub:hover:not(:disabled) .say2::before, #lv6c .bub.peek .say2::before { background: var(--c); }
#lv6c .bub:hover:not(:disabled) .ln, #lv6c .bub.peek .ln { color: var(--ink); }
#lv6c .bub:hover:not(:disabled) .who, #lv6c .bub.peek .who {
  transform: scale(1.06); box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--c) 70%, transparent);
}
#lv6c .bub:active:not(:disabled) .say2 { transform: translateX(.25cqw) scale(.995); }

/* בחירה */
#lv6c .bub.win .say2 {
  background: #1c5c34; border-color: #46e07c; transform: translateX(.7cqw);
  box-shadow: .45cqw .6cqw 0 rgba(0,0,0,.5), 0 0 3.4cqw rgba(70,224,124,.9);
}
#lv6c .bub.win .say2::before { background: #1c5c34; border-color: #46e07c; }
#lv6c .bub.win .ln  { color: #eafff0; }
#lv6c .bub.win .who { border-color: #46e07c; box-shadow: 0 0 2.6cqw rgba(70,224,124,.8); }
#lv6c .bub.bad .say2 {
  background: #6b1414; border-color: #ff5040;
  box-shadow: .45cqw .6cqw 0 rgba(0,0,0,.5), 0 0 3cqw rgba(255,60,40,.85);
  animation: lv6-bad .38s ease-in-out 2;
}
#lv6c .bub.bad .say2::before { background: #6b1414; border-color: #ff5040; }
#lv6c .bub.bad .who { border-color: #ff5040; }
#lv6c .bub.dim { opacity: .22; filter: grayscale(.7); }

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

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