#exercise{  
  max-width: 600px;
}

#exercise .overlayLayerImage {
  /* override exercise.css */
  display: block;
}

#exercise .overlayLayerImage svg {
  max-width: calc(100vw - 10px);
  max-height: calc(100vh - 10px);
}

.control-panel {
  margin: 10px 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 5px;
}

#question-frame {
  background-color: white;
  border-radius: 3px;
  padding: 40px;
  margin: 40px 0 10px;
}

.whiteScreen #question-frame {
  padding: 10px;
  margin-top: 20px;
}

#question-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
}

#question-image {
  max-height: 200px;
  max-width: 100%;
}

#question {
  margin-bottom: 25px;
  font-size: 28px;
  margin-top: 0;
}

#question:empty {
  display: none;
}

#question-image, #question-map {
  cursor: pointer;
}

@media screen and (max-width: 599px) {
  #question-frame {
    padding: 30px 5px;
  }

  #question-image {
    max-width: 100%;
  }
}

#question-image[src=""] {
  display: none;
}

#question-map:empty {
  display: none;
}

/**************** ANSWER ****************/
#answer {
  margin-top: 25px;
}

.answer {
  position: relative;
  font-size: 24px;
  width: 300px;
  margin: 5px 0;
}

.answer input {
  color: var(--black);
  line-height: 1.3;
  padding: 2px 5px;

  border: 1px solid var(--grayHover);
  border-radius: 3px;
  min-width: 0; /* override forms.css */
  width: 100%;
}

.answer input:focus {
  border-color: var(--blue);
}

.solution {
  font-size: 24px;
  line-height: 1.3;
  margin: 10px 0;
}

.solution .content {
  position: relative;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--greenHover);
}

.solution .content::before {
  content: '';
  inset: 0;
  position: absolute;
  opacity: 0.1;
  background-color: var(--green);
}

/**************** CORRECT AND WRONG ****************/

.answer.correct {
  animation: var(--animation-pulse);
}

.answer.wrong {
  animation: var(--animation-shake);
}

.answer.correct input {
  border-color: var(--greenHover);
}

.answer.wrong input {
  border-color: var(--redHover);
}

.answer::after {
  position: absolute;
  right: 5px;

  height: 100%;
  width: 1em;
  background-position: center;
  background-size: 1em 1em;
  background-repeat: no-repeat;
}

.answer.correct::after {
  content: '';
  background-image: url("https://umimeto.org/asset/global/img/correct-green.svg"); /* preloaded */
}

.answer.wrong::after {
  content: '';
  background-image: url("https://umimeto.org/asset/global/img/wrong-red.svg"); /* preloaded */
}

.answer::before {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  opacity: 0.1;

  pointer-events: none;
}

.answer.correct::before {
  content: '';
  background-color: var(--green);
}

.answer.wrong::before {
  content: '';
  background-color: var(--red);
}

/**************** HINTS ****************/
.hints {
  width: 100%;
  border: 1px solid var(--grayHover);
  position: absolute;
  z-index: 1;
  font-size: .6em;
  font-weight: 300;
}

.hints:empty {
  display: none;
}

.hints, .hint:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.hints-open input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hint {
  background-color: white;
  padding: .5em 5px;
  text-align: left;

  cursor: pointer;
}

.hint.selected {
  background-color: var(--lightGray);
}

.hint:not(:last-child) {
  border-bottom: 1px solid var(--grayHover);
}

/**************** MAPY ****************/
#map-container {
  max-width: 100%;
}

#question-map {
  position: relative;
  height: 0;
}

#question-map svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.map svg {
  background-color: var(--faintBlue);
  border-radius: 6px;
  /* TODO border? */
}

.map #bg > *, .map .land {
  fill: white;
}

.map .selected {
  stroke-width: 4;
  stroke: var(--yellowHover);
}

.map .selected.fill {
  stroke-width: 2;
  fill: var(--yellow);
}