body {
          font-family: 'Noto Sans Arabic', sans-serif;
          margin: 0;
          padding: 0;
          background-image: URL('Melamine-wood-004.png');
          background-repeat: repeat-x repeat-y;
          /* base font scales with viewport but is clamped to sensible limits */
          font-size: clamp(16px, 4vmin, 48px);
          color: white;
          background-color: #123f14;
        }

        /* header layout */
        header {
          padding: 1rem;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;
        }

        /* masjid name in header — big but will truncate if too long */
        #masjidName {
          font-weight: 700;
          font-size: clamp(18px, 5vmin, 64px);
          max-width: 95vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* time and date sizes scale up */
        #timeDisplay {
          font-size: clamp(28px, 14vmin, 160px);
          font-weight: bold;
          line-height: 0.9;
          xolor: #fff;

          /* deep multi-layer text shadow for a big, readable shadow */
          text-shadow:
            0.04em 0.04em 0.04em rgba(0,0,0,0.65),
            0.08em 0.08em 0.06em rgba(0,0,0,0.58),
            0.016em 0.016em 0.012em rgba(0,0,0,0.5),
            0.032em 0.032em 0.024em rgba(0,0,0,0.45);

          /* drop-shadow provides a stronger silhouette on some browsers */
          -webkit-filter: drop-shadow(0.6rem 0.6rem 0.9rem rgba(0,0,0,0.6));
          filter: drop-shadow(0.6rem 0.6rem 0.9rem rgba(0,0,0,0.6));

          /* subtle stroke for extra contrast on bright backgrounds */
          -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);
        }

        .date-time {
          margin-top: 0.25rem;
          font-size: clamp(14px, 4vmin, 40px);
        }

        /* prayer grid: allow wrapping and responsive card sizes */
        .prayer-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 15px;
          margin: 1vmin;
          padding: 5px;
             border-radius: 10px;
            xbox-shadow: inset 6px 6px 4px rgba(0, 0, 0, 0.5),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
        }

        /* each prayer row is a flexible card that grows but has min/max */
        .prayer-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          xborder: 1px solid rgba(255,255,255,0.9);
          border-radius: 10px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8),
     -0px -0px 3px rgba(5, 5, 5, 0.5);

          xbox-shadow: 4vmin 4vmin 4vmin rgba(235, 232, 232, 0.08);
          xbackground: rgba(0,0,0,0.08);
          /* responsive sizing: two columns on medium/large screens, single column on narrow screens */
          flex: 1 1 calc(48% - 2rem);
          xmin-width: 240px;
          xmax-width: 48%;
          gap: 0.5rem;

        }

        /* small screens: make rows full width */
        @media (max-width: 640px) {
          .prayer-row {
            flex-basis: 100%;
            max-width: 100%;
            min-width: 0;
          }
          #timeDisplay { font-size: clamp(24px, 24vmin, 120px); }
        }

        /* time / iqama sizing */
        .azan-time,
        .iqama-time {
          font-weight: bold;
          text-align: center;
          /* width uses viewport to allow larger numbers on big screens but remains clamped */
          xwidth: 18vmin;
          padding-left: 2vmin;
          padding-right: 2vmin;
          font-size: clamp(18px, 9vmin, 80px);
          flex-shrink: 0;

                  text-shadow:
            0.04em 0.04em 0.04em rgba(0,0,0,0.65),
            0.08em 0.08em 0.06em rgba(0,0,0,0.58),
            0.016em 0.016em 0.012em rgba(0,0,0,0.5),
            0.032em 0.032em 0.024em rgba(0,0,0,0.45);
        }

        /* prayer name: allow truncation so layout doesn't break */
        .prayer-name {
          font-weight: 700;
          text-align: center;
          flex-grow: 1;
          width: auto;
          font-size: clamp(12px, 4vmin, 40px);
          padding: 0 0.75rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* footer */
        footer {
          text-align: center;
          padding: 1rem;
          font-size: clamp(12px, 3vmin, 24px);
        }

        /* subtle accessibility improvement: ensure large text wraps when necessary */
        @media (max-height: 500px) {
          #timeDisplay { font-size: clamp(20px, 8vmin, 80px); }
        }

        #footerMessage {
          white-space: pre-wrap;   /* preserve line breaks from textContent */
          word-break: break-word;  /* wrap long words/lines to fit screen */
          text-align: center;
          padding: 1rem;
          font-size: clamp(12px, 3vmin, 24px);
        }

        /* sunrise/sunset cards (left / right) */
        .sun-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sun-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sun-card .sun-time { font-weight: 700; font-size: clamp(18px, 6vmin, 80px); }
.sun-card .sun-title { font-weight: 600; font-size: clamp(12px, 3vmin, 36px); colorx: rgba(255,255,255,0.95); }

/* ensure the sunrise/sunset block doesn't push layout on small screens */
@media (max-width: 640px) {
  .sun-row { flex-direction: row; gap: 0.5rem; }
  .sun-card { flex: 1 1 50%; }
  .sun-card .sun-time { font-size: clamp(16px, 10vmin, 64px); text-align: center; }
  .sun-card .sun-title { text-align: center; }
}

