*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0e1a2b;
  color: #eaf0f7;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }

/* The HTML `hidden` attribute must beat any `display:` rule below.
   Without !important, `.screen { display:flex }` and `.modal { display:flex }`
   override the UA `[hidden]{display:none}` because they share specificity. */
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* HOME ------------------------------------------------------------ */
#home { align-items: center; justify-content: center; padding: 24px; }
.home-card { max-width: 420px; width: 100%; text-align: center; }
.home-card h1 { font-size: 36px; margin: 0 0 8px; letter-spacing: -0.5px; }
.tag { color: #8aa0bd; margin: 0 0 32px; font-size: 16px; }
.big-btn {
  display: inline-block; padding: 16px 28px; border-radius: 14px;
  background: #3da585; color: #fff; font-weight: 600; font-size: 18px;
  box-shadow: 0 6px 20px rgba(61,165,133,.35);
}
.big-btn:active { transform: translateY(1px); }
.big-btn.small { padding: 10px 14px; font-size: 14px; }
.hint { color: #6b809d; font-size: 13px; margin-top: 14px; }

/* TEACHER --------------------------------------------------------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; gap: 8px;
  background: #122238; border-bottom: 1px solid #1f3251;
  flex-wrap: wrap;
}
.bar .left, .bar .right { display: flex; align-items: center; gap: 8px; }
.bar select {
  background: #1b2c47; border: 1px solid #2a4068; border-radius: 10px;
  padding: 8px 10px; color: #eaf0f7; max-width: 240px;
}
.jumper {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #8aa0bd;
}
.jumper input {
  width: 64px; padding: 6px 8px; border-radius: 8px;
  background: #1b2c47; border: 1px solid #2a4068; color: #eaf0f7;
  text-align: center; font-variant-numeric: tabular-nums;
}
.jumper input::-webkit-inner-spin-button { opacity: 1; }
.dim { color: #6b809d; font-variant-numeric: tabular-nums; }
.ghost {
  padding: 8px 12px; border-radius: 10px;
  background: transparent; border: 1px solid #2a4068; color: #b6c5dc;
}
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #8aa0bd; }
.presence .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b809d; }
.presence.live .dot { background: #3da585; box-shadow: 0 0 8px #3da585; }

/* Stage = scroll viewport. Canvas is fixed overlay above content. */
.stage { flex: 1; position: relative; overflow: hidden; }

.content {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 16px clamp(12px, 4vw, 48px);
  -webkit-overflow-scrolling: touch;
  font-family: "Amiri Quran", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;
  color: #f5efe2;
  scroll-padding-top: 80px;
  scroll-padding-bottom: 80px;
}
.content-student { font-size: 1.2em; }
.content .placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%;
  color: #8aa0bd; font-size: 36px; line-height: 1.4;
}
.content .placeholder small { display: block; font-size: 16px; margin-top: 12px; color: #6b809d; font-family: inherit; }

.source-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px; color: #6b809d;
  padding: 4px 10px; margin: 0 0 8px;
  border-left: 2px solid #2a4068;
  direction: ltr; text-align: left;
}
.content-student .source-note { display: none; }

/* A "block" is one ayah (Quran) or one row (Qaida). */
.block {
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  scroll-margin-top: 80px;
  scroll-margin-bottom: 80px;
}
.block:last-child { border-bottom: 0; }
.block-num {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px; color: #6b809d;
  padding: 2px 8px; border: 1px solid #2a4068; border-radius: 999px;
  margin-bottom: 8px; direction: ltr;
}
.block-words {
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 2.0; text-align: center; direction: rtl;
}
.content-student .block-words {
  font-size: clamp(34px, 6.4vw, 56px);
}

.word {
  display: inline-block; padding: 0 6px; border-radius: 8px;
  transition: background-color .15s, color .15s, transform .15s;
  cursor: pointer;
  user-select: none;
}
.word.pointed {
  background: #ffd84a;
  color: #1a1206;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,216,74,.6); }
  50%     { box-shadow: 0 0 0 10px rgba(255,216,74,0); }
}

/* Qaida lessons: render items as big tappable tiles instead of flowing text. */
.content.is-qaida .block-words {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  justify-content: center; line-height: 1;
}
.content.is-qaida .word {
  font-size: clamp(40px, 7vw, 72px);
  padding: 12px 18px; min-width: 84px;
  background: #1b2c47; border: 1px solid #2a4068; border-radius: 14px;
  text-align: center;
}
.content.is-qaida .word.pointed { background: #ffd84a; border-color: #ffd84a; }
.content-student.is-qaida .word { font-size: clamp(56px, 10vw, 96px); }

.pdf-frame {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform .45s cubic-bezier(.2, .65, .2, 1);
  will-change: transform;
  /* The frame is a sibling that visually overlays the Quran scroller. We
     need it to be transparent to pointer events so wheel/touch reach the
     content underneath. Children (canvases) re-enable events via their
     own classes (.pen-on / .tap-on) when active. */
  pointer-events: none;
}
.pdf-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  background: #0e1a2b;
}
.pdf-empty {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.pdf-empty h2 { margin: 0 0 8px; font-size: 22px; }
.pdf-empty p { color: #8aa0bd; margin: 6px 0 16px; max-width: 420px; }
.pdf-empty .big-btn { margin-top: 8px; }

.draw-canvas {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  width: 100%; height: 100%;
}
.draw-canvas.pen-on { pointer-events: auto; touch-action: none; cursor: crosshair; }
/* Tap-to-point on PDF needs the draw canvas to capture taps even when pen is off. */
.draw-canvas.tap-on { pointer-events: auto; touch-action: none; }

/* Laser-pointer style: a soft radial halo + tiny core dot. No pulse —
   the pointer itself moves in real time, an animation on top would
   read as visual noise. */
.pdf-pointer {
  position: absolute; z-index: 3;
  width: 72px; height: 72px;
  margin-left: -36px; margin-top: -36px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 216, 74, 0.65) 0%,
    rgba(255, 216, 74, 0.35) 30%,
    rgba(255, 216, 74, 0.10) 60%,
    rgba(255, 216, 74, 0)   78%
  );
  pointer-events: none;
}
.pdf-pointer::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255, 216, 74, 0.95);
  box-shadow: 0 0 8px rgba(255, 216, 74, 0.7);
}

