/* Hio: karkeusjärjestys-tehtävä (2.10.2026). Vain paletin muuttujia. */
.karkeustehtava { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
/* Yleinen `button` on mono-versaali nappi; tämä on kuvakortti. */
button.karkeuskortti {
  position: relative;
  display: block;
  padding: 0;
  min-height: 44px;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid var(--hair);
  background: var(--ground-2);
}
button.karkeuskortti img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
button.karkeuskortti:hover { border-color: var(--accent); }
button.karkeuskortti:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.karkeuskortti[aria-pressed="true"] { border-color: var(--accent); }
.karkeusmerkki:empty { display: none; }
.karkeusmerkki {
  position: absolute; left: 6px; top: 6px;
  min-width: 1.9em; height: 1.9em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600;
  font-size: calc(15px * var(--tekstikoko));
  background: var(--accent); color: var(--ground);
}
.karkeusnumero {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 8px 6px;
  font-family: var(--mono); font-size: calc(12px * var(--tekstikoko));
  letter-spacing: .08em; color: white; text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.karkeustehtava.valmis .karkeusnumero { display: block; }
.karkeustehtava.valmis button.karkeuskortti { cursor: default; }
#karkeusalusta { min-height: calc(44px * var(--tekstikoko)); }
#karkeusalusta[hidden], #karkeuskortti[hidden] { display: none; }
#karkeusalusta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  button.karkeuskortti:active, #karkeusalusta:active { transform: none; }
}