/**
 * Balance de Roberval — styles
 * (styles communs dans public/css/materiel-commun.css)
 */

/* Socle et colonne */
.ba-stand {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 26px;
    height: 210px;
    background: linear-gradient(90deg, #78909c, #546e7a);
    border-radius: 6px 6px 0 0;
}

.ba-stand::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 190px;
    height: 16px;
    background: linear-gradient(#78909c, #455a64);
    border-radius: 8px;
}

/* Fléau : pivote autour de son centre */
.ba-beam {
    position: absolute;
    left: 50%;
    width: 520px;
    height: 12px;
    margin-left: -260px;
    background: linear-gradient(#90a4ae, #607d8b);
    border-radius: 6px;
    transform-origin: 50% 50%;
    transition: transform 0.5s ease;
}

.ba-beam::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    background: #455a64;
    border-radius: 50%;
}

/* Plateaux : suivent verticalement les extrémités du fléau */
.ba-pan {
    position: absolute;
    width: 210px;
    transition: top 0.5s ease;
}

.ba-plate {
    height: 16px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(#b0bec5, #78909c);
    border: 2px solid #607d8b;
}

.ba-items {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 2px 4px;
}

.ba-items .mn-piece {
    position: static;
}

/* Fils de suspension */
.ba-pan::before,
.ba-pan::after {
    content: '';
    position: absolute;
    top: -46px;
    width: 2px;
    height: 50px;
    background: #607d8b;
}

.ba-pan::before {
    left: 18px;
    transform: rotate(18deg);
}
.ba-pan::after {
    right: 18px;
    transform: rotate(-18deg);
}

/* État équilibré */
.mn-workspace.ba-balanced .ba-beam {
    background: linear-gradient(#81c784, #4caf50);
}

/* Masses marquées : laiton, taille selon la valeur */
.mn-piece.ba-mass {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #5d4014;
    background: linear-gradient(160deg, #e8c877, #c9a24a 60%, #a8842f);
    border: 2px solid #8a6a24;
    border-radius: 6px 6px 3px 3px;
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.4);
    cursor: grab;
}

.ba-m1 {
    width: 30px;
    height: 26px;
    font-size: 0.62rem;
}
.ba-m2 {
    width: 34px;
    height: 30px;
    font-size: 0.65rem;
}
.ba-m5 {
    width: 38px;
    height: 34px;
    font-size: 0.7rem;
}
.ba-m10 {
    width: 42px;
    height: 38px;
    font-size: 0.72rem;
}
.ba-m20 {
    width: 46px;
    height: 42px;
    font-size: 0.75rem;
}
.ba-m50 {
    width: 52px;
    height: 48px;
    font-size: 0.8rem;
}
.ba-m100 {
    width: 58px;
    height: 54px;
    font-size: 0.85rem;
}
.ba-m200 {
    width: 64px;
    height: 58px;
    font-size: 0.85rem;
}
.ba-m500 {
    width: 70px;
    height: 64px;
    font-size: 0.9rem;
}
.ba-m1000 {
    width: 78px;
    height: 72px;
    font-size: 0.9rem;
}

/* Objet mystère */
.mn-piece.ba-mystery {
    width: 74px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(160deg, #9575cd, #673ab7);
    border: 2px solid #4527a0;
    border-radius: 8px;
    cursor: grab;
}

/* Swatches */
.ba-swatch-mass {
    display: inline-block;
    width: 22px;
    height: 20px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(160deg, #e8c877, #a8842f);
    border: 2px solid #8a6a24;
}

.ba-swatch-mystery {
    display: inline-block;
    width: 24px;
    height: 20px;
    border-radius: 4px;
    background: #673ab7;
    border: 2px solid #4527a0;
}