/* ==========================================================================
   LB SHELL — flex-row app frame (ported from the Shuffle layout model)
   --------------------------------------------------------------------------
   The old shell pinned .topbar/.stage/.site-footer with position:fixed and
   re-derived --sidebar-w / --chat-dock-w in ~12 separate calc() rules. Any one
   of them drifting shoved the logo sideways or left a gap beside the dock.

   Here the shell is a plain flex row and the panels are real in-flow siblings:
     .lb-shell            display:flex
       .sidebar           flex:0 0 auto      (width animates)
       .lb-col            flex:1 1 0         (absorbs whatever is left)
         .topbar          sticky, width:100%
         .lb-scroll       the scroll container
       .chat-dock         flex:0 0 auto, hidden via negative margin-right

   Opening the dock is ONE property (margin-right) — the column reflows for
   free, so nothing else needs to know a panel exists.
   ========================================================================== */

:root{
  --lb-nav-w:64px;
  /* 235px plus the existing 12px header offset preserves the full 44px menu
     target and 177.5px Packs | Battles pair (two equal 88.75px controls). */
  --lb-nav-open-w:235px;
  --lb-aside-w:360px;

  --lb-anim-fast:.1s;
  --lb-anim:.2s;
  --lb-anim-med:.25s;
  --lb-ease-modal:cubic-bezier(.16,1,.3,1);
  --lb-ease-standard:cubic-bezier(.4,0,.2,1);

  --lb-press:scale(.97);
  --lb-press-sm:scale(.95);
  --lb-press-lg:scale(.9);
  --lb-lift:-8px;
}

/* ---------- base (mobile): shell is a plain block, body scrolls ---------- */
.lb-shell{display:flex;position:relative;width:100%}
.lb-col{display:flex;flex-direction:column;position:relative;width:100%;flex:1 1 0%;min-width:0}
.lb-scroll{overflow-x:hidden;width:100%}

/* ---------- wider tablets: persistent icon rail + overlay expansion -------
   Shuffle keeps a 64px navigation rail in the layout from tablet width upward,
   then floats the labelled navigation over the content when it opens. Keep the
   same interaction here from 992-1079px: the page always owns the same 64px
   gutter, so expanding to 235px never reflows cards, games, or the top bar. */
