/* =====================================================
   BBB / Bingo Bango Bongo — scoped styles (no conflicts)
===================================================== */

.gfg-bbb-page .game-card{ transition:none !important; }

/* Hide convention scoped */
.gfg-bbb-page .hidden{ display:none !important; }

/* Make Rules/Fullscreen/Nav match Wolf pill buttons */
.gfg-bbb-page #bbbRulesBtn,
.gfg-bbb-page #fullscreenBtn,
.gfg-bbb-page #holeNavCard button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.55rem !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;

  background: linear-gradient(180deg, var(--wolf-dark), #111223) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(53,148,71,0.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;

  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition) !important;
  cursor:pointer !important;
}

.gfg-bbb-page #bbbRulesBtn:hover,
.gfg-bbb-page #fullscreenBtn:hover,
.gfg-bbb-page #holeNavCard button:hover{
  background: linear-gradient(180deg, var(--wolf-dark-2), #14162a) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(250,208,46,0.55) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

/* Back/Next slightly smaller */
.gfg-bbb-page #holeNavCard button{
  padding: 10px 14px !important;
  font-size: .92rem !important;
}

/* Fullscreen behavior (same approach as Wolf) */
body.fullscreen-active .gfg-navbar,
body.fullscreen-active #foot{ display:none !important; }

body.fullscreen-active{ overflow:hidden !important; }

.gfg-bbb-page #selectionWrapper.fullscreen{
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: linear-gradient(135deg, #ffffff 0%, #f6faf6 100%);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  width:100vw;
  height:100vh;
  max-width:100vw;
}

.gfg-bbb-page #fullscreenContent{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:auto;
  padding-bottom:10px;
}

.gfg-bbb-page #scoreboardCard{
  margin-top:auto;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Rules modal (same pattern as Wolf) */
.gfg-bbb-page #bbbRulesModal.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(23, 25, 39, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25000;
  padding: 16px;
}
.gfg-bbb-page #bbbRulesModal.hidden{ display:none !important; }

.gfg-bbb-page #bbbRulesModal .modal-content{
  background: #171927;
  color: #fff;
  width: 95%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 18px;
  border: 2px solid #359447;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.gfg-bbb-page #bbbRulesModal h3,
.gfg-bbb-page #bbbRulesModal h5{
  color: var(--yellow);
  font-weight: 800;
}

.gfg-bbb-page #bbbRulesModal .btn-secondary{
  background: #2a2d4a;
  border: none;
}
.gfg-bbb-page #bbbRulesModal .btn-secondary:hover{
  background: #359447;
}