@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700;800&display=swap');

/* BlockBet site-wide final shell.
   Loaded after legacy page styles so the site stays visually consistent. */
:root{
  --bb-shell-bg:#081116;
  --bb-shell-panel:#0d171b;
  --bb-shell-panel-2:#111d1c;
  --bb-shell-line:#293b36;
  --bb-shell-green:#45db92;
  --bb-shell-muted:#81958c;
}

html,body{
  background:var(--bb-shell-bg)!important;
}

body{
  color:#eef4f1!important;
  font-family:'DM Sans',Inter,ui-sans-serif,system-ui,sans-serif!important;
}

/* Shared header */
body>.bb-global-header,
body.bb-unified-header-active>.bb-global-header{
  height:72px!important;
  min-height:72px!important;
  padding:0 20px!important;
  gap:9px!important;
  border:0!important;
  border-bottom:1px solid #263238!important;
  border-radius:0!important;
  background:rgba(13,19,23,.98)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
body>.bb-global-header .bb-global-brand,
body.bb-unified-header-active>.bb-global-header .bb-global-brand{
  min-width:200px!important;
  gap:11px!important;
}
body>.bb-global-header .bb-global-brand img,
body.bb-unified-header-active>.bb-global-header .bb-global-brand img{
  width:25px!important;
  height:29px!important;
}
body>.bb-global-header .bb-global-brand strong,
body.bb-unified-header-active>.bb-global-header .bb-global-brand strong{
  color:#53df9c!important;
  font-size:22px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
}
body>.bb-global-header .bb-global-nav,
body.bb-unified-header-active>.bb-global-header .bb-global-nav{
  gap:6px!important;
}
body>.bb-global-header .bb-global-nav>a,
body.bb-unified-header-active>.bb-global-header .bb-global-nav>a{
  height:38px!important;
  min-height:38px!important;
  padding:0 13px!important;
  border:1px solid #35403f!important;
  border-radius:6px!important;
  background:#22292b!important;
  color:#bfc9c4!important;
  font-size:10px!important;
  font-weight:800!important;
}
body>.bb-global-header .bb-global-nav>a:hover,
body>.bb-global-header .bb-global-nav>a[aria-current="page"],
body.bb-unified-header-active>.bb-global-header .bb-global-nav>a:hover,
body.bb-unified-header-active>.bb-global-header .bb-global-nav>a[aria-current="page"]{
  border-color:#456155!important;
  background:#29332f!important;
  color:#fff!important;
}
body>.bb-global-header .bb-global-spin,
body.bb-unified-header-active>.bb-global-header .bb-global-spin{
  height:40px!important;
  min-width:108px!important;
  margin-left:auto!important;
  border:1px solid #3f6752!important;
  border-radius:5px!important;
  background:linear-gradient(#244331,#1d372a)!important;
  color:#effff6!important;
  font-size:10px!important;
}
body>.bb-global-header .bb-global-balance,
body.bb-unified-header-active>.bb-global-header .bb-global-balance{
  height:40px!important;
  min-width:178px!important;
  padding:4px 5px 4px 9px!important;
  border:1px solid #29424d!important;
  border-radius:6px!important;
  background:linear-gradient(#0d1d26,#09151c)!important;
}
body>.bb-global-header .bb-global-wallet-cta,
body.bb-unified-header-active>.bb-global-header .bb-global-wallet-cta{
  height:31px!important;
  min-width:67px!important;
  border-radius:5px!important;
  font-size:8px!important;
}
body>.bb-global-header .bb-global-deposit,
body.bb-unified-header-active>.bb-global-header .bb-global-deposit{
  height:38px!important;
  min-height:38px!important;
  border-radius:5px!important;
}
body>.bb-global-header .bb-global-account,
body.bb-unified-header-active>.bb-global-header .bb-global-account{
  height:40px!important;
  min-width:88px!important;
  border-radius:5px!important;
}

/* Trust/footer should never sit over game content. */
body.casino-app>.bb-trust-footer,
body.bb-game-layout>.bb-trust-footer,
body.bb-unified-game-shell>.bb-trust-footer,
body[data-game]>.bb-trust-footer{
  display:none!important;
}

/* Main /games page */
body.casino-app{
  --header-height:72px!important;
  background:
    radial-gradient(circle at 76% 6%,rgba(92,68,205,.07),transparent 25%),
    radial-gradient(circle at 20% 4%,rgba(48,207,132,.06),transparent 22%),
    #081116!important;
}

body.casino-app .app-frame{
  min-height:100dvh!important;
  background:#081116!important;
}

body.casino-app .app-main{
  min-width:0!important;
  background:#081116!important;
}

body.casino-app .workspace{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:16px 18px 22px!important;
  overflow:hidden!important;
}

body.casino-app .game-shell{
  width:min(1360px,100%)!important;
  height:min(760px,calc(100dvh - 110px))!important;
  min-height:620px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:320px minmax(0,1fr)!important;
  overflow:hidden!important;
  border:1px solid #2d4038!important;
  border-radius:9px!important;
  background:#0b1418!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

body.casino-app .game-controls{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:116px minmax(0,1fr) auto!important;
  overflow:hidden!important;
  border-right:1px solid #2c3e36!important;
  background:
    linear-gradient(rgba(255,255,255,.01) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px),
    linear-gradient(180deg,#101c18,#0b1513)!important;
  background-size:22px 22px,22px 22px,auto!important;
}

body.casino-app .game-hero{
  position:relative!important;
  min-height:116px!important;
  height:116px!important;
  padding:18px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-bottom:1px solid #31463c!important;
  background:
    radial-gradient(circle at 78% 35%,rgba(62,224,146,.18),transparent 30%),
    linear-gradient(120deg,#1b3028,#111d1a 58%,#0c1516)!important;
}

body.casino-app .game-hero::before{
  width:92px!important;
  height:92px!important;
  right:12px!important;
  top:12px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  opacity:.95!important;
  transform:none!important;
  filter:drop-shadow(0 10px 13px rgba(0,0,0,.42))!important;
}

body.casino-app .game-hero::after{
  background:linear-gradient(90deg,rgba(8,15,15,.94) 0 37%,rgba(8,15,15,.25) 70%,transparent 100%)!important;
}

body.casino-app .game-hero .micro-label{
  color:#6fa58a!important;
  font-size:7px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}

body.casino-app .game-hero h1{
  max-width:175px!important;
  margin:6px 0 0!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:.95!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  text-transform:uppercase!important;
  text-shadow:0 3px 8px rgba(0,0,0,.48)!important;
}

body.casino-app .control-scroll{
  min-height:0!important;
  padding:16px!important;
  overflow-y:auto!important;
}

body.casino-app .bet-row{
  grid-template-columns:minmax(0,1fr) 48px 48px 58px!important;
  gap:6px!important;
}

body.casino-app .money-input,
body.casino-app .chip-button{
  min-height:44px!important;
  height:44px!important;
  border-radius:5px!important;
}

body.casino-app .result-card,
body.casino-app .practice-rules,
body.casino-app .game-fairness-card{
  border-radius:6px!important;
}

body.casino-app .result-card{
  margin-top:14px!important;
  padding:13px!important;
  background:#101a18!important;
  border-color:#30473c!important;
}

body.casino-app .round-readout{
  margin-bottom:11px!important;
}

body.casino-app .practice-rules{
  margin-top:12px!important;
  background:#0d1715!important;
  border-color:#293d34!important;
}

body.casino-app .game-fairness-card{
  min-height:43px!important;
  margin-top:8px!important;
  padding:0 11px!important;
  border:1px solid #2d4037!important;
  background:#0d1715!important;
}

body.casino-app .control-actions{
  padding:10px 16px 15px!important;
}

body.casino-app .control-actions button{
  height:48px!important;
  min-height:48px!important;
  border-radius:5px!important;
  border-bottom:3px solid #1d7b52!important;
  background:linear-gradient(#4bdb95,#31bd79)!important;
  color:#062719!important;
}

body.casino-app .game-stage{
  height:100%!important;
  min-height:0!important;
  grid-template-rows:40px minmax(0,1fr) 34px!important;
  padding:0 18px 14px!important;
  background:
    radial-gradient(circle at 50% 46%,rgba(93,70,220,.075),transparent 30%),
    radial-gradient(circle at 50% 48%,rgba(54,202,130,.065),transparent 48%),
    #090f15!important;
}

body.casino-app .stage-chrome{
  border-bottom:1px solid #1d2b30!important;
  color:#657780!important;
  font-size:7px!important;
}

body.casino-app .board-frame{
  width:min(650px,92%)!important;
  max-width:650px!important;
  max-height:calc(100% - 16px)!important;
  aspect-ratio:1.05!important;
  margin:auto!important;
  padding:20px!important;
  overflow:hidden!important;
  border:1px solid #1d2b32!important;
  border-radius:10px!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(42,183,122,.07),transparent 45%),
    #081018!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016),0 18px 45px rgba(0,0,0,.24)!important;
}

body.casino-app .coin-zone,
body.casino-app .crash-zone{
  gap:18px!important;
}

body.casino-app .coin-face{
  width:178px!important;
  height:178px!important;
}

body.casino-app #gameMessage{
  min-height:28px!important;
  padding:7px 4px 0!important;
  color:#6d7e88!important;
  font-size:9px!important;
}

/* Left games navigation */
body .bb-game-sidebar{
  background:#081117!important;
  border-right:1px solid #213139!important;
  box-shadow:10px 0 28px rgba(0,0,0,.13)!important;
}
body .bb-game-sidebar-top{
  border-bottom:1px solid #1d2c31!important;
}
body .bb-game-nav-item{
  border-radius:6px!important;
}
body .bb-game-nav-item:hover{
  background:#101d1b!important;
}
body .bb-game-nav-item[aria-current="page"]{
  border-color:#278a5e!important;
  background:linear-gradient(90deg,#103223,#0e211b)!important;
  box-shadow:inset 3px 0 0 #43dc92!important;
}
body .bb-game-label{
  color:#aebbb5!important;
  font-size:9px!important;
  font-weight:800!important;
}
body .bb-game-nav-item[aria-current="page"] .bb-game-label{
  color:#f2fff8!important;
}

/* Shared cards/dialogs across the rest of the site */
body:not(.lobby-app) dialog,
.bb-auth-dialog,
#bbPaymentDialog{
  border-radius:8px!important;
}

body:not(.lobby-app) .panel,
body:not(.lobby-app) .card,
body:not(.lobby-app) .vault-card,
body:not(.lobby-app) .stats-card{
  border-color:#293b36!important;
  background:#0d171b!important;
}

body:not(.lobby-app) button,
body:not(.lobby-app) .button{
  font-family:'DM Sans',Inter,system-ui,sans-serif!important;
}

@media(max-width:1200px){
  body>.bb-global-header .bb-global-brand,
  body.bb-unified-header-active>.bb-global-header .bb-global-brand{
    min-width:165px!important;
  }
  body>.bb-global-header .bb-global-balance,
  body.bb-unified-header-active>.bb-global-header .bb-global-balance{
    min-width:158px!important;
  }
  body.casino-app .game-shell{
    grid-template-columns:292px minmax(0,1fr)!important;
  }
}

@media(max-width:960px){
  body.casino-app .workspace{
    padding:10px!important;
    overflow:visible!important;
  }
  body.casino-app .game-shell{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
  }
  body.casino-app .game-controls{
    height:auto!important;
    min-height:0!important;
  }
  body.casino-app .game-stage{
    min-height:520px!important;
  }
  body.casino-app .board-frame{
    width:min(560px,96%)!important;
  }
}