:root {
  --light-blue: oklch(75% 0.10 230);
  --dark-blue: oklch(30% 0.04 250);
  --almost-white: oklch(100% 0.00 0);
  --dark-gray: oklch(40% 0.02 250);
  --light-gray: oklch(80% 0.02 230);
  --dark-green: oklch(45% 0.15 140);
  --dark-orange: oklch(60% 0.15 50);
  --dark-red: oklch(45% 0.18 30);
  --bright-red: oklch(65% 0.25 30);

  --page-background: var(--dark-gray);
  --padlock-body: var(--dark-blue);
  --padlock-shackle: var(--light-gray);
  --score-background: var(--dark-blue);
  --score-text: var(--light-blue);
  --points-text: var(--light-blue);
  --malus-text: var(--bright-red);

  --level-1: var(--dark-green);
  --level-2: var(--dark-orange);
  --level-3: var(--dark-red);

  --button-background: var(--almost-white);
  --button-text: var(--dark-blue);
  --disabled-button-background: oklch(from var(--button-background) l c h / 0.1);
  --disabled-button-text: var(--dark-blue);
  --selected-button-background: var(--light-blue);
  --selected-button-text: var(--almost-white);

  --calculation-text: var(--light-blue);
}

* {
  box-sizing: border-box;
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-background);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  max-height: 100vh;
  width: 100vw;
}

text {
  dominant-baseline: central;
  font-weight: 700;
  pointer-events: none;
  text-anchor: middle;
  user-select: none;
}

#arch {
  fill: none;
  stroke: var(--padlock-shackle);
  stroke-linecap: round;
  stroke-width: calc(60 * min(100vw / 710, 100vh / 520));
  /* 60 SVG units expressed in screen pixels to compensate for non-scaling-stroke removing viewBox scaling */
  vector-effect: non-scaling-stroke;
}

#level-top {
  font-size: 18px;
}

#level-bottom {
  font-size: 18px;
}

.text-top {
  dominant-baseline: text-after-edge;
}

.text-bottom {
  dominant-baseline: text-before-edge;
}

.level-text {
  display: none;
}

.text-easy {
  fill: var(--level-1);
}

.text-medium {
  fill: var(--level-2);
}

.text-hard {
  fill: var(--level-3);
}

#padlock {

  &.level-1 .text-easy,
  &.level-2 .text-medium,
  &.level-3 .text-hard {
    display: block;
  }
}

#body {
  fill: var(--padlock-body);
}

.button {
  user-select: none;

  rect {
    fill: var(--button-background);
  }

  text {
    fill: var(--button-text);
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: none;

    rect {
      fill: var(--disabled-button-background);
    }

    text {
      fill: var(--disabled-button-text);
    }
  }

  &.selected {
    rect {
      fill: var(--selected-button-background);
    }

    text {
      fill: var(--selected-button-text);
    }
  }
}

.number-button {
  text {
    font-size: 24px;
  }
}

.operator-button {
  text {
    font-size: 28px;
  }
}

.undo-button {
  text {
    font-size: 18px;
  }
}

.hint-button {
  text {
    font-size: 18px;
  }

  #malus {
    dominant-baseline: text-bottom;
    fill: var(--malus-text);
    font-size: 14px;
  }
}

.calculation {
  fill: var(--calculation-text);
  font-size: 14px;
  text-anchor: start;
}

#scorebox {
  fill: var(--score-background);
  font-size: 24px;
}

#score {
  fill: var(--score-text);
  font-size: 24px;
}

#points {
  fill: var(--points-text);
  font-size: 24px;
}

/* Animations */
#padlock {
  opacity: 1;
  overflow: visible;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  #shackle {
    transform: translateY(0px) scaleX(1);
    transform-origin: 250px 0px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;

    &.move-shackle-up {
      transform: translateY(-100px) scaleX(1);
    }

    &.mirror-shackle-left {
      transform: translateY(-100px) scaleX(-1);

      #level {
        opacity: 0;
      }
    }

    &.mirror-shackle-right {
      transform: translateY(-100px) scaleX(1);
    }

    &.move-shackle-down {
      transform: translateY(0px) scaleX(1);
    }
  }

  #level {
    transition: opacity 0.2s linear;
  }
}

@keyframes points-to-score {
  0% {
    transform: translate(0, 0);
  }

  60% {
    transform: translate(295px, -115px);
  }

  80% {
    transform: translate(295px, -115px);
  }

  100% {
    transform: translate(295px, -115px);
  }
}

#points {
  &.move-points-to-score {
    animation: points-to-score 1500ms ease-in forwards;
  }

  &.hide-points {
    visibility: hidden;
  }
}