/* ═══════════════════════════════════════════════════════════
   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:#B9C6B4;
  --bg-2:#FFFFFF;
  --ink:#060E04;
  --ink-2:rgba(6,14,4,.86);
  --ink-3:rgba(6,14,4,.70);

  /* המשטחים כמעט לבנים — ההפרש מול הרקע הוא מה שיוצר את הזכוכית */
  --gl:rgba(255,255,255,.94);
  --gl-lo:rgba(255,255,255,.82);
  --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(12,28,8,.24);
  --edge-hi:rgba(12,28,8,.34);
  --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,#CBD6C6 0%,#B9C6B4 48%,#A3B39E 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,.86);
}
/* משטחים ראשיים אטומים לגמרי — שקיפות על רקע כהה יותר מחזירה
   בדיוק את הבעיה שהיא אמורה לפתור */
: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,
:root[data-theme="light"] .nav.g-solid{--surface:#FFFFFF}
/* קו לבן בשפה העליונה עדיין עובד על בהיר — הוא מפריד את הכרטיס
   מהרקע וגורם לו להיראות כמו משטח פיזי ולא כמו מלבן */
: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)}

/* כרטיסים פנימיים: לבן־שקוף הופך לכהה־שקוף */
/* ⚠️ :not(.btn-dc) — לכפתור הדיסקורד יש רקע מותג כחול וטקסט לבן.
   כשהכלל הזה הלבין גם אותו, הטקסט הלבן נעלם על לבן והכפתור נראה
   ריק. כל כפתור עם רקע צבעוני משלו חייב להישאר מחוץ לכלל. */
: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:not(.btn-dc){
  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:not(.btn-dc):hover{
  background:#fff;border-color:rgba(16,34,12,.3)}
/* הכפתורים הצבעוניים שומרים על הטקסט הלבן שלהם בשני הנושאים */
:root[data-theme="light"] .btn-dc,
:root[data-theme="light"] .btn-dc span{color:#fff}

/* שדה החיפוש */
: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}
}