@media (min-width:992px) and (max-width:1079px){
  body{padding-bottom:16px}
  .lb-shell{padding-left:var(--lb-nav-w)}
  .topbar{left:var(--lb-nav-w)}
  .botnav{display:none}
  .topbar .tb-chat{display:grid}

  .sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;
    z-index:96;width:var(--lb-nav-w);height:100vh;padding:14px 6px;gap:8px;
    align-items:center;border-radius:0;background:var(--rail);
    border-right:1px solid var(--lb-line,#2A2E38);overflow:hidden;transform:none;
    box-shadow:none;will-change:width;
    transition:width var(--lb-anim-med) var(--lb-ease-modal),padding var(--lb-anim-med) var(--lb-ease-modal),box-shadow var(--lb-anim-med)}
  /* app.css remembers the desktop collapse preference with a more-specific
     body selector. At tablet width that preference must never turn the compact
     rail back into the old 224px drawer, so the tablet-closed state owns the
     final geometry explicitly. */
  body:not(.lb-rail-open) .sidebar{width:var(--lb-nav-w);padding:14px 6px;
    align-items:center;transform:none}
  body.lb-rail-open .sidebar{width:var(--lb-nav-open-w);padding:14px 10px;align-items:stretch;
    box-shadow:18px 0 48px -20px rgba(0,0,0,.8)}

  /* The compact rail is still real navigation, so it stays exposed to the
     accessibility tree. Only the labelled expansion becomes a modal drawer. */
  .sidebar .sb-getapp,.sidebar .sb-logo,.sidebar .sb-brand{display:none}
  body:not(.lb-rail-open) .sidebar .sb-head{display:contents}
  body.lb-rail-open .sidebar .sb-head{display:flex;align-items:center;gap:6px;
    width:100%;height:calc(var(--topbar-h) - 14px);min-height:0;margin:0 0 12px;padding:0;border:0;transform:translateX(-12px)}
  .sidebar .sb-toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;
    min-height:44px;margin:0;border:0;border-radius:6px;background:transparent;
    color:var(--chrome-icon);box-shadow:none}
  body.lb-rail-open .sidebar .sb-toggle{flex-basis:44px;width:44px;height:44px;min-height:44px}
  .sidebar .sb-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  /* Packs | Battles retains the same artwork and selected-half treatment as
     desktop. It stacks as two 50px icon targets in the compact rail and unfolds
     horizontally beside the menu control in the overlay. */
  .sidebar .sb-seg{--sb-selected-base:var(--lb-sidebar-selected-base,var(--lb-selection-fill,var(--lb-control-selected)));
    --sb-selected-navy:var(--lb-sidebar-selected-navy,var(--lb-rail));
    --sb-gray-base:var(--lb-sidebar-gray-base,var(--lb-surface-2));--sb-gray-1:var(--lb-sidebar-gray-1,var(--lb-surface-2));--sb-gray-2:var(--lb-sidebar-gray-2,var(--lb-surface-3));--sb-gray-3:var(--lb-sidebar-gray-3,var(--lb-surface-4));
    position:relative;border:1px solid var(--lb-sidebar-seg-border,var(--lb-line));border-radius:6px;background:var(--lb-sidebar-seg,var(--sb-gray-base));box-shadow:none;overflow:hidden}
  #sidebar .sb-giraffe-half{--sb-base:var(--sb-gray-base);--sb-dark-1:var(--sb-gray-base);--sb-dark-2:var(--sb-gray-base);--sb-dark-3:var(--sb-gray-base);--sb-dark-4:var(--sb-gray-base)}
  #sidebar .sb-seg:has(.sb-seg-btn[data-nav="packs"].is-active) .sb-giraffe-left,
  #sidebar .sb-seg:has(.sb-seg-btn[data-nav="battles"].is-active) .sb-giraffe-right{
    --sb-base:var(--sb-selected-base);--sb-dark-1:var(--sb-selected-navy);--sb-dark-2:var(--sb-selected-navy);--sb-dark-3:var(--sb-selected-navy);--sb-dark-4:var(--sb-selected-navy)}
  #sidebar #sbGiraffePaths path{transition:none}

  body:not(.lb-rail-open) .sidebar .sb-seg{display:flex;flex-direction:column;flex:0 0 102px;
    width:50px;height:102px;margin:0 auto;padding:1px 0}
  body:not(.lb-rail-open) #sidebar .sb-seg-art{display:block;position:absolute;left:50%;top:50%;
    width:102px;height:50px;transform:translate(-50%,-50%) rotate(90deg);pointer-events:none}
  body:not(.lb-rail-open) .sidebar .sb-seg-btn{position:relative;z-index:2;display:flex;flex:0 0 50px;
    align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:0;background:transparent;color:var(--selection-ink)}
  body:not(.lb-rail-open) .sidebar .sb-seg-btn b{display:none}
  body:not(.lb-rail-open) #sidebar .sb-seg-btn .sb-ico{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;color:var(--selection-ink)}
  body:not(.lb-rail-open) #sidebar .sb-seg-btn .uic{display:block;width:22px;height:22px}
  body:not(.lb-rail-open) #sidebar .sb-seg-btn .uic path{stroke:currentColor!important}
  body:not(.lb-rail-open) #sidebar .sb-seg-btn.is-active .uic path{stroke:#fff!important;stroke-width:3!important}

  body.lb-rail-open .sidebar .sb-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;flex:0 0 177.5px;width:177.5px;min-width:0;height:48px;margin:0}
  body.lb-rail-open #sidebar .sb-seg-art{display:block;position:absolute;z-index:1;inset:0;
    width:100%;height:100%;transform:none;pointer-events:none}
  body.lb-rail-open .sidebar .sb-seg-btn{position:relative;z-index:2;display:flex;align-items:center;
    justify-content:center;gap:2px;min-width:0;height:48px;padding:0 4px;overflow:hidden;
    border:0;background:transparent;color:var(--selection-ink);font:600 14px/18px var(--f-body)}
  body.lb-rail-open .sidebar .sb-seg-btn b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.lb-rail-open #sidebar .sb-seg-btn .sb-ico{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;color:var(--selection-ink)}
  body.lb-rail-open #sidebar .sb-seg-btn .uic{display:block;width:18px;height:18px}
  body.lb-rail-open #sidebar .sb-seg-btn .uic path{stroke:currentColor!important}
  body.lb-rail-open #sidebar .sb-seg-btn.is-active .uic path{stroke:#fff!important;stroke-width:3!important}

  .sidebar .sb-scroll{display:flex;flex-direction:column;flex:1 1 0;min-width:0;width:100%;
    min-height:0;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
  .sidebar .sb-scroll::-webkit-scrollbar{width:0;height:0}
  body:not(.lb-rail-open) .sidebar .sb-scroll{align-items:center;gap:8px}
  body.lb-rail-open .sidebar .sb-scroll{align-items:stretch;gap:10px}

  body:not(.lb-rail-open) .sidebar .sb-search{display:flex;align-items:center;justify-content:center;
    flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;
    border-radius:6px;background:transparent;opacity:1;pointer-events:auto;transform:none;overflow:visible}
  body:not(.lb-rail-open) .sidebar .sb-search-label{display:none}
  body:not(.lb-rail-open) .sidebar .sb-search-button,body:not(.lb-rail-open) .sidebar .sb-pack-search{justify-content:center}
  body:not(.lb-rail-open) .sidebar .sb-pack-search{position:relative}
  body:not(.lb-rail-open) .sidebar .sb-pack-search-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  body:not(.lb-rail-open) .sidebar .sb-search-ic{display:grid;place-items:center;width:20px;height:20px}
  body.lb-rail-open .sidebar .sb-search{display:flex;align-items:center;gap:13px;flex:0 0 46px;
    width:100%;height:46px;min-height:46px;margin:2px 0;padding:0 9px;border-radius:6px;
    background:var(--control-deep);border:1px solid var(--line);opacity:1;pointer-events:auto;transform:none}
  body.lb-rail-open .sidebar .sb-search-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  body:not(.lb-rail-open) .sidebar .sb-nav{align-items:center;gap:10px;padding:0;width:auto;flex:0 0 auto;overflow:visible}
  body:not(.lb-rail-open) .sidebar .sb-nav button{display:grid;grid-template-columns:26px 0;
    align-items:center;justify-content:center;gap:0;flex:0 0 44px;width:44px;height:44px;
    min-height:44px;margin:0;padding:0;border-radius:6px}
  body:not(.lb-rail-open) .sidebar .sb-nav button b{display:none}
  body:not(.lb-rail-open) .sidebar .sb-nav button .sb-badge{position:absolute;top:5px;right:4px;margin:0}
  body:not(.lb-rail-open) .sidebar .sb-line{width:44px;margin:6px 0}
  body.lb-rail-open .sidebar .sb-nav{align-items:stretch;width:100%;gap:4px;padding:0}
  body.lb-rail-open .sidebar .sb-nav button{width:100%;grid-template-columns:24px max-content auto;
    justify-content:start;gap:11px;min-height:44px;padding:5px 8px 5px 11px}
  body.lb-rail-open .sidebar .sb-nav button b{display:block;max-width:none;opacity:1}
  body.lb-rail-open .sidebar .sb-line{width:100%;margin:6px 0}

  /* Chat remains an overlay at this breakpoint, but it starts after the rail
     and uses the space released by the retired tablet bottom bar. */
  body.lb-chat-docked .chat-dock{left:var(--lb-nav-w);bottom:0}
}

