/* ── Custom numeric keypad ──────────────────────────────────────────
   A compact 3×4 numeric pad that slides up from the bottom of the
   screen on mobile when a connected number input is focused. Much
   smaller than the native iOS/Android numeric keyboard so the
   playing field stays visible while typing.

   Activated by LolNumpad.attach(inputEl, { onSubmit }). The widget
   only renders below 640px viewport width — desktop keeps the
   normal physical keyboard. */

#lol-numpad {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 10px;
  z-index: 9000;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background:
    radial-gradient(ellipse 80% 60% at 30% 10%, rgba(251, 191, 36, 0.06) 0%, transparent 60%),
    rgba(14, 14, 30, 0.96);
  box-shadow:
    0 -10px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

#lol-numpad.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

#lol-numpad .lol-numpad-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

#lol-numpad .lol-numpad-key {
  height: clamp(44px, 11vw, 56px);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 700;
  color: #f5e9c8;
  background: linear-gradient(160deg, rgba(45, 38, 70, 0.95), rgba(28, 24, 52, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
  user-select: none;
}

#lol-numpad .lol-numpad-key:active {
  background: linear-gradient(160deg, rgba(70, 58, 110, 0.95), rgba(50, 42, 90, 0.95));
  transform: scale(0.96);
  border-color: rgba(251, 191, 36, 0.4);
}

#lol-numpad .lol-numpad-key.lol-numpad-back {
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  color: rgba(220, 210, 240, 0.85);
}

#lol-numpad .lol-numpad-key.lol-numpad-submit {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 55%, #f59e0b 100%);
  color: #1a1428;
  border: 2px solid rgba(251, 220, 100, 0.85);
  font-size: clamp(1.4rem, 5vw, 1.7rem);
  box-shadow:
    0 4px 14px rgba(251, 191, 36, 0.5),
    0 0 18px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#lol-numpad .lol-numpad-key.lol-numpad-submit:active {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  transform: scale(0.96);
}

/* Desktop: never show the custom pad (the physical keyboard is fine) */
@media (min-width: 641px) {
  #lol-numpad { display: none !important; }
}