:root{
  --mfm-scroll-size:12px;
  --mfm-scroll-rail-width:12px;
  --mfm-scroll-track:#0b0d0a;
  --mfm-scroll-track-line:#242720;
  --mfm-scroll-thumb:#666960;
  --mfm-scroll-thumb-edge:#353831;
  --mfm-scroll-hover:#8b7a42;
  --mfm-scroll-active:#4f6f59;
}

html,*{
  scrollbar-width:thin;
  scrollbar-color:var(--mfm-scroll-thumb) var(--mfm-scroll-track);
}

*::-webkit-scrollbar{
  width:var(--mfm-scroll-size);
  height:var(--mfm-scroll-size);
  background:#000;
}

*::-webkit-scrollbar-track{
  border:2px solid #1f221d;
  border-radius:0;
  background:
    repeating-linear-gradient(180deg,transparent 0 3px,var(--mfm-scroll-track-line) 3px 4px),
    var(--mfm-scroll-track);
  box-shadow:inset 0 0 0 1px #30332c;
}

*::-webkit-scrollbar-thumb{
  min-width:28px;
  min-height:28px;
  border:2px solid #000;
  border-radius:0;
  background:linear-gradient(90deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px calc(100% - 2px),var(--mfm-scroll-thumb-edge) calc(100% - 2px));
  box-shadow:inset 0 0 0 1px #7f8278;
}

*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#514725 0 2px,var(--mfm-scroll-hover) 2px calc(100% - 2px),#514725 calc(100% - 2px));
  box-shadow:inset 0 0 0 1px #a8975b;
}

*::-webkit-scrollbar-thumb:active{
  background:linear-gradient(90deg,#32483a 0 2px,var(--mfm-scroll-active) 2px calc(100% - 2px),#32483a calc(100% - 2px));
  box-shadow:inset 0 0 0 1px #6f9079;
}

*::-webkit-scrollbar-corner{
  border:2px solid #000;
  background:
    linear-gradient(45deg,transparent 40%,#242620 40% 60%,transparent 60%),
    var(--mfm-scroll-track);
}

:root{
  --mfm-scroll-content-gutter:14px;
  --mfm-scroll-content-gutter-wide:22px;
}

/* These panes use an app-drawn rail instead of relying on the operating
   system's auto-hiding scrollbar. That makes the rail and thumb visible even
   when the current content does not need to scroll, and prevents Firefox /
   Windows overlay-scrollbar settings from leaving a mysterious black gutter. */
[data-mfm-persistent-scrollbar]{
  --mfm-scroll-thumb-h:28px;
  --mfm-scroll-thumb-y:2px;
  overflow-y:auto!important;
  scrollbar-width:none!important;
  scrollbar-gutter:auto!important;
  padding-right:var(--mfm-scroll-content-gutter)!important;
  background-image:
    linear-gradient(90deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),
    repeating-linear-gradient(180deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px)!important;
  background-position:
    calc(100% - 2px) var(--mfm-scroll-thumb-y),
    calc(100% - 1px) 0!important;
  background-size:
    10px var(--mfm-scroll-thumb-h),
    var(--mfm-scroll-rail-width) 100%!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}

/* Dialog owners use the same rail implementation, but only expose its gutter
   and drawn track while their measured overflow state is true. Preserve the
   component's own background layers instead of replacing that presentation. */
[data-mfm-persistent-scrollbar][data-mfm-scrollbar-mode="auto"]{
  padding-right:0!important;
  background-image:var(--mfm-scroll-host-background-image,none)!important;
  background-position:var(--mfm-scroll-host-background-position,0% 0%)!important;
  background-size:var(--mfm-scroll-host-background-size,auto)!important;
  background-repeat:var(--mfm-scroll-host-background-repeat,repeat)!important;
  background-attachment:var(--mfm-scroll-host-background-attachment,scroll)!important;
}
[data-mfm-persistent-scrollbar][data-mfm-scrollbar-mode="auto"][data-mfm-scroll-overflow]{
  padding-right:var(--mfm-scroll-content-gutter)!important;
  background-image:
    linear-gradient(90deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),
    repeating-linear-gradient(180deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px),
    var(--mfm-scroll-host-background-image,none)!important;
  background-position:
    calc(100% - 2px) var(--mfm-scroll-thumb-y),
    calc(100% - 1px) 0,
    var(--mfm-scroll-host-background-position,0% 0%)!important;
  background-size:
    10px var(--mfm-scroll-thumb-h),
    var(--mfm-scroll-rail-width) 100%,
    var(--mfm-scroll-host-background-size,auto)!important;
  background-repeat:
    no-repeat,
    no-repeat,
    var(--mfm-scroll-host-background-repeat,repeat)!important;
  background-attachment:
    scroll,
    scroll,
    var(--mfm-scroll-host-background-attachment,scroll)!important;
}

/* Numeric right-aligned lists keep a wider content-side gutter before the
   persistent rail. */
:is(.room-list,.online-player-list,#leaderboardList)[data-mfm-persistent-scrollbar]{
  --mfm-scroll-content-gutter:var(--mfm-scroll-content-gutter-wide);
}

:has(> .online-player-list[data-mfm-persistent-scrollbar]){
  --mfm-scroll-content-gutter:var(--mfm-scroll-content-gutter-wide);
}

[data-mfm-persistent-scrollbar]::-webkit-scrollbar{
  width:0!important;
  height:0!important;
}

@media (pointer:coarse){
  :root{--mfm-scroll-size:10px}
}

[data-mfm-scroll-dragging]{cursor:ns-resize!important;user-select:none!important;-webkit-user-select:none!important}

[data-mfm-persistent-scrollbar][data-mfm-scrollbar-axis="both"]{padding-right:16px!important;padding-bottom:16px!important;background-image:linear-gradient(180deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),repeating-linear-gradient(90deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px),linear-gradient(90deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),repeating-linear-gradient(180deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px)!important;background-position:var(--mfm-scroll-thumb-x,2px) calc(100% - 3px),0 calc(100% - 2px),calc(100% - 3px) var(--mfm-scroll-thumb-y),calc(100% - 2px) 0!important;background-size:var(--mfm-scroll-thumb-w,28px) 10px,calc(100% - 16px) 12px,10px var(--mfm-scroll-thumb-h),12px calc(100% - 16px)!important;background-repeat:no-repeat!important}[data-mfm-scroll-dragging="x"]{cursor:ew-resize!important}

.mfm-scroll-overlay{
  position:absolute;z-index:10;pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),
    repeating-linear-gradient(90deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px),
    linear-gradient(90deg,var(--mfm-scroll-thumb-edge) 0 2px,var(--mfm-scroll-thumb) 2px 8px,var(--mfm-scroll-thumb-edge) 8px 10px),
    repeating-linear-gradient(180deg,var(--mfm-scroll-track) 0 3px,var(--mfm-scroll-track-line) 3px 4px),
    linear-gradient(var(--panel,#050605),var(--panel,#050605)),
    linear-gradient(var(--panel,#050605),var(--panel,#050605))!important;
  background-position:var(--mfm-scroll-thumb-x,2px) calc(100% - 3px),0 calc(100% - 2px),calc(100% - 3px) var(--mfm-scroll-thumb-y),calc(100% - 2px) 0,100% 0,0 100%!important;
  background-size:var(--mfm-scroll-thumb-w,28px) 10px,calc(100% - 16px) 12px,10px var(--mfm-scroll-thumb-h),12px calc(100% - 16px),16px 100%,100% 16px!important;
  background-repeat:no-repeat!important;
}