/* ============================================================
   games_site — Core Shell  ·  Redesign v3
   Mobile-First · RTL · שלד בלבד (בלי סגנונות משחקים)
   ------------------------------------------------------------
   כל השפה החזותית מרוכזת כאן כטוקנים. 16 משחקי הזירה בנויים
   כולם מעל var(--radius) / var(--shadow-*) / var(--surface) /
   .gs-btn, ולכן שדרוג הטוקנים כאן מרים את כל המשחקים בלי
   לגעת ב-16 קבצי CSS נפרדים. זה גם מה שמונע סחיפה חזותית
   בין משחק למשחק בהמשך.
   ============================================================ */

:root{
  /* ============================================================
     היפוך ההיררכיה — "Arcade Academy" v4  ·  2026-08-11
     ------------------------------------------------------------
     עד עכשיו נייבי ‎#1e3a8a שלט והסגול/אינדיגו היו משניים. נייבי
     קורא כ"בית ספר": זו בדיוק התחושה שמפסידה ילד בן עשר בשנייה
     הראשונה. מכאן ואילך סגול→אינדיגו הם המותג, ונייבי יורד
     לתפקיד של כרום מבני.

     ‏--navy נשאר כשם ומצביע כעת על אינדיגו-עמוק. הסיבה מעשית:
     16 הפניות ב-11 קבצי game.css נפרדים משתמשות בו לצ'יפ
     "רמה נבחרת", ושינוי שם היה דורש לגעת בכל אחד מהם. שינוי
     הערך מרים את כולם בבת אחת — וזה בדיוק מה שמערכת הטוקנים
     הזו נבנתה בשבילו.
     ============================================================ */

  /* ---------- מותג: סגול → אינדיגו ---------- */
  --brand:#7c3aed;  --brand-d:#6d28d9;  --brand-l:#8b5cf6;
  --purple:#7c3aed; --purple-l:#a78bfa;
  --indigo:#4f46e5; --indigo-l:#6366f1; --indigo-d:#4338ca;

  /* ---------- כרום מבני (לשעבר "נייבי") ---------- */
  --navy:#4338ca;  --navy-d:#3730a3;  --navy-l:#6366f1;

  /* ---------- ציאן: התקדמות ותשובה נכונה ----------
     ירוק עשה כאן שתי עבודות — "נכון" וגם "התקדמות" — ולכן אף
     אחת מהן לא נקראה מיד. ציאן לוקח את ההתקדמות.

     ⚠️ הגוונים הבהירים (--cyan, --cyan-l) הם למילויים, פסים
     וקווים בלבד. טקסט לבן עליהם נותן 1.8:1. לכל משטח שנושא
     טקסט לבן יש להשתמש ב---grad-cyan, שנבנה מהגוונים הכהים. */
  --cyan:#06b6d4; --cyan-l:#22d3ee; --cyan-d:#0891b2;

  /* ---------- זהב: תגמול בלבד ----------
     מטבעות, "נכבש", רצף, Pro ושער הפרימיום. זהב על כפתור רגיל
     או על פריט *נעול* שוחק בדיוק את המשמעות הזו, ולכן הועבר
     משם ל---warn ול---brand. */
  --gold:#f59e0b;  --gold-d:#b45309;

  /* ---------- כתום: "דורש תשומת לב" ----------
     חומר שהתיישן ודורש חזרה. קודם הוצג בזהב — כלומר בדיוק
     כמו הישג — וזה הפוך מהמסר. כהה ורווי יותר מזהב כדי
     שהשניים לא יתבלבלו במבט חטוף. */
  --warn:#ea580c;  --warn-d:#c2410c;

  --green:#16a34a; --green-d:#15803d;
  --red:#dc2626;
  /* ‏--danger שימש ב-5 מקומות כ-var(--danger,#dc2626) ומעולם לא
     הוצהר — כלומר כל אחד מהם נפל בשקט ל-fallback. אותה תקלה
     בדיוק הייתה ב---brand. עכשיו שניהם אמיתיים וניתנים לערכה. */
  --danger:var(--red);

  /* ---------- משטחים — מ-tokens.generated.css ---------- */
  --bg:         var(--bc-bg);
  --surface:    var(--bc-surface);
  --surface-2:  var(--bc-surface-2);
  --surface-3:  var(--bc-surface-3);
  --text:       var(--bc-ink);
  --text-dim:   var(--bc-ink-dim);
  --border:     var(--bc-line);
  --border-soft:var(--bc-line-soft);

  /* ---------- דיו מבטא על משטח ----------
     טקסט צבעוני (מטבעות, נכון/שגוי, מחירים) חייב להתהפך יחד
     עם הערכה. אלה טוקנים ולא override נקודתי ב-@media, כי
     ערבוב של שתי המכניקות מתפצל ברגע ש-[data-theme] לא תואם
     להעדפת המערכת — ואז מתקבל זהב כהה על רקע כהה. */
  --gold-ink:   var(--bc-reward-ink);
  --green-ink:  var(--bc-success-ink);
  --red-ink:    var(--bc-danger-ink);
  --cyan-ink:   var(--bc-accent-ink);
  --warn-ink:   var(--bc-warn-ink);
  --brand-ink:  var(--bc-brand-ink);
  --purple-ink: var(--bc-brand-ink);
  /* לאינדיגו אין תפקיד קנוני — הוא גוון-משנה של המותג בלבד */
  --indigo-ink: #4338ca;

  /* ---------- גרדיאנטים ----------
     כל עצירה בגרדיאנט שנושא טקסט לבן נבדקה מול 4.5:1. העצירה
     הבהירה ביותר היא זו שקובעת, ולכן --grad-primary מתחיל
     ב-‎#7c3aed (5.70:1) ולא ב-‎#8b5cf6 שנותן 4.23:1 ונכשל. */
  --grad-primary:linear-gradient(135deg,#7c3aed 0%,#6d28d9 50%,#5b21b6 100%);
  --grad-indigo: linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);
  --grad-gold:   linear-gradient(135deg,#b45309 0%,#9c4508 55%,#8a3d07 100%);
  --grad-green:  linear-gradient(135deg,#15803d 0%,#136c35 55%,#116434 100%);
  --grad-purple: linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%);
  --grad-red:    linear-gradient(135deg,#f87171 0%,#dc2626 100%);
  /* גוונים כהים בכוונה — זו הגרסה שמותר להניח עליה טקסט לבן */
  --grad-cyan:   linear-gradient(135deg,#0e7490 0%,#155e75 100%);
  --grad-warn:   linear-gradient(135deg,#c2410c 0%,#9a3412 100%);
  /* מילוי בלבד (פסי התקדמות) — בלי טקסט מעליו */
  --fill-cyan:   linear-gradient(90deg,#22d3ee 0%,#06b6d4 100%);
  /* ברק עדין שעובר על כפתורי הפעולה */
  --grad-sheen:  linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);

  /* ---------- זוהר פינתי לאריחי הדשבורד ---------- */
  --glow-primary:radial-gradient(circle at 100% 0%,rgba(124,58,237,.26),transparent 62%);
  --glow-gold:   radial-gradient(circle at 100% 0%,rgba(245,158,11,.24),transparent 62%);
  --glow-green:  radial-gradient(circle at 100% 0%,rgba(34,197,94,.22),transparent 62%);
  --glow-purple: radial-gradient(circle at 100% 0%,rgba(167,139,250,.24),transparent 62%);
  --glow-cyan:   radial-gradient(circle at 100% 0%,rgba(34,211,238,.24),transparent 62%);

  /* ---------- פינות ---------- */
  --radius-sm:14px;
  --radius:22px;          /* ברירת המחדל של כרטיסים — הועלתה מ-16 */
  --radius-lg:26px;
  --radius-pill:100px;

  /* ---------- צללים רכים ורב-שכבתיים ---------- */
  --shadow:      0 1px 2px rgba(13,21,38,.04), 0 4px 14px rgba(13,21,38,.06);
  --shadow-md:   0 2px 6px rgba(13,21,38,.05), 0 12px 30px rgba(13,21,38,.10);
  --shadow-lg:   0 4px 12px rgba(13,21,38,.07), 0 24px 56px rgba(13,21,38,.16);
  --shadow-glow: 0 8px 26px rgba(124,58,237,.34);
  --shadow-gold: 0 8px 26px rgba(245,158,11,.32);
  --shadow-cyan: 0 8px 26px rgba(6,182,212,.30);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.65);

  --ring:0 0 0 3px rgba(124,58,237,.38);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  --topbar-h:58px;
  --tabbar-h:64px;
  --ad-h:0px;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --theme-fade:.32s;
}

/* ============================================================
   מצב כהה
   ------------------------------------------------------------
   מוגדר פעמיים בכוונה: prefers-color-scheme הוא ברירת המחדל
   של המערכת, ו-[data-theme] גובר עליו כדי ש-toggle ידני
   (אם ייווסף) יעבוד לשני הכיוונים בלי !important.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --indigo-ink:#c7d2fe;

    --shadow:      0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.36);
    --shadow-md:   0 2px 6px rgba(0,0,0,.34), 0 12px 30px rgba(0,0,0,.46);
    --shadow-lg:   0 4px 12px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.58);
    --shadow-glow: 0 8px 30px rgba(139,92,246,.42);
    --shadow-gold: 0 8px 30px rgba(245,158,11,.28);
    --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
  }
}

:root[data-theme="dark"]{
  --indigo-ink:#c7d2fe;
  --shadow:      0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.36);
  --shadow-md:   0 2px 6px rgba(0,0,0,.34), 0 12px 30px rgba(0,0,0,.46);
  --shadow-lg:   0 4px 12px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.58);
  --shadow-glow: 0 8px 30px rgba(139,92,246,.42);
  --shadow-gold: 0 8px 30px rgba(245,158,11,.28);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
}

:root[data-theme="light"]{
  --indigo-ink:#4338ca;
  --shadow:      0 1px 2px rgba(13,21,38,.04), 0 4px 14px rgba(13,21,38,.06);
  --shadow-md:   0 2px 6px rgba(13,21,38,.05), 0 12px 30px rgba(13,21,38,.10);
  --shadow-lg:   0 4px 12px rgba(13,21,38,.07), 0 24px 56px rgba(13,21,38,.16);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.65);
}

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:'Rubik','Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.55;
  letter-spacing:-.01em;
  font-feature-settings:"tnum" 0;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ------------------------------------------------------------
   הערה על "מעבר חלק" בהחלפת ערכת נושא
   ------------------------------------------------------------
   ניסינו transition על background-color/color של המשטחים.
   זה נשבר: כשערך ה-property מגיע מ-var() ו-custom property
   משתנה, Chrome לא מפעיל את המעבר ומשאיר את הצבע הישן תקוע
   (נבדק — הרקע נשאר כהה גם אחרי שה-token התחלף ללבן; רק
   reflow כפוי שחרר אותו). מכיוון שהחלפת הערכה כאן מגיעה
   ממערכת ההפעלה ואין toggle בתוך האפליקציה, אין JS שיכפה
   reflow — ולכן אין מעבר על טוקנים. כל שאר האנימציות
   (transform/opacity/box-shadow) פועלות על ערכים אמיתיים
   וממשיכות לעבוד כרגיל.

   *** כלל לכל מי שממשיך מכאן ***
   אין לשים color / background / background-color / border-color
   ב-transition כשהערך מגיע מטוקן. זה לא רק "בלי אנימציה" —
   זה מקפיא את הערך הישן. כך נשבר .qz-opt.is-correct: אחרי
   מעבר למצב כהה הוא נשאר עם הירוק הכהה של המצב הבהיר על גבי
   משטח כהה (ניגודיות 2.68 במקום 16.03). מותר להנפיש
   transform / opacity / box-shadow / filter בלבד.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   כפתורים לא יורשים color מה-body — סגנון סוכן המשתמש קובע
   buttontext (שחור). במצב בהיר זה נראה תקין ולכן זה עבר מתחת
   לרדאר, אבל במצב כהה כל כרטיס שבנוי כ-<button> (סרגל
   המקצועות, כרטיסי הכניסה, רשימות הנושאים) הציג טקסט שחור על
   משטח כהה. ברירת המחדל כאן מתקנת את זה במקור אחד.
   ------------------------------------------------------------ */
button{ color:var(--text); }

.hidden{ display:none !important; }
body.no-scroll{ overflow:hidden; }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }

/* ============================================================
   מסך טעינה — ממותג
   ============================================================ */
.gs-splash{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 18% 12%,rgba(99,102,241,.42),transparent 52%),
    radial-gradient(circle at 84% 22%,rgba(14,165,233,.30),transparent 50%),
    radial-gradient(circle at 50% 105%,rgba(245,158,11,.22),transparent 55%),
    linear-gradient(165deg,#16255a 0%,#0d1631 60%,#070c1c 100%);
  color:#fff; transition:opacity .4s var(--ease), visibility .4s;
}
.gs-splash.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.gs-splash-inner{ text-align:center; padding:20px; }

.gs-splash-icon{
  position:relative;
  width:92px; height:92px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; border-radius:28px;
  background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  animation:gsFloat 3.2s var(--ease) infinite;
}
/* הילה נושמת מאחורי הלוגו */
.gs-splash-icon::after{
  content:""; position:absolute; inset:-14px; border-radius:36px;
  background:radial-gradient(circle,rgba(99,102,241,.55),transparent 68%);
  z-index:-1; animation:gsPulse 2.6s var(--ease) infinite;
}
@keyframes gsFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes gsPulse{ 0%,100%{ opacity:.5; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.08); } }

.gs-splash-inner h1{
  margin:0 0 24px; font-size:25px; font-weight:800; letter-spacing:-.5px;
  background:linear-gradient(120deg,#fff 20%,#c7d2fe 50%,#fff 80%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:gsShine 3s linear infinite;
}
@keyframes gsShine{ to{ background-position:-200% center; } }

/* טבעת כפולה במקום ספינר יחיד */
.gs-splash-spinner{
  position:relative; width:38px; height:38px; margin:0 auto; border-radius:50%;
  border:3px solid rgba(255,255,255,.14); border-top-color:#fff;
  animation:gsSpin .9s linear infinite;
}
.gs-splash-spinner::after{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:2px solid transparent; border-bottom-color:rgba(167,139,250,.9);
  animation:gsSpin 1.4s linear infinite reverse;
}
.gs-splash-msg{
  margin-top:16px; font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.78); min-height:20px;
}
@keyframes gsSpin{ to{ transform:rotate(360deg); } }

/* ============================================================
   שגיאה חוסמת
   ============================================================ */
.gs-fatal{
  position:fixed; inset:0; z-index:9100;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:var(--bg);
}
.gs-fatal-card{
  max-width:380px; width:100%; text-align:center;
  padding:34px 24px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.gs-fatal-icon{ font-size:48px; margin-bottom:10px; }
.gs-fatal-card h2{ margin:0 0 8px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
.gs-fatal-card p{ margin:0 0 18px; font-size:14.5px; color:var(--text-dim); line-height:1.6; }

/* ============================================================
   סרגל עליון
   ============================================================ */
.gs-topbar{
  position:fixed; inset-inline:0; top:0; z-index:70;
  height:calc(var(--safe-top) + var(--topbar-h));
  padding:var(--safe-top) 14px 0 14px;
  display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 1px 0 rgba(13,21,38,.03);
  transition:transform .3s var(--ease-out);
}
body.gs-immersive .gs-topbar{ transform:translateY(-100%); }

.gs-back{
  width:38px; height:38px; flex:0 0 38px;
  display:none; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:13px;
  font-size:24px; line-height:1; color:var(--text); cursor:pointer;
  font-family:inherit; padding:0 0 3px 0;
  transition:transform .14s var(--ease);
}
.gs-back:active{ transform:scale(.92); background:var(--surface-3); }
.gs-back.is-on{ display:flex; }

.gs-title{
  flex:1; min-width:0;
  font-size:17px; font-weight:800; letter-spacing:-.45px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.gs-wallet{ display:flex; align-items:center; gap:8px; }
.gs-coin{
  display:flex; align-items:center; gap:5px;
  padding:8px 13px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,rgba(251,191,36,.20),rgba(180,83,9,.10));
  border:1px solid rgba(245,158,11,.38);
  box-shadow:0 2px 10px rgba(245,158,11,.16);
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--gold-ink);
  cursor:pointer; white-space:nowrap;
  transition:transform .14s var(--ease);
}
.gs-coin:active{ transform:scale(.94); }
.gs-coin b{ font-size:14.5px; font-weight:800; }
.gs-coin.is-bump{ animation:gsBump .5s var(--ease-out); }
@keyframes gsBump{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(1.22); } }

.gs-theme{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--border); cursor:pointer;
  box-shadow:var(--shadow); padding:0;
  transition:transform .14s var(--ease);
}
.gs-theme:active{ transform:scale(.92); }

