:root {
  background: linear-gradient(#211F53, #3B2199 25%, #3B2199 75%, #211F53);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}

body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}

.ui {
  height: 10vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}

.button {
  background-color: purple;
  border: 2px outset;
  color: white;
  font-weight: bold;
  font-size: 4vw;
  width: 5vh;
  height: 5vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.button:active {
  border-style: inset;
}

.level {
  flex: 1;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  padding: 1vw;
}

.bolt {
  position: relative;
  width: 20%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: end;
}

.thread {
  position: absolute;
  bottom: 0;
  width: 40%;
  height: 65%; /* This is overridden by JS to be 15% x height */
  z-index: -1; /* stacking context rules puts abspos above flow children, so bg it */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 15%,
    white 30% 70%,
    rgba(0, 0, 0, 0) 85%
  );
  border-radius: 40% 40% 0 0;
}

.cap {
  width: 40%;
  height: 5%;
  margin-top: -1%; /* Cancel's the nuts' margin */
  background: white; /* TODO: Prettier threads+cap. Some sort of metallic grey? SVG? */
  border-radius: 10%; /* Chamfered */
}

.bolt { /* TODO: this is a 4h bolt */
  height: calc(2 / 15 * 100vh); /* 2cm of the 15cm height of my phone */
}

.bolt.locked::before {
  content: '🔒';
  position: absolute;
  font-size: calc(1 / 15 * 100vh); /* Half of .bolt's own height */
}

@property --gear-line-pos {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.nut {
  width: 50%;
  height: 11%; /* Aiming to support 7h bolts eventually */
  margin: 1% 0;
  background-image: repeating-linear-gradient(
    to right,
    black var(--gear-line-pos) calc(var(--gear-line-pos) + 2%),
    rgba(0, 0, 0, 0) calc(var(--gear-line-pos) + 2%) calc(var(--gear-line-pos) + 33%)
  );
  /* TODO: Play around to get a good shadow animation
  ), linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5) var(--gear-line-pos),
    rgba(0, 0, 0, 0) calc(var(--gear-line-pos) + 2%) calc(100% - var(--gear-line-pos) - 2%),
    rgba(0, 0, 0, 0.5) calc(100% - var(--gear-line-pos))
  ); */
  transition:
    transform 150ms,
    --gear-line-pos 150ms;
}

.nut.selected {
  transform: translateY(-50%);
  --gear-line-pos: 16%; /* Set by eye, might be translateY's multiple of the width of the repeating-linear-gradient */
}

.nut.obscure {
  background: transparent !important; /* !important to exceed specificity of on-element bgcolor */
  outline: 3px dotted gray;
}

#score {
  height: 100%;
  --score-width: calc(4 / 7 * 100vw); /* Measured on my phone to be about 4cm of the 7cm width */
  width: var(--score-width);
  border-radius: 1em;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative; /* Make a stacking context for inner children */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.score-bar {
  border-radius: 1vh;
  height: 2vh;
}

.outer.score-bar {
  position: relative; /* stacking context for .star */
  width: 80%;
  background-color: grey;
}

.inner.score-bar {
  transition: width 150ms;
  background-color: yellow;
}

.star {
  position: absolute;
  font-size: 6vh;
  inset-block-start: -3.75vh;
  color: yellow;
  text-shadow: 0px 0px 3px black;
  transition: transform 1s, opacity 1s;
}

.star.lost {
  transform: translateY(5vh) scale(0.25);
  opacity: 0;
}

.win .star {
  transform: translateX(40vw) scale(10);
  opacity: 0;
}

.star:nth-child(2) {
  inset-inline-start: 0;
}

.star:nth-child(3) {
  inset-inline-start: calc(var(--score-width) / 6);
}

.star:nth-child(4) {
  inset-inline-start: calc(var(--score-width) / 3);
}

.moves {
  color: white; /* TODO: Better colours */
  font-size: 2vh;
}

#game-score {
  height: 100%;
  width: 10vh;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4vh;
  color: white; /* TODO: Better colours */
}

#game-score :not(#game-score-number) {
  color: yellow; /* TODO: Better colours */
}

.win #game-score :not(#game-score-number) {
  transform: rotate(360deg);
  transition: transform 1.2s;
}