/* One fast, directional route movement. The default Float entry animation
   must not restart when the route's animated class is removed. */
body.float-ui .app-shell:not(.admin-mode) #main-content>.page:not([hidden]){
  animation:none;
}
body.float-ui .app-shell.tg-route-transition #main-content{
  position:relative;isolation:isolate;
}
body.float-ui .app-shell.tg-route-transition #main-content>.page.tg-nav-leave:not([hidden]){
  position:fixed!important;
  top:var(--tg-nav-fixed-top)!important;
  left:var(--tg-nav-fixed-left)!important;
  width:var(--tg-nav-fixed-width)!important;
  height:var(--tg-nav-fixed-height)!important;
  max-width:none!important;margin:0!important;
  pointer-events:none!important;z-index:1;
  animation:tg-route-snap-out .35s cubic-bezier(.4,0,.18,1) both!important;
}
body.float-ui .app-shell.tg-route-transition #main-content>.page.tg-nav-enter:not([hidden]){
  position:relative;z-index:2;
  animation:tg-route-snap-in .35s cubic-bezier(.4,0,.18,1) both!important;
}
@keyframes tg-route-snap-in{
  from{opacity:.22;transform:translate3d(0,var(--tg-nav-in),0) scale(.992)}
  65%{opacity:1}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes tg-route-snap-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1)}
  60%{opacity:.38}
  to{opacity:0;transform:translate3d(0,var(--tg-nav-out),0) scale(.992)}
}
/* Game-to-game transitions animate the banner (title + emblem) and
   playfield together. The start controls have a shared viewport anchor. */
body.float-ui .app-shell.tg-route-game-switch #main-content>.tg-game-page:is(.tg-nav-enter,.tg-nav-leave):not([hidden]){
  animation:none!important;
}
body.float-ui .app-shell.tg-route-game-switch #main-content>.tg-game-page.tg-nav-enter:not([hidden])
  :is(.tg-game-banner,.tg-game-stage-preview,.tg-game-play,.tg-game-results){
  animation:tg-game-board-in .35s cubic-bezier(.4,0,.18,1) both!important;
}
body.float-ui .app-shell.tg-route-game-switch #main-content>.tg-game-page.tg-nav-leave:not([hidden])
  :is(.tg-game-banner,.tg-game-stage-preview,.tg-game-play,.tg-game-results){
  animation:tg-game-board-out .35s cubic-bezier(.4,0,.18,1) both!important;
}
/* Two translucent game gradients were overlapping and briefly doubling
   their blue tint (especially in dark mode). The incoming, static panel owns
   the one backdrop throughout the transition. */
body.float-ui .app-shell.tg-route-game-switch:not(.admin-mode)
 #main-content>.tg-game-page.tg-nav-leave .tg-game-panel{
  background:transparent!important;
}
/* Instructions vanish on the very first transition frame, rather than
   sliding along with the departing stage. This includes Pitchline guidance
   and future games using the shared instruction/content region. */
body.float-ui .app-shell.tg-route-transition:not(.admin-mode)
 #main-content>.tg-game-page.tg-nav-leave :is(
 .float-board-content>p,.tg-pitch-instructions,
 .tg-game-intro>p,.tg-game-intro .tg-game-instructions,
 .tg-game-panel .tg-game-description){
  opacity:0!important;
  transition:none!important;
  animation:none!important;
}
/* The original pages may have different intrinsic heights when temporarily
   overlaid. Neither their reflow nor their animations can move these buttons. */
