/* Lompat Nombor */
.ln-ask { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.ln-q { margin: 0; font: 700 1.2rem/1.35 var(--round); text-wrap: balance; }
.ln-q.big { font: 800 2.2rem var(--round); }
.ln-note { margin: -6px 0 0; color: var(--muted); font: 700 1rem var(--round); min-height: 1.4em; text-wrap: balance; }

/* The number line scrolls sideways on narrow screens; the game keeps Kira in view. */
.ln-scroll { width: 100%; overflow-x: auto; scroll-behavior: smooth; padding: 6px 0 12px; scrollbar-width: thin; }
/* Faded edges show there are more numbers to swipe to. */
.ln-scroll.more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ln-line {
  display: flex; gap: 4px; width: max-content; margin: 0 auto; padding: 0 8px;
  background: linear-gradient(var(--muted), var(--muted)) 8px 58px / calc(100% - 16px) 4px no-repeat;
}
.ln-tile {
  width: 52px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ln-spot { height: 58px; display: flex; align-items: flex-end; justify-content: center; }
.ln-spot::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); margin-bottom: -9px; }
.ln-spot:has(.ln-kira)::after { display: none; }
.ln-num {
  min-width: 48px; height: 44px; border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--line);
  display: grid; place-items: center; font: 800 1.2rem var(--round);
}
.ln-tile.start .ln-num { background: #FDE3E2; }
.ln-tile.right .ln-num { background: var(--green); color: #fff; box-shadow: 0 3px 0 #2B7A37; }
.ln-tile:disabled { opacity: 0.35; }
.ln-tile.lb-hint { animation: none; }
.ln-tile.lb-hint .ln-num { animation: lb-pulse 1s 3; }
.ln-kira { width: 50px; height: 50px; object-fit: contain; }
.ln-kira.hop { animation: ln-hop .22s ease-out; }
@keyframes ln-hop { 50% { transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .ln-kira.hop, .ln-tile.lb-hint .ln-num { animation: none; } }