/* ---------- desktop: real flex row, inner scroll ---------- */
@media (min-width:1080px){
  /* clip, not hidden: `hidden` still makes a scroll container, so focusing
     anything inside the off-screen dock scrolled the whole shell sideways. */
  .lb-shell{overflow:clip;min-height:100vh}
  .lb-col{overflow:hidden;max-height:100vh}
  .lb-scroll{height:calc(100vh - var(--topbar-h));overflow:auto;overflow-x:hidden}

  /* sidebar joins the flow instead of floating over it.
     min-width:0 matters — a flex item defaults to min-width:auto (min-content),
     and the nav labels' min-content is the EXPANDED width, so the collapsed
     rail refused to shrink below 188px. */
  .sidebar{position:relative;left:auto;top:auto;bottom:auto;z-index:3;
    flex:0 0 var(--lb-nav-w);width:var(--lb-nav-w);min-width:0;height:100vh;
    overflow:hidden;box-shadow:none;
    transition:flex-basis var(--lb-anim-med) var(--lb-ease-modal),width var(--lb-anim-med) var(--lb-ease-modal),padding var(--lb-anim-med) var(--lb-ease-modal)}
  body:not(.lb-sidebar-collapsed) .sidebar{flex-basis:var(--lb-nav-open-w);width:var(--lb-nav-open-w);box-shadow:none}
  body.lbp-over-open .sidebar{z-index:3}

  /* topbar spans exactly its column — no left/right/padding arithmetic */
  .topbar{position:sticky;top:0;left:auto;right:auto;width:100%;max-width:none;margin:0;
    z-index:2;flex:0 0 auto;
    padding:12px 24px;transition:none}
  body.lb-chat-docked .topbar{right:auto;padding-right:24px}

  /* the centred balance/wallet pair centres inside the COLUMN, not the viewport */
  .tb-center{position:static;left:auto;top:auto;transform:none;margin-inline:auto}
  /* .tb-rewards carried margin-left:auto from the era when .tb-center was
     position:absolute and sat outside the flex flow — the auto margin was the
     only thing pushing the right-hand cluster over. Now that .tb-center is a
     real flex item, TWO auto margins compete for the same free space and split
     it, so the pair drifted left by however much room the column had (measured
     -92px open, -11px with both panels out). .tb-center's own auto margins
     already push the cluster to the end, so this one just has to stop bidding. */
  .tb-rewards{margin-left:0}

  .tb-home{margin-left:0}

  /* stage + footer no longer compensate for panels */
  .stage{margin:0;max-width:none;padding:0}
  .site-footer{margin-left:0;margin-right:0;width:100%}
  body.lb-chat-docked .site-footer{margin-right:0}

  /* full-bleed screens anchor to the scroll box, not the viewport */
  .feed-screen,.chat-screen{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;max-width:none}
  .chat-screen{max-width:760px;margin-inline:auto}

  /* right dock: in-flow, hidden by pulling itself off the end of the row */
  .chat-dock,.desktop-panel{position:relative;top:auto;right:auto;bottom:auto;
    flex:0 0 auto;width:var(--lb-aside-w);min-width:var(--lb-aside-w);height:100vh;
    z-index:3;border-left:1px solid var(--line);border-radius:0;box-shadow:none;
    overflow:hidden;
    margin-right:calc(-1 * var(--lb-aside-w));
    transition:margin-right var(--lb-anim-med) var(--lb-ease-modal)}
  .chat-dock{display:block}
  body.lb-chat-docked .chat-dock{margin-right:0}
  /* the workspace panel varies in width per screen, so it stays out of the flow
     entirely until it opens rather than reserving a lane it may not use */
  .desktop-panel{display:none}
  .desktop-panel[aria-hidden="false"]{display:block;margin-right:0}

  /* Search is a child of .lb-col, so 50% follows the real content column as the
     sidebar and chat dock resize. This keeps the 992px panel genuinely centred. */
  .gsearch{position:absolute;left:50%;right:auto;width:min(992px,calc(100% - 44px));max-width:none;transform:translateX(-50%)}
  body.lb-chat-docked{--lb-search-right:0px}
}

/* ==========================================================================
   MAGIC CONTAINER
   --------------------------------------------------------------------------
   Container queries without container queries. .lb-col carries a class saying
   which panels are open, and every breakpoint is shifted right by exactly the
   width those panels stole:
       left sidebar expanded  +124px   (188 - 64)
       right dock open        +360px
       both                   +484px
   So a rule that should fire "when the content area is >= 992px wide" is
   written four times, at 992 / 1116 / 1352 / 1476.
   ========================================================================== */

/* content gutter: 16px -> 48px -> 0 (max-width takes over).
   Route content must arrive at its final width. Animating this padding made a
   Packs/Battles navigation visibly grow outward from the centre even though
   neither page had actually changed the available shell width. Sidebar/chat
   drawers retain their own motion; page geometry itself does not tween. */
.lb-col .screen-inner{padding-inline:16px;transition:none}
@media (min-width: 992px){ .lb-col.no-side-opened        .screen-inner{padding-inline:48px} }
@media (min-width:1116px){ .lb-col.left-side-opened-only .screen-inner{padding-inline:48px} }
@media (min-width:1352px){ .lb-col.right-side-opened-only .screen-inner{padding-inline:48px} }
@media (min-width:1476px){ .lb-col.both-side-opened      .screen-inner{padding-inline:48px} }
/* The Summer artwork spans its content column; standings own their gutters. */
.lb-col .screen-inner.weekly-race-page{padding-inline:0}

/* game grid column floor grows as the content area grows */
@media (min-width: 700px){ .lb-col.no-side-opened         .game-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }
@media (min-width: 824px){ .lb-col.left-side-opened-only  .game-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }
@media (min-width:1060px){ .lb-col.right-side-opened-only .game-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }
@media (min-width:1184px){ .lb-col.both-side-opened       .game-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }

@media (min-width: 992px){ .lb-col.no-side-opened         .game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px} }
@media (min-width:1116px){ .lb-col.left-side-opened-only  .game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px} }
@media (min-width:1352px){ .lb-col.right-side-opened-only .game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px} }
@media (min-width:1476px){ .lb-col.both-side-opened       .game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px} }

@media (min-width:1140px){ .lb-col.no-side-opened         .game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }
@media (min-width:1264px){ .lb-col.left-side-opened-only  .game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }
@media (min-width:1500px){ .lb-col.right-side-opened-only .game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }
@media (min-width:1624px){ .lb-col.both-side-opened       .game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }

/* hero never gets re-measured against the viewport any more */
.lb-col .lb-hero-fb{max-width:none;margin-inline:auto}

/* ---- game row density ----
   .game-row hardcoded grid-auto-columns:calc(15.3846% - 11.85px) = exactly 6.5
   cards per row at EVERY width, which is why the lobby always showed six and a
   half. Shuffle sizes cards to a fixed pitch (169.44 card + 16 gap = 185.44) and
   lets the count fall out of the lane, so the count rises as panels close.

   Written as the four shifted copies so the density follows CONTENT width:
   8.25 cards with nothing open, 7.25 once a panel steals a lane. Column formula
   for n cards at gap g is 100%/n - g*(n-1)/n. */
@media (min-width:1080px){
  .lb-col .game-row{gap:16px}
  .lb-col.no-side-opened         .game-row{grid-auto-columns:calc(12.1212% - 14.06px)}   /* 8.25 */
  .lb-col.left-side-opened-only  .game-row{grid-auto-columns:calc(13.7931% - 13.79px)}   /* 7.25 */
  .lb-col.right-side-opened-only .game-row{grid-auto-columns:calc(13.7931% - 13.79px)}
  .lb-col.both-side-opened       .game-row{grid-auto-columns:calc(13.7931% - 13.79px)}
}

