/* Apa Seterusnya? */
.as-ask { display: flex; align-items: center; gap: 10px; }
.as-q { margin: 0; font: 800 1.4rem/1.3 var(--round); }

.as-card {
  display: grid; place-items: center; border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 var(--line);
  font: 800 2rem/1 var(--round); white-space: nowrap;
}
.as-card.gap { background: transparent; box-shadow: none; border: 3px dashed var(--muted); color: var(--muted); }
.as-card.filled { background: #E3F4E6; box-shadow: 0 3px 0 #BFE3C6; animation: lb-pop .4s; }

.as-seq { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; }
.as-seq .as-card { width: 52px; height: 58px; }
.as-seq.nums .as-card { width: auto; min-width: 58px; padding: 0 8px; font-size: 1.6rem; }

.as-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; }
.as-grid .as-card { aspect-ratio: 1; font-size: 2.2rem; }
.as-grid .as-card.many { font-size: 1.05rem; }
.as-grid.nums .as-card { font-size: 1.8rem; }

.as-opts { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; width: 100%; max-width: 340px; margin-top: 4px; }
.as-opt {
  height: 72px; border: 3px solid transparent; border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line);
  font: 800 2rem var(--round); white-space: nowrap;
}
.as-opt.many { font-size: 1.3rem; }
.as-opt:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.as-opt:disabled { opacity: 0.3; box-shadow: none; }
.as-opt.right { border-color: var(--green); background: #E3F4E6; }
@media (prefers-reduced-motion: reduce) { .as-card.filled { animation: none; } }