@font-face {
    font-family: Roboto;
    src: url(../fonts/roboto-regular.woff);
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/roboto-bold.woff);
    font-weight: bold;
}

:root {
    --color1: #e73231;
    --color2: #f67410;
    --color3: #f2cd07;
    --color4: #83b625;
    --color5: #359761;
    --color6: #4079bf;
    --color7: #6e5399;
    --color8: #b34c74;
    --aspect-ratio-width: 1;
    --aspect-ratio-height: 0.75;
    --board-width: 100vmin;
    --board-height: calc(var(--board-width) * 0.75);
}

body {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Roboto, sans-serif;
    background-color: white;
    overflow: hidden;
    cursor: default;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    transition: opacity 2s ease;
}

.title {
    display: flex;
    justify-content: space-between;
    width: calc(var(--board-width) * 0.9);
    height: calc((var(--board-width)) / 10);
    margin: auto;
    margin-top: 40px;
}

.char {
    display: grid;
    place-items: center;
    font-size: calc((var(--board-width) / 12));
    font-weight: bold;
    width: calc(var(--board-width) / 8);
    height: calc(var(--board-width) / 8);
    color: white;
    border-radius: 50%;
}

.char:nth-child(1) {
    background-color: var(--color1);
}

.char:nth-child(2) {
    background-color: var(--color2);
}

.char:nth-child(3) {
    background-color: var(--color3);
}

.char:nth-child(4) {
    background-color: var(--color4);
}

.char:nth-child(5) {
    background-color: var(--color6);
}

.char:nth-child(6) {
    background-color: var(--color8);
}

.rotate {
    transition: transform 1s ease-in-out;
    transform: rotateY(360deg);
}

.board {
    display: flex;
    width: var(--board-width);
    height: var(--board-height);
    margin-top: calc((var(--board-width)) / 2 / 1.5);
}

.tower {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    cursor: pointer;
}

.tower::after {
    content: '';
    position: absolute;
    top: calc(var(--board-height) / -10);
    bottom: calc(var(--board-height) / -10 * 2);
    left: 0;
    right: 0;
}

.rod {
    position: absolute;
    width: calc(var(--board-width) / 3 / 10);
    height: calc(var(--board-height) * 0.9);
    background-color: gainsboro;
    border-radius: calc(var(--board-width) / 3 / 20);
    transition: background-color 0.2s ease;
}

:not(.ai) > .source > .rod, :not(.ai) > .destination > .rod {
    background-color: darkgray;
}

.position {
    width: calc(var(--board-width) / 3 * 0.9);
    height: calc(var(--board-height) / 10);
}

.disk {
    position: absolute;
    border-radius: calc(var(--board-width) / 20);
    height: calc(var(--board-height) / 10);
    cursor: pointer;
}

#disk1 {
    background-color: var(--color1);
    width: calc(var(--board-width) / 3 * 0.8);
}

#disk2 {
    background-color: var(--color2);
    width: calc(var(--board-width) / 3 * 0.75);
}

#disk3 {
    background-color: var(--color3);
    width: calc(var(--board-width) / 3 * 0.7);
}

#disk4 {
    background-color: var(--color4);
    width: calc(var(--board-width) / 3 * 0.65);
}

#disk5 {
    background-color: var(--color5);
    width: calc(var(--board-width) / 3 * 0.6);
}

#disk6 {
    background-color: var(--color6);
    width: calc(var(--board-width) / 3 * 0.55);
}

#disk7 {
    background-color: var(--color7);
    width: calc(var(--board-width) / 3 * 0.5);
}

#disk8 {
    background-color: var(--color8);
    width: calc(var(--board-width) / 3 * 0.45);
}

.visible {
    opacity: 1;
}

.move {
    transition: transform 0.3s linear;
}

#designed {
    position: relative;
    text-align: center;
    align-self: auto;
    color: darkgray;
    font-size: calc(var(--board-width) / 38);
    margin-top: 20px;
}

@media (orientation: landscape) and (max-height: 460px) {

    .title, #designed {
        display: none;
    }

    .board {
        margin-top: auto;
    }
}

@media (prefers-color-scheme: dark) {

    body {
        background-color: black;
    }

    .char {
        color: black;
    }

    .rod {
        background-color: dimgrey;
    }

    :not(.ai) > .source > .rod, :not(.ai) > .destination > .rod {
        background-color: gray;
    }

    #designed {
        color: dimgrey;
    }
}

@media (min-width: 460px) and (min-height: 460px) {

    :root {
        --aspect-ratio-width: 0.8;
        --aspect-ratio-height: 0.5;
    }

    #designed {
        font-size: calc(var(--board-width) / 50);
    }
}

.noselect {
    -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
}