/* ============================================================
   rtl-he.css — כל ההתאמות של הגרסה העברית, במקום אחד.
   נטען אחרי slides.css ו-balloon.css, ולכן גובר עליהם.
   כל בלוק מסומן במספר תיקון (T1, T2...) ומופיע באותו מספר בדוח.
   הכלל שהנחה את כל הקובץ: טקסט מתהפך — לוחות, ציורים וגרפים לא.
   ============================================================ */

/* ---- T1: גופן עברי בכתב-יד. הלטינית והספרות נשארות בגופן המקורי,
        כי הוא ראשון ברשימה ורק מה שחסר בו נופל לגופן העברי. ---- */
@font-face{
	font-family: 'GveretLevin';
	font-style: normal;
	src: url('GveretLevin.ttf') format('truetype');
}
body, .button #text, #preloader, #translations, .credits, .sandbox_pop_label{
	font-family: 'FuturaHandwritten', 'GveretLevin', 'Arial Hebrew', sans-serif;
}
/* הגופן העברי נמוך מהלטיני — מעט אוויר בין השורות מחזיר את המראה המקורי */
body{ line-height: 1.35em; }

/* ---- T2: בידוד-כיוון לביטויים מספריים בתוך משפט עברי.
        בלי זה "(ניקוד: -1 מול +3)" מתהפך ל-"(3+ מול 1-)". ---- */
.m{
	unicode-bidi: isolate;
	direction: ltr;
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

/* ---- T3: לוח התגמולים (הריבוע עם +2/-1) הוא טבלה מתמטית, לא טקסט.
        הוא נשאר שמאל-לימין במלואו, אחרת הסימנים והעמודות מתהפכים. ---- */
.payoffs, .payoffs *{
	direction: ltr;
}
/* התוויות "אתם משתפים / הם מרמים" סביב הלוח כן עבריות */
.payoffs .label{
	direction: rtl;
}

/* ---- T4: לוח התוצאות של המשחק החוזר — שני מספרים זה מול זה.
        חייב להישאר שמאל-לימין כדי ש"אתם" יישארו בצד שלכם. ---- */
#scoreboard{ direction: ltr; }

/* ---- T5: שורת הסבבים בטורניר היא רצף של סמלים בתוך משפט עברי,
        ולכן היא כן הולכת ימין-לשמאל: הסבב הראשון בימין, כמו הקריאה.
        לא נדרש כאן שינוי — השורה נשארת כדי שלא "יתקנו" את זה בעתיד. ---- */

/* ---- T6: כרטיס-דמות: הבובה בצד ימין והתיאור לשמאלה,
        כדי שהעין העברית תפגוש קודם את מי שמדבר. ---- */
.character #peep{
	left: auto;
	right: -10px;
}
.character #desc{
	right: auto;
	left: 0;
	text-align: right;
	direction: rtl;
}

/* ---- T7: כפתורים. הטקסט העברי ממורכז כמו במקור, אבל החץ ← שבסוף
        המשפט חייב כיוון עברי כדי לשבת בצד הנכון. ---- */
.button #text{
	direction: rtl;
	line-height: 1.1em;
}

/* ---- T8: מחוונים (סליידרים) ומספרי ארגז-החול.
        המחוון הוא סרגל כמותי: שמאל = מעט, ימין = הרבה. לא מתהפך. ---- */
.slider{ direction: ltr; }
.incdec > .incdec_num{ direction: ltr; }

/* ---- T9: שורת-שחקן בארגז-החול בנויה [סמל][שם ..... מספר] בתוך
        תיבה אחת. בכיוון עברי השם קפץ לימין ונדרס על המספר.
        השם נשאר צמוד-שמאל ליד הסמל, המספר בקצה הימני — והמילה
        העברית עצמה נקראת כרגיל. ---- */
.sandbox_pop_label{ text-align: left; direction: rtl; }
/* הסמל עצמו לא קיבל מיקום בקוד; בכיוון עברי הוא קפץ שמאלה ונחת על המספר */
.sandbox_pop_icon{ left: 0; }

/* ---- T9ב: לשוניות ארגז-החול (אוכלוסייה · תגמולים · חוקים).
        הציור של הלשוניות קבוע, ולכן הלשונית הראשונה יושבת בשמאל —
        הפוך מסדר-קריאה עברי. היפוך אופקי של רצועת-הלשוניות בלבד
        מעביר את "אוכלוסייה" לימין; הטקסט והעמוד שבתוכה מוחזרים
        בהיפוך שני, כך שהמחוונים ממשיכים לעבוד בכיוון הנכון. ---- */
