/* SmileDice v25.12.20 — Sport responsive right rail.
   Visual only. Dashboard, Add Pick, My Profile and every desktop tab retain
   the right column; Wallet and selected pages from Top Tipsters onward hide
   it on mobile/tablet without changing the chat or wallet logic. */

@media (max-width: 1210px),
       (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  #sport-screen:has(:is(
    #sp-view-wallet,
    #sp-view-tipsters,
    #sp-view-saved,
    #sp-view-rankings,
    #sp-view-community,
    #sp-view-ai,
    #sp-view-algorithm,
    #sp-view-fm,
    #sp-view-articles,
    #sp-view-rewards,
    #sp-view-user-map,
    #sp-view-admin-coupons
  ):not([hidden])) .sp-right {
    display: none !important;
  }
}

/* In the two-column tablet layout, also release the empty sidebar column.
   Below 970px the Sport shell is already flex-column and needs no grid fix. */
@media (min-width: 971px) and (max-width: 1210px) {
  #sport-screen:has(:is(
    #sp-view-wallet,#sp-view-tipsters,#sp-view-saved,#sp-view-rankings,#sp-view-community,
    #sp-view-ai,#sp-view-algorithm,#sp-view-fm,#sp-view-articles,
    #sp-view-rewards,#sp-view-user-map,#sp-view-admin-coupons
  ):not([hidden])) .sp-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #sport-screen:has(:is(
    #sp-view-wallet,#sp-view-tipsters,#sp-view-saved,#sp-view-rankings,#sp-view-community,
    #sp-view-ai,#sp-view-algorithm,#sp-view-fm,#sp-view-articles,
    #sp-view-rewards,#sp-view-user-map,#sp-view-admin-coupons
  ):not([hidden])) .sp-center {
    grid-column: 1 / -1 !important;
  }
}

/* Large touch tablets in landscape still get the center content width;
   laptop/desktop with a fine pointer retain their original three columns. */
@media (min-width: 1211px) and (max-width: 1400px) and
       (hover: none) and (pointer: coarse) {
  #sport-screen:has(:is(
    #sp-view-wallet,#sp-view-tipsters,#sp-view-saved,#sp-view-rankings,#sp-view-community,
    #sp-view-ai,#sp-view-algorithm,#sp-view-fm,#sp-view-articles,
    #sp-view-rewards,#sp-view-user-map,#sp-view-admin-coupons
  ):not([hidden])) .sp-shell {
    grid-template-columns: minmax(180px, 17%) minmax(0, 1fr) !important;
  }
  #sport-screen:has(:is(
    #sp-view-wallet,#sp-view-tipsters,#sp-view-saved,#sp-view-rankings,#sp-view-community,
    #sp-view-ai,#sp-view-algorithm,#sp-view-fm,#sp-view-articles,
    #sp-view-rewards,#sp-view-user-map,#sp-view-admin-coupons
  ):not([hidden])) .sp-center {
    grid-column: 2 !important;
  }
}

/* On phones keep coupon reactions on top and place Follow + FREE/PREMIUM
   alongside one another below. The existing buttons and handlers are intact.
   The repeated class wins against the runtime's late-injected social styles. */
@media (max-width: 700px) {
  #sport-screen article.sp-pick .sp-pick-bottom.sp-pick-bottom {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 6px 7px !important;
  }
  #sport-screen article.sp-pick .sp-pick-bottom > button.sp-social-button:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #sport-screen article.sp-pick .sp-pick-bottom > button.sp-social-button:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  #sport-screen article.sp-pick .sp-pick-bottom > button.sp-social-button:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #sport-screen article.sp-pick .sp-pick-bottom.sp-pick-bottom > .sp-social-follow,
  #sport-screen article.sp-pick .sp-pick-bottom.sp-pick-bottom > .sp-social-own {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #sport-screen article.sp-pick .sp-pick-bottom.sp-pick-bottom > .sp-free-badge {
    grid-column: 4 / 7 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}