/* ==========================================================================
   918Kaya PNG — Wallet-Style Game Lobby Shell
   Orange on black: topbar, marquee, 3-column lobby grid, balance card,
   floating download banner and fixed bottom navigation.

   Palette note: orange is the brand/accent, taken from the "Kaya" wordmark in
   the logo, and reads as "credit". Amber (--lobby-gold) is the money-out
   colour used on withdrawals — it sits far enough from the orange to stay
   readable beside it — and red (--lobby-alert) is kept ONLY for genuine
   warnings, never as decoration, so a red pixel on this page always means
   something.
   ========================================================================== */

:root {
    --lobby-orange: #ff7a18;
    --lobby-orange-deep: #b34a00;
    --lobby-orange-soft: #ffab52;
    --lobby-gold: #ffd23f;
    --lobby-alert: #ff3b30;
    --lobby-black: #000000;
    --lobby-panel: #0d0906;
    --lobby-panel-2: #181009;
    --lobby-line: rgba(255, 122, 24, 0.45);
    --lobby-text: #ffffff;
    --lobby-muted: #9a9a9a;
    --lobby-glow: 0 0 10px rgba(255, 122, 24, 0.75), 0 0 22px rgba(255, 122, 24, 0.35);
    --lobby-glow-soft: 0 0 8px rgba(255, 122, 24, 0.45);
    --topbar-h: 66px;
    --marquee-h: 30px;
    --bottomnav-h: 74px;
}

/* Page shell ------------------------------------------------------------- */
/* The font stack lives here, not only in main.css: /games/ loads lobby.css
   without main.css, and without this it fell back to the browser's default
   serif. */
body.lobby-mode {
    margin: 0;
    background: var(--lobby-black);
    color: var(--lobby-text);
    font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    padding-bottom: var(--bottomnav-h);
}

.lobby-shell {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 122, 24, 0.14), transparent 60%),
        var(--lobby-black);
}

.lobby-shell *,
.lobby-bottom-nav * {
    box-sizing: border-box;
}

/* Topbar ----------------------------------------------------------------- */
.lobby-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--topbar-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 14px;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
    border-bottom: 2px solid var(--lobby-orange);
    box-shadow: 0 2px 18px rgba(255, 122, 24, 0.35);
}

.lobby-menu-btn {
    width: 46px;
    height: 38px;
    /* The topbar sits OUTSIDE .lobby-shell, and /games/ and /h5/ do not load
       main.css - so the global border-box reset does not reach this button on
       those pages. Without this it measures 46px + 20px padding = 66px there
       and 46px on the home page. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Browser UA stylesheets set align-items:center on <button>, which beats
       the flex default of stretch. The bars are empty <span>s with no width of
       their own, so under `center` they collapse to zero width and the button
       renders as a plain orange block with no lines in it. Stretch here plus an
       explicit width below makes it independent of the UA sheet either way. */
    align-items: stretch;
    gap: 5px;
    padding: 0 10px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    box-shadow: var(--lobby-glow-soft);
    cursor: pointer;
}

.lobby-menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 2px;
    background: #1a0d03;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.lobby-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.lobby-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lobby-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.lobby-brand {
    justify-self: center;
    display: flex;
    align-items: center;
}

/* The logo GIF is a 480x480 canvas with the artwork sitting in the middle band
   only (y 129-347), so it is cropped to 2:1 here instead of being shipped as a
   square that would shrink the wordmark to nothing in a 66px topbar. cover on
   a 2:1 frame keeps the full width and trims the empty padding above and
   below. The white background was made transparent in the GIF itself, and the
   orange halo both ties the mark to the palette and softens the 1-bit alpha
   edge that GIF transparency leaves behind. */
.lobby-brand img {
    height: 54px;
    width: 112px;
    object-fit: cover;
    filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.5));
}

.lobby-partner {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 16px;
    border: 2px solid var(--lobby-orange);
    border-radius: 12px;
    background: #000;
    box-shadow: var(--lobby-glow);
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

.lobby-partner .partner-logo {
    height: 16px;
    width: auto;
}

.lobby-partner .partner-label {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.78rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 122, 24, 0.9);
}