#sandbox_tabs{ transform: scaleX(-1); }
#sandbox_tabs .hitbox, #sandbox_tabs .sandbox_page{ transform: scaleX(-1); }

/* ---- T10: שורת הקרדיט התחתונה — במקור רשימה באורך 960 פיקסל. ---- */
#translations{
	width: auto;
	max-width: 92%;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0;
	direction: rtl;
}

/* ---- T11: קרדיטים — שמות ולינקים לטיניים בתוך פסקה עברית. ---- */
.credits{ direction: rtl; }
.credits .big{ direction: ltr; unicode-bidi: isolate; }
.credits a{ text-decoration: none; }

/* ---- T12: המקור נועל את הדף על 960 פיקסל. במסך צר (טלפון)
        הבמה מוקטנת כמקשה אחת ע"י fit-screen.js, והשורה כאן
        רק מוודאת שההקטנה נעשית סביב מרכז הבמה. ---- */
#slideshow{
	transform-origin: 480px 270px;
}
#main{ overflow: hidden; }

/* ---- T13: נקודות הפרקים בתחתית — עשר נקודות של 40 פיקסל
        לא נכנסות למסך של 400. במסך צר הן מתכווצות. ---- */
@media (max-width: 620px){
	#select .dot{ width: 14px; height: 14px; margin: 0 2px; }
	#select{ padding-top: 12px; }
	/* במסך צר נשאר רק סמל-הרמקול, בלי המילה "פועל", וכפתורי-השיתוף יורדים —
	   אחרת הם נדרסים על נקודות-הפרקים */
	#sound{ width: 44px; transform: scale(0.8); transform-origin: left top; }
	#sound #sound_on, #sound #sound_off{ display: none !important; }
	.sharing{ display: none; }
	#translations{ font-size: 9px; line-height: 12px; max-width: 96%; }
}

/* ---- T14: הלוחות והסימולציות מצוירים על קנבס שיושב בתוך שכבת-טקסט.
        בכיוון עברי הקנבס "נדחף" ימינה כאילו היה מילה בשורה — והלוח
        כולו זז מהמקום. display:block מוציא אותו משורת-הטקסט ומחזיר
        כל ציור לקואורדינטה המקורית שלו. ---- */
#slideshow canvas{
	display: block;
}
/* אותו דבר לשכבות שמכילות ציור בלבד */
.object{ text-align: initial; }

/* ---- T15: שכבה שהקוד לא נתן לה מיקום מפורש "נדבקת" בכיוון עברי
        לקצה הימני של הבמה — וכל מה שבתוכה יוצא מהמסך. כך נעלם
        לוח-הבקרה של ארגז-החול (אוכלוסייה / תגמולים / חוקים).
        ברירת-מחדל של פינה שמאלית-עליונה מחזירה כל שכבה למקומה;
        שכבה שהקוד כן מיקם — המיקום שלו גובר. ---- */
#slideshow > .object{
	left: 0;
	top: 0;
}

/* ---- T16: בועת-הפרק שמעל נקודות-הניווט מציגה טקסט גולמי (CSS attr),
        ולכן היא חייבת להיות עברית-מימין-לשמאל ובלי תגיות בתוכה.
        שמות-הפרקים נכתבו בלי מספור בדיוק בגלל זה. ---- */
[data-balloon]:after{
	direction: rtl;
	font-family: 'FuturaHandwritten', 'GveretLevin', Arial, sans-serif;
}

/* ---- T17: קריאוּת. הגופן העברי נמוך מהלטיני, ובגדלים הקטנים של המקור
        (תיאורי-דמות, תוויות) הוא נעשה קשה לקריאה לתלמיד. העלאה קלה. ---- */
.character #desc{ font-size: 19px; }
.sandbox_pop_label{ font-size: 19px; }
#sandbox_tabs .hitbox{ font-size: 23px; }

/* ---- T18: אזור-הלחיצה של הכפתור (#hitbox). כמו ב-T15 — לקוד אין מיקום
        מפורש לשכבה, ובכיוון עברי היא "נדבקת" לקצה הימני: אזור-הלחיצה
        ישב כמעט כולו מחוץ לכפתור המצויר, ורק פס דק בקצהו השמאלי קלט
        לחיצות (אותר ואושר ע"י עומר, 14.9.2026). קיבוע מפורש לשמאל
        מחזיר את אזור-הלחיצה בדיוק למקום שבו הוא יושב במקור. ---- */
.button #hitbox{
	left: 0;
	right: auto;
}