/* ==========================================================================
   سلم الحفظ — صفحة الإعداد
   Sits on the shared setup card; the game's own pieces in the platform
   palette (purple #8B5CF6 → pink #EC4899), like the play screen.
   ========================================================================== */

.hl-why {
    display: flex; gap: 18px; align-items: center;
    background: #F5F3FF; border: 2px dashed #DDD6FE; border-radius: 16px;
    padding: 16px 18px; margin-bottom: 20px; color: #1F2937;
}
.hl-why h4 { font-size: 1rem; font-weight: 800; color: #3B0764; margin: 0 0 6px; }
.hl-why p { margin: 0 0 8px; font-size: .92rem; line-height: 1.8; }
.hl-why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .9rem; line-height: 1.7; }

/* ---- the ladder in miniature ---- */
.hl-mini { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.hl-mini-trophy { font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(245, 158, 11, .45)); margin-bottom: 2px; }
.hl-mini-ladder {
    position: relative; width: 74px; padding: 4px 0;
    border-inline: 5px solid #8B5CF6; border-radius: 4px;
    display: flex; flex-direction: column; gap: 6px;
}
.hl-mini-rung {
    position: relative; height: 16px; margin: 0 2px; border-radius: 5px;
    background: #EDE9FE; display: grid; place-items: center;
}
.hl-mini-rung b { font-size: .65rem; font-weight: 800; color: #6D28D9; }
.hl-mini-done { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.hl-mini-done b { color: #fff; }
.hl-mini-rung i { position: absolute; inset-inline-end: -26px; font-style: normal; font-size: .9rem; }
.hl-mini-next { background: #FDE68A; }
.hl-mini-rung em { font-style: normal; font-size: 1.15rem; line-height: 1; margin-top: -8px; }

.hl-alert-error { border-color: #FECACA; background: #FEF2F2; }
.hl-alert-error p { color: #B91C1C; font-weight: 700; margin: 0; }

.verse-count.hl-count-bad { color: #B91C1C; }
.hl-whole {
    display: inline-block; margin: 8px 0 0; padding: 4px 12px; border-radius: 999px;
    background: #FFFBEB; border: 2px solid #FDE68A; color: #92400E; font-size: .85rem; font-weight: 800;
}

@media (max-width: 480px) {
    .hl-why { flex-direction: column; align-items: stretch; }
    .hl-mini { align-self: center; }
}