.gs-avatar{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; border-radius:50%;
  background:var(--surface-2); border:1.5px solid var(--border); cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .14s var(--ease);
}
.gs-avatar:active{ transform:scale(.92); }

/* ============================================================
   כפתור המבורגר
   ============================================================ */
.gs-burger{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:13px;
  cursor:pointer; padding:0;
  box-shadow:var(--shadow);
  transition:transform .14s var(--ease);
}
.gs-burger:active{ transform:scale(.92); }
.gs-burger span{
  display:block; width:17px; height:2px; border-radius:2px;
  background:var(--text);
  /* בלי transition במכוון. נמדד: כל מעבר על הקווים האלה נתקע
     על identity ולא הגיע לסיבוב — גם עם class וגם עם
     [aria-expanded], וגם עם easing ליטרלי במקום טוקן; רק
     transition:none החיל את הסיבוב. אנימציה שנתקעת גרועה
     מקפיצה: האייקון היה נשאר שלושה קווים בזמן שהתפריט פתוח,
     כלומר מציג מצב הפוך מהמציאות. */
}
/* שלושת הקווים הופכים ל-X כשהתפריט פתוח.
   המצב נקבע ב-class ולא ב-[aria-expanded]: מעבר שמופעל
   משינוי תכונה על ההורה לא נורה ב-Chrome, והקווים נתקעו
   על identity (נמדד: matrix(1,0,0,1,0,0) גם 600ms אחרי
   הפתיחה, ועם transition:none הסיבוב עבד מיד). aria נשאר
   לנגישות; ה-class אחראי לוויזואל. */
