/*Reddit Mono Font (Google)*/
@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

html, html * {
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Reddit Mono", monospace;
    font-optical-sizing: auto;
    overflow: hidden;
}

body, #board, .paths, .path, .math, .path::after {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paths {
    justify-content: flex-end;
    width: 100%;
}

body {
    user-select: none;
    --size: 20vh;
    --text-size: 6vh;
    --padding: 8vh;
    --color-back: #ecf0f1;
    --color-alpha-back: #ecf0f133;
    --color-front: #2c3e50;
    --color-good: #27ae60;
    --color-over: #c0392b;
    --color-under: #bdc3c7;
    --color-alpha-under: #bdc3c733;
    --color-solid-alpha-under: #d5dadc;
    --color-shadow: #34353633;
    --color-light-shadow: #34353622;
    --color-solid-shadow: #d4d7d8;
    --color-select: #2980b9;
    --color-available: #8e44ad;
    --color-key: #fd79a8;
    --color-attack: #f1c40f;
    --color-lock: #e67e22;
    --cursor-default: default;
    --cursor-pointer: pointer;
    --cursor-grabbing: grabbing;
    --cursor-grab: grab;
    --cursor-no-drop: no-drop;
    --background: 100%;
    /*TODO: add texture of  broken glass*/
    background: radial-gradient(var(--color-back) var(--background), var(--color-solid-shadow));
    transition-duration: 0.2s;
    transition-property: background;
}

body[data-grabbing="true"] {
    cursor: var(--cursor-grabbing);
}

#board {
    flex-direction: column;
    margin-bottom: 8vh;
    opacity: 1;
}

.path {
    --color: var(--color-front);
    --nut-gap: 0deg;
    color: var(--color-front);
    position: relative;
    width: var(--size);
    height: var(--size);
    font-size: calc(var(--size) * 0.5);
    line-height: var(--size);
    font-weight: bold;
    border-radius: 100%;
    border: calc(var(--size) * 0.1) solid var(--color);
    margin: calc(var(--size) * 0.1);
    /*cursor: var(--cursor-grab);*/
    cursor: var(--cursor-pointer);
    background-color: var(--color-back);
}

.path:focus,
.path:active,
.path:hover {
    --nut-gap: 2deg;
}

.path:active, .path[data-get="true"] {
    --nut-gap: 6deg;
}

#board[data-status="over"] .path,
#board[data-status="start"] .path {
    transition-delay: 0s !important;
}

.path > i {
    font-size: calc(var(--size) * 0.3);
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    color: var(--color);
    background-color: var(--color-back);
    /*z-index: -10;*/
}

#undo::before,
#dots::before,
#board[data-countdown="-1"]::before,
#best::before,
#menu input[type="range"] + label i:before,
#menu input[type="range"] + label i:after,
.math::before,
.path[data-padlock="true"]::before,
.path[data-key="true"]::before,
.path > i::before,
.nut::before {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

.path > i::before {
    content: "\f004";
    transform: rotate(-90deg) scaleY(1.5) scaleX(2.5) translateY(calc(var(--size)* -0.1));
    position: absolute;
}

.paths:nth-child(even) {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.paths:nth-child(odd):last-of-type {
    justify-content: flex-start;
}

.paths:last-of-type .path:first-of-type:last-of-type > i,
.paths:first-of-type:last-of-type .path:last-of-type > i {
    display: none;
}

.paths:nth-child(odd):first-of-type:last-of-type .path > i,
.paths:nth-child(odd) .path > i {
    top: unset;
    left: 100%;
    bottom: unset;
    right: unset;
    transform: unset;
}

.paths:nth-child(odd):last-of-type .path > i,
.paths:nth-child(even) .path > i {
    top: unset;
    left: unset;
    bottom: unset;
    right: 100%;
    transform: rotate(180deg);
}

.paths:nth-child(odd):not(:last-of-type) .path:last-of-type > i,
.paths:nth-child(even):not(:last-of-type) .path:nth-last-child(2) > i {
    top: 100%;
    left: unset;
    bottom: unset;
    right: unset;
    transform: rotate(90deg);
}

.paths:nth-child(odd):not(:first-of-type) .path:first-of-type > i,
.paths:nth-child(even) .path:last-of-type > i {
    top: unset;
    left: unset;
    bottom: 100%;
    right: unset;
    transform: rotate(-90deg);
}

.path[data-padlock="true"]::before,
.path[data-key="true"]::before,
.math, .path::after {
    position: absolute;
    font-size: calc(var(--size) * 0.2);
    width: calc(var(--size) * 0.3);
    height: calc(var(--size) * 0.3);
    line-height: calc(var(--size) * 0.3);
    border-radius: 100%;
}

.math, .path::after {
    background-color: var(--color);
    color: var(--color-back);
}

.path::before {
    /*box-shadow: 0 0 0 calc(var(--size) * 0.033) var(--color);*/
    box-shadow: calc(var(--size)* -0.013) calc(var(--size)* 0.013) calc(var(--size)* 0.013) var(--color-shadow);
}

#board.goofy .paths:nth-child(odd):not(:first-of-type) .path:last-of-type,
#board.goofy .paths:nth-child(even):not(:last-of-type) .path:first-of-type,
#board:not(.goofy) .paths:nth-child(odd):not(:first-of-type):not(:last-of-type) .path:first-of-type,
#board:not(.goofy) .paths:nth-child(even):not(:last-of-type) .path:last-of-type {
    margin-right: auto;
}

#board[data-status="start"] .path[data-over="true"]::after,
#board[data-status="start"] .path[data-under="true"]::after {
    border-radius: 15%;
}

