body {
    font-family: Arial, sans-serif;
    background-color: #F5FCFF /* #9cc6d9 */ /* gray */ /* black */;
    padding: 20px;
    --title-char-size: 64px;
    --cell-container-size: 60px;
    --cell-size: 44px;
}

h1 {
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
    line-height: var(--title-char-size);
    user-select: none;
}
h1 > span {
    max-width: var(--title-char-size);
    max-height: var(--title-char-size);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    font-size: 44px;
    box-sizing: border-box;
}

h5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 5px;
}

.game {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    width: 100%;
    margin: 0 auto; /* needed for Safari 15.6.1 */
}
.game.three {
    max-width: 960px;
}

.board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0;
    width: 100%;
}

/* Board and Grids highlighted borders */
.board {
    width: 100%;
    border: 4px solid rgb(222, 184, 135);
    border-radius: 20px;
    background-color: bisque; /* antiquewhite, beige (too light), bisque (not bad), blanchedalmond (not bad), burlywood (why not), cornsilk (too light), floralwhite (too light), lemonchiffon (too yellow), lightgoldenrodyellow (too yellow), lightyellow (too washy), linen, mistyrose, moccasin (not bad), navajowhite (not bad - almost moccasin), oldlace (not bad), papayawhip, peachpuff, peru (contrast conflict), rosybrown (contrast conflict), sandybrown (why not), tan, wheat (not bad) */
    background-image: url('natural-wood-pattern.jpg');
    box-shadow: 4px 2px 24px rgb(127, 112, 93);
    animation: zoom-in 800ms ease;
}
.game.three .board {
    max-width: 560px;
}
.game.two .board > .line:nth-child(2n of :not(:last-child)),
.game.three .board > .line:nth-child(3n of :not(:last-child)),
.game.four .board > .line:nth-child(4n of :not(:last-child)) {
    border-bottom: 4px solid rgb(222, 184, 135);
}
.game.two .board > .line > .cell-container:nth-child(2n of :not(:last-child)),
.game.three .board > .line > .cell-container:nth-child(3n of :not(:last-child)),
.game.four .board > .line > .cell-container:nth-child(4n of :not(:last-child)) {
    border-right: 4px solid rgb(222, 184, 135);
}

@keyframes zoom-in {
    0% {
        scale: 1%;
    }

    100% {
        scale: 100%;
    }
}

.line {
    display: flex;
    /* flex-wrap: nowrap; */
    width: 100%;
}

.cell-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--cell-container-size);
    text-align: center;
    /* line-height: 60px; */
    box-sizing: border-box;
    /* padding: 24px; */ /* To give space to drag/drop zone */
}
/* Handle check-error class rounded border here */
.line:first-child > .cell-container:first-child {
    border-top-left-radius: 20px;
}
.line:first-child > .cell-container:last-child {
    border-top-right-radius: 20px;
}
.line:last-child > .cell-container:last-child {
    border-bottom-right-radius: 20px;
}
.line:last-child > .cell-container:first-child {
    border-bottom-left-radius: 20px;
}

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--cell-size);
    max-height: var(--cell-size);
    width: 100%;
    height: 100%;
    line-height: var(--cell-size);
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    /* font-weight: bold; */
    box-sizing: border-box;
    padding: 0;
    caret-color: transparent;
}
.colored {
    border: outset;
    cursor: grab;
    user-select: none;
    outline: none;
}
.color-0 {
    border: inset;
    background-color: whitesmoke;
}
.color-1 {
    border-color: rgb(4, 79, 220);
    background-color: rgb(20, 87, 213);
    color: white;
}
.color-2 {
    /* color: rgb(202, 8, 131); */
    border-color: rgb(220, 4, 213);
    background-color: rgb(255, 0, 247);
    color: white;
}
.color-3 {
    /* color: rgb(249, 47, 198); */
    border-color: rgb(218, 5, 5);
    background-color: rgb(255, 0, 0);
    color: white;
}
.color-4 {
    border-color: rgb(231, 79, 3);
    background-color: rgb(249, 105, 16);
    color: white;
}
.color-5 {
    border-color: rgb(2, 138, 88);
    background-color: rgb(0, 148, 94);
    color: white;
}
.color-6 {
    border-color: rgb(129, 177, 60);
    background-color: rgb(151, 207, 73);
    color: black;
}
.color-7 {
    /* color: rgb(149, 0, 207); */
    border-color: rgb(95, 7, 129);
    background-color: rgb(98, 16, 131);
    color: white;
}
.color-8 {
    border-color: rgb(225, 221, 14);
    background-color: rgb(255, 252, 37);
    color: black;
}
.color-9 {
    border-color: rgb(26, 26, 0);
    background-color: rgb(26, 26, 0);
    color: white;
}
.check-error {
    background: orangered;
}
.forbidden {
    cursor: not-allowed;
}
.pawns-container {
    margin: 30px;
}
.pawns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-touch-callout: none; /* the blue highlight */
    user-select: none;
    padding: 10px 0;
    background-color: antiquewhite; /* cornsilk lightyellow slategray wheat */
    border-radius: 20px;
    border: 4px solid rgb(222, 184, 135);
    /* min-height: var(--cell-size); */
}

