/* =====================
   SKELETON LOADERS
   ===================== */

/* Hairline placeholder lines — no shimmer, no spinners */
.skeleton-line {
    height: 1px;
    background: var(--color-border);
    margin-block: 0.75rem;
    width: 100%;
}

.skeleton-line--short {
    width: 60%;
}

/* ── Skeleton container fills the view ── */
.skeleton-container {
    flex: 1 1 0%;
    overflow-y: hidden;
    padding: 0 1rem;
    width: 100%;
}

/* ── Skeleton: Home screen ── */
.skeleton-home {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}

.skeleton-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.skeleton-home-header .skeleton-line {
    height: 1px;
    width: 32px;
}

.skeleton-home-header .skeleton-line:nth-child(2) {
    width: 120px;
}

.skeleton-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.skeleton-tabs .skeleton-line {
    height: 1px;
    flex: 1;
}

.skeleton-progress {
    height: 100px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.skeleton-continue {
    height: 180px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.skeleton-lesson {
    height: 110px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* ── Skeleton: Study screen ── */
.skeleton-study {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}

.skeleton-study-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.skeleton-study-header .skeleton-line {
    height: 1px;
    width: 60px;
}

.skeleton-study-header .skeleton-line:last-child {
    width: 180px;
}

.skeleton-study-word {
    height: 64px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* ── Skeleton: Settings ── */
.skeleton-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
}

.skeleton-settings-row {
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.skeleton-settings-row:nth-child(2) {
    width: 70%;
}

/* ── Skeleton: Game (generic) ── */
.skeleton-game {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
    align-items: center;
}

.skeleton-game-question {
    height: 120px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.skeleton-game-option {
    height: 52px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.skeleton-game-option:nth-child(2) { width: 85%; }
.skeleton-game-option:nth-child(3) { width: 75%; }