#board[data-status="start"] .path[data-over="true"]::after {
    border-top-left-radius: 60%;
}

#board[data-status="start"] .path[data-under="true"]::after {
    border-bottom-right-radius: 60%;
}

.path[data-padlock="true"]::before {
    content: "\f023";
    color: var(--color-lock);
    transform: rotate(45deg);
}

.path[data-padlock="true"]:focus::before,
.path[data-padlock="true"]:active::before,
.path[data-padlock="true"]:hover::before,
#board[data-sorted="true"] .path[data-padlock="true"]::before {
    animation: wiggle 2s ease-in-out infinite;
}

body:not([data-grabbing="true"]) .path[data-padlock="true"] {
    cursor: var(--cursor-no-drop);
}

body[data-grabbing="true"] #board[data-key="true"] .path[data-put="true"][data-padlock="true"]:focus::before,
body[data-grabbing="true"] #board[data-key="true"] .path[data-put="true"][data-padlock="true"]:active::before,
body[data-grabbing="true"] #board[data-key="true"] .path[data-put="true"][data-padlock="true"]:hover::before {
    content: "\f3c1";
    animation: pulse 2s ease-in-out infinite;
}

@keyframes wiggle {
    0% { transform: rotate(45deg); }
    35% { transform: rotate(45deg); }
    40% { transform: rotate(50deg); }
    45% { transform: rotate(40deg); }
    50% { transform: rotate(50deg); }
    55% { transform: rotate(40deg); }
    60% { transform: rotate(50deg); }
    65% { transform: rotate(45deg); }
    100% { transform: rotate(45deg); }
}

.path[data-key="true"]::before {
    content: "\f084";
    color: var(--color-key);
}

#board[data-help="true"] .path[data-key="true"]::before,
#board[data-sorted="true"] .path[data-key="true"]::before {
    animation: pulse 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes pulse {
    0% { font-size: calc(var(--size) * 0.2); }
    20% { font-size: calc(var(--size) * 0.2); }
    30% { font-size: calc(var(--size) * 0.21); }
    40% { font-size: calc(var(--size) * 0.18); }
    50% { font-size: calc(var(--size) * 0.22); }
    60% { font-size: calc(var(--size) * 0.18); }
    70% { font-size: calc(var(--size) * 0.21); }
    80% { font-size: calc(var(--size) * 0.2); }
    100% { font-size: calc(var(--size) * 0.2); }
}

.path[data-padlock="true"]::before,
.path[data-key="true"]::before {
    text-align: center;
    background-color: var(--color-back);
    margin-right: calc(var(--size) * 0.75);
    margin-top: calc(var(--size) * 0.75);
    z-index: 2;
}

.path::after {
    content: attr(data-aim);
    margin-left: calc(var(--size) * 0.75);
    margin-top: calc(var(--size) * 0.75);
    transform: scale(1);
}

