/* ═══════════════════════════════════════════════════════════════════════
   GATE · מסך סיסמה → מסך טעינה → המשחק
   ---------------------------------------------------------------------
   הקריאטיב נבחר ב-2026-08-04 מתוך 5 אופציות: **המחשב של המוכר** —
   שולחן עבודה ב-1995 בלילה, והטרמינל הירוק שבתוך מסך ה-CRT הוא שדה
   הקלט עצמו. הנכס `assets/gate-crt.png` גנרי — זהה לכל 100 המשחקים;
   רק שורת הכותרת (שם המוצר) מגיעה מהקונפיג דרך gate.js.

     1. **סיסמה** — לא אבטחה, מסנן. מוקלדת גלויה, בלי כוכביות.
     2. **טעינה** — מוריד את **כל** הנכסים לפני SELL NOW, באותו מסך CRT.

   ⚠ הלחיצה על ENTER היא **מחווה של משתמש** — זה מה שמתיר autoplay
     לווידאו ולקול בהמשך.
   ⚠ מכסה את **כל החלון**; התמונה 16:9 עם פסים שחורים בצדדים (חוק
     הליטרבוקס), ולכן אחוזי המיקום על התמונה נכונים בכל גודל חלון.

   מלבן פנים-המסך של ה-CRT בתמונה (נמדד ב-PIL על הנכס):
     left 36.13% · top 24.39% · width 30.18% · height 36.81%
   ═══════════════════════════════════════════════════════════════════════ */

#gate {
  position: fixed; inset: 0; z-index: 9000; direction: ltr;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  transition: opacity .5s ease;
}
#gate.done { opacity: 0; pointer-events: none; }
#gate.off { display: none; }
/* שער רפאים — המשחק הגנרי, כשמגיעים ממסך הבחירה: טוען, לא נראה, לא תופס קליקים */
#gate.ghost { visibility: hidden; pointer-events: none; }

/* הפריים — 16:9 מלא, ממורכז, והתמונה ממלאה אותו בדיוק */
#gate .frame {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  /* v5b נבחר 19.08 (ג'ינרוט טרי מהמקור הנקי, הלוגו תוקן); שם קובץ חדש
     בגלל קאש ה-immutable — החלפה באותו נתיב לא מגיעה לשחקן */
  background: url("../assets/gate-crt-v5b.png") center / cover no-repeat;
  image-rendering: pixelated;
}

/* ---------- הטרמינל · יושב בתוך מסך ה-CRT שבתמונה ---------- */
#gate .crt {
  position: absolute;
  left: 36.13%; top: 24.39%; width: 30.18%; height: 36.81%;
  box-sizing: border-box;
  padding: 2.2cqw 2cqw 1.6cqw;
  display: flex; flex-direction: column;
  font-family: "Press Start 2P", monospace;
  color: #6dff8a;
  text-shadow: 0 0 .6cqw rgba(109, 255, 138, .55);
  overflow: hidden;
  animation: crt-flicker 4s steps(1) infinite;
}
/* הזוהר הירוק והסקאנליינס — מעל הטקסט, לא מקבלים קליקים */
#gate .crt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(109, 255, 138, .10), transparent 75%);
}
#gate .crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) .12cqw, transparent .12cqw, transparent .34cqw);
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  93% { opacity: 1; }
  94% { opacity: .86; }
  95% { opacity: 1; }
}

/* שורות טקסט */
#gate .tl { font-size: .92cqw; line-height: 1; margin-bottom: 1.05cqw; white-space: nowrap; }
#gate .tl.dim { color: #3fae57; text-shadow: 0 0 .4cqw rgba(63, 174, 87, .4); }
#gate .gap { height: 1.2cqw; }

/* שורת ההקלדה — האותיות גלויות + קורסור-בלוק מהבהב */
#gate .row { position: relative; display: flex; align-items: center; font-size: 1.1cqw; line-height: 1; margin-bottom: 1.2cqw; }
#gate .pr { margin-right: .7cqw; }
#gate .echo { letter-spacing: .06em; white-space: pre; }
#gate .cur {
  width: .85cqw; height: 1.25cqw; margin-left: .18cqw;
  background: #6dff8a;
  box-shadow: 0 0 .7cqw rgba(109, 255, 138, .8);
  animation: gate-blink 1.06s steps(2) infinite;
}
@keyframes gate-blink { 50% { opacity: 0; } }
/* ה-input האמיתי שקוף מעל השורה — הפוקוס וההקלדה בו, התצוגה ב-echo */
#gate .row input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; outline: none; cursor: text;
  font-size: 16px;                 /* מתחת ל-16px iOS מזנק בזום */
}

/* ACCESS DENIED — מופיע רק על טעות, והמסך רועד */
#gate .denied { display: none; color: #ff5545; text-shadow: 0 0 .6cqw rgba(255, 85, 69, .6); }
#gate.bad .denied { display: block; }
#gate.bad .crt { animation: gate-bad .34s ease-in-out 2; }
#gate.bad .echo { color: #ff5545; text-shadow: 0 0 .6cqw rgba(255, 85, 69, .6); }
@keyframes gate-bad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-.4cqw); }
  75% { transform: translateX(.4cqw); }
}

/* כפתורי טרמינל — [ PRESS ENTER ] · [ START ANYWAY ]
   hover לפי החוק: מסגרת + רקע + תנועה */
#gate button {
  align-self: flex-start;
  margin-top: auto;
  padding: .55cqw .7cqw;
  font-family: inherit; font-size: .92cqw; line-height: 1;
  color: #6dff8a; text-shadow: inherit;
  background: transparent; border: .14cqw solid transparent;
  cursor: pointer;
  transition: transform .07s ease, background .15s ease, border-color .15s ease;
}
#gate button:hover {
  border-color: #6dff8a;
  background: rgba(109, 255, 138, .13);
  transform: translateY(-.14cqw);
}
#gate button:active { transform: translateY(.1cqw); }

/* ---------- מסך 2 · הטעינה (באותו CRT) ---------- */
#gate .load { display: none; flex: 1; min-height: 0; flex-direction: column; }
#gate.loading .pass { display: none; }
#gate.loading .load { display: flex; }
#gate .pass { display: flex; flex-direction: column; flex: 1; min-height: 0; }

#gate .granted { animation: gate-blink 1.06s steps(2) 3; }
#gate .pct { font-size: 2.1cqw; margin-bottom: 1.1cqw; font-variant-numeric: tabular-nums; }
#gate .bar {
  height: 1.15cqw; margin-bottom: 1.05cqw;
  background: rgba(0, 0, 0, .55);
  border: .14cqw solid #2c5c38;
  overflow: hidden;
}
#gate .bar i {
  display: block; height: 100%; width: 0;
  background: #6dff8a;
  box-shadow: 0 0 1cqw rgba(109, 255, 138, .8);
  transition: width .25s linear;
}
#gate .files { font-size: .78cqw; color: #3fae57; text-shadow: 0 0 .4cqw rgba(63, 174, 87, .4); }
#gate .skip { display: none; }
#gate.slow .skip { display: inline-block; }

/* חותמת הבילד — שורה משלה מתחת למונה, כדי שלא תיחתך בקצה ה-CRT */
#gate .files.build { margin-top: .5rem; opacity: .75; letter-spacing: .06em; }

/* ⚡ מצב פתוח — בלי סיסמה (07.09, המשחק הגנרי). שורת ההקלדה
   ו-ACCESS DENIED יורדות; נשאר "PRESS ENTER TO START" והכפתור. */
#gate.open .pass .row,
#gate.open .pass .denied { display: none; }