/* =========================================================================
   شاشة المسجد — Mosque TV display
   Scales to any 16:9 screen using viewport units. Edit colours below.
   ========================================================================= */

:root {
  --ink:        #f6f1e2;   /* main text (warm white) */
  --ink-dim:    #d8cfb4;   /* secondary text */
  --gold:       #e9c873;   /* accent / next prayer */
  --gold-soft:  #f3dea2;
  --panel:      rgba(12, 22, 26, 0.42);  /* card background */
  --panel-edge: rgba(233, 200, 115, 0.35);
  --next-bg:    rgba(233, 200, 115, 0.16);
  --overlay:    rgba(4, 10, 14, 0.50);   /* darkening over the photo */
  --shadow:     0 0.3vh 1.2vh rgba(0,0,0,0.55);
  --font: "Cairo", "Geeza Pro", "Damascus", "Noto Naskh Arabic", system-ui, sans-serif;
  --font-num: "Almarai", "Cairo", "Geeza Pro", sans-serif;  /* digits/clock — try "Readex Pro", "Tajawal", "Noto Kufi Arabic" */
  --font-quran: "Scheherazade New", "Amiri", "Geeza Pro", serif;   /* roomy, clear tashkeel for vocalized text */
  --font-title: "Aref Ruqaa", "Cairo", serif;
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #0a1418; color: var(--ink);
  font-family: var(--font);
  cursor: none;                 /* hide pointer on the kiosk */
  user-select: none;
}

.hidden { display: none !important; }

/* ---- background photo + darkening overlay ---- */
#bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity 1.2s ease;
}
#overlay {
  position: fixed; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%),
    var(--overlay);
}

/* ---- layout ---- */
#screen {
  position: relative; z-index: 2;
  height: 100%; width: 100%;
  text-shadow: var(--shadow);
}
/* each element is positioned independently (centre-anchored) from config.layout */
.lay { position: absolute; transform: translate(-50%, -50%); }

/* ---- top bar ---- */
.topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* fixed thirds: clock digit changes never push weather/dates */
  align-items: center;
}

.clockwrap { text-align: center; }
.masjid-logo-el.empty, .masjid-name-el.empty { display: none; }
.masjid-logo { height: 11vh; width: auto; max-width: 22vw; object-fit: contain; display: block; }
.masjid-logo:not([src]), .masjid-logo[src=""] { display: none; }
.masjid-name { font-family: "Aref Ruqaa", "Amiri", serif; font-size: 4vh; font-weight: 700; color: var(--ink); text-shadow: 0 2px 8px rgba(0,0,0,.55); white-space: nowrap; }