.math {
    margin-left: calc(var(--size) * 0.75);
    margin-bottom: calc(var(--size) * 0.75);
    transform: scale(1);
}

.path, .path > i, .path::before, .path::after {
    transition: 0.4s ease-in-out;
}

#board:not([data-status="start"]):not([data-status="done"]):not([data-status="menu"]) .path {
    --color: var(--color-front);
}

#board:not([data-status="start"]):not([data-status="done"]) .path::after {
    margin-left: 0;
    margin-top: 0;
    transform: scale(3);
}

#board:not([data-status="start"]) .path {
    transition: 0.6s ease-in-out;
}

#board:not([data-status="start"]):not([data-status="stop"]):not([data-status="over"]) .path {
    transform: scale(0);
}

.path[data-set="true"] {
    --color: var(--color-good);
}

.path[data-over="true"] {
    --color: var(--color-over);
}

.path[data-under="true"] {
    --color: var(--color-under);
}

.path[data-out="true"] {
    --color: var(--color-back);
}

.path[data-get="true"] {
    --color: var(--color-select);
    cursor: var(--cursor-grabbing);
}

.path[data-put="true"] {
    --color: var(--color-available);
    cursor: var(--cursor-pointer);
}

#board:not([data-key="true"]) .path[data-padlock="true"][data-put="true"] {
    --color: var(--color-lock);
    cursor: var(--cursor-no-drop);
}

.path[data-nuts="0"]:not([data-put="true"]),
.path[data-out="true"]:not([data-get="true"]) {
    cursor: var(--cursor-no-drop);
}

.math {
    top: calc(var(--size) * -0.035);
}

.math::after,
#level:not([data-value="-1"])::after,
#best::after {
    content: attr(data-value);
    font-weight: bold;
}

#level:not([data-value="-1"])::before {
    content: attr(data-ten);
    font-weight: bold;
}

.math[data-value="0"]::after {
    content: "?";
}

.math::before {
    position: absolute;
    left: 0;
    transform: translateX(-80%);
    color: var(--color);
    background-color: var(--color-back);
    width: calc(var(--size)* 0.18);
    height: calc(var(--size)* 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

#subtraction::before {
    content: "\f056";
}

#subtraction[data-value="0"]::before {
    /*content: "\f192";*/
}

#addition::before {
    content: "\f055";
}

html[data-mobile="true"] #subtraction[data-value="0"],
#board:not([data-status="start"]) .math,
#board:not([data-status="done"]):not([data-status="fall"]) ~ #menu .menu#voila,
#board:not([data-status="done"]):not([data-status="fall"]) ~ #menu .menu#next,
#board[data-status="done"] ~ #menu .menu:not(#voila):not(#next),
#board[data-status="fall"] ~ #menu .menu:not(#voila):not(#next),
#level[data-value="-1"] ~ #menu .menu:not(#title):not(#over):not(#story):not(#unlimited):not(#limited),
#level:not([data-value="-1"]) ~ #menu .menu:not(#title):not(#over):not(#continue):not(#retry):not(#quit):not(#voila):not(#next),
#level[data-value="-1"],
#level[data-value="-1"] ~ #menu .volume,
#board[data-status="done"] ~ #menu .volume,
#board[data-status="fall"] ~ #menu .volume,
#board:not([data-countdown="0"]) ~ #menu .menu#over,
#board[data-countdown="0"] ~ #menu .menu#title,
#board[data-countdown="0"] ~ #menu .menu#continue,
#menu input[type="range"],
body > .math,
#board:not([data-status="menu"]) ~ #credits,
#level:not([data-value="-1"]) ~ #credits {
    display: none;
}


#board[data-status="done"] ~ #menu {
    --done-menu-delay: 1s;
    transition-delay: var(--done-menu-delay);
}


#board:not([data-status="done"]) ~ #menu {
    transition-delay: unset;
}

.path[data-out="true"]:not([data-get="true"])::after {
    transform: scale(0.4);
}

#board.done::after,
#board:not([data-status="start"])::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

#level {
    position: fixed;
    font-size: 140vh;
    right: 0;
    color: var(--color-under);
    transform: translateX(32vh);
    opacity: 0.5;
    z-index: -2;
    display: flex;
    align-items: center;
}

