/* מסכים מתחלפים + חלון מודעות.
   נטען אחרי board.css ומשנה את הפריסה רק כשמצב המסכים פעיל. */

/* ---------- הבמה ---------- */
body[data-screens] #display-root {
  display: block;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* הבמה שומרת על יחס המסך שנבחר וממורכזת במסך בפועל.
   כך פריסה שנבנתה ל-16:9 נראית נכון גם על מסך בפרופורציה אחרת. */
#screen-stage {
  position: relative;
  aspect-ratio: var(--aspect, 16 / 9);
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.screen-block {
  position: absolute;
  overflow: hidden;
  padding: 0.4vmin;
  box-sizing: border-box;
  animation: block-in .35s ease both;
}
@keyframes block-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* האלמנטים המקוריים ממלאים את הקובייה במקום את הפריסה הקלאסית */
.screen-block > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.screen-block .card { display: flex; flex-direction: column; }
.screen-block .scroll-viewport { flex: 1; min-height: 0; }

/* ---------- חלון המודעות ---------- */
.media-window {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .22);
  border-radius: 1vmin;
  overflow: hidden;
}
.media-window .media-img,
.media-window .media-pdf {
  width: 100%; height: 100%;
  display: block; border: 0;
}
.media-window .media-pdf { background: #fff; }
/* PDF מקבל מידות מדויקות מ-display.js כדי שכל הדף ייכנס ללוח */
.media-window .media-pdf { max-width: 100%; max-height: 100%; }

/* כותרת בלי שעון / בלי תאריך — "רק שם", כשיש קוביית שעון נפרדת */
.display-header.no-clock .clock { display: none; }
.display-header.no-sub .sub { display: none !important; }
.display-header.no-clock.header-2col { grid-template-columns: 1fr; }
.media-empty {
  color: rgba(255, 255, 255, .45);
  font-size: 1.6vmin;
  text-align: center; padding: 1rem;
}

/* ---------- לוגו ---------- */
.logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- עורך המסכים בממשק הניהול ---------- */
.sc-editor { display: grid; gap: 14px; }

.sc-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sc-bar select, .sc-bar input[type=number], .sc-bar input[type=text] {
  padding: 6px 10px; font: inherit; font-size: 14px;
  border: 1px solid #d0d4dd; border-radius: 8px; background: #fff;
}
.sc-bar label { font-size: 13px; font-weight: 600; }

.sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-tabs .sc-tab {
  padding: 6px 12px; border: 1px solid #d0d4dd; border-radius: 8px;
  background: #fff; cursor: pointer; font: inherit; font-size: 13.5px;
}
.sc-tabs .sc-tab.active { background: #0e1320; color: #fff; border-color: #0e1320; }

/* לוח העריכה — אותו יחס מסך כמו הצג האמיתי */
.sc-canvas-wrap {
  position: relative; width: 100%;
  aspect-ratio: var(--sc-aspect, 16 / 9);
  background: #0e1320;
  border: 1px solid #d0d4dd; border-radius: 8px;
  overflow: hidden;
  touch-action: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: calc(100% / 24) calc(100% / 18);
}

.sc-block {
  position: absolute;
  background: rgba(212, 175, 55, .18);
  border: 1.5px solid var(--sb-gold, #d4af37);
  border-radius: 6px;
  color: #fff; font-size: 13px; font-weight: 600;
  display: grid; place-items: center; text-align: center;
  cursor: grab; user-select: none;
  overflow: hidden;
}
.sc-block.selected {
  background: rgba(96, 165, 250, .25);
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .35);
  z-index: 3;
}
.sc-block.dragging { cursor: grabbing; opacity: .85; z-index: 4; }
.sc-block .sc-label { pointer-events: none; padding: 2px; line-height: 1.25; }
.sc-block .sc-size {
  pointer-events: none; font-size: 10.5px; font-weight: 400;
  opacity: .7; display: block;
}

/* ידית שינוי גודל — בפינה השמאלית-תחתונה, נוח בממשק RTL */
.sc-handle {
  position: absolute; inset-inline-start: 0; bottom: 0;
  width: 16px; height: 16px;
  background: #60a5fa; border-radius: 4px 0 6px 0;
  cursor: nwse-resize;
}
.sc-block:not(.selected) .sc-handle { opacity: .35; }

.sc-when {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px dashed #d0d4dd; border-radius: 8px; background: #fafbfd;
  font-size: 13px;
}
.sc-when > b { font-size: 13px; }
.sc-when label { display: inline-flex; align-items: center; gap: 5px; }
.sc-when input[type=date], .sc-when input[type=time] {
  padding: 4px 7px; font: inherit; font-size: 13px;
  border: 1px solid #d0d4dd; border-radius: 6px; background: #fff;
}
.sc-when .sc-when-hint { color: #6b7280; flex-basis: 100%; }
.sc-when .sc-clear { margin-inline-start: auto; }

.sc-palette { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-palette button {
  padding: 5px 11px; font: inherit; font-size: 13px;
  border: 1px dashed #b9bfcc; border-radius: 8px;
  background: #fff; cursor: pointer;
}
.sc-palette button:hover { border-color: var(--sb-gold, #d4af37); }
.sc-palette button[disabled] { opacity: .4; cursor: not-allowed; }

.sc-hint { font-size: 12.5px; color: #6b7280; }

.sc-props-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid #e6e9f0; border-radius: 8px; padding: 12px; background: #fafbfd;
  min-height: 46px;
}
.sc-prop { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sc-prop input[type=number] { width: 66px; padding: 5px 7px; font: inherit; font-size: 13px;
  border: 1px solid #d0d4dd; border-radius: 6px; }
.sc-prop input[type=range] { width: 110px; }

.mp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #e6e9f0;
}
.mp-row span { flex: 1; }
.mp-row:last-child { border-bottom: 0; }

/* ---------- עורך זמן תפילה ---------- */
.tm-entry {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px; border: 1px solid #e6e9f0; border-radius: 8px;
  margin-bottom: 6px; background: #fafbfd;
}
.tm-entry select, .tm-entry input {
  padding: 5px 8px; font: inherit; font-size: 13px;
  border: 1px solid #d0d4dd; border-radius: 6px;
}
.tm-entry input[type=time] { width: 108px; }
.tm-entry input[type=number] { width: 72px; }
.tm-days { display: flex; gap: 3px; flex-wrap: wrap; }
.tm-days label {
  font-size: 12px; padding: 3px 7px; border: 1px solid #d0d4dd;
  border-radius: 999px; cursor: pointer; user-select: none; background: #fff;
}
.tm-days label.on { background: #0e1320; color: #fff; border-color: #0e1320; }
.tm-days input { display: none; }
.tm-result { font-size: 12px; color: #6b7280; }

/* ---------- קוביות חדשות ----------
   כולן בנויות כ-.card כדי שערכת הצבע והסגנון (מסורתי, זכוכית, נועז...) יחולו עליהן. */
.blk { display: flex; flex-direction: column; min-height: 0; }
.blk h2 { flex: 0 0 auto; }
.blk .blk-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.blk-empty { color: var(--text-dim); text-align: center; font-size: calc(var(--fs, 1) * 1.6vmin); padding: 1vmin; }

/* שעון גדול */
.blk-clock { align-items: center; justify-content: center; text-align: center; padding: 1vmin; }
.blk-clock .big-time { font-size: 1px; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; line-height: 1; color: var(--text); }
.blk-clock .big-time small { font-size: 0.42em; color: var(--text-dim); font-weight: 600; margin-inline-start: 0.15em; }
.blk-clock svg { width: 100%; height: 100%; max-height: 100%; }
.blk-clock .hand { stroke: var(--text); stroke-linecap: round; }
.blk-clock .hand-sec { stroke: var(--accent); }
.blk-clock .tick { stroke: var(--text-dim); }
.blk-clock .tick-big { stroke: var(--accent); }
.blk-clock .face { fill: var(--bg-card); stroke: var(--border); }
.blk-clock .pin { fill: var(--accent); }
.blk-clock .dot { fill: var(--text-dim); }
.blk-clock .dot-big { fill: var(--accent); }
.blk-clock .tick-min { stroke: var(--text-dim); opacity: 0.55; }
.blk-clock .num { fill: var(--text); font-size: 9px; font-weight: 700; font-family: inherit; }
.blk-clock .num-roman { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: 8px; }
.blk-clock.face-hebrew .num { font-family: 'Frank Ruhl Libre', 'David Libre', serif; font-size: 9.5px; }
.blk-clock.face-minimal .hand, .blk-clock.face-modern .hand { stroke: var(--text); }
.blk-clock.face-modern .face { stroke: transparent; fill: color-mix(in srgb, var(--bg-card) 70%, var(--accent) 6%); }

/* דיגיטלי: דק — משקל קל; לד — ספרות "מנורה" עם רפאים ו-זוהר; קלפים — כל ספרה בכרטיס */
.blk-clock.face-thin .big-time { font-weight: 300; letter-spacing: 0.02em; }
.blk-clock.face-thin .big-time small { font-weight: 300; }
.blk-clock.face-seven .big-time { position: relative; font-family: 'Orbitron', 'Share Tech Mono', 'Courier New', monospace; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); text-shadow: 0 0 0.12em color-mix(in srgb, var(--accent) 70%, transparent); }
.blk-clock.face-seven .ghost { position: absolute; inset: 0; color: var(--text); opacity: 0.07; text-shadow: none; pointer-events: none; }
.blk-clock.face-seven .bt-hm { position: relative; }
.blk-clock.face-seven .big-time small { color: var(--accent-2); text-shadow: none; }
.blk-clock .flip { display: inline-flex; align-items: center; gap: 0.08em; }
.blk-clock .flip .fd {
  display: inline-block; min-width: 0.78em; padding: 0.08em 0.06em; border-radius: 0.1em;
  background: color-mix(in srgb, var(--text) 10%, var(--bg-card)); color: var(--text);
  position: relative; line-height: 1.1; box-shadow: inset 0 -0.05em 0 rgba(0,0,0,0.25);
}
.blk-clock .flip .fd::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.35); }
.blk-clock .flip .fd.fd-s { font-size: 0.55em; color: var(--text-dim); }
.blk-clock .flip .fd:nth-child(6) { margin-inline-start: 0.2em; }
.blk-clock .flip i { font-style: normal; color: var(--text-dim); padding: 0 0.04em; }
.blk-clock .flip .fd.tick { animation: fd-flip 0.35s ease-out; }
@keyframes fd-flip { from { transform: rotateX(70deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
.blk-clock .bt-date { font-size: 1px; color: var(--text-dim); margin-top: 0.3em; }

/* תאריך גדול */
.blk-date { align-items: center; justify-content: center; text-align: center; padding: 1vmin; gap: 0.6vmin; }
.blk-date .d-heb { font-size: 1px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.blk-date .d-greg { font-size: 1px; color: var(--text-dim); }
.blk-date .d-parasha { font-size: 1px; color: var(--accent-2); font-weight: 600; }

/* לוח שבת */
.blk-shabbat .sh-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1vmin;
    padding: 0.6vmin 0; border-bottom: 1px solid var(--border); font-size: calc(var(--fs, 1) * clamp(1rem, 1.5vw, 1.7rem)); }
.blk-shabbat .sh-row:last-child { border-bottom: 0; }
.blk-shabbat .sh-row b { color: var(--accent); direction: ltr; font-variant-numeric: tabular-nums; }
.blk-shabbat .sh-parasha { text-align: center; color: var(--accent-2); font-weight: 700; margin-bottom: 0.6vmin;
    font-size: calc(var(--fs, 1) * clamp(1.1rem, 1.7vw, 2rem)); }

/* היום */
.blk-today .blk-body { justify-content: center; gap: 0.5vmin; }
.blk-today .td-item { font-size: calc(var(--fs, 1) * clamp(1rem, 1.5vw, 1.8rem)); color: var(--text); padding: 0.3vmin 0; }
.blk-today .td-item b { color: var(--accent); }
.blk-today.blk-inline .blk-body { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4vmin 2vmin; }

/* לימוד יומי */
.blk-learning .ln-row { display: flex; justify-content: space-between; gap: 1vmin; padding: 0.5vmin 0; border-bottom: 1px dashed var(--border);
    font-size: calc(var(--fs, 1) * clamp(0.95rem, 1.35vw, 1.6rem)); }
.blk-learning .ln-row:last-child { border-bottom: 0; }
.blk-learning .ln-name { color: var(--text-dim); white-space: nowrap; }
.blk-learning .ln-val { color: var(--text); font-weight: 700; text-align: left; }

/* הקדשות וברכות */
.blk-dedications .blk-body { align-items: center; text-align: center; justify-content: center; }
.blk-dedications .dd-type { color: var(--accent); font-weight: 700; font-size: calc(var(--fs, 1) * clamp(1.1rem, 1.6vw, 1.9rem)); }
.blk-dedications .dd-text { font-size: calc(var(--fs, 1) * clamp(1.3rem, 2.2vw, 2.8rem)); font-weight: 800; line-height: 1.25; margin: 0.6vmin 0; }
.blk-dedications .dd-by { color: var(--text-dim); font-size: calc(var(--fs, 1) * clamp(0.95rem, 1.3vw, 1.5rem)); }
.blk-dedications .dd-dots { display: flex; gap: 0.5vmin; justify-content: center; margin-top: 0.8vmin; }
.blk-dedications .dd-dots i { width: 0.9vmin; height: 0.9vmin; border-radius: 50%; background: var(--border); }
.blk-dedications .dd-dots i.on { background: var(--accent); }
.dd-fade { animation: dd-in .6s ease both; }
@keyframes dd-in { from { opacity: 0; transform: translateY(0.6vmin); } to { opacity: 1; transform: none; } }

/* שיעורים */
.blk-shiurim .sr-row { display: grid; grid-template-columns: auto 1fr; gap: 0 1.2vmin; align-items: baseline; padding: 0.5vmin 0; border-bottom: 1px solid var(--border);
    font-size: calc(var(--fs, 1) * clamp(0.95rem, 1.35vw, 1.6rem)); }
.blk-shiurim .sr-row:last-child { border-bottom: 0; }
.blk-shiurim .sr-time { color: var(--accent); font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.blk-shiurim .sr-title { font-weight: 700; }
.blk-shiurim .sr-meta { grid-column: 2; color: var(--text-dim); font-size: 0.85em; }
.blk-shiurim .sr-day { grid-column: 1 / -1; color: var(--accent-2); font-weight: 700; margin-top: 0.6vmin; font-size: 0.9em; }

/* טקסט מתחלף */
.blk-text .blk-body { justify-content: center; }
.blk-text .tx-title { color: var(--accent); font-weight: 700; margin-bottom: 0.6vmin; font-size: calc(var(--fs, 1) * clamp(1.1rem, 1.6vw, 1.9rem)); }
.blk-text .tx-body { font-size: calc(var(--fs, 1) * clamp(1.05rem, 1.55vw, 1.85rem)); line-height: 1.5; white-space: pre-wrap; }

/* ספירת העומר */
.blk-omer { align-items: center; justify-content: center; text-align: center; }
.blk-omer .om-big { font-size: 1px; font-weight: 900; color: var(--accent); line-height: 1; }
.blk-omer .om-text { font-size: 1px; color: var(--text); margin-top: 1vmin; }
.blk-omer .om-sefira { font-size: 1px; color: var(--text-dim); margin-top: 0.5vmin; }

/* מזג אוויר */
.blk-weather .wx-now { display: flex; align-items: center; justify-content: center; gap: 1.5vmin; }
.blk-weather .wx-icon { font-size: calc(var(--fs, 1) * clamp(2rem, 4vw, 5rem)); line-height: 1; }
.blk-weather .wx-temp { font-size: calc(var(--fs, 1) * clamp(2rem, 3.6vw, 4.5rem)); font-weight: 800; direction: ltr; }
.blk-weather .wx-desc { color: var(--text-dim); text-align: center; font-size: calc(var(--fs, 1) * clamp(0.9rem, 1.2vw, 1.4rem)); }
.blk-weather .wx-days { display: flex; justify-content: space-around; margin-top: 1vmin; gap: 0.5vmin; }
.blk-weather .wx-day { text-align: center; font-size: calc(var(--fs, 1) * clamp(0.85rem, 1.1vw, 1.3rem)); color: var(--text-dim); }
.blk-weather .wx-day .ic { font-size: 1.6em; line-height: 1.2; }
.blk-weather .wx-day b { color: var(--text); direction: ltr; display: block; }

/* התפילה הבאה — ספירה לאחור */
.blk-countdown { align-items: center; justify-content: center; text-align: center; }
.blk-countdown .cd-label { color: var(--text-dim); font-size: calc(var(--fs, 1) * clamp(1rem, 1.5vw, 1.8rem)); }
.blk-countdown .cd-name { color: var(--accent); font-weight: 800; font-size: calc(var(--fs, 1) * clamp(1.4rem, 2.4vw, 3rem)); margin: 0.4vmin 0; }
.blk-countdown .cd-time { font-size: 1px; font-weight: 900; direction: ltr; font-variant-numeric: tabular-nums; line-height: 1; }
.blk-countdown .cd-at { color: var(--text-dim); font-size: calc(var(--fs, 1) * clamp(0.95rem, 1.3vw, 1.5rem)); margin-top: 0.6vmin; direction: ltr; }

/* אלמנטים של הפריסה הקלאסית שלא במסך הנוכחי — מוסתרים באמת
   (ה-CSS של .card/.display-header דורס את hidden של הדפדפן) */
body[data-screens] #display-root [hidden] { display: none !important; }

/* קוביות קטנות: פחות ריפוד, בלי גלישה */
.screen-block .card.blk { padding: clamp(0.6rem, 1.2vw, 1.4rem); }
.blk .blk-body { overflow: hidden; }
.blk-inline { padding: 0.4vmin 1.5vmin !important; }
.blk-shabbat .blk-body, .blk-learning .blk-body, .blk-shiurim .blk-body { justify-content: flex-start; }
.blk-shabbat .sh-row { padding: 0.35vmin 0; font-size: calc(var(--fs, 1) * clamp(0.9rem, 1.3vw, 1.55rem)); }
.blk-weather .wx-icon { font-size: calc(var(--fs, 1) * clamp(1.6rem, 3vw, 3.8rem)); }
.blk-weather .wx-temp { font-size: calc(var(--fs, 1) * clamp(1.6rem, 3vw, 3.6rem)); }
.blk-weather .wx-day { font-size: calc(var(--fs, 1) * clamp(0.75rem, 1vw, 1.15rem)); }
.blk-weather .wx-day .ic { font-size: 1.4em; }
