/* ═══════════════════════════════════════════════════════════
   Nuvio MC — שכבת העיצוב המשותפת
   ───────────────────────────────────────────────────────────
   כל עמוד באתר טוען את הקובץ הזה. אין כאן שום דבר ספציפי
   לעמוד מסוים — רק טוקנים, זכוכית, כפתורים, ניווט ופוטר.

   ⚠️ כל צבע כאן עובר דרך משתנה. זה מה שיאפשר מתג שחור/לבן
      בהמשך בלי לגעת בשום כלל אחר.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* הירוק נגזר מהלוגו */
  --g:#5BE827;
  --g-d:#1F7D18;
  --g-l:#A8FF6E;
  --cyan:#37E5C4;

  /* ── משטח ודיו ── */
  --bg:#050B07;
  --bg-2:#020604;
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.70);
  --ink-3:rgba(255,255,255,.44);

  /* ── זכוכית: שלוש דרגות בלבד ── */
  --gl:rgba(255,255,255,.10);
  --gl-lo:rgba(255,255,255,.045);
  --gl-sheen:linear-gradient(157deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 52%,rgba(255,255,255,.095));
  --gl-sheen-hi:linear-gradient(157deg,rgba(255,255,255,.21),rgba(255,255,255,.065) 50%,rgba(255,255,255,.125));
  --gl-sheen-lo:linear-gradient(157deg,rgba(255,255,255,.10),rgba(255,255,255,.028) 55%,rgba(255,255,255,.055));
  --edge:rgba(255,255,255,.22);
  --edge-hi:rgba(255,255,255,.34);
  --spec:rgba(255,255,255,.92);
  --sat:138%;
  --bright:1.05;

  --blur-hi:36px;
  --blur:20px;
  --blur-lo:11px;

  --r:16px;
  --r-lg:24px;
  --r-xl:34px;
  --pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --max:1240px;
  --pad:clamp(20px,4vw,42px);

  --sh:0 1px 1px rgba(0,0,0,.22), 0 10px 26px -14px rgba(0,0,0,.6), 0 34px 68px -34px rgba(0,0,0,.8);
  --sh-hi:0 1px 1px rgba(0,0,0,.26), 0 16px 38px -16px rgba(0,0,0,.66), 0 52px 100px -40px rgba(0,0,0,.9);

  /* צבעי הקנבס — נקראים מ-JS כדי שהאפקטים יתאימו לנושא */
  --amb-spark:150,255,120;
  --amb-spark2:55,229,196;
  --amb-rain:196,255,196;
  --amb-stem:120,200,90;
  --amb-alpha:1;
}

/* ═══════════════════════════════════════════════════════════
   נושא בהיר
   ───────────────────────────────────────────────────────────
   ⚠️ זכוכית בהירה היא לא "כהה עם צבעים הפוכים".
   במצב כהה המשטח הוא לבן שקוף על רקע כהה — הלבן נקרא כאור.
   על רקע בהיר לבן־על־לבן נעלם, ולכן כאן:
     · הבסיס אטום הרבה יותר (55% במקום 10%)
     · הגבול **כהה** ולא בהיר
     · הצל הוא מה שמרים את המשטח, לא הבוהק
     · הזוהר הירוק יורד דרסטית, אחרת זה נראה זרחני
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --g:#3D9E1B;
  --g-d:#2A6E13;
  --g-l:#2F7D15;          /* "בהיר" במצב בהיר = כהה מספיק כדי להיקרא */
  --cyan:#0E8C79;

  /* רקע עמוק מספיק כדי שכרטיס לבן יבלוט ממנו. #EEF2EC היה קרוב
     מדי ללבן, ולכן הכל נראה שטוח וחסר עומק. */
  /* ⚠️ הרקע הבהיר חייב להיות **אפרפר ולא מנטה**. ירוק בהיר ורווי
     על כל המסך + כרטיס לבן במרכז = שני משטחים באותה בהירות, וזה
     בדיוק ה"שטוף" שנראה רע. הירוק נשאר רק ברמז ובאקצנטים. */
  --bg:#D6DCD3;
  --bg-2:#FFFFFF;
  --ink:#081106;
  --ink-2:rgba(8,17,6,.78);
  --ink-3:rgba(8,17,6,.62);

  /* המשטחים כמעט לבנים — ההפרש מול הרקע הוא מה שיוצר את הזכוכית */
  --gl:rgba(255,255,255,.88);
  --gl-lo:rgba(255,255,255,.66);
  --gl-sheen:linear-gradient(157deg,rgba(255,255,255,.96),rgba(255,255,255,.72) 52%,rgba(255,255,255,.88));
  --gl-sheen-hi:linear-gradient(157deg,rgba(255,255,255,1),rgba(255,255,255,.82) 50%,rgba(255,255,255,.94));
  --gl-sheen-lo:linear-gradient(157deg,rgba(255,255,255,.86),rgba(255,255,255,.55) 55%,rgba(255,255,255,.74));
  --edge:rgba(16,34,12,.18);
  --edge-hi:rgba(16,34,12,.26);
  --spec:rgba(255,255,255,1);
  /* בלי הגברת בהירות על רקע בהיר — היא מלבינה את מה שמאחורי
     הכרטיס ומוחקת את ההפרש שיוצר את הזכוכית */
  --sat:108%;
  --bright:1;

  /* במצב בהיר הצל הוא מה שמרים את המשטח — לא הבוהק. לכן הוא
     חזק ומרובד יותר מאשר במצב הכהה. */
  --sh:0 1px 2px rgba(18,34,14,.10), 0 8px 20px -8px rgba(18,34,14,.22), 0 24px 50px -22px rgba(18,34,14,.30);
  --sh-hi:0 2px 4px rgba(18,34,14,.13), 0 16px 36px -12px rgba(18,34,14,.28), 0 40px 84px -32px rgba(18,34,14,.38);

  --amb-spark:70,150,40;
  --amb-spark2:20,130,115;
  --amb-rain:80,130,90;
  --amb-stem:70,140,55;
  --amb-alpha:.55;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:Heebo,-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:16.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100svh;position:relative;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--g);outline-offset:4px;border-radius:6px}