#squirrel {
    position: fixed;
    top: 8vh;
    right: 0;
    height: 100vh;
    width: 100vh;
    opacity: 1;
    transition: 0.4s ease-in-out opacity;
    cursor: var(--cursor-grab);
}

#board[data-status="stop"]::before,
#board[data-status="stop"] ~ #undo,
#board[data-status="stop"] ~ #dots,
#board[data-status="stop"] ~ #best,
#board[data-status="done"] ~ #dots,
/*#board[data-status="done"] ~ #level,*/
#board[data-status="fall"] ~ #dots,
#board[data-status="fall"] ~ #level,
#level:not([data-value="-1"]) ~ #menu #squirrel,
#board:not([data-status="menu"]) ~ #menu #squirrel {
    opacity: 0;
    z-index: -1;
    animation: unset !important;
}

#squirrel .nut {
    z-index: 1;
    --nut-size: 10vh;
    --nut-color: var(--color-under);
    --nut-gap: 0deg;
}

#board::before {
    content: attr(data-countdown);
    font-weight: bold;
    left: calc(50% + 1vh);
}

#board[data-countdown="-1"]::before {
    content: "\f534";
}

#board::before,
#undo,
#dots,
#best {
    font-size: var(--text-size);
    height: var(--text-size);
    line-height: var(--text-size);
    position: fixed;
    color: var(--color-under);
    bottom: calc(var(--text-size) * 2 / 3);
}

#menu .volume {
    position: fixed;
    height: var(--text-size);
    bottom: calc(var(--text-size)* 2 / 3);
    display: flex;
    align-items: center;
}

#menu .volume.music {
    right: calc(var(--padding) + 4.5* var(--text-size));
    justify-content: flex-end;
}

#menu .volume.sound {
    right: var(--padding);
}

#best {
    display: flex;
    align-items: center;
    right: var(--padding);
    z-index: -1;
}

#best::before {
    content: "\f091";
    font-size: calc(var(--text-size)* 3 / 4);
    margin-right: 1.5vh;
}

#undo {
    cursor: var(--cursor-pointer);
    right: calc(50% + 1vh);
    opacity: 1;
}

#dots {
    cursor: var(--cursor-pointer);
    left: var(--padding);
}

#undo::before {
    content: "\f1da";
}

#dots::before {
    content: "\f142";
}

body:not([data-actions="0"]) #undo:hover,
#dots:hover {
    color: var(--color-front);
}

body[data-actions="0"] #undo {
    cursor: unset;
}

#board[data-status="done"] ~ #undo::before,
#board[data-status="fall"] ~ #undo::before,
body[data-actions="0"] #board:not([data-lock="true"]) ~ #undo::before {
    content: "\f017" !important;
}

#board[data-lock="true"] ~ #undo::before {
    content: "\f023";
}

#board[data-countdown="6"]::before,
#board[data-countdown="6"] ~ #undo,
#board[data-countdown="5"]::before,
#board[data-countdown="5"] ~ #undo,
#board[data-countdown="4"]::before,
#board[data-countdown="4"] ~ #undo {
    color: var(--color-lock);
    --alert: 1s;
}

#board[data-countdown="3"]::before,
#board[data-countdown="3"] ~ #undo,
#board[data-countdown="2"]::before,
#board[data-countdown="2"] ~ #undo,
#board[data-countdown="1"]::before,
#board[data-countdown="1"] ~ #undo,
#board[data-countdown="0"]::before,
#board[data-countdown="0"] ~ #undo {
    color: var(--color-over);
    --alert: 0.5s;
}

#board[data-countdown="6"]::before,
#board[data-countdown="5"]::before,
#board[data-countdown="4"]::before,
#board[data-countdown="3"]::before,
#board[data-countdown="2"]::before,
#board[data-countdown="1"]::before,
#board[data-countdown="0"]::before {
    animation: alert var(--alert) ease-in-out infinite;
}

@keyframes alert {
    0% { transform: scale(1); opacity: 0.66 }
    100% { transform: scale(1.25); opacity: 1 }
}

#undo, #menu, #dots, #board, #board::before, #level, #best {
    transition-duration: 0.4s;
    transition-property: opacity;
}