.gs-burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.gs-burger.is-open span:nth-child(2){ opacity:0; }
.gs-burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   תפריט משתמש
   ============================================================ */
.gs-menu-scrim{
  position:fixed; inset:0; z-index:74;
  background:rgba(8,13,24,.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:gsScrimIn .2s var(--ease);
}
@keyframes gsScrimIn{ from{ opacity:0; } to{ opacity:1; } }

/* ------------------------------------------------------------
   מודל ממורכז, לא תפריט נפתח.
   מיושר לאידיום של האנדרואיד (#hamburgerMenuModal): כרטיס
   ממורכז מעל רקע כהה, כפתורים מלאי-רוחב עם פינות מעוגלות,
   טקסט ממורכז ואייקון בצד.
   ------------------------------------------------------------ */
.gs-menu{
  position:fixed; inset:0; z-index:75;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);
  pointer-events:none;
}
.gs-menu-card{
  pointer-events:auto; position:relative;
  width:100%; max-width:360px;
  max-height:100%;
  display:flex; flex-direction:column;
  padding:22px 18px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:22px; box-shadow:0 20px 55px rgba(0,0,0,.45);
  animation:gsPopIn .22s var(--ease-out);
}

.gs-menu-x{
  position:absolute; inset-block-start:12px; inset-inline-end:14px;
  width:32px; height:32px; border-radius:50%; z-index:2;
  background:var(--surface-2); border:1px solid var(--border-soft);
  color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer;
}