::selection{background:rgba(91,232,39,.3);color:#fff}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}

/* ── טיפוגרפיה ──
   Rubik לכותרות: גיאומטרי וכבד, יושב טוב מול הלוגו הבלוקי.
   Mono רק לדברים טכניים — כתובת שרת היא טרמינל, לא שיווק. */
h1,h2,h3,h4{font-family:Rubik,Heebo,sans-serif;font-weight:900;letter-spacing:-.04em;line-height:1.03}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;direction:ltr}
/* line-height נדיב יותר: עברית עם ניקוד־אפס וגובה x גדול צריכה
   יותר אוויר בין שורות מלטינית */
.lede{color:var(--ink-2);font-size:clamp(1.04rem,1.6vw,1.2rem);line-height:1.75;
  max-width:52ch;letter-spacing:-.004em}
/* הדגשה בכותרות — ירוק מלא. טקסט בגרדיאנט על כל כותרת הוא הדפוס
   שחוזר בכל אתר שנוצר אוטומטית; כאן הוא שמור לכתובת השרת בלבד. */
.em{color:var(--g-l)}
/* ⚠️ בלי letter-spacing ובלי מונוספייס על עברית.
   עברית היא כתב מחובר־למראה — ריווח אותיות מפרק אותה ויוצר
   את התחושה ה"שבורה". מונוספייס וריווח שמורים ל-Latin בלבד
   (ראה .mono ותוויות כמו PLAYTIME). */
.idx{
  font-family:Heebo,sans-serif;font-size:13px;font-weight:700;
  color:var(--g);letter-spacing:0;display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
/* תווית לטינית בתוך .idx כן מקבלת את הטיפול המונוספייסי */
.idx .lat{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em}
.idx::after{content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,rgba(91,232,39,.55),transparent)}


/* ═══ רקע ═══
   שקט בכוונה. שדה של כתמי גרדיאנט מרחפים הוא החתימה המובהקת
   של אתר גנרי — כאן יש הילה אחת מעוגנת, ומקום שמור לצילום. */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#scene{position:absolute;inset:0}
/* התמונה מוצהרת רק כשהשכבה פעילה — אחרת 404 בכל טעינה */
#scene:not([hidden]){background:var(--scene,url("scene.jpg")) center 38%/cover no-repeat}
#scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,9,5,.80) 0%,rgba(3,9,5,.86) 42%,rgba(3,9,5,.95) 100%)}
#scene[hidden]{display:none}
#glow{position:absolute;inset-inline:0;top:-18vh;height:120vh;
  background:radial-gradient(58% 46% at 50% 34%,rgba(91,232,39,.20),transparent 72%),
             radial-gradient(42% 34% at 78% 12%,rgba(55,229,196,.11),transparent 74%);
  animation:sway 22s ease-in-out infinite}
/* על רקע בהיר אותו זוהר נראה זרחני — יורד לרבע מהעוצמה */
/* ⚠️ הזוהר במצב בהיר הוא **הילה בקצה העליון**, לא שטיפה על כל
   המסך. גרדיאנט ירוק חזק במרכז מבהיר בדיוק את האזור שבו יושבים
   הכרטיסים הלבנים, וכך מוחק אותם. */
:root[data-theme="light"] #glow{
  background:radial-gradient(58% 30% at 50% -4%,rgba(104,190,64,.20),transparent 72%),
             radial-gradient(38% 24% at 84% 2%,rgba(50,180,160,.10),transparent 74%),
             radial-gradient(46% 30% at 10% 96%,rgba(120,190,90,.09),transparent 76%)}
