/**
 * Cadre à perles (rekenrek / boulier) — styles
 * (styles communs dans public/css/materiel-commun.css)
 * Tiges de 10 perles : 5 rouges puis 5 blanches, à pousser à gauche.
 */

.pe-frame {
    position: absolute;
    inset: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border: 10px solid #8d6e63;
    border-radius: 14px;
    background: #fdfdf8;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.08);
}

.pe-row {
    position: relative;
    height: 44px;
    flex: 0 0 auto;
}

/* la tige */
.pe-row::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(#b0a08e, #8d7b66);
    border-radius: 3px;
}

.pe-bead {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    transition: left 0.25s ease;
    box-shadow:
        inset -4px -4px 6px rgba(0, 0, 0, 0.25),
        inset 3px 3px 5px rgba(255, 255, 255, 0.5);
    touch-action: none;
}

.pe-bead-red {
    background: radial-gradient(circle at 35% 30%, #ff7b6b, #c0392b 70%);
    border: 1px solid #8f2a20;
}

.pe-bead-white {
    background: radial-gradient(circle at 35% 30%, #ffffff, #d5d5d5 70%);
    border: 1px solid #a5a5a5;
}

/* Cadre compact quand il y a 10 tiges (boulier 100) */
.pe-frame.pe-compact {
    gap: 6px;
}

.pe-frame.pe-compact .pe-row {
    height: 34px;
}

.pe-frame.pe-compact .pe-bead {
    width: 30px;
    height: 30px;
}