/* The family palette: the prayer clock's deep red and gold. */
:root {
  --bg: #2a0508;
  --bg-2: #5c0b12;
  --panel: rgba(255, 255, 255, .07);
  --line: rgba(221, 192, 145, .35);
  --gold: rgb(221, 192, 145);
  --text: #fbf6ee;
  --muted: #cdb9b0;
  --green: #3fb97a;
  --red: #e0453a;
  --rose: #e7a3b4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  color: var(--text);
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* ---- parent page ---- */
.page { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top h1 { margin: 0; font-size: 22px; color: var(--gold); }
.link { background: none; color: var(--muted); font-size: 15px; padding: 6px 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.status { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--green); box-shadow: 0 0 0 4px rgba(63, 185, 122, .2); }
.big-call {
  width: 100%; padding: 26px 16px; border-radius: 22px; font-size: 26px; font-weight: 700;
  background: linear-gradient(180deg, #4cc98a, #2c9a62); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.big-call:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.notice { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.notice strong { color: var(--text); }
.secondary { background: rgba(221, 192, 145, .16); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-size: 16px; color: var(--gold); width: 100%; }
.calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.calls li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; }
.calls li:last-child { border-bottom: 0; }
.calls .missed { color: #ff9b8f; }
.calls time { color: var(--muted); direction: ltr; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form input { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--text); }
.error { color: #ff9b8f; margin: 0; }

/* ---- call screen (both pages) ---- */
.stage { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; }
.stage video.remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.stage video.self {
  position: absolute; top: 16px; left: 16px; width: 26vw; max-width: 220px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .7); background: #222; transform: scaleX(-1); z-index: 2;
}
.stage .live-badge {
  position: absolute; top: 16px; right: 16px; z-index: 2; padding: 6px 14px; border-radius: 999px;
  background: rgba(224, 69, 58, .9); color: #fff; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.stage .live-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.stage .waiting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 22px; color: var(--muted); text-align: center; padding: 20px; }
.controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 22px; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.round { width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.round.on { background: #fff; color: #222; }
.round.hang { background: var(--red); color: #fff; width: 78px; height: 78px; font-size: 16px; }
.unmute { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .55); font-size: 26px; }

.ringing { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(circle at 50% 35%, var(--bg-2), var(--bg)); text-align: center; padding: 24px; }
.ringing .who { font-size: 34px; font-weight: 700; color: var(--gold); }
.ringing .pulse { width: 140px; height: 140px; border-radius: 50%; background: rgba(63, 185, 122, .25); display: flex; align-items: center; justify-content: center; font-size: 56px; animation: pulse 1.4s infinite; }
.ringing .actions { display: flex; gap: 44px; }
.ringing .accept { background: var(--green); }
.ringing .decline { background: var(--red); }
.ringing .actions .round { width: 84px; height: 84px; color: #fff; font-size: 17px; }

/* ---- home screen (32-inch, landscape, used by children) ---- */
.home { height: 100%; display: flex; flex-direction: column; padding: 3vmin 4vmin; gap: 3vmin; cursor: default; user-select: none; }
.home header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 2.6vmin; }
.home header .clock { font-size: 5vmin; color: var(--gold); direction: ltr; font-variant-numeric: tabular-nums; }
.home .offline { color: #ff9b8f; }
.parents { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(30vmin, 1fr)); gap: 4vmin; }
.parent-button {
  border-radius: 5vmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin;
  box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, .45), inset 0 0 0 .5vmin rgba(255, 255, 255, .25); transition: transform .15s;
}
.parent-button:active { transform: scale(.97); }
.parent-button .face { width: 26vmin; height: 26vmin; border-radius: 50%; background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; font-size: 14vmin; font-weight: 700; }
.parent-button .name { font-size: 10vmin; font-weight: 700; }
.parent-button .hint { font-size: 3.4vmin; opacity: .85; }
.parent-button.p0 { background: linear-gradient(160deg, #e8cf9f, #b8894a); color: #3a1b05; }
.parent-button.p1 { background: linear-gradient(160deg, #f2bccb, #c56f88); color: #3f0716; }
.parent-button.p2 { background: linear-gradient(160deg, #9fd8e8, #4a8fb8); color: #052a3a; }
.home .stage video.self { width: 22vmin; max-width: none; }
.home .stage .live-badge { font-size: 3vmin; padding: 1vmin 2.4vmin; }
.home .stage .waiting { font-size: 6vmin; color: #fff; }
.home .controls .round.hang { width: 16vmin; height: 16vmin; font-size: 3.6vmin; }
.home .stage { box-shadow: inset 0 0 0 1.2vmin var(--red); }
.message { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 7vmin; font-weight: 700; color: var(--gold); background: rgba(42, 5, 8, .94); padding: 4vmin; }

@keyframes blink { 50% { opacity: .2; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 122, .5); } 100% { box-shadow: 0 0 0 40px rgba(63, 185, 122, 0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }