body {
  --bg: #ffd166;
  background: var(--bg);
  transition: background-color 0.6s;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100vh;
  height: 100dvh;
  padding: max(72px, calc(env(safe-area-inset-top) + 64px)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* --size is set from app.js so 2-4 pieces always fit in one row */
.row {
  display: flex;
  justify-content: center;
  gap: calc(var(--size, 26vmin) * 0.18);
}

/* the wooden board with the holes */
#slots {
  align-self: center;
  padding: calc(var(--size, 26vmin) * 0.12);
  border-radius: calc(var(--size, 26vmin) * 0.25);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1vmin 0 rgba(0, 0, 0, 0.08);
}

.slot,
.piece {
  width: var(--size, 26vmin);
  height: var(--size, 26vmin);
  display: grid;
  place-items: center;
  font-size: calc(var(--size, 26vmin) * 0.72);
  line-height: 1;
}

.slot {
  border-radius: 22%;
  background: rgba(255, 255, 255, 0.55);
  border: max(3px, 0.6vmin) dashed rgba(20, 33, 61, 0.25);
}

/* the shadow of the picture that has to go here */
.slot span {
  filter: brightness(0);
  opacity: 0.28;
  transition: filter 0.3s, opacity 0.3s;
}

.slot.filled {
  border-style: solid;
  border-color: #fff;
  background: #fff;
}

.slot.filled span {
  filter: none;
  opacity: 1;
  animation: happy 0.6s;
}

.piece {
  position: relative;
  z-index: 1;
  border-radius: 22%;
  background: #fff;
  border: max(4px, 0.8vmin) solid #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, 0.18);
  cursor: grab;
  touch-action: none;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.piece.dragging {
  z-index: 10;
  transition: none;
  box-shadow: 0 3vmin 3vmin rgba(0, 0, 0, 0.25);
}

.piece.gone {
  visibility: hidden;
}

/* nudge when the child has been stuck for a while */
.hint {
  animation: wiggle 0.9s ease-in-out 2;
}

#bravo {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  pointer-events: none;
  color: #fff;
  font-size: 16vmin;
  font-weight: 900;
  text-align: center;
  text-shadow: 1vmin 1vmin 0 #ef476f, -1vmin -1vmin 0 #118ab2;
  animation: twist 1s infinite cubic-bezier(0.31, 0.44, 0.44, 1.65);
}

#bravo.show {
  display: grid;
}

.star {
  position: fixed;
  z-index: 15;
  top: -10vh;
  font-size: 8vmin;
  pointer-events: none;
  animation: falling 2.6s linear forwards;
}

@keyframes happy {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.25) rotate(-8deg); }
  100% { transform: scale(1); }
}

@keyframes wiggle {
  0%, 100% { rotate: 0deg; scale: 1; }
  25% { rotate: -10deg; scale: 1.08; }
  75% { rotate: 10deg; scale: 1.08; }
}

@keyframes twist {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

@keyframes falling {
  to { top: 110vh; transform: rotate(360deg); }
}