/* הכותרת קבועה; רק הרשימה נגללת */
.gs-menu-head{
  flex:0 0 auto; padding:2px 0 14px; text-align:center;
  border-bottom:1px solid var(--border-soft); margin-bottom:14px;
}
.gs-menu-avatar{
  width:56px; height:56px; margin:0 auto 8px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  background:linear-gradient(140deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border);
}
.gs-menu-name{ font-weight:800; font-size:16px; }
.gs-menu-badges{
  display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; justify-content:center;
}

.gs-menu-list{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:9px;
  padding-inline-end:2px;
}

.gs-menu-sec{
  padding:8px 2px 0;
  font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--text-dim); text-align:start;
}
.gs-menu-sec:empty{ padding:0; }

/* שלוש עמודות: צד ריק · טקסט ממורכז · אייקון.
   העמודה הריקה היא מה שממרכז את הטקסט באמת. */
.gs-menu-item{
  display:grid; grid-template-columns:34px 1fr 34px; align-items:center;
  width:100%; padding:14px 12px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  border-radius:14px;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--text);
  cursor:pointer;
  transition:transform .16s var(--ease), filter .16s var(--ease);
}
.gs-menu-close{
  flex:0 0 auto; margin-top:14px; padding:13px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:14px; color:var(--text-dim);
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.gs-menu-item:active{ transform:scale(.965); filter:brightness(.95); }

.gs-mi-ic{ font-size:21px; text-align:center; line-height:1; }
.gs-mi-tx{
  min-width:0; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gs-mi-side{ display:flex; align-items:center; justify-content:center; }

/* מספר הטעויות שממתינות לחזרה — הסיבה היחידה להיכנס עכשיו */
.gs-mi-badge{
  min-width:20px; padding:2px 7px; border-radius:999px;
  background:var(--danger,#dc2626); color:#fff;
  font-size:11px; font-weight:800; text-align:center;
}
/* מסלול היחידות שנבחר — מידע, לא פעולה */
.gs-mi-meta{ font-size:11px; font-weight:700; color:var(--text-dim); }

/* ------------------------------------------------------------
   קידוד הצבעים — אותם גוונים של #hamburgerMenuModal באנדרואיד
   ------------------------------------------------------------ */
.gs-menu-item.is-nav{
  background:var(--grad-indigo);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(79,70,229,.28);
}
.gs-menu-item.is-pro{
  background:linear-gradient(135deg,#f59e0b,#b45309);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(245,158,11,.3);
}
.gs-menu-item.is-teacher{
  background:linear-gradient(135deg,#0d9488,#134e4a);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(13,148,136,.3);
}
.gs-menu-item.is-admin{
  background:linear-gradient(135deg,#dc2626,#7f1d1d);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(220,38,38,.3);
}
.gs-menu-item.is-danger{
  background:linear-gradient(135deg,#ef4444,#991b1b);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(239,68,68,.28);
}

/* על רקע צבעוני התגית והמטא צריכים ניגוד משלהם */
.gs-menu-item.is-nav .gs-mi-badge{ background:#fff; color:var(--indigo-d); }
.gs-menu-item.is-nav .gs-mi-meta,
.gs-menu-item.is-pro .gs-mi-meta{ color:rgba(255,255,255,.85); }

.gs-chip{
  padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; line-height:1.6;
  background:var(--surface-3); color:var(--text-dim); border:1px solid var(--border-soft);
}
.gs-chip.is-gold{ background:linear-gradient(135deg,#f59e0b,#b45309); color:#fff; border-color:transparent; }
.gs-chip.is-warn{ background:#fef3c7; color:#92400e; border-color:transparent; }
.gs-chip.is-kid { background:#dbeafe; color:#1e40af; border-color:transparent; }
.gs-chip.is-coin{ background:var(--surface-2); color:var(--text); }
.gs-chip.is-mute{ opacity:.85; }

/* ============================================================
   חלון גיוס הבודקים — חד-פעמי
   ------------------------------------------------------------
   z-index גבוה מהשער ומהתפריט: זה החלון היחיד שאמור לחסום
   הכל בכניסה הראשונה, ומיד אחריה הוא נעלם לתמיד.
   ============================================================ */
#gsTester{ z-index:120; }

.gs-tester{ text-align:center; }
.gs-tester-ic{
  font-size:52px; line-height:1; margin-bottom:6px;
  animation:gsGiftPop .5s var(--ease-out);
}
@keyframes gsGiftPop{
  0%  { transform:scale(.6) rotate(-8deg); opacity:0; }
  100%{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .gs-tester-ic{ animation:none; } }

.gs-tester h2{
  margin:0 0 10px; font-size:20px; font-weight:800;
  letter-spacing:-.3px; line-height:1.35;
}
/* white-space רגיל כאן בכוונה: הטקסט מגיע כ-HTML עם <br>,
   ו-pre-line של .gs-modal-card p היה מוסיף שורות ריקות כפולות. */
.gs-tester-body{
  margin:0 0 4px; font-size:14px; line-height:1.75;
  color:var(--text-dim); white-space:normal;
}
.gs-tester .gs-btn-gold{ width:100%; margin-top:14px; }
.gs-tester .gs-link{ display:block; width:100%; margin-top:10px; }

/* ============================================================
   לוח ההגדרות
   ============================================================ */
.gs-set{ text-align:start; }
.gs-set-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 2px; border-bottom:1px solid var(--border-soft);
  font-size:14.5px; cursor:pointer;
}
.gs-set-row.is-static{ cursor:default; }
.gs-set-lbl{ font-weight:600; }
.gs-set-val{ font-size:12.5px; font-weight:700; color:var(--text-dim); direction:ltr; }

/* מתג במקום תיבת סימון — אותה סמנטיקה, יעד מגע גדול יותר */
.gs-switch{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:46px; height:27px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border);
  position:relative; cursor:pointer; transition:background .18s var(--ease);
}
.gs-switch::after{
  content:''; position:absolute; top:2px; inset-inline-start:2px;
  width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s var(--ease);
}
.gs-switch:checked{ background:var(--brand,#4f46e5); border-color:transparent; }
.gs-switch:checked::after{ transform:translateX(-19px); }
.gs-switch:focus-visible{ outline:2px solid var(--brand,#4f46e5); outline-offset:2px; }

.gs-select{
  flex:0 0 auto; padding:8px 12px; border-radius:10px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); font-family:inherit; font-size:13.5px; font-weight:600;
}

/* ---------- שדות פרופיל בהגדרות ---------- */
.gs-input{
  flex:0 1 auto; min-width:0; max-width:170px;
  padding:8px 12px; border-radius:10px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border);
  font-family:inherit; font-size:14px; font-weight:600; text-align:start;
  /* 16px במובייל מונע מהדפדפן להתקרב אוטומטית בפוקוס */
  outline:none;
}
@media (max-width:480px){ .gs-input{ font-size:16px; } }
.gs-input:focus{ border-color:var(--brand,#4f46e5); }

/* בורר מקטע — שתי אפשרויות בלבד, select היה כבד מדי לזה */
.gs-seg{
  flex:0 0 auto; display:flex; gap:0;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.gs-seg-btn{
  padding:8px 16px; border:none; background:var(--surface-2);
  color:var(--text-dim); font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; transition:background .16s var(--ease), color .16s var(--ease);
}
.gs-seg-btn + .gs-seg-btn{ border-inline-start:1px solid var(--border); }
.gs-seg-btn.is-on{ background:var(--brand,#4f46e5); color:#fff; }
.gs-seg-btn:focus-visible{ outline:2px solid var(--brand,#4f46e5); outline-offset:-2px; }

.gs-set-note{
  min-height:17px; padding:5px 2px 0;
  font-size:12px; font-weight:700; color:var(--green-ink);
}
.gs-set-note.is-err{ color:var(--red-ink); }

/* ---------- סקר התפקיד ---------- */
.gs-role-card{ max-width:360px; }
.gs-role-sub{ margin:6px 0 18px; font-size:13.5px; color:var(--text-dim); line-height:1.5; }
.gs-role-opts{ display:flex; flex-direction:column; gap:9px; }
.gs-role-opt{
  margin-top:0; justify-content:flex-start; gap:11px;
  padding:14px 16px; font-size:15px;
}
.gs-role-ic{ font-size:20px; line-height:1; }
.gs-role-err{
  margin-top:13px; padding:10px 12px; border-radius:10px;
  background:color-mix(in srgb, var(--red-ink) 14%, transparent);
  color:var(--red-ink); font-size:13px; font-weight:700; line-height:1.45;
}

/* ============================================================
   במת המסכים
   ============================================================ */
.gs-stage{
  position:relative;
  min-height:100dvh;
  padding-top:calc(var(--safe-top) + var(--topbar-h));
  padding-bottom:calc(var(--safe-bottom) + var(--tabbar-h) + var(--ad-h) + 14px);
}
body.gs-immersive .gs-stage{ padding-top:var(--safe-top); padding-bottom:var(--safe-bottom); }

.gs-screen{
  max-width:640px; margin:0 auto; padding:16px;
  animation:gsIn .3s var(--ease-out);
}
.gs-screen.is-leaving{ animation:gsOut .18s var(--ease) forwards; }

@keyframes gsIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
@keyframes gsOut{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes gsFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes gsPopIn{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }
/* אייקון מסך הסיום בכל 16 המשחקים — נכנס בקפיצה אחת */
@keyframes gsPopScale{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }

.gs-screen.is-game{ max-width:none; padding:0; }

/* ---------- שלד טעינה ממותג ---------- */
.gs-skeleton{ padding:16px; }
.gs-sk-line,.gs-sk-card{
  position:relative; overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
}
.gs-sk-line::after,.gs-sk-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  transform:translateX(-100%);
  animation:gsSweep 1.4s var(--ease) infinite;
}
.gs-sk-line{ height:16px; border-radius:9px; margin-bottom:12px; }
.gs-sk-line.w70{ width:70%; } .gs-sk-line.w45{ width:45%; }
.gs-sk-card{ height:104px; border-radius:var(--radius); margin-bottom:14px; }
@keyframes gsSweep{ to{ transform:translateX(100%); } }
/* RTL — הסריקה נעה בכיוון הקריאה */
[dir="rtl"] .gs-sk-line::after,[dir="rtl"] .gs-sk-card::after{ animation-name:gsSweepRtl; }
@keyframes gsSweepRtl{ from{ transform:translateX(100%); } to{ transform:translateX(-100%); } }

/* ---------- טעינת משחק ---------- */
.gs-loading{
  min-height:60dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center;
}
.gs-loading-ring{
  position:relative; width:52px; height:52px; border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--navy-l);
  animation:gsSpin .85s linear infinite;
}
.gs-loading-ring::after{
  content:""; position:absolute; inset:7px; border-radius:50%;
  border:2px solid transparent; border-bottom-color:var(--purple);
  animation:gsSpin 1.3s linear infinite reverse;
}
.gs-loading-tx{ font-size:13.5px; font-weight:600; color:var(--text-dim); }

.gs-empty{ text-align:center; padding:48px 20px; }
.gs-empty-ic{ font-size:46px; margin-bottom:12px; }
.gs-empty h3{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-.3px; }
.gs-empty p{ margin:0 0 16px; font-size:14px; color:var(--text-dim); line-height:1.6; }

/* ============================================================
   ניווט תחתון
   ============================================================ */
.gs-tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  display:flex;
  height:calc(var(--safe-bottom) + var(--tabbar-h));
  padding-bottom:var(--safe-bottom);
  margin-bottom:var(--ad-h);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--border-soft);
  transition:transform .3s var(--ease-out);
}
body.gs-immersive .gs-tabbar{ transform:translateY(140%); }

.gs-tab{
  position:relative;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:inherit; color:var(--text-dim);
  transition:none;
}
/* נקודת מצב פעיל מעל האייקון */
.gs-tab::before{
  content:""; position:absolute; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:var(--indigo-l); opacity:0; transform:scale(.4);
  transition:opacity .22s var(--ease), transform .22s var(--ease-out);
}
.gs-tab-ic{ font-size:21px; line-height:1; transition:transform .24s var(--ease-out); }
.gs-tab-tx{ font-size:10.5px; font-weight:600; }
.gs-tab.is-active{ color:var(--indigo-l); }
.gs-tab.is-active::before{ opacity:1; transform:scale(1); }
.gs-tab.is-active .gs-tab-ic{ transform:translateY(-2px) scale(1.14); }
.gs-tab.is-active .gs-tab-tx{ font-weight:800; }

/* ============================================================
   AdSense
   ============================================================ */
.gs-ad-anchor{
  position:fixed; inset-inline:0; bottom:0; z-index:65;
  display:none;
  padding:3px 8px calc(var(--safe-bottom) + 3px);
  background:color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
}
.gs-ad-x{
  position:absolute; top:-11px; inset-inline-end:8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-dim); font-size:14px; line-height:1; cursor:pointer;
}
body[data-ads="on"] .gs-ad-anchor{ display:block; }
body[data-ads="off"] .gs-ad-anchor,
body[data-ads="pending"] .gs-ad-anchor{ display:none !important; }
body.gs-immersive .gs-ad-anchor{ display:none !important; }

/* ============================================================
   כפתורים
   ============================================================ */
.gs-btn{
  position:relative; overflow:hidden;
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px; margin-top:12px;
  border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.2px;
  cursor:pointer;
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
/* ברק שעובר פעם אחת בלחיצה — משוב במקום סתם קישוט */
.gs-btn::after{
  content:""; position:absolute; inset:0;
  background:var(--grad-sheen); transform:translateX(-120%);
}
.gs-btn:active::after{ animation:gsSheen .55s var(--ease); }
@keyframes gsSheen{ to{ transform:translateX(120%); } }

.gs-btn:active{ transform:scale(.97); }
.gs-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.gs-btn:disabled::after{ display:none; }

.gs-btn-primary{ background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-glow); }
.gs-btn-gold{    background:var(--grad-gold);    color:#fff; box-shadow:var(--shadow-gold); }
.gs-btn-navy{    background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-glow); }
.gs-btn-ghost{
  background:var(--surface-2); color:var(--text);
  border:1.5px solid var(--border); box-shadow:none;
}
.gs-btn-primary:active,.gs-btn-gold:active,.gs-btn-navy:active{ box-shadow:var(--shadow); }

.gs-link{
  display:block; width:100%; margin-top:14px;
  background:none; border:none; color:var(--text-dim);
  font-family:inherit; font-size:13.5px; font-weight:500;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

.gs-chip{
  display:inline-block;
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
}
.gs-chip.pro{
  background:var(--grad-gold); color:#fff; border-color:transparent;
  box-shadow:0 2px 10px rgba(245,158,11,.34);
}

/* ============================================================
   מודלים
   ============================================================ */
.gs-modal{
  position:fixed; inset:0; z-index:9200;
  display:flex; align-items:flex-end; justify-content:center;
}
.gs-modal-bg{
  position:absolute; inset:0;
  background:rgba(8,13,24,.66); backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0; transition:opacity .26s var(--ease);
}
.gs-modal.is-open .gs-modal-bg{ opacity:1; }

.gs-modal-card{
  position:relative; z-index:1;
  width:100%; max-width:460px; max-height:92dvh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-bottom:none;
  border-radius:30px 30px 0 0;
  padding:28px 22px calc(var(--safe-bottom) + 22px);
  box-shadow:var(--shadow-lg);
  text-align:center;
  transform:translateY(100%); transition:transform .34s var(--ease-out);
  -webkit-overflow-scrolling:touch;
}
.gs-modal.is-open .gs-modal-card{ transform:translateY(0); }
/* ידית גרירה — רמז ויזואלי שהיריעה נסגרת */
.gs-modal-card::before{
  content:""; position:sticky; top:0; display:block;
  width:42px; height:4px; margin:-12px auto 14px;
  border-radius:100px; background:var(--border);
}

.gs-modal-x{
  position:absolute; top:14px; inset-inline-start:16px;
  width:31px; height:31px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); font-size:18px; line-height:1; cursor:pointer;
}
.gs-modal-icon{ font-size:44px; margin-bottom:8px; }
.gs-modal-card h2{ margin:0 0 8px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
/* pre-line: גוף המודל נכתב כטקסט עם \n (התקדמות, טבלת מובילים,
   רשימת כיתות). בלי זה כל רשימה הייתה נמעכת לשורה אחת. */
.gs-modal-card p{ margin:0 0 6px; font-size:14.5px; color:var(--text-dim); line-height:1.6; white-space:pre-line; }
.gs-modal-btns{ margin-top:10px; }

/* ---------- שער הפתיחה ---------- */
.gs-gate-icon{
  width:66px; height:66px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center; font-size:31px;
  border-radius:22px;
  background:linear-gradient(140deg,rgba(251,191,36,.22),rgba(180,83,9,.10));
  border:1px solid rgba(245,158,11,.38);
  box-shadow:var(--shadow-gold);
}
.gs-gate-sub{ margin-bottom:18px !important; }
.gs-gate-sub b{ color:var(--text); }

.gs-gate-opt{
  text-align:start; padding:17px 16px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.gs-gate-pro{
  background:linear-gradient(150deg,rgba(99,102,241,.10),rgba(47,79,181,.03));
  border-color:rgba(99,102,241,.34);
  box-shadow:var(--shadow-md);
}
.gs-gate-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gs-gate-t{ font-weight:800; font-size:15px; }
.gs-gate-bal{ font-size:12.5px; color:var(--text-dim); }
.gs-gate-bal b{ color:var(--gold-ink); font-size:14px; }
.gs-gate-badge{
  font-size:10px; font-weight:800; padding:4px 9px; border-radius:var(--radius-pill);
  background:var(--grad-indigo); color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.4);
}
.gs-gate-bar{ height:8px; margin:11px 0 8px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; }
.gs-gate-fill{
  height:100%; width:0%; border-radius:var(--radius-pill);
  background:var(--grad-gold);
  transition:width .55s var(--ease-out);
}
.gs-gate-fill.is-full{ background:var(--grad-green); }
.gs-gate-cost{ font-size:12.5px; color:var(--text-dim); }
.gs-gate-cost b{ color:var(--text); }
.gs-gate-hint{
  margin-top:10px; padding:10px 12px; border-radius:13px;
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.25);
  font-size:12.5px; color:var(--gold-ink); line-height:1.5;
}
.gs-gate-perks{ margin:11px 0 0; padding:0; list-style:none; }
.gs-gate-perks li{
  position:relative; padding-inline-start:20px; margin-bottom:6px;
  font-size:13px; color:var(--text-dim);
}
.gs-gate-perks li::before{
  content:"✓"; position:absolute; inset-inline-start:0;
  color:var(--green); font-weight:800; font-size:12.5px;
}
.gs-gate-or{
  display:flex; align-items:center; gap:11px; margin:16px 0;
  color:var(--text-dim); font-size:12px; font-weight:600;
}
.gs-gate-or::before,.gs-gate-or::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ============================================================
   טוסט
   ============================================================ */
.gs-toast{
  position:fixed; inset-inline:0;
  bottom:calc(var(--safe-bottom) + var(--tabbar-h) + var(--ad-h) + 18px);
  z-index:9500; margin-inline:auto; width:max-content; max-width:86vw;
  padding:12px 20px; border-radius:var(--radius-pill);
  background:rgba(13,21,38,.95); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  font-size:14px; font-weight:500; box-shadow:var(--shadow-lg);
  animation:gsFadeUp .26s var(--ease-out);
}
body.gs-immersive .gs-toast{ bottom:calc(var(--safe-bottom) + 22px); }

/* ============================================================
   מצב הדגמה — תג מתמיד
   ------------------------------------------------------------
   יושב מעל סרגל הלשוניות ומתחת לטוסט. לא חוסם דבר, לא לוכד
   לחיצות מחוץ לעצמו, ונעלם ברגע שהמשתמש יוצא מהדגמה.
   ============================================================ */
.demo-badge{
  position:fixed; inset-inline:0;
  bottom:calc(var(--safe-bottom) + var(--tabbar-h) + var(--ad-h) + 10px);
  z-index:9400;
  margin-inline:auto; width:max-content; max-width:92vw;
  display:flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,rgba(180,83,9,.96),rgba(138,61,7,.96));
  border:1px solid rgba(251,191,36,.42);
  box-shadow:var(--shadow-lg);
  color:#fff; font-family:inherit; font-size:12.5px; font-weight:600;
  text-align:start; cursor:pointer;
  animation:gsFadeUp .3s var(--ease-out);
  transition:transform .14s var(--ease);
}
.demo-badge:active{ transform:scale(.97); }
.demo-badge-ic{ font-size:15px; flex:0 0 auto; }
.demo-badge-tx{ line-height:1.45; }

body.gs-immersive .demo-badge{ bottom:calc(var(--safe-bottom) + 14px); }

@media (min-width:768px){
  .demo-badge{ bottom:calc(var(--safe-bottom) + 18px); }
}

/* ============================================================
   AdGuard — שכבת חוסם פרסומות
   ------------------------------------------------------------
   מעל כל שאר ה-z: מודל (9200), טוסט (9500), splash (9000).
   ============================================================ */
.ag-wall{
  position:fixed; inset:0; z-index:9800;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at 18% 12%,rgba(99,102,241,.34),transparent 52%),
    radial-gradient(circle at 84% 22%,rgba(220,38,38,.20),transparent 50%),
    linear-gradient(165deg,rgba(13,21,38,.94) 0%,rgba(8,13,24,.97) 100%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:gsFadeUp .3s var(--ease-out);
  overscroll-behavior:contain;
}

/* התוכן שמאחור מטושטש ולא נגיש — לא מספיק להסתיר ויזואלית */
body.ag-blocked .gs-stage,
body.ag-blocked .gs-topbar,
body.ag-blocked .gs-tabbar,
body.ag-blocked .gs-ad-anchor{
  filter:blur(7px);
  pointer-events:none;
  user-select:none; -webkit-user-select:none;
}
body.ag-blocked{ overflow:hidden; }

.ag-card{
  width:100%; max-width:420px; text-align:center;
  padding:34px 26px calc(var(--safe-bottom) + 28px);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  color:#e8eefc;
}
@keyframes agShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-9px); } 75%{ transform:translateX(9px); }
}
.ag-card.is-shake{ animation:agShake .4s var(--ease); }

.ag-ic{
  font-size:56px; line-height:1; margin-bottom:12px;
  filter:drop-shadow(0 10px 26px rgba(99,102,241,.55));
}
.ag-card h2{
  margin:0 0 10px; font-size:23px; font-weight:800;
  letter-spacing:-.5px; color:#fff;
}
.ag-card p{
  margin:0 0 18px; font-size:14.5px; line-height:1.65;
  color:rgba(232,238,252,.80);
}

.ag-steps{
  margin:0 0 20px; padding:16px 34px 16px 16px; text-align:start;
  list-style:decimal; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.10);
  font-size:13.5px; line-height:1.9; color:rgba(232,238,252,.88);
}

.ag-pro{
  display:block; margin-top:14px;
  font-size:13px; font-weight:600; color:#c7d2fe;
  text-decoration:underline; text-underline-offset:3px;
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width:768px){
  .gs-stage{ padding-bottom:calc(var(--safe-bottom) + 30px); }
  .gs-screen{ max-width:760px; padding:24px; }
  .gs-tabbar{
    inset-inline:auto; inset-inline-start:0; top:calc(var(--safe-top) + var(--topbar-h)); bottom:0;
    flex-direction:column; justify-content:flex-start; gap:6px;
    width:86px; height:auto; padding:16px 0; margin:0;
    border-top:none; border-inline-end:1px solid var(--border-soft);
  }
  .gs-tab{ flex:0 0 64px; }
  .gs-tab::before{ top:4px; }
  .gs-stage{ padding-inline-start:86px; }
  .gs-ad-anchor{ display:none !important; }

  .gs-modal{ align-items:center; padding:20px; }
  .gs-modal-card{
    border-radius:var(--radius-lg); border-bottom:1px solid var(--border);
    padding-bottom:26px;
    transform:translateY(16px) scale(.97); opacity:0;
    transition:transform .28s var(--ease-out), opacity .28s var(--ease);
  }
  .gs-modal-card::before{ display:none; }
  .gs-modal.is-open .gs-modal-card{ transform:none; opacity:1; }
  .gs-toast{ bottom:28px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   FigureRender — סגנון משותף לגרפים/צורות (engine/figure-render.js)
   ------------------------------------------------------------
   כאן ולא ב-game.css של משחק בודד: כל figure חייב להיראות אותו
   דבר בכל מקום שהוא מופיע, ולא "לחקות" את צבעי המשחק שמארח
   אותו — בדיוק כמו שברירת המחדל בבגרות היא שרטוט אחיד לאורך כל
   הבחינה.
   ============================================================ */
.fr-svg{
  display:block; width:100%; max-width:340px; margin:0 auto;
  font-family:'Rubik','Heebo',system-ui,sans-serif;
}

/* --- צירים וגרפים --- */
.fr-grid{ stroke:var(--border); stroke-width:1; }
.fr-axis{ stroke:var(--text); stroke-width:1.4; }
.fr-arrowhead{ fill:var(--text); }
.fr-tick{ fill:var(--text-dim); font-size:10px; font-variant-numeric:tabular-nums; }
.fr-label{ fill:var(--text-dim); font-size:10.5px; font-weight:700; }
.fr-line{ fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.fr-dot{ fill:var(--brand); }
.fr-bar{ fill:var(--brand); opacity:.85; }

/* --- צורות גאומטריות ---
   קו דק ואחיד ובלי מילוי דקורטיבי, כמו בשרטוט בספר לימוד:
   מילוי כהה/צבעוני הופך שרטוט הנדסי לאיור, ומסתיר סימוני זווית. */
.fr-shape{ fill:rgba(124,58,237,.06); stroke:var(--text); stroke-width:1.6; stroke-linejoin:round; }
.fr-diag{ stroke:var(--text); stroke-width:1.2; }
.fr-right{ fill:none; stroke:var(--text); stroke-width:1.4; }
.fr-arc{ fill:none; stroke:var(--text); stroke-width:1.2; }
.fr-slabel{ fill:var(--text); font-size:12px; font-weight:600; }
.fr-vlabel{ fill:var(--text); font-size:13px; font-weight:700; }
.fr-alabel{ fill:var(--text); font-size:11.5px; font-weight:600; }

/* --- דיאגרמת עיגול --- */
.fr-sector{ fill:none; stroke:var(--text); stroke-width:1.4; }
.fr-pct{ fill:var(--text); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.fr-pielabel{ fill:var(--text-dim); font-size:10px; font-weight:600; }

/* --- טבלת שכיחות ---
   עמודת-הכותרת מימין ומוצללת, נתונים לבנים — המוסכמה של
   טבלאות סטטיסטיקה בספרי הלימוד, ומה שמאפשר לקרוא שורה
   שלמה בלי לאבד את שם המשתנה. */
.fr-table-wrap{ overflow-x:auto; }
.fr-table{
  border-collapse:collapse; margin:0 auto; direction:rtl;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.fr-table th, .fr-table td{
  border:1px solid var(--border); padding:7px 10px; text-align:center;
  white-space:nowrap; color:var(--text);
}
.fr-table .fr-th-lead{
  background:var(--surface-2); font-weight:700; text-align:start; font-size:12.5px;
}

/* --- לוח נתונים (מחירון/שלט) ---
   הקו המנוקד בין התווית לערך הוא מה שהופך רשימה לשלט קריא:
   העין רצה על הקו במקום לחפש איזה ערך שייך לאיזו שורה. */
.fr-dp{
  max-width:340px; margin:0 auto; padding:12px 16px;
  border:1.5px solid var(--text); border-radius:8px; background:var(--surface);
}
.fr-dp-title{ font-size:12px; font-weight:800; color:var(--text-dim); margin-bottom:8px; }
.fr-dp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.fr-dp-row{ display:flex; align-items:baseline; gap:6px; font-size:14px; }
.fr-dp-label{ flex:0 0 auto; font-weight:600; color:var(--text); }
.fr-dp-dots{
  flex:1 1 auto; align-self:flex-end; margin-bottom:4px;
  border-bottom:1.5px dotted var(--text-dim); opacity:.65;
}
.fr-dp-value{ flex:0 0 auto; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }

/* --- נקודה מסומנת (נקודת עזר על צלע, חיתוך גבהים, נקודה במערכת צירים) --- */
.fr-pt{ fill:var(--text); }

/* --- מעגל ---
   המעגל עצמו ללא מילוי: מיתרים וזוויות פנימיות חייבים להישאר
   קריאים מעליו, ומילוי הופך אותם לרעש. */
.fr-circle{ fill:none; stroke:var(--text); stroke-width:1.6; }
.fr-chord{ stroke:var(--text); stroke-width:1.5; }
.fr-tangent{ stroke:var(--text); stroke-width:1.4; stroke-dasharray:5 3; }

/* --- רשת וריאנטים: הוראה אחת, כמה מקרים קטנים ---
   הכיוון rtl כדי שהמקרה המסומן א' יהיה הראשון מימין, כמו בספר. */
/* auto-fit ולא מספר עמודות קבוע: כרטיס השאלה צר בהרבה מעמוד
   בספר, ו-3 עמודים קבועים הצטמצמו שם ל-130px לשרטוט — קטן מכדי
   לקרוא את תוויות הצלעות. media query לא עוזר כאן כי הוא מודד
   את חלון הדפדפן, לא את רוחב הכרטיס. */
.fr-variants{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap:14px 10px; direction:rtl;
}
.fr-variant{
  margin:0; padding:8px; border:1px solid var(--border-soft); border-radius:10px;
  background:var(--surface); display:flex; flex-direction:column; gap:4px;
}
.fr-variant-label{ font-size:12px; font-weight:800; color:var(--text-dim); }
.fr-variant-caption{ font-size:11.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.fr-variant-fig .fr-svg{ max-width:100%; }