#rls-app,#rls-home{
    max-width:500px;
    margin:auto;
    text-align:center;
    padding:20px;
    direction:rtl;
    font-family:'Heebo', sans-serif;
}

#rls-app{
    padding-bottom:20px;
}

#rls-home{
    background:#8dedfa;
    min-height:100vh;
}

/* רקע מלא בלי מסגרת */
#rls-app .level-selection-screen{
    background:#8dedfa;
    min-height:100vh;
    margin:-20px; /* מבטל את ה-padding של rls-app */
    padding:20px;
}

/* שומר על רוחב מקסימלי */
#rls-app .level-content{
    max-width:500px;
    margin:auto;
}

button{
    width:100%;
    padding:18px;
    margin:10px 0;
    font-size:22px;
    border-radius:14px;
    border:none;
    background:#2c7be5;
    color:white;
}

button.correct{
    background:#2ecc71;
}

button.wrong{
    background:#e74c3c;
}

.letter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.word-big{
    font-size:48px;
    margin:40px 0;
}

canvas{
    border:2px solid #333;
    border-radius:12px;
    touch-action:none;
}

.floating-exit, #lettersHomeBtn{
position:fixed;
bottom:15px;
left:5px; /* אם את רוצה בצד ימין תשני ל right */
width:40px;
height:40px;
border-radius:50%;
border:none;
background:#53585e;
color:white;
font-size:28px;
cursor:pointer;
z-index:9999;
transition:0.2s;
  display:flex;              /* 👈 מוסיפים */
  align-items:center;        /* ממרכז אנכית */
  justify-content:center;    /* ממרכז אופקית */

}

#lettersHomeBtn:hover{
transform:scale(1.1);
background:#53585e;
}

.floating-exit,
.floating-exit:visited,
.floating-exit:focus,
.floating-exit:active{
    background:#53585e;
    color:white;
}

#matchOptions, #options{
  display:flex;
  justify-content:space-between; /* או center */
  gap:2px !important;  /* 👈 הרווח ביניהם */
}

.option-btn{
  width:32%;
  padding:26px;
  font-size:60px;
  font-weight:500;
  min-height:180px;
  background:#E6E6E6;
  border:none !important;
  color:black;
  border-radius:10px;
}

.option-btn:hover{
  background:#E6E6E6;
color:black;
}

.option-btn4{
  width:32%;
  padding:26px;
  font-size:60px;
  font-weight:500;
  min-height:120px;
  background:#E6E6E6;
  border:none !important;
  color:black;
  border-radius:10px;
}

.option-btn4:hover{
  background:#E6E6E6;
color:black;
}


.word-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin:30px 0;
}

.word-box{
padding:20px;
font-size:28px;
border-radius:14px;
background:#eee;
}


.quiz-option-btn{
    display:block;
    width:80%;
    margin:12px auto;
    padding:10px;
    font-size:32px;
    font-weight:400;
    border-radius:10px;
    border:none;
    background:#E6E6E6;
    cursor:pointer;
    transition:0.2s;
    color:black;
}

.quiz-option-btn:hover{
    background:#D0D0D0;
    transform:scale(1.02);
}



.next-word-btn:hover{
    background:#27ae60;
}

.letters-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:7px;
max-width:600px;
}

.letter-box{
background:#fff;
border:none !important;
border-radius:7px;
font-size:42px;
font-weight:700;
padding:10px 0;
cursor:pointer;
text-align:center;
transition:0.2s;
}

.rls-title{
text-align:center;
font-size:120px;
font-weight:700;
margin-top:20px;
margin-bottom:-20px;
color:white;
}

.level-grid{
display:flex;
flex-direction:column;
gap:10px;
max-width:400px;
margin:40px auto;
}

.level-box{
background:#f4f4f4;
padding:20px;
font-size:26px;
text-align:center;
cursor:pointer;
border-radius:10px;
transition:0.2s;
border:none !important;
font-weight:700;
}

.level-box:hover{
background:#e0e0e0;
transform:scale(1.03);
}

/* לא התחילו */
.not-started{
background:#ffffff;
border:2px solid #ccc;
}

/* התחילו */
.in-progress{
background:#e0e0e0;
}

/* הושלם */
.completed{
background:#2D9DAD;
color:white;
}

/* גלילה רוחבית */
.draw-scroll{
    display:flex;
    gap:25px;
    overflow-x:auto;
    padding:10px 20px 20px;
    scroll-snap-type:x mandatory;
}

/* כרטיס קנבס */
.draw-card{
    position:relative;
    flex:0 0 auto;
    scroll-snap-align:center;
}

