/* ═══════════════════════════════════════════════════════════
   ACTIVE PHRASE / ACTIVE DRAGGING — Ink & Cream design system
   ═══════════════════════════════════════════════════════════ */

/* ── Header area added by renderProgressBar() ─────────────── */
#ap-progress-wrap {
    width: 100%;
    padding: .75rem 1rem .5rem;
    box-sizing: border-box;
}

#ap-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .55rem;
}

#ap-stats-row {
    display: flex;
    gap: .4rem;
    align-items: center;
}

/* Badges */
.ap-badge {
    font-size: .78rem;
    font-weight: 800;
    border-radius: 99px;
    padding: .22rem .7rem;
    font-family: var(--font-body, 'Nunito', sans-serif);
}

.ap-badge--score {
    background: rgba(215, 249, 255, .35);
    border: 1px solid rgba(175, 203, 255, .3);
    color: var(--ink, #0e1c36);
}

.ap-badge--streak {
    background: rgba(255, 237, 225, .6);
    border: 1px solid rgba(255, 180, 100, .25);
    color: #c2410c;
}

/* Hint button */
.ap-hint-btn {
    font-family: var(--font-body, 'Nunito', sans-serif);
    font-size: .78rem;
    font-weight: 800;
    border-radius: 99px;
    padding: .22rem .75rem;
    background: var(--paper, #F9FBF2);
    border: 1.5px solid rgba(14, 28, 54, .12);
    color: var(--ink, #0e1c36);
    cursor: pointer;
    transition: background .18s, transform .18s;
}

.ap-hint-btn:hover:not(:disabled) {
    background: rgba(175, 203, 255, .18);
    transform: translateY(-1px);
}

.ap-hint-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Progress bar */
#ap-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(14, 28, 54, .08);
    border-radius: 99px;
    overflow: hidden;
}

#ap-progress-fill {
    height: 100%;
    background: var(--primary-container, #fd9937);
    border-radius: 99px;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
    width: 0%;
}

#ap-progress-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink-muted, #5a6e97);
    margin-top: .25rem;
    display: block;
    font-family: var(--font-body, 'Nunito', sans-serif);
}

/* ── Grammar note banner ──────────────────────────────────── */
.ap-grammar-banner {
    margin-top: .65rem;
    padding: .65rem 1rem;
    background: rgba(175, 203, 255, .1);
    border: 1.5px solid rgba(175, 203, 255, .3);
    border-radius: 14px;
    font-family: var(--font-body, 'Nunito', sans-serif);
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink, #0e1c36);
    animation: apGrammarIn .3s ease;
}

@keyframes apGrammarIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Complete screen ──────────────────────────────────────── */
.ap-complete {
    text-align: center;
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body, 'Nunito', sans-serif);
}

.ap-complete h2 {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.8rem;
    color: var(--ink, #0e1c36);
}

.ap-complete p {
    color: var(--ink-muted, #5a6e97);
    font-size: 1rem;
}

/* ── Input states improvements ────────────────────────────── */
.phrase-input-wrong {
    animation: apShake .35s ease;
}

@keyframes apShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

.phrase-input-right {
    border-color: rgba(42, 154, 74, .5) !important;
    background: rgba(42, 154, 74, .06) !important;
}

/* ── Drag chip improvements ────────────────────────────────── */
.drag {
    display: inline-block;
    background: var(--paper, #F9FBF2);
    border: 1.5px solid rgba(14, 28, 54, .1);
    border-radius: 10px;
    padding: .35rem .85rem;
    font-family: var(--font-body, 'Nunito', sans-serif);
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink, #0e1c36);
    cursor: grab;
    margin: .25rem;
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
    box-shadow: 0 2px 8px rgba(14, 28, 54, .08);
}

.drag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(175, 203, 255, .25);
    border-color: rgba(175, 203, 255, .5);
}

.drag:active {
    cursor: grabbing;
}