/* Kereta Api Suku Kata */
.skt-pic {
  border: 0; background: var(--card); border-radius: 28px; box-shadow: 0 4px 0 var(--line);
  width: 150px; height: 150px; font-size: 92px; line-height: 150px; padding: 0;
}
.skt-guide { font: 800 2rem/1.2 var(--round); letter-spacing: 3px; color: var(--muted); }
.skt-guide:empty { display: none; }

.skt-train { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 0 10px; border-bottom: 5px dashed #C8B49A; }
.skt-engine { font-size: 52px; line-height: 1; }
.skt-car {
  min-width: 70px; height: 56px; padding: 0 8px; border-radius: 12px 12px 6px 6px;
  border: 3px dashed var(--muted); display: grid; place-items: center;
  font: 800 1.45rem var(--round); position: relative;
}
.skt-car.full { border-style: solid; border-color: var(--red); background: var(--red); color: #fff; }
.skt-car::after { content: ""; position: absolute; bottom: -12px; left: 12px; right: 12px; height: 10px;
  background: radial-gradient(circle at 6px 5px, var(--ink) 5px, transparent 6px) left / 50% 100% no-repeat,
              radial-gradient(circle at calc(100% - 6px) 5px, var(--ink) 5px, transparent 6px) right / 50% 100% no-repeat; }
.skt-train.go { animation: skt-go 1.2s ease-in .2s both; }
/* The engine leads on the left, so the train leaves to the left. */
@keyframes skt-go { to { transform: translateX(-120vw); } }

.skt-tiles { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.skt-tile {
  min-width: 76px; height: 64px; padding: 0 14px; border: 0; border-radius: 16px;
  background: var(--card); box-shadow: 0 4px 0 var(--line); font: 800 1.6rem var(--round);
}
.skt-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.skt-tile:disabled { opacity: 0.25; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .skt-train.go { animation: none; } }