:root[data-theme="light"] #vig{
  background:radial-gradient(130% 100% at 50% 22%,transparent 42%,rgba(44,70,36,.26) 100%)}
:root[data-theme="light"] #noise{opacity:.03;mix-blend-mode:multiply}
/* שדה שטוח בגוון אחד הוא מה שגורם למצב הבהיר להיראות "שטוף".
   מדרג אנכי עדין — בהיר למעלה, כהה למטה — נותן לעמוד רצפה
   ולכרטיסים משהו לצוף מעליו. */
:root[data-theme="light"] body{
  background:linear-gradient(180deg,#EDF1EA 0%,#DFE5DC 46%,#CFD7CB 100%) fixed}
/* הבזק ברק על רקע בהיר חייב להכהות ולא להאיר */
:root[data-theme="light"] #bolt{mix-blend-mode:multiply;
  background:radial-gradient(120% 80% at 50% 0%,rgba(90,110,130,.30),rgba(120,140,160,.08) 45%,transparent 72%)}
@keyframes sway{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
/* ═══ אווירה בצדדים ═══
   נצנוצים וגשם, אבל **רק בשוליים** — מסכה שמכבה לגמרי את המרכז
   שבו יושב התוכן, כדי ששום דבר לא יתחרה בטקסט על תשומת הלב. */
#ambient{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 15%,transparent 30%,
                                     transparent 70%,#000 85%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 15%,transparent 30%,
                                     transparent 70%,#000 85%,#000 100%);
}
/* מתחת ל-1100px השוליים נעלמים, ואיתם גם האפקט */
@media(max-width:1100px){#ambient{display:none}}

/* ברק — הבזק קצר על כל המסך. לא ממוסך לשוליים, כי ברק שמאיר
   רק חצי מסך נראה שבור. עדין מספיק כדי לא להפריע לקריאה. */
#bolt{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(214,235,255,.5),rgba(190,220,255,.12) 45%,transparent 72%);
  mix-blend-mode:screen}
@media(max-width:1100px){#bolt{display:none}}
@media(prefers-reduced-motion:reduce){#bolt{display:none}}

#vig{position:absolute;inset:0;
  background:radial-gradient(142% 106% at 50% 28%,transparent 44%,rgba(1,5,3,.66) 100%)}
#noise{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ הנוזל ═══
   z-index:1 — מתחת לכל התוכן ומעל הרקע. הוא נשפך מתחת לפאנלי
   הזכוכית והם מטשטשים אותו. הרציפות מגיעה מאילוץ מרחק ב-JS. */
/* הנוזל שעקב אחרי הסמן הוסר — הוא נקרא כנקודה ירוקה
   ולא כנוזל. האווירה בשוליים (#ambient) נשארת. */


/* ═══ זכוכית ═══ */
.glass{
  position:relative;isolation:isolate;overflow:hidden;
  /* הגרדיאנט הלבן הכרחי: בלעדיו ה-saturate מושך ירוק מהרקע
     והמשטח נקרא כפאנל ירוק, לא כזכוכית. */
  background:var(--gl-sheen),var(--gl);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
          backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.glass::before{
  content:"";position:absolute;top:0;inset-inline:14%;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--spec),transparent);opacity:.6;
}
/* ההבהק שרודף אחרי העכבר בתוך המשטח */
.glass::after{
  content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),
             rgba(255,255,255,.15),rgba(168,255,110,.06) 36%,transparent 62%);
}
.glass:hover::after{opacity:1}
.glass>*{position:relative;z-index:2}
.g-hi{
  background:var(--gl-sheen-hi),var(--gl);
  -webkit-backdrop-filter:blur(var(--blur-hi)) saturate(142%) brightness(1.09);
          backdrop-filter:blur(var(--blur-hi)) saturate(142%) brightness(1.09);
  border-color:var(--edge-hi);
  box-shadow:var(--sh-hi),inset 0 1px 0 rgba(255,255,255,.15);
}
.g-lo{
  background:var(--gl-sheen-lo),var(--gl-lo);
  -webkit-backdrop-filter:blur(var(--blur-lo)) saturate(128%);
          backdrop-filter:blur(var(--blur-lo)) saturate(128%);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 1px 1px rgba(0,0,0,.16),0 16px 34px -22px rgba(0,0,0,.6);
}

/* ── משטחים קטנים ──
   על שטח קטן (ניווט, גלולות, תגיות) אין מספיק זכוכית כדי לעמעם
   את הנוזל שעובר מתחת, והוא בוקע ומוחק את הטקסט. לכן מוסיפים
   בסיס כהה ואטום יותר: המשטח נשאר זכוכית, אבל הוא מסתיר מספיק. */
.g-solid{
  background:var(--gl-sheen-lo),var(--surface,rgba(6,16,10,.62));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
          backdrop-filter:blur(var(--blur)) saturate(150%);
  border-color:rgba(255,255,255,.16);
}
.refract{box-shadow:var(--sh),
  inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.05),
  inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07)}


