:root {
  --border-normal: 0 0 0 2px var(--gray);
  --border-highlight: 0 0 0 2px var(--grayHover);
  --border-selected: 0 0 0 2px var(--blue);
  --border-correct: 0 0 0 2px var(--greenHover);
  --border-wrong: 0 0 0 2px var(--redHover);
}

#exercise{
  max-width: 1000px;
}

#playGround {
  margin-top: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.control-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#cards-message {
  display: flex;
  justify-content: center;
}

#instructions, #explanation {
  background-color: white;
  border-radius: 3px;
  font-size: 18px;
  line-height: 1.3;
}

#instructions-content, #explanation-content {
  margin: 15px;
}

/********** PLAN **********/
#plan {
  /* create stacking context */
  position: relative;
  z-index: 0;
  -webkit-user-select: none; /* safari */
  user-select: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  max-width: 100%;
}

#plan.finished::after {
  content: '';
  position: absolute;
  inset: 0;

  cursor: pointer;
}

#canvas {
  position: relative;
  max-width: 100%;
  background-color: white;
}

#canvas img, #canvas svg {
  width: 100%;
  height: 100%; /* prevents SVG overflow */
  display: block; /* remove space at the end w/ imgMargin */
}

#pool {
  gap: 15px;

  display: flex;
  flex-wrap: wrap;
}

.target {
  position: absolute;
}

.target::before {
  content: '';
  position: absolute;
  inset: 0;
}

.pool {
  position: relative;
}

.target, .pool {
  box-shadow: var(--border-normal);
}

.target::before, .pool {
  background-color: var(--lightGray);
}

.target {
  left: calc(var(--left) * var(--scale));
  top: calc(var(--top) * var(--scale));
}

.target,
.pool {
  width: calc(var(--width) * var(--scale));
  height: calc(var(--height) * var(--scale));
}

.card, .card img, .card svg {
  width: 100%;
  height: 100%;
}

.card {
  position: relative;
}

.card.moving {
  z-index: 3;
}

.card.selected {
  z-index: 4;
  box-shadow: var(--border-selected);
}

.target, .pool, .card {
  cursor: pointer;
}

@media screen and (hover: hover) {
  .target:hover, .pool:hover{
    box-shadow: var(--border-highlight);
  }

  .target:hover::before, .pool:hover {
    background-color: var(--lightGrayHover);
  }

  .card:hover {
    box-shadow: var(--border-selected);
  }
}

/********** DRAG AND DROP **********/
.card {
  touch-action: none; /* prevents browser cancelling pointer events */
}

#plan.drag-active {
  cursor: grabbing;
}

#plan.drag-active .card {
  pointer-events: none;
}

.drag-active .target, .drag-active .pool {
  cursor: grabbing;
}

.pool.drop, .target.drop {
  box-shadow: var(--border-highlight);
}

.pool.drop, .target.drop::before {
  background-color: var(--lightGrayHover);
}

#plan.drag-active .card:not(.selected) {
  transition: transform 100ms ease-in-out;
}

.drop .card {
  transform: translate(10px, -10px);
}

/********** DRAG AND DROP **********/
.card.correct {
  box-shadow: var(--border-correct);
  animation: var(--animation-blink);
}

.card.wrong {
  box-shadow: var(--border-wrong);
}

.card.correct::before, .card.wrong::before {
  content: '';
  inset: 0;
  position: absolute;
  opacity: .2;
}

.card.correct::before {
  background-color: var(--green);
}

.card.wrong::before {
  background-color: var(--red);
}

.card.correct::after, .card.wrong::after {
  --size: 25px;
  content: '';
  position: absolute;
  z-index: 1;

  opacity: 0;

  background-position: center;
  background-size: var(--size) var(--size);
  background-repeat: no-repeat;

  box-sizing: content-box;

  right: 0;
  top: 0;
  transform: translate(50%, -50%);

  width: var(--size);
  height: var(--size);

  padding: 3px;
  border-radius: 3px;
}

.markers-visible .card::after {
  opacity: 1;
  transition: opacity 250ms linear;
}

.card.correct::after {
  background-color: var(--greenHover);
  background-image: url("https://umimeto.org/asset/global/img/correct.svg");
}

.card.wrong::after {
  background-color: var(--redHover);
  background-image: url("https://umimeto.org/asset/global/img/wrong.svg");
}