@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('assets/fonts/NotoNaskhArabic.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root{
  --accent: #299E8F;
  --accent-soft: rgba(41,158,143,0.16);
  --bg: #0B1614;
  --bg-2: #101F1C;
  --surface: #142623;
  --surface-2: #1B322E;
  --text: #F2F5F4;
  --text-dim: #9FB4B0;
  --border: rgba(255,255,255,0.08);
  --gold: #D9B26A;
  --shadow: rgba(0,0,0,0.45);
}
:root[data-theme="light"]{
  --bg: #F6F4EE;
  --bg-2: #EFEBE0;
  --surface: #FFFFFF;
  --surface-2: #FBF9F3;
  --text: #16302B;
  --text-dim: #5C736E;
  --border: rgba(20,50,45,0.10);
  --shadow: rgba(30,50,45,0.12);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background: radial-gradient(120% 140% at 15% 10%, var(--bg-2), var(--bg));
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  cursor: none;
}
body.show-cursor{ cursor: default; }

.stage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  width:100vw; height:100vh;
}

/* ---------- LEFT: clocks ---------- */
.left{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 3vh;
  border-right: 1px solid var(--border);
  padding: 4vh;
}
.clock-wrap{ width: min(52vh, 42vw); aspect-ratio:1; }
.analog{ width:100%; height:100%; overflow:visible; }

.face{
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 2;
  filter: drop-shadow(0 1.5vh 3vh var(--shadow));
}
.tick{ stroke: var(--text-dim); opacity:0.55; }
.tick.major{ stroke: var(--text); opacity:0.85; stroke-width:3; }
.hand{ stroke-linecap: round; }
.hand.hour{ stroke: var(--text); stroke-width: 7; }
.hand.minute{ stroke: var(--text); stroke-width: 5; }
.hand.second{ stroke: var(--accent); stroke-width: 2; }
.pin-outer{ fill: var(--bg); stroke: var(--accent); stroke-width:2; }
.pin-inner{ fill: var(--accent); }

