/* ═══════════════════════════════════════════════════════════════════
   mobile-rotate.css · המשחק הגנרי **עובד בטלפון**, לרוחב
   ═══════════════════════════════════════════════════════════════════

   ⚠ זה ההפך מ-`mobile-block.css`, ובכוונה. 100 המשחקים האישיים
     נשארים דסקטופ בלבד — שם יש הקלטת מסך, ובלעדיה אין ריל. **במשחק
     הגנרי אין הקלטה בכלל**, וכל אינטראקציה בו היא קליק: גם המחשבון
     של שאלה 5 וגם שלוש הבועות של כל שאלה. המקלדת היא קיצור, לא תנאי.

   הרצועה היחידה שנשארת: הבמה היא **16:9 קבוע**, ובפורטרט זה בלתי
   קריא. לכן — אותה הוראת סיבוב של הקדימון, שכבר עובדת בשטח.
   ═══════════════════════════════════════════════════════════════════ */

#rotate {
  position: fixed; inset: 0; z-index: 9900;
  display: none; place-items: center;
  background: #05060a; direction: ltr; text-align: center;
  padding: 8vw;
  font-family: "Press Start 2P", monospace; color: #6dff8a;
}
/* ⚠ הצירוף המדויק של mobile-block: אצבע כמכשיר ההצבעה היחיד. לפטופ
   עם מסך מגע לא נכנס לכאן, ולכן גם לא רואה הוראת סיבוב אבסורדית. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #rotate { display: grid; }
}
#rotate .phone {
  width: 22vw; max-width: 120px; height: 38vw; max-height: 210px;
  margin: 0 auto 9vw;
  border: 4px solid #6dff8a; border-radius: 8px;
  background: linear-gradient(160deg, #10221a, #08120d);
  box-shadow: 0 0 0 3px #05060a, 0 0 30px rgba(109, 255, 138, .35);
  position: relative;
  animation: rot-turn 2.6s ease-in-out infinite;
}
#rotate .phone::after {
  content: ""; position: absolute; left: 50%; bottom: 5%;
  width: 26%; height: 3px; margin-left: -13%;
  background: #6dff8a; border-radius: 2px;
}
@keyframes rot-turn {
  0%, 22%   { transform: rotate(0deg); }
  45%, 78%  { transform: rotate(-90deg); }
  100%      { transform: rotate(-90deg); }
}
#rotate h2 { margin: 0 0 3vw; font-size: min(5vw, 22px); line-height: 1.5; }
#rotate p  { margin: 0; font-size: min(3.2vw, 13px); line-height: 1.9; color: #3fae57; }

/* ═══ טלפון בלנדסקייפ ═══
   ⚠ בלי זה ה-`100vh` של הליטרבוקס מתייחס לחלון **כולל** סרגל הכתובת
     של ספארי, והבמה נחתכת מלמטה. `dvh` הוא הגובה שבאמת נראה. */
@media (hover: none) and (pointer: coarse) {
  html, body { height: 100svh; overflow: hidden; overscroll-behavior: none; }
  #letterbox { height: 100svh; }
  /* ⚠⚠ **הבמה נחתכה בטלפון** (עודד, 08.09): הליטרבוקס כן קיבל dvh, אבל
     `#stage` ב-style.css נשאר `min(100vw, 100vh*16/9)` — רחב מדי לגובה
     הנראה, והתחתית (הכפתורים, המחשבון) נפלה מתחת לסרגל ספארי. שני מזהים
     כדי לגבור על style.css שנטען אחרי הקובץ הזה. `svh` — הגובה היציב. */
  #letterbox #stage { width: min(100vw, calc(100svh * 16 / 9)); }
  /* אצבע על אריח לא אמורה לסמן טקסט או לפתוח תפריט לחיצה-ארוכה */
  #stage, #stage * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* ⚠ הכל במשחק לחיץ ב-hover **וגם** בקליק, אבל באצבע אין hover:
     המצב שנשאר "דבוק" אחרי נגיעה מבלבל. מבטלים אותו באצבע בלבד. */
  #stage *:hover { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   מידת המגע — מה שנמדד ומה שתוקן (08.09.2026)
   ═══════════════════════════════════════════════════════════════════

   נמדד ב-`landing/probe_mobile.mjs` על אייפון 15 ואייפון SE בלנדסקייפ
   (במה 693×390 ו-667×375). **אפס גלישת טקסט בשש השאלות בשני הגדלים**,
   וכל התשובות גדולות בנוחות: בועות 468×59, אריחי שאלה 1 בגודל 112×166.

   ⚠ **הבעיה היחידה: מקשי המחשבון בשאלה 5 יצאו 30×25px** — מתחת ל-44px
     של אפל, וזו השאלה היחידה שדורשת דיוק באצבע. המחשבון עצמו הוא חפץ
     בחדר שנמדד באחוזי במה, ולכן ההגדלה נעשית **על אותו מרכז בדיוק**
     (47% מרוחב הבמה): 31% → 42% רוחב, והגג עולה מ-36% ל-27%.
     ⚠ הימין נשאר מתחת ל-75% — רצועת ווין לא נוגעה (26% + 42% = 68%).
   ⚠ **לא `transform: scale`** — `.calc` משתמש ב-transform למצבים שלו
     (`sent` עף למעלה, `bad` רועד), וסקייל משלנו היה דורס אותם.
   ⚠ הרחבת שטח הפגיעה נעשית ב-`::after` בגודל הפער בלבד (המרווח בגריד
     הוא .5cqw ≈ 3.5px); יותר מזה = שטחי פגיעה שנדרסים זה על זה,
     וזה גרוע ממקש קטן.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* ⚠⚠ **`#stage` בתחילת כל בורר, ולא בגלל סגנון.** הקובץ הזה נטען
     **ראשון** בעמוד (הוא חייב, בשביל הוראת הסיבוב), ו-`level5-price.css`
     נטען אחריו — כלומר `#lv5 .calc` שלו גובר על `#lv5 .calc` כאן
     באותה ספציפיות. נמדד: הכלל נכתב, ה-`::after` נתפס והמחשבון **לא
     זז בכלל** (נשאר 31.5%–62.5%). שני מזהים גוברים על אחד בכל סדר. */
  #stage #lv5 .calc { left: 26%; width: 42%; top: 27%; }
  #stage #lv5 .k { position: relative; }
  #stage #lv5 .k::after { content: ""; position: absolute; inset: -.28cqw; }
  /* אין hover באצבע — הפילטר הדביק שנשאר אחרי נגיעה מבלבל */
  #stage #lv5.live .k:hover { filter: none; transform: none; outline: none; }

  /* טאבי המגילה הם 19×21 — נוחים בעכבר, לא באצבע. החצים (47×47)
     הם מסלול הניווט האמיתי בטלפון, והטאבים מקבלים שטח פגיעה מוגדל. */
  #stage #scroll .tab { position: relative; }
  #stage #scroll .tab::after { content: ""; position: absolute; inset: -6px -2px; }
}