/* ====================================================
   lobby.css — מסך לובי (overlay נפרד)
   ====================================================
   ארכיטקטורה:
   ● הלובי הוא שכבה נפרדת מעל הסליידר — לא חלק מ-screens[]
   ● מעבר אל/ממנו: opacity fade של 1.5s (לא slide)
   ● עיגול "אפשרות חזרה ללובי" — מופיע רק אחרי ביקור ראשון בחיים
   ==================================================== */

#lobby-overlay {
    position : absolute;
    inset    : 0;
    z-index  : 300;
    background-color    : #000;
    background-image    : url('assets/lobby-bg.webp');
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    opacity        : 1;
    pointer-events : auto;
    transition     : opacity 1.5s ease-in-out;
}

/* מצב "מוסתר" — שקוף לחלוטין, לא לוכד לחיצות */
#lobby-overlay.hidden {
    opacity        : 0;
    pointer-events : none;
}

/* קופסת הטקסט במרכז הלובי — מעל הדלתות הפתוחות שבתמונה */
#lobby-overlay .text-box {
    position   : absolute;
    top        : 50%;
    left       : 56%;            /* הוזז ימינה מ-50% — מסיר את הכיתוב מאזור פני הרב */
    transform  : translate(-50%, -50%);
    width      : 46%;
    max-height : 80%;
    padding    : 2.2% 2.8%;

    background      : rgba(0, 0, 0, 0.42);
    backdrop-filter : blur(6px);
    -webkit-backdrop-filter : blur(6px);
    border          : 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius   : 14px;
    box-shadow      : 0 10px 35px rgba(0, 0, 0, 0.55);

    direction  : rtl;
    text-align : center;
    color      : #ffffff;
}

/* כותרת ראשית — "תענית פרק ד' משנה א" */
#lobby-overlay .title {
    font-family : 'Heebo', 'Segoe UI', sans-serif;
    font-size   : clamp(0.9rem, 1.8vw, 1.9rem);
    font-weight : 700;
    line-height : 1.2;
    margin-bottom : 0.6%;
    text-shadow : 0 2px 10px rgba(0, 0, 0, 0.7);
    opacity     : 0.95;
}

/* תת-כותרת בולטת — "תעלומת בירכת כוהנים במנחה" */
#lobby-overlay .subtitle {
    font-family : 'Heebo', 'Segoe UI', sans-serif;
    font-size   : clamp(1.3rem, 2.7vw, 2.8rem);
    font-weight : 900;
    line-height : 1.2;
    margin-bottom : 4%;
    color : #ffd24a;
    text-shadow : 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 22px rgba(255, 200, 80, 0.35);
    letter-spacing : 0.5px;
}

/* טקסט המשנה */
#lobby-overlay .mishna {
    font-family : 'David Libre', 'Frank Ruhl Libre', 'David', 'Times New Roman', serif;
    font-size   : clamp(1rem, 2.1vw, 2.1rem);
    font-weight : 700;
    line-height : 1.6;
    text-shadow : 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* כפתור "בואו נתחיל" — ממוקם מתחת לקופסת הטקסט */
#lobby-overlay .start-btn {
    position : absolute;
    bottom   : 5%;
    left     : 50%;
    transform : translateX(-50%);

    padding : 0.9% 3.4%;
    background : linear-gradient(180deg, #ffd24a 0%, #ff9c2c 100%);
    border : 3px solid #ffffff;
    border-radius : 999px;
    color : #2a1f0d;
    font-family : 'Heebo', 'Segoe UI', sans-serif;
    font-size : clamp(0.95rem, 1.9vw, 1.7rem);
    font-weight : 800;
    cursor : pointer;
    outline : none;
    box-shadow : 0 6px 18px rgba(0, 0, 0, 0.55);
    transition : transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    user-select : none;
    white-space : nowrap;
}
#lobby-overlay .start-btn:hover {
    transform : translateX(-50%) translateY(-2px) scale(1.04);
    filter    : brightness(1.07);
    box-shadow : 0 10px 22px rgba(255, 180, 60, 0.65);
}
#lobby-overlay .start-btn:active {
    transform : translateX(-50%) translateY(1px) scale(0.98);
}

/* ====================================================
   כפתור "מסך מלא" — קטן בפינה שמאל-עליונה של הלובי.
   רקע חצי-שקוף שלא יסיח את הדעת מהמשנה.
   ==================================================== */
#lobby-overlay #lobby-fullscreen-btn {
    position : absolute;
    top      : 2.5%;
    left     : 2%;
    width    : 3.5%;
    aspect-ratio : 1 / 1;
    z-index  : 350;

    background : rgba(0, 0, 0, 0.35);
    border     : 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius : 50%;
    color      : #ffffff;
    font-size  : clamp(0.9rem, 1.6vw, 1.6rem);
    line-height : 1;
    padding    : 0;

    display         : flex;
    align-items     : center;
    justify-content : center;

    cursor : pointer;
    outline : none;
    user-select : none;
    transition : transform 0.18s ease, background 0.18s ease, filter 0.18s ease;
}
#lobby-overlay #lobby-fullscreen-btn:hover {
    transform : scale(1.1);
    background : rgba(0, 0, 0, 0.7);
    filter : brightness(1.15);
}

/* ====================================================
   עיגול "אפשרות חזרה ללובי" — צף בפינה ימנית־תחתונה
   רקע: חלון.png (ארון קודש מטושטש). עקרון חצי-שקוף נשמר.
   ==================================================== */
#return-to-lobby {
    position : absolute;
    right    : 2%;
    bottom   : 4%;
    width    : 1.375%;         /* קטן עוד ב-50% (היסטוריה: 11% → 5.5% → 2.75% → 1.375%) */
    aspect-ratio : 1 / 1;
    z-index  : 200;

    border-radius : 50%;
    background-image    : url('assets/return-circle.webp');
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;

    border : 2px solid rgba(255, 255, 255, 0.7);
    box-shadow : 0 4px 14px rgba(0, 0, 0, 0.3);

    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : center;

    color       : #ffffff;
    font-family : 'Heebo', 'Segoe UI', sans-serif;
    font-size   : clamp(0.55rem, 1vw, 0.95rem);
    font-weight : 700;
    line-height : 1.2;
    direction   : rtl;
    padding     : 6%;
    text-shadow : 0 1px 4px rgba(0, 0, 0, 0.85);

    cursor : pointer;
    user-select : none;

    /* אופסיטי כללי — שומר על "חצי-שקוף" כמו במצב הקודם */
    opacity        : 0;
    pointer-events : none;
    transition : opacity 0.4s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* מופיע רק כשעוברים מהלובי לראשונה (visited) ולא בתוך הלובי (active) */
body.lobby-visited:not(.lobby-active) #return-to-lobby {
    opacity        : 0.82;     /* ~חצי-שקוף, כמו ה-0.42 של הרקע הלבן הקודם */
    pointer-events : auto;
}

/* נסתר בזמן הפעלת וידאו — הוידאו חייב להיות שכבה עליונה על הכל */
body.video-active #return-to-lobby {
    opacity        : 0;
    pointer-events : none;
}

#return-to-lobby:hover {
    opacity    : 1;
    transform  : scale(1.06);
    box-shadow : 0 6px 18px rgba(0, 0, 0, 0.4);
    filter     : brightness(1.1);
}