/* ---- on-screen layout edit mode (index.html?edit=1) ---- */
body.editing { cursor: auto !important; }
body.editing .gear { display: none !important; }
body.editing .lay { cursor: grab; user-select: none; touch-action: none; outline: 1px dashed rgba(255,255,255,.3); outline-offset: 5px; transition: outline-color .15s; }
body.editing .lay:hover { outline-color: var(--gold); }
body.editing .lay.ed-sel { outline: 2px solid var(--gold); }
body.editing .lay.ed-blocked { outline: 2px solid #e0807f; }
body.editing .lay:active { cursor: grabbing; }
.edit-guide { position: absolute; background: #6ab0f3; box-shadow: 0 0 6px #6ab0f3; z-index: 40; pointer-events: none; }
.edit-guide.v { width: 2px; top: 0; bottom: 0; transform: translateX(-1px); }
.edit-guide.h { height: 2px; left: 0; right: 0; transform: translateY(-1px); }
.edit-bar { position: fixed; top: 14px; right: 14px; left: auto; z-index: 100; width: 234px; background: rgba(8,12,16,.95); backdrop-filter: blur(8px); border: 1px solid rgba(233,200,115,.35); border-radius: 14px; padding: 8px; color: #f0ece0; font-family: "Cairo", system-ui, sans-serif; box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: opacity .12s; }
body.ed-dragging .edit-bar { opacity: .1; pointer-events: none; }    /* fade out of the way while placing an element */
.lay-hidden { display: none !important; }
.ticker.empty { display: none; }

/* Arabic honorific ligatures — SIL Scheherazade New (OFL). Self-host the FULL font in fonts/;
   the jsdelivr URL is a fallback so it renders before you add the local file. */
@font-face {
  font-family: "Scheherazade New";
  src: url("fonts/ScheherazadeNew-Regular.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/@fontsource/scheherazade-new@5/files/scheherazade-new-arabic-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
.honorific { font-family: "Scheherazade New", "Scheherazade", "Amiri", serif; color: var(--gold); font-size: 1.15em; line-height: 1; }
.honorific-plain { font-family: "Amiri", "Scheherazade New", serif; color: var(--gold); font-size: 1.08em; }   /* جل جلاله (ﷻ) — most fonts already have it */
.hon-alt { position: absolute; opacity: 0; font-size: 1px; width: 1px; height: 1px; overflow: hidden; user-select: none; -webkit-user-select: none; pointer-events: none; }
body.editing .lay .ed-x { position: absolute; top: -10px; inset-inline-end: -10px; width: 22px; height: 22px; border-radius: 50%; background: #e0807f; color: #fff; border: 2px solid #0c1418; font-size: 11px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; z-index: 6; }
body.editing .lay:hover .ed-x, body.editing .lay.ed-sel .ed-x { display: flex; }
body.editing .lay .ed-size { position: absolute; bottom: -10px; inset-inline-start: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #0c1418; border: 2px solid #0c1418; font-size: 12px; line-height: 1; cursor: nwse-resize; display: none; align-items: center; justify-content: center; padding: 0; z-index: 6; }
body.editing .lay:hover .ed-size, body.editing .lay.ed-sel .ed-size { display: flex; }
body.editing .lay .ed-w { position: absolute; top: 50%; right: -7px; transform: translateY(-50%); width: 12px; height: 36px; border-radius: 6px; background: var(--gold); border: 2px solid #0c1418; cursor: ew-resize; display: none; z-index: 6; padding: 0; }
body.editing .lay:hover .ed-w, body.editing .lay.ed-sel .ed-w { display: block; }
.edit-bar .eb-hidden { flex-wrap: wrap; }
.edit-bar .eb-restore { background: #1c2c36; color: #cdd6dc; border: 1px solid #2a3a44; border-radius: 7px; padding: 5px 10px; font-family: inherit; font-size: 12px; cursor: pointer; }
.edit-bar .eb-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.edit-bar .eb-head { border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; margin-bottom: 2px; }
.edit-bar .eb-grip { cursor: grab; color: #6b7a84; font-size: 15px; touch-action: none; }
.edit-bar .eb-title { font-weight: 700; color: var(--gold); flex: 1; font-size: 14px; }
.edit-bar .eb-lbl { font-size: 12px; color: #9fb0bb; }
.edit-bar .eb-mini { font-size: 11px; color: #9fb0bb; width: 40px; }
.edit-bar .eb-slider input { flex: 1; accent-color: var(--gold); }
.edit-bar .eb-tip { font-size: 11px; color: #6b7a84; }
.edit-bar .eb-done { background: var(--gold); color: #0c1418; font-weight: 700; border: none; border-radius: 8px; padding: 6px 14px; font-family: inherit; font-size: 13px; cursor: pointer; }
.edit-bar .eb-btn { background: #1c2c36; color: #f0ece0; border: 1px solid #2a3a44; border-radius: 8px; padding: 8px 12px; font-family: inherit; font-size: 13px; cursor: pointer; width: 100%; }
.edit-bar .eb-btn:hover { border-color: var(--gold); }
.edit-bar .eb-icons { display: flex; gap: 5px; margin-inline-start: auto; }
.edit-bar .eb-ic { width: 32px; height: 27px; background: #1c2c36; border: 1px solid #2a3a44; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.edit-bar .eb-ic svg { width: 16px; height: 13px; fill: #cdd6dc; }
.edit-bar .eb-ic.on { background: var(--gold); border-color: var(--gold); }
.edit-bar .eb-ic.on svg { fill: #0c1418; }
.edit-bar .eb-swatches { flex-wrap: wrap; gap: 5px; }
.edit-bar .eb-sw { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.edit-bar .eb-sw.on { border-color: #fff; }
.edit-bar .eb-sw-custom { display: flex; align-items: center; justify-content: center; background: #1c2c36; color: #9fb0bb; position: relative; overflow: hidden; font-size: 15px; }
.edit-bar .eb-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.clock {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 11vh;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.clock-meridiem { font-size: 2.4vh; color: var(--ink-dim); margin-top: 0.4vh; letter-spacing: 0.3em; }

/* time separator — same colour as the digits, just a touch of spacing */
.sep { margin: 0 0.04em; }
.dig { display: inline-block; width: 0.6em; text-align: center; }   /* fixed-width digit cells → numbers never shift left/right */
.clock, .pcard .pc-time, .countdown .cd-time { direction: ltr; white-space: nowrap; }  /* keep digits in reading order + on one line (inline-block flips/wraps in RTL) */

.dates { text-align: center; display: flex; flex-direction: column; gap: 0.6vh; }
.date-hijri { font-size: 3.3vh; font-weight: 700; color: var(--gold); }
.date-greg  { font-size: 2.9vh; color: var(--ink-dim); }

.weather { display: flex; align-items: center; gap: 1vw; }
.weather .wx-icon { width: 7vh; height: 7vh; color: var(--gold); filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.weather .wx-temp { font-family: var(--font-num); font-size: 4.6vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.weather .wx-meta { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.weather .wx-city { font-size: 2.7vh; font-weight: 600; color: var(--ink-dim); }

/* ---- countdown banner ---- */
.countdown {
  justify-self: center;
  display: flex; align-items: baseline; justify-content: center; gap: 1.2vw;
  width: 42vw;                    /* fixed pill: content recenters inside, nothing shifts */
  padding: 1vh 2vw;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.countdown .cd-time { font-feature-settings: "tnum" 1; }
.countdown .cd-label { font-size: 3vh; color: var(--ink-dim); }
.countdown .cd-name  { font-size: 3.4vh; font-weight: 700; color: var(--gold); }
.countdown .cd-time  { font-family: var(--font-num); font-size: 4.2vh; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---- prayer cards ---- */
.middle {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3vh; min-height: 0;
}
.prayers {
  width: 92%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.4vw;
}
.pcard {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2.2vh;
  padding: 2.6vh 1vw 2.2vh;
  text-align: center;
  backdrop-filter: blur(7px);
  transition: transform .4s ease, background .4s ease, border-color .4s ease;
}
.pcard .pc-icon {
  width: 10vh; height: 10vh; margin: 0 auto 1vh;
  color: var(--gold-soft); background-color: currentColor; opacity: .95;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.pcard .pc-name { font-size: 3.4vh; font-weight: 700; color: var(--ink); }
.pcard .pc-time { font-family: var(--font-num); font-size: 4.8vh; font-weight: 700; margin-top: 0.6vh; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pcard .pc-kicker { font-size: 2vh; font-weight: 600; color: var(--ink-dim); min-height: 0; letter-spacing: .02em; }
.prayers.has-labels .pc-kicker { min-height: 2.4vh; }
.pcard-lay { width: 15vw; }   /* a prayer card as its own movable element (separate-panels mode) */

/* the upcoming prayer */
.pcard.next {
  background: var(--next-bg);
  border-color: var(--gold);
  transform: translateY(-1.2vh) scale(1.04);
  box-shadow: 0 1vh 3vh rgba(0,0,0,.45), 0 0 2vh rgba(233,200,115,.25) inset;
}
.pcard.next .pc-name, .pcard.next .pc-time, .pcard.next .pc-kicker { color: var(--gold); }
.pcard.next .pc-icon { color: var(--gold); opacity: 1; }

/* non-prayer rows (e.g. sunrise) sit quieter */
.pcard.info { opacity: 0.82; }

/* ---- cycling text ---- */
.ticker {
  display: flex; align-items: center; justify-content: center; gap: 1.5vw;
  padding: 0 1vw;
  width: 96%; height: 20vh;    /* near full-width; fixed box so text never shifts the rest (taller = room for 2 vocalized lines) */
  overflow: hidden;
}
.ticker .star { font-size: 3.4vh; color: var(--gold); opacity: .8; flex: 0 0 auto; }
.ticker-text {
  text-align: center;
  transition: opacity .8s ease;
  max-width: 94vw;
}
.ticker-text.fade { opacity: 0; }
.ticker-text .tx-main {
  font-family: var(--font-quran);
  font-size: calc(5.8vh * var(--tk-scale, 1));   /* auto-fit (app.js fitText) shrinks long items to fit the box */
  font-weight: 400;            /* regular Naskh — bold crowds the tashkeel marks against the letters */
  line-height: 2.0;            /* roomy so tashkeel (marks above/below) don't collide between lines */
  color: var(--ink);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);   /* definition over the background; compensates for the lighter weight */
}
.ticker-text .tx-src {
  font-size: calc(2.4vh * var(--tk-scale, 1));
  color: var(--gold);
  margin-top: 1.6vh;          /* clear gap so the source never touches the vocalized text above */
}

/* ---- background picker (opens when you click the weather) ---- */
.picker-backdrop {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(5px);
}
.picker {
  width: min(82vw, 130vh); max-height: 82vh; overflow: auto;
  background: #0e1a20; border: 1px solid var(--panel-edge);
  border-radius: 2vh; padding: 3vh 2.4vw; box-shadow: 0 2vh 6vh rgba(0,0,0,.6);
}
.picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.4vh; }
.picker-head span { font-size: 3vh; font-weight: 700; color: var(--gold); }
.picker-close { background: none; border: none; color: var(--ink); font-size: 4.4vh; line-height: 1; cursor: pointer; padding: 0 1vw; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24vh, 1fr)); gap: 2vh; }
.thumb {
  height: 15vh; border-radius: 1.4vh; border: 0.4vh solid transparent;
  background-size: cover; background-position: center; background-color: #000;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.thumb:hover { transform: scale(1.03); }
.thumb.is-current { border-color: var(--gold); }
.picker-add {
  height: 15vh; border-radius: 1.4vh; border: 0.3vh dashed var(--panel-edge);
  background: rgba(255,255,255,.04); color: var(--ink-dim);
  font-family: var(--font); font-size: 2.4vh; cursor: pointer;
}
.picker-add:hover { color: var(--ink); border-color: var(--gold); }

/* colour picker (opens when you click the date) */
.color-picker { width: min(64vw, 95vh); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10vh, 1fr)); gap: 2vh; }
.swatch { position: relative; height: 10vh; border-radius: 1.4vh; border: 0.5vh solid transparent; cursor: pointer; transition: transform .15s ease; }
.swatch:hover { transform: scale(1.05); }
.swatch.is-current { border-color: #fff; box-shadow: 0 0 0 0.3vh rgba(0,0,0,.45); }
.swatch-custom { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,.06); border: 0.3vh dashed var(--panel-edge); color: var(--ink-dim); font-size: 4vh; }
.swatch-custom input { position: absolute; inset: -25%; width: 150%; height: 150%; border: none; padding: 0; background: none; cursor: pointer; opacity: 0; }
.swatch-x { position: absolute; top: -0.7vh; right: -0.7vh; width: 2.6vh; height: 2.6vh; line-height: 2.3vh; text-align: center; border-radius: 50%; background: #0e1a20; color: #fff; font-size: 1.9vh; border: 1px solid var(--panel-edge); }

/* "move image" button + floating position bar */
.picker-move { margin-top: 2.4vh; width: 100%; padding: 1.4vh; border-radius: 1.4vh; border: 0.3vh dashed var(--panel-edge); background: rgba(255,255,255,.04); color: var(--ink-dim); font-family: var(--font); font-size: 2.2vh; cursor: pointer; }
.picker-move:hover { color: var(--ink); border-color: var(--gold); }
.pos-bar { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 1.6vw; background: #0e1a20; border: 1px solid var(--panel-edge); border-radius: 1.4vh; padding: 1.5vh 2vw; box-shadow: 0 1vh 4vh rgba(0,0,0,.6); }
.pos-bar > span { color: var(--gold); font-size: 2.3vh; font-weight: 700; }
.pos-bar label { color: var(--ink-dim); font-size: 2vh; display: flex; align-items: center; gap: .6vw; }
.pos-bar input[type=range] { width: 13vw; accent-color: var(--gold); cursor: pointer; }
.pos-done { background: var(--gold); color: #0e1a20; border: none; border-radius: 1vh; padding: .9vh 1.8vw; font-size: 2vh; font-weight: 700; cursor: pointer; font-family: var(--font); }

/* settings gear — only visible when a mouse is moving (so it never shows on the TV) */
.gear {
  position: fixed; bottom: 2.5vh; left: 2.5vh; z-index: 30;
  width: 7vh; height: 7vh; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.6vh; line-height: 1; color: var(--ink-dim); text-decoration: none;
  background: var(--panel); border: 1px solid var(--panel-edge);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.ui-visible .gear { opacity: .9; pointer-events: auto; }
.gear:hover { color: var(--gold); border-color: var(--gold); }

/* ---- error screen ---- */
.errscreen {
  position: fixed; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: #0a1418;
}
.err-card { text-align: center; padding: 6vh; border: 1px solid var(--panel-edge); border-radius: 3vh; background: var(--panel); }
.err-title { font-size: 5vh; font-weight: 900; color: var(--gold); margin-bottom: 2vh; }
.err-body  { font-size: 2.8vh; color: var(--ink-dim); line-height: 1.7; direction: ltr; }