/* Landscape layout: header+footer stacked at left, content to the right */
@media (orientation: landscape) {
  html, body {
    height: 100%;
    margin: 0;
  }

  /* create two-column grid: left = sidebar for header/footer, right = main content */
  body {
    display: grid;
    grid-template-columns: minmax(220px, 36vw) 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
    align-items: stretch;
  }

  /* header in left column top */
  header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.04);
  }

  /* footer in left column bottom */
  footer {
    grid-column: 1;
    grid-row: 3;
    displayx: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.04);
  }

  /* main prayer section occupies right column full height */
  .prayer-container {
    grid-column: 2;
    grid-row: 1 / 4;
    overflow: auto;
    padding: 1.5rem;
    box-sizing: border-box;
    
  }

  /* make header elements larger and stacked */
  #masjidName {
    font-size: clamp(20px, 4vmin, 42px);
    margin-bottom: 0.5rem;
    text-align: center;
    max-width: 100%;
  }
  #timeDisplay {
    font-size: clamp(32px, 14vmin, 120px);
    text-align: center;
    line-height: 1;
  }
  #hijriDateDisplay, #dateTimeDisplay {
    font-size: clamp(12px, 3vmin, 20px);
    text-align: center;
    margin-top: 0.4rem;
  }

  /* ensure sunrise/sunset cards align nicely in main column */
  .sun-row { gap: 1rem; }
  .sun-card { min-width: 0; }

  /* reduce prayer-row max-width so many rows fit on right column */
  .prayer-row {
    flex: 1 1 auto;
    max-width: 100%;
    
  }
}

.next-countdown {
  display: block;               /* sit on its own line below the row content */
  font-size: 0.30em;            /* ~70% of the parent's font size (adjust as needed) */
  text-align: center;           /* center the countdown text */
  margin: 0px;               /* no extra margin */
  padding: 0px;                /* no extra padding */
  margin-top: -0.7em;         /* slight negative margin to reduce gap */
  xborder: 1px solid red;
 xopacity: 0.85;              /* slightly transparent for subtlety */


}

/* highlight the current prayer row */
.prayer-row.current-row {
 xborder-radius: 10%;
  xborder: 1px solid #ffcc00; /* accent (gold) */
  box-shadow:  inset 6px 6px 4px rgba(0, 0, 0, 0.5),
     inset -2px -2px 4px rgba(255, 255, 255, 0.6);
background: rgba(0,0,0,0.4);

}

/* make the texts in the current row more prominent */
.prayer-row.current-row .azan-time,
.prayer-row.current-row .iqama-time,
.prayer-row.current-row .prayer-name {
  xcolor: #ffffff;
  font-weight: 700;
}

/* countdown styling when on the current row */
.prayer-row.current-row .next-countdown {
  xcolor: #fff3b0;
  font-weight: 0.5em;
  opacity: 0.95;
}

/* gentler highlight on small screens */
@media (max-width: 640px) {
  .prayer-row.current-row {
    xborder-left-width: 4px;
    xtransform: none;
    xbox-shadow: none;
  }
}

/* Jumah rows: make text gold instead of white */
#jumah-azan,
#jumah-iqama,
#jumah2-azan,
#jumah2-iqama,
#jumah3-azan,
#jumah3-iqama,
#jumah-azan ~ .prayer-name,
#jumah2-azan ~ .prayer-name,
#jumah3-azan ~ .prayer-name {
  color: #ffcc00; /* gold */
  font-weight: 700;
}

/* ensure countdown and highlight for Jumah rows also use gold tint */
#jumah-azan ~ .next-countdown,
#jumah2-azan ~ .next-countdown,
#jumah3-azan ~ .next-countdown,
#jumah-azan ~ .next-countdown + *,
#jumah2-azan ~ .next-countdown + *,
#jumah3-azan ~ .next-countdown + * {
  color: #ffdd7a;
}
```// filepath: e:\html\masjid\vv.css
/* Jumah rows: make text gold instead of white */
#jumah-azan,
#jumah-iqama,
#jumah2-azan,
#jumah2-iqama,
#jumah3-azan,
#jumah3-iqama,
#jumah-azan ~ .prayer-name,
#jumah2-azan ~ .prayer-name,
#jumah3-azan ~ .prayer-name {
  color: #ffcc00; /* gold */
  font-weight: 700;
}

/* ensure countdown and highlight for Jumah rows also use gold tint */
#jumah-azan ~ .next-countdown,
#jumah2-azan ~ .next-countdown,
#jumah3-azan ~ .next-countdown,
#jumah-azan ~ .next-countdown + *,
#jumah2-azan ~ .next-countdown + *,
#jumah3-azan ~ .next-countdown + * {
  color: #ffdd7a;
}

.audio-icon {
    display: block;
    font-size: 0.4em;
    margin-top: -0.6em;
}