/* ═══════════════════════════════════════════════════════════════════════
   שאלה 3 · **FLAPBOARD — לוח הסנפלינג** · "Who else like us has actually done this?"
   ---------------------------------------------------------------------
   ⚠ **קובץ אמת.** נבחרה 19.08.2026 מסבב ב' (5 אופציות) — עודד:
   *"FLAPBOARD מושלם!"* — אחרי שצוות WINN התלונן על עודף טקסט בקיר.
   עמוד ההשוואה: `winn-8bit/level3b-test.html` · winn-vendor-review.vercel.app.
   הקיר הישן: `level3-wall.css` (ארכיון חי — סקוט עוד עליו).

   **הרעיון:** לוח סנפלינג אחד (כמו לוח טיסות), שורה לכל סיפור לקוח:
   שם החברה באריחי לוח מפוצלים + המספרים בתיבת LED. **על המסך רק השם
   והמספרים** (הכרעת עודד 19.08 — המטריקה והסקייל ירדו לגמרי):
   from אדום מחוק ← to ירוק וגדול ממנו. השאלה יושבת על הלוח עצמו.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* החדר מוחשך — הלוח הוא מקור האור */
#lv3flap .scrim {
  position: absolute; inset: 0; background: #020306;
  opacity: 0; transition: opacity .38s ease;
}
#lv3flap.pin .scrim { opacity: .84; }

/* ---------- הלוח · 15–75% מהרוחב ---------- */
#lv3flap .board {
  position: absolute; left: 15%; top: 5%; width: 60%; height: 86%;
  background: linear-gradient(#15181e, #0c0e13);
  border: .45cqw solid #05060a;
  box-shadow: inset 0 0 0 .16cqw #2c313a, 0 1cqw 2.2cqw rgba(0,0,0,.6);
  opacity: 0; transform: translateY(5%);
  transition: opacity .4s ease .05s, transform .55s var(--ez) .05s;
}
#lv3flap.pin .board { opacity: 1; transform: none; }

/* ---------- פס השאלה + הטיימר ---------- */
#lv3flap .qbar {
  position: absolute; left: 3.5%; top: 3.5%; width: 93%; height: 14.5%;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.3cqw;
  background: #07080c; border: .18cqw solid #3a404c;
  box-shadow: inset 0 0 1.4cqw rgba(120,190,255,.14);
}
#lv3flap.pin .qbar { animation: lv3f-lamp .55s steps(4); }
#lv3flap .qbar .qcol { flex: 1 1 auto; min-width: 0; }
#lv3flap .qbar .who {
  display: block; font-family: "Press Start 2P", monospace; font-size: .52cqw;
  letter-spacing: .24em; color: var(--amb); margin-bottom: .45cqw;
}
#lv3flap .qbar .txt {
  display: block; font-family: "Jersey 10", monospace; font-size: 2.55cqw;
  line-height: 1.04; color: #e8f2ff; white-space: nowrap;
  text-shadow: 0 0 1cqw rgba(120,190,255,.35);
}
#lv3flap .clock {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25cqw;
  padding: .5cqw .85cqw .45cqw; background: #0c0a06; border: .16cqw solid #8a6a2a;
  transition: border-color .2s linear, opacity .3s ease, filter .3s ease;
}
#lv3flap .clock .lb {
  font-family: "Press Start 2P", monospace; font-size: .42cqw;
  letter-spacing: .3em; color: #7d7259;
}
#lv3flap .clock .num {
  font-family: "Press Start 2P", monospace; font-size: 1.6cqw; line-height: 1;
  color: var(--amb); font-variant-numeric: tabular-nums;
}
#lv3flap.hot .clock { border-color: #7a2620; }
#lv3flap.hot .clock .num { color: #ff5040; animation: lv3f-pulse 1s ease-in-out infinite; }
@keyframes lv3f-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes lv3f-lamp { 0% { opacity: 0 } 40% { opacity: .9 } 60% { opacity: .12 } 100% { opacity: 1 } }
@keyframes lv3f-bad { 25% { transform: translateX(-1.2%) } 75% { transform: translateX(1.2%) } }

/* ⏱ השעון הרדום (12.08) */
#lv3flap.arming .clock { opacity: .45; filter: grayscale(1); }
#lv3flap.arming .clock .num { color: #8b9099; }