/* ═══ כפתורים ═══ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:Rubik,inherit;font-weight:800;font-size:15px;letter-spacing:-.015em;
  padding:15px 28px;border-radius:var(--pill);border:1px solid var(--edge-hi);
  cursor:pointer;white-space:nowrap;color:var(--ink);
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
          backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px -15px rgba(0,0,0,.7);
  transition:transform .4s var(--ease),background .26s,border-color .26s,box-shadow .4s var(--ease);
}
.btn::before{content:"";position:absolute;top:0;inset-inline:18%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:.55}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:46%;z-index:1;
  inset-inline-start:-70%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transition:inset-inline-start .75s var(--ease)}
.btn:hover::after{inset-inline-start:132%}
.btn>*{position:relative;z-index:3}
.btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.44)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-p{
  background:linear-gradient(150deg,rgba(91,232,39,.94),rgba(31,125,24,.9));
  border-color:rgba(168,255,110,.6);color:#05170A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px -12px rgba(91,232,39,.8),0 28px 62px -30px rgba(91,232,39,.7);
}
.btn-p:hover{background:linear-gradient(150deg,rgba(118,245,66,.97),rgba(45,150,32,.94));
  border-color:rgba(168,255,110,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 44px -12px rgba(91,232,39,.95),0 38px 84px -32px rgba(91,232,39,.8)}
.btn-s{padding:11px 20px;font-size:14px}
.btn svg{width:18px;height:18px;flex:none}

/* ── כפתור דיסקורד ──
   בצבע המותג (Blurple #5865F2) ועם הלוגו הרשמי. אייקון מוכר בצבע
   הנכון נקרא מיד כ"דיסקורד" — הרבה יותר מכפתור ירוק עם צורה כללית. */
.btn-dc{
  background:linear-gradient(150deg,#5865F2,#4650D8);
  border-color:rgba(148,158,255,.62);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             0 12px 30px -12px rgba(88,101,242,.85),
             0 28px 62px -30px rgba(88,101,242,.65);
}
.btn-dc:hover{
  background:linear-gradient(150deg,#6B77F5,#5058E4);
  border-color:rgba(178,186,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             0 18px 44px -12px rgba(88,101,242,1),
             0 38px 84px -32px rgba(88,101,242,.75);
}


/* ═══ ניווט ═══ */
#prog{position:fixed;top:0;inset-inline:0;height:2px;z-index:99;
  background:linear-gradient(90deg,var(--g),var(--g-l),var(--cyan));
  transform:scaleX(0);transform-origin:inline-start;will-change:transform}
header{position:fixed;top:0;inset-inline:0;z-index:70;padding:16px var(--pad);pointer-events:none;
  display:flex;justify-content:center}
/* הסרגל מתכווץ לרוחב התוכן שלו ומתמרכז, במקום להימתח לכל הרוחב */
.nav{
  pointer-events:auto;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--pill);
  transition:background .5s,border-color .5s,box-shadow .5s var(--ease);
}
.nav .brand{display:flex;align-items:center;flex:none}
.nav .brand img{height:38px;width:auto;filter:drop-shadow(0 2px 10px rgba(91,232,39,.45));
  transition:transform .45s var(--ease),filter .3s}
.nav .brand:hover img{transform:scale(1.07) rotate(-1.5deg);filter:drop-shadow(0 3px 16px rgba(91,232,39,.75))}
/* בלי margin auto — הקישורים נצמדים ללוגו והכל נשאר גוש אחד ממורכז */
.nav ul{display:flex;gap:2px;list-style:none;position:relative}
.nav ul a{position:relative;z-index:2;display:block;font-size:15.5px;font-weight:600;color:var(--ink-2);
  padding:10px 19px;border-radius:var(--pill);
  transition:color .25s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink)}

/* ── דיסקורד: כפתור אייקון עצמאי ──
   לא חלק מקבוצת הקישורים ולא מקבל את גלולת הזכוכית — הוא פעולה
   נפרדת, ולכן הוא יושב בקצה השני עם הסמל בלבד. */
.dc-btn{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#5865F2,#4650D8);
  border:1px solid rgba(148,158,255,.55);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 20px -12px rgba(88,101,242,.9);
  transition:transform .4s var(--ease),box-shadow .35s,filter .25s;
}
.dc-btn:hover{transform:translateY(-2px) scale(1.07);filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px -12px rgba(88,101,242,1)}
.dc-btn:active{transform:scale(.94);transition-duration:.1s}
.dc-btn svg{width:20px;height:20px}
/* מרווח שמפריד אותו מקבוצת הקישורים */
.nav ul{margin-inline-end:6px}