/* Event tiles lift on hover. Shuffle's HeroBannerCard, read off their CSS:
     .HeroBannerCard_root:hover{transform:translateY(calc(var(--spacing-sm4) * -1))}
   with --spacing-sm4 = .5rem and --animation-duration = .2s. Ours did nothing —
   app.css carried two .lb-ev:hover{transform:none} rules that killed it. */
.lb-events{--lb-event-lift-space:16px;
  /* Horizontal scrolling clips the block axis too. Keep the resting banner
     baseline unchanged while reserving room for the complete 8px hover lift. */
  margin-top:calc(var(--lb-event-lift-space) * -1);padding-top:var(--lb-event-lift-space)}
@media (hover:hover){
  .lb-ev{transition:transform .2s var(--lb-ease-standard)}
  .lb-ev:hover{transform:translateY(-8px)}
}

/* ONE hero carousel. LuckPacks and Pack Battles used to sit below the row of
   three as a separate 2-up band at a completely different scale, which is what
   left the big gap under the heroes. Those two are now .lb-ev tiles like the rest.

   The five tiles used to be pinned to repeat(5,1fr) off a bare min-width:1080px
   VIEWPORT query, with no magic-container variants — so the row never learned
   that the sidebar or the chat dock had taken a lane. With both open at 1280px
   the content column is 700px and all five tiles crushed to 132px wide.

   Shuffle's own hero band, measured off shuffle.com 2026-08-07:
     .CarouselSwipeContent_root  → display:flex, scroll-snap-type:x mandatory,
                                    overflow:auto hidden, scrollbar-width:none
     card width  base            → calc(100% - var(--spacing-lg2))      1-up
                 >=500px content → calc((100% - var(--spacing-sm4))/2)  2-up
                 >=850px content → calc((100% - var(--spacing-md2))/3)  3-up
   It never shows more than THREE, the width is a share of the CONTENT box
   (100%, not 100vw), and tiles four onward are reached by scrolling. Ported
   here as the four shifted copies, each floored at 920px so this never reaches
   under the mobile strip below — that one stays a grid because initEvCarousel
   drives it through row.style.gridAutoColumns. */