#board[data-status="menu"],
#board[data-status="stop"] ~ #level,
#board[data-status="over"] ~ #level,
#board[data-status="menu"]::before,
#board[data-status="menu"] ~ #undo,
#board:not([data-status="menu"]):not([data-status="done"]) ~ #menu,
#board[data-status="menu"] ~ #dots,
#board[data-countdown="-1"] ~ #best,
#board[data-status="menu"] ~ #best,
#level[data-value="-1"] ~ #best {
    opacity: 0 !important;
    z-index: -1;
}

#menu {
    display: flex;
    flex-direction: column;
    font-size: var(--text-size);
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    opacity: 1;
    max-width: 100vw;
}

#menu .menu {
    position: relative;
    display: flex;
    align-items: flex-start;
    cursor: var(--cursor-pointer);
    padding: 0 var(--padding);
    color: var(--color-front);
    width: fit-content;
    max-width: calc(100vw - var(--text-size) * 2);
    min-height: calc(var(--text-size) * 1.25);
    line-height: calc(var(--text-size) * 1.25);
    z-index: 1;
}

#menu .menu:not(#title):not(#over):not(#voila) {
    padding-left: calc(var(--text-size) * 1.5 + var(--padding));
}

#menu .menu:not(#title):not(#over):not(#voila)::before,
#menu .menu:not(#title):not(#over):not(#voila)::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    z-index: -1;
}

#menu .menu:not(#title):not(#over):not(#voila)::before {
    background-color: var(--color-front);
}

#menu .menu#unlimited::before {
    background-color: var(--color-good) !important;
}

#menu .menu#limited::before,
#menu .menu#retry::after {
    background-color: var(--color-lock) !important;
}

#menu .menu#quit::after {
    background-color: var(--color-over) !important;
}

#menu .menu#retry:hover:active::after,
#menu .menu#quit:hover:active::after,
#menu .menu#retry.active::after,
#menu .menu#quit.active::after,
#menu .menu:not(#title):not(#over):not(#voila):hover,
#menu .menu:not(#title):not(#over):not(#voila):focus {
    color: var(--color-back);
}

#menu .menu#retry:hover:active::after,
#menu .menu#quit:hover:active::after,
#menu .menu#retry.active::after,
#menu .menu#quit.active::after,
#menu .menu:not(#title):not(#over):not(#voila):not(#story):hover::before,
#menu .menu:not(#title):not(#over):not(#voila):not(#story):focus::before {
    width: 100% !important;
}

#menu input[type="range"] + label {
    display: flex;
    align-items: center;
}

#menu input[type="range"] + label i {
    --control-size: calc(var(--text-size) * 0.75);
    height: var(--control-size);
    line-height: var(--control-size);
    width: var(--control-size);
    border-radius: calc(var(--control-size) * 0.5);
    color: var(--color-back);
    font-size: calc(0.75 * var(--control-size)) !important;
}

#menu input[type="range"] + label i:first-of-type,
#menu input[type="range"] + label i:last-of-type {
    cursor: var(--cursor-pointer);
    text-align: center;
}

#menu input[type="range"] + label i:first-of-type:before {
    content: "\f068";
}

#menu input[type="range"] + label i:last-of-type:before {
    content: "\f067";
}

#menu input[type="range"] + label i:not(:not(:first-of-type):not(:last-of-type)):hover,
#menu input[type="range"] + label i:not(:not(:first-of-type):not(:last-of-type)):active,
#menu input[type="range"] + label i:not(:not(:first-of-type):not(:last-of-type)):focus {
    background: var(--color-front);
}

#menu input[type="range"] + label i:not(:hover):not(:active) {
    background: var(--color-under);
}


#menu input[type="range"][value="0"] + label i:first-of-type,
#menu input[type="range"][value="1"] + label i:last-of-type {
    background: var(--color-under) !important;
}

#menu input[type="range"] + label i:not(:first-of-type):not(:last-of-type) {
    width: calc(var(--control-size) * 2);
    margin: 0 calc(var(--control-size) * 0.5);
    text-indent: calc(var(--control-size) * 0.25);
    /*noinspection CssUnresolvedCustomProperty*/
    background: linear-gradient(90deg,
                                var(--color-front) 0%,
                                var(--color-front) var(--volume),
                                var(--color-under) var(--volume),
                                var(--color-under) 0%);
}