/* ── יוטיוב: כפתור אייקון עצמאי, בצבע המותג ── */
.yt-btn{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#FF3D3D,#C81E1E);
  border:1px solid rgba(255,140,140,.5);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -12px rgba(220,40,40,.9);
  transition:transform .4s var(--ease),box-shadow .35s,filter .25s;
}
.yt-btn:hover{transform:translateY(-2px) scale(1.07);filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -12px rgba(220,40,40,1)}
.yt-btn:active{transform:scale(.94);transition-duration:.1s}
.yt-btn svg{width:20px;height:20px}

/* ── טיקטוק ── */
.tt-btn{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#2B2B2B,#0C0C0C);
  border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -12px rgba(0,0,0,.9);
  transition:transform .4s var(--ease),box-shadow .35s,filter .25s;
}
.tt-btn:hover{transform:translateY(-2px) scale(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 12px 28px -12px rgba(37,244,238,.8), 0 0 0 1px rgba(254,44,85,.5)}
.tt-btn:active{transform:scale(.94);transition-duration:.1s}
.tt-btn svg{width:19px;height:19px}
:root[data-theme="light"] .tt-btn{border-color:rgba(0,0,0,.5)}

/* ── כפתור מוזיקה ── */
.snd-btn{
  flex:none;width:38px;height:38px;border-radius:50%;position:relative;overflow:hidden;
  display:grid;place-items:center;cursor:pointer;padding:0;font:inherit;
  color:var(--ink-2);
  background:var(--gl-sheen-lo),var(--gl-lo);
  border:1px solid var(--edge);
  transition:transform .4s var(--ease),color .25s,border-color .25s,background .25s;
}
.snd-btn:hover{transform:translateY(-2px) scale(1.07);color:var(--ink);border-color:var(--g)}
.snd-btn:active{transform:scale(.93);transition-duration:.1s}
.snd-btn svg{width:18px;height:18px;position:absolute;
  transition:opacity .25s var(--ease),transform .4s var(--ease)}
.snd-btn .on{opacity:0;transform:scale(.6)}
.snd-btn .off{opacity:1;transform:scale(1)}
.snd-btn.playing{color:#05170A;background:var(--g);border-color:var(--g)}
.snd-btn.playing .on{opacity:1;transform:scale(1)}
.snd-btn.playing .off{opacity:0;transform:scale(.6)}
/* פעימה עדינה כשמנגן, כדי שיהיה ברור שיש קול */
.snd-btn.playing::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--g);opacity:.5;animation:sndpulse 2s ease-out infinite}
@keyframes sndpulse{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.35);opacity:0}}

/* ── מתג נושא ── */
.theme-btn{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
  font:inherit;color:var(--ink-2);
  background:var(--gl-sheen-lo),var(--gl-lo);
  border:1px solid var(--edge);
  transition:transform .4s var(--ease),color .25s,border-color .25s,background .25s;
}
.theme-btn:hover{transform:translateY(-2px) scale(1.07);color:var(--ink);
  border-color:var(--g)}
.theme-btn:active{transform:scale(.93);transition-duration:.1s}
.theme-btn svg{width:19px;height:19px;position:absolute;
  transition:transform .5s var(--ease),opacity .3s var(--ease)}
.theme-btn{position:relative;overflow:hidden}
/* השמש והירח מתחלפים בסיבוב, לא בהיעלמות פתאומית */
.theme-btn .sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.theme-btn .moon{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-btn .sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-btn .moon{opacity:0;transform:rotate(70deg) scale(.5)}

/* מעבר רך בין הנושאים. transition על צבע בלבד — לא על transform,
   כדי לא להתנגש באפקט הבועה שכותב transform בכל פריים. */
@media(prefers-reduced-motion:no-preference){
  body,.glass,.btn,.nav,.pg,.row,.tab,.stat,.card,.tier,.board,
  .search input,.doc,.foot,.minifoot,#bg,#glow,#vig{
    transition:background-color .45s ease,border-color .45s ease,color .45s ease;
  }
}

/* ── הגלולה הנוזלית ──
   משטח זכוכית אחד שמחליק בין הפריטים במקום רקע נפרד לכל אחד.
   הרוחב והמיקום מונפשים יחד, וזה מה שנותן את התחושה שהזכוכית
   נמתחת אל הפריט הבא במקום לקפוץ אליו. */
.nav-pill{
  position:absolute;z-index:1;top:0;height:100%;
  left:0;width:0;border-radius:var(--pill);
  opacity:0;pointer-events:none;
  /* ⚠️ בלי backdrop-filter כאן. הגלולה יושבת בתוך .nav שכבר יש לו
     backdrop-filter, ושכבה כזו בתוך שכבה דוגמת את הפלט המרונדר של
     ההורה ומחזירה מלבן אפור שטוח במקום זכוכית. */
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08) 55%,rgba(255,255,255,.15));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -6px 12px -8px rgba(168,255,110,.45),
             0 6px 18px -10px rgba(0,0,0,.6);
  /* המיקום והגודל מונפשים ב-JS דרך transform (GPU). כאן רק
     השקיפות — הנפשת left/width הייתה מכריחה חישוב פריסה בכל פריים. */
  transform-origin:0 50%;
  transition:opacity .3s var(--ease);
  will-change:transform;
}
.nav-pill.on{opacity:1}
/* נצנוץ ספקולרי בשפה העליונה, כמו אור על זכוכית */
.nav-pill::before{
  content:"";position:absolute;top:0;inset-inline:18%;height:1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}


