/* /live-casino lobby — layout transcribed from the reference stylesheet (x10tn.net /assets/style-*.css):
   .casinolive-lobby-page-mobile__*, .livecasino-menu-mobile__*, .provider-block-row__*, .slots-icon-mobile__*.
   Values are the reference's rem values converted at 16px. Marked "inferred" where the reference gives no value. */
/* Proxima Nova weights as the reference declares them (400/700/800/900; its 600 text uses the 700 cut). Files live in assets/fonts/x10tn/. */
@font-face { font-family: "LH Proxima"; src: url(/assets/fonts/x10tn/proximanova_regular-45mnJ3qM.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LH Proxima"; src: url(/assets/fonts/x10tn/proximanova_bold-ZY2eH_dj.otf) format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "LH Proxima"; src: url(/assets/fonts/x10tn/proximanova_extrabold-BXp1-O33.otf) format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "LH Proxima"; src: url(/assets/fonts/x10tn/proximanova_black-B3gicTub.ttf) format("truetype"); font-weight: 900; font-display: swap; }
.lh { --lh-bg: #001021; --lh-panel: #132c46; --lh-accent: #e9a722; --lh-grad-a: #193654;
      box-sizing: border-box; width: 100%; color: #fff; background: var(--lh-bg);
      font-family: "LH Proxima", Inter, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; padding-bottom: 56px; }  
.lh *, .lh *::before, .lh *::after { box-sizing: border-box; }
.lh a { color: inherit; text-decoration: none; }
.lh-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* search: height 2.5rem, bar radius .625rem on #132c46, input .875rem/700 */
.lh-search { height: 40px; padding: 0 10px; margin-top: 10px; }
.lh-search-bar { display: flex; align-items: center; overflow: hidden; width: 100%; height: 100%; border-radius: 10px; background: var(--lh-panel); padding-inline-end: 20px; }
.lh-search-input { flex-grow: 1; min-width: 0; height: 100%; padding: 10px 20px; border: 0; outline: 0; background: var(--lh-panel); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1; }
.lh-search-input::placeholder { color: #fff; opacity: 1; }
.lh-search-input::-webkit-search-cancel-button { display: none; }
.lh-search-btn { display: flex; align-items: center; justify-content: center; border: 0; background: var(--lh-panel); color: var(--lh-accent); padding: 0; cursor: pointer; }
.lh-search-ico { width: 20px; height: 20px; stroke-width: 2.4; }

/* categories: title 2.625rem/.75rem/900; tiles min-height 3.125rem, radius .3125rem, gradient, gap .3125rem */
.lh-cats { padding: 10px; display: flex; box-sizing: border-box; }
.lh-menu { display: flex; flex-direction: column; width: 100%; }
.lh-menu-title { min-height: 42px; max-height: 42px; display: flex; align-items: center; padding-inline-start: 10px; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.lh-menu-items { display: flex; gap: 5px; }
.lh-cat { position: relative; width: 100%; height: 100%; min-height: 50px; max-height: 50px; display: flex; align-items: center; gap: 10px; padding-inline-start: 10px; border-radius: 5px; overflow: hidden;
          background: linear-gradient(246.89deg, var(--lh-grad-a) -.15%, var(--lh-bg) 102.08%); border: 1px solid transparent; }
[dir=rtl] .lh-cat { background: linear-gradient(-246.89deg, var(--lh-grad-a) -.15%, var(--lh-bg) 102.08%); }
.lh-cat-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; color: var(--lh-accent); }
.lh-cat-ico svg { width: 30px; height: 30px; }
.lh-cat-text { color: #fff; font-weight: 800; font-size: 12px; line-height: 12px; max-width: 54px; text-transform: uppercase; }
.lh-cat.is-active { box-shadow: inset 0 -2px 0 var(--lh-accent); }   /* inferred: the reference's active-category style is not in its stylesheet */

/* provider rows */
.lh-providers { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.lh-row { font-size: 12px; font-weight: 700; }
.lh-row-title { display: flex; align-items: center; margin-bottom: 5px; padding: 10px 15px 10px 10px; font-size: 18px; font-weight: 800; text-transform: uppercase; }
[dir=rtl] .lh-row-title { padding: 10px 10px 10px 15px; }
.lh-row-name { position: relative; display: flex; align-items: center; min-height: 24px; line-height: 24px; }
.lh-row-name::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translate(-50%, -50%); display: flex; height: 1px; width: 100%; background: linear-gradient(90deg, #fff0 .49%, #fff 47.67%, #fff0); }
.lh-row-link { display: flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -10px; justify-content: flex-end; margin-inline-start: auto; font-size: 12px; background: none; border: 0; color: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.lh-row-num { color: var(--lh-accent); text-transform: capitalize; }
.lh-row-arrow { width: 22px; height: 22px; }
[dir=rtl] .lh-row-arrow { transform: scaleX(-1); }
.lh-row-items { display: flex; gap: 5px; overflow: auto; padding-inline-start: 10px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.lh-row-items::-webkit-scrollbar { display: none; }

/* game slot: flex 0 0 6.875rem, image aspect .917, radius .625rem, name .75rem/600 */
.lh-slot { flex: 0 0 110px; position: relative; width: 110px; min-width: 0; max-width: 110px; }
.lh-slot:last-child { margin-inline-end: 10px; }
.lh .lh-slot .x10-game-link { display: flex; flex-direction: column; width: 100%; height: auto; background: none; border-radius: 15px; box-shadow: none; transform: none; overflow: visible; color: #fff; cursor: pointer; }
.lh-slot-img { position: relative; width: 100%; aspect-ratio: .917; overflow: hidden; display: flex; flex-direction: column; border-radius: 10px; margin: 0 auto 5px; background: var(--lh-panel); }
.lh-slot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease-in-out; }
.lh-slot-img img.lh-pending { opacity: 0; }
.lh-slot-name { display: flex; align-items: flex-start; font-weight: 600; font-size: 12px; line-height: 15px; overflow-wrap: anywhere; }
.lh-slot-name::first-letter { text-transform: uppercase; }
.lh-slot-badge { position: absolute; top: 5px; inset-inline-start: 5px; z-index: 1; padding: 2px 5px; border-radius: 4px; background: #e53935; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.lh-more { flex: 0 0 110px; width: 110px; height: fit-content; aspect-ratio: .917; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; margin-inline-end: 10px; background: var(--lh-panel); border-radius: 10px; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 700; color: #fff; border: 0; cursor: pointer; }

/* provider "View All" view: the same slots wrapped into a grid */
.lh-view { padding: 0 10px; }
.lh-view-head { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.lh-back { border: 0; border-radius: 10px; background: var(--lh-panel); color: #fff; font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; padding: 10px 14px; cursor: pointer; }
.lh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px 5px; }
.lh-grid .lh-slot { flex: none; width: 100%; max-width: none; }
.lh-grid .lh-slot:last-child { margin-inline-end: 0; }
.lh-load { display: flex; justify-content: center; padding: 16px 0; }
.lh-btn { min-width: 160px; height: 30px; padding: 0 7px; border: 0; border-radius: 10px; background: var(--lh-accent); color: #fff; font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; cursor: pointer; }
.lh-btn:active, .lh-more:active { transform: translateY(2px); }

.lh-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 12px; color: rgba(255, 255, 255, .7); text-align: center; font-size: 14px; }
.lh-state[hidden], .lh [hidden] { display: none !important; }
.lh-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--lh-accent); animation: lh-spin .8s linear infinite; }
@keyframes lh-spin { to { transform: rotate(360deg); } }
.lh :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lh-spinner { animation: none; } .lh-slot-img img { transition: none; } }

[dir=rtl] .lh, [dir=rtl] .lh * { letter-spacing: 0; }

/* guest chrome: reference header = 70px install banner + 54px logo/auth row (shared home chrome), then the 40px promo strip and 10px gap */
.lh-app { display: none; }
body.x10-lh-guest .lh { padding-top: 54px; }
body.x10-lh-guest.x10-lh-banner .lh { padding-top: 124px; }
body.x10-lh-guest .lh-search { margin-top: 0; }
body.x10-lh-banner .x10h-top { top: 70px; }
body.x10-lh-banner .lh-app { display: grid; }
.lh-app { position: fixed; top: 0; inset-inline: 0; z-index: 1001; height: 70px; padding: 10px; box-sizing: border-box; grid-template-columns: 30px 50px minmax(0, 1fr) 80px; align-items: center; column-gap: 10px; background: #fff; color: #001021;
          font-family: "LH Proxima", Inter, "Segoe UI", Roboto, Arial, sans-serif; overflow: hidden; }
.lh-app-close { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lh-app-icon { width: 50px; height: 50px; border-radius: 8px; object-fit: contain; background: #001021; }
.lh-app-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lh-app-info strong { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-app-info span { font-size: 10px; font-weight: 700; color: #0f2032; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lh-app-btn { width: 80px; height: 30px; border: 0; border-radius: 10px; background: #019cf1; color: #fff; font: 700 12px/1 "LH Proxima", Inter, sans-serif; text-transform: uppercase; cursor: pointer; padding: 0 10px; }
.lh-app-btn:active { opacity: .85; transform: translateY(1px); }

/* category tiles: gold icon, faint decorative copy of the same original glyph at the far edge, no active underline (the reference has none) */
.lh-cat-art { position: absolute; top: 0; inset-inline-end: 0; width: 50px; height: 50px; color: #fff; opacity: .1; pointer-events: none; }
.lh-cat-art svg { width: 50px; height: 50px; }
[dir=rtl] .lh-cat-art { transform: scaleX(-1); }
.lh-cat.is-active { box-shadow: none; }
.lh-cat-ico { border: 1.5px solid var(--lh-accent); border-radius: 50%; padding: 3px; flex-basis: 30px; }

/* provider heading icon: 24px neutral monogram (the reference shows each provider's own emblem, which we do not ship) */
.lh-row-icon { flex: 0 0 24px; width: 24px; height: 24px; margin-inline-end: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lh-panel); color: var(--lh-accent); font-size: 12px; font-weight: 800; }

/* reference logo: 113x20 vector (project asset assets/images/x10tn/menu/logo.svg) */
body.x10-lh-guest .x10h-top__logo img { height: 20px; width: 113px; }

/* subtle "Popular" marker on operator-featured / verified-title games (top corner opposite the LIVE badge; card size unchanged) */
.lh-slot-pop { position: absolute; top: 5px; inset-inline-end: 5px; z-index: 1; padding: 2px 5px; border-radius: 4px; background: rgba(0, 16, 33, .78); color: var(--lh-accent); border: 1px solid rgba(233, 167, 34, .6); font-size: 9px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }