/* לוח מודעות - תצוגה. הגדלים ביחידות מסך כדי שאותה תבנית תיראה נכון
   גם על 1920x1080 לרוחב וגם על 1080x1920 לאורך. */

:root{
  --brand:#0b5aa8;
  --brand2:#0d8a6a;
  --bg:#0a0f18;
  --panel:rgba(255,255,255,.045);
  --panel-line:rgba(255,255,255,.09);
  --ink:#f2f6fb;
  --ink-dim:#9db0c7;
  --gap:0.9vmin;
}

*{box-sizing:border-box;margin:0;padding:0}

/* חייב לבוא לפני כל כלל אחר: מחלקה עם display משלה (למשל .pairing{display:flex})
   מנצחת את [hidden] של הדפדפן, כי שתיהן באותה עוצמה וה-author stylesheet אחרון.
   בלי השורה הזו מסך הזיווג מכסה את התוכן לנצח גם אחרי שיוך מוצלח. */
[hidden]{display:none !important}

html,body{height:100%;overflow:hidden}
body{
  /* Heebo לא מכסה קירילית, ורוב תוכן האירועים רוסי. Noto Sans תופס את מה שחסר. */
  font-family:'Heebo','Noto Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120vmin 90vmin at 85% -10%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
    radial-gradient(110vmin 80vmin at 5% 110%, color-mix(in srgb, var(--brand2) 32%, transparent), transparent 70%);
}

/* ---------- פריסה ---------- */
.stage{
  position:relative;z-index:1;
  height:100vh;width:100vw;
  display:grid;
  grid-template-columns:repeat(var(--cols,12),1fr);
  grid-template-rows:repeat(var(--rows,12),1fr);
  gap:var(--gap);
  padding:var(--gap);
}
.zone{
  position:relative;overflow:hidden;
  border-radius:1.4vmin;
  background:var(--panel);
  border:1px solid var(--panel-line);
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;
}
.zone.bare{background:none;border:none;backdrop-filter:none}

/* ---------- מודעות ---------- */
.ann{position:relative;height:100%;width:100%}
/* ההודעה נכנסת בהחלקה מימין ויוצאת שמאלה, בכיוון הקריאה.
   המסך מרגיש נע במקום להבהב. */
.ann-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:4vmin 4.5vmin;
  opacity:0;transform:translateX(7%);
  transition:opacity .55s ease, transform .75s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.ann-slide.on{opacity:1;transform:none}
.ann-slide.out{opacity:0;transform:translateX(-7%)}

/* הכותרת והגוף נכנסים רגע אחרי המסגרת, כך שיש תחושת רצף ולא קפיצה */
.ann-slide .ann-inner > *{opacity:0;transform:translateX(3%)}
.ann-slide.on .ann-inner > *{
  opacity:1;transform:none;
  transition:opacity .5s ease .18s, transform .6s cubic-bezier(.22,.61,.36,1) .18s;
}
.ann-slide.on .ann-body{transition-delay:.3s}
.ann-title{
  font-size:clamp(28px,5.2vmin,86px);
  font-weight:900;line-height:1.12;
  margin-bottom:2.4vmin;
  text-shadow:0 .3vmin 2vmin rgba(0,0,0,.45);
}
.ann-title::after{
  content:'';display:block;
  width:10vmin;height:.55vmin;margin-top:1.8vmin;border-radius:1vmin;
  background:linear-gradient(90deg,var(--brand2),var(--brand));
}
.ann-body{
  font-size:clamp(17px,2.9vmin,44px);
  font-weight:300;line-height:1.55;color:#dfe8f3;
  white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;
}
.ann-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.ann-slide.has-img{justify-content:flex-end}
.ann-slide.has-img .ann-inner{
  position:relative;z-index:2;
  background:linear-gradient(to top,rgba(6,11,20,.94),rgba(6,11,20,.72) 55%,transparent);
  margin:-4vmin -4.5vmin;padding:6vmin 4.5vmin 4vmin;
}

/* ---------- שטאנץ אירוע ----------
   כל אירוע נראה בדיוק אותו דבר: בלוק תאריך בצד, כותרת גדולה,
   ומתחתיה שעה ומקום. בלי פוסטר ברקע - נוסה, והפוסטרים של faces
   הם עיצובים שלמים שנלחמים בכרטיס במקום לשרת אותו. */

/* הכרטיס הוא גריד של שלוש עמודות פיזיות, ולא flex לוגי:
   ‏direction:ltr על הגריד בלבד, כך שעמודה 1 היא תמיד שמאל וכל
   בלבול בין inline-start לבין שמאל נעלם. התוכן עצמו חוזר ל-rtl.
   שרשרת minmax(0,1fr) + min-height:0 מעבירה את הגובה החסום של
   השקופית פנימה, במקום height:100% שמתפוצץ מול הורה בגובה אוטומטי. */
.ann-slide{min-height:0}
.ann-inner{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}

.ev-slide{
  direction:ltr;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  grid-template-rows:minmax(0,1fr);
  gap:3.4vmin;align-items:center;
  width:100%;min-width:0;min-height:0;
}

/* עמודה 1, שמאל: הפוסטר. ‏max-width/max-height על תג img אמיתי הם
   הדרך היחידה שמבטיחה שהתמונה תוצג שלמה ולא תמתח את התא. */
.ev-poster{
  grid-column:1;grid-row:1;
  min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
}
.ev-poster img{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  border-radius:1.4vmin;
  box-shadow:0 1vmin 4vmin rgba(0,0,0,.4);
}
.ev-slide.has-poster{grid-template-columns:minmax(0,34%) minmax(0,1fr) minmax(0,auto)}

/* עמודה 3, ימין: התאריך. עמודה 2 באמצע: הטקסט. */
.ev-date{grid-column:3;grid-row:1;direction:rtl}
.ev-body{grid-column:2;grid-row:1;direction:rtl;text-align:right}

