/* =========================================================
   Dueltainers — Horizontal auto scroller (manual override)
   ========================================================= */

.duel-strip{
  margin-top: 12px;

  /* Scroll container */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar but keep scroll working */
  scrollbar-width: none;
  border-radius: 18px;

  /* A subtle panel vibe so the strip feels intentional */
  border: 1px solid rgba(124,77,255,.35);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(0,179,255,.08), transparent 60%),
    radial-gradient(800px 380px at 100% 40%, rgba(124,77,255,.10), transparent 60%),
    rgba(11,16,32,.40);

  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.02);
  padding: 10px 8px;
}
.duel-strip::-webkit-scrollbar{ display:none; }

/* Turn your existing grid into a single horizontal row */
#grid.grid{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  align-items: stretch;
}

/* Each card becomes a fixed item (tweak width if needed) */
#grid.grid > *{
  flex: 0 0 auto;
  width: 280px;
  max-width: 85vw;
}

/* Optional: make it feel "grab-able" */
.duel-strip:active{ cursor: grabbing; }
.duel-strip{ cursor: grab; }