/* Prayer Display - minimal modern base (tweak later) */
:root{
  --bg:#06080b;
  --panel:#0b0f14;
  --text:#f7fbff;
  --muted:rgba(247,251,255,.72);
  --muted2:rgba(247,251,255,.55);
  --turq:#1fb7aa;
  --gold:#c7a44a; /* matte gold */
  --line:rgba(255,255,255,.08);
  --glow: 0 0 0.8rem rgba(31,183,170,.35);
  --radius: 22px;
  --pad: 28px;
}

#pd-root, .pd-app{ height: 100vh; width: 100%; margin: 0; }

.pd-app{
  background: radial-gradient(1200px 800px at 25% 15%, rgba(31,183,170,.10), transparent 60%),
              radial-gradient(900px 700px at 80% 40%, rgba(199,164,74,.09), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  display: grid;
  gap: 18px;
  padding: 18px;
  box-sizing: border-box;
}

.pd-shell{ display: grid; gap: 18px; height: 100%; }
.pd-shell.is-portrait{ grid-template-rows: 40% 1fr; }
.pd-shell.is-landscape{ grid-template-columns: 42% 1fr; }

.pd-header{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.pd-header .pd-orn{
  position:absolute; inset:0;
  opacity:.55;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(199,164,74,.22), transparent 30%),
    radial-gradient(circle at 82% 15%, rgba(31,183,170,.18), transparent 35%),
    repeating-linear-gradient(45deg, rgba(199,164,74,.10) 0 2px, transparent 2px 14px);
  mix-blend-mode: screen;
  pointer-events:none;
}

.pd-header img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.02) saturate(1.05) brightness(.92);
}

.pd-header .pd-topbar{
  position:absolute;
  left:0; right:0; top:0;
  padding: var(--pad);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,0));
}

.pd-time{
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}

.pd-datewrap{ text-align:right; }
.pd-date{
  font-size: clamp(14px, 1.4vw, 20px);
  color: var(--muted);
  font-weight: 600;
}
.pd-hijri{
  font-size: clamp(12px, 1.2vw, 18px);
  color: var(--muted2);
  margin-top: 6px;
  font-weight: 600;
}

.pd-main{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

.pd-prayers{ padding: var(--pad); display: grid; gap: 10px; }

.pd-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.12);
}

.pd-row .pd-label{
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--text);
}

.pd-row .pd-clock{
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: .02em;
}

.pd-row.is-active{
  background: linear-gradient(90deg, rgba(31,183,170,.30), rgba(199,164,74,.14));
  border-color: rgba(31,183,170,.40);
  box-shadow: var(--glow);
}

.pd-footer{
  padding: 18px var(--pad) var(--pad);
  border-top: 1px solid var(--line);
  display:grid;
  gap: 10px;
}

.pd-nextbig{
  font-size: clamp(26px, 3.4vw, 54px);
  font-weight: 900;
  letter-spacing: .01em;
}

.pd-nextsmall{
  font-size: clamp(14px, 1.6vw, 22px);
  color: var(--muted);
  font-weight: 650;
}

.pd-eventline{
  font-size: clamp(12px, 1.3vw, 18px);
  color: var(--muted2);
  font-weight: 650;
}

.pd-rtl{ direction: rtl; unicode-bidi: plaintext; }

/* === Premium-clean Selçuk corner ornaments (lightweight SVG) === */
.pd-header, .pd-main {
  position: relative;
}

.pd-header::before, .pd-header::after,
.pd-main::before, .pd-main::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23c7a44a%22%20stop-opacity%3D%220.85%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231fb7aa%22%20stop-opacity%3D%220.55%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3Cmask%20id%3D%22m%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22260%22%20height%3D%22260%22%20fill%3D%22black%22/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20H260%20V38%20H38%20V260%20H0%20Z%22%20fill%3D%22white%22/%3E%0A%20%20%20%20%3C/mask%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cg%20mask%3D%22url%28%23m%29%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H260%20V22%20H22%20V260%20H0%20Z%22%20fill%3D%22url%28%23g%29%22%20opacity%3D%220.35%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200%20H260%20V1%20H1%20V260%20H0%20Z%22%20fill%3D%22%23c7a44a%22%20opacity%3D%220.55%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M22%2022%20C60%2022%2C%2092%2036%2C%20116%2060%20C140%2084%2C%20154%20116%2C%20154%20154%22%20fill%3D%22none%22%20stroke%3D%22%23c7a44a%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%221.5%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M22%2044%20C54%2044%2C%2082%2056%2C%20104%2078%20C126%20100%2C%20138%20128%2C%20138%20160%22%20fill%3D%22none%22%20stroke%3D%22%231fb7aa%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.2%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M60%2022%20L60%2084%22%20stroke%3D%22%23c7a44a%22%20stroke-opacity%3D%220.35%22%20stroke-width%3D%221%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M22%2060%20L84%2060%22%20stroke%3D%22%231fb7aa%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M22%2022%20L96%2096%22%20stroke%3D%22%23c7a44a%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M22%2022%20L138%2072%22%20stroke%3D%22%231fb7aa%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%221%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(0.98) contrast(1.02);
}

.pd-header::before { left: -10px; top: -10px; }
.pd-header::after  { right: -10px; top: -10px; transform: scaleX(-1); }

.pd-main::before   { left: -10px; bottom: -10px; transform: scaleY(-1); }
.pd-main::after    { right: -10px; bottom: -10px; transform: scale(-1); }

/* Matte gold hairline border accent */
.pd-header, .pd-main {
  border-color: rgba(199,164,74,.22);
}

.pd-row {
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.08);
}

