/* ═══════════════════════════════════════════════════════════════════════
   GAME OVER · הנפשת הטעות + הכרטיס
   ---------------------------------------------------------------------
   הנכס הנבחר: g3-legion (Seedance 2.0, 15 שנ׳, עם אודיו) — ראה
   chosen-components/game-over.md. הפריים הראשון שלו הוא **פריים העוגן**,
   ולכן הסרטון פשוט מכסה את הבמה ברגע שהמסך התייצב: אין חיתוך נראה.

   הטקסט **לא בסרטון בכוונה** — סידנס מעוות אותיות, וכרטיס ב-CSS נשאר
   פיקסל-פרפקט, ניתן לתרגום, וזהה ב-100 המשחקים בלי לג'נרט כלום.
   ═══════════════════════════════════════════════════════════════════════ */

/* מעל האריחים (25) והטולבר (30) — הסרטון מכיל אותם ומצייר אותם בעצמו,
   אחרת היו שני עותקים על המסך, האמיתי והמצויר. */
#gameover-video {
  position: absolute; inset: 0; z-index: 70;
  width: 100%; height: 100%; object-fit: cover;
  display: none; background: #000;
}
#gameover-video.on { display: block; }

#gameover-card {
  position: absolute; inset: 0; z-index: 71; display: none;
  direction: ltr; text-align: center; background: #000;
  place-items: center; opacity: 0;
  transition: opacity .5s ease;
}
#gameover-card.on { display: grid; }
#gameover-card.in { opacity: 1; }

#gameover-card .go-line {
  font-family: "Press Start 2P", monospace;
  font-size: 1.5cqw; letter-spacing: .1em; color: #ff3b30;
  text-shadow: .18cqw .18cqw 0 #4a0906;
  opacity: 0; transform: translateY(30%);
  animation: go-line .5s var(--ez, cubic-bezier(.22,.9,.28,1)) .15s forwards;
}
#gameover-card .go-big {
  margin-top: 3.2cqw;
  font-family: "Press Start 2P", monospace;
  font-size: 7.4cqw; line-height: 1; color: #fff;
  text-shadow: 0 0 3cqw rgba(255,0,24,.55), .5cqw .5cqw 0 #7a0009, -.22cqw -.22cqw 0 #ff8f97;
  opacity: 0; transform: scale(2.6);
  animation: go-slam .42s cubic-bezier(.2,1.5,.4,1) .55s forwards;
}
#gameover-card .go-sub {
  margin-top: 3.4cqw;
  font-family: "Press Start 2P", monospace;
  font-size: .95cqw; letter-spacing: .12em; color: #8f96a5;
  opacity: 0;
  animation: go-fade .6s ease 1.35s forwards;
}
#gameover-card .go-sub b { color: #e8a33d; font-weight: 400; }
#gameover-card .go-btn {
  margin-top: 2.6cqw; cursor: pointer;
  font-family: "Press Start 2P", monospace; font-size: .85cqw;
  color: #14161b; background: #e8a33d; border: none;
  padding: 1.1cqw 2.2cqw; opacity: 0;
  animation: go-fade .5s ease 1.9s forwards;
}
#gameover-card .go-btn:hover { background: #f2b558; }
#gameover-card .go-btn:active { transform: translate(1px, 1px); }

@keyframes go-line { to { opacity: 1; transform: none } }
@keyframes go-slam { to { opacity: 1; transform: none } }
@keyframes go-fade { to { opacity: 1 } }

/* ═══════════════════════════════════════════════════════════════════════
   מסך ההריסות · תמונת האחות של מסך הפתיחה
   ---------------------------------------------------------------------
   מחליף את הכרטיס כשיש `LANDING_CONFIG.gameOver.ruin`. עולה על השחור-עם-
   הגחלים של סוף g3-legion, באותה שכבה של הכרטיס (71). המתכון המלא:
   landing/gen_ruin.py + הזיכרון gameover-ruin-screen.
   ═══════════════════════════════════════════════════════════════════════ */

#gameover-ruin {
  position: absolute; inset: 0; z-index: 71; display: none;
  background: #000; opacity: 0; transition: opacity .8s ease;
}
#gameover-ruin.on { display: block; }
#gameover-ruin.in { opacity: 1; }

#gameover-ruin .ruin-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---- הכפתור · הדבר היחיד השלם בעולם ההרוס ---- */
#btn-winn {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none; background: none; padding: 0;
  cursor: pointer; z-index: 4;
  -webkit-tap-highlight-color: transparent;
}

/* הרקע: הילה זהובה נושמת — הכפתור הוא מקור האור של הסצנה */
#btn-winn::before {
  content: "";
  position: absolute; inset: -46%; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 214, 80, .55) 0%,
    rgba(255, 190, 40, .22) 42%,
    rgba(255, 190, 40, 0) 70%);
  animation: winn-halo 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes winn-halo { 50% { transform: scale(1.22); opacity: .75; } }