/* Slide-out menu --------------------------------------------------------- */
.lobby-drawer {
    position: fixed;
    inset: var(--topbar-h) auto 0 0;
    width: min(300px, 84vw);
    z-index: 950;
    padding: 18px 0 100px;
    background: #080808;
    border-right: 2px solid var(--lobby-orange);
    box-shadow: 6px 0 30px rgba(255, 122, 24, 0.25);
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.lobby-drawer.is-open { transform: translateX(0); }

.lobby-drawer a,
.lobby-drawer button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 22px;
    background: none;
    border: none;
    color: #ddd;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lobby-drawer a:hover,
.lobby-drawer button:hover,
.lobby-drawer a[aria-current="page"] {
    background: rgba(255, 122, 24, 0.12);
    border-left-color: var(--lobby-orange);
    color: #fff;
}

.lobby-drawer a i,
.lobby-drawer button i { color: var(--lobby-orange); width: 20px; text-align: center; }

.lobby-backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lobby-backdrop.is-open { opacity: 1; visibility: visible; }

/* Marquee ---------------------------------------------------------------- */
.lobby-marquee {
    height: var(--marquee-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, #1a0d03 0%, #000 100%);
    border-bottom: 1px solid var(--lobby-line);
    white-space: nowrap;
}

.lobby-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 34px;
    padding-left: 100%;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
    animation: lobby-marquee 26s linear infinite;
}

.lobby-marquee-track b { color: var(--lobby-orange-soft); }

.lobby-marquee:hover .lobby-marquee-track { animation-play-state: paused; }

@keyframes lobby-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Lobby grid ------------------------------------------------------------- */
/* Height comes from the content. Forcing a viewport-height minimum here left
   a large dead band under the game grid on tall screens. */
/* 344px on the left: at 300px the transaction table's two columns could not
   hold an ID, an amount and a brand tag without the figures colliding. */
.lobby-grid {
    display: grid;
    grid-template-columns: minmax(0, 344px) minmax(0, 1fr) minmax(0, 320px);
    gap: 0;
    align-items: stretch;
}

.lobby-col {
    padding: 14px;
    min-width: 0;
}

.lobby-col--center { border-inline: 1px solid rgba(255, 255, 255, 0.14); }

/* Banner carousel -------------------------------------------------------- */
.lobby-banner {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16 / 10;
}

.lobby-banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.lobby-banner-slide.is-active { opacity: 1; }

.lobby-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lobby-banner-tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 14px 4px 20px;
    background: var(--lobby-orange);
    color: #1a0d03;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 3;
}

.lobby-banner-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 12px 8px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
    font-size: 0.68rem;
    color: #ddd;
}

.lobby-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.lobby-banner-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lobby-banner-dots button.is-active {
    background: var(--lobby-orange);
    transform: scale(1.35);
}

.lobby-promo {
    margin-top: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}

.lobby-promo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Progressive jackpot ---------------------------------------------------- */
.lobby-jackpot {
    margin-top: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--lobby-orange);
    border-radius: 14px;
    background: #050505;
    box-shadow: var(--lobby-glow), inset 0 0 18px rgba(255, 122, 24, 0.2);
    overflow: hidden;
}

.lobby-jackpot-label {
    flex: 0 0 auto;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
}

/* min-width:0 lets the figure shrink inside the flex row instead of
   overflowing the box and getting clipped as the jackpot grows. */
.lobby-jackpot-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: clamp(1rem, 1.55vw, 1.4rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 122, 24, 0.8);
    font-variant-numeric: tabular-nums;
}

/* Live transactions ------------------------------------------------------ */
.lobby-live {
    margin-top: 16px;
    border: 1px solid var(--lobby-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--lobby-panel);
}

/* Symmetric inline padding keeps the centred title clear of the LIVE badge
   instead of sliding underneath it. */
.lobby-live-head {
    position: relative;
    padding: 9px 58px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    white-space: nowrap;
    color: var(--lobby-orange);
    text-shadow: 0 0 10px rgba(255, 122, 24, 0.6);
}

.lobby-live-badge {
    position: absolute;
    top: 6px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--lobby-orange);
    color: #1a0d03;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.lobby-live-badge::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: lobby-pulse 1.4s ease-in-out infinite;
}

@keyframes lobby-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.lobby-live-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    color: #1a0d03;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.lobby-live-cols span { padding: 5px 9px; }
.lobby-live-cols span + span { border-left: 1px solid rgba(0, 0, 0, 0.3); }

