/* Teroitus — «Onko tämä terä terävä?» (teroitus.js). Värit paletista. */

.terakoe-kuva {
  position: relative;
  max-width: 340px;
  margin: 6px 0 12px;
}
.terakoe-kuva img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ground-2);
}
.terakoe-laskuri {
  position: absolute;
  left: 8px; top: 6px;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .08em;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.terakoe-napit button, .terakoe-jatko button { min-height: 44px; min-width: 96px; }
.terakoe-napit button.vaara { border-color: var(--varo); color: var(--varo); }
.terakoe-napit button:disabled { cursor: default; }
.terakoe-napit button:disabled:not(.on):not(.vaara) { opacity: .5; }
.terakoe-jatko { margin-top: 12px; }
/* `button` on talon tyylissä inline-flex, joka ohittaa hidden-attribuutin. */
.terakoe [hidden] { display: none !important; }