@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

html, body {
    margin: 0; padding: 0; width: 100vw; height: 100dvh; overflow: hidden; position: fixed; 
    touch-action: none; user-select: none; -webkit-user-select: none; font-family: 'Rubik', sans-serif;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

h1 { color: #ff4757; font-size: clamp(1.8rem, 4vh, 3.5rem); text-shadow: 2px 2px 4px rgba(0,0,0,0.1); margin: 1vh 0; }
h2 { color: #2ed573; font-size: clamp(2rem, 4.5vh, 3rem); margin-bottom: 2vh; margin-top:0;}

.fullscreen-btn { position: fixed; top: 10px; left: 10px; background: #ffffff; color: #2f3542; border: 3px solid #dfe4ea; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5rem; cursor: pointer; z-index: 1000; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.game-container { background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); width: 95%; max-width: 900px; max-height: 85dvh; display: flex; flex-direction: column; padding: 2vh 3vw; box-sizing: border-box; overflow-y: auto; overscroll-behavior-y: contain; }
.screen { display: none; height: 100%; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; }
.screen.active { display: flex; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* סרגל עליון */
.stats-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #f1f2f6; padding: 1.5vh 2vw; border-radius: 15px; font-weight: bold; color: #2f3542; font-size: clamp(1rem, 2.5vh, 1.5rem); box-sizing: border-box; margin-bottom: 1vh;}
.stats-bar span { background: #dfe4ea; padding: 0.5vh 1vw; border-radius: 10px; display: flex; align-items: center; gap: 5px; }
.timer-display { background: #ffeaa7 !important; color: #d35400 !important; border: 2px solid #fdcb6e; font-family: monospace; font-size: 1.1em;}

/* אלבום ואלמנטים קיימים */
.sticker-album-inline { width: 100%; background: #f1f2f6; min-height: 7vh; border-radius: 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 2px dashed #ced4da; box-sizing: border-box; padding: 5px; margin-bottom: 2vh; }
.sticker { font-size: clamp(1.8rem, 4vh, 2.5rem); animation: popIn 0.5s; margin: 0 5px; }
.challenge-text { font-size: clamp(1.5rem, 3.5vh, 2.2rem); color: #2f3542; margin: 0; text-align: center; margin-bottom: 2vh; }
#equation-container { font-size: clamp(3rem, 8vh, 5rem); font-weight: bold; color: #2f3542; display: flex; justify-content: center; align-items: center; gap: 15px; direction: ltr; margin-bottom: 2vh; }
.math-target { background: #ffeaa7; padding: 0 15px; border-radius: 15px; border: 4px dashed #ff9f43; color: transparent; min-width: 50px; }
#word-icon-container { font-size: clamp(4rem, 12vh, 7rem); margin: 0; text-align: center; margin-bottom: 2vh; }

.board { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; margin-bottom: 2vh; }
.card { background: #7bed9f; color: #2f3542; font-size: clamp(3rem, 7vh, 5.5rem); font-weight: bold; width: clamp(80px, 14vh, 130px); height: clamp(80px, 14vh, 130px); display: flex; justify-content: center; align-items: center; border-radius: 20px; cursor: pointer; transition: transform 0.2s; box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.board.locked .card, .memory-board.locked { pointer-events: none; opacity: 0.9; }
.board:not(.locked) .card:hover { transform: scale(1.05); background: #2ed573; }
.card.wrong { background: #ff6b81; animation: shake 0.5s; }
.success-msg { color: #2ed573; font-size: clamp(1.5rem, 4vh, 2.5rem); font-weight: bold; display: none; text-align: center; margin-bottom: 2vh; }

/* כפתורים ותפריטים */
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-bottom: 1vh; margin-top: auto;}
.controls button, .action-btn { background: #1e90ff; color: white; border: none; padding: 1.5vh 3vw; font-size: clamp(1.2rem, 3vh, 1.8rem); border-radius: 15px; cursor: pointer; font-family: 'Rubik', sans-serif; font-weight: bold; }
.btn-secondary { background: #ffa502 !important; }
.btn-parents { background: #7bed9f !important; color: #2f3542 !important; font-size: clamp(1rem, 2.5vh, 1.3rem) !important;}
input[type="text"] { font-size: clamp(1.5rem, 3vh, 2rem); padding: 1.5vh 2vw; border: 3px solid #1e90ff; border-radius: 15px; width: 80%; max-width: 400px; text-align: center; margin-bottom: 2vh;}
.toggle-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 2vh; }
.toggle-btn { background: #f1f2f6; border: 3px solid transparent; padding: 1.5vh 2vw; font-size: clamp(1rem, 2.5vh, 1.5rem); border-radius: 15px; font-weight: bold; color: #2f3542; cursor: pointer; }
.toggle-btn.selected { border-color: #1e90ff; background: #eccc68; transform: scale(1.05); }

.menu-grid { display: flex; justify-content: center; gap: 2vw; flex-wrap: wrap; margin-bottom: 2vh;}
.menu-card { background: #f1f2f6; border: 4px solid #dfe4ea; border-radius: 20px; padding: 2vh 2vw; width: clamp(100px, 16vw, 160px); text-align: center; cursor: pointer;}
.menu-icon { font-size: clamp(2.5rem, 6vh, 4rem); margin-bottom: 1vh; }
.menu-card h3 { margin: 0; font-size: clamp(1rem, 2.5vh, 1.5rem); color: #2f3542; }

/* --- אלבום המדבקות הגדול --- */
.album-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; max-height: 50vh; overflow-y: auto; width: 100%; background: #f1f2f6; padding: 20px; border-radius: 20px; box-sizing: border-box; touch-action: pan-y;}
.album-item { background: white; padding: 15px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; font-size: 4rem; display: flex; justify-content: center; align-items: center;}
.album-count { position: absolute; top: -5px; right: -5px; background: #ff4757; color: white; border-radius: 50%; width: 25px; height: 25px; font-size: 1rem; font-weight: bold; display: flex; justify-content: center; align-items: center; border: 2px solid white;}

/* --- משחק זכרון (תלת מימד וגריד) --- */
.memory-board { display: grid; gap: 10px; justify-content: center; margin: 0 auto 2vh auto; width: 100%; }
.memory-board.level-easy { grid-template-columns: repeat(5, 1fr); }
.memory-board.level-medium { grid-template-columns: repeat(5, 1fr); }
.memory-board.level-hard { grid-template-columns: repeat(6, 1fr); }

.memory-card { 
    background-color: transparent; aspect-ratio: 1/1; 
    perspective: 1000px; cursor: pointer; 
    width: clamp(45px, 8vw, 100px); /* מתאים גם ל-30 כרטיסים במסך קטן */
}
.memory-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.memory-card.flipped .memory-card-inner { transform: rotateY(180deg); }
.memory-card-front, .memory-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: clamp(2rem, 5vw, 4rem); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.memory-card-front { background: #1e90ff; color: white; font-size: clamp(1.5rem, 4vw, 3rem); } /* החלק המוסתר בהתחלה (סמל גב) */
.memory-card-front::after { content: '❓'; }
.memory-card-back { background: #7bed9f; color: #2f3542; transform: rotateY(180deg); }

.floating-text {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(46, 213, 115, 0.95); color: white; padding: 15px 30px; border-radius: 20px;
    font-size: clamp(1.5rem, 4vh, 3rem); font-weight: bold; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    opacity: 0; pointer-events: none; z-index: 500; transition: all 0.3s ease;
}
.floating-text.show { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }

.filters-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: #f8f9fa; padding: 1vh; border-radius: 15px; margin-bottom: 2vh;}
.filter-dropdown { padding: 1vh 1vw; font-size: clamp(1rem, 2vh, 1.2rem); border-radius: 10px; border: 2px solid #1e90ff; font-family: 'Rubik', sans-serif; cursor: pointer; background: white;}
.leaderboard-tables, #mistakes-list { max-height: 40vh; overflow-y: auto; width: 100%; touch-action: pan-y; }
.lb-section { background: white; padding: 2vh; border-radius: 15px; border: 2px solid #dfe4ea; text-align: right; }
.score-row { display: flex; justify-content: space-between; font-size: clamp(1rem, 2.5vh, 1.5rem); padding: 1vh 0; border-bottom: 1px dashed #ced4da; align-items: center; }
.score-row:last-child { border-bottom: none; }
.game-badge { display: inline-block; font-size: 0.8rem; background: #dfe4ea; padding: 3px 6px; border-radius: 8px; margin-right: 5px; color: #555; margin-top: 5px;}
.time-badge { display: inline-block; font-size: 0.8rem; background: #ffeaa7; color: #d35400; padding: 3px 6px; border-radius: 8px; margin-right: 5px; font-weight: bold; border: 1px solid #fdcb6e;}
.mistake-row { display: flex; justify-content: space-between; background: #ffeaa7; padding: 1.5vh; border-radius: 10px; margin-bottom: 1vh; font-size: clamp(1.2rem, 3vh, 1.5rem); font-weight: bold; }

@keyframes popIn { 0% { transform: scale(0) rotate(-15deg); opacity: 0; } 50% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
/* --- עיצוב טבלת האלופים PRO --- */
.current-player-row { 
    background-color: #fffac8 !important; /* צהוב בהיר למנצח */
    border: 2px solid #f1c40f !important; 
    border-radius: 10px; 
    transform: scale(1.02); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    z-index: 10;
    position: relative;
}

.my-rank-row { 
    background: #2f3542; 
    color: white; 
    padding: 15px; 
    border-radius: 15px; 
    margin-top: 15px; 
    text-align: center; 
    font-size: 1.5rem; 
    font-weight: bold; 
    box-shadow: 0 -4px 10px rgba(0,0,0,0.2); 
    animation: popIn 0.5s;
}

/* תארי כבוד */
.title-badge { 
    display: inline-block; 
    font-size: 0.75rem; 
    padding: 3px 6px; 
    border-radius: 8px; 
    margin-right: 5px; 
    font-weight: bold; 
    margin-top: 5px;
}
.title-badge.perfect { background: #ff9ff3; color: #833471; border: 1px solid #f368e0; }
.title-badge.fast { background: #48dbfb; color: #0abde3; border: 1px solid #00d2d3; }
/* קלפים מלבניים למילים ארוכות בכיתה א' */
.word-card { 
    width: clamp(140px, 22vw, 250px) !important; 
    height: clamp(70px, 12vh, 100px) !important; 
    padding: 0 20px; 
    font-size: clamp(2rem, 5vh, 4rem) !important; 
}/* עיצוב מיוחד לכרטיסיות החרוזים (אייקון + טקסט) */
.rhyme-card {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: clamp(100px, 18vw, 150px) !important;
    height: clamp(100px, 18vw, 150px) !important;
    padding: 10px; line-height: 1.1;
}
.rhyme-icon { font-size: clamp(2.5rem, 6vh, 4rem); margin-bottom: 5px; }
.rhyme-text { font-size: clamp(1.2rem, 3vh, 2rem); font-weight: bold; color: #2f3542; }

#rhyme-target-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 2vh; }
/* --- תגית גרסת האפליקציה --- */
.version-tag {
    position: fixed;
    bottom: 5px;
    left: 10px;
    font-size: 0.8rem;
    color: #a4b0be; /* צבע אפור עדין שלא מושך תשומת לב */
    font-weight: bold;
    z-index: 1000;
    pointer-events: none; /* הילדים יכולים ללחוץ "דרכה" אם יש משהו מתחת */
}
/* --- עיצוב לוח הכפל הויזואלי --- */
.mult-grid-container {
    display: grid;
    gap: 2px;
    background: #dfe4ea;
    border: 3px solid #2f3542;
    border-radius: 10px;
    padding: 5px;
    margin: 0 auto 2vh auto;
    direction: ltr; /* חובה כדי שהמספרים ירוצו משמאל לימין */
    width: fit-content;
    max-width: 100%;
}

.mult-cell {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.9rem, 2vh, 1.5rem);
    font-weight: bold;
    color: #2f3542;
    width: clamp(22px, 6vw, 40px);
    height: clamp(22px, 6vw, 40px);
    border-radius: 4px;
}

.mult-header { background: #ff9f43; color: white; }
.mult-header-active { background: #e15f41; transform: scale(1.1); z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.mult-highlight { background: #ffeaa7; } /* צבע השביל שמוביל לתשובה */

.mult-target-cell {
    background: #ff4757;
    color: white;
    font-size: clamp(1.2rem, 3vh, 2rem);
    animation: pulse 1s infinite;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
/* --- עיצוב נחש האותיות 🐍 --- */
#snake-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: clamp(250px, 80vw, 350px);
    height: clamp(250px, 80vw, 350px);
    background: #dfe4ea;
    border: 4px solid #2f3542;
    border-radius: 10px;
    margin-bottom: 20px;
    direction: ltr; /* כדי שהתנועה תהיה הגיונית לחצים */
}

.snake-cell {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: clamp(1rem, 3vw, 1.5rem); font-weight: bold;
    border-radius: 4px; border: 1px solid rgba(0,0,0,0.05);
}

.snake-body { background-color: #2ed573; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); }
.snake-head { background-color: #1e90ff; font-size: clamp(0.8rem, 2.5vw, 1.2rem); border-radius: 8px; }

.snake-food {
    background-color: #ff4757; color: white;
    border-radius: 50%; box-shadow: 0 0 10px rgba(255, 71, 87, 0.6);
    animation: bounce 1s infinite;
}

/* שלט נונייט (D-Pad) לטאבלט */
.snake-controls { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.d-pad-middle { display: flex; gap: 40px; }
.d-pad {
    background: #2f3542; color: white; border: none; border-radius: 15px;
    font-size: 2rem; width: 60px; height: 60px;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 0 #1e272e; cursor: pointer;
}
.d-pad:active { transform: translateY(4px); box-shadow: none; }
/* עיצוב מדבקת הפתעה במשחק הנחש */
.snake-sticker {
    background-color: #ffd32a; 
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 211, 42, 0.9);
    animation: pulse 1.5s infinite;
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%;
}
/* --- עיצוב כללי - רקע שמיים כחול-כוכבי --- */
body {
    /* ... הגדרות קודמות ... */
    background-image: linear-gradient(to top, #1e90ff, #001f3f); /* גראדיאנט שמיים */
    background-size: cover;
    background-position: center;
    position: relative;
    color: white; /* טקסט לבן על רקע כהה */
}
/* נוסיף אפקט כוכבים עדין בעזרת שכבה נוספת */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    opacity: 0.6; z-index: -1;
}

/* --- פרוגרס בר גרפי מעוצב --- */
.progress-bar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15); /* רקע חצי שקוף */
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin: 10px 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
}

.progress-bar-fill {
    width: 0%; /* יתעדכן ב-JS */
    height: 12px;
    background-image: linear-gradient(to right, #4cd137, #44bd32); /* גראדיאנט ירוק */
    border-radius: 6px;
    transition: width 0.3s ease; /* אפקט תנועה */
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.3);
}

/* --- כפתורי תשובה מעוצבים --- */
.card {
    /* ... הגדרות קודמות ... */
    background: #ff7f50; /* צבע אפרסק יפה */
    color: white;
    border: none;
    border-bottom: 6px solid #e056fd; /* גבול תחתון תלת-ממדי */
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.card:active {
    transform: translateY(4px); /* אפקט לחיצה */
    border-bottom-width: 2px;
    box-shadow: none;
}
/* עדכון צבע כפתורים שונים לפי צבע הגבול שלהם */
.card.correct { background: #2ed573; border-bottom-color: #26af61; }
.card.wrong { background: #ff4757; border-bottom-color: #d63031; }

/* --- חלון הוראות קופץ (Popup) מעוצב --- */
.instruction-popup {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* רקע כהה חצי שקוף */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.instruction-popup.hidden { display: none; }

.popup-content {
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 25px;
    border: 5px solid #ff7f50; /* גבול צבעוני עבה */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    text-align: center;
    color: #2f3542; /* טקסט כהה בפנים */
    position: relative;
    overflow: hidden;
}
/* נוסיף רקע עננים עדין בתוך החלון */
.popup-content::after {
    content: "";
    position: absolute;
    top: -50px; left: -50px; width: 200px; height: 100px;
    background: rgba(162, 155, 254, 0.1);
    border-radius: 50px;
    filter: blur(20px);
}

.popup-icon { font-size: 5rem; margin-bottom: 15px; }

.close-popup {
    position: absolute;
    top: 15px; right: 15px;
    background: none; border: none;
    font-size: 1.5rem; color: #ff4757; cursor: pointer;
}

.popup-title { font-size: 2rem; color: #ff7f50; margin-bottom: 15px; }
.popup-text { font-size: 1.3rem; margin-bottom: 25px; }

.start-btn {
    background: #4cd137;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 15px;
    border-bottom: 5px solid #44bd32;
    cursor: pointer;
}
.start-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
/* --- עיצוב טיימר --- */
.timer-container {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ff9f43; /* צבע כתום בהיר */
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 3px 0 #e15f41; /* תלת מימד קטן */
    direction: ltr; /* שומר שהזמן ייראה כמו 00:00 ולא הפוך */
}

.timer-icon {
    font-size: 1.2rem;
}
/* --- הבר העליון (Top Bar) המסודר --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 25px;
    width: 100%;
    max-width: 800px; /* שומר שלא יימתח מדי במסכים גדולים */
    box-sizing: border-box;
    color: #2f3542;
}

/* כפתור הבית 🏠 */
.home-btn {
    background: #ff4757;
    color: white;
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #d63031;
    transition: transform 0.1s;
    display: flex; justify-content: center; align-items: center;
}
.home-btn:active { transform: translateY(4px); box-shadow: none; }

/* אזור האמצע (הוראה ופרוגרס) */
.progress-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
}

.game-instruction {
    margin: 0 0 8px 0;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #1e90ff;
}

/* --- פרוגרס בר נקי ומתוקן --- */
.progress-bar-container {
    width: 100%;
    max-width: 250px;
    background: #dfe4ea;
    border-radius: 20px;
    height: 24px;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    display: block; /* מונע מהפלקס למרכז את הבר הירוק */
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to left, #2ed573, #7bed9f);
    border-radius: 20px;
    transition: width 0.3s ease;
    
    /* התיקון הקריטי: מצמיד את המילוי לצד ימין! */
    position: absolute;
    top: 0;
    right: 0; 
    z-index: 1;
}

.progress-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1rem; font-weight: bold; color: #2f3542;
    z-index: 2; /* מוודא שהטקסט יושב מעל הצבע הירוק */
    
    /* התיקון השני: מסדר את המספרים שיראו 3 / 10 ולא הפוך */
    direction: ltr; 
}

/* תגיות סטטיסטיקה (ניקוד וזמן) בצד שמאל */
.stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-badge, .timer-badge {
    background: #ffa502;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 3px 0 #e67e22;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    direction: ltr; /* שומר על סדר המספרים */
    min-width: 80px;
}
.timer-badge { background: #3742fa; box-shadow: 0 3px 0 #5352ed; }

/* --- כפתור שמע שוב הכחול והיפה --- */
.beautiful-blue-btn {
    background: #1e90ff;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 25px;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0 5px 0 #0984e3;
    cursor: pointer;
    margin-top: 25px;
    transition: transform 0.1s, background 0.2s;
}
.beautiful-blue-btn:hover { background: #3742fa; }
.beautiful-blue-btn:active {
    transform: translateY(5px);
    box-shadow: none;
}
/* --- אזור מגש המדבקות בתחתית המסך --- */
.stickers-tray-wrapper {
    margin-top: 25px;
    background: rgba(255, 255, 255, 0.85);
    border: 3px solid #7bed9f;
    border-radius: 20px;
    padding: 10px 20px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    overflow-x: auto; /* מאפשר לגלול אם יש הרבה מדבקות */
}

.stickers-tray-title {
    font-weight: bold;
    color: #2ed573;
    font-size: 1.2rem;
    white-space: nowrap;
}

.stickers-container {
    display: flex;
    gap: 10px;
}

.sticker {
    font-size: 2rem;
    background: white;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: flex; justify-content: center; align-items: center;
    width: 50px; height: 50px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- אנימציית חלון קבלת מדבקה --- */
.sticker-reward-popup {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex; justify-content: center; align-items: center;
}

.sticker-reward-popup.hidden { display: none; }

.sticker-burst {
    text-align: center;
    animation: zoomInBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.burst-text {
    color: #ffd32a;
    font-size: 3.5rem;
    font-weight: bold;
    text-shadow: 0 5px 15px rgba(0,0,0,0.6);
    margin-bottom: 20px;
}

.rewarded-sticker {
    font-size: 8rem;
    background: radial-gradient(circle, #fff 0%, #f1f2f6 100%);
    border-radius: 50%;
    display: inline-block;
    padding: 25px;
    box-shadow: 0 0 50px rgba(255, 211, 42, 0.8);
    animation: spinAndPulse 2s infinite linear;
}

@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes zoomInBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes spinAndPulse {
    0% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(5deg); box-shadow: 0 0 80px rgba(255, 211, 42, 1); }
    100% { transform: scale(1) rotate(-5deg); }
}
/* --- תיקון צבע הטקסט בטבלת האלופים --- */
.score-row {
    color: #2f3542 !important; /* מכריח את הטקסט בשורה להיות כהה */
}

.lb-name {
    color: #2f3542 !important; /* צבע כהה לשם הילד */
    font-weight: bold;
}

.lb-score {
    color: #2f3542 !important; /* צבע כהה לניקוד */
    font-weight: bold;
}

.my-rank-row {
    color: white !important; /* שורת "המיקום שלך" בדרך כלל כהה, אז שם נשאיר טקסט לבן */
}