/* No fixed height: the feed sizes to whatever rows it holds, and the JS keeps
   exactly five in the DOM. A pixel height had to guess the row height, and got
   it wrong once main.css's line-height:1.6 was inherited — leaving the last
   row sliced in half. */
.lobby-live-feed {
    position: relative;
    overflow: hidden;
}

/* Explicit line-height so a row measures the same regardless of what the
   surrounding stylesheet sets. */
.lobby-live-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 0.7rem;
    line-height: 1.45;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-live-row:last-child { border-bottom: none; }

.lobby-live-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px 9px;
    overflow: hidden;
    color: var(--lobby-muted);
}

.lobby-live-cell + .lobby-live-cell { border-left: 1px solid rgba(255, 255, 255, 0.06); }

/* flex:0 0 auto is the fix for the clipped figures: <b> defaults to
   flex:0 1 auto, so the amount was being squeezed and — because it also sets
   nowrap — spilled out of the cell rather than shrinking. The masked ID and
   brand are supporting detail, so they give up the space instead. */
.lobby-live-cell b {
    flex: 0 0 auto;
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Money in is orange, money out is amber — the two directions must not read
   as the same colour in a wallet layout. */
.lobby-live-cell.is-deposit b  { color: var(--lobby-orange-soft); }
.lobby-live-cell.is-withdraw b { color: var(--lobby-gold); }

.lobby-live-cell > span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-live-cell > span.lc-brand {
    flex: 0 1 auto;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: #8a8a8a;
    text-align: right;
}

/* Withdraw leads with the amount, so give it the left edge. */
.lobby-live-cell.is-withdraw { justify-content: flex-start; gap: 8px; }
.lobby-live-cell.is-withdraw .lc-brand { margin-left: auto; }

/* Status bar ------------------------------------------------------------- */
/* An explicit grid, so the four items land in two tidy rows rather than
   wrapping wherever they happen to run out of room. */
.lobby-live-status {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--lobby-line);
    background: #050505;
    font-size: 0.7rem;
    font-weight: 600;
    color: #d8d8d8;
}

