/* =================== Hi-Lo (mobile button redesign) =================== */
/* Mirror of the Blackjack pattern — the desktop layout (Higher / Lower in
   one row, Skip / Cash out in another) stays untouched. On phones we collapse
   to flex-wrap so legal-only buttons pack tight, hoist the better-odds side
   to full width as the "obvious move", and hide non-legal buttons via
   :not(.is-legal). The JS side (hilo.js) toggles `.is-legal` on each of
   higher / lower / skip / cashout based on the live game state.

   Mobile DOM topology: game-nav.js's mobile bar code flattens
   .gp-panel descendants into a .gp-actions-original wrapper at runtime, so
   the .hilo-guess-row / .hilo-meta-row parents no longer wrap these
   buttons on mobile. The selectors below therefore target the buttons
   DIRECTLY on the .gp-btn class (and also under their original wrappers,
   the desktop arrangement) so both layouts pick up the smaller mobile
   sizing. */
@media (max-width: 720px) {
  .hilo-guess-row,
  .hilo-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Specificity raised via .gp-btn so this beats the
     .gp-actions-original .gp-btn rule in stake.css that would otherwise
     force these to flex 1 1 100%. */
  .gp-btn#higher,
  .gp-btn#lower,
  .gp-btn#skip,
  .gp-btn#cashout,
  .hilo-guess-row .gp-btn,
  .hilo-meta-row .gp-btn {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.1;
  }
  /* Primary action — the side that's currently the "obvious move" gets
     promoted to full-width. JS sets .hilo-primary on whichever of higher /
     lower has the better odds for the current card; if neither is clearly
     better, neither button gets it (both stay 50/50 share). */
  .gp-btn#higher.hilo-primary,
  .gp-btn#lower.hilo-primary,
  .hilo-guess-row .gp-btn.hilo-primary {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  /* Cash out is the safety-exit primary once the player has a streak —
     promote it on its row when legal so it reads as the obvious choice. */
  .gp-btn#cashout.is-legal,
  .hilo-meta-row .gp-btn#cashout.is-legal {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  /* Hide non-legal actions on mobile — the heart of the redesign. King can't
     go higher (no rank above), Ace can't go lower, and Cash out is dead until
     the player has banked at least one correct call. */
  .gp-btn#higher:not(.is-legal),
  .gp-btn#lower:not(.is-legal),
  .gp-btn#skip:not(.is-legal),
  .gp-btn#cashout:not(.is-legal),
  .hilo-guess-row .gp-btn:not(.is-legal),
  .hilo-meta-row .gp-btn:not(.is-legal) {
    display: none !important;
  }
}