/**
 * Matériel de numération base 10 — styles des pièces
 * (styles communs dans public/css/materiel-commun.css)
 */

.mn-swatch-u {
    width: 18px;
    height: 18px;
    background: #f9ca24;
    border: 2px solid #c99b0a;
}
.mn-swatch-d {
    width: 10px;
    height: 40px;
    background: #6ab04c;
    border: 2px solid #43823a;
}
.mn-swatch-c {
    width: 34px;
    height: 34px;
    background: #4a69bd;
    border: 2px solid #2c4a94;
}
.mn-swatch-m {
    width: 34px;
    height: 34px;
    background: #e55039;
    border: 2px solid #b03222;
    box-shadow: 3px -3px 0 #b03222;
}

.mn-piece-u {
    width: 24px;
    height: 24px;
    background: #f9ca24;
    border: 2px solid #c99b0a;
}

.mn-piece-d {
    width: 24px;
    height: 240px;
    background-color: #6ab04c;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 22px,
        rgba(0, 0, 0, 0.28) 22px,
        rgba(0, 0, 0, 0.28) 24px
    );
    border: 2px solid #43823a;
}

.mn-piece-c {
    width: 240px;
    height: 240px;
    background-color: #4a69bd;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 22px,
            rgba(0, 0, 0, 0.28) 22px,
            rgba(0, 0, 0, 0.28) 24px
        ),
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent 22px,
            rgba(0, 0, 0, 0.28) 22px,
            rgba(0, 0, 0, 0.28) 24px
        );
    border: 2px solid #2c4a94;
}

.mn-piece-m {
    width: 240px;
    height: 240px;
    background-color: #e55039;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 22px,
            rgba(0, 0, 0, 0.28) 22px,
            rgba(0, 0, 0, 0.28) 24px
        ),
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent 22px,
            rgba(0, 0, 0, 0.28) 22px,
            rgba(0, 0, 0, 0.28) 24px
        );
    border: 2px solid #b03222;
    box-shadow:
        8px -8px 0 #b03222,
        4px -4px 0 #cf4630;
}