.pd-row.is-active {
  background: linear-gradient(90deg, rgba(31,183,170,.32), rgba(199,164,74,.18));
  border-color: rgba(31,183,170,.45);
  box-shadow: 0 0 0 1px rgba(31,183,170,.18), 0 10px 30px rgba(31,183,170,.10);
}

.pd-row.is-active .pd-label,
.pd-row.is-active .pd-clock {
  text-shadow: 0 1px 14px rgba(31,183,170,.18);
}

/* Slightly cleaner header overlay (less busy) */
.pd-header .pd-orn {
  opacity: .40;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(199,164,74,.18), transparent 34%),
    radial-gradient(circle at 82% 15%, rgba(31,183,170,.14), transparent 38%),
    repeating-linear-gradient(45deg, rgba(199,164,74,.06) 0 2px, transparent 2px 16px);
}

/* Improve legibility on photos */
.pd-header .pd-topbar {
  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,0));
}

/* === TV-Mode (3–5m Sichtbereich): Premium groß, aber mit Luft === */
:root{
  --tv-scale: 1; /* default */
}

/* allow URL override via body class (set by JS): pd-ui-tv / pd-ui-std */
.pd-app.pd-ui-tv{
  --tv-scale: 1.12;
}
.pd-app.pd-ui-std{
  --tv-scale: 1.00;
}

/* Automatic TV tuning: if viewport is large, slightly scale up */
@media (min-height: 900px) and (min-width: 500px){
  .pd-app{ --tv-scale: 1.08; }
}
@media (min-height: 1100px){
  .pd-app{ --tv-scale: 1.12; }
}

.pd-app{
  padding: calc(18px * var(--tv-scale));
  gap: calc(18px * var(--tv-scale));
}

.pd-shell{ gap: calc(18px * var(--tv-scale)); }

.pd-header .pd-topbar{
  padding: calc(var(--pad) * var(--tv-scale));
}

.pd-time{
  font-size: clamp(calc(42px * var(--tv-scale)), calc(6vw * var(--tv-scale)), calc(88px * var(--tv-scale)));
}

.pd-date{
  font-size: clamp(calc(15px * var(--tv-scale)), calc(1.8vw * var(--tv-scale)), calc(24px * var(--tv-scale)));
}
.pd-hijri{
  font-size: clamp(calc(13px * var(--tv-scale)), calc(1.6vw * var(--tv-scale)), calc(21px * var(--tv-scale)));
}

.pd-prayers{
  padding: calc(var(--pad) * var(--tv-scale));
  gap: calc(12px * var(--tv-scale));
}

.pd-row{
  padding: calc(16px * var(--tv-scale)) calc(18px * var(--tv-scale));
  border-radius: calc(16px * var(--tv-scale));
}

.pd-row .pd-label{
  font-size: clamp(calc(20px * var(--tv-scale)), calc(2.8vw * var(--tv-scale)), calc(36px * var(--tv-scale)));
}

.pd-row .pd-clock{
  font-size: clamp(calc(22px * var(--tv-scale)), calc(3.0vw * var(--tv-scale)), calc(40px * var(--tv-scale)));
}

.pd-footer{
  padding: calc(18px * var(--tv-scale)) calc(var(--pad) * var(--tv-scale)) calc(var(--pad) * var(--tv-scale));
  gap: calc(10px * var(--tv-scale));
}

.pd-nextbig{
  font-size: clamp(calc(30px * var(--tv-scale)), calc(4.2vw * var(--tv-scale)), calc(64px * var(--tv-scale)));
}

.pd-nextsmall{
  font-size: clamp(calc(15px * var(--tv-scale)), calc(2.0vw * var(--tv-scale)), calc(26px * var(--tv-scale)));
}

.pd-eventline{
  font-size: clamp(calc(13px * var(--tv-scale)), calc(1.7vw * var(--tv-scale)), calc(22px * var(--tv-scale)));
}

/* Corner ornaments: slightly smaller on TV mode to keep it clean */
.pd-app.pd-ui-tv .pd-header::before,
.pd-app.pd-ui-tv .pd-header::after,
.pd-app.pd-ui-tv .pd-main::before,
.pd-app.pd-ui-tv .pd-main::after{
  width: 160px;
  height: 160px;
  opacity: .50;
}

/* Landscape: ensure readable row heights */
.pd-shell.is-landscape .pd-row{
  padding-top: calc(14px * var(--tv-scale));
  padding-bottom: calc(14px * var(--tv-scale));
}

/* === Step 4.3: Stronger color system + more visible (but still premium) ornaments === */
:root{
  --turq:#1fb7aa;
  --gold:#c7a44a;
  --panel: rgba(10,14,20,.72);
  --line: rgba(199,164,74,.18);
}

/* Slightly richer background for depth */
.pd-app{
  background:
    radial-gradient(1200px 800px at 22% 12%, rgba(31,183,170,.14), transparent 62%),
    radial-gradient(900px 700px at 82% 38%, rgba(199,164,74,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%),
    var(--bg);
}

/* Header/Main: subtle inner accent line */
.pd-header, .pd-main{
  border-color: rgba(199,164,74,.26);
}
.pd-header::before, .pd-header::after,
.pd-main::before, .pd-main::after{
  opacity: .62; /* more visible */
}

/* Active row: fuller color fill */
.pd-row.is-active{
  background: linear-gradient(90deg, rgba(31,183,170,.40), rgba(199,164,74,.22));
  border-color: rgba(31,183,170,.55);
}

/* Countdown in HH:MM: tabular numbers for readability on TV */
.pd-nextbig{
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Footer label + event: slightly clearer */
.pd-nextsmall{
  color: rgba(247,251,255,.80);
}
.pd-eventline{
  color: rgba(247,251,255,.62);
}