@media (min-width:920px){
  .lb-events{display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  .lb-events::-webkit-scrollbar{display:none}
  .lb-ev{flex:0 0 auto;scroll-snap-align:start;width:calc((100% - 12px)/2)}
  .home-tiles{display:none}
}
/* 3-up once the CONTENT column clears Shuffle's 850px threshold */
@media (min-width: 920px){ .lb-col.no-side-opened         .lb-events .lb-ev{width:calc((100% - 24px)/3)} }
@media (min-width: 974px){ .lb-col.left-side-opened-only  .lb-events .lb-ev{width:calc((100% - 24px)/3)} }
@media (min-width:1210px){ .lb-col.right-side-opened-only .lb-events .lb-ev{width:calc((100% - 24px)/3)} }
@media (min-width:1334px){ .lb-col.both-side-opened       .lb-events .lb-ev{width:calc((100% - 24px)/3)} }

/* ---- topbar shed ladder ----------------------------------------------------
   The bar needs ~728px to lay out intact: 196 logo + 247 balance/wallet pair +
   4x44 circular controls + 5x10 gaps + 48 padding. With the dock open it gets
   far less than that — at 1100px viewport the both-panels column is 552px, at
   1080px it is 532px. .lb-col is overflow:hidden, so instead of a scrollbar the
   avatar and bell were silently CLIPPED off the right edge (measured -141px).

   So shed content as the column tightens, in the order it can be spared, each
   tier written as the usual four shifted copies (+124 / +360 / +484):
     column < 780  drop the wordmark      (~125px with its gap)
     column < 700  drop the gift/rewards  (~54px)
     column < 600  halve the bar padding  (24px)
   Worst case 1080/both: 728 - 125 - 54 - 24 = 525 <= 532. Everything stays
   reachable; nothing is hidden behind an edge. -------------------------------- */

/* tier 1 — wordmark. .tb-home carries min-width:196px sized around the word, so
   hiding the word alone reclaims only its gap — the min-width has to go too or
   the logo block keeps holding all 196px open. */
@media (max-width: 843.98px){ .lb-col.no-side-opened         .tb-brand-word{display:none} .lb-col.no-side-opened         .tb-home{min-width:44px} }
@media (max-width: 967.98px){ .lb-col.left-side-opened-only  .tb-brand-word{display:none} .lb-col.left-side-opened-only  .tb-home{min-width:44px} }
@media (max-width:1203.98px){ .lb-col.right-side-opened-only .tb-brand-word{display:none} .lb-col.right-side-opened-only .tb-home{min-width:44px} }
@media (max-width:1327.98px){ .lb-col.both-side-opened       .tb-brand-word{display:none} .lb-col.both-side-opened       .tb-home{min-width:44px} }

/* tier 2 — gift/rewards control (its screen is still in the sidebar + more menu) */
@media (max-width: 763.98px){ .lb-col.no-side-opened         .tb-rewards{display:none} }
@media (max-width: 887.98px){ .lb-col.left-side-opened-only  .tb-rewards{display:none} }
@media (max-width:1123.98px){ .lb-col.right-side-opened-only .tb-rewards{display:none} }
@media (max-width:1247.98px){ .lb-col.both-side-opened       .tb-rewards{display:none} }

/* tier 3 — bar gutters */
@media (max-width: 663.98px){ .lb-col.no-side-opened         .topbar{padding-inline:12px} }
@media (max-width: 787.98px){ .lb-col.left-side-opened-only  .topbar{padding-inline:12px} }
@media (max-width:1023.98px){ .lb-col.right-side-opened-only .topbar{padding-inline:12px} }
@media (max-width:1147.98px){ .lb-col.both-side-opened       .topbar{padding-inline:12px} }

/* ==========================================================================
   HOVER LIFT + PRESS STATES
   Rails clip vertically, so the lift needs headroom above the row or the top
   edge of a lifted card gets cut off.
   ========================================================================== */
.game-more-row{padding-top:12px}
@media (min-width:992px){ .game-more-row{padding-top:16px} }

@media (hover:hover) and (min-width:992px){
  .gcard,.game-more-card,.lb-hero-fb{transition:transform var(--lb-anim) var(--lb-ease-standard)}
  .gcard:hover,.game-more-card:hover{transform:translateY(var(--lb-lift))}
}
.gcard:active,.game-more-card:active{transform:var(--lb-press)}

/* ==========================================================================
   MINI-PLAYER BUTTON (game card corner -> dock the game in the right panel)
   ========================================================================== */
/* The "More from LuckBattle Games" row on a game screen carries the control too,
   so you can dock a second game without leaving the one you're in — the click
   also drops the main stage back Home (owner 2026-08-07), because otherwise the
   full-size game and the mini player would both be running. */
.gcard,.game-more-card{position:relative}
.gcard .gcard-open,.game-more-card .gcard-open{position:absolute;inset:0;z-index:4;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer}
.gcard .gcard-open:focus-visible,.game-more-card .gcard-open:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:-3px}
.gcard .gcard-open:disabled,.game-more-card .gcard-open:disabled{cursor:not-allowed}
.gcard .gcard-mini,.game-more-card .gcard-mini{position:absolute;z-index:5;bottom:16px;right:8px;
  width:44px;height:44px;display:none;align-items:center;justify-content:center;
  background:var(--lb-menu,#192228);border:1px solid var(--lb-control-border,#43515A);border-radius:6px;
  color:var(--lb-chrome-icon,#C6C0BA);cursor:pointer;
  transition:opacity var(--lb-anim) var(--lb-ease-standard),
             transform var(--lb-anim) var(--lb-ease-standard),
             background-color var(--lb-anim) var(--lb-ease-standard),
             color var(--lb-anim) var(--lb-ease-standard),
             border-color var(--lb-anim) var(--lb-ease-standard)}
@media (min-width:768px){.gcard .gcard-mini,.game-more-card .gcard-mini{bottom:12px}}
.gcard .gcard-mini svg,.game-more-card .gcard-mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:768px){ .gcard .gcard-mini,.game-more-card .gcard-mini{display:flex;opacity:0} }
@media (hover:hover) and (min-width:768px){
  .gcard:hover .gcard-mini:not(:disabled),.game-more-card:hover .gcard-mini:not(:disabled){opacity:1}
  .gcard .gcard-mini:hover:not(:disabled),.game-more-card .gcard-mini:hover:not(:disabled){
    background:var(--lb-game-raised,#2A353C);color:var(--lb-ink,#F7F4F0);border-color:var(--lb-line-2,#48565F)}
}
.gcard .gcard-mini:focus-visible,.game-more-card .gcard-mini:focus-visible{
  opacity:1;outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.gcard .gcard-mini:disabled,.game-more-card .gcard-mini:disabled{
  opacity:1;background:var(--lb-action-disabled,#1E282E);border-color:var(--lb-game-line,#2A353C);
  color:var(--lb-action-disabled-ink,#858C90);cursor:not-allowed}
.gcard .gcard-mini:active:not(:disabled),.game-more-card .gcard-mini:active:not(:disabled){transform:var(--lb-press-sm)}

/* ==========================================================================
   MODAL — scale-in body over a fading scrim, and a content box that animates
   its own size when you switch tabs instead of snapping.
   ========================================================================== */
.lb-modal{position:fixed;inset:0;z-index:7;padding:24px 20px;display:flex;align-items:center;justify-content:center;
  transition:var(--lb-anim-fast) var(--lb-ease-modal)}
.lb-modal[hidden]{display:none}
.lb-modal.is-hidden{opacity:0;pointer-events:none}
.lb-modal.is-shown{opacity:1}
.lb-modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:var(--lb-anim-med) opacity ease}
.lb-modal.is-shown .lb-modal-scrim{opacity:1}
.lb-modal-body{position:relative;z-index:1;display:flex;flex-direction:column;
  border-radius:8px;background:var(--surface,#121418);
  min-width:min(100%,496px);max-width:min(90vw,540px);max-height:min(calc(100vh - 20px),850px);
  box-shadow:0 2px 20px 10px rgba(17,17,18,.25);
  transform:scale(.95);opacity:.9;
  transition:opacity var(--lb-anim-med) ease,transform var(--lb-anim-med) ease}
.lb-modal.is-shown .lb-modal-body{transform:scale(1);opacity:1}
/* drop the transform once it has landed so text stops being a paint layer */
.lb-modal-body.anim-done{transform:none}
.lb-modal-content{padding:40px;overflow:auto;min-height:240px;transition:height var(--lb-anim-med) var(--lb-ease-modal)}

/* ==========================================================================
   DROPDOWN — opens on focus-within/hover, no JS
   ========================================================================== */
.lb-menu-wrap{position:absolute;top:32px;right:0;z-index:1;padding-top:16px;
  opacity:0;pointer-events:none;transition:var(--lb-anim) opacity}
.lb-menu-host:focus-within .lb-menu-wrap,
.lb-menu-host:hover .lb-menu-wrap,
.lb-menu-wrap.is-open{opacity:1;pointer-events:auto}
.lb-menu{min-width:260px;width:100%;margin:0;padding:16px;list-style:none;
  background:var(--surface,#121418);border:1px solid var(--line,#2a2e38);border-radius:8px;
  max-height:72vh;overflow-y:auto}
@media (min-width:992px){ .lb-menu{max-height:90vh} }
.lb-menu-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  width:100%;height:48px;padding:12px;border:0;border-radius:6px;
  background:none;color:#fff;font-size:14px;text-align:left;cursor:pointer;
  transition:var(--lb-anim)}
@media (hover:hover){ .lb-menu-item:hover{background:var(--surface-2,#202329)} }
.lb-menu-item:active{transform:var(--lb-press)}

/* ==========================================================================
   CATEGORY TABS — the pill row (All / Popular / Favorites / Table ...)
   --------------------------------------------------------------------------
   Wired onto the EXISTING .chips-row / .fchip markup rather than replacing it:
   three JS callsites read `.chips-row .fchip` and toggle `.on`, so the active
   class here is `.on`, not Shuffle's `.is-active`. Both are accepted so the
   block still works if it is ever reused on fresh markup.

   Match the live-bets tabs: the tray is the deeper control tone and the selected
   tab steps up one neutral layer with the canonical high-contrast ink. Category selection is navigation, not a
   primary action, so it does not use the pink action colour.
   ========================================================================== */
/* padding is EVEN, not 6px 6px 0. With no bottom padding the 36px tab sat flush
   on the tray's bottom edge with a 6px gap only above it, so the selected tab
   read as sitting lower than the grey tray around it. 6px all round also makes
   the tray 48px — the same height as the search field it shares the row with. */
.lb-tabs{display:flex;gap:.2rem;width:100%;padding:6px;
  background:var(--lb-control-deep,var(--lb-surface-2,#1E282E));border-radius:6px;overflow:hidden;overflow-x:auto;
  scroll-padding-inline:6px;scrollbar-width:thin;
  scrollbar-color:var(--lb-line-2,#48565F) var(--lb-control-deep,#141C21)}
.lb-tabs::-webkit-scrollbar{height:4px}
.lb-tabs::-webkit-scrollbar-track{background:var(--lb-control-deep,#141C21);border-radius:999px}
.lb-tabs::-webkit-scrollbar-thumb{background:var(--lb-line-2,#48565F);border-radius:999px}
@media (min-width:992px){ .lb-tabs{width:unset} }
/* .games-toolbar .chips-row (0,2,0) zeroes the padding, so the tray needs to
   match that weight or the row loses its inset inside the toolbar. */
.games-toolbar .lb-tabs{padding:6px;margin:0}
/* flex:0 0 auto, NOT 1 1 auto — stretching seven tabs across the full toolbar
   spread them into a wide sparse band that read as off-centre. Shuffle's lobby
   tabs are content-width and left-packed. */
.lb-tab{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border:0;border-radius:6px;
  background:transparent;color:var(--lb-ink-2,#D6D0CA);font-size:14px;font-weight:500;line-height:1;
  white-space:nowrap;cursor:pointer;transition:var(--lb-anim) all}
/* Category navigation uses the same semantic selection ladder as the rest of
   the shell. It stays neutral (never action pink), while hover, press and focus
   remain explicit states without translucent blue films. */
.lb-tab.is-active,.lb-tab.on{
  background:var(--lb-selection-fill,var(--lb-control-selected,#3A464E));
  color:var(--lb-selection-ink,var(--lb-ink,#F7F4F0));border-color:transparent}
.games-toolbar .lb-tab.is-active,.games-toolbar .lb-tab.on{
  color:var(--lb-selection-ink,var(--lb-ink,#F7F4F0))}
.games-toolbar .lb-tab.is-active>svg,.games-toolbar .lb-tab.on>svg{
  color:var(--lb-selection-ink,var(--lb-ink,#F7F4F0))}
.lb-tab:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:-2px}
@media (hover:hover){
  .lb-tab:not(.is-active):not(.on):not(:disabled):hover{
    background:var(--lb-surface-3,var(--lb-line,#2A353C));
    color:var(--lb-ink,#F7F4F0)}
  .games-toolbar .lb-tab:not(.is-active):not(.on):not(:disabled):hover>svg{color:var(--lb-ink,#F7F4F0)}
  .lb-tab.is-active:not(:disabled):hover,.lb-tab.on:not(:disabled):hover{
    background:var(--lb-selection-hover,var(--lb-line-2,#48565F))}
}
.lb-tab:not(.is-active):not(.on):not(:disabled):active{
  background:var(--lb-control-selected,var(--lb-selection-fill,#3A464E));
  color:var(--lb-ink,#F7F4F0);
  transform:var(--lb-press)}
.lb-tab.is-active:not(:disabled):active,.lb-tab.on:not(:disabled):active{
  background:var(--lb-selection-hover,var(--lb-line-2,#48565F))}
.lb-tab:disabled{
  background:var(--lb-action-disabled,#1E282E);color:var(--lb-action-disabled-ink,#858C90);
  cursor:not-allowed;transition:none}

/* ==========================================================================
   MODAL MOTION on the existing .sheet markup.
   --------------------------------------------------------------------------
   `.sheet` is a bottom sheet: it slides up from the bottom edge, which is right
   on a phone and wrong on a desktop where it reads as a dialog. So mobile keeps
   the slide and desktop gets Shuffle's centred scale-in. openSheet/closeSheets
   already toggle `.open`, so this needs no JS.
   ========================================================================== */
@media (min-width:1080px){
  .sheet{align-items:center}
  /* visibility/opacity matter as much as the scale here: the ORIGINAL closed
     state was translateY(100%), i.e. parked off the bottom of the screen. Just
     swapping in scale(.95) left every closed sheet sitting in the middle of the
     lobby as a grey slab (that was the "massive grey block"). */
  .sheet-card{border-radius:8px;transform:scale(.95);opacity:0;visibility:hidden;
    transition:opacity var(--lb-anim-med) ease,transform var(--lb-anim-med) ease,visibility var(--lb-anim-med)}
  .sheet.open .sheet-card{transform:scale(1);opacity:1;visibility:visible}
}

/* The mobile shell pads the body to clear a FIXED topbar and botnav. On desktop
   the topbar is in-flow inside .lb-col and the botnav is display:none, so that
   padding is dead space — an 88px black band above the shell, which also pushed
   the 100vh column down past the bottom of the viewport. */
@media (min-width:1080px){
  body{padding:0}
  /* app.css sizes body padding for a FIXED topbar. In this shell the topbar is
     sticky inside the column, so that padding double-counts its height. The bare
     `body` reset above loses to `body[data-screen=...]` on specificity, which is
     why the gap only ever showed on Packs. Match the specificity to kill it. */
  body[data-screen="packs"]{padding-top:0}
}

/* ==========================================================================
   MINI PLAYER — floating draggable game card (Shuffle DraggableContainer)
   --------------------------------------------------------------------------
   Values measured off shuffle.com 2026-08-06: 400px wide, card #121418 on a
   1px #2a2e38 border at radius 8 with shadow 0 2px 20px 10px rgba(17,17,18,.25),
   49px header, three 36x48 controls, minimise collapsing the body to 0.

   The card is `position:fixed; top:0; left:0` and moved ONLY by transform, so a
   drag never touches layout. z-index sits ABOVE the topbar and botnav (90) and
   under .sheet (110), so modals still win. It used to sit at 89, under the bars
   the way Shuffle does it — but the owner's requirement (2026-08-08) is that the
   player drags over every edge on phone, tablet and desktop, and a card that
   slides *under* the bar it was just dragged onto cannot do that. Same 95 the
   Live Stats panel uses, so the two never fight each other either.
   ========================================================================== */
.lb-mini{position:fixed;top:0;left:0;z-index:95;width:400px;
  will-change:transform;transition:transform .15s ease-out,opacity var(--lb-anim) ease}
/* no transform easing WHILE dragging or the card lags a frame behind the cursor;
   Shuffle does the same (their .15s ease-out is set for programmatic moves) */
.lb-mini.is-dragging{user-select:none;transition:none}
.lb-mini-card{display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface,#121418);border:1px solid var(--line,#2a2e38);border-radius:8px;
  box-shadow:0 2px 20px 10px rgba(17,17,18,.25)}
.lb-mini-head{display:flex;align-items:center;height:49px;flex:0 0 auto;padding:0 4px 0 10px}
.lb-mini-handle{display:flex;align-items:center;gap:9px;flex:1;min-width:0;height:100%;cursor:move;
  touch-action:none}                         /* touch-action:none or a pen/touch drag scrolls the page instead */
.lb-mini-ico{width:24px;height:24px;border-radius:5px;object-fit:cover;flex:0 0 auto;pointer-events:none}
.lb-mini-name{font-size:14px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.lb-mini-acts{display:flex;align-items:center;flex:0 0 auto}
.lb-mini-btn{width:36px;height:48px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--muted,#b1bad3);cursor:pointer;transition:var(--lb-anim)}
.lb-mini-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-mini-btn:hover{color:#fff}
.lb-mini-btn:active{transform:var(--lb-press-sm)}
/* height is set per card in JS from the loaded game's own content height —
   Shuffle leaves it undefined and lets content size the card, which is why their
   Keno/Mines/Limbo popups are three different heights */
/* Default height only — sizeMiniToContent() writes the real one per game. When
   the window is too short for what the game asked for, the body scrolls instead
   of cutting the bottom controls off (owner 2026-08-07). */
.lb-mini-body{position:relative;height:760px;overflow:hidden}
.lb-mini-body.is-scrolling{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lb-mini-body.is-scrolling::-webkit-scrollbar{width:8px}
.lb-mini-body.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.lb-mini-frame{width:100%;height:100%;border:0;display:block}
.lb-mini-win-anchor{position:absolute;inset:0;z-index:2;pointer-events:none}
/* Minimised = faded out but STILL MOUNTED, so the game keeps running and the
   card returns to exactly where it was left. Shuffle does the same (their card
   sits at opacity:0 while the dock pill is up) — unmounting would reload it. */
.lb-mini.is-min{opacity:0;pointer-events:none}

/* ---- minimise dock: taskbar tray pinned to the bottom edge ----
   Shuffle: fixed, bottom:0, height 49, right-aligned pills, padding-right 88 to
   clear the support bubble. Pill: #121418, radius 8px 8px 0 0 (it sits ON the
   edge, so only the top corners round), 240x49 — a 190px open button (16px icon
   + 14px/700 title) and a 48px close. */
.lb-minidock{position:fixed;left:0;right:0;bottom:0;height:49px;z-index:88;
  pointer-events:none;padding-right:88px}
.lb-minidock-list{display:flex;justify-content:flex-end;align-items:flex-end;
  gap:8px;height:49px;margin:0;padding:0;list-style:none}
.lb-minidock-item{display:flex;align-items:center;height:49px;
  background:var(--surface,#121418);border:1px solid var(--line);border-bottom:0;
  border-radius:8px 8px 0 0;pointer-events:auto;overflow:hidden}
.lb-minidock-open{display:flex;align-items:center;gap:8px;height:48px;min-width:150px;max-width:240px;
  padding:0 4px 0 16px;border:0;background:transparent;color:#fff;cursor:pointer;
  transition:var(--lb-anim)}
.lb-minidock-open:hover{background:var(--surface-2,#202329)}
.lb-minidock-open:active{transform:var(--lb-press)}
.lb-minidock-ico{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:0 0 auto}
/* Stroke-glyph branch: the rounding and cover-crop above are for .webp art. */
svg.lb-mini-ico,svg.lb-minidock-ico{border-radius:0;color:#fff;overflow:visible}
.lb-minidock-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Shuffle marks a pill whose game is live with a small dot (their titlePlaying
   + liveDot). Ours is on whenever the game is docked and still running. */
.lb-minidock-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#2BD576}
.lb-minidock-x{width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--muted,#b1bad3);cursor:pointer;transition:var(--lb-anim)}
.lb-minidock-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lb-minidock-x:hover{color:#fff;background:var(--surface-2,#202329)}
.lb-minidock-x:active{transform:var(--lb-press-sm)}

/* the card is a desktop affordance; narrow shells open the game full-screen */
@media (max-width:1079px){ .lb-mini,.lb-minidock{display:none} }

/* dropdown rows: our .balance-pop already carries Shuffle's scale-in and its own
   glass treatment, so it is NOT given .lb-menu (that would override the width and
   kill the blur). Only the press motion was missing. */
.bp-row:active,.bp-vault:active{transform:var(--lb-press)}

/* Balance popup timing, matched to Shuffle's BalancePopup:
     closed  transform:translateX(-50%) scale(.97); opacity:0
     open    transform:translateX(-50%) scale(1);   opacity:1
     transition .1s cubic-bezier(.4,0,.2,1)
   Ours was .2s ease with an extra translateY(-8px) — the slide made the scale
   read as a drift rather than the tight pop theirs has. */
.balance-pop{transform:translateX(-50%) scale(.97);
  transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .1s cubic-bezier(.4,0,.2,1)}
.balance-pop.open{transform:translateX(-50%) scale(1)}

/* ==========================================================================
   PLAYER HOME INTERACTION CHROME
   --------------------------------------------------------------------------
   The lobby's art, rarity colors and live-bet outcomes remain game-owned. This
   layer only gives the shared neutral controls one Midnight Slate state ladder:
   deep input/tray -> control -> raised hover -> neutral selection, with pink
   reserved for keyboard focus.
   ========================================================================== */

/* Search is the only text field in the game filter toolbar. Keep its stroke
   visible at rest, strengthen it on hover, and use the focus token—not a second
   selected-state gray—when the input receives keyboard focus. */
.games-toolbar .searchbar{
  background:var(--lb-input-bg,var(--lb-control-deep,#141C21));
  border:1px solid var(--lb-control-border,#43515A);
  transition:background-color var(--lb-anim) var(--lb-ease-standard),
             border-color var(--lb-anim) var(--lb-ease-standard)}
@media (hover:hover){
  .games-toolbar .searchbar:not(:has(input:disabled)):hover{
    border-color:var(--lb-line-2,#48565F)}
}
.games-toolbar .searchbar:focus-within{
  border-color:var(--lb-focus,#FF76D0);outline:2px solid var(--lb-focus,#FF76D0);outline-offset:1px}
.games-toolbar .searchbar:has(input:disabled){
  background:var(--lb-action-disabled,#1E282E);border-color:var(--lb-game-line,#2A353C);cursor:not-allowed}
.games-toolbar .searchbar input:disabled,
.games-toolbar .searchbar:has(input:disabled) svg{
  color:var(--lb-action-disabled-ink,#858C90);stroke:var(--lb-action-disabled-ink,#858C90);cursor:not-allowed}
.games-toolbar .searchbar input:disabled::placeholder{color:var(--lb-action-disabled-ink,#858C90)}

/* Horizontal game-row controls are neutral navigation, never a branded CTA. */
.row-nav .rn-btn{
  width:44px;height:44px;min-width:44px;min-height:44px;
  background:var(--lb-game-control,#1E282E);border:1px solid var(--lb-control-border,#43515A);
  color:var(--lb-chrome-icon,#C6C0BA);
  transition:background-color var(--lb-anim) var(--lb-ease-standard),
             color var(--lb-anim) var(--lb-ease-standard),
             border-color var(--lb-anim) var(--lb-ease-standard)}
@media (hover:hover){
  .row-nav .rn-btn:hover:not(:disabled){
    background:var(--lb-game-raised,#2A353C);border-color:var(--lb-line-2,#48565F);color:var(--lb-ink,#F7F4F0)}
}
.row-nav .rn-btn:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.row-nav .rn-btn:active:not(:disabled){
  background:var(--lb-game-active,#3A464E)}
.row-nav .rn-btn:disabled{
  background:var(--lb-action-disabled,#1E282E);border-color:var(--lb-game-line,#2A353C);
  color:var(--lb-action-disabled-ink,#858C90);cursor:not-allowed;transition:none}

/* The favorite and dock controls in the shared game footer use the same ladder
   as the card-corner mini-player button. Filled neutral gray communicates a
   selected favorite; pink remains focus-only. */
.gfbar .gfb-ico{background:transparent;color:var(--lb-chrome-icon,#C6C0BA)}
@media (hover:hover){
  .gfbar .gfb-ico:hover:not(:disabled){
    background:var(--lb-game-raised,#2A353C);color:var(--lb-ink,#F7F4F0)}
  .gfbar .gfb-ico.on:hover:not(:disabled){background:var(--lb-selection-hover,#48565F)}
}
.gfbar .gfb-ico.on{
  background:var(--lb-selection-fill,var(--lb-game-active,#3A464E));color:var(--lb-ink,#F7F4F0)}
.gfbar .gfb-ico:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.gfbar .gfb-pf:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.gfbar .gfb-ico:disabled{
  background:var(--lb-action-disabled,#1E282E);color:var(--lb-action-disabled-ink,#858C90);
  cursor:not-allowed;transform:none;transition:none}

/* Live-bet filters mirror the game-category tray: quiet deep bed, raised hover,
   and neutral selected tab. Monetary win/loss and trend colors are deliberately
   outside this block. */
.livebets .lbx-tabs{background:var(--lb-surface-2,#1E282E);border-color:var(--lb-control-border,#43515A)}
.livebets .lbx-tab{background:transparent;color:var(--lb-ink-2,#D6D0CA);cursor:pointer}
@media (hover:hover){
  .livebets .lbx-tab:hover:not(:disabled):not(.on){
    background:var(--lb-game-raised,#2A353C);color:var(--lb-ink,#F7F4F0)}
  .livebets .lbx-tab.on:hover:not(:disabled){background:var(--lb-selection-hover,#48565F)}
}
.livebets .lbx-tab.on{
  background:var(--lb-selection-fill,var(--lb-game-active,#3A464E));color:var(--lb-selection-ink,#F7F4F0)}
.livebets .lbx-tab:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:-2px}
.livebets .lbx-tab:disabled{
  background:var(--lb-action-disabled,#1E282E);color:var(--lb-action-disabled-ink,#858C90);
  cursor:not-allowed;transition:none}

/* A solid deep stripe replaces the translucent white film that changed tone on
   every host surface. Hover/focus stay readable on both lobby and game feeds. */
.livebets .lbx-row:nth-child(even){background:var(--lb-control-deep,#141C21)}
.livebets .lbx-row[data-betmodal]:hover{background:var(--lb-game-raised,#2A353C)}
.livebets .lbx-row[data-betmodal]:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:-2px}

.livebets .lbx-rows select{
  background-color:var(--lb-game-control,#1E282E);color:var(--lb-ink,#F7F4F0)}
@media (hover:hover){
  .livebets .lbx-rows select:hover:not(:disabled){background-color:var(--lb-game-raised,#2A353C)}
}
.livebets .lbx-rows select:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.livebets .lbx-rows select:disabled{
  background-color:var(--lb-action-disabled,#1E282E);color:var(--lb-action-disabled-ink,#858C90);
  cursor:not-allowed}

.livebets .lbx-incog{
  background:var(--lb-game-control,#1E282E);color:var(--lb-ink-2,#D6D0CA)}
@media (hover:hover){
  .livebets .lbx-incog:hover:not(:disabled):not(.on){
    background:var(--lb-game-raised,#2A353C);color:var(--lb-ink,#F7F4F0)}
  .livebets .lbx-incog.on:hover:not(:disabled){background:var(--lb-selection-hover,#48565F)}
}
.livebets .lbx-incog.on{
  background:var(--lb-selection-fill,var(--lb-game-active,#3A464E));color:var(--lb-selection-ink,#F7F4F0)}
.livebets .lbx-incog:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px}
.livebets .lbx-incog:disabled{
  background:var(--lb-action-disabled,#1E282E);color:var(--lb-action-disabled-ink,#858C90);
  cursor:not-allowed;transition:none}

/* Footer navigation uses the same warm hierarchy. Social brands do not inject
   blue/cyan hover colors into the house palette; their labels already identify
   the destinations. Inline footer CSS is intentionally outranked by the shared
   .site-footer prefix here. */
.site-footer .ft-col a{color:var(--lb-ink-2,#D6D0CA)}
.site-footer .ft-col.ft-contact a{color:var(--lb-ink-muted,#AAA39C)}
.site-footer .ft-col a:hover,
.site-footer .ft-legal a:hover{color:var(--lb-ink,#F7F4F0)}
.site-footer .ft-col a:focus-visible,
.site-footer .ft-legal a:focus-visible,
.site-footer .ft-soc:focus-visible{
  outline:2px solid var(--lb-focus,#FF76D0);outline-offset:3px}
.site-footer .ft-soc.dc:hover,
.site-footer .ft-soc.tg:hover{color:var(--lb-ink,#F7F4F0)}
.site-footer .ft-language select:focus-visible{
  border-color:var(--lb-focus,#FF76D0);outline:2px solid var(--lb-focus,#FF76D0);outline-offset:2px;box-shadow:none}
.site-footer .ft-language select:disabled{
  background:var(--lb-action-disabled,#1E282E);border-color:var(--lb-game-line,#2A353C);
  color:var(--lb-action-disabled-ink,#858C90);cursor:not-allowed}