#music + label i:not(:first-of-type):not(:last-of-type):before {
    content: "\f001";
}

#sound + label i:not(:first-of-type):not(:last-of-type):before {
    content: "\f028";
}

#title, #over, #voila {
    font-family: "Gloria Hallelujah", cursive;
    position: absolute;
    top: calc(-1 * var(--text-size));
    cursor: unset !important;
    font-size: calc(1.25 * var(--text-size));
    color: var(--color-under) !important;
    padding-left: calc(var(--padding) * 1.25) !important;
}

#story {
    cursor: var(--cursor-no-drop) !important;
    color: var(--color-under) !important;
}

#story::before {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    content: "\f5b7" !important;
    left: calc(1.5 * var(--text-size) + var(--padding)) !important;
    opacity: 0.25;
    transform: scaleX(2.5);
}

html[lang="fr"] #story::before {
    transform: scaleX(3.5);
}

#story:not(:hover):not(:active):not(:focus)::before {
    opacity: 0.75;
}

#story::before {
    width: 0 !important;
}

#menu .menu#retry:hover::after,
#menu .menu#quit:hover::after {
    transition: 0.8s;
}

#continue, #continue::before,
#next, #next::before,
#unlimited, #unlimited::before,
#quit, #quit::before {
    transition: 0.4s;
}

#menu .menu#retry::after,
#menu .menu#quit::after,
#story, #story::before,
#retry, #retry::before {
    transition: 0.35s;
}

#story > i {
    transform: rotate(16deg);
}

#story:not(:hover):not(:active):not(:focus) > i {
    color: var(--color-key);
}

#unlimited:not(:hover):not(:active):not(:focus) > i {
    color: var(--color-good);
}

#limited > i {
    transform: rotate(12deg);
}

#limited:not(:hover):not(:active):not(:focus) > i {
    color: var(--color-lock);
}

#limited, #limited::before {
    transition: 0.3s;
}

#menu .menu i {
    position: absolute;
    left: var(--padding);
    width: calc(1.5 * var(--text-size));
    text-align: center;
    height: calc(var(--text-size) * 1.25);
    line-height: calc(var(--text-size) * 1.25);
}

.path::after,
.path > span {
    z-index: 1;
}

.path > span:not(.math) {
    text-shadow: var(--color-back) calc(var(--size)* -0.033) 0;
    height: 0;
    width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.path:focus > span:not(.math),
.path:active > span:not(.math),
.path:hover > span:not(.math) {
    text-shadow: var(--color-solid-shadow) calc(var(--size)* -0.033) 0;
}

.nuts, .nut, .nut::after {
    position: absolute;
    display: flex;
    justify-content: center;
}

.nuts {
    --nut-size: calc(var(--size) * 0.33);
    --nut-color: var(--color-under);
    width: calc(100% - var(--size) * 0.1);
    height: calc(100% - var(--size) * 0.1);
    border-radius: 100%;
    overflow: hidden;
    background: var(--color-back);
    border: calc(var(--size)* 0.055) solid var(--color-back);
}

.nuts::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: var(--color-alpha-back);
    box-shadow: inset calc(var(--size) * -0.023) calc(var(--size) * 0.023) calc(var(--size) * 0.023) var(--color-shadow);
}

.path:focus .nuts::after,
.path:active .nuts::after,
.path:hover .nuts::after {
    background-color: var(--color-light-shadow);
}

.nut {
    height: calc(var(--nut-size) - (var(--nut-size) / 0.33) * (0.033 / 2));
    width: calc(var(--nut-size) - ((var(--nut-size) / 0.33) * 0.033));
    border-radius: 30% 30% 50% 50%;
    line-height: var(--nut-size);
    font-size: calc(var(--nut-size)* 0.44);
    /*background: linear-gradient(to top, var(--nut-color) 0, var(--color-back) 33%);*/
    background: var(--nut-color);
    margin-bottom: calc(-0.1* var(--nut-size));
    transform-origin: center bottom;
    opacity: 1;
    transition: 0.6s;
}

.nut, .nut::after {
    box-shadow: inset 0 calc((var(--nut-size) / 0.33) * 0.1) var(--nut-color),
                inset 0 0 0 calc((var(--nut-size) / 0.33) * 0.066) var(--nut-color),
                0 0 0 calc((var(--nut-size) / 0.33) * (0.033 / 2)) var(--color-back);
}

