/* deckbuilder/mobile-overrides.css — layout fixes for phones/tablets */
@media (max-width: 1024px){
  /* Stack the three columns */
  .app.three-cols{ display:flex; flex-direction:column; gap:12px; }
  .left-col, .center-col, .right-col{ width:100% !important; max-width:100% !important; }

  /* Keep panels readable */
  .panel{ padding:12px !important; }

  /* Search filters: two cols on tablets, one col on phones */
  .row2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .filters .row{ display:flex; flex-wrap:wrap; gap:10px; }
  .select-wide{ width:100%; }

  /* Results list area should scroll instead of pushing width */
  .results-wrap{ max-height: 50vh; overflow:auto; }

  /* Deck grids: allow wrapping on small screens if they are fixed-size */
  .deck-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 680px){
  .row2{ grid-template-columns: 1fr; }
  .deck-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Safety: prevent any unexpected horizontal cutoffs inside the page while stacked */
@media (max-width: 1024px){
  .app, .wrap, .wrap-page{ max-width:100%; overflow-x: hidden; }
}