.ev-date{
  text-align:center;min-width:14vmin;
  background:linear-gradient(160deg,var(--brand2),var(--brand));
  border-radius:1.8vmin;padding:2vmin 2.4vmin;min-width:15vmin;
  box-shadow:0 1vmin 4vmin rgba(0,0,0,.4);
}
.ev-day{font-size:clamp(32px,6.8vmin,100px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.ev-month{font-size:clamp(13px,2vmin,28px);font-weight:600;margin-top:.4vmin}
.ev-dow{
  font-size:clamp(11px,1.5vmin,21px);font-weight:300;opacity:.85;margin-top:.9vmin;
  border-top:1px solid rgba(255,255,255,.3);padding-top:.9vmin;
}

.ev-body{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}
.ev-cat{
  align-self:flex-start;font-size:clamp(10px,1.4vmin,19px);font-weight:700;letter-spacing:.1vmin;
  background:rgba(255,255,255,.12);border:1px solid var(--panel-line);
  padding:.4vmin 1.4vmin;border-radius:3vmin;margin-bottom:1.4vmin;
}
.ev-title{
  font-size:clamp(20px,3.5vmin,56px);font-weight:800;line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ev-meta{display:flex;flex-wrap:wrap;gap:.8vmin 2.6vmin;margin-top:1.8vmin}
.ev-meta div{display:flex;align-items:center;gap:.8vmin;font-size:clamp(13px,2vmin,28px);font-weight:400}
/* "18:30 - 20:00" מתהפך בתוך פסקה בעברית ויוצא הפוך. מבודד לכיוונו. */
.ev-meta .t{direction:ltr;unicode-bidi:isolate}
.ev-meta svg{width:2.2vmin;height:2.2vmin;flex:none;opacity:.75}
.ev-meta .loc{color:#cfe0f5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vmin}
.ev-desc{
  font-size:clamp(12px,1.9vmin,26px);font-weight:300;color:#c3d3e6;line-height:1.5;margin-top:1.5vmin;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ev-today{
  background:#e8890c;color:#fff;font-size:clamp(11px,1.5vmin,21px);font-weight:700;
  padding:.4vmin 1.6vmin;border-radius:3vmin;
}

/* התגיות יושבות קבוע בפינה העליונה של הכרטיס */
.ann-slide .ev-badges{
  position:absolute;z-index:3;top:2.6vmin;inset-inline-end:3.4vmin;
  display:flex;gap:1.2vmin;align-items:center;
}
.ann-slide .ev-badges .ev-cat{margin:0;align-self:auto}

/* לאורך: הכרטיס נערם, כי אין רוחב לשתי עמודות */
.ann.narrow .ev-slide,
.ann.narrow .ev-slide.has-poster{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,auto);
  gap:2.4vmin;align-content:center;
}
.ann.narrow .ev-poster{grid-column:1;grid-row:1;max-height:42vh}
.ann.narrow .ev-date{grid-column:1;grid-row:2}
.ann.narrow .ev-body{grid-column:1;grid-row:3}
.ann.narrow .ev-date{
  display:flex;align-items:baseline;justify-content:center;gap:1.6vmin;
  min-width:0;padding:1.6vmin 2vmin;
}
.ann.narrow .ev-day{font-size:clamp(30px,6vmin,84px)}
.ann.narrow .ev-dow{border:none;padding:0;margin:0}
.ann.narrow .ev-month{margin:0}
.ann.narrow .ev-title{-webkit-line-clamp:4}

/* ---------- שעון ---------- */
.clock{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4vmin;padding:1.4vmin}
.clock-time{font-size:clamp(26px,5.4vmin,84px);font-weight:800;letter-spacing:.1vmin;line-height:1;font-variant-numeric:tabular-nums}
.clock-date{font-size:clamp(11px,1.7vmin,25px);font-weight:300;color:var(--ink-dim)}
.clock-day{font-size:clamp(12px,1.9vmin,28px);font-weight:500;color:var(--ink-dim)}

/* ---------- מזג אוויר ---------- */
/* space-between + flex:1 על החלק העליון: המצב הנוכחי ממלא את החלל
   ושורת הימים נדבקת לתחתית, במקום ששניהם ירחפו באמצע. */
.wx{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:2vmin 1.8vmin}
.wx-now{flex:1;display:flex;align-items:center;justify-content:center;gap:1.8vmin;min-height:0}
.wx-icon{width:5.6vmin;height:5.6vmin;flex:none}
.wx-temp{font-size:clamp(26px,5vmin,76px);font-weight:800;line-height:1}
.wx-temp sup{font-size:.42em;font-weight:500;vertical-align:super}
.wx-meta{display:flex;flex-direction:column;gap:.3vmin}
.wx-city{font-size:clamp(13px,2vmin,29px);font-weight:600}
.wx-text{font-size:clamp(11px,1.6vmin,23px);color:var(--ink-dim);font-weight:300}
.wx-days{
  flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1vmin;
  border-top:1px solid var(--panel-line);padding-top:1.6vmin;margin-top:1.6vmin;
}
.wx-day{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6vmin;min-width:0}
.wx-day .d{font-size:clamp(11px,1.5vmin,21px);color:#b6c6da;font-weight:400}
.wx-day svg{width:3.2vmin;height:3.2vmin}
.wx-day .t{font-size:clamp(12px,1.7vmin,24px);font-weight:600;font-variant-numeric:tabular-nums}
.wx-day .t small{color:var(--ink-dim);font-weight:300}
.wx-off{margin:auto;color:var(--ink-dim);font-size:2vmin;font-weight:300}

/* ---------- טיקר ---------- */
/* flex-direction חובה במפורש: ‏.zone קובע column, ובלי הדריסה הזו
   התווית והרצועה נערמות אנכית והרצועה מקבלת רוחב אפס. */
.ticker{
  height:100%;width:100%;display:flex;flex-direction:row;align-items:stretch;overflow:hidden;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border:none;
}
.ticker-tag{
  flex:none;height:100%;display:flex;align-items:center;
  padding:0 2.6vmin;background:rgba(0,0,0,.28);
  font-size:clamp(13px,2.1vmin,30px);font-weight:700;letter-spacing:.1vmin;
}
/* min-width:0 חובה: בלעדיו פריט flex לא מתכווץ מתחת לרוחב תוכנו,
   והרצועה נמתחת לרוחב כל המבזקים ויוצאת מהמסך. */
.ticker-view{flex:1 1 0;min-width:0;overflow:hidden;position:relative;height:100%}

/* הרשימה מוכפלת, וההזזה עד חצי הרוחב מחזירה אותה בדיוק לנקודת ההתחלה,
   כך שהגלילה נסגרת על עצמה בלי קפיצה. משך הסיבוב נקבע ב-JS לפי האורך בפועל.
   ‏direction:ltr על הרצועה בלבד, כדי שהזרימה תהיה שמאלה כמו בכל מבזק בעברית;
   כל מבזק בפני עצמו נשאר rtl ונקרא כרגיל. */
.ticker-track{
  position:absolute;top:50%;left:0;
  direction:ltr;
  display:flex;align-items:center;gap:5vmin;white-space:nowrap;
  will-change:transform;
  transform:translateY(-50%);
}
@keyframes tkscroll{
  from{transform:translateY(-50%) translateX(0)}
  to{transform:translateY(-50%) translateX(-50%)}
}
.ticker-track span{font-size:clamp(14px,2.2vmin,32px);font-weight:400;direction:rtl;unicode-bidi:isolate}
.ticker-track b{opacity:.5;font-weight:900}

/* ---------- לוגו / תמונה / טקסט ---------- */
.logo{height:100%;display:flex;align-items:center;justify-content:center;padding:2vmin}
.logo img{max-width:100%;max-height:100%;object-fit:contain}
.logo-fallback{font-size:clamp(16px,3vmin,44px);font-weight:900;color:var(--ink-dim);text-align:center;line-height:1.2}
.freetext{height:100%;display:flex;align-items:center;justify-content:center;padding:3vmin;text-align:center}
.freetext p{font-size:clamp(16px,3.2vmin,48px);font-weight:300;line-height:1.5;white-space:pre-wrap}

/* ---------- זיווג ---------- */
.pairing{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.pair-card{text-align:center;padding:6vmin;max-width:80vw}
.pair-kicker{font-size:clamp(14px,2.4vmin,34px);color:var(--ink-dim);font-weight:300;letter-spacing:.4vmin;margin-bottom:2.5vmin}
/* הקוד הוא הדבר היחיד שחייב להיקרא מהצד השני של הלובי.
   צבע מלא בקונטרסט מלא, בלי גרדיאנט על טקסט: טריק כזה נכשל
   בשקט בחלק מהדפדפנים ומשאיר מלבנים צבעוניים במקום ספרות. */
.pair-code{
  font-size:clamp(56px,18vmin,260px);font-weight:900;line-height:1;
  letter-spacing:1.6vmin;font-variant-numeric:tabular-nums;
  color:#eaf4ff;
  text-shadow:0 0 6vmin rgba(120,200,255,.35);
}
.pair-help{margin-top:4vmin;font-size:clamp(13px,2.1vmin,30px);color:var(--ink-dim);font-weight:300;line-height:1.6}
.pair-help b{color:var(--ink);font-weight:500}
.pair-meta{margin-top:3vmin;display:flex;gap:2vmin;justify-content:center;font-size:clamp(11px,1.6vmin,20px);color:#51637a}
/* "1920 x 1080" מתהפך בתוך פסקה בעברית, ולכן הוא מבודד לכיוון שלו */
#pairRes{direction:ltr;unicode-bidi:isolate}

/* ---------- אתחול ומצב לא מקוון ---------- */
.boot{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vmin;background:var(--bg)}
body:not(.booting) .boot{display:none}
.boot-spin{width:7vmin;height:7vmin;border:.7vmin solid rgba(255,255,255,.12);border-top-color:var(--brand2);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-text{color:var(--ink-dim);font-size:2.2vmin;font-weight:300;letter-spacing:.3vmin}

.offline{
  position:fixed;z-index:25;bottom:2vmin;inset-inline-end:2vmin;
  background:rgba(180,60,40,.92);color:#fff;
  padding:1vmin 2vmin;border-radius:1vmin;
  font-size:1.7vmin;font-weight:400;
}

.disabled-note{position:fixed;inset:0;z-index:22;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-dim);font-size:3vmin;font-weight:300}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}