/* Casino details measured from the Xbahis reference, 11 September 2026. */
.xb-game-card { position: relative; min-width: 0; aspect-ratio: 44 / 31; border: 0; border-radius: 6px; overflow: hidden; background: #ffffff1f; isolation: isolate; }
.xb-game-cover { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.xb-game-card .xb-game-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xb-card-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; height: 100%; padding: 12px; font-size: 12px; }
.xb-card-fallback .xb-icon { font-size: 28px; opacity: .5; }
.xb-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; visibility: hidden; opacity: 0; pointer-events: none; background: #0000007a; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .3s, visibility .3s; }
.xb-game-card:is(:focus-within,.is-revealed) .xb-card-overlay { visibility: visible; opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .xb-game-card:hover .xb-card-overlay { visibility: visible; opacity: 1; pointer-events: auto; } }
.xb-card-toolbar { display: flex; align-items: center; justify-content: space-between; }
.xb-card-toolbar button { display: grid; place-items: center; color: #ffffffcc; background: transparent; border: 0; padding: 0; width: 22px; height: 22px; cursor: pointer; }
.xb-card-toolbar .xb-icon { font-size: 18px; }
.xb-card-favorite[aria-pressed=true] { color: var(--accent-green,#ff6500); }
.xb-card-title { color: #fff; text-align: center; font-size: 16px; line-height: 18px; font-weight: 500; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-card-actions { display: flex; gap: 4px; padding-bottom: 4px; width: 100%; }
.xb-card-actions button { flex: 1; min-width: 0; border-radius: 999px; height: 24px; padding: 0 8px; font-family: inherit; font-size: 12px; font-weight: 400; border: 1px solid transparent; cursor: pointer; }
.xb-card-demo { background: #ffffff14; color: #fff; border-color: #ffffff0a !important; }
.xb-card-play { background: var(--accent-green,#ff6500); color: var(--xb-button-text, #23232b); }
.xb-card-demo:hover { background: #ffffff29; }
.xb-card-play:hover { filter: brightness(1.12); }
.xb-card-overlay .xb-card-demo { transform: translateY(100%); }
.xb-card-overlay .xb-card-play { transform: translateY(-100%); }
.xb-card-overlay .xb-card-actions button { transition: transform .3s, background .2s; }
.xb-game-card:is(:hover,:focus-within,.is-revealed) .xb-card-actions button { transform: translateY(0); }
.xb-game-card button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.xb-catalog-grid[aria-busy=true] { opacity: 1; }
.xb-catalog-grid.is-lobby>.xb-game-card { flex: 0 0 calc(44% - 5px); scroll-snap-align: start; }
.xb-card-skeleton { aspect-ratio: 44 / 31; border-radius: 6px; overflow: hidden; position: relative; background: #ffffff0f; }
.xb-card-skeleton::after,.xb-game-card.is-image-loading::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent,#ffffff14,transparent); transform: translateX(-100%); animation: xb-card-shimmer 1.4s ease-in-out infinite; }
@keyframes xb-card-shimmer { to { transform: translateX(100%); } }
.xb-provider-logo { object-fit: contain; filter: none; opacity: 1; }
.xb-provider-logo--reference { filter: brightness(0) invert(1); opacity: .9; }
.xb-providers { width: min(720px,calc(100% - 32px)); max-width: 720px; max-height: min(632px,calc(100dvh - 32px)); margin: auto; border: 0; border-radius: 12px; padding: 0; overflow: hidden; background: #2e2e36; }
.xb-providers[open] { display: flex; flex-direction: column; }
.xb-providers::backdrop { background: #0008; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.xb-provider-heading { margin: 0; padding: 16px; flex-shrink: 0; min-height: 64px; }
.xb-provider-heading h2 { font-size: 16px; font-weight: 500; }
.xb-provider-heading button { width: 32px; height: 32px; border-radius: 50%; background: #ffffff0a; color: #ddd; }
.xb-provider-content { padding: 0 16px; overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.xb-provider-content .xb-catalog-search { height: 40px; border-radius: 999px; background: #ffffff14; }
.xb-provider-subheading { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; font-size: 14px; }
.xb-provider-subheading button { border: 0; padding: 4px; background: transparent; color: #ddd; cursor: pointer; }
.xb-provider-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; margin: 0; }
.xb-provider-grid>button { position: relative; min-height: 56px; height: 56px; padding: 4px; border: 1px solid transparent; border-radius: 3px; background: #ffffff14; color: #ffffffa3; gap: 4px; cursor: pointer; }
.xb-provider-grid>button:hover { background: #ffffff1f; }
.xb-provider-grid>button[aria-pressed=true] { border-color: var(--accent-green,#ff6500); background: color-mix(in srgb,var(--accent-green,#ff6500) 16%,transparent); }
.xb-provider-grid .xb-provider-logo { width: 100%; max-width: 110px; height: 46px; }
.xb-provider-list-name { display: none; }
.xb-provider-grid.is-list { grid-template-columns: 1fr; }
.xb-provider-grid.is-list>button { flex-direction: row; justify-content: flex-start; padding-inline: 16px; gap: 16px; }
.xb-provider-grid.is-list .xb-provider-list-name { display: block; }
.xb-provider-footer { display: flex; padding: 16px; gap: 16px; background: #2e2e36; flex-shrink: 0; }
.xb-provider-footer button { width: 50%; height: 40px; border-radius: 999px; border: 1px solid #ffffff14; color: #fff; background: #ffffff14; cursor: pointer; }
.xb-provider-footer #xb-provider-apply:not(:disabled) { color: var(--xb-button-text, #23232b); background: var(--accent-green,#ff6500); }
.xb-provider-footer button:disabled { opacity: .35; cursor: default; }
.xb-lobby-providers>div:last-child>button { flex: 0 0 110px; border-radius: 3px; min-height: 56px; height: 56px; padding: 4px; background: #ffffff14; }
.xb-lobby-providers img { width: 100%; height: 46px; }
.xb-providers-grid>a { border-radius: 3px; background: #ffffff14; border-color: transparent; }
.xb-providers-grid>a:hover { background: #ffffff1f; }
.xb-provider-grid>button[hidden],.xb-card-fallback[hidden] { display: none; }
@media (max-width:1365px) { .xb-card-title { font-size: 12px; line-height: 14px; } .xb-card-toolbar .xb-icon { font-size: 14px; } }
.xb-reference-filter,.xb-reference-casino { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background: currentColor; mask: url(provider-filter.svg) center/contain no-repeat; }
.xb-reference-casino { mask-image: url(dock-casino.svg); }
.xb-provider-handle { display: none; }
#xb-providers .xb-provider-handle { appearance: none; -webkit-appearance: none; box-shadow: none; outline: none; -webkit-tap-highlight-color: transparent; }
#xb-providers .xb-provider-handle:focus-visible::after { outline: 2px solid var(--text-primary, #fff); outline-offset: 4px; }
.xb-providers.is-pointer-open .xb-provider-handle::after { outline: none; }
.xb-provider-grid .xb-provider-badge { top: 1px; right: 2px; font-size: 9px; line-height: 10px; }
html:has(#xb-providers[open]) { overflow: hidden; }
@media (max-width:600px) {
    .xb-providers { width: calc(100% - 14px); max-width: 440px; height: min(602px,80dvh); max-height: calc(100dvh - 80px); margin: auto auto 0; border: 1px solid #45454d; border-bottom: 0; border-radius: 12px 12px 0 0; background: #23232b; box-shadow: none; }
    .xb-provider-handle { display: block; flex: 0 0 28px; width: 64px; padding: 0; margin: 0 auto; border: 0; background: transparent; position: relative; touch-action: none; }
    .xb-provider-handle::after { content: ''; position: absolute; top: 14px; left: 18px; width: 28px; height: 4px; border-radius: 4px; background: var(--accent-green,#ff6500); }
    .xb-provider-heading { min-height: 40px; padding: 0 14px 12px; }
    .xb-provider-heading h2 { font-size: 14px; font-weight: 700; }
    .xb-provider-heading button { display: none; }
    .xb-provider-content { padding: 0 14px; overscroll-behavior: contain; scrollbar-color: #55555d transparent; }
    .xb-provider-content .xb-catalog-search { height: 36px; background: #33333b; }
    .xb-provider-subheading { margin: 12px 0; padding-top: 5px; border-top: 1px solid #3c3c44; font-size: 12px; }
    .xb-provider-subheading .xb-icon { font-size: 14px; }
    .xb-provider-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
    .xb-provider-grid>button { min-height: 50px; height: 50px; background: #33333b; padding: 3px; }
    .xb-provider-grid .xb-provider-logo { height: 42px; max-width: 125px; }
    .xb-provider-footer { padding: 16px 14px max(14px,env(safe-area-inset-bottom)); gap: 14px; background: #23232b; margin-top: auto; }
    .xb-provider-footer button { height: 36px; font-size: 12px; border: 0; background: #33333b; }
    .xb-provider-footer button:disabled { opacity: 1; color: #777780; }
    .xb-catalog-tabs { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
    .xb-catalog-tabs>button { min-height: 30px; padding: 6px 10px; }
    .xb-catalog-tools>button>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
    .xb-card-title { margin-bottom: 2px; }
}
@media (min-width:481px) { .xb-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width:769px) { .xb-catalog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (min-width:1025px) { .xb-catalog-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; } }
@media (prefers-reduced-motion:reduce) { .xb-card-skeleton::after,.xb-game-card.is-image-loading::after { animation: none; transform: none; } .xb-card-overlay,.xb-card-overlay .xb-card-actions button { transition: none; } }