/* ---------- שלוש השורות ---------- */
#lv3flap .rows {
  position: absolute; left: 3.5%; top: 21.5%; width: 93%; height: 74%;
  display: flex; flex-direction: column; gap: 2.8%;
}
#lv3flap .la {
  position: relative; flex: 1 1 0; opacity: 0;
  display: flex; align-items: center; gap: 1.1cqw; padding: 0 1.2cqw;
  background: linear-gradient(#181c24, #10131a);
  border: .16cqw solid #262c38;
  transition: opacity .3s ease, filter .2s linear, border-color .16s linear,
              box-shadow .16s linear, transform .18s var(--ez);
}
/* כל שורה נדלקת בפני עצמה — הפיגור מגיע מ-level3-flapboard.js */
#lv3flap .la.in { opacity: 1; animation: lv3f-lamp .4s steps(3); }
/* ברק עדין על החצי העליון — אריחי הלוח חיים */
#lv3flap .la::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0 46%, transparent 54%);
}
/* השם — אריחי סנפלינג: פסים אנכיים דקים בין "אריחים" */
#lv3flap .nm {
  font-family: "Jersey 10", monospace; line-height: 1;
  font-size: 3.1cqw; color: #f2f5fa; letter-spacing: .06em;
  padding: .35cqw .5cqw;
  background: repeating-linear-gradient(90deg, #05060a 0 1.35cqw, #101623 1.35cqw 1.4cqw);
  border: .1cqw solid #262c38;
  white-space: nowrap; overflow: hidden;
  flex: 0 1 auto; min-width: 0;
}
#lv3flap .spacer { flex: 1 1 auto; min-width: .5cqw; }
/* המספרים — תיבת LED: from אדום מחוק ← to ירוק גדול */
#lv3flap .duo {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: .55cqw;
  padding: .5cqw .9cqw;
  background: #05060a; border: .1cqw solid #262c38;
}
#lv3flap .duo .from {
  font-family: "Jersey 10", monospace; font-size: 2.6cqw; line-height: 1;
  color: #ff7a6e; text-decoration: line-through;
  text-decoration-thickness: .14cqw; opacity: .85; white-space: nowrap;
}
#lv3flap .duo .arw {
  font-family: "Jersey 10", monospace; font-size: 2.3cqw; line-height: 1;
  color: #8a92a6; white-space: nowrap;
}
/* ⚠ 25.08 · סיפור בלי `from` — **מספר ירוק אחד בלבד**, בלי חץ ובלי מחוק.
   הקופסה מקבלת קצת יותר אוויר כדי שהמספר היחיד לא ייראה תלוש בפינה. */
#lv3flap .duo.solo { padding: .5cqw 1.4cqw; }
#lv3flap .duo.solo .to { font-size: 4.3cqw; }
#lv3flap .duo .to {
  font-family: "Jersey 10", monospace; font-size: 3.9cqw; line-height: 1;
  color: #5fe392; text-shadow: 0 0 .8cqw rgba(95,227,146,.5); white-space: nowrap;
}

/* ---------- HOVER · חוק הבית: מסגרת + רקע + **תנועה** ---------- */
#lv3flap .la:hover:not(:disabled), #lv3flap .la.peek {
  border-color: var(--amb); transform: translateX(.6%);
  background: linear-gradient(#222834, #161a22);
  box-shadow: inset 0 0 0 .14cqw var(--amb), 0 0 2.2cqw rgba(232,163,61,.4);
  filter: brightness(1.15);
}
#lv3flap .la:active:not(:disabled) { transform: none; }

/* ---------- בחירה ---------- */
#lv3flap .la.win {
  border-color: #46e07c;
  box-shadow: inset 0 0 0 .14cqw #46e07c, 0 0 2.6cqw rgba(70,224,124,.55);
}
#lv3flap .la.win .nm { color: #7dffb4; }
#lv3flap .la.bad {
  border-color: #ff5040;
  box-shadow: inset 0 0 0 .14cqw #ff5040;
  animation: lv3f-bad .38s ease-in-out 2;
}
#lv3flap .la.bad .nm { color: #ff8a80; }
#lv3flap .la.dim { opacity: .3; filter: grayscale(.6); }

/* ---------- נגמר הזמן · הלוח מחשיך ---------- */
#lv3flap.fall .la { filter: brightness(.35); }
#lv3flap.fall .qbar { box-shadow: none; animation: none; }
#lv3flap.fall .board::after {
  content: "DEPARTED"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) rotate(-8deg);
  font-family: "Press Start 2P", monospace; font-size: 1.9cqw; color: #ff5040;
  border: .25cqw solid #ff5040; padding: 1cqw 1.4cqw;
  background: rgba(10,6,6,.82); text-shadow: 0 0 1.2cqw rgba(255,60,40,.7);
  animation: lv3f-lamp .4s steps(3);
}