.pawns:empty:before {
    content: attr(data-placeholder);
}

.pawns .cell, .pawns .cell::selection {
    -webkit-touch-callout: none; /* the blue highlight */
    user-select: none;
    outline: none;
    font-size: 20px;
    --cell-size: 38px;
}

.pawns-right {
    flex-direction: row;
    justify-content: center;
    /* padding: 0 20px; */
}

.pawns-right .pawns-container {
    width: 100%;
    max-width: calc(var(--cell-size) * 6);
}

.overlay {
    position: absolute;
    top: calc(50% - 100px);
    /* line-height: 180px; */
    text-align: center;
    width: 100%;
    /* padding: 0 20px; */
}
.overlay .inside {
    display: flex;
    justify-content: center;
    /* margin-top: -25px; */
    /* padding-bottom: 10px; */
    font-size: 120px;
    width: 100%;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
}
.overlay p {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: white;
    border-radius: 20px;
    margin-bottom: 0;
}
.overlay .inside.message {
    animation: fade-in 2000ms ease;
}
.overlay .inside.normal {
    font-size: 40px;
}
.overlay .inside.result p {
    animation: zoom-in 300ms ease;
}
.overlay .inside.win {
    background: rgba(0, 170, 0, .8);
    color: darkblue;
}
.overlay .inside.fail {
    background: rgba(255, 0, 0, .8);
    color: white;
    font-size: 100px;
}
.game.freeze::after {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}
.pause-icon {
    margin: 6px 0 0 25px;
}

#checkButton.resume, .pulse {
    animation: pulse 1s infinite;
}

.overlay .inside.result p.pulse-one, .pulse-one {
    animation: pulseOne 500ms ease-in-out;
}

@keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
    100% {
      transform: scale(1);
    }
}

@keyframes pulseOne {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(3);
    }
    100% {
      transform: scale(1);
    }
}

@keyframes fade-in {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        transform: translateY(0%);
        opacity: 1;
    }
    80% {
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
    }
}

.stopwatch {
    background: black;
    color: greenyellow;
    font-weight: normal;
}

/* Remove parts below on final UI ? */
.buttons-container {
    /* margin: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.buttons-container > * {
    margin: 10px 5px;
}

.play-link-big {
    font-size: 120px;
}

.shuffle-link-big {
    font-size: 80px;
}

.edit-link-big {
    font-size: 80px;
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .pawns-right .pawns-container {
        max-width: calc(var(--cell-size) * 5);
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .game {
        flex-direction: column;
    }
    .game .pawns-container {
        width: unset;
        min-width: calc(var(--cell-size) * 6);
        margin: 0;
    }
    .pawns-right .pawns-container {
        max-width: 100%;
        min-height: calc(var(--cell-size) * 6);
    }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        -webkit-touch-callout: none; /* the blue highlight */
        user-select: none;
        padding: 20px 5px;
    }
    h1 {
        --title-char-size: 44px;
    }
    h1 > span {
        font-size: 34px;
    }
    h5 {
        font-size: 14px;
    }
    .board-container {
        margin: 0 0 20px 0;
    }
    .board {
        zoom: 65%;
    }
    .cell {
        border-width: 1px;
        /* font-size: 22px; */
    }
    .pawns-right .pawns-container {
        max-width: unset;
        min-height: calc(var(--cell-size) * 6);
    }
    .pawns {
        zoom: 70%;
    }
    .pawns .cell {
        --cell-size: 44px;
        /* font-size: 18px; */
    }
    .overlay {
        top: calc(50% - 240px);
    }
    .overlay .inside {
        font-size: 40px;
    }
    .overlay .inside.normal {
        font-size: 30px;
    }
}

/* `xs` returns only a ruleset and no media query */

@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(0, 54, 77)/* rgb(0, 40, 57) */;
        color: #d1cdc7;
    }
    h5 {
        color: white;
    }
}