/* ═══ סטטוס ═══ */
.live{display:inline-flex;align-items:center;gap:10px;padding:8px 17px;border-radius:var(--pill);
  font-size:13px;font-weight:500;color:var(--ink-2);
  transition:border-color .3s,background .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.live:hover{transform:translateY(-2px);border-color:rgba(168,255,110,.4)}
.live b{color:var(--ink);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:#8A93A0}
.dot.on{background:var(--g);animation:pulse 2.4s ease-out infinite}
.dot.off{background:#FFC53C}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,232,39,.6)}
  70%{box-shadow:0 0 0 10px rgba(91,232,39,0)}100%{box-shadow:0 0 0 0 rgba(91,232,39,0)}}


/* ═══ פוטר מינימלי ═══
   לעמודים שצריכים להישאר במסך אחד. שורה אחת, בלי משקל ויזואלי. */
.minifoot{
  position:relative;z-index:2;padding:0 var(--pad) 22px;
  display:flex;align-items:center;justify-content:center;gap:10px 20px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);text-align:center;
}
.minifoot a{transition:color .22s,transform .3s var(--ease);display:inline-block}
.minifoot a:hover{color:var(--g-l);transform:translateY(-1px)}
.minifoot .sep{opacity:.4}


/* ═══ פוטר ═══ */
footer{position:relative;z-index:2;padding:clamp(34px,4vw,56px) 0 30px}
.foot{border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot a img{height:36px;width:auto;filter:drop-shadow(0 2px 10px rgba(91,232,39,.4));
  transition:transform .5s var(--ease),filter .3s}
.foot a:hover img{transform:scale(1.05) translateY(-2px);filter:drop-shadow(0 4px 18px rgba(91,232,39,.7))}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{font-size:14.5px;color:var(--ink-2);display:inline-block;
  transition:color .22s,transform .3s var(--ease)}
.foot nav a:hover{color:var(--g-l);transform:translateY(-2px)}
.foot .fine{font-size:12.5px;color:var(--ink-3)}


/* ═══ עמודי תקנון ופרטיות ═══ */
.legal{padding:clamp(120px,17vh,180px) 0 clamp(50px,7vw,90px)}
.legal h1{font-size:clamp(2.4rem,6.2vw,4rem);margin-bottom:14px}
.legal .updated{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-3);
  letter-spacing:.08em}
.legal .doc{margin-top:clamp(30px,4vw,46px);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,52px)}
.legal section{margin-bottom:38px;scroll-margin-top:110px}
.legal section:last-child{margin-bottom:0}
.legal h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:14px;
  display:flex;align-items:baseline;gap:12px}
.legal h2 .n{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  color:var(--g);letter-spacing:.1em;flex:none}
.legal p{color:var(--ink-2);font-size:15.4px;margin-bottom:12px;max-width:76ch}
.legal p:last-child{margin-bottom:0}
.legal ul{list-style:none;display:flex;flex-direction:column;gap:10px;
  margin:14px 0;max-width:76ch}
.legal ul li{display:flex;gap:11px;color:var(--ink-2);font-size:15.2px;line-height:1.6}
.legal ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--g);margin-top:10px;opacity:.75}
.legal b{color:var(--ink);font-weight:700}
.legal a:not(.btn){color:var(--g-l);border-bottom:1px solid rgba(168,255,110,.3);
  transition:border-color .25s}
.legal a:not(.btn):hover{border-color:var(--g-l)}
.legal .note{margin-top:34px;padding:20px 22px;border-radius:var(--r);
  border:1px solid rgba(255,197,60,.24);background:rgba(255,197,60,.07);
  font-size:14.2px;color:var(--ink-2)}


/* ═══ התאמות נושא בהיר למשטחים שמוגדרים בעמודים ═══
   העמודים מגדירים --surface כהה ורקעים לבנים־שקופים. במצב בהיר
   שניהם צריכים להתהפך, אחרת נשארים כתמים כהים על דף לבן. */
:root[data-theme="light"]{
  --surface:rgba(255,255,255,.72);
}
:root[data-theme="light"] .addr-card,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .closed-note,
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .board,
:root[data-theme="light"] .nav.g-solid{--surface:rgba(255,255,255,.94)}
/* קו לבן בשפה העליונה עדיין עובד על בהיר — הוא מפריד את הכרטיס
   מהרקע וגורם לו להיראות כמו משטח פיזי ולא כמו מלבן */