#btn-winn img {
  position: relative; display: block;
  width: 100%; height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(255, 205, 60, .65));
  transition: transform .12s ease, filter .15s ease;
  animation: winn-breathe 2.4s ease-in-out infinite;
}
@keyframes winn-breathe {
  50% {
    filter: brightness(1.15) drop-shadow(0 0 26px rgba(255, 215, 80, .95));
    transform: scale(1.045);
  }
}

/* חוק ה-hover: מסגרת + רקע + תנועה */
#btn-winn:hover img,
#btn-winn:focus-visible img {
  animation: winn-bounce .45s ease infinite alternate;
  filter: brightness(1.22) drop-shadow(0 0 34px rgba(255, 225, 110, 1));
}
@keyframes winn-bounce {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.09) translateY(-4%); }
}
#btn-winn:hover::before,
#btn-winn:focus-visible::before { animation-duration: 1.1s; }
#btn-winn::after {
  content: "";
  position: absolute; inset: -7%; border-radius: 50%;
  border: .35cqw solid rgba(255, 225, 110, 0);
  transition: border-color .15s ease;
  pointer-events: none;
}
#btn-winn:hover::after,
#btn-winn:focus-visible::after { border-color: rgba(255, 225, 110, .9); }

#btn-winn:active img {
  transform: translateY(5%) scale(.96);
  filter: brightness(.95);
  animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ארבעת החיצים · מצביעים על הכפתור (11.08, בקשת עודד)
   ═══════════════════════════════════════════════════════════════════════
   מסך ההריסות שקט ושחור, והכפתור הוא הדבר היחיד שאפשר ללחוץ עליו — אבל
   הוא יושב בשקע בפינה הימנית ולא בטוח שהעין הולכת אליו. ארבעה חיצים
   זוהרים מארבעת הכיוונים לא משאירים ספק.

   ⚠ **משולשי CSS ולא פונט ולא נכס:** קריספיים בכל גודל, נטענים באפס, ו-
     `image-rendering` לא רלוונטי להם. הם מיושרים לכפתור לבד כי הם ילדיו.
   ⚠ **מונפשים ב-`transform` וב-`opacity` בלבד** — חוק ה-5fps של מחשב חלש
     (chosen-components/recording.md): אין `filter` מונפש ואין `box-shadow`
     מונפש. ה-`drop-shadow` כאן קבוע, על אלמנט זעיר, ולא מצויר מחדש. */
#btn-winn .arw {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
  border: 1.5cqw solid transparent;
  filter: drop-shadow(0 0 0.55cqw rgba(255, 205, 60, 0.95));
  animation: winn-arw 1.15s ease-in-out infinite;
}
/* למעלה — מצביע למטה */
#btn-winn .arw.up    { left: 50%; bottom: 102%; margin-left: -1.5cqw;
                       border-top-color: #ffd54a; border-bottom-width: 0; }
/* למטה — מצביע למעלה */
#btn-winn .arw.down  { left: 50%; top: 102%; margin-left: -1.5cqw;
                       border-bottom-color: #ffd54a; border-top-width: 0;
                       animation-delay: .16s; }
/* משמאל — מצביע ימינה */
#btn-winn .arw.left  { top: 50%; right: 102%; margin-top: -1.5cqw;
                       border-left-color: #ffd54a; border-right-width: 0;
                       animation-delay: .32s; }
/* מימין — מצביע שמאלה */
#btn-winn .arw.right { top: 50%; left: 102%; margin-top: -1.5cqw;
                       border-right-color: #ffd54a; border-left-width: 0;
                       animation-delay: .48s; }

/* כל חץ נדחף אל הכפתור וחוזר — התנועה היא מה שנקרא כ"לחץ כאן" */
@keyframes winn-arw { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#btn-winn .arw.up    { animation-name: winn-arw-y; }
#btn-winn .arw.down  { animation-name: winn-arw-y-rev; }
#btn-winn .arw.left  { animation-name: winn-arw-x; }
#btn-winn .arw.right { animation-name: winn-arw-x-rev; }
@keyframes winn-arw-y     { 0%,100% { transform: translateY(-.7cqw); opacity: .5 }
                            50%     { transform: translateY(.35cqw);  opacity: 1 } }
@keyframes winn-arw-y-rev { 0%,100% { transform: translateY(.7cqw);  opacity: .5 }
                            50%     { transform: translateY(-.35cqw); opacity: 1 } }
@keyframes winn-arw-x     { 0%,100% { transform: translateX(-.7cqw); opacity: .5 }
                            50%     { transform: translateX(.35cqw);  opacity: 1 } }
@keyframes winn-arw-x-rev { 0%,100% { transform: translateX(.7cqw);  opacity: .5 }
                            50%     { transform: translateX(-.35cqw); opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  #btn-winn .arw { animation: none; opacity: .9; }
}