.nut::before {
    content: "\f7e4";
    color: var(--color-shadow);
    transform: rotate(180deg) ScaleX(2.5) ScaleY(0.75) translateX(0%) translateY(25%);
    opacity: 0.5;
}

.nut::after {
    content: "";
    width: calc(100% + ((var(--nut-size) / 0.33) * 0.033));
    height: 30%;
    border-radius: calc((var(--nut-size) / 0.33) * 0.066) calc((var(--nut-size) / 0.33) * 0.066) 0 0;
}

.nut:nth-child(12), .nut:nth-child(11), .nut:nth-child(10) {
    bottom: 0;
    --nut-color: #C6CCCF !important;
}

.nut:nth-child(9), .nut:nth-child(8), .nut:nth-child(7), .nut:nth-child(6) {
    bottom: calc(var(--size) * 0.25);
    --nut-color: #CFD5D7 !important;
}

.nut:nth-child(5), .nut:nth-child(4), .nut:nth-child(3) {
    bottom: calc(var(--size) * 0.50);
    --nut-color: #DADEE1 !important;
}

.nut:nth-child(2), .nut:nth-child(1) {
    bottom: calc(var(--size) * 0.75);
    --nut-color: #E3E7E9;
}

.nut:nth-child(2), .nut:nth-child(8) {
    left: calc(50% - var(--size) * 0.033);
}

.nut:nth-child(1), .nut:nth-child(9) {
    right: calc(50% - var(--size) * 0.033);
}

.nut:nth-child(3), .nut:nth-child(11) {
    left: calc(50% + var(--nut-size) * 0.33);
}

.nut:nth-child(4), .nut:nth-child(10) {
    right: calc(50% + var(--nut-size) * 0.33);
}

.nut:nth-child(7) {
    left: calc((50% + var(--nut-size)) - var(--nut-size) * (0.066 * 4));
}

.nut:nth-child(6) {
    right: calc((50% + var(--nut-size)) - var(--nut-size) * (0.066 * 4));
}

.nut:nth-child(1) {
    transform: rotate(calc(-8deg + (-1.25 * var(--nut-gap))));
}

.nut:nth-child(2) {
    transform: rotate(calc(16deg + (1 * var(--nut-gap))));
}

.nut:nth-child(3) {
    transform: rotate(calc(-4deg + (-1.5 * var(--nut-gap))));
}

.nut:nth-child(4) {
    transform: rotate(calc(16deg + (1 * var(--nut-gap))));
}

.nut:nth-child(5) {
    transform: rotate(calc(8deg + (1.25 * var(--nut-gap))));
}

.nut:nth-child(6) {
    transform: rotate(calc(-16deg + (-1 * var(--nut-gap))));
}

.nut:nth-child(7) {
    transform: rotate(calc(12deg + (1 * var(--nut-gap))));
}

.nut:nth-child(8) {
    transform: rotate(calc(8deg + (1.25 * var(--nut-gap))));
}

.nut:nth-child(9) {
    transform: rotate(calc(-2deg + (-1.75 * var(--nut-gap))));
}

.nut:nth-child(10) {
    transform: rotate(calc(-4deg + (-1.5 * var(--nut-gap))));
}

.nut:nth-child(11) {
    transform: rotate(calc(2deg + (1.75 * var(--nut-gap))));
}

.nut:nth-child(12) {
    transform: rotate(calc(6deg + (1.5 * var(--nut-gap))));
}

.path[data-nuts="0"] .nut,
.path[data-nuts="1"] .nut:not(:nth-child(12)),
.path[data-nuts="2"] .nut:not(:nth-child(12), :nth-child(11)),
.path[data-nuts="3"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10)),
.path[data-nuts="4"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9)),
.path[data-nuts="5"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8)),
.path[data-nuts="6"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7)),
.path[data-nuts="7"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7), :nth-child(6)),
.path[data-nuts="8"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7), :nth-child(6), :nth-child(5)),
.path[data-nuts="9"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7), :nth-child(6), :nth-child(5), :nth-child(4)),
.path[data-nuts="10"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7), :nth-child(6), :nth-child(5), :nth-child(4), :nth-child(3)),
.path[data-nuts="11"] .nut:not(:nth-child(12), :nth-child(11), :nth-child(10), :nth-child(9), :nth-child(8), :nth-child(7), :nth-child(6), :nth-child(5), :nth-child(4), :nth-child(3), :nth-child(2))
{
    transform: rotate(0deg);
    bottom: 100%;
    opacity: 0;
}

