/* Copyright (C) 2025, Célia Piquet <cepiquet@proton.me> */
body {
    border: thick solid;
    position: absolute;
    top: 0;
    right: 0;
    min-height: 100dvh;
    left: 0;
    overflow: auto;
}

.game-cell {
    border: solid;
}

.white {
    background: lightgray
}

.fuchsia {
    background-color: hotpink;
}

.orange {
    background-color: #ff6d37;
}

.purple {
    background-color: mediumpurple;
}

.yellow {
    background-color: #f8d04c;
}

.green {
    background-color: mediumseagreen;
}

.blue {
    background-color: #4a90e2;
}

.maroon {
    background-color: #5D4037;
}

.red {
    background-color: #e63946;
}

.custom-textarea {
    height: 50dvh !important;
    resize: none;
    background-color: lightgrey !important;
    font-size: 20px !important;
    font-family: 'Source Code Pro', 'Consolas', 'Monaco', monospace !important;
    color: #434f54 !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    padding: 12px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.square {
    width: 20px;
    height: 20px;
    display: block;
}

.square-min {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.color-choice {
    padding: 1px 1px 1px 5px;
    margin: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
}

.color-choice:hover {
    background-color: #64dab7;
    color: #2e3439;
}

#color1 {
    background-color: #40575b;
}

#color2 {
    background-color: #5b5240;
}

.alert {
    margin: 0 !important;
}

#alertPlacement, #rowPlayImport {
    min-height: 58px;
}

.btn-primary {
    background-color: #64dab7 !important;
    border-color: rgba(110, 255, 239, 0.2) !important;
    color: #2e3439 !important;
}

.btn-primary:hover {
    background-color: rgba(110, 255, 239, 0.2) !important;
    border-color: rgba(110, 255, 239, 0.2) !important;
    color: white !important;
}

.btn-primary:focus,
.btn-primary:active {
    background-color: #64dab7 !important;
    border-color: rgba(110, 255, 239, 0.2) !important;
    color: #2e3439 !important;
}

pre {
    display: block;
    padding: 5px;
    font-size: .875em;
    background-color: #fff;
    color: #2e3439;
    margin-bottom: 0 !important;
}

#current img, #current1 img {
    filter: drop-shadow(0 0 6px #ffffff);
}

h2 {
    font-size: 1.3rem;
    color: #64dab7;
}

.form-range::-webkit-slider-thumb {
    background-color: #64dab7;
}

.form-range::-moz-range-thumb {
    background-color: #64dab7;
    border: none;
}

/* Cases texturées pour accessibilité */
.white-textured {
    background: lightgray;
    border: solid black 1px;
}

.fuchsia-textured {
    background:
            repeating-linear-gradient(
                    45deg,
                    #ffffff,
                    #ffffff 10px,
                    hotpink 10px,
                    hotpink 20px
            );
}

.orange-textured {
    background:
            radial-gradient(circle at center, #ff6d37 30%, #ffffff 30%),
            #ffffff;
    background-size: 20px 20px;
}

.purple-textured {
    background:
            repeating-linear-gradient(
                    0deg,
                    mediumpurple,
                    mediumpurple 10px,
                    #ffffff 10px,
                    #ffffff 20px
            );
}

.yellow-textured {
    background:
            repeating-conic-gradient(#f8d04c 0% 25%, white 0% 50%) 50% / 40px 40px;
}

.green-textured {
    background:
            repeating-linear-gradient(
                    90deg,
                    #ffffff,
                    #ffffff 10px,
                    mediumseagreen 10px,
                    mediumseagreen 20px
            );
}

.blue-textured {
    background:
            linear-gradient(#005ec7 2px, transparent 2px),
            linear-gradient(90deg, #005ec7 2px, transparent 2px),
            #ffffff;
    background-size: 15px 15px;
}

.maroon-textured {
    background:
            repeating-linear-gradient(
                    -45deg,
                    #ffffff,
                    #ffffff 10px,
                    #5D4037 10px,
                    #5D4037 20px
            );
}

.red-textured {
    background:
            repeating-radial-gradient(
                    circle,
                    #e53935,
                    #e53935 10px,
                    #ffffff 10px,
                    #ffffff 20px
            );
}

.form-check-input {
    width: 3em !important;
    height: 1.5em !important;
    background-color: #6c757d;
    border: none;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #64dab7;
}

.form-switch .form-check-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

pre code.hljs {
    padding: 0.1em 0.5em !important;
}


.square {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: black solid 1px;
}