Mobile UI pass: responsive tables, deck-view drill-down, dialog fixes

- Library/Card Search/Deck tables stack into dense card-style rows below
  720px instead of scrolling horizontally (floated thumbnail, wrapping
  chips for MV/Owned/color pips).
- Deck view: fix desktop min-widths and a non-wrapping button row that
  forced horizontal scroll on phones; split the deck list and the
  deck-building pane into separate drill-down screens with a back button
  so a long deck list doesn't bury the builder.
- Suggested Cards modal: fix action buttons crushing the card name down to
  one word per line by giving them their own full-width row.
- Add a close (X) button to the shared dialog title bar — mobile has no
  Escape key and wide dialogs leave little backdrop to tap.
- Info tab, bottom-nav loading/safe-area fixes, and Gradle NDK_HOME
  inheritance fix carried over from the Android bring-up work.

src/views/CardSearch.tsx

@@ -50,6 +50,10 @@ export function CardSearch({
   const [subtypes, setSubtypes] = useState<string[]>([]);
   const [keywords, setKeywords] = useState<string[]>([]);
   const [oracleText, setOracleText] = useState("");
+  // Collapsed by default (relevant on narrow/mobile screens only — see
+  // .filters-more's CSS, which is always expanded above that breakpoint
+  // regardless of this).
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
   const [facets, setFacets] = useState<LibraryFacets>(NO_FACETS);
 
   const [decks, setDecks] = useState<Deck[]>([]);
@@ -185,7 +189,7 @@ export function CardSearch({
         <tbody>
           {cards.map((c) => (
             <tr key={c.oracle_id}>
-              <td>
+              <td className="cell-thumb">
                 <CardThumb card={c} />
               </td>
               <td>
@@ -193,15 +197,15 @@ export function CardSearch({
               </td>
               <td className="card-name">{c.name}</td>
               <td className="card-type">{c.type_line}</td>
-              <td>{c.mana_value}</td>
-              <td>
+              <td data-label="MV">{c.mana_value}</td>
+              <td data-label="Owned">
                 <QtyStepper
                   value={c.quantity_owned}
                   onDecrement={() => adjust(c.oracle_id, -1)}
                   onIncrement={() => adjust(c.oracle_id, 1)}
                 />
               </td>
-              <td>
+              <td data-label="In decks">
                 {c.decks.map((d) => (
                   <span key={d} className="deck-chip">
                     {d}
@@ -292,6 +296,7 @@ export function CardSearch({
           <label>Name contains</label>
           <input value={text} onChange={(e) => setText(e.target.value)} placeholder="e.g. bolt" />
         </div>
+        <div className={`filters-more ${filtersExpanded ? "expanded" : ""}`}>
         <div className="field">
           <label>Playable in commander (color identity ⊆)</label>
           <ColorToggles value={commander} onChange={setCommander} />
@@ -351,6 +356,13 @@ export function CardSearch({
           />
         </div>
         </div>
+        </div>
+        <button
+          className="filters-toggle"
+          onClick={() => setFiltersExpanded((v) => !v)}
+        >
+          {filtersExpanded ? "▴ Fewer filters" : "▾ More filters"}
+        </button>
 
         <div className="workspace-bar">
           {hasActiveFilter && (