:root[data-theme="light"] .glass::before{opacity:.9}
:root[data-theme="light"] .refract{box-shadow:var(--sh),
  inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(24,48,18,.05),
  inset 1px 0 0 rgba(255,255,255,.7),inset -1px 0 0 rgba(255,255,255,.7)}

/* כרטיסים פנימיים: לבן־שקוף הופך לכהה־שקוף */
:root[data-theme="light"] .pg,
:root[data-theme="light"] .sugg button,
:root[data-theme="light"] .tab,
:root[data-theme="light"] .vtag span,
:root[data-theme="light"] .tagx,
:root[data-theme="light"] .btn{
  background:rgba(255,255,255,.9);
  border-color:rgba(22,46,16,.12);
  box-shadow:0 1px 2px rgba(24,48,18,.06);
}
:root[data-theme="light"] .pg:hover,
:root[data-theme="light"] .sugg button:hover,
:root[data-theme="light"] .tab:hover{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .row:hover{background:rgba(10,20,8,.05)}

/* טקסטים שהיו לבן קשיח */
:root[data-theme="light"] .addr{color:#0A1408;text-shadow:none}
:root[data-theme="light"] .pg .v .n,
:root[data-theme="light"] .row .val .n,
:root[data-theme="light"] .stat .v{color:#0A1408}
:root[data-theme="light"] .pname{
  background:linear-gradient(96deg,#0A1408 30%,var(--g));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ⚠️ טקסטים שנכתבו כ-#fff קשיח בעמודים עצמם. על משטח לבן הם
   פשוט נעלמים, ולכן הם מוחזרים כאן לצבע הדיו של הנושא. */
:root[data-theme="light"] .pg .v .n,
:root[data-theme="light"] .row .val .n,
:root[data-theme="light"] .pod:hover .who,
:root[data-theme="light"] .addr{color:var(--ink)}
:root[data-theme="light"] .pod.p1 .who{color:#8A6A00}
:root[data-theme="light"] .pod.p2 .who{color:#4A5560}
:root[data-theme="light"] .pod.p3 .who{color:#8A5124}
:root[data-theme="light"] .crest .ix{color:rgba(255,255,255,.85)}
:root[data-theme="light"] .em{color:var(--g-d)}
:root[data-theme="light"] .idx{color:var(--g-d)}
:root[data-theme="light"] .idx::after{
  background:linear-gradient(90deg,rgba(42,110,19,.5),transparent)}
:root[data-theme="light"] ::selection{background:rgba(61,158,27,.28);color:#06120B}
/* כפתורי הזכוכית הרגילים — על רקע בהיר הם היו כמעט בלתי נראים */
:root[data-theme="light"] .btn:hover{
  background:#fff;border-color:rgba(16,34,12,.3)}

/* שדה החיפוש */
:root[data-theme="light"] .search input{
  background:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px -16px rgba(16,28,14,.4)}
:root[data-theme="light"] .search input:focus{
  background:#fff;box-shadow:0 0 0 4px rgba(61,158,27,.14),0 12px 30px -16px rgba(61,158,27,.35)}

/* בקרות הסקין */
:root[data-theme="light"] .sact,
:root[data-theme="light"] .vbtn{background:rgba(255,255,255,.82);
  border-color:rgba(10,20,8,.14);color:var(--ink-2)}

/* הבמה של הסקין — רקע בהיר במקום כהה */
:root[data-theme="light"] .pshot{
  background:radial-gradient(64% 50% at 50% 62%,rgba(61,158,27,.10),transparent 72%)}
:root[data-theme="light"] .pshot .render{
  filter:drop-shadow(0 18px 30px rgba(16,28,14,.28))}

/* הווילון במעבר עמודים חייב להתאים לרקע החדש */
:root[data-theme="light"] #curtain{background:var(--bg)}

/* הדגשות ירוקות בגבולות — כהות יותר כדי להיראות על לבן */
:root[data-theme="light"] .glass:hover::after{
  background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),
             rgba(61,158,27,.10),rgba(61,158,27,.04) 36%,transparent 62%)}


/* ═══ מעבר בין עמודים ═══
   וילון כהה קצר שנסגר לפני הניווט ונפתח בטעינה. מונע את
   ה"קפיצה" הלבנה־שחורה שיש במעבר רגיל בין עמודים. */
#curtain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--bg);
  /* מצב הבסיס הוא **פתוח** (שקוף). הפתיחה נעשית באנימציית CSS ולא
     ב-JS — אנימציה תמיד מגיעה למצב הסופי שלה, גם אם rAF נחנק,
     ולכן אין מצב שהעמוד נשאר שחור. */
  /* ⚠️ מצב הבסיס שקוף לחלוטין, ובלי אנימציית CSS.
     אנימציה שנחנקת (טאב ברקע / iframe מוסתר) נתקעת על פריים
     ההתחלה ומשאירה את העמוד שחור. הפתיחה נעשית ב-JS עם טיימר
     גיבוי, כי setTimeout רץ גם כשאין ציור. */
  opacity:0;
  transition:opacity .2s var(--ease);
  display:grid;place-items:center;
}
#curtain.closing{opacity:1;transition-duration:.17s}

/* הלוגו בתוך הווילון. הוא לא זז בעצמו — הזזה בזמן כל־כך קצר
   נראית כמו קפיצה. רק scale עדין, שנקרא כ"נשימה" ולא כאנימציה. */
#curtain img{
  width:min(340px,66vw);height:auto;
  opacity:.9;
  transform:scale(.94);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
  filter:drop-shadow(0 0 28px rgba(61,220,90,.28))
}
#curtain.closing img{transform:scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){#curtain{display:none}}


/* ═══ טוסט ═══ */
#toast{position:fixed;bottom:26px;inset-inline:0;margin:0 auto;width:max-content;max-width:90vw;z-index:120;
  padding:13px 22px;border-radius:var(--pill);font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(20px) scale(.94);
  pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
#toast.on{opacity:1;transform:none}
#toast svg{width:17px;height:17px;color:var(--g-l);flex:none}


/* ═══ reveal ═══ */
.rv{opacity:0}
.rvc>*{opacity:0}


/* ═══ רספונסיביות ═══
   backdrop-filter יקר. במובייל מורידים עוצמה, לא מוותרים. */
/* ═══════════════════════════════════════════════════════════
   מובייל
   ───────────────────────────────────────────────────────────
   ⚠️ בדסקטופ הניווט הוא גלולה צפה למעלה. במסך טלפון הוא נאלץ
   לדחוס 8 פריטים ל-335px, וכל אזור מגע יורד ל-38px — מתחת
   למינימום של 44px. התוצאה: אתר שקשה ללחוץ בו.

   הפתרון: הניווט יורד לתחתית המסך כסרגל מלא — זה המקום שהאגודל
   מגיע אליו בקלות, ויש מקום לאזורי מגע אמיתיים.
   ═══════════════════════════════════════════════════════════ */
/* ⚠️ גם `pointer:coarse` ולא רק רוחב: טלפון גדול או מצב שולחני
   בדפדפן נותנים רוחב >760 ואז המכשיר קיבל את סרגל השולחן. */
@media(max-width:760px),(pointer:coarse){
  :root{--blur-hi:18px;--blur:12px;--blur-lo:8px}
  #glow{opacity:.8}

  header{
    top:auto;bottom:0;padding:0;
    /* safe-area: מרווח מעל פס המחוות של האייפון */
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .nav{
    width:100%;max-width:none;border-radius:0;
    border-inline:0;border-bottom:0;
    border-top:1px solid var(--edge);
    padding:8px 6px;gap:2px;
    justify-content:space-between;
    box-shadow:0 -10px 30px -18px rgba(0,0,0,.8);
  }
  .nav .brand{display:none}          /* הלוגו כבר בעמוד, מיותר בסרגל */
  /* ⚠️ min-width:0 חובה — בלעדיו רשימת הקישורים מסרבת להצטמצם,
     הסרגל גולש מעבר למסך, והאייקון האחרון נחתך באמצע. */
  .nav ul{margin:0;flex:1 1 auto;min-width:0;justify-content:space-around;gap:0}
  .nav ul a{
    font-size:13px;padding:12px 7px;      /* 44px+ גובה מגע */
    min-height:44px;display:flex;align-items:center;white-space:nowrap;
  }
  .nav-pill{display:none}                   /* אין מקום לגלולה בסרגל צר */
  .nav ul a[aria-current]{color:var(--g-l);font-weight:800}
  .dc-btn,.yt-btn,.tt-btn,.theme-btn,.snd-btn{
    width:40px;height:40px;flex:0 0 auto}
  .dc-btn svg,.yt-btn svg,.tt-btn svg{width:19px;height:19px}
  .theme-btn svg,.snd-btn svg{width:19px;height:19px}

  /* התוכן חייב מקום פנוי מתחת, אחרת הסרגל מכסה אותו */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0))}
  .minifoot{padding-bottom:14px;gap:6px 14px;font-size:11.5px}
  #noise{opacity:.03}
  .foot{flex-direction:column;align-items:flex-start;gap:18px}
}
/* מסך צר במיוחד: שלושה קישורים + ארבעה אייקונים לא נכנסים
   במידות הרגילות, ולכן הכל יורד עוד מדרגה במקום להיחתך. */
@media(max-width:430px){
  .nav ul a{font-size:12px;padding:12px 4px}
  .dc-btn,.yt-btn,.tt-btn,.theme-btn,.snd-btn{width:34px;height:34px}
  .dc-btn svg,.yt-btn svg,.tt-btn svg,.theme-btn svg,.snd-btn svg{width:17px;height:17px}
  .nav{padding:7px 5px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.btn,.nav{background:rgba(8,26,15,.9)}
  .g-hi{background:rgba(10,32,19,.94)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv,.rvc>*{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}