/* ═══════════════════════════════════════════════════════════════════
   book-demo.css · הכפתור האחרון של המשחק הגנרי (08.09.2026)
   ═══════════════════════════════════════════════════════════════════

   ב-100 המשחקים האישיים המסך האחרון נגמר ב-END GAME AND SAVE VIDEO,
   ואחריו שקופית THAT'S A WRAP עם כפתור סגירה. **במשחק הגנרי אין
   הקלטה ואין מה לסגור** — מי ששיחק הוא ליד חמה, והמסך האחרון שלו
   הוא ההזמנה.

   ⚡ **הצבעים נלקחו מ-winn.ai עצמו** ולא הומצאו (נמדד בדפדפן על
   winn.ai/demo, 08.09): הצהוב של האתר הוא **#FEEC5D**, כפתורי ה-CTA
   שם הם **גלולה** (`border-radius: 50px`) עם **מסגרת שחורה 2px**
   וטקסט שחור. אותה שפה בדיוק, כדי שהמעבר מהמשחק לאתר לא ירגיש
   כמו קפיצה לאתר של מישהו אחר.
   ⚠ הטיפוגרפיה נשארת של המשחק (Press Start 2P) — Rooney Sans של
     האתר לא קיים אצלנו, וסאנס גנרי היה נראה כמו באג ולא כמו מותג.

   ⚠ `#end-save-btn` יורד ב-`display: none` ולא נמחק: `victory-end.js`
     משותף ל-100 המשחקים, ואנחנו לא נוגעים בו. `book-demo.js` רואה
     אותו עולה ומרים במקומו את הכפתור הזה.
   ═══════════════════════════════════════════════════════════════════ */

#end-save-btn { display: none !important; }

#book-demo-btn {
  position: absolute;
  left: 50%;
  bottom: 36%;                    /* אותו מקום בדיוק של הכפתור שהוחלף */
  transform: translate(-50%, 2.2cqw);
  z-index: 78;                    /* מעל הסרט (75), מתחת לבועת הפרצוף (80) */
  display: inline-flex; align-items: center; gap: 1.1cqw;
  box-sizing: border-box;
  font-family: "Press Start 2P", monospace;
  font-size: 1.55cqw; line-height: 1;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  color: #000;
  background: #FEEC5D;                       /* הצהוב של winn.ai */
  border: .22cqw solid #000;                 /* המסגרת השחורה של ה-CTA שם */
  border-radius: 100px;                      /* גלולה — כמו כפתורי האתר */
  padding: 1.5cqw 3.2cqw 1.35cqw;
  cursor: pointer; opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1),
              box-shadow .18s ease, background .18s ease;
  box-shadow: 0 .55cqw 0 rgba(0, 0, 0, .55),
              0 0 3cqw rgba(254, 236, 93, .55),
              0 0 7cqw rgba(254, 236, 93, .30);
  animation: bd-glow 2.4s ease-in-out infinite;
}
#book-demo-btn.on { opacity: 1; transform: translate(-50%, 0); }

/* הזוהר — הוא "מהמם" רק אם הוא נושם. שתי הילות שמתרחבות ונרגעות. */
@keyframes bd-glow {
  0%, 100% { box-shadow: 0 .55cqw 0 rgba(0, 0, 0, .55),
                         0 0 3cqw rgba(254, 236, 93, .55),
                         0 0 7cqw rgba(254, 236, 93, .30); }
  50%      { box-shadow: 0 .55cqw 0 rgba(0, 0, 0, .55),
                         0 0 4.6cqw rgba(254, 236, 93, .85),
                         0 0 11cqw rgba(254, 236, 93, .45); }
}

/* חוק ה-hover של המשחק: מסגרת + רקע + **תנועה** */
#book-demo-btn.on:hover, #book-demo-btn.on:focus-visible {
  background: #FFF6A8;
  transform: translate(-50%, -.4cqw) scale(1.035);
  box-shadow: 0 .9cqw 0 rgba(0, 0, 0, .55),
              0 0 5.5cqw rgba(254, 236, 93, .95),
              0 0 13cqw rgba(254, 236, 93, .55);
  outline: none;
}
#book-demo-btn.on:active { transform: translate(-50%, .12cqw) scale(.99); box-shadow: 0 .2cqw 0 rgba(0,0,0,.55), 0 0 4cqw rgba(254,236,93,.8); }

/* החץ — הסימן שזה יוצא החוצה, בפיקסלים ולא בגליף יוניקוד */
#book-demo-btn .bd-arrow {
  width: 1.5cqw; height: 1.5cqw; flex: 0 0 auto;
  background: #000;
  clip-path: polygon(0 38%, 58% 38%, 58% 14%, 100% 50%, 58% 86%, 58% 62%, 0 62%);
}

/* ═══ באצבע ═══ אין hover, והכפתור חייב להיות גדול מספיק לאגודל.
   44px היא מידת המגע המינימלית של אפל, ו-1.55cqw על טלפון בלנדסקייפ
   יוצא בערך 10px — קטן מדי. */
@media (hover: none) and (pointer: coarse) {
  #book-demo-btn { font-size: max(2.1cqw, 11px); padding: max(1.9cqw, 12px) max(3.6cqw, 20px) max(1.75cqw, 11px); }
  #book-demo-btn .bd-arrow { width: max(1.9cqw, 10px); height: max(1.9cqw, 10px); }
}