/* הקנבס עצמו */
.draw-card canvas{
    border:2px solid #333;
    border-radius:16px;
    background:white;
    touch-action:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* כפתור ניקוי בתוך הקנבס */
.clear-btn{
    position:absolute;
    bottom:10px;
    left:10px;
    background:#ffffffdd;
    border:none;
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
    font-size:18px;
    transition:0.2s;
}

.clear-btn:hover{
    background:#f2f2f2;
}

/* סליידר */
.draw-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    gap:20px;
    padding:20px 20px 80px 20px;
    background:#E6E6E6;
    margin:0 -20px;
    -ms-overflow-style:none;
    scrollbar-width:none;
}

/* כל שקופית */
.draw-slide{
    flex:0 0 85%;
    scroll-snap-align:center;
    scroll-snap-stop:always;   /* זה מה שחסר */
    position:relative;
}

/* הקנבס */
.draw-slide canvas{
    width:100%;
    height:300px !important;
    border-radius:20px;
    border:1px solid #333;
    background:white;
    touch-action:none;
}

/* כפתור איקס */
.clear-x{
    position:absolute;
    bottom:12px;
    left:6px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:#E6E6E6;
    color:black;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* אפקט לחיצה */
.clear-x:active{
    transform:scale(0.9);
}

.clear-x,
.clear-x:visited,
.clear-x:focus,
.clear-x:active{
    background:#E6E6E6;
    color:black;
}

/* להעלים פס גלילה מכוער */
.draw-slider::-webkit-scrollbar{
    display:none;
}





.progress-wrapper{
    width:100%;
    margin:20px auto;
    background:#eee;
    height:14px;
    border-radius:10px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    background:#0e7c7b;
    border-radius:10px;
    transition:width 0.3s ease;
}

/* פס רקע קבוע בתחתית */
.stage-bar-wrapper{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:10px;
    background:#e6e6e6;
    z-index:999;
}

/* החלק המתמלא */
.stage-bar-fill{
    height:100%;
    background:#0e7c7b;
    transition:width 0.4s ease;
}

#playBtn{
    width:100%;
    height:80px;
    background:#0e7c7b;
    border:none !important;
    color:white !important;
    margin-top:50px;
    margin-bottom:50px;
    border-radius:10px;
}

#playBtn svg{
  width:60%;
  height:60%;
}

.letter2{
    width:100%;
    height:80px;
    background:#0e7c7b;
    color:white;
    border-radius:10px;
    display:flex;              /* 👈 */
    align-items:center;        /* ממרכז אנכית */
    justify-content:center;    /* ממרכז אופקית */

}

.btnFinal, .next2{
    width:100px;
    height:50px;
    background:#0E7C7B;
    color:white;
    font-size:28px;
    font-weight:600;
    border-radius:10px;
    border:none !important;
    line-height:15px!important; /* 👈 במקום 50px */
    text-align:center;
}

.btnFinal:hover{
    background:#0E7C7B !important;
}

.next-word-btn{
    width:100px;
    height:50px;
    background:#0E7C7B;
    color:white;
    font-size:28px;
    font-weight:600;
    border-radius:10px;
    border:none !important;
    display:flex;
    align-items:center;      /* מרכז אנכית */
    justify-content:center;  /* מרכז אופקית */
    margin:20px auto;   /* מרכז את הכפתור */
}

.div3{
    width:100%;
    height:300px;
    background:white;
    color:black;
    border-radius:10px;
    border: 1px solid #E6E6E6;
    display:flex;              /* 👈 */
    align-items:center;        /* ממרכז אנכית */
    justify-content:center;    /* ממרכז אופקית */
}

.text3{
    font-size:24px;
    color:#0E7C7B;
}

.word-line{
    font-size:60px;
    font-weight:700;
    margin:20px 20px 0px 20px;
    line-height: 1;
}

.empty-box{
    display:inline-block;
    width:40px;
    height:60px;
    border:2px solid black;
    vertical-align:middle;
    margin: 0 1px; /* רווח מימין ומשמאל */
}

.quiz-question{
    font-size:32px;
    line-height:34px;
    font-weight:700;
}

.finalBox{
    width:100%;
    height:80vh;
    background:white;
    border-radius:10px;
    border:none;

    display:flex;
    flex-direction:column;   /* 👈 זה מה שחסר */
    align-items:center;      /* מרכז אופקית */
    justify-content:center;  /* מרכז אנכית */
    gap:20px;                /* רווח בין הכותרת לכפתור */
}

.final{
    color:#0E7C7B;
    font-size:42px;
}

.finalScore{
font-size:80px;
font-weight:900;
color:#0E7C7B;
margin:10px 0 20px;
}

.summary{
font-size:18px;
line-height:1.8;
margin-bottom:20px;
}

canvas[style*="position: fixed"]{
border:none !important;
outline:none !important;
box-shadow:none !important;
}

.missing-highlight{
    color: red;
    font-weight: 700;
}