/* ============================================================================
   Catch the Qalqalah — the hunt board.

   Not the card deck: here the whole ayah is the board and every Qalqalah
   letter in it is a target the child can tap. Shares the game shell
   (front.layouts.game) and the sky, nothing else.
   ========================================================================= */

.game-screen {
    position: relative;
    height: 100%;
    overflow-y: auto;
    background: linear-gradient(160deg, #FAF5FF 0%, #FDF2F8 55%, #FFF9F0 100%);
    user-select: none;
}

.qh {
    position: relative; z-index: 1; min-height: 100%;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 72px 20px 16px; max-width: 760px; margin: 0 auto;
}

.progress-wrapper { position: fixed; top: 61px; left: 0; right: 0; height: 5px; background: #EDE9FE; z-index: 99; }
.progress-fill {
    width: 100%; height: 100%; background: linear-gradient(90deg, #8B5CF6, #EC4899);
    transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
[dir=rtl] .progress-fill { transform-origin: right center; }

.qh-q { font-weight: 800; color: #3B0764; text-align: center; font-size: 1.05rem; margin: 0; }

/* Where the verse comes from, and how much of it is still hidden. */
.qh-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: .85rem; }
.qh-source { color: #6D28D9; background: #F5F3FF; border: 2px dashed #DDD6FE; border-radius: 12px; padding: 3px 14px; font-weight: 700; }
.qh-found { color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); border-radius: 50px; padding: 3px 14px; font-weight: 800; }
.qh-listen {
    display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
    color: #6D28D9; background: #fff; box-shadow: 0 4px 14px rgba(76, 29, 149, .12);
    border-radius: 50px; padding: 4px 14px; font: inherit; font-size: .85rem; font-weight: 700;
}
.qh-listen:hover { background: #F5F3FF; }
.qh-listen.is-playing { color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); }

/* ---- the verse ---------------------------------------------------------
   One sheet of mushaf text. The plain stretches are inert; every Qalqalah
   letter in it is a button, whether it carries a sukun or not — that is the
   whole question, so the child must not be able to tell them apart by looking
   at which ones are tappable. ----------------------------------------- */
.qh-verse {
    width: 100%; background: #fff; border: 2px solid #EDE9FE; border-radius: 22px;
    padding: 22px 20px; box-shadow: 0 14px 40px rgba(76, 29, 149, .12);
    font-family: 'Amiri Quran', 'Amiri', serif; font-size: 2.15rem; line-height: 3.25;
    color: #1F2937; text-align: center; direction: rtl;
}
.qh-verse.is-cleared { border-color: #10B981; background: #F0FDF4; }

/* No horizontal padding, no margin and no border box: any of them would pull
   the letter away from the one it is joined to and undo the stitching.
   The highlight is a painted band instead of a background, because a
   background fills the whole line box — and at line-height 2.6 that is a tall
   column standing beside the letter rather than a mark on it. The band is
   sized in em and parked over the glyph. */
.qh-spot {
    font: inherit; color: inherit; border: 0; padding: 0; margin: 0; cursor: pointer;
    background-color: transparent;
    background-image: linear-gradient(to bottom, #EDE9FE calc(100% - 3px), #C4B5FD 0);
    background-repeat: no-repeat;
    background-size: 100% 1.25em;
    background-position: center 62%;
    transition: background-image .2s, color .2s;
}
.qh-spot:hover:not(:disabled) {
    background-image: linear-gradient(to bottom, #DDD6FE calc(100% - 3px), #8B5CF6 0);
}
.qh-spot.is-hit {
    color: #047857; cursor: default;
    background-image: linear-gradient(to bottom, #D1FAE5 calc(100% - 3px), #10B981 0);
    animation: qhPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes qhPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.qh-spot.is-miss {
    color: #B91C1C; cursor: default;
    background-image: linear-gradient(to bottom, #FEE2E2 calc(100% - 3px), #EF4444 0);
    animation: qhShake .4s;
}
@keyframes qhShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* A spot left unfound when the verse is given up on. */
.qh-spot.is-shown {
    color: #92400E; cursor: default;
    background-image: linear-gradient(to bottom, #FEF3C7 calc(100% - 3px), #F59E0B 0);
}

/* The spot's number, for a child who can see the screen but cannot reach it.
   It is taken out of the flow and parked above the letter: in the line it
   would take horizontal space and split the word open at the very spot the
   child has to read as part of that word. */
.qh-spot { position: relative; }
.qh-num {
    /* Parked at the TOP of the line box, not measured up from the baseline.
       Measured from the baseline it landed on the harakat: the tallest mark ink
       (tanwin damm) reaches 1.2em above the baseline, and the number was
       sitting 12px inside that — covering the very sukun the child has to see.
       `top` is independent of where the baseline falls; the leading added by
       .qh-verse's line-height is what keeps it clear of the marks. */
    --scale: .32;
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 0;
    font-family: 'Tajawal', sans-serif; font-size: calc(1em * var(--scale));
    font-weight: 800; line-height: 1;
    color: #6D28D9; background: #EDE9FE; border: 1px solid #DDD6FE; border-radius: 50px;
    padding: .16em .45em; pointer-events: none; user-select: none; white-space: nowrap;
}
.qh-verse.is-bare .qh-num { display: none; }
.qh-spot.is-hit .qh-num { color: #047857; background: #D1FAE5; border-color: #A7F3D0; }
.qh-spot.is-miss .qh-num { color: #B91C1C; background: #FEE2E2; border-color: #FECACA; }

.qh-hint { font-size: .82rem; color: #6B7280; text-align: center; margin: 0; max-width: 46ch; }
.qh-typed {
    display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: #6D28D9;
    background: #F5F3FF; border: 2px dashed #DDD6FE; border-radius: 12px; padding: 4px 16px;
}
.qh-typed b { font-size: 1.15rem; min-width: 1.4em; text-align: center; }

.qh-feedback {
    width: 100%; background: #fff; border: 1px solid #EDE9FE; border-radius: 14px; padding: 11px 14px;
    font-size: .95rem; color: #3B0764; line-height: 1.7; text-align: center;
    box-shadow: 0 6px 18px rgba(76, 29, 149, .08);
}
.qh-feedback.is-miss { color: #B91C1C; border-color: #FECACA; }
.qh-save { font-size: .8rem; color: #6B7280; min-height: 1.2em; }
.qh-save.error { color: #B3261E; }
.qh-next {
    min-height: 44px; padding: 9px 30px; border: 0; border-radius: 50px; font: inherit; font-weight: 800;
    color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); cursor: pointer;
    box-shadow: 0 10px 30px rgba(139, 92, 246, .35);
}
.qh-next:hover { transform: translateY(-2px); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .qh-spot { animation: none !important; } }

/* A phone must show the verse, the counter and the line that explains a miss
   without scrolling. The verse is the one thing allowed to grow, so it shrinks
   first. */
@media (max-width: 600px) {
    .qh { gap: 7px; padding: 100px 12px 10px; }
    .progress-wrapper { top: 96px; }
    .qh-verse { font-size: 1.65rem; line-height: 3.25; padding: 12px 10px; border-radius: 18px; }
    .qh-spot { background-size: 100% 1.15em; }
    .qh-num { --scale: .34; padding: .16em .4em; }
    .qh-hint { font-size: .75rem; }
    .qh-meta { font-size: .78rem; gap: 7px; }
    .qh-feedback { padding: 9px 12px; font-size: .86rem; line-height: 1.6; }
    .qh-next { min-height: 40px; padding: 8px 24px; font-size: .92rem; }
}