/* Shared finishing pass: preserve BlockBet's charcoal and emerald palette. */
:root { color-scheme: dark; --bb-focus: #69e6ac; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
button, a, input, select, summary { touch-action: manipulation; }
:is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--bb-focus) !important; outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

/* Home: more breathing room, legible card copy and consistent surfaces. */
.lobby-app .lobby-content { max-width: 1440px; padding: 28px clamp(16px, 3vw, 42px) 48px; }
.lobby-app .community-section h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; margin: 0 0 22px; }
.lobby-app .community-grid { gap: 16px; }
.lobby-app .community-card { border-radius: 12px !important; }
.lobby-app .community-profile { padding: 22px; }
.lobby-app .community-copy h2 { font-size: 20px; }
.lobby-app .community-copy p { font-size: 12px; }
.lobby-app .home-hero-grid { margin-top: 22px; }
.lobby-app .promo-slider { border-radius: 14px; }
.lobby-app .section-bar { min-height: 64px; margin-top: 20px; }
.lobby-app .section-bar strong { font-size: 20px; letter-spacing: -.025em; }
.lobby-app .section-bar > span { font-size: 11px; color: #94a59e; }
.lobby-app .game-grid { gap: 14px; margin-top: 18px; }
.lobby-app .game-card { height: 218px; border-radius: 12px; border-color: #24332e; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lobby-app .game-card .art { min-height: 0; }
.lobby-app .game-card .copy { padding: 16px; min-height: 73px; }
.lobby-app .game-card b { font-size: 13px; letter-spacing: .02em; text-transform: none; }
.lobby-app .game-card small { font-size: 11px; line-height: 1.45; color: #9aa9a3; }
.lobby-app .game-card:hover { transform: translateY(-4px); border-color: #429670; box-shadow: 0 12px 28px #0004; filter: none; }
.lobby-app .bottom-grid { margin-top: 22px; gap: 16px; }
.lobby-app .panel-card, .lobby-app .status-row { border-radius: 12px; }
.lobby-app .panel-card p, .lobby-app .status-row small { font-size: 11px; }
.lobby-app .status-row strong { font-size: 12px; }
.lobby-app .daily-spin-bar { border-radius: 12px; }

/* Let pages scroll naturally; never clip the board to a short viewport. */
body.casino-app { height: auto; min-height: 100dvh; overflow: auto; background: #080d12; }
.casino-app .app-frame { height: auto; min-height: 100dvh; overflow: visible; grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.casino-app .icon-rail { position: sticky; top: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; gap: 8px; }
.casino-app .icon-rail > * { flex-shrink: 0; }
.casino-app .icon-rail button[aria-selected=true] { background: #142b20 !important; border-color: #397653 !important; box-shadow: inset 3px 0 #40d990 !important; }
.casino-app .app-main { display: block; height: auto; min-height: 100dvh; overflow: visible; }
.casino-app .site-header { min-height: 72px; height: auto; gap: 14px; padding: 12px 24px; box-shadow: none; flex-wrap: wrap; }
.casino-app .site-header .brand { min-width: 0; height: 42px; }
.casino-app .site-header .brand strong { display: block; font-size: 13px; }
.casino-app .site-header nav { border: 0; }
.casino-app .header-balance { display: flex !important; min-width: 110px; }
.casino-app .workspace { display: block; overflow: visible; padding: 24px; max-width: 1600px; margin: auto; }
.casino-app .activity-panel { display: none; }
.casino-app .game-shell { display: grid; grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); min-height: 600px; height: auto; overflow: hidden; border: 1px solid #27382e; border-radius: 16px; }
.casino-app .game-controls { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
.casino-app .game-hero { min-height: 108px; height: 108px; padding: 22px; flex-shrink: 0; }
.casino-app .game-hero h1 { font-size: 28px; letter-spacing: -.035em; text-transform: none; }
.casino-app .control-scroll { padding: 20px; overflow: visible; flex: 1; }
.casino-app .game-controls label { font-size: 11px; letter-spacing: .06em; }
.casino-app .bet-row { grid-template-columns: minmax(0, 1fr) 38px 38px 44px; gap: 5px; }
.casino-app .bet-row #maxBet { display: block; }
.casino-app .money-input { min-width: 0; }
.casino-app .money-input input { font-size: 16px; padding: 0 6px; }
.casino-app .money-input span { padding-left: 8px; }
.casino-app .mine-picks { gap: 5px; }
.casino-app .mine-picks button { min-height: 44px; }
.casino-app .practice-rules { font-size: 12px; }
.casino-app .practice-rules summary { font-size: 10px; }
.casino-app .practice-rules p { font-size: 12px; line-height: 1.65; }
.casino-app .round-readout { font-size: 10px; }
.casino-app .control-actions { padding: 0 20px 20px; }
.casino-app .control-actions button { min-height: 48px; font-size: 12px; background: #237747; border-color: #3e9f6d; }
.casino-app .control-actions button:disabled { opacity: .5; }
.casino-app .game-stage { width: 100%; max-width: none; margin: 0; min-height: 560px; height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr) auto; padding: 0 clamp(12px, 2vw, 28px) 20px; }
.casino-app .board-frame { width: min(100%, 640px); min-height: 0; max-height: none; padding: clamp(10px, 2vw, 22px); aspect-ratio: 1; }
.casino-app #gameBoard { min-width: 0; min-height: 0; }
.casino-app .board { gap: clamp(5px, 1vw, 10px); }
.casino-app .towers .tile { min-height: 30px; }
.casino-app #gameMessage { min-height: 44px; padding: 16px 4px 0; font-size: 12px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
.casino-app .game-shell:has(.blackjack-table) { grid-template-columns: minmax(0, 1fr); }
.casino-app .game-shell:has(.blackjack-table) .game-controls { display: none; }
.casino-app .game-stage:has(.blackjack-table) { min-height: 680px; }
.casino-app .game-stage:has(.blackjack-table) .board-frame { width: 100%; max-width: none; aspect-ratio: auto; overflow: visible; }
.casino-app .blackjack-table { width: 100%; min-height: 600px; }
.casino-app .blackjack-cards { flex-wrap: wrap; }

/* Standalone tables use the same comfortable spacing and readable rules. */
.roulette-app .roulette-main, .cb-app .cb-main { width: 100%; max-width: 1440px; padding: 28px; margin: auto; }
.roulette-app .roulette-layout { border-radius: 16px; overflow: hidden; }
.roulette-app .rules, .cb-app .cb-disclosure { font-size: 12px; line-height: 1.6; }
.roulette-app .roulette-status, #rouletteStatus { overflow-wrap: anywhere; }
.cb-app .cb-heading-row { gap: 20px; flex-wrap: wrap; }
.cb-app .cb-choice-row { flex-wrap: wrap; }
.cb-app .cb-create-bar { gap: 12px; }

@media (max-width: 1100px) {
  .casino-app .site-header nav a { padding: 0 10px; }
  .casino-app .workspace { padding: 16px; }
  .casino-app .game-shell { grid-template-columns: 270px minmax(0, 1fr); }
  .casino-app .game-stage { min-height: 480px; }
  .lobby-app .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lobby-app .lobby-content { padding: 20px 14px 32px; }
  .lobby-app .community-grid { gap: 10px; }
  .lobby-app .community-card { overflow: hidden !important; min-width: 0; }
  .lobby-app .community-profile { padding: 14px 10px; }
  .lobby-app .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lobby-app .game-card { height: 192px; }
  .lobby-app .game-card .copy { padding: 12px; }
  .lobby-app .community-copy h2 { font-size: 17px; }
  .lobby-app .community-copy p { font-size: 10px; }
  .casino-app .app-frame { display: block; }
  .casino-app .icon-rail { position: relative; flex-direction: row; height: 62px; width: 100%; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #27382e; }
  .casino-app .icon-rail .rail-home { margin-bottom: 0; border-bottom: 0; }
  .casino-app .icon-rail .rail-spacer { display: none; }
  .casino-app .site-header { position: relative; top: auto; padding: 10px 14px; gap: 8px; }
  .casino-app .site-header nav { display: none; }
  .casino-app .site-header .brand { margin-right: auto; }
  .casino-app .site-header .header-balance { min-width: 88px; margin-left: 0; padding: 0 10px; }
  .casino-app .site-header .deposit-link { display: inline-flex; padding: 0 12px; }
  .casino-app .workspace { padding: 12px; }
  .casino-app .game-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .casino-app .game-controls { border-right: 0; border-bottom: 1px solid #27382e; }
  .casino-app .game-hero { min-height: 78px; height: 78px; padding: 16px; }
  .casino-app .game-hero h1 { font-size: 24px; }
  .casino-app .control-scroll { padding: 14px; }
  .casino-app .result-card { display: flex; gap: 14px; padding: 12px; margin-top: 12px; flex-wrap: wrap; }
  .casino-app .round-readout { flex: 1; margin: 0; gap: 10px; }
  .casino-app .result-meter { display: none; }
  .casino-app .control-actions { padding: 0 14px 14px; }
  .casino-app .game-stage { min-height: 380px; padding: 0 10px 14px; }
  .casino-app .board-frame { width: min(100%, 480px); }
  .casino-app .towers { min-height: 360px; }
  .casino-app .board-frame:has(.towers) { min-height: 390px; }
  .casino-app .game-stage:has(.blackjack-table) { min-height: 580px; }
  .casino-app .blackjack-table { min-height: 540px; }
  .roulette-app .roulette-main, .cb-app .cb-main { padding: 18px 12px; }
}
@media (max-width: 370px) {
  .casino-app .site-header .brand strong { display: none; }
  .lobby-app .game-card small { font-size: 10px; }
}
@media (max-width: 520px) {
  .casino-app .site-header { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .casino-app .site-header .brand { grid-column: 1; grid-row: 1; margin: 0; }
  .casino-app .site-header .brand strong { display: none; }
  .casino-app .site-header .header-balance { grid-column: 2; grid-row: 1; width: 100%; white-space: nowrap; }
  .casino-app .site-header .header-balance strong { white-space: nowrap; font-size: 13px !important; }
  .casino-app .site-header .deposit-link { grid-column: 3; grid-row: 1; }
  .casino-app .site-header .withdraw-link { display: none !important; }
  .casino-app .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lobby-app .game-card:hover { transform: none; }
}


/* Emerald game floor: crisp controls, layered tables, and clear selected states. */
body.casino-app { background: radial-gradient(ellipse at 78% 0, #14382a50, transparent 55%), #080d12; }
.casino-app .workspace { max-width: 1480px; padding-top: 30px; }
.casino-app .game-shell { border-radius: 6px; border-color: #2b3c36; box-shadow: 0 24px 70px #0005; }
.casino-app .game-controls { background: linear-gradient(165deg, #17221f, #0e1618 50%); border-right: 1px solid #2b3c36; }
.casino-app .game-hero { position: relative; background: linear-gradient(120deg, #183c2c, #101d1a); border-bottom: 1px solid #2f493d; }
.casino-app .game-hero::after { content: ''; position: absolute; left: 22px; bottom: 0; width: 40px; height: 3px; background: #58e5a1; }
.casino-app .game-hero .micro-label { color: #7dddb0; font-size: 9px; letter-spacing: .18em; }
.casino-app .game-hero h1 { font-size: 32px; font-weight: 800; margin-top: 8px; }
.casino-app .game-stage { background: radial-gradient(ellipse at 50% 42%, #17382b66, transparent 66%), linear-gradient(135deg, #10191b, #091113); }
.casino-app .stage-chrome { border-bottom: 1px solid #263c32; color: #a3b4ad; font-size: 9px; letter-spacing: .16em; }
.casino-app .stage-chrome span:last-child { color: #69dba1; }
.casino-app .money-input, .casino-app .chip-button, .casino-app .mine-picks button { border-radius: 4px; background: #0a1213; border-color: #2e4339; }
.casino-app .money-input:focus-within { border-color: #6ddaa4; box-shadow: 0 0 0 3px #69dba115; }
.casino-app .mine-picks button.active { color: #9cf6c6; background: #1b4630; border-color: #40815b; box-shadow: inset 0 -2px #70e8a0; }
.casino-app .result-card { border: 1px solid #304238; border-radius: 5px; background: linear-gradient(145deg, #17271f, #101b18); padding: 17px; }
.casino-app #potential { color: #86edb6; font-size: 22px; font-variant-numeric: tabular-nums; }
.casino-app #multiplier { font-variant-numeric: tabular-nums; }
.casino-app .control-actions button { border-radius: 4px; background: linear-gradient(#54d391, #30b774); color: #06180f; border-color: #6ae6a5; box-shadow: 0 4px 0 #15452d, 0 6px 20px #32ca7318; font-weight: 800; letter-spacing: .03em; }
.casino-app .control-actions button:hover:enabled { filter: brightness(1.08); transform: translateY(-1px); }
.casino-app .control-actions button:active:enabled { transform: translateY(2px); box-shadow: 0 2px 0 #15452d; }
.casino-app .board:not(.towers) .tile { border-radius: 5px; border: 1px solid #345a49; background: linear-gradient(145deg, #284238, #192e27); box-shadow: 0 5px 0 #091c14, inset 0 1px #81af9140; transition: transform .15s ease, background .15s ease; }
.casino-app .board .tile:hover:enabled { transform: translateY(-3px); border-color: #6adca1; background: #315d45; }
.casino-app .board .tile.safe { background: radial-gradient(circle, #367b50, #1d4b33); border-color: #73df9c; }
.casino-app .board .tile.bomb { background: #482329; border-color: #a95059; }
.casino-app .game-fairness-card { border-radius: 4px; border-color: #2c4939; background: #10261b; }
.casino-app #gameMessage { color: #bdcdc4; }
.casino-app .icon-rail { background: #0b1214; border-right: 1px solid #253a2e; }
.casino-app .icon-rail button[aria-selected=true] { background: #1a3b29 !important; border-color: #3d7352 !important; box-shadow: inset 3px 0 #69e7a0 !important; }
.lobby-app .game-card, .lobby-app .community-card, .lobby-app .panel-card, .roulette-app .roulette-layout { border-radius: 6px !important; }
.lobby-app .game-card { background: linear-gradient(155deg, #1a2924, #0d1517); }
.lobby-app .game-card .copy { border-top: 1px solid #2b3f34; background: #111d19; }
.lobby-app .section-bar strong { letter-spacing: -.04em; }
@media (max-width: 760px) {
  .casino-app .workspace { padding: 12px; }
  .casino-app .game-hero h1 { font-size: 25px; }
  .casino-app .game-controls { border-right: 0; }
  .casino-app .result-card { padding: 12px; }
  .casino-app #potential { font-size: 18px; }
}


/* BlockBet visual refresh: stronger depth and unmistakable emerald surfaces. */
body.lobby-app {
  background:
    radial-gradient(circle at 72% -10%, rgba(43, 204, 126, .16), transparent 34%),
    radial-gradient(circle at 8% 22%, rgba(22, 111, 75, .11), transparent 28%),
    linear-gradient(180deg, #070b0d 0%, #090f12 46%, #070b0d 100%) !important;
}
body.lobby-app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 74%);
}
.lobby-app .lobby-header {
  background: rgba(7, 13, 15, .88) !important;
  border-bottom: 1px solid #20352b !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lobby-app .lobby-brand strong {
  letter-spacing: .12em;
}
.lobby-app .community-section {
  position: relative;
  padding: 6px 0 4px;
}
.lobby-app .community-card {
  border: 1px solid #263b31 !important;
  background:
    linear-gradient(145deg, rgba(27, 45, 38, .94), rgba(10, 17, 19, .98)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025);
}
.lobby-app .community-card:hover {
  border-color: #3f785b !important;
}
.lobby-app .promo-slider {
  border: 1px solid #2f4b3d !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}
.lobby-app .promo-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -90px 80px rgba(0,0,0,.22);
}
.lobby-app .daily-spin-bar {
  border: 1px solid #315541 !important;
  background: linear-gradient(105deg, #12261d, #0b1517 55%, #10231b) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.lobby-app .section-bar {
  border-bottom: 1px solid #284236;
}
.lobby-app .game-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a4337 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(67, 199, 130, .10), transparent 40%),
    linear-gradient(160deg, #18251f, #0b1214 72%) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
.lobby-app .game-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #53df98 22%, #2f9d68 78%, transparent);
  opacity: .72;
  z-index: 2;
}
.lobby-app .game-card .art {
  background:
    radial-gradient(circle at 50% 55%, rgba(65, 216, 141, .12), transparent 42%),
    linear-gradient(180deg, rgba(18,31,27,.78), rgba(9,15,17,.48)) !important;
}
.lobby-app .game-card .copy {
  background: linear-gradient(180deg, #121f1b, #0d1716) !important;
  border-top: 1px solid #294437 !important;
}
.lobby-app .game-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  border-color: #58bd84 !important;
  box-shadow: 0 22px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(89,221,153,.07);
}
.lobby-app .panel-card,
.lobby-app .status-row {
  border: 1px solid #294236 !important;
  background: linear-gradient(145deg, #14231e, #0b1315) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
body.casino-app {
  background:
    radial-gradient(circle at 76% -8%, rgba(59, 201, 132, .17), transparent 33%),
    linear-gradient(180deg, #070c0e, #091113 60%, #070c0e) !important;
}
.casino-app .game-shell {
  border-color: #365344 !important;
  box-shadow: 0 30px 84px rgba(0,0,0,.44), 0 0 0 1px rgba(94,219,157,.035) !important;
}
.casino-app .game-stage {
  background:
    radial-gradient(circle at 50% 36%, rgba(39, 132, 86, .19), transparent 44%),
    linear-gradient(135deg, #101b18, #081012) !important;
}
@media (max-width: 760px) {
  .lobby-app .game-card:hover { transform: none !important; }
  .lobby-app .lobby-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}