.lobby-live-status span { display: inline-flex; align-items: center; gap: 5px; }
.lobby-live-status .lls-online { grid-column: 1 / -1; }
.lobby-live-status .lls-region i { color: #3aa3ff; }

.lobby-live-status .lls-region {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-live-status .lls-clock {
    color: #4da3ff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.lobby-live-status .lls-live {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.lobby-live-status .lls-live i {
    font-size: 0.46rem;
    color: var(--lobby-orange);
    animation: lobby-pulse 1.4s ease-in-out infinite;
}

.lobby-live-status .lls-online i { color: #b57cff; }

.lobby-live-status .lls-online b {
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Category tabs ---------------------------------------------------------- */
.lobby-cats {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lobby-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 104px;
    padding: 0 0 8px;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.lobby-cat:hover { transform: translateY(-3px); }
.lobby-cat[aria-selected="true"] { border-bottom-color: var(--lobby-orange); }

.lobby-cat-icon {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border: 2px solid var(--lobby-orange);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 40%, #2e1405, #000 70%);
    box-shadow: var(--lobby-glow-soft);
    font-size: 2rem;
    color: var(--lobby-orange);
    text-shadow: 0 0 12px rgba(255, 122, 24, 0.9);
}

.lobby-cat[aria-selected="true"] .lobby-cat-icon {
    box-shadow: var(--lobby-glow);
    background: radial-gradient(circle at 50% 40%, #58270a, #000 70%);
}

.lobby-cat-name {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Game grid -------------------------------------------------------------- */
.lobby-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding-top: 18px;
}

.lobby-game {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--lobby-orange);
    background: #120a04;
    box-shadow: var(--lobby-glow-soft);
    /* 4:3 to match the artwork. The old 3:4 portrait box centre-cropped every
       landscape source, which sliced the studio name off the tile — "Great
       Blue" rendered as "REAT BLU". */
    aspect-ratio: 4 / 3;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lobby-game:hover {
    transform: translateY(-6px);
    box-shadow: var(--lobby-glow);
}

.lobby-game img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lobby-game-free {
    position: absolute;
    top: 12px;
    left: -26px;
    width: 104px;
    padding: 3px 0;
    background: var(--lobby-orange);
    color: #1a0d03;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    transform: rotate(-45deg);
    z-index: 2;
}

.lobby-game-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 8px 8px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.lobby-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 13px 20px;
    border: 2px solid var(--lobby-orange);
    border-radius: 10px;
    background: linear-gradient(180deg, #1a0d03 0%, #000 100%);
    box-shadow: var(--lobby-glow-soft);
    color: #fff;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.lobby-viewall:hover { transform: translateY(-2px); box-shadow: var(--lobby-glow); }

@media (prefers-reduced-motion: reduce) {
    .lobby-viewall:hover { transform: none; }
}

/* Account panel ---------------------------------------------------------- */
.lobby-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lobby-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    border: 2px solid var(--lobby-orange);
    border-radius: 12px;
    background: #000;
    box-shadow: var(--lobby-glow-soft), inset 0 0 14px rgba(255, 122, 24, 0.18);
    color: #fff;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.lobby-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--lobby-glow), inset 0 0 20px rgba(255, 122, 24, 0.35);
}

.lobby-balance {
    margin-top: 18px;
}

.lobby-balance-label {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lobby-balance-value {
    margin: 6px 0 14px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 122, 24, 0.55);
    font-variant-numeric: tabular-nums;
}

.lobby-limits {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.9;
    color: #eee;
}

.lobby-wallet {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.lobby-wallet .lobby-btn {
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 16px;
}

.lobby-wallet .lobby-btn i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 36px;
    border: 2px solid var(--lobby-orange);
    border-radius: 8px;
    background: #1a0d03;
    font-size: 1.15rem;
    color: var(--lobby-orange);
}

/* Action prompt modal ---------------------------------------------------- */
.lobby-prompt {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lobby-prompt.is-open { opacity: 1; visibility: visible; }

.lobby-prompt-box {
    position: relative;
    width: min(430px, 100%);
    padding: 30px 26px 22px;
    border: 2px solid var(--lobby-orange);
    border-radius: 16px;
    background: linear-gradient(180deg, #150c05 0%, #050505 100%);
    box-shadow: var(--lobby-glow);
    text-align: center;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.25s ease;
}

.lobby-prompt.is-open .lobby-prompt-box { transform: none; }

.lobby-prompt-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.lobby-prompt-close:hover { color: #fff; }

.lobby-prompt-title {
    margin: 0 0 10px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 122, 24, 0.6);
}

.lobby-prompt-body {
    margin: 0 0 20px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: #c4c4c4;
}

.lobby-prompt-actions {
    display: grid;
    gap: 10px;
}

.lobby-prompt-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border: 2px solid var(--lobby-orange);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lobby-prompt-cta.is-primary {
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    box-shadow: var(--lobby-glow-soft);
    color: #1a0d03;
}

.lobby-prompt-cta:hover { box-shadow: var(--lobby-glow); }

.lobby-prompt-note {
    margin: 16px 0 0;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: #7a7a7a;
}

/* Refresh spin ----------------------------------------------------------- */
#lobbyRefresh.is-spinning i { animation: lobby-spin 0.7s linear; }

@keyframes lobby-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Scroll cue ------------------------------------------------------------- */
.lobby-scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: #050505;
    color: var(--lobby-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lobby-scroll-cue:hover { color: #fff; }

.lobby-scroll-cue i { animation: lobby-bob 1.8s ease-in-out infinite; }

@keyframes lobby-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Focus visibility ------------------------------------------------------- */
.lobby-shell a:focus-visible,
.lobby-shell button:focus-visible,
.lobby-topbar button:focus-visible,
.lobby-drawer a:focus-visible,
.lobby-bottom-nav button:focus-visible,
.lobby-bottom-nav a:focus-visible,
.lobby-prompt button:focus-visible,
.lobby-prompt a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Bottom nav ------------------------------------------------------------- */
.lobby-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 890;
    height: var(--bottomnav-h);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: linear-gradient(180deg, #0d0703 0%, #000 100%);
    border-top: 2px solid var(--lobby-orange);
    box-shadow: 0 -2px 20px rgba(255, 122, 24, 0.35);
}

.lobby-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: none;
    color: #bbb;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lobby-nav-item i {
    font-size: 1.5rem;
    color: var(--lobby-orange);
    text-shadow: 0 0 12px rgba(255, 122, 24, 0.8);
    transition: transform 0.2s ease;
}

.lobby-nav-item:hover { color: #fff; }
.lobby-nav-item:hover i { transform: translateY(-3px); }
.lobby-nav-item[aria-current="page"] { color: #fff; }

.lobby-nav-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 26px);
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--lobby-orange);
    color: #1a0d03;
    font-size: 0.64rem;
    font-weight: 800;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
    .lobby-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
    .lobby-col--right {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    .lobby-col--center { border-right: none; }
    .lobby-wallet { grid-template-columns: repeat(3, 1fr); }
    .lobby-wallet .lobby-btn { justify-content: center; }

    /* Narrower column: drop the brand tag before the amount is at risk. */
    .lobby-live-cell > span.lc-brand { display: none; }
}

@media (max-width: 760px) {
    :root { --topbar-h: 58px; --bottomnav-h: 66px; }

    .lobby-grid { grid-template-columns: minmax(0, 1fr); }
    .lobby-col--center { border-inline: none; border-block: 1px solid rgba(255, 255, 255, 0.14); }
    .lobby-col--right { border-top: none; }

    .lobby-brand img { height: 44px; }
    .lobby-partner { padding: 5px 10px; }
    .lobby-partner .partner-label { font-size: 0.62rem; }

    .lobby-cats { gap: 6px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
    .lobby-cat { width: 76px; flex: 0 0 auto; }
    .lobby-cat-icon { width: 62px; height: 62px; font-size: 1.4rem; }
    .lobby-cat-name { font-size: 0.6rem; }

    .lobby-games { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .lobby-wallet { grid-template-columns: 1fr; }
    .lobby-wallet .lobby-btn { justify-content: flex-start; }
    .lobby-nav-item { font-size: 0.54rem; }
    .lobby-nav-item i { font-size: 1.25rem; }
    .lobby-nav-badge { right: calc(50% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .lobby-marquee-track,
    .lobby-live-badge::after,
    .lobby-scroll-cue i,
    #lobbyRefresh.is-spinning i { animation: none; }
    .lobby-game:hover,
    .lobby-cat:hover,
    .lobby-btn:hover { transform: none; }
    .lobby-prompt-box { transition: none; transform: none; }
}

/* The lobby is now the whole page: the marketing sections it used to sit
   above have been removed, so only the widgets main.css still owns
   (skip link, modal) need adjusting here. */
.lobby-mode .live-chat-widget,
.lobby-mode .back-to-top,
.lobby-mode .sticky-download-bar,
.lobby-mode .header,
.lobby-mode .nav-backdrop { display: none !important; }
/* Support modal (markup and base styles still come from main.css) ---------- */
.lobby-mode .modal-content {
    background: linear-gradient(180deg, #150c05 0%, #050505 100%);
    border: 2px solid var(--lobby-orange);
    box-shadow: var(--lobby-glow);
}

.lobby-mode .modal-header {
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    color: #1a0d03;
}

.lobby-mode .modal-body p { color: #c4c4c4; }

.lobby-mode .contact-option {
    background: var(--lobby-panel);
    border: 1px solid var(--lobby-line);
    color: var(--lobby-text);
}

.lobby-mode .contact-option:hover {
    border-color: var(--lobby-orange);
    box-shadow: var(--lobby-glow-soft);
}

.lobby-mode .contact-info h4 { color: #fff; }
.lobby-mode .contact-info p { color: var(--lobby-muted); }
/* ==========================================================================
   Read More toggle + the article it reveals
   ========================================================================== */

.lobby-readmore {
    display: flex;
    justify-content: center;
    padding: 22px 14px 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lobby-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 34px;
    border: 2px solid var(--lobby-orange);
    border-radius: 999px;
    background: linear-gradient(180deg, #1a0d03 0%, #000 100%);
    box-shadow: var(--lobby-glow-soft);
    color: #fff;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.lobby-readmore-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--lobby-glow);
}

.lobby-readmore-btn i { transition: transform 0.3s ease; }
.lobby-readmore-btn.is-open i { transform: rotate(180deg); }

/* Swap the label between states */
.lobby-readmore-btn .rm-close { display: none; }
.lobby-readmore-btn.is-open .rm-open { display: none; }
.lobby-readmore-btn.is-open .rm-close { display: inline; }

.lobby-article { border-top: 2px solid var(--lobby-orange); }

/* --------------------------------------------------------------------------
   Knowledge panel: the tabbed article revealed by Read More.
   Its own layout system — it deliberately does not reuse main.css sections.
   -------------------------------------------------------------------------- */

.kb {
    display: block;
    padding: 0 0 40px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 122, 24, 0.13), transparent 62%),
        var(--lobby-black);
    color: #c9c9c9;
    font-size: 0.95rem;
    line-height: 1.7;
}

.kb-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Masthead --------------------------------------------------------------- */
.kb-head {
    padding: 44px 0 32px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 5px 15px;
    border: 1px solid var(--lobby-line);
    border-radius: 999px;
    background: rgba(255, 122, 24, 0.12);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kb-eyebrow i { color: var(--lobby-orange); }

.kb-head h1 {
    max-width: 20ch;
    margin: 0 auto 14px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 0 22px rgba(255, 122, 24, 0.35);
}

.kb-lede {
    max-width: 62ch;
    margin: 0 auto;
    color: #b0b0b0;
}

.kb-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.kb-stats li {
    flex: 1 1 130px;
    max-width: 190px;
    padding: 12px 10px;
    border: 1px solid var(--lobby-line);
    border-radius: 12px;
    background: var(--lobby-panel);
}

.kb-stats b {
    display: block;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--lobby-orange-soft);
    line-height: 1.2;
}

.kb-stats span {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8f8f8f;
}

/* Tab layout ------------------------------------------------------------- */
.kb-body {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 30px;
    padding: 30px 0 0;
}

.kb-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-h) + 12px);
}

.kb-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: #a8a8a8;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kb-tab i { width: 18px; text-align: center; color: #6a6a6a; transition: color 0.2s ease; }

.kb-tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.kb-tab[aria-selected="true"] {
    background: rgba(255, 122, 24, 0.13);
    border-color: var(--lobby-line);
    color: #fff;
}

.kb-tab[aria-selected="true"] i { color: var(--lobby-orange); }

.kb-panel { animation: kb-fade 0.25s ease; }

@keyframes kb-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Panel typography ------------------------------------------------------- */
.kb-panel h2 {
    margin: 0 0 10px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
    font-weight: 800;
    color: #fff;
}

.kb-panel h3 {
    margin: 30px 0 10px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
}

.kb-panel p { margin: 0 0 14px; }

.kb-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.kb-list li {
    position: relative;
    padding: 0 0 10px 24px;
    font-size: 0.93rem;
}

.kb-list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lobby-orange);
    box-shadow: var(--lobby-glow-soft);
}

.kb-list b { color: #fff; }

.kb-note {
    display: flex;
    gap: 11px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid var(--lobby-line);
    border-left: 3px solid var(--lobby-orange);
    border-radius: 10px;
    background: rgba(255, 122, 24, 0.07);
    font-size: 0.88rem;
    color: #c9c9c9;
}

.kb-note i { flex: 0 0 auto; color: var(--lobby-orange); margin-top: 3px; }

/* The note is a flex row so the icon can sit beside the copy. That makes every
   child a flex item — including each <b> and each bare text run — so a note
   containing inline markup gets spread out into columns. Wrapping the copy in
   .kb-note-text keeps it as one flex item that lays out as normal text. */
.kb-note-text { flex: 1 1 auto; min-width: 0; }

/* Feature grid ----------------------------------------------------------- */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin: 22px 0 8px;
}

.kb-card {
    padding: 18px 16px;
    border: 1px solid var(--lobby-line);
    border-radius: 12px;
    background: var(--lobby-panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-card:hover { border-color: var(--lobby-orange); box-shadow: var(--lobby-glow-soft); }

.kb-card i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    color: #1a0d03;
    font-size: 1.05rem;
}

.kb-card h3 { margin: 0 0 6px; font-size: 1rem; }
.kb-card p { margin: 0; font-size: 0.86rem; color: #a5a5a5; }

/* Download cards --------------------------------------------------------- */
.kb-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.kb-dl-card {
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    border: 1px solid var(--lobby-line);
    border-radius: 14px;
    background: var(--lobby-panel);
}

.kb-dl-card.is-primary {
    border-color: var(--lobby-orange);
    box-shadow: var(--lobby-glow-soft);
    background: linear-gradient(180deg, #160d05 0%, var(--lobby-panel) 100%);
}

.kb-dl-card > header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
}

.kb-dl-card > header > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--lobby-line);
    border-radius: 11px;
    background: #000;
    color: var(--lobby-orange);
    font-size: 1.35rem;
}

.kb-dl-card h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.kb-dl-card header span { font-size: 0.78rem; color: #8f8f8f; }

.kb-dl-card ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
}

.kb-dl-card ul li {
    position: relative;
    padding: 4px 0 4px 22px;
    color: #b5b5b5;
}

.kb-dl-card ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--lobby-orange);
    font-weight: 700;
}

.kb-creds {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: #000;
    font-size: 0.85rem;
}

.kb-creds dt { color: #8f8f8f; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.kb-creds dd { margin: 2px 0 9px; color: #fff; font-weight: 700; }
.kb-creds dd:last-child { margin-bottom: 0; }

.kb-meta { margin: 10px 0 0 !important; font-size: 0.75rem; color: #7d7d7d; text-align: center; }

/* Buttons ---------------------------------------------------------------- */
.kb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 12px 18px;
    border: 2px solid var(--lobby-orange);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kb-btn.is-primary {
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    box-shadow: var(--lobby-glow-soft);
    color: #1a0d03;
}

.kb-btn:hover { box-shadow: var(--lobby-glow); transform: translateY(-2px); }

.kb-btn.is-disabled {
    border-color: #3a3a3a;
    color: #7d7d7d;
    cursor: default;
    pointer-events: none;
}

/* Install steps ---------------------------------------------------------- */
.kb-steps {
    counter-reset: kbstep;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.kb-steps li {
    counter-increment: kbstep;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    padding: 18px 18px 18px 68px;
    border: 1px solid var(--lobby-line);
    border-radius: 14px;
    background: var(--lobby-panel);
}

.kb-steps li::before {
    content: counter(kbstep);
    position: absolute;
    left: 18px;
    top: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    box-shadow: var(--lobby-glow-soft);
    color: #1a0d03;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-weight: 800;
    font-size: 0.95rem;
}

/* A step with no image drops to a single full-width column, rather than leaving
   the 210px art column reserved and empty. Every step currently has a card, so
   nothing uses this today - it is here so adding a step without one does not
   silently render squashed. */
.kb-steps li.is-plain { grid-template-columns: minmax(0, 1fr); }

.kb-steps h3 { margin: 0 0 5px; font-size: 1rem; }
.kb-steps p { margin: 0 0 9px; font-size: 0.88rem; color: #a5a5a5; }
.kb-steps p:last-child { margin-bottom: 0; }

/* A step that needs to spell out a sequence (Settings > Apps > ...) carries a
   short nested list. It inherits .kb-steps p sizing so it does not shout over
   the step heading. */
.kb-steps .kb-substeps { margin: 0; padding: 0 0 0 18px; }
.kb-steps .kb-substeps li {
    display: list-item;
    list-style: disc;
    counter-increment: none;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 0.88rem;
    color: #a5a5a5;
}
.kb-steps .kb-substeps li::before { content: none; }
.kb-steps .kb-substeps li::marker { color: var(--lobby-orange); }
.kb-steps .kb-substeps b { color: #fff; }

.kb-steps img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Games ------------------------------------------------------------------ */
.kb-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.kb-game {
    overflow: hidden;
    border: 1px solid var(--lobby-line);
    border-radius: 14px;
    background: var(--lobby-panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-game:hover { border-color: var(--lobby-orange); box-shadow: var(--lobby-glow-soft); }

.kb-game img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.kb-game > div { padding: 14px 15px; }
.kb-game h3 { margin: 0 0 3px; font-size: 1rem; }
.kb-game p { margin: 0 0 7px; font-size: 0.8rem; color: #8f8f8f; }
.kb-rating { font-size: 0.82rem; color: var(--lobby-orange-soft); letter-spacing: 0.04em; }

/* Tables ----------------------------------------------------------------- */
.kb-table-wrap {
    margin: 18px 0;
    overflow-x: auto;
    border: 1px solid var(--lobby-line);
    border-radius: 12px;
}

.kb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
    background: var(--lobby-panel);
}

.kb-table caption {
    padding: 11px 15px;
    background: #000;
    color: #8f8f8f;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
}

.kb-table th,
.kb-table td {
    padding: 11px 15px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

.kb-table thead th {
    background: rgba(255, 122, 24, 0.13);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.kb-table tbody th { color: #fff; font-weight: 600; white-space: nowrap; }
.kb-table td { color: #b5b5b5; }
.kb-table em { color: var(--lobby-orange-soft); font-style: normal; }

/* RTP figures ------------------------------------------------------------ */
.kb-rtp {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #fff !important;
}

/* Colour carries emphasis only — the number itself is always the message,
   so this stays readable for anyone who cannot distinguish the tints. */
.kb-rtp.is-high { color: var(--lobby-orange) !important; }
.kb-rtp.is-low  { color: var(--lobby-gold) !important; }

.kb-rtp-table tbody tr:hover { background: rgba(255, 122, 24, 0.06); }

/* FAQ -------------------------------------------------------------------- */
.kb-faq { margin-top: 22px; }

.kb-faq details {
    margin-bottom: 10px;
    border: 1px solid var(--lobby-line);
    border-radius: 11px;
    background: var(--lobby-panel);
    overflow: hidden;
}

.kb-faq details[open] { border-color: var(--lobby-orange); }

.kb-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
}

.kb-faq summary::-webkit-details-marker { display: none; }

.kb-faq summary::after {
    content: "\002B";
    flex: 0 0 auto;
    color: var(--lobby-orange);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.kb-faq details[open] summary::after { content: "\2212"; }

.kb-faq details p {
    margin: 0;
    padding: 0 17px 16px;
    font-size: 0.88rem;
    color: #a8a8a8;
}

.kb-faq details b { color: #fff; }

/* Compact footer --------------------------------------------------------- */
.kb-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
    padding: 26px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Width-constrained, not height: the img carries the mark's intrinsic 240x146
   so the browser can reserve the right box before it loads. */
.kb-foot-brand img { display: block; margin-bottom: 9px; width: 170px; height: auto; }
.kb-foot-brand p { margin: 0; font-size: 0.85rem; color: #8f8f8f; max-width: 44ch; }

.kb-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kb-foot-actions .kb-btn { margin-top: 0; }

.kb-foot-legal {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: #6f6f6f;
    text-align: center;
}

/* Focus ------------------------------------------------------------------ */
.kb a:focus-visible,
.kb button:focus-visible,
.kb summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
    .kb-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .kb-rail {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        scrollbar-width: none;
    }

    .kb-rail::-webkit-scrollbar { display: none; }
    .kb-tab { flex: 0 0 auto; padding: 10px 14px; }
    .kb-tab i { display: none; }

    .kb-steps li { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 16px 62px; }
    .kb-steps img { max-width: 320px; }

    .kb-foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .kb-inner { padding: 0 14px; }
    .kb-head { padding: 30px 0 24px; }
    .kb-stats li { flex-basis: calc(50% - 6px); }
    .kb-game img { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .kb-panel { animation: none; }
    .kb-btn:hover { transform: none; }
}

/* ==========================================================================
   Shared utilities + support modal
   Self-contained so pages can load lobby.css without main.css.
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 1300;
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    background: var(--lobby-orange);
    color: #1a0d03;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus { top: 0; }

/* Support modal ---------------------------------------------------------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
}

.modal-content {
    width: min(500px, calc(100% - 40px));
    margin: 12vh auto 0;
    overflow: hidden;
    border: 2px solid var(--lobby-orange);
    border-radius: 16px;
    background: linear-gradient(180deg, #150c05 0%, #050505 100%);
    box-shadow: var(--lobby-glow);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: linear-gradient(180deg, var(--lobby-orange) 0%, var(--lobby-orange-deep) 100%);
    color: #1a0d03;
}

.modal-header h3 {
    margin: 0;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
}

.modal-header .close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #1a0d03;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.modal-header .close:hover { background: rgba(0, 0, 0, 0.2); }

.modal-body { padding: 22px 20px; }
.modal-body > p { margin: 0 0 16px; text-align: center; color: #c4c4c4; }

.contact-options { display: grid; gap: 11px; }

.contact-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--lobby-line);
    border-radius: 11px;
    background: var(--lobby-panel);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-option:hover { border-color: var(--lobby-orange); box-shadow: var(--lobby-glow-soft); }

.contact-icon { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
.contact-info h4 { margin: 0 0 2px; font-size: 0.98rem; color: #fff; }
.contact-info p { margin: 0; font-size: 0.82rem; color: var(--lobby-muted); }