/* ═══════════════════════════════════════════════════════════════════════
   שאלה 1 · **TOKYO — מכונת הרחוב היפנית** · "What's the product you're selling?"
   ---------------------------------------------------------------------
   ⚠ **קובץ אמת.** נבחרה 19.08.2026 מסבב ה' (4 מכונות, בלי קונספטים) —
   עודד: *"טוקיו זה הנבחר!!"* — אחרי שצוות WINN לא הסתדר עם הוונדור.
   עמוד ההשוואה: `winn-8bit/level1e-test.html` · winn-vendor-review.vercel.app.
   הוונדור הישן: `level1-vendor.css` (ארכיון חי — סקוט עוד עליו).

   **הרעיון:** מכונת רחוב יפנית בלילה. גוף כחול עמוק, ופנל זכוכית לבן
   מואר **שהוא מקור האור בחדר** (הסקרים הכי חשוך במשחק — .86). שלוש
   חבילות קרטון על מדפים, ותג שם לבן עם טקסט כהה ענק — ההצגה ההפוכה
   מכל שאר המשחק, וזה מה שגורם לשמות לקפוץ.

   שלושת החוקים של שאלה 1 בתוקף מלא:
     ① **גנרית לחלוטין.** החבילות הן קרטון + סרט + מדבקת קוד — שום
        צורה שמזכירה מוצר (הכרעת עודד 19.08: לא בקבוק, לא פחית).
     ② **הטקסט הוא הגיבור.** התג 30% מגובה הסלוט, השם ב-2.5cqw.
     ③ **בלי טקסט הסבר.** ה-hover מסביר את עצמו.
   ═══════════════════════════════════════════════════════════════════════ */

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

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

/* ---------- גוף המכונה · 16–74% מהרוחב, כמו הוונדור ---------- */
#lv1tok .machine {
  position: absolute; left: 16%; top: 6%; width: 58%; height: 84%;
  background: linear-gradient(#16305a, #0d1f3c 60%, #091528);
  border: .4cqw solid #050b16;
  box-shadow: inset 0 0 0 .18cqw #2c4a7c, 0 0 4cqw rgba(150,200,255,.28);
  opacity: 0; transform: translateY(5%);
  transition: opacity .4s ease .05s, transform .55s var(--ez) .05s;
}
#lv1tok.pin .machine { opacity: 1; transform: none; }

/* ---------- פס השאלה · לוחית מוארת, טקסט כהה ---------- */
#lv1tok .qbar {
  position: absolute; left: 4.5%; top: 3%; width: 91%; height: 13%;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw;
  background: linear-gradient(#eef4ff, #cfdcf2);
  border: .2cqw solid #8fa6c8;
  box-shadow: 0 0 2cqw rgba(190,215,255,.65), inset 0 0 1.2cqw rgba(255,255,255,.8);
}
#lv1tok.pin .qbar { animation: lv1t-lamp .55s steps(4); }
#lv1tok .qbar .qcol { flex: 1 1 auto; min-width: 0; }
#lv1tok .qbar .who {
  display: block; font-family: "Press Start 2P", monospace; font-size: .52cqw;
  letter-spacing: .24em; color: #b02c22; margin-bottom: .45cqw;
}
#lv1tok .qbar .txt {
  display: block; font-family: "Jersey 10", monospace; font-size: 2.55cqw;
  line-height: 1.04; color: #14243c; white-space: nowrap;
}

/* הטיימר · שבב כהה על הלוחית המוארת — קופץ לעין */
#lv1tok .clock {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25cqw;
  padding: .5cqw .85cqw .45cqw; background: #0c1626; border: .16cqw solid #8fa6c8;
  transition: border-color .2s linear, opacity .3s ease, filter .3s ease;
}
#lv1tok .clock .lb {
  font-family: "Press Start 2P", monospace; font-size: .42cqw;
  letter-spacing: .3em; color: #7d8aa0;
}
#lv1tok .clock .num {
  font-family: "Press Start 2P", monospace; font-size: 1.6cqw; line-height: 1;
  color: var(--amb); font-variant-numeric: tabular-nums;
}
#lv1tok.hot .clock { border-color: #7a2620; }
#lv1tok.hot .clock .num { color: #ff5040; animation: lv1t-pulse 1s ease-in-out infinite; }
@keyframes lv1t-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes lv1t-lamp { 0% { opacity: 0 } 40% { opacity: .9 } 60% { opacity: .12 } 100% { opacity: 1 } }