.prayer-marker circle{ fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.prayer-marker circle.active{ fill: var(--accent); }
.prayer-marker circle.passed{ opacity: 0.35; }
.prayer-marker text{
  fill: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.03em;
}
.prayer-marker text.active{ fill: var(--accent); }

.digital{
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 4.4vh, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.gregorian{
  color: var(--text-dim);
  font-size: clamp(1rem, 1.6vh, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.hijri{
  font-family: 'Noto Naskh Arabic', 'Outfit', system-ui, sans-serif;
  color: var(--text-dim);
  font-size: clamp(0.85rem, 1.35vh, 1.1rem);
  font-weight: 400;
  direction: rtl;
}

/* ---------- RIGHT: prayer times ---------- */
.right{
  display:flex; flex-direction:column;
  padding: 5vh 5vw 4vh 5vw;
  gap: 3vh;
  min-width:0;
}
.brand{ display:flex; align-items:center; gap: 1.2vw; }
.brand-icon{
  width: clamp(40px, 4.4vh, 56px); height: clamp(40px, 4.4vh, 56px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0.6vh 1.6vh var(--shadow);
  border: 1px solid var(--border);
}
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-size: clamp(1.3rem, 2.4vh, 1.8rem);
  font-weight: 700;
  display:flex; align-items:baseline; gap:0.5em;
}
.brand-name-ar{
  font-family:'Noto Naskh Arabic', serif;
  color: var(--accent);
  font-size: 1.05em;
}
.brand-city{ color: var(--text-dim); font-size: clamp(0.85rem, 1.4vh, 1rem); }

.prayer-list{
  flex:1;
  display:flex; flex-direction:column;
  gap: 1.4vh;
  justify-content:center;
}
.prayer-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 1.5vw;
  padding: 1.6vh 1.8vw;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
.prayer-row.passed{ opacity: 0.5; }
.prayer-row.active{
  background: linear-gradient(90deg, var(--accent-soft), transparent 85%);
  border-color: var(--accent);
  transform: scale(1.015);
}
.prayer-names{ display:flex; flex-direction:column; gap:0.15em; min-width:0; }
.prayer-name-en{
  font-size: clamp(1.1rem, 2.3vh, 1.7rem);
  font-weight: 600;
}
.prayer-name-ar{
  font-family:'Noto Naskh Arabic', serif;
  font-size: clamp(1.1rem, 2.3vh, 1.6rem);
  color: var(--text-dim);
}
.prayer-row.active .prayer-name-en{ color: var(--accent); }
.prayer-time{
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 2.6vh, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.prayer-countdown{
  font-size: clamp(0.8rem, 1.4vh, 1rem);
  color: var(--accent);
  font-weight: 500;
  min-width: 8ch;
  text-align:right;
}

/* ---------- Auto-hide control bar ---------- */
.bar{
  position: fixed; left:50%; bottom: 2.2vh;
  transform: translate(-50%, 130%);
  display:flex; align-items:center; gap: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1.2vh 3vh var(--shadow);
  transition: transform .35s ease, opacity .35s ease;
  opacity:0;
  z-index: 40;
}
.bar.visible{ transform: translate(-50%, 0); opacity:1; }
.bar-field{
  display:flex; align-items:center; gap:8px;
  font-size: 0.85rem; color: var(--text-dim);
}
.bar-field select, .bar-field input[type="date"]{
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
}
.bar-btn{
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bar-btn:hover{ background: var(--accent); color:#fff; border-color: var(--accent); }
#btnToday{ width:auto; padding:0 16px; border-radius:999px; }

.bar-hint{
  position: fixed; left:50%; bottom: 1vh; transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 1.1rem;
  opacity: 0.5;
  z-index: 39;
  pointer-events:none;
  transition: opacity .35s ease;
}
.bar-hint.hidden-hint{ opacity:0; }

/* ---------- About overlay ---------- */
.about-overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index: 60;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
.about-overlay.visible{ opacity:1; pointer-events:auto; }
.about-card{
  position:relative;
  width: min(520px, 88vw);
  max-height: 82vh;
  overflow:auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px 30px;
  text-align:center;
  box-shadow: 0 3vh 6vh var(--shadow);
}
.about-icon{ width:72px; height:72px; border-radius:50%; margin-bottom:14px; box-shadow: 0 1vh 2vh var(--shadow); }
.about-card h1{ margin:0 0 4px; font-size:1.6rem; }
.about-sub{ color: var(--accent); font-weight:600; margin:0 0 16px; }
.about-desc{ color: var(--text-dim); font-size:0.95rem; line-height:1.6; margin:0 0 24px; }
.about-sources{ text-align:left; background: var(--surface-2); border-radius:14px; padding:16px 18px; margin-bottom:20px; }
.about-sources h2{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:0 0 10px; }
.source-row{ display:flex; justify-content:space-between; gap:12px; font-size:0.85rem; padding:6px 0; border-top:1px solid var(--border); }
.source-row:first-child{ border-top:none; }
.source-row span:first-child{ font-weight:600; }
.source-row span:last-child{ color: var(--text-dim); text-align:right; }
.about-website{ display:inline-block; color: var(--accent); text-decoration:none; font-weight:600; margin-bottom:14px; }
.about-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface-2); color: var(--text);
  cursor:pointer; font-size:0.9rem;
}
.about-copyright{ color: var(--text-dim); font-size:0.75rem; margin:0; }

/* ---------- Responsive: narrower / taller screens stack ---------- */
@media (max-aspect-ratio: 4/5){
  html,body{ overflow-y: auto; overflow-x: hidden; height: auto; }
  .stage{ grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 100dvh; }
  .left{ border-right:none; border-bottom:1px solid var(--border); padding:3vh; gap:2vh; }
  .clock-wrap{ width: min(38vh, 60vw); }
  .right{ flex: none; padding-bottom: 110px; }
  .prayer-list{ justify-content: flex-start; }

  /* control bar: full-width, wrap, rounded card instead of pill */
  .bar{
    left: 16px; right: 16px; bottom: 16px;
    transform: translateY(130%);
    width: auto;
    border-radius: 20px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .bar.visible{ transform: translateY(0); }
  .bar-field{ flex: 1 1 auto; min-width: 0; }
  .bar-field select, .bar-field input[type="date"]{ width: 100%; }
  #btnFullscreen{ display: none; }

  /* slim accent scrollbar */
  ::-webkit-scrollbar{ width: 3px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 99px; }
  *{ scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
}