/* ============================================================
   Layth & Layan - shared Salah practice stylesheet
   Used by every prayer practice page (Fajr, Dhuhr, Asr, Isha,
   Maghrib, and later Sunnah / Witr / Eid / Janazah). Edit once.
   Extracted verbatim from the Fajr v3.1 practice page.
   ============================================================ */
    :root {
      --bg-page:       #e6f0fb;
      --surface:       #fff;
      --ink:           #1e3a6f;
      --ink-soft:      rgba(30, 58, 111, 0.78);
      --ink-faint:     rgba(30, 58, 111, 0.12);
      --accent:        #f06080;
      --accent-deep:   #d94865;
      --highlight:     #fbda20;
      --green:         #80ce63;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      font-family: 'Nunito', system-ui, -apple-system, sans-serif;
      color: var(--ink);
      height: 100vh;
      height: 100dvh;
      width: 100%;
      overflow: hidden; /* no scroll anywhere on this page */
      -webkit-font-smoothing: antialiased;
    }

    /* Desktop body: Salah hub background with soft wash, matches the
       rest of the Salah section visually. The fullscreen black stage
       is mobile-only — desktop sees a centered card on top of this. */
    body {
      background: #e8e0d0 url('/salah/salah-bg-desktop.webp') center center / cover no-repeat;
      position: relative;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background: rgba(255, 255, 255, 0.42);
      pointer-events: none;
    }
    @media (max-width: 768px) {
      body {
        background-image: url('/salah/salah-bg-mobile.webp');
      }
    }

    /* ===== Top bar — always visible.
       Desktop default: light glass background with navy text since
       it sits above the cream Salah backdrop.
       Mobile override below: dark gradient since it sits on top of
       the fullscreen posture image. */
    .practice-topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 90;
      padding: max(12px, env(safe-area-inset-top)) 16px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 80%, transparent 100%);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .practice-rakat-badge-text-light {
      color: var(--ink) !important;
      text-shadow: none !important;
    }
    .practice-exit-btn,
    .practice-pause-btn {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.12s ease;
    }
    .practice-exit-btn {
      background: rgba(255, 255, 255, 0.95);
      color: var(--ink);
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .practice-exit-btn:hover { transform: translateX(-2px); }
    .practice-progress-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .practice-rakat-badge {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--ink);
    }
    .practice-progress-track {
      height: 6px;
      background: rgba(30, 58, 111, 0.15);
      border-radius: 999px;
      overflow: hidden;
    }
    .practice-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
      border-radius: 999px;
      transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      width: 0%;
    }
    .practice-pause-btn {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 14px rgba(240, 96, 128, 0.4);
    }
    .practice-pause-btn:hover { transform: scale(1.06); }
    .practice-pause-btn .pause-icon-play { display: none; }
    .practice-pause-btn.is-paused .pause-icon-play { display: block; }
    .practice-pause-btn.is-paused .pause-icon-pause { display: none; }
    .pause-icon-pause {
      position: relative;
      width: 14px;
      height: 16px;
    }
    .pause-icon-pause::before,
    .pause-icon-pause::after {
      content: '';
      position: absolute;
      top: 0;
      width: 4px;
      height: 100%;
      background: #fff;
      border-radius: 1px;
    }
    .pause-icon-pause::before { left: 1px; }
    .pause-icon-pause::after  { right: 1px; }
    .pause-icon-play {
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid #fff;
      margin-left: 3px;
    }

    /* ===== Stage =====
       DESKTOP: a centered card (1040px max-width, ~80vh tall),
       side-by-side image + content. All layers visible always.
       MOBILE: a full-screen stage with the cinematic phase mechanic
       (image hold → overlay fade → text reveal → cross-fade).

       The data-phase attribute drives mobile-only CSS transitions.
       On desktop, phase changes are visually no-ops (everything is
       always visible). */
    .practice-stage {
      position: relative;
      max-width: 1040px;
      width: calc(100% - 40px);
      height: calc(100vh - 100px);
      max-height: 720px;
      margin: 80px auto 20px;
      border-radius: 28px;
      overflow: hidden;
      background: var(--surface);
      box-shadow: 0 20px 50px rgba(30, 58, 111, 0.18);
      display: grid;
      grid-template-columns: 1fr 1.1fr;
    }

    /* DESKTOP layer positioning: image fills the left column,
       content fills the right column. Overlay is invisible
       (no use on desktop — everything is visible always). */
    .practice-image-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f4ead8 0%, #e8d8b5 100%);
      overflow: hidden;
    }
    .practice-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .practice-image-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 96px;
      color: rgba(30, 58, 111, 0.32);
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
    }
    .practice-image-wrap.is-fallback .practice-image-fallback {
      display: flex;
    }

    /* On desktop the white overlay is hidden — image and content
       are both shown directly side-by-side, no fade mechanics. */
    .practice-overlay {
      display: none;
    }

    /* Content panel (desktop: right column) */
    .practice-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 36px 32px;
      text-align: center;
      gap: 18px;
      pointer-events: none;
    }

    /* Top section: step name + subtitle */
    .practice-content-header {
      max-width: 600px;
    }
    .practice-step-counter {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(240, 96, 128, 0.14);
      color: var(--accent-deep);
      border-radius: 999px;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .practice-step-name {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: clamp(28px, 5vw, 38px);
      color: var(--ink);
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .practice-step-subtitle {
      font-size: clamp(14px, 2vw, 16px);
      color: var(--ink-soft);
      line-height: 1.45;
      max-width: 500px;
      margin: 0 auto;
    }

    /* Header suppression: for multi-verse steps the step name + subtitle
       act as the "title card" of verse 0 (the bismillah / opening line),
       then hide on verses 1+ so the verse words get the full vertical
       room. The engine toggles .is-header-hidden on the stage per verse. */
    .practice-stage.is-header-hidden .practice-step-name,
    .practice-stage.is-header-hidden .practice-step-subtitle {
      display: none;
    }

    /* Word grid: Arabic + transliteration paired vertically. Flex-wrap
       with direction:rtl so Arabic flows right-to-left correctly.
       In multi-verse mode (.is-multi-verse on .practice-stage), only
       ONE verse is in the DOM at a time, so we can size words much
       bigger to fill the available space. */
    .practice-word-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      justify-content: center;
      align-items: flex-start;
      direction: rtl;
      max-width: 720px;
      margin: 0 auto;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .practice-word-grid.is-verse-fading-out {
      opacity: 0;
      transform: translateY(-8px);
    }
    .practice-word-grid.is-verse-fading-in {
      animation: verseFadeIn 0.4s ease-out;
    }
    @keyframes verseFadeIn {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .practice-word {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 10px;
      border-radius: 10px;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .practice-word.is-active-word {
      background: rgba(240, 96, 128, 0.20);
      transform: scale(1.06);
    }
    .practice-word-arabic {
      font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
      font-size: clamp(36px, 7vw, 60px);
      font-weight: 700;
      color: var(--ink);
      direction: rtl;
      line-height: 1.6;
    }
    .practice-word-translit {
      font-size: clamp(11px, 1.6vw, 13px);
      color: var(--accent-deep);
      font-weight: 600;
      margin-top: 2px;
      font-family: 'Nunito', sans-serif;
    }
    /* Large-text mode for short tasbih (Allahu Akbar, Subhana Rabbiyal ...) */
    .practice-stage.is-large-text .practice-word-arabic {
      font-size: clamp(36px, 7vw, 60px);
    }
    .practice-stage.is-large-text .practice-word-translit {
      font-size: clamp(13px, 2vw, 16px);
    }
    /* Multi-verse mode: one verse on screen at a time, MUCH bigger
       text since there's room. The kid prays with their phone on the
       floor and needs to read while standing. */
    .practice-stage.is-multi-verse .practice-word-grid {
      max-width: 880px;
      gap: 14px 22px;
    }
    .practice-stage.is-multi-verse .practice-word-arabic {
      font-size: clamp(36px, 7vw, 60px);
      line-height: 1.7;
    }
    .practice-stage.is-multi-verse .practice-word-translit {
      font-size: clamp(14px, 2.4vw, 20px);
      margin-top: 4px;
    }
    .practice-translation {
      font-size: clamp(13px, 1.8vw, 14px);
      color: var(--ink-soft);
      font-style: italic;
      margin-top: 10px;
      line-height: 1.5;
      max-width: 460px;
    }

    /* ===== Countdown intro screen ===== */
    /* ===== Surah selector (opening screen) =====
       One big card holds two rakat panels. Wide screens: panels side
       by side (pure CSS flex, no Swiper). Phones (<=768px): one panel
       per screen, swipe between them via Swiper (init'd only when
       narrow). Cards are illustrated surah thumbnails, 2-by-2 per
       panel; learned surahs get a gold star. */
    .surah-select-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(18, 28, 56, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 16px;
      overflow-y: auto;
    }
    .surah-select-overlay.is-hidden { display: none; }
    .surah-select-card {
      width: 100%;
      max-width: 720px;
      background: var(--surface);
      border-radius: 22px;
      padding: 22px 18px 16px;
      box-shadow: 0 18px 50px rgba(18, 28, 56, 0.35);
      margin: auto;
    }
    .surah-select-title {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 23px;
      color: var(--ink);
      margin: 0 0 4px;
      line-height: 1.15;
    }
    .surah-select-sub {
      font-size: 14px;
      color: #7385a8;
      margin: 0 0 18px;
      line-height: 1.5;
    }

    /* Swiper host. On wide screens the wrapper is a plain flex row with
       both panels visible; Swiper is NOT initialized. On phones Swiper
       takes over (one panel per view, swipe). We supply the structural
       swiper CSS ourselves so we do not depend on the bundle stylesheet. */
    .surah-swiper { overflow: hidden; }
    .surah-swiper .swiper-wrapper {
      display: flex;
      align-items: stretch;
      box-sizing: content-box;
    }
    .surah-swiper .swiper-slide {
      flex-shrink: 0;
      width: 100%;
      height: auto;
    }
    /* Wide screens: both panels side by side, no swiping. */
    @media (min-width: 769px) {
      .surah-swiper .swiper-wrapper {
        transform: none !important;
        gap: 16px;
      }
      .surah-swiper .swiper-slide {
        width: calc(50% - 8px) !important;
      }
    }

    .rakat-panel {
      border: 1.5px solid rgba(30, 58, 111, 0.14);
      background: rgba(30, 58, 111, 0.03);
      border-radius: 16px;
      padding: 13px 12px 14px;
      height: 100%;
      box-sizing: border-box;
    }
    .rakat-panel-pill {
      display: inline-block;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 13px;
      color: #fff;
      background: var(--accent);
      padding: 4px 14px;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .rakat-panel-fixed {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--surface);
      border: 1.5px dashed rgba(30, 58, 111, 0.22);
      border-radius: 11px;
      padding: 7px 10px;
      margin-bottom: 11px;
      font-size: 13px;
      color: var(--ink);
    }
    .rakat-panel-fixed strong { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
    .rpf-note { color: #7385a8; font-weight: 600; font-size: 12px; }
    .rpf-pin { font-size: 15px; }

    .surah-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }
    .surah-thumb-card {
      position: relative;
      border: 2px solid transparent;
      border-radius: 13px;
      overflow: hidden;
      cursor: pointer;
      background: var(--surface);
      padding: 0;
      font-family: inherit;
      aspect-ratio: 1 / 1;
      display: block;
      width: 100%;
    }
    .surah-thumb-card .stc-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: rgba(30, 58, 111, 0.08);
    }
    .surah-thumb-card .stc-cap {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 6px 7px 7px;
      background: linear-gradient(to top, rgba(18, 28, 56, 0.82), rgba(18, 28, 56, 0));
    }
    .stc-cap-name {
      color: #fff;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 13px;
      line-height: 1.1;
    }
    .surah-thumb-card.is-selected { border-color: var(--accent); }
    .stc-check {
      position: absolute;
      top: 6px; left: 6px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
    }
    .stc-star {
      position: absolute;
      top: 5px; right: 6px;
      color: var(--highlight);
      font-size: 16px;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    }

    /* Pagination dots + slide-nav: phones only. */
    .surah-dots { display: none; gap: 7px; justify-content: center; margin: 14px 0 4px; }
    .surah-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(30, 58, 111, 0.2); }
    .surah-dot.is-on { background: var(--accent); }
    .surah-slide-nav { display: none; margin-top: 12px; }
    @media (max-width: 768px) {
      .surah-dots { display: flex; }
      .surah-slide-nav { display: block; }
      .surah-actions-wide { display: none; }
    }

    .surah-select-readout {
      background: rgba(30, 58, 111, 0.05);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--ink);
      margin: 14px 0 12px;
      line-height: 1.6;
    }
    .surah-select-readout strong { font-family: 'Baloo 2', sans-serif; }
    .surah-btn-primary {
      width: 100%;
      border: none;
      background: var(--accent);
      color: #fff;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 17px;
      border-radius: 16px;
      padding: 14px;
      cursor: pointer;
    }
    .surah-btn-primary:active { transform: scale(0.98); }
    .surah-btn-secondary {
      width: 100%;
      border: 1.5px solid rgba(30, 58, 111, 0.2);
      background: var(--surface);
      color: var(--ink);
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 15px;
      border-radius: 14px;
      padding: 12px;
      cursor: pointer;
      margin-bottom: 8px;
    }
    .surah-btn-next {
      width: 100%;
      border: none;
      background: var(--ink);
      color: #fff;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 16px;
      border-radius: 14px;
      padding: 13px;
      cursor: pointer;
    }
    .surah-select-legend {
      margin: 11px 0 2px;
      font-size: 12px;
      color: #9aa6c2;
      text-align: center;
    }
    .ssl-star { color: var(--highlight); }

    .countdown-overlay {
      position: absolute;
      inset: 0;
      z-index: 30;
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      gap: 16px;
      padding: 24px;
      opacity: 1;
      transition: opacity 0.5s ease;
    }
    .countdown-overlay.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
    .countdown-label {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: var(--ink-soft);
      letter-spacing: 0.4px;
      text-align: center;
    }
    .countdown-number {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 160px;
      line-height: 1;
      color: var(--accent);
      animation: countdownPulse 1s ease-in-out;
      text-align: center;
    }
    /* Niyyah tick — text-sized rather than giant numeral.
       Reflective beat, less energetic, no pulse animation. */
    .countdown-number.is-niyyah {
      font-size: clamp(36px, 6vw, 52px);
      color: var(--accent-deep);
      animation: niyyahFadeIn 0.8s ease-out;
      max-width: 600px;
      line-height: 1.15;
    }
    .countdown-quote {
      font-family: 'Nunito', sans-serif;
      font-style: italic;
      font-size: clamp(14px, 2vw, 18px);
      color: var(--ink-soft);
      max-width: 460px;
      text-align: center;
      margin-top: -8px; /* tighten the visual relationship with heading */
      animation: niyyahFadeIn 1s ease-out 0.2s both;
    }
    .countdown-quote.is-hidden { display: none; }
    @keyframes countdownPulse {
      0%   { transform: scale(0.6); opacity: 0; }
      30%  { transform: scale(1.1); opacity: 1; }
      60%  { transform: scale(1); opacity: 1; }
      100% { transform: scale(0.9); opacity: 0.85; }
    }
    @keyframes niyyahFadeIn {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* ===== Completion screen ===== */
    .practice-complete {
      position: fixed;
      inset: 0;
      z-index: 180;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: #e8e0d0 url('/salah/salah-bg-desktop.webp') center center / cover no-repeat;
    }
    .practice-complete::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      pointer-events: none;
    }
    @media (max-width: 768px) {
      .practice-complete {
        background-image: url('/salah/salah-bg-mobile.webp');
      }
    }
    .practice-complete.is-visible { display: flex; }
    .practice-complete-card {
      position: relative;
      z-index: 1;
      max-width: 460px;
      width: 100%;
      background: var(--surface);
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(30, 58, 111, 0.18);
      padding: 40px 32px;
      text-align: center;
      animation: completeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes completeIn {
      0%   { opacity: 0; transform: scale(0.9) translateY(20px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .practice-complete-icon {
      font-size: 56px;
      margin-bottom: 12px;
    }
    .practice-complete-title {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 26px;
      color: var(--ink);
      margin-bottom: 10px;
    }
    .practice-complete-blessing {
      font-size: 16px;
      color: var(--ink-soft);
      line-height: 1.5;
      margin-bottom: 24px;
      font-style: italic;
    }
    .practice-complete-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .practice-complete-btn {
      padding: 14px 24px;
      border-radius: 999px;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
      border: none;
    }
    .practice-complete-btn--primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 6px 16px rgba(240, 96, 128, 0.35);
    }
    .practice-complete-btn--primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(240, 96, 128, 0.45);
    }
    .practice-complete-btn--secondary {
      background: rgba(30, 58, 111, 0.06);
      color: var(--ink);
    }
    .practice-complete-btn--secondary:hover {
      background: rgba(30, 58, 111, 0.1);
    }

    /* ===== Mobile sizing ===== */
    @media (max-width: 879px) {
      /* Body: solid background since the fullscreen stage covers everything */
      body {
        background: #000 !important;
        background-image: none !important;
      }
      body::before {
        display: none;
      }

      /* Top bar: dark gradient since it sits on top of the fullscreen image */
      .practice-topbar {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .practice-rakat-badge {
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      }
      .practice-progress-track {
        background: rgba(255, 255, 255, 0.25);
      }

      /* Stage takes over the whole viewport — fullscreen cinematic mode */
      .practice-stage {
        position: fixed;
        inset: 0;
        max-width: none;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        display: block;
        background: #000;
        z-index: 1;
      }
      /* Countdown matches the full-bleed stage (no rounded corners) */
      .countdown-overlay {
        border-radius: 0;
      }

      /* Image fills the whole viewport on mobile (was left-column on desktop) */
      .practice-image-wrap {
        position: absolute;
        inset: 0;
        opacity: 1;
        transition: opacity 0.35s ease;
      }
      /* Exit fade-out faster than the JS handoff timer so the image
         is fully invisible before stepImage.src is swapped to the new
         posture. Base 0.35s stays for the cinematic fade-in when Layth
         returns. */
      .practice-stage[data-phase="exiting"] .practice-image-wrap {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .practice-image-fallback {
        color: rgba(255, 255, 255, 0.8);
      }

      /* White overlay re-enabled on mobile — drives the cinematic fade */
      .practice-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.80);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
      }
      .practice-stage[data-phase="fading"] .practice-overlay,
      .practice-stage[data-phase="reciting"] .practice-overlay,
      .practice-stage[data-phase="exiting"] .practice-overlay {
        opacity: 1;
      }

      /* Content panel: fills the whole stage, opacity-controlled by phase */
      .practice-content {
        position: absolute;
        inset: 0;
        /* Top padding lifts the first word to roughly the 30% anchor
           mark. 80px is the topbar reserve; 22dvh adds the visual gap
           so verse content starts in the comfortable reading position
           even before the karaoke begins scrolling.
           Bottom padding (70dvh) gives every word enough scrollable
           runway to reach the same anchor; without it, the last words
           in a long verse can never scroll high enough. */
        padding: calc(80px + 22dvh) 24px 70dvh;
        gap: 16px;
        opacity: 0;
        transition: opacity 0.4s ease 0.2s;
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .practice-stage[data-phase="reciting"] .practice-content {
        opacity: 1;
      }
      /* Exit fade: faster than either JS handoff timer (250ms for
         transition takbirs, 350ms for regular steps) so the CSS
         transition has fully completed before renderStep swaps in
         the next step's content. Previously 0.3s, which raced the
         250ms transition-takbir timer and let the new step's text
         flash through at ~17% opacity. */
      .practice-stage[data-phase="exiting"] .practice-content {
        opacity: 0;
        transition: opacity 0.2s ease 0;
      }
      /* Translation is for Quran study mode, not Salah practice mode.
         Kids learn meaning beforehand and pray with their focus on the
         recitation itself, not English text. Hide the slot entirely. */
      .practice-translation { display: none; }

      /* Mobile base Arabic: unified to the largest size so the word
         size never jumps between tasbih, takbir, and surah steps. */
      .practice-word-arabic {
        font-size: clamp(72px, 16vw, 96px);
        line-height: 1.6;
      }

      /* Mobile multi-verse: kid puts phone on floor, prays standing.
         Text needs to be MUCH bigger than the desktop scale (~56px floor)
         so they can read while standing on the prayer rug. Wraps gracefully
         if verses are long. */
      .practice-stage.is-multi-verse .practice-word-arabic {
        font-size: clamp(72px, 16vw, 96px);
        line-height: 1.6;
      }
      .practice-stage.is-multi-verse .practice-word-translit {
        font-size: clamp(18px, 4vw, 24px);
        margin-top: 6px;
      }
      .practice-stage.is-multi-verse .practice-word-grid {
        gap: 18px 24px;
        max-width: 100%;
      }

      /* Mobile short-tasbih (.is-large-text): 2-7 words like
         "Allahu Akbar" or "Subhana Rabbiyal Adheem" — kid puts
         phone on the floor and needs to read while standing.
         Bigger floor (72px) than multi-verse since short tasbih
         have plenty of horizontal room on a single line. */
      .practice-stage.is-large-text .practice-word-arabic {
        font-size: clamp(72px, 16vw, 96px);
        line-height: 1.5;
      }
      .practice-stage.is-large-text .practice-word-translit {
        font-size: clamp(20px, 4.5vw, 28px);
        margin-top: 8px;
      }
      .practice-stage.is-large-text .practice-word-grid {
        gap: 16px 28px;
      }
    }

    @media (max-width: 600px) {
      .practice-content {
        padding: 76px 18px 30px;
      }
      .practice-topbar {
        padding-left: 12px;
        padding-right: 12px;
        gap: 10px;
      }
      .practice-exit-btn,
      .practice-pause-btn { width: 40px; height: 40px; }
      .countdown-number {
        font-size: 120px;
      }
      .countdown-number.is-niyyah {
        font-size: clamp(28px, 7vw, 36px);
      }
      .countdown-quote {
        font-size: clamp(13px, 3vw, 15px);
      }
      .practice-word-grid {
        gap: 6px 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    }