/* ⏱ השעון הרדום (12.08) — על המסך אבל כבוי עד יריית הפתיחה */
#lv1tok.arming .clock { opacity: .45; filter: grayscale(1); }
#lv1tok.arming .clock .num { color: #8b9099; }

/* ---------- פנל הזכוכית המואר · מקור האור של הסצנה ---------- */
#lv1tok .win3 {
  position: absolute; left: 4.5%; top: 19%; width: 91%; height: 56%;
  display: flex; gap: 1.6%; padding: 1.6% 1.6% 1.2%;
  background: linear-gradient(#f6faff, #dbe7f6 78%, #b9c9de);
  border: .3cqw solid #091528;
  box-shadow: inset 0 0 0 .14cqw #ffffff, 0 0 3cqw rgba(190,215,255,.5);
}
#lv1tok .win3::after {                   /* השתקפות הזכוכית */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 44% 49%,
              transparent 51%, transparent 68%, rgba(255,255,255,.32) 70% 73%, transparent 75%);
}

/* ---------- הסלוט ---------- */
#lv1tok .la {
  position: relative; flex: 1 1 0; overflow: hidden; opacity: 0;
  background: transparent; border: .12cqw solid transparent;
  transition: filter .2s linear, box-shadow .16s linear,
              border-color .16s linear, transform .18s var(--ez);
}
/* כל סלוט נדלק בפני עצמו — הפיגור מגיע מ-level1-tokyo.js */
#lv1tok .la.lit { opacity: 1; }

/* החבילה — קרטון + סרט אריזה + מדבקת קוד. שלוש צורות: גבוהה · רחבה · קובייה */
#lv1tok .can {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, #e8dcc0, #cdbb92 60%, #b3a074);
  border: .13cqw solid #7a6844;
  border-radius: .2cqw;
  transition: transform .18s var(--ez);
}
#lv1tok .la[data-i="0"] .can { top: 8%;  width: 38%; height: 48%; }
#lv1tok .la[data-i="1"] .can { top: 20%; width: 58%; height: 36%; }
#lv1tok .la[data-i="2"] .can { top: 13%; width: 46%; height: 43%; }
#lv1tok .can::before {                   /* סרט האריזה */
  content: ""; position: absolute; left: 42%; width: 16%; top: 0; bottom: 0;
  background: rgba(122,104,68,.35); border-left: .08cqw solid rgba(122,104,68,.5);
  border-right: .08cqw solid rgba(122,104,68,.5);
}
#lv1tok .can::after {                    /* מדבקת הקוד */
  content: attr(data-code); position: absolute; right: 7%; bottom: 8%;
  padding: .2cqw .35cqw;
  background: #fff; border: .08cqw solid #8fa6c8;
  font-family: "Press Start 2P", monospace; font-size: .5cqw;
  color: #14243c;
}

/* המדף המואר מתחת לחבילה */
#lv1tok .shelf {
  position: absolute; left: 8%; right: 8%; top: 57%; height: 2.6%;
  background: #9fb4cf; box-shadow: 0 .18cqw .5cqw rgba(20,40,80,.35);
}

/* ---------- התג · טקסט כהה על לבן מואר — 30% מגובה הסלוט ---------- */
#lv1tok .strip {
  position: absolute; left: 4%; right: 4%; bottom: 4%; height: 30%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: .16cqw solid #8fa6c8;
  box-shadow: 0 0 1.2cqw rgba(190,215,255,.75);
  transition: background .2s linear, border-color .2s linear, box-shadow .2s linear;
}
#lv1tok .strip .t {
  font-family: "Jersey 10", monospace; font-size: 2.5cqw; line-height: 1;
  color: #14243c; padding: 0 .4cqw; text-align: center; transition: color .2s linear;
}

