/* ============================================================
   Masjid Salah Board — display styling
   Deep forest green ground, white marble arch and columns,
   parchment panels with gold-ruled tables.
   Built for 1920x1080; scales down to a phone.
   ============================================================ */
:root{
  --green-900:#08260c;
  --green-800:#0f3a12;
  --green-700:#164a18;
  --green-600:#1d5b20;
  --ink:#0e3410;          /* text on parchment */
  --ink-soft:#4a6b48;
  --gold:#c9a227;
  --gold-pale:#f2e3b0;
  --gold-deep:#8a6a15;
  --marble:#fbfaf4;
  --marble-2:#e7e4d6;
  --marble-edge:#c4c0ae;
  --fajr:#7ec9ff;
  --amber:#f3d67e;
  --alert:#e3563d;
  --live:#7de0a8;
}

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

body{
  min-height:100vh;
  font-family:"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  color:#f2f6ee;
  background:
    radial-gradient(1400px 700px at 50% -14%, #26702a 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 3px, transparent 3px 7px),
    linear-gradient(178deg, var(--green-800) 0%, var(--green-900) 100%);
  overflow:hidden;
}

.stage{display:flex;flex-direction:column;height:100vh;padding:.5rem .8rem .4rem}

/* ---------- date rail ---------- */
.daterail{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.15rem .6rem .45rem;
  font-size:clamp(.85rem,1.45vw,1.5rem);font-weight:600;
  color:var(--gold-pale);letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.daterail .hijri{color:var(--amber)}

/* ---------- three columns ---------- */
.columns{
  flex:1;display:grid;gap:.75rem;
  grid-template-columns:1fr 1.62fr 1fr;
  min-height:0;
}
.rail{display:flex;flex-direction:column;gap:.75rem;min-height:0}

/* ---------- marble slab panels ---------- */
.slab{
  position:relative;
  background:linear-gradient(178deg,var(--marble) 0%,#f4f2e8 60%,var(--marble-2) 100%);
  color:var(--ink);
  border:1px solid var(--marble-edge);
  border-radius:5px;
  padding:.55rem .8rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.42), inset 0 1px 0 #fff;
  min-height:0;
}
/* marble lintel above, gold plinth below — the shelf motif */
.slab::before{
  content:"";position:absolute;left:-7px;right:-7px;top:-9px;height:9px;
  background:linear-gradient(180deg,#fff,#ddd9c9);
  border:1px solid var(--marble-edge);border-radius:3px 3px 0 0;
}
.slab::after{
  content:"";position:absolute;left:6px;right:6px;bottom:-4px;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.85;border-radius:0 0 3px 3px;
}
.slab h2{
  text-align:center;
  font-size:clamp(.78rem,1.15vw,1.22rem);font-weight:700;
  color:var(--green-700);letter-spacing:.02em;
  padding-bottom:.25rem;margin-bottom:.45rem;
  border-bottom:2px solid var(--gold);
}

/* ---------- ruled tables on the slabs ---------- */
.slab table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.slab th,.slab td{
  border:1px solid var(--green-600);
  padding:.22rem .3rem;text-align:center;
  font-size:clamp(.75rem,1.05vw,1.15rem);
}
.slab th{background:var(--gold-pale);color:var(--ink);font-weight:700}
.slab td{background:rgba(255,255,255,.55);font-weight:600}
.changes td:first-child{background:var(--gold-pale);font-weight:700;font-size:.9em}
.changes td.changed{color:#116b3c;font-weight:800}
.jumuah .khateeb{
  background:rgba(255,255,255,.55);font-style:italic;font-weight:600;
  color:var(--ink-soft);font-size:.92em;
}
.dua p{
  text-align:center;font-size:clamp(.78rem,1.05vw,1.05rem);
  line-height:1.45;color:var(--ink);padding:.15rem .2rem;
}

/* ---------- parchment (ayah / hadith / announcements) ---------- */
.parchment{
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(178deg,#fffef7 0%,#fbf7e6 100%);
}
.parchment.tall{flex:1.5}
.parchment{flex:1}
.rot-body{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:.4rem;text-align:center;min-height:0;padding:.15rem;
  transition:opacity .35s ease;
}
.rot-body.fade{opacity:0}
.rot-body .arabic{
  font-family:"Traditional Arabic","Amiri","Scheherazade New",serif;
  direction:rtl;line-height:1.95;
  font-size:clamp(1.05rem,1.75vw,1.85rem);color:var(--green-700);
}
.rot-body .translation{
  font-size:clamp(.82rem,1.18vw,1.25rem);line-height:1.5;color:var(--ink);
}
.rot-body .reference{
  font-size:clamp(.7rem,.92vw,.95rem);font-weight:700;
  color:var(--gold-deep);letter-spacing:.03em;
}
.rot-body .empty{color:var(--ink-soft);font-style:italic;font-size:.9rem}
.announce .title{
  font-size:clamp(.95rem,1.35vw,1.4rem);font-weight:700;
  color:var(--green-700);text-decoration:underline;text-underline-offset:3px;
}

/* ---------- centre nave ---------- */
.nave{
  position:relative;display:flex;flex-direction:column;gap:.55rem;
  padding:0 3.6vw;min-height:0;
}

/* twisted marble columns */
.pillar{
  position:absolute;top:2.5%;bottom:0;width:2.5vw;min-width:26px;max-width:52px;
  border-radius:7px;
  background:
    repeating-linear-gradient(102deg,
      #ffffff 0 6px, #f3f1e7 6px 11px, #d8d4c2 11px 15px, #f3f1e7 15px 20px, #ffffff 20px 26px);
  box-shadow:0 5px 18px rgba(0,0,0,.45), inset -4px 0 9px rgba(0,0,0,.16), inset 4px 0 7px rgba(255,255,255,.65);
}
.pillar-l{left:.2vw}
.pillar-r{right:.2vw}
/* capital and base */
.pillar::before,.pillar::after{
  content:"";position:absolute;left:-28%;right:-28%;height:16px;
  background:linear-gradient(180deg,#fff,#dcd8c7);
  border:1px solid var(--marble-edge);border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.pillar::before{top:-16px}
.pillar::after{bottom:0}

/* the arch */
.arch{position:relative;flex:0 0 auto;height:clamp(150px,25vh,290px)}
.arch-art{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.arch-inner{
  position:absolute;left:16%;right:16%;top:22%;bottom:2%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
}
.arch-inner .clock{
  font-size:clamp(2rem,5.2vw,4.9rem);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#fff;
  text-shadow:0 0 34px rgba(201,162,39,.55), 0 3px 10px rgba(0,0,0,.6);
}
.arch-inner .masjid{
  font-size:clamp(.95rem,2.05vw,1.95rem);font-weight:600;line-height:1.15;
  color:var(--amber);text-align:center;text-shadow:0 2px 7px rgba(0,0,0,.6);
}
.arch-inner .place{
  font-size:clamp(.6rem,.9vw,.88rem);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,227,176,.72);
}

/* salah table inside the nave */
.salah-table{
  flex:1;display:grid;grid-template-rows:auto repeat(5,1fr);
  border:2px solid var(--gold);border-radius:5px;overflow:hidden;
  background:rgba(4,26,8,.5);min-height:0;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.grid-head,.grid-row{display:grid;grid-template-columns:1.15fr 1fr 1fr}
.grid-head span{
  background:var(--gold-pale);color:var(--ink);
  font-size:clamp(.68rem,.98vw,1rem);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;text-align:center;padding:.22rem 0;
  border-right:1px solid var(--gold-deep);
}
.grid-head span:last-child{border-right:none}
.grid-row{border-top:1px solid rgba(201,162,39,.55);transition:background .5s ease}
.grid-row span{display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(201,162,39,.35)}
.grid-row span:last-child{border-right:none}
.grid-row .name{
  justify-content:flex-start;padding-left:1.1rem;
  font-size:clamp(1rem,1.85vw,2.05rem);font-weight:600;color:#fff;
}
.grid-row .adhan,.grid-row .jamaah{
  font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(1.25rem,2.75vw,3.05rem);line-height:1;
}
.grid-row .adhan{color:var(--amber)}
.grid-row .jamaah{color:#fff}
.grid-row[data-salah="fajr"] .name,
.grid-row[data-salah="fajr"] .adhan{color:var(--fajr)}
.grid-row.is-current{background:linear-gradient(90deg,rgba(125,224,168,.2),rgba(125,224,168,.04))}
.grid-row.is-current .name{color:var(--live)}

/* countdown */
.countdown{
  flex:0 0 auto;text-align:center;
  border:2px solid var(--gold);border-radius:5px;
  background:rgba(4,26,8,.5);padding:.3rem .5rem .45rem;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.countdown .eyebrow{
  font-size:clamp(.68rem,1.02vw,1.05rem);color:var(--gold-pale);
  letter-spacing:.12em;text-transform:uppercase;
}
.countdown .ticker{
  font-size:clamp(1.5rem,3.5vw,3.1rem);font-weight:700;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:.05em;color:#fff;
  text-shadow:0 0 26px rgba(201,162,39,.4);
}
.countdown .next-time{font-size:clamp(.68rem,1vw,1rem);color:rgba(242,246,238,.72)}
.countdown .next-time b{color:var(--amber)}
.countdown.imminent .ticker{color:var(--alert);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* ---------- plinth: full timetable + marquee ---------- */
.plinth{flex:0 0 auto;margin-top:.6rem}
.plinth ul{
  list-style:none;display:flex;justify-content:space-between;gap:.2rem;
  background:linear-gradient(180deg,#fff,#e6e3d3);
  border:1px solid var(--marble-edge);border-radius:5px;
  padding:.3rem .5rem;box-shadow:0 -3px 14px rgba(0,0,0,.35);
}
.plinth li{
  flex:1;display:flex;flex-direction:column;align-items:center;
  border-right:1px solid rgba(22,74,24,.22);padding:0 .1rem;
}
.plinth li:last-child{border-right:none}
.plinth li span{
  font-size:clamp(.52rem,.72vw,.8rem);color:var(--ink-soft);
  letter-spacing:.04em;white-space:nowrap;
}
.plinth li b{
  font-size:clamp(.75rem,1.15vw,1.28rem);color:var(--green-700);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.plinth li.zawaal span,.plinth li.zawaal b{color:var(--alert)}

.marquee{
  overflow:hidden;white-space:nowrap;margin-top:.3rem;
  font-size:clamp(.72rem,1.05vw,1.05rem);color:var(--gold-pale);letter-spacing:.06em;
}
.marquee div{display:inline-block;padding-left:100%;animation:scroll 28s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

.fatal{margin:auto;text-align:center;padding:3rem}
.fatal h1{color:var(--gold);margin-bottom:.6rem}
.fatal p{color:var(--gold-pale)}

@media (prefers-reduced-motion:reduce){
  .marquee div{animation:none;padding-left:1rem}
  .countdown.imminent .ticker{animation:none}
}

/* ---------- narrow screens ---------- */
@media (max-width:1150px){
  body{overflow:auto}
  .stage{height:auto}
  .columns{grid-template-columns:1fr}
  .nave{padding:0}
  .pillar{display:none}
  .arch{height:210px}
  .parchment,.parchment.tall{flex:none;min-height:170px}
  .plinth ul{flex-wrap:wrap}
  .plinth li{flex:0 0 31%;border-right:none;padding:.2rem 0}
}

/* ---------- 12-hour mode ----------
   "5:02 PM" is wider than "17:02", so the big figures come down a little
   and the meridiem sits smaller beside them. */
.fmt12 .grid-row .adhan,
.fmt12 .grid-row .jamaah{font-size:clamp(1rem,2.15vw,2.4rem);letter-spacing:-.01em}
.fmt12 .grid-head span{letter-spacing:.1em}
.fmt12 .arch-inner .clock{font-size:clamp(1.7rem,4.3vw,4rem)}
.fmt12 .arch-inner .clock .mer{font-size:.42em;font-weight:600;margin-left:.12em;
  letter-spacing:.06em;color:var(--gold-pale);vertical-align:.32em}
.fmt12 .countdown .ticker{font-size:clamp(1.4rem,3.2vw,2.9rem)}
.fmt12 .plinth li b{font-size:clamp(.62rem,.95vw,1.05rem)}
.fmt12 .plinth li span{font-size:clamp(.48rem,.66vw,.74rem)}
.fmt12 .slab th,.fmt12 .slab td{font-size:clamp(.65rem,.9vw,1rem);padding:.22rem .18rem}