body.float-ui .app-shell.tg-route-game-switch #main-content>.tg-game-page:is(.tg-nav-enter,.tg-nav-leave):not([hidden])
  .tg-game-intro:not([hidden]) > .tg-game-actions{
  position:fixed!important;
  top:var(--tg-nav-controls-top)!important;
  left:var(--tg-nav-controls-left)!important;
  width:var(--tg-nav-controls-width)!important;
  height:var(--tg-nav-controls-height)!important;
  min-height:0!important;
  right:auto!important;bottom:auto!important;
  transform:none!important;
  margin:0!important;
  box-sizing:border-box;
  z-index:4;
}
@keyframes tg-game-board-in{
  from{opacity:.1;transform:translate3d(0,var(--tg-nav-in),0)}
  67%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes tg-game-board-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(0,var(--tg-nav-out),0)}
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .app-shell.tg-route-game-switch #main-content>.tg-game-page:is(.tg-nav-enter,.tg-nav-leave)
  :is(.tg-game-banner,.tg-game-stage-preview,.tg-game-play,.tg-game-results){
    animation:none!important
 }
}
/* Hide scrollbar chrome without disabling genuine content scrolling on
   long pages, score lists, touch devices or secondary pages. This also removes
   the transient scrollbar gutter that was nudging game content sideways. */
html{scrollbar-width:none!important;overflow-x:clip}
html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{
  display:none!important;width:0!important;height:0!important
}
body,body *{scrollbar-width:none!important}
body{overflow-x:clip}
/* A playable game occupies exactly one viewport. Prevent a native scroll
   offset from accumulating behind the faux scroll transition. */
html.tg-snap-game{overflow-y:hidden!important;overscroll-behavior-y:none}
html.tg-snap-game body{overflow-y:hidden!important;overscroll-behavior-y:none}
/* Phones and touch tablets (including Firefox on iPad) use their browser's
   native pull-to-refresh. Do not lock the root scroll container or its
   vertical overscroll on touch-capable devices. Game-stage sizing is unchanged;
   mouse/trackpad-only desktop page snapping remains intact. */
@media(max-width:700px), (any-pointer:coarse){
 html.tg-snap-game{
  overflow-y:auto!important;overscroll-behavior-y:auto!important
 }
 html.tg-snap-game body{
  overflow-y:visible!important;overscroll-behavior-y:auto!important
 }
}
body.float-ui .app-shell.tg-route-transition .workspace{overflow:clip}