/* Toolbar */
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #122238; border-top: 1px solid #1f3251;
  flex-wrap: wrap;
}
.tool {
  padding: 10px 14px; border-radius: 10px;
  background: #1b2c47; border: 1px solid #2a4068; color: #eaf0f7;
  font-size: 14px;
}
.tool[aria-pressed="true"] { background: #3da585; border-color: #3da585; }
.status { margin-left: auto; font-size: 13px; color: #8aa0bd; }

.zoom-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px 0 0;
  border-left: 1px solid #1f3251;
  margin-left: 4px; padding-left: 12px;
}
.zoom-group .tool { padding: 8px 12px; min-width: 36px; }
.zoom-label {
  display: inline-block; min-width: 48px; text-align: center;
  font-size: 13px; color: #b6c5dc; font-variant-numeric: tabular-nums;
}

.color-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 8px; margin: 0 2px;
  border-left: 1px solid #1f3251;
  padding-left: 12px;
}
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] {
  border-color: #eaf0f7;
  box-shadow: 0 0 0 2px #122238, 0 0 0 4px #eaf0f7;
}

/* STUDENT (kid mode) --------------------------------------------- */
.student-mode {
  background: #0e1a2b;
  touch-action: none; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
.stage-student { padding: 0; }
.content-student { pointer-events: none; }
.status-pill {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.5); color: #cfd9e7; padding: 6px 12px;
  border-radius: 999px; font-size: 12px; pointer-events: none;
  transition: opacity .3s; z-index: 5;
}
.status-pill.hidden { opacity: 0; }

/* Modal ---------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 10;
}
.modal-card {
  background: #122238; border: 1px solid #1f3251; border-radius: 16px;
  padding: 24px; max-width: 420px; width: 100%;
}
.modal-card h2 { margin: 0 0 8px; font-size: 22px; }
.modal-card p { color: #8aa0bd; margin: 6px 0 16px; }
.link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.link-row input {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  background: #0e1a2b; border: 1px solid #2a4068; color: #eaf0f7;
}

/* Upload progress */
.progress {
  height: 10px; background: #0e1a2b; border: 1px solid #2a4068;
  border-radius: 999px; overflow: hidden; margin: 12px 0;
}
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3da585, #5ec3a3);
  transition: width .15s linear;
}