#fall {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

#fall > .nut {
    --nut-to-fall-orientation: 0deg;
    --nut-color: #C6CCCF;
    --nut-gap: 0deg;
    --nut-size: 20vh;
    transform-origin: center center;
    animation: fall 0.6s ease-out forwards;
}

@keyframes fall {
    0% { top: -23vh; transform: rotate(calc(var(--nut-to-fall-orientation) * -0.44)) }
    100% { top: 123vh; transform: rotate(calc(var(--nut-to-fall-orientation) * 0.44)) }
}

#credits {
    position: absolute;
    font-size: calc(var(--text-size) * 0.5);
    color: var(--color-front);
    height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 0;
    z-index: 10;
}

#credits > header {
    position: absolute;
    padding: calc(var(--text-size)* 2 / 3);
    top: 0;
    color: var(--color-under);
    cursor: var(--cursor-pointer);
    z-index: 1;
}

#credits > header > i {
    width: calc(var(--text-size) * 0.5);
    text-align: center;
}

#credits ul {
    position: relative;
    list-style-type: none;
    opacity: 0;
}

#credits li {
    position: relative;
    margin-bottom: calc(var(--text-size) * 0.5);
}

#credits li i.fa-external-link-alt {
    margin-left: calc(var(--text-size) * 0.125);
}

#credits li > i:first-of-type {
    position: absolute;
    width: var(--text-size);
    text-align: center;
    top: 50%;
    transform: translateX(calc(var(--text-size) * -1.33)) translateY(-50%);
    font-size: var(--text-size);
    color: var(--color-under);
}

#credits li:first-of-type > i:first-of-type {
    transform: translateX(calc(var(--text-size) * -1.33)) translateY(-50%) rotate(-15deg);
}

#credits li a {
    color: var(--color-select);
}

#credits li a:visited {
    color: var(--color-available);
}

#credits:not(.opened) {
    height: 12vh;
}

#credits.opened {
    background: linear-gradient(to bottom, transparent 0%, var(--color-back) 100%),
                radial-gradient(var(--color-alpha-back), transparent);
}

#credits.opened ~ #menu .menu {
    transition: 0.4s;
    opacity: 0.33;
}

#credits.opened,
#credits.opened > header,
#credits.opened ul {
    transition: 0.6s ease-in-out;
}

#credits.opened ul {
    transition-delay: 0.3s;
}

#credits.opened > header > i::before {
    content: "\f00d";
    color: var(--color-over);
}

#credits:not(.opened) ul::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
}

#credits.opened ul {
    opacity: 1;
}

@media (orientation: portrait) {
    body {
        --padding: 3vh;
    }

    #best {
        left: var(--padding);
        top: calc(var(--text-size)* 1 / 3);
    }

    #board {
        margin-bottom: 4vh;
    }

    #menu {
        padding-bottom: 8vh;
    }

    #menu .volume.music {
        right: unset;
        left: var(--padding);
    }

    #menu .volume.sound {
        right: var(--padding);
    }

    #menu input[type="range"] + label i:not(:first-of-type):not(:last-of-type) {
        width: calc(var(--control-size) * 1.5);
        text-align: center;
        text-indent: unset;
        margin: 0 calc(var(--control-size) * 0.25);
    }

    #level:not([data-value="-1"])::before {
        position: absolute;
        font-size: 35vh;
        color: var(--color-back);
        z-index: 1;
        right: 75%;
        text-shadow: var(--color-under) -2vh 0;
    }

    #credits.opened ~ #menu .menu {
        opacity: 0;
    }

    #squirrel {
        top: 12vh;
    }
}

@media (max-aspect-ratio: 0.55) {
    body {
        --text-size: 5vh;
    }
}

@media (max-aspect-ratio: 3/2) {
    #squirrel {
        right: unset;
        left: calc(100vw / 3);
    }
}