/* ---------- HOVER · חוק הבית: מסגרת + רקע + **תנועה** ---------- */
#lv1tok .la:hover:not(:disabled), #lv1tok .la.peek {
  border-color: var(--amb); transform: translateY(-1.4%);
  box-shadow: inset 0 0 0 .14cqw var(--amb);
}
#lv1tok .la:hover:not(:disabled) .can, #lv1tok .la.peek .can {
  transform: translateX(-50%) translateY(-4%) scale(1.06);
}
#lv1tok .la:hover:not(:disabled) .strip, #lv1tok .la.peek .strip {
  background: #fff4dc; border-color: var(--amb);
  box-shadow: 0 0 1.6cqw rgba(232,163,61,.8);
}
#lv1tok .la:hover:not(:disabled) .strip .t, #lv1tok .la.peek .strip .t { color: #7a4a08; }
#lv1tok .la:active:not(:disabled) { transform: none; }

/* ---------- בחירה ---------- */
#lv1tok .la.win { border-color: #2ca05c; box-shadow: inset 0 0 0 .14cqw #2ca05c; }
#lv1tok .la.win .strip {
  background: #d9ffe8; border-color: #2ca05c;
  box-shadow: 0 0 1.6cqw rgba(70,224,124,.8);
}
#lv1tok .la.win .strip .t { color: #0d5c2c; }
/* אנימציית האישור · החבילה צונחת מהמדף אל פתח האיסוף */
#lv1tok .la.vend .can {
  transform: translateX(-50%) translateY(120%);
  transition: transform .4s cubic-bezier(.5,0,.8,.4) .3s;
}
#lv1tok .la.bad {
  border-color: #ff5040; box-shadow: inset 0 0 0 .14cqw #ff5040;
  animation: lv1t-bad .38s ease-in-out 2;
}
@keyframes lv1t-bad { 25% { transform: translateX(-1.2%) } 75% { transform: translateX(1.2%) } }
#lv1tok .la.bad .strip { background: #ffe0dc; border-color: #ff5040; }
#lv1tok .la.bad .strip .t { color: #8f1f17; }
#lv1tok .la.dim { opacity: .3; filter: grayscale(.6); }

/* ---------- פתח האיסוף הרחב ---------- */
#lv1tok .port {
  position: absolute; left: 4.5%; top: 79%; width: 91%; height: 16%;
  background: #050b16; border: .3cqw solid #091528;
  box-shadow: inset 0 0 0 .14cqw #2c4a7c; transition: box-shadow .3s ease;
}
#lv1tok .port::before {
  content: ""; position: absolute; left: 30%; right: 30%; top: 28%; bottom: 28%;
  background: #010409; border: .14cqw solid #2c4a7c; border-radius: .4cqw;
}
#lv1tok.vended .port {
  box-shadow: inset 0 0 0 .15cqw #46e07c, inset 0 0 1.8cqw rgba(70,224,124,.5);
}

/* ---------- נגמר הזמן · האור בפנל מת ו-SOLD OUT ---------- */
#lv1tok.dead .la { filter: brightness(.45); }
#lv1tok.dead .win3 { background: linear-gradient(#3a4350, #2a313c); box-shadow: none; }
#lv1tok.dead .strip { background: #6b7482; box-shadow: none; }
#lv1tok.dead .qbar { box-shadow: none; animation: none; }
#lv1tok .out {
  position: absolute; left: 4.5%; top: 19%; width: 91%; height: 56%;
  display: none; align-items: center; justify-content: center; pointer-events: none;
}
#lv1tok.dead .out { display: flex; animation: lv1t-lamp .4s steps(3); }
#lv1tok .out span {
  font-family: "Press Start 2P", monospace; font-size: 1.9cqw; color: #ff5040;
  border: .25cqw solid #ff5040; padding: 1cqw 1.4cqw; transform: rotate(-8deg);
  background: rgba(10,6,6,.78); text-shadow: 0 0 1.2cqw rgba(255,60,40,.7);
}