body.float-ui .tg-persistent-leaderboard{
  position:fixed;inset:0;z-index:18;pointer-events:none;
  opacity:0;transition:opacity .24s cubic-bezier(.22,1,.36,1);
  will-change:opacity;
}
body.float-ui .tg-persistent-leaderboard.tg-board-visible{opacity:1}
body.float-ui .tg-persistent-leaderboard[hidden]{display:none!important}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel,
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{
  position:fixed!important;right:auto!important;bottom:auto!important;
  margin:0!important;box-sizing:border-box;
  pointer-events:auto;animation:none!important;
  transform:none!important;
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel{
  z-index:2;
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{
  z-index:1;
}
body.float-ui .app-shell.tg-leaderboard-unified .tg-game-page :is(.float-leader-panel,.float-leader-ribbon){
  visibility:hidden!important;pointer-events:none!important;
}
body.float-ui .tg-persistent-leaderboard :is(.float-ribbon-list,.float-board-rows,.float-ribbon-label,.float-board-head strong){
  transition:opacity .14s ease-in-out;
}
body.float-ui .tg-persistent-leaderboard[data-changing="true"] :is(.float-ribbon-list,.float-board-rows,.float-ribbon-label,.float-board-head strong){
  opacity:.09;
}
@media(max-width:1050px){
  body.float-ui .tg-persistent-leaderboard>.float-leader-panel{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  body.float-ui .app-shell.tg-route-transition #main-content>.page:is(.tg-nav-leave,.tg-nav-enter){
    animation:none!important;
  }
  body.float-ui .tg-persistent-leaderboard{transition:none}
  body.float-ui .tg-persistent-leaderboard :is(.float-ribbon-list,.float-board-rows,.float-ribbon-label,.float-board-head strong){transition:none}
}

/* Shared leaderboard is viewport-rooted, not constrained to the game stage. */
body.float-ui .tg-persistent-leaderboard{z-index:30}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel{
  max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)
}
body.float-ui .tg-persistent-leaderboard .float-board-handle{
  color:var(--muted);font-size:20px;font-weight:650;line-height:1;
  letter-spacing:0;opacity:.8;width:34px;height:24px;top:-12px;
  cursor:grab;touch-action:none
}
body.float-ui .tg-persistent-leaderboard .float-board-handle::before{
  display:none!important;content:none!important
}
body.float-ui .tg-persistent-leaderboard .float-board-handle:active{cursor:grabbing}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked{
  left:auto!important;right:0!important;
  display:flex;flex-direction:column;overflow:visible;
  min-width:245px;min-height:200px;
  border-radius:19px 0 0 19px;
  padding:17px 15px 15px;
  background:var(--surface);
  box-shadow:-12px 12px 46px rgba(25,37,48,.17)
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-head,
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-foot{flex:none}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-rows{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain
}
body.float-ui .tg-persistent-leaderboard .float-board-resize-x,
body.float-ui .tg-persistent-leaderboard .float-board-resize-y{display:none}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-resize-x{
  display:block;position:absolute;left:-7px;top:19%;bottom:19%;
  width:13px;height:auto;padding:0;border:0;background:transparent;
  cursor:ew-resize;touch-action:none;z-index:3
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-resize-y{
  display:block;position:absolute;bottom:-7px;left:24%;right:24%;
  height:13px;width:auto;padding:0;border:0;background:transparent;
  cursor:ns-resize;touch-action:none;z-index:3
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-resize-x::before,
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked .float-board-resize-y::before{
  content:"";position:absolute;border-radius:99px;
  background:var(--muted);opacity:.25;transition:opacity .2s
}
body.float-ui .tg-persistent-leaderboard .float-board-resize-x::before{
  width:3px;height:35px;left:5px;top:50%;transform:translateY(-50%)
}
body.float-ui .tg-persistent-leaderboard .float-board-resize-y::before{
  height:3px;width:35px;top:5px;left:50%;transform:translateX(-50%)
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-docked :is(.float-board-resize-x,.float-board-resize-y):is(:hover,:focus-visible)::before{opacity:.7}
body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs.tg-board-modes{
  flex:none;align-self:center;margin:0 2px 0 0;padding:3px;gap:2px;border-radius:10px
}
body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs.tg-board-modes>button{
  min-width:46px;padding:6px 10px;font-size:11px;border-radius:7px
}
body.float-ui .tg-persistent-leaderboard :is(.float-ribbon-mode-tabs,.float-board-mode-tabs)[hidden]{
  display:none!important
}
@media(max-width:700px){
 body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs.tg-board-modes>button{
   min-width:39px;padding:6px;font-size:10px
 }
 body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs.tg-board-modes{margin-right:0}
}

body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs.tg-board-modes>button[aria-selected="false"]{
  color:var(--muted)
}

/* A docked leaderboard owns the right-hand slice of the game workspace.
   The board centres in the space between the navigation rail and drawer. */
@media(min-width:1051px){
 body.float-ui .app-shell.tg-leaderboard-docked:not(.admin-mode)
 .workspace:has(.tg-game-page:not([hidden])) main#main-content{
   padding-right:calc(clamp(22px,3.8vw,64px) + var(--tg-leader-dock-width,330px));
   transition:padding-right .20s ease-out
 }
}
/* Directional edge indicator never captures mouse/touch interactions. */
body.float-ui .tg-persistent-leaderboard::before{
 content:"";position:fixed;right:0;top:0;bottom:0;width:22px;
 background:linear-gradient(to right,transparent,var(--accent));
 box-shadow:-13px 0 35px color-mix(in srgb,var(--accent) 40%,transparent);
 opacity:0;pointer-events:none;z-index:0;
 transition:opacity .09s linear
}
body.float-ui .tg-persistent-leaderboard.tg-dock-attracting::before{
 opacity:calc(var(--tg-dock-strength,0) * .85)
}
/* Both panel modes use a scrollable 25-result list. The floating variant
   resizes from below; the dock continues to resize along both axes. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked){
 display:flex;flex-direction:column;min-height:200px;overflow:visible
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked) .float-board-rows{
 flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked)
:is(.float-board-head,.float-board-foot){flex:none}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-floating .float-board-resize-y{
 display:block;position:absolute;bottom:-7px;left:24%;right:24%;
 width:auto;height:13px;padding:0;border:0;background:transparent;
 cursor:ns-resize;touch-action:none;z-index:3
}
/* Rotate only the floating leaderboard's grip, not the admin toolbar grip. */
body.float-ui .tg-persistent-leaderboard .float-board-handle{
 transform:translateX(-50%) rotate(90deg)!important
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .tg-persistent-leaderboard::before{transition:none}
 body.float-ui .app-shell.tg-leaderboard-docked:not(.admin-mode)
 .workspace:has(.tg-game-page:not([hidden])) main#main-content{transition:none}
}

/* Keep the drag handle fully inside a tall, resized dock. The same enlarged
   grab target can be used to pull the drawer out regardless of its height. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel .float-board-head{
  position:relative;overflow:visible
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel .float-board-handle{
  top:-3px;width:54px;height:28px;z-index:5;pointer-events:auto;
  touch-action:none
}
/* During wheel/sidebar game navigation the fixed play controls dissolve and
   return softly while the game art slides; they keep their anchor unchanged. */
@keyframes tg-navigation-buttons-out{
  from{opacity:1} 60%{opacity:.22} to{opacity:0}
}
@keyframes tg-navigation-buttons-in{
  from{opacity:0} 35%{opacity:.08} to{opacity:1}
}
body.float-ui .app-shell.tg-route-game-switch
#main-content>.tg-game-page.tg-nav-leave:not([hidden]) .tg-game-actions{
  animation:tg-navigation-buttons-out .35s ease-in-out both!important
}
body.float-ui .app-shell.tg-route-game-switch
#main-content>.tg-game-page.tg-nav-enter:not([hidden]) .tg-game-actions{
  animation:tg-navigation-buttons-in .35s ease-in-out both!important
}
@media(prefers-reduced-motion:reduce){
  body.float-ui .app-shell.tg-route-game-switch
  #main-content>.tg-game-page:is(.tg-nav-enter,.tg-nav-leave) .tg-game-actions{
    animation:none!important
  }
}

/* Identical unobtrusive resize affordances in both leaderboard modes.
   Left grip changes width while holding the float's right edge in place. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-floating .float-board-resize-x{
 display:block;position:absolute;left:-7px;top:19%;bottom:19%;
 width:13px;height:auto;padding:0;border:0;background:transparent;
 cursor:ew-resize;touch-action:none;z-index:3
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-floating
 .float-board-resize-x:focus-visible,
body.float-ui .tg-persistent-leaderboard>.float-leader-panel.is-floating
 .float-board-resize-y:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Floating leaderboard uses exactly the drawer's resize markers in either
   placement mode. Keep the hit zones outside the panel's scrolling content. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked)
 :is(.float-board-resize-x,.float-board-resize-y){
 display:block!important;position:absolute!important;overflow:visible!important;
 margin:0!important;border:0!important;padding:0!important;
 background:transparent!important;opacity:1!important;
 pointer-events:auto!important;z-index:12!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked) .float-board-resize-x{
 left:-8px!important;top:20%!important;bottom:20%!important;
 width:16px!important;height:auto!important;cursor:ew-resize
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked) .float-board-resize-y{
 bottom:-8px!important;left:20%!important;right:20%!important;
 height:16px!important;width:auto!important;cursor:ns-resize
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked)
 :is(.float-board-resize-x,.float-board-resize-y)::before{
 display:block!important;content:""!important;position:absolute!important;
 background:var(--muted)!important;opacity:.6!important;border-radius:99px!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked) .float-board-resize-x::before{
 height:35px!important;width:3px!important;left:6px!important;top:50%!important;
 transform:translateY(-50%)!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked) .float-board-resize-y::before{
 height:3px!important;width:35px!important;top:6px!important;left:50%!important;
 transform:translateX(-50%)!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked)
 :is(.float-board-resize-x,.float-board-resize-y):is(:hover,:focus-visible)::before{
 opacity:.95!important
}
/* The six-dot drag control gets its own clear band above Play/Daily. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel .float-board-head{
 min-height:57px;padding-top:24px;margin-bottom:9px
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel .float-board-handle{
 top:-14px!important;height:25px;width:46px;z-index:15
}

/* Keep scrollbar momentum inside the floating/docked leaderboard. */
body.float-ui .tg-persistent-leaderboard>.float-leader-panel:is(.is-floating,.is-docked){
 overscroll-behavior:contain
}
body.float-ui .tg-persistent-leaderboard>.float-leader-panel .float-board-rows{
 overflow-y:auto!important;overscroll-behavior-y:contain;touch-action:pan-y
}

/* The ticker is an intrinsically sized track inside a width-constrained strip.
   It bounces only when all three names cannot fit, never moves action buttons. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{
 min-width:0!important;max-width:100vw!important;overflow:hidden!important
}
body.float-ui .tg-persistent-leaderboard .float-ribbon-label,
body.float-ui .tg-persistent-leaderboard .float-ribbon-mode-tabs,
body.float-ui .tg-persistent-leaderboard .float-ribbon-actions{flex-shrink:0}
body.float-ui .tg-persistent-leaderboard .float-ribbon-list{
 min-width:0;max-width:100%;flex:1 1 0;overflow:hidden;
 position:relative;display:block;align-self:center
}
body.float-ui .tg-persistent-leaderboard .float-ribbon-track{
 display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;
 width:max-content;max-width:none;gap:clamp(12px,2vw,24px);white-space:nowrap;
 transform:translateX(0)
}
body.float-ui .tg-persistent-leaderboard .float-ribbon-track>.float-ribbon-player{
 display:inline-flex!important;flex:0 0 auto!important
}
@keyframes tg-leader-strip-ticker{
 0%,12%{transform:translateX(0)}
 88%,100%{transform:translateX(calc(-1 * var(--tg-ticker-travel,0px)))}
}
body.float-ui .tg-persistent-leaderboard .float-ribbon-list[data-ticker="true"] .float-ribbon-track{
 animation:tg-leader-strip-ticker 9s ease-in-out infinite alternate
}
@media(max-width:1050px){
 body.float-ui .tg-persistent-leaderboard .float-ribbon-actions
 :is([data-float-view="float"],[data-float-view="full"]){display:none!important}
 body.float-ui .tg-persistent-leaderboard .float-ribbon-actions{display:none!important}
 body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{gap:clamp(5px,1vw,12px)!important}
}
@media(max-width:480px){
 body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{padding-inline:9px!important}
 body.float-ui .tg-persistent-leaderboard .float-ribbon-label{
  padding-right:7px!important;font-size:11px!important
 }
}
@media(prefers-reduced-motion:reduce){
 body.float-ui .tg-persistent-leaderboard .float-ribbon-list[data-ticker="true"] .float-ribbon-track{
  animation:none!important;transform:none!important
 }
}

/* The live dot remains, but the Play/Daily control is the strip title.
   Tabs, ticker and right-hand actions have separate, non-overlapping cells. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon{
  display:flex!important;align-items:center;min-width:0!important;
  max-width:100%!important;overflow:hidden!important;
  gap:clamp(10px,1.45vw,17px)!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .float-ribbon-label{
  display:inline-flex!important;flex:0 0 8px!important;
  width:8px!important;min-width:8px!important;height:18px!important;
  min-height:18px!important;padding:0!important;margin:0!important;
  border:0!important;font-size:0!important;line-height:0!important;
  align-items:center!important;justify-content:center!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .float-ribbon-label::before{
  content:""!important;display:block!important;flex:none!important;
  width:7px!important;height:7px!important;margin:0!important;
  border-radius:50%;background:#55ac80
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .float-ribbon-mode-tabs{
  flex:0 0 auto!important;min-width:max-content;position:relative;z-index:2
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .tg-board-daily-only{
  margin-right:0!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .tg-board-daily-only>button{
  min-width:52px
}
/* The ticker has a hard horizontal boundary on BOTH sides. Allow vertical
   name glows to breathe without displaying names beneath the mode toggle. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .float-ribbon-list{
  flex:1 1 0!important;min-width:0!important;max-width:100%!important;
  overflow:visible!important;clip-path:inset(-10px 0 -10px 0);
  position:relative;isolation:isolate;z-index:0
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon .float-ribbon-track{
  justify-content:flex-start!important;gap:0!important;
  width:max-content!important;max-width:none!important;
  white-space:nowrap;min-width:max-content
}
/* Slim separators are measured with the ranks; none trails third place. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon
 .float-ribbon-track>.float-ribbon-player{
  position:relative;flex:0 0 auto!important;
  padding-inline:clamp(11px,1.4vw,19px)!important;
  border-inline-end:1px solid var(--line)!important;
  border-radius:0!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon
 .float-ribbon-track>.float-ribbon-player:first-child{
  padding-inline-start:0!important
}
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon
 .float-ribbon-track>.float-ribbon-player:last-child{
  padding-inline-end:0!important;border-inline-end:0!important
}
/* User row highlighting remains in the floating drawer, not the foot strip. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon
 .float-ribbon-player.is-you{
  background:transparent!important;box-shadow:none!important
}

/* Top five occupy the centre of the free middle lane when they fit. When they
   exceed the lane, auto margins collapse and the bounded ticker takes over. */
body.float-ui .tg-persistent-leaderboard>.float-leader-ribbon
 .float-ribbon-track{
  margin-inline:auto!important;
}
/* Sidebar account menu must sit above the persistent leaderboard's z-index 30.
   Promote only while the menu is visible so normal stacking stays unchanged. */
body.float-ui .app-shell>.sidebar:has(#profile-menu:not([hidden])){
  z-index:60!important;overflow:visible!important
}
body.float-ui .app-shell .workspace>.topbar:has(#profile-menu:not([hidden])){
  position:relative;z-index:60!important;overflow:visible!important
}

/* Floating panel/drawer and footer ribbon: active mode remains distinct.
   This late override wins over the shared control's earlier visual defaults. */
body.float-ui .tg-persistent-leaderboard
 :is(.float-board-mode-tabs,.float-ribbon-mode-tabs).tg-board-modes.tg-segment>button[aria-selected="true"]{
  color:var(--text);opacity:1
}
body.float-ui .tg-persistent-leaderboard
 :is(.float-board-mode-tabs,.float-ribbon-mode-tabs).tg-board-modes.tg-segment>button[aria-selected="false"]{
  color:var(--muted);opacity:.56;transition:color 170ms ease,opacity 170ms ease
}
body.float-ui .tg-persistent-leaderboard
 :is(.float-board-mode-tabs,.float-ribbon-mode-tabs).tg-board-modes.tg-segment>button[aria-selected="false"]:is(:hover,:focus-visible){
  opacity:1
}

/* Phone leaderboards are opened exclusively through the mobile Board
   navigation action (float-gui.js -> gamePresentation.openLeaderboard).
   The persistent strip is a separate app-shell sibling, so hiding the
   source-game ribbon alone does not remove it. Hide its entire overlay,
   including the ribbon wrapper, without affecting the full-board dialog. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) > .tg-persistent-leaderboard,
 body.float-ui .app-shell:not(.admin-mode